New: Radio and RadioGroup components

Adslot · Jun 5, 2018 · f10167d · f10167d
1 parent a8e9650
commit f10167d
Show file tree

Hide file tree

Showing 16 changed files with 609 additions and 72 deletions.
diff --git a/config/dev.js b/config/dev.js
@@ -12,6 +12,7 @@ const publicPath = '/docs/assets/';
 
 module.exports = merge(commonConfig, {
   entry: [
+    'babel-polyfill',
     // activate HMR for React (needs to be before everything except polyfills)
     'react-hot-loader/patch',
     // bundle the client for webpack-dev-server and connect to the provided endpoint

diff --git a/docs/components/Layout/index.jsx b/docs/components/Layout/index.jsx
@@ -16,6 +16,7 @@ import AlertExample from '../../examples/AlertExample';
 import CheckboxExample from '../../examples/CheckboxExample';
 import CheckboxGroupExample from '../../examples/CheckboxGroupExample';
 import RadioExample from '../../examples/RadioExample';
+import RadioGroupExample from '../../examples/RadioGroupExample';
 import SelectExample from '../../examples/SelectExample';
 import DatePickerExample from '../../examples/DatePickerExample';
 import BorderedWellExample from '../../examples/BorderedWellExample';
@@ -77,6 +78,7 @@ const componentsBySection = {
     'checkbox',
     'checkbox-group',
     'radio',
+    'radio-group',
     'select',
     'date-picker',
   ],
@@ -178,6 +180,7 @@ class PageLayout extends React.Component {
             <CheckboxExample />
             <CheckboxGroupExample />
             <RadioExample />
+            <RadioGroupExample />
             <SelectExample />
             <DatePickerExample />
 

diff --git a/docs/examples/CheckboxExample.jsx b/docs/examples/CheckboxExample.jsx
@@ -36,6 +36,15 @@ const exampleProps = {
     {
       label: '',
       propTypes: [
+        {
+          propType: 'id',
+          type: 'string',
+        },
+        {
+          propType: 'className',
+          type: 'string',
+          note: 'This class will be applied to the input element',
+        },
         {
           propType: 'name',
           type: 'string',
@@ -47,23 +56,24 @@ const exampleProps = {
         {
           propType: 'value',
           type: 'string',
-          note: 'Required.',
         },
         {
           propType: 'checked',
           type: 'bool',
+          defaultValue: <code>false</code>,
         },
         {
           propType: 'disabled',
           type: 'bool',
+          defaultValue: <code>false</code>,
         },
         {
           propType: 'dts',
           type: 'string',
         },
         {
           propType: 'onChange',
-          type: 'function',
+          type: 'func',
         },
       ],
     },

diff --git a/docs/examples/CheckboxGroupExample.jsx b/docs/examples/CheckboxGroupExample.jsx
@@ -35,9 +35,22 @@ const exampleProps = {
     {
       label: '',
       propTypes: [
+        {
+          propType: 'id',
+          type: 'string',
+        },
+        {
+          propType: 'className',
+          type: 'string',
+        },
         {
           propType: 'name',
           type: 'string',
+          note: (
+            <span>
+              <strong>Required.</strong> All Checkboxes within this group will have the same name
+            </span>
+          ),
         },
         {
           propType: 'value',
@@ -46,11 +59,18 @@ const exampleProps = {
         },
         {
           propType: 'children',
-          type: '<Checkbox /> elements',
+          type: 'arrayOf <Checkbox /> elements',
+          note: <strong>Required.</strong>,
         },
         {
           propType: 'onChange',
-          type: 'Function',
+          type: 'func',
+          note: 'Triggers when selection changes.',
+        },
+        {
+          propType: 'dts',
+          type: 'string',
+          note: 'render `data-test-selector` onto the component. It can be useful for testing.',
         },
       ],
     },

diff --git a/docs/examples/RadioExample.jsx b/docs/examples/RadioExample.jsx
@@ -1,48 +1,74 @@
 import React from 'react';
 import Example from '../components/Example';
-import { Radio, RadioGroup } from '../../src';
+import Radio from 'adslot-ui/Radio';
 
 class RadioExample extends React.PureComponent {
+  onChange(event) {
+    _.noop();
+  }
+
   render() {
     return (
-      <RadioGroup name="yesNo" className="radiogroup-stacked">
-        <Radio label="Yes" value="true" />
-        <Radio label="No" value="false" />
-      </RadioGroup>
+      <Radio
+        name="Radio button name"
+        label="Radio button label"
+        dts="radio-button-data-test-selector"
+        value="Radio button value"
+        onChange={this.onChange}
+      />
     );
   }
 }
 
 const exampleProps = {
   componentName: 'Radio',
-  designNotes: (
-    <p>
-      <span className="text-bold">Radio buttons</span> used for making a single selection from multiple options. Only
-      one selection can ever be made from the radio button group at a time.
-    </p>
-  ),
-  notes: (
-    <p>
-      See <a href="https://github.com/luqin/react-icheck">React iCheck Documentation</a>
-    </p>
-  ),
-  exampleCodeSnippet: `
-  <RadioGroup name="yesNo" className="radiogroup-stacked">
-    <Radio label="Yes" value="true" />
-    <Radio label="No" value="false" />
-  </RadioGroup>`,
+  notes: '',
+  exampleCodeSnippet: `<Radio
+  name="Radio button name"
+  label="Radio button label"
+  dts="radio-button-data-test-selector"
+  value="Radio button value"
+  onChange={this.onChange}
+/>`,
   propTypeSectionArray: [
     {
       propTypes: [
+        {
+          propType: 'id',
+          type: 'string',
+        },
+        {
+          propType: 'className',
+          type: 'string',
+          note: 'This class will be applied to the input element',
+        },
+        {
+          propType: 'name',
+          type: 'string',
+        },
         {
           propType: 'label',
-          type: 'node',
-          note: 'Usually fine to rely on a string but can pass HTML e.g. for a url.',
+          type: 'string',
         },
         {
           propType: 'value',
           type: 'string',
         },
+        {
+          propType: 'dts',
+          type: 'string',
+          note: 'render `data-test-selector` onto the component. It can be useful for testing.',
+        },
+        {
+          propType: 'disabled',
+          type: 'bool',
+          defaultValue: <code>false</code>,
+        },
+        {
+          propType: 'checked',
+          type: 'bool',
+          defaultValue: <code>false</code>,
+        },
         {
           propType: 'onChange',
           type: 'func',

diff --git a/docs/examples/RadioGroupExample.jsx b/docs/examples/RadioGroupExample.jsx
@@ -0,0 +1,89 @@
+import React from 'react';
+import Example from '../components/Example';
+import RadioGroup from 'adslot-ui/RadioGroup';
+import Radio from 'adslot-ui/Radio';
+
+class RadioGroupExample extends React.PureComponent {
+  onChangeGroup(event) {
+    _.noop();
+  }
+
+  onChangeIndividual(event) {
+    _.noop();
+  }
+
+  render() {
+    return (
+      <RadioGroup name="hobbies" value="badminton" onChange={this.onChangeGroup} dts="radio-group-dts">
+        <Radio value="swimming" label="Swimming" dts="radio-dts" />
+        <Radio value="soccer" label="Soccer" onChange={this.onChangeIndividual} />
+        <Radio value="badminton" label="Badminton" />
+      </RadioGroup>
+    );
+  }
+}
+
+const exampleProps = {
+  componentName: 'RadioGroup',
+  designNotes: (
+    <p>
+      <span className="text-bold">Radio buttons</span> used for making a single selection from multiple options. Only
+      one selection can ever be made from the radio button group at a time.
+    </p>
+  ),
+  notes: '',
+  exampleCodeSnippet: `<RadioGroup name="hobbies" value="badminton" onChange={this.onChangeGroup} dts="radio-group-dts">
+  <Radio value="swimming" label="Swimming" dts="radio-dts" />
+  <Radio value="soccer" label="Soccer" onChange={this.onChangeIndividual} />
+  <Radio value="badminton" label="Badminton" />
+</RadioGroup>`,
+  propTypeSectionArray: [
+    {
+      propTypes: [
+        {
+          propType: 'id',
+          type: 'string',
+        },
+        {
+          propType: 'className',
+          type: 'string',
+        },
+        {
+          propType: 'name',
+          type: 'string',
+          note: (
+            <span>
+              <strong>Required.</strong> All Radio buttons within this group will have the same name
+            </span>
+          ),
+        },
+        {
+          propType: 'value',
+          type: 'string',
+          note: 'value of the selected radio button, should be one of children <Radio /> values',
+        },
+        {
+          propType: 'children',
+          type: 'arrayOf <Radio /> elements',
+          note: <strong>Required.</strong>,
+        },
+        {
+          propType: 'onChange',
+          type: 'func',
+          note: 'Triggers when selection changes.',
+        },
+        {
+          propType: 'dts',
+          type: 'string',
+          note: 'render `data-test-selector` onto the component. It can be useful for testing.',
+        },
+      ],
+    },
+  ],
+};
+
+export default () => (
+  <Example {...exampleProps}>
+    <RadioGroupExample />
+  </Example>
+);
diff --git a/src/components/adslot-ui/Checkbox/index.jsx b/src/components/adslot-ui/Checkbox/index.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { expandDts } from 'lib/utils';
-
+import { expandDts } from '../../../lib/utils';
+import { checkboxPropTypes } from '../../prop-types/inputPropTypes';
 import './styles.scss';
 
 class Checkbox extends React.Component {
@@ -28,29 +27,25 @@ class Checkbox extends React.Component {
   }
 
   render() {
-    const { name, value, label, dts } = this.props;
-    const optional = {
-      id: this.props.id ? this.props.id : null,
-      className: this.props.className ? this.props.className : null,
+    const { name, value, label, dts, disabled, id, className } = this.props;
+    const checkboxInputProps = {
+      type: 'checkbox',
+      name,
+      checked: this.state.checked,
+      disabled,
+      onChange: this.onChangeDefault,
+      value,
+      id,
+      className,
+      'data-name': this.props['data-name'],
     };
-    if (this.props['data-name']) {
-      optional['data-name'] = this.props['data-name'];
-    }
+
     return (
-      <div className="checkbox-component">
+      <div className="checkbox-component" {...expandDts(dts)}>
         <span className={`selection-component-icon icheckbox${this.state.checked ? ' checked' : ''}`} />
         <label>
           <div className="checkbox-component-input-container">
-            <input
-              type="checkbox"
-              name={name}
-              value={value}
-              onChange={this.onChangeDefault}
-              disabled={this.props.disabled}
-              checked={this.state.checked}
-              {...expandDts(dts)}
-              {...optional}
-            />
+            <input {...checkboxInputProps} />
           </div>
           {label ? <span>{label}</span> : null}
         </label>
@@ -59,18 +54,7 @@ class Checkbox extends React.Component {
   }
 }
 
-Checkbox.propTypes = {
-  id: PropTypes.string,
-  className: PropTypes.string,
-  'data-name': PropTypes.string,
-  name: PropTypes.string,
-  label: PropTypes.node,
-  value: PropTypes.string,
-  dts: PropTypes.string,
-  disabled: PropTypes.bool,
-  checked: PropTypes.bool,
-  onChange: PropTypes.func,
-};
+Checkbox.propTypes = checkboxPropTypes;
 
 Checkbox.defaultProps = {
   dts: '',