Ux 603 New Radio component

packages/Radio/README.md

@@ -0,0 +1,50 @@
+## 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.
+
+### Installation
+
+`> npm install --save @paprika/radio`
+or
+`> yarn add @paprika/radio`
+
+### Usage
+
+```js
+import Radio from "@paprika/radio";
+
+<Radio.Group
+  onChange={activeIndex => {
+    // get values from the data using index
+  }}
+>
+  <Radio>Radio 1</Radio>
+  <Radio>Radio 2</Radio>
+  <Radio>Radio 3</Radio>
+  <Radio>Radio 4</Radio>
+</Radio.Group>;
+```
+
+### Props
+
+#### Radio.Group
+
+-a11yText
+-canDeselect
+-children
+-isDisabled
+-onChange
+-size
+
+[More detail about these props](https://github.com/acl-services/paprika/blob/master/packages/Radio/src/components/Group/Group.js)
+
+#### Radio
+
+-a11yText
+-canDeselect
+-children
+-isChecked
+-isDisabled
+-defaultIsChecked
+
+[More detail about these props](https://github.com/acl-services/paprika/blob/master/packages/Radio/src/Radio.js)

packages/Radio/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@paprika/radio",
+  "version": "0.1.0",
+  "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",
+    "nanoid": "^2.1.7",
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4",
+    "styled-components": "^4.2.0"
+  }
+}

packages/Radio/src/Radio.js

@@ -0,0 +1,98 @@
+import React from "react";
+import PropTypes from "prop-types";
+import nanoid from "nanoid";
+import CheckIcon from "@paprika/icon/lib/Check";
+import radioStyles from "./Radio.styles";
+import Group from "./components/Group";
+import RadioContext from "./RadioContext";
+
+const propTypes = {
+  /** Used for aria-label on the radio input  */
+  a11yText: PropTypes.string,
+  /** Used for label contents */
+  children: PropTypes.node,
+  /* Controls if the radio is checked or not, never combine it with defaultIsChecked */
+  isChecked: PropTypes.bool,
+  /** Describe if the radio is disabled or not */
+  isDisabled: PropTypes.bool,
+  /** Describe if the radio started as checked or not */
+  defaultIsChecked: PropTypes.bool,
+  /** Describe if the radio started as selected or not */
+  canDeselect: PropTypes.bool,
+};
+
+const defaultProps = {
+  a11yText: null,
+  canDeselect: false,
+  children: null,
+  isChecked: false,
+  isDisabled: false,
+  defaultIsChecked: false,
+};
+
+function Radio(props) {
+  const { a11yText, children, isChecked, isDisabled, ...moreProps } = props;
+  const { handleRadioClick, index, checkedIndex, isGroupDisabled, canDeselect, name, size } = React.useContext(
+    RadioContext
+  );
+  const radioId = React.useRef(nanoid()).current;
+  const inputRef = React.useRef(null);
+
+  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) {
+      handleRadioClick(index);
+    }
+  };
+
+  const styleProps = {
+    hasLabel: !!children,
+    size,
+  };
+
+  const inputProps = {
+    readOnly: true,
+    onClick: () => handleRadioClick(index),
+    checked: checkedIndex === index,
+    disabled: isGroupDisabled || isDisabled,
+    id: radioId,
+    name,
+    onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp,
+    ref: inputRef,
+    type: "radio",
+  };
+  if (a11yText) inputProps["aria-label"] = a11yText;
+  return (
+    <div data-pka-anchor="radio" css={radioStyles} {...styleProps} {...moreProps}>
+      <input {...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};
+
+    & + 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};
+      }
+    }
+
+    &:focus + label::before {
+      border-color: ${tokens.highlight.active.noBorder.borderColor};
+      box-shadow: ${tokens.highlight.active.noBorder.boxShadow};
+    }
+  }
+`;
+
+export default radioStyles;

packages/Radio/src/RadioContext.js

@@ -0,0 +1,5 @@
+import React from "react";
+
+const RadioContext = React.createContext();
+
+export default RadioContext;