Ux 603 New Radio component

packages/Radio/README.md

@@ -0,0 +1,31 @@
+## Radio
+
+The `<Radio>` component displays a radio input and label text beside it. When clicked it selects the input and deselects any other radio input in its group. It can also have an indeterminate state which can be used to group checkboxes.
+
+### Installation
+
+`> npm install --save @paprika/radio`
+or
+`> yarn add @paprika/radio`
+
+### Usage
+
+```js
+import Radio from "@paprika/radio";
+
+<Radio onChange={handleChange} checkState={checkedStateValue>
+  Radio 1
+</Radio>;
+```
+
+### Props
+
+- a11yText
+- children
+- isDisabled
+- isChecked
+- canDeselect
+- onClick
+- size ("small, "medium", "large")
+
+[More detail about these props](https://github.com/acl-services/paprika/blob/master/packages/Checkbox/src/Radio.js)

packages/Radio/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@paprika/radio",
+  "version": "0.0.1",
+  "description": "Radio component",
+  "author": "@paprika",
+  "license": "MIT",
+  "main": "lib/index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/acl-services/paprika/tree/master/packages/radio"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@babel/runtime-corejs2": "^7.3.1",
+    "@paprika/helpers": "^0.2.3",
+    "@paprika/icon": "^0.2.0",
+    "@paprika/stylers": "^0.2.2",
+    "@paprika/tokens": "^0.1.9",
+    "prop-types": "^15.7.2",
+    "uuid": "^3.3.2"
+  },
+  "peerDependencies": {
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4",
+    "styled-components": "^4.2.0"
+  }
+}

packages/Radio/src/Radio.js

@@ -0,0 +1,91 @@
+import React from "react";
+import PropTypes from "prop-types";
+import uuid from "uuid/v4";
+import { ShirtSizes } from "@paprika/helpers/lib/customPropTypes";
+import CheckIcon from "@paprika/icon/lib/Check";
+import radioStyles from "./Radio.styles";
+import Group from "./components/Group";
+
+const propTypes = {
+  a11yText: PropTypes.string,
+  children: PropTypes.node,
+  isChecked: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  canDeselect: PropTypes.bool,
+  onClick: PropTypes.func.isRequired,
+  size: PropTypes.oneOf(ShirtSizes.DEFAULT),
+};
+
+const defaultProps = {
+  a11yText: null,
+  isChecked: false,
+  canDeselect: false,
+  children: null,
+  isDisabled: false,
+  size: ShirtSizes.MEDIUM,
+};
+
+const Radio = props => {
+  const { a11yText, children, isChecked, canDeselect, isDisabled, size, onClick, ...moreProps } = props;
+
+  const radioId = React.useRef(uuid()).current;
+  const inputRef = React.useRef(null);
+
+  const styleProps = {
+    hasLabel: !!children,
+    size,
+  };
+
+  const handleKeyDown = event => {
+    if (
+      // Prevent scrolling the page with a spacerbar keypress
+      event.key === " " ||
+      // Prevent submitting forms in IE/Edge with and enter keypress
+      event.key === "Enter"
+    ) {
+      event.preventDefault();
+    }
+  };
+
+  const handleKeyUp = event => {
+    const isTriggerKey = event.key === " "; // space key
+    if (!isDisabled && isTriggerKey) {
+      onClick(event);
+    }
+  };
+
+  const inputProps = {};
+  if (a11yText) inputProps["aria-label"] = a11yText;
+  return (
+    <div data-pka-anchor="radio" css={radioStyles} {...styleProps} {...moreProps}>
+      <input
+        onChange={() => {}}
+        onClick={onClick}
+        checked={isChecked}
+        disabled={isDisabled}
+        id={radioId}
+        onKeyUp={handleKeyUp}
+        onKeyDown={handleKeyDown}
+        ref={inputRef}
+        type="radio"
+        {...inputProps}
+      />
+      <label onKeyUp={handleKeyUp} className={canDeselect ? "deselectable" : ""} htmlFor={radioId}>
+        {children}
+
+        {canDeselect ? (
+          <CheckIcon className="radio-icon" aria-hidden data-pka-anchor="radio.icon.check" />
+        ) : (
+          <div className="radio-icon radio-solid-background" data-pka-anchor="radio.icon.check" />
+        )}
+      </label>
+    </div>
+  );
+};
+
+Radio.displayName = "Radio";
+Radio.propTypes = propTypes;
+Radio.defaultProps = defaultProps;
+Radio.Group = Group;
+
+export default Radio;

packages/Radio/src/Radio.styles.js

@@ -0,0 +1,196 @@
+import { css } from "styled-components";
+import { toInt, fontSizeValue, lineHeightValue, z } from "@paprika/stylers/lib/helpers";
+import { boxSizingStyles, visuallyHidden } from "@paprika/stylers/lib/includes";
+import { ShirtSizes } from "@paprika/helpers/lib/customPropTypes";
+import tokens from "@paprika/tokens";
+
+const getLabelLeftPadding = (radioSize, hasLabel) => {
+  return hasLabel ? `${toInt(radioSize) + toInt(tokens.space)}px` : radioSize;
+};
+
+const smallRadioSize = tokens.radio.sizeSm;
+const mediumRadioSize = tokens.radio.sizeMd;
+const largeRadioSize = tokens.radio.sizeLg;
+
+const getHalfSizeCss = sizeCss => `${toInt(sizeCss) / 2}px`;
+const smallRadioHalfSize = getHalfSizeCss(smallRadioSize);
+const mediumRadioHalfSize = getHalfSizeCss(mediumRadioSize);
+const largeRadioHalfSize = getHalfSizeCss(largeRadioSize);
+
+const styles = {
+  [ShirtSizes.SMALL]: {
+    baseFontSize: {
+      fontSize: `${fontSizeValue(-1)}px`,
+    },
+    radioStyles: {
+      height: smallRadioSize,
+      width: smallRadioSize,
+      borderRadius: smallRadioHalfSize,
+    },
+    radioIconBackgroundStyles: {
+      borderRadius: "4px",
+      height: "8px",
+      top: "4px",
+      width: "8px",
+    },
+    radioIconStyles: {
+      fontSize: `${fontSizeValue(-4)}px`,
+      height: smallRadioSize,
+      left: smallRadioHalfSize,
+    },
+    labelStyles: hasLabel => {
+      return {
+        minHeight: smallRadioSize,
+        padding: `0 0 0 ${getLabelLeftPadding(smallRadioSize, hasLabel)}`,
+      };
+    },
+  },
+  [ShirtSizes.MEDIUM]: {
+    baseFontSize: {
+      fontSize: `${fontSizeValue()}px`,
+    },
+    radioStyles: {
+      height: mediumRadioSize,
+      width: mediumRadioSize,
+      borderRadius: mediumRadioHalfSize,
+    },
+    radioIconBackgroundStyles: {
+      borderRadius: "6px",
+      height: "10px",
+      top: "5px",
+      width: "10px",
+    },
+    radioIconStyles: {
+      fontSize: `${fontSizeValue(-2)}px`,
+      height: mediumRadioSize,
+      left: mediumRadioHalfSize,
+    },
+    labelStyles: hasLabel => {
+      return {
+        minHeight: mediumRadioSize,
+        padding: `1px 0 0 ${getLabelLeftPadding(mediumRadioSize, hasLabel)}`,
+      };
+    },
+  },
+  [ShirtSizes.LARGE]: {
+    baseFontSize: {
+      fontSize: `${fontSizeValue()}px`,
+    },
+    radioStyles: {
+      height: largeRadioSize,
+      width: largeRadioSize,
+      borderRadius: largeRadioHalfSize,
+    },
+    radioIconBackgroundStyles: {
+      borderRadius: "6px",
+      height: "12px",
+      top: "6px",
+      width: "12px",
+    },
+    radioIconStyles: {
+      fontSize: `${fontSizeValue()}px`,
+      height: largeRadioSize,
+      left: largeRadioHalfSize,
+    },
+    labelStyles: hasLabel => {
+      return {
+        minHeight: largeRadioSize,
+        padding: `3px 0 0 ${getLabelLeftPadding(largeRadioSize, hasLabel)}`,
+      };
+    },
+  },
+};
+
+const radioStyles = css`
+  ${boxSizingStyles};
+  ${({ size }) => styles[size].baseFontSize};
+  line-height: ${({ hasLabel }) => (hasLabel ? lineHeightValue(-1) : "0")};
+  margin: ${tokens.space} 0;
+  position: relative;
+
+  input[type="radio"] {
+    ${visuallyHidden};
+
+    &:focus + label::before {
+      box-shadow: ${tokens.highlight.active.noBorder.boxShadow};
+      border-color: ${tokens.highlight.active.noBorder.borderColor};
+    }
+
+    & + label {
+      cursor: pointer;
+      display: inline-block;
+      margin: 0;
+      ${({ size, hasLabel }) => styles[size].labelStyles(hasLabel)};
+      position: relative;
+    }
+
+    & + label::before,
+    & + label > .radio-icon {
+      position: absolute;
+      top: 0;
+    }
+
+    & + label::before {
+      background: ${tokens.color.white};
+      border: 2px solid ${tokens.border.color};
+      content: "";
+      left: 0;
+      ${z(1)};
+      ${({ size }) => styles[size].radioStyles};
+    }
+
+    & + label:hover::before {
+      border: 2px solid ${tokens.color.black};
+    }
+
+    & + label > .radio-icon {
+      color: ${tokens.color.black};
+      ${({ size }) => styles[size].radioIconStyles};
+      opacity: 0;
+      pointer-events: none;
+      transform: translateX(-50%);
+      transition: opacity 0.15s ease-out;
+      ${z(2)};
+    }
+
+    & + label > .radio-solid-background {
+      background-color: ${tokens.color.black};
+      ${({ size }) => styles[size].radioIconBackgroundStyles};
+    }
+
+    &:checked {
+      & + label.deselectable:hover:before {
+        background: ${tokens.color.blackLighten60};
+      }
+      & + label::before {
+        border: 2px solid ${tokens.color.black};
+      }
+    }
+
+    &:checked + label > [data-pka-anchor="radio.icon.check"] {
+      opacity: 1;
+    }
+
+    &:disabled {
+      & + label,
+      & ~ .radio-icon {
+        cursor: not-allowed;
+        opacity: 0.5;
+        transition: none;
+      }
+      &:checked {
+        & + label:hover::before {
+          border: 2px solid ${tokens.color.black};
+        }
+        & + label.deselectable:hover:before {
+          background-color: inherit;
+        }
+      }
+      & + label:hover::before {
+        border: 2px solid ${tokens.color.blackLighten60};
+      }
+    }
+  }
+`;
+
+export default radioStyles;