Merge pull request #215 from jilliankeenan/PDS-40

(PDS-40) Radiobutton Component

Author: jilliankeenan

packages/react-components/source/index.js

@@ -28,6 +28,7 @@ import Tabs from './react/library/tabs';
 import Breadcrumb from './react/library/breadcrumb';
 import ConfirmationModal from './react/library/confirmation-modal';
 import Code from './react/library/code';
+import RadioButton from './react/library/radiobutton';
 
 export {
   ActionSelect,
@@ -57,4 +58,5 @@ export {
   Breadcrumb,
   ConfirmationModal,
   Code,
+  RadioButton,
 };

packages/react-components/source/react/library/radiobutton/RadioButton.js

@@ -0,0 +1,86 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+import Icon from '../icon';
+
+import Text from '../text';
+
+const propTypes = {
+  /** Name of the input */
+  name: PropTypes.string.isRequired,
+  /** Human friendly label */
+  label: PropTypes.string.isRequired,
+  /** Boolean input value determining if the checkbox is checked or not */
+  value: PropTypes.bool,
+  /** Is the input disabled */
+  disabled: PropTypes.bool,
+  /** Form error, causing element to render red when present */
+  error: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  /** Ref method passed to the inner input element */
+  inputRef: PropTypes.func,
+  /** Change handler. Passed in order: new value, original event. Additionally, other event handlers and and props are propagated to the inner input element for use as needed */
+  onChange: PropTypes.func,
+  /** Custom user-provided className */
+  className: PropTypes.string,
+  /** Custom user-provided inline styles */
+  style: PropTypes.shape({}),
+};
+
+const defaultProps = {
+  value: false,
+  disabled: false,
+  error: false,
+  onChange() {},
+  inputRef() {},
+  className: '',
+  style: {},
+};
+/** Inner radiobutton dot svg  */
+const radioDot = {
+  viewBox: '0 0 16 16',
+  svg: <circle r="4" cy="8" cx="8" strokeWidth="0" />,
+};
+/**
+ * The RadioButton is a lightly styled wrapper around an html radio input.
+ */
+const RadioButton = ({
+  name,
+  value,
+  label,
+  error,
+  className,
+  style,
+  inputRef,
+  onChange,
+  ...otherProps
+}) => (
+  <Text
+    as="label"
+    size="small"
+    htmlFor={name}
+    className={classNames('rc-radiobutton-input', className)}
+    style={style}
+  >
+    <div className="rc-radiobutton-container">
+      <input
+        type="radio"
+        id={name}
+        name={name}
+        checked={value}
+        ref={inputRef}
+        className={classNames('rc-radiobutton', {
+          'rc-radiobutton-error': error,
+        })}
+        onChange={e => onChange(e.target.checked, e)}
+        {...otherProps}
+      />
+      <Icon svg={radioDot.svg} viewBox={radioDot.viewBox} />
+    </div>
+    {label}
+  </Text>
+);
+
+RadioButton.propTypes = propTypes;
+RadioButton.defaultProps = defaultProps;
+
+export default RadioButton;

packages/react-components/source/react/library/radiobutton/RadioButton.md

@@ -0,0 +1,67 @@
+## Overview
+
+The `Radio Button` component is a lightly styled wrapper around an HTML radio input. It leaves most auxiliary functionality to the [`Form.Field`](#/React%20Components/FormField) wrapper. We recommend that in most cases the `Radio Button` is used through the `Form.Field` component to ensure complete design consistency, but there may be some cases in which a pure RadioButton element is desired.
+
+### States and interaction
+
+Radio buttons provide built in support for hover, active, and focused interactions. All radio buttons also provide error and disabled states as needed.
+
+```jsx
+const exampleStyle = { marginRight: 10 };
+const [value, setValue] = React.useState(0);
+
+<div>
+  <RadioButton
+    name="radiobutton-ex-unchecked"
+    label="Unchecked"
+    style={exampleStyle}
+    value={value === 0}
+    onChange={() => setValue(0)}
+  />
+  <RadioButton
+    name="radiobutton-ex-checked"
+    label="Checked"
+    style={exampleStyle}
+    value={value === 1}
+    onChange={() => setValue(1)}
+  />
+  <RadioButton
+    name="radiobutton-ex-disabled"
+    label="Disabled"
+    style={exampleStyle}
+    value={value === 2}
+    onChange={() => setValue(2)}
+    disabled
+  />
+  <RadioButton
+    name="radiobutton-ex-error"
+    label="Error"
+    style={exampleStyle}
+    value={value === 3}
+    onChange={() => setValue(3)}
+    error
+  />
+</div>;
+```
+
+## Basic use
+
+When the radio button is used within a [Form](#Form) component, the value state is either tracked or controlled through the Form component.
+
+### Event handling
+
+When the radio button is used outside of a [Form](#Form) component, the user is responsible for managing value state.
+
+```jsx
+<RadioButton
+  name="radiobutton-ex-event-handling"
+  label="Radio button label is also clickable"
+  value={state.checked}
+  onChange={checked => setState({ checked })}
+/>
+```
+
+## Related
+
+- [Form](#/React%20Components/Form)
+- [Form.Field](#/React%20Components/FormField)

packages/react-components/source/react/library/radiobutton/index.js

@@ -0,0 +1,3 @@
+import RadioButton from './RadioButton';
+
+export default RadioButton;

packages/react-components/source/scss/library/components/_radiobutton.scss

@@ -0,0 +1,83 @@
+.rc-radiobutton-input {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+}
+
+.rc-radiobutton-input:not(:last-of-type) {
+  margin-bottom: $puppet-common-spacing-base * 3;
+}
+
+.rc-radiobutton-container {
+  height: $puppet-common-spacing-base * 4;
+  margin-right: $puppet-common-spacing-base * 2;
+  position: relative;
+}
+
+// https://github.com/stylelint/stylelint/issues/331#issuecomment-127043187
+/* stylelint-disable property-no-vendor-prefix */
+/* stylelint-disable length-zero-no-unit */
+.rc-radiobutton {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border: $puppet-common-border;
+  border-radius: $puppet-common-border-radius * 2;
+  cursor: pointer;
+  height: $puppet-common-spacing-base * 4;
+  margin: 0;
+  outline: none;
+  padding: 0;
+  width: $puppet-common-spacing-base * 4;
+}
+
+.rc-radiobutton + .rc-icon {
+  display: none;
+  height: $puppet-common-spacing-base * 4;
+  left: 0px;
+  pointer-events: none;
+  position: absolute;
+  top: 0px;
+  width: $puppet-common-spacing-base * 4;
+}
+
+.rc-radiobutton:focus {
+  box-shadow: $puppet-common-focus-outline;
+}
+
+.rc-radiobutton:hover {
+  border: $puppet-shared-input-border-hover;
+}
+
+.rc-radiobutton-error,
+.rc-radiobutton-error:hover {
+  border: $puppet-shared-input-border-error;
+}
+
+.rc-radiobutton-error.rc-radiobutton:checked + .rc-icon {
+  fill: $puppet-r600;
+}
+
+.rc-radiobutton:checked + .rc-icon {
+  display: block;
+  fill: $puppet-b500;
+}
+
+.rc-radiobutton:hover + .rc-icon {
+  fill: $puppet-b400;
+}
+
+.rc-radiobutton:disabled,
+.rc-radiobutton:disabled:hover {
+  border: $puppet-common-border;
+  cursor: default;
+  opacity: $puppet-common-disabled-opacity;
+
+  + .rc-icon {
+    fill: $puppet-b500;
+    opacity: $puppet-common-disabled-opacity;
+  }
+}
+
+/* stylelint-enable length-zero-no-unit */
+/* stylelint-enable property-no-vendor-prefix */

packages/react-components/source/scss/library/components/forms/_checkbox.scss

@@ -54,6 +54,10 @@
   border: $puppet-shared-input-border-error;
 }
 
+.rc-checkbox-error.rc-checkbox:checked + .rc-icon {
+  fill: $puppet-r600;
+}
+
 .rc-checkbox:checked + .rc-icon {
   display: block;
   fill: $puppet-b500;

packages/react-components/source/scss/library/ui.scss

@@ -29,3 +29,4 @@
 @import 'components/table';
 @import 'components/breadcrumb';
 @import 'components/code';
+@import 'components/radiobutton';

packages/react-components/test/radiobutton/radiobutton.js

@@ -0,0 +1,68 @@
+import jsdom from 'mocha-jsdom';
+import sinon from 'sinon';
+import { mount, shallow } from 'enzyme';
+import { expect } from 'chai';
+import React from 'react';
+
+import RadioButton from '../../source/react/library/radiobutton/RadioButton';
+
+describe('<RadioButton />', () => {
+  jsdom({ skipWindowCheck: true });
+
+  const requiredProps = {
+    name: 'test-name',
+    label: 'test-label',
+  };
+
+  it('propagates the provided className to the top level element', () => {
+    expect(
+      shallow(<RadioButton {...requiredProps} className="test-class" />),
+    ).to.have.className('test-class');
+  });
+
+  it('propagates provided inline style to the top level element', () => {
+    expect(
+      shallow(<RadioButton {...requiredProps} style={{ marginTop: 10 }} />),
+    ).to.have.style('margin-top', '10px');
+  });
+
+  it('should have an accessible ref method to the inner input element', async () => {
+    const radiobutton = await new Promise(resolve => {
+      mount(<RadioButton {...requiredProps} inputRef={resolve} />);
+    });
+
+    expect(radiobutton.nodeName).to.equal('INPUT');
+  });
+
+  it('should respond to change if onChange is provided', () => {
+    const onChange = sinon.spy();
+    const wrapper = mount(
+      <RadioButton {...requiredProps} onChange={onChange} />,
+    );
+
+    wrapper.find('input').simulate('change');
+
+    expect(onChange.called).to.equal(true);
+  });
+
+  it('should respond to focus if onFocus is provided', () => {
+    const onFocus = sinon.spy();
+    const wrapper = mount(<RadioButton {...requiredProps} onFocus={onFocus} />);
+
+    wrapper.find('input').simulate('focus');
+
+    expect(onFocus.called).to.equal(true);
+  });
+
+  it('should have className corresponding to a present error if provided', () => {
+    expect(
+      shallow(<RadioButton {...requiredProps} error />).find('input'),
+    ).to.have.className('rc-radiobutton-error');
+  });
+
+  it('should have an attribute corresponding to being disabled', () => {
+    expect(shallow(<RadioButton {...requiredProps} disabled />).find('input'))
+      .to.have.prop('disabled')
+      .to.equal(true);
+  });
+});