Add CheckboxGroup and use for article sections

src/atoms/Checkbox.js

+import React from 'react'
+import classnames from 'classnames'
+import classes from './Checkbox.local.css'
+
+const Checkbox = ({ inline, name, value, label, checked, required, onChange }) => (
+  <label className={classnames(classes.root, {
+    [classes.inline]: inline
+  })}>
+    <input
+      className={classes.input}
+      type="checkbox"
+      name={name}
+      value={value}
+      checked={checked || false}
+      required={required}
+      onChange={onChange}/>
+    {label}
+  </label>
+)
+
+export default Checkbox

src/atoms/Checkbox.local.css

+.root {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.inline {
+  display: inline-flex;
+}
+
+.inline:not(:last-child) {
+  margin-right: 1rem;
+}
+
+.root:not(.inline):not(:last-child) {
+  margin-bottom: 0.5rem;
+}
+
+.input {
+  margin-right: 0.25rem;
+}

src/atoms/Checkbox.md

+A checkbox.
+
+```js
+initialState = { checked: null };
+
+<Checkbox 
+  name="checkbox" 
+  checked={state.checked}
+  onChange={event => setState({ checked: event.target.checked })}/>
+```
+
+A checked checkbox.
+
+```js
+initialState = { checked: true };
+
+<Checkbox 
+  name="checkbox-checked" 
+  checked={state.checked}
+  onChange={event => setState({ checked: event.target.checked })}/>
+```
+
+A checkbox with a label.
+
+```js
+initialState = { checked: false };
+
+<Checkbox 
+  name="checkbox-labelled" 
+  checked={state.checked}
+  label="Foo"
+  onChange={event => setState({ checked: event.target.checked })}/>
+```

src/atoms/Menu.js

@@ -2,6 +2,8 @@ import React from 'react'
 import classnames from 'classnames'
 import classes from './Menu.local.css'
 
+// TODO: match the width of the container to the width of the widest option?
+
 class Menu extends React.Component {
   constructor (props) {
     super(props)

src/atoms/Radio.js

 import React from 'react'
+import classnames from 'classnames'
 import classes from './Radio.local.css'
 
-const Radio = ({ name, value, label, checked, required, onChange }) => (
-  <label className={classes.root}>
+const Radio = ({ inline, name, value, label, checked, required, onChange }) => (
+  <label className={classnames(classes.root, {
+    [classes.inline]: inline
+  })}>
     <input
       className={classes.input}
       type="radio"

src/atoms/Radio.local.css

 .root {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   cursor: pointer;
 }
 
-.root:not(:last-child) {
+.inline {
+  display: inline-flex;
+}
+
+.inline:not(:last-child) {
   margin-right: 1rem;
 }
 
+.root:not(.inline):not(:last-child) {
+  margin-bottom: 0.5rem;
+}
+
 .input {
   margin-right: 0.25rem;
 }

src/atoms/Radio.md

@@ -2,7 +2,7 @@ A radio button.
 
 ```js
 <Radio 
-  name="foo" 
+  name="radio" 
   onChange={event => console.log(event.target.value)}/>
 ```
 
@@ -10,7 +10,7 @@ A checked radio button.
 
 ```js
 <Radio 
-  name="radio-bar" 
+  name="radio-checked" 
   checked 
   onChange={event => console.log(event.target.value)}/>
 ```
@@ -19,7 +19,7 @@ A radio button with a label.
 
 ```js
 <Radio 
-  name="radio-foo" 
+  name="radio-labelled" 
   label="Foo"
   onChange={event => console.log(event.target.value)}/>
 ```

src/index.js

+export { default as Checkbox } from './atoms/Checkbox'
 export { default as Menu } from './atoms/Menu'
 export { default as Radio } from './atoms/Radio'
 export { default as Tags } from './atoms/Tags'
 export { default as AppBar } from './molecules/AppBar'
+export { default as CheckboxGroup } from './molecules/CheckboxGroup'
+export { default as RadioGroup } from './molecules/RadioGroup'
 export { default as YesOrNo } from './molecules/YesOrNo'

src/molecules/CheckboxGroup.js

+import React from 'react'
+import Checkbox from '../atoms/Checkbox'
+
+class CheckboxGroup extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      values: props.value || []
+    }
+  }
+
+  handleChange = event => {
+    const { values } = this.state
+
+    const value = event.target.value
+
+    if (event.target.checked) {
+      values.push(value)
+    } else {
+      values.splice(values.indexOf(value), 1)
+    }
+
+    this.setState({ values })
+
+    this.props.onChange(values)
+  }
+
+  render () {
+    const { inline, name, options, required } = this.props
+    const { values } = this.state
+
+    return (
+      <div>
+        {options.map(option => (
+          <Checkbox
+            key={option.value}
+            name={name}
+            required={required}
+            inline={inline}
+            value={option.value}
+            label={option.label}
+            checked={values.includes(option.value)}
+            onChange={this.handleChange}/>
+        ))}
+      </div>
+    )
+  }
+}
+
+export default CheckboxGroup

src/molecules/CheckboxGroup.md

+A group of checkboxes.
+
+```js
+const options = [
+  {
+    value: 'one',
+    label: 'One'
+  },
+  {
+    value: 'two',
+    label: 'Two'
+  },
+  {
+    value: 'three',
+    label: 'Three'
+  }
+];
+
+initialState = { value: [] };
+
+<CheckboxGroup 
+  name="checkboxgroup"
+  options={options} 
+  value={state.value}
+  onChange={value => setState({ value })}/>
+```
+
+The checkboxes can be displayed inline.
+
+```js
+const options = [
+  {
+    value: 'one',
+    label: 'One'
+  },
+  {
+    value: 'two',
+    label: 'Two'
+  },
+  {
+    value: 'three',
+    label: 'Three'
+  }
+];
+
+initialState = { value: [] };
+
+<CheckboxGroup 
+  name="checkboxgroup-inline"
+  options={options} 
+  value={state.value}
+  inline={true}
+  onChange={value => setState({ value })}/>
+```

src/molecules/RadioGroup.js

@@ -11,15 +11,15 @@ class RadioGroup extends React.Component {
   }
 
   handleChange = event => {
-    this.setState({
-      value: event.target.value
-    })
+    const value = event.target.value
 
-    this.props.onChange(event)
+    this.setState({ value })
+
+    this.props.onChange(value)
   }
 
   render () {
-    const { name, options, required } = this.props
+    const { inline, name, options, required } = this.props
     const { value } = this.state
 
     return (
@@ -29,6 +29,7 @@ class RadioGroup extends React.Component {
             key={option.value}
             name={name}
             required={required}
+            inline={inline}
             value={option.value}
             label={option.label}
             checked={option.value === value}

src/molecules/RadioGroup.md

@@ -18,6 +18,31 @@ const options = [
 
 <RadioGroup 
   options={options} 
-  name="radiogroup-foo"
-  onChange={event => console.log(event.target.value)}/>
+  name="radiogroup"
+  onChange={value => console.log(value)}/>
+```
+
+The buttons can be displayed inline
+
+```js
+const options = [
+  {
+    value: 'one',
+    label: 'One'
+  },
+  {
+    value: 'two',
+    label: 'Two'
+  },
+  {
+    value: 'three',
+    label: 'Three'
+  }
+];
+
+<RadioGroup 
+  options={options} 
+  name="radiogroup-inline"
+  inline={true}
+  onChange={value => console.log(value)}/>
 ```

src/molecules/YesOrNo.js

@@ -20,6 +20,7 @@ const YesOrNo = ({ name, value, required, onChange }) => (
     options={options}
     value={value}
     required={required}
+    inline={true}
     onChange={onChange}/>
 )
 

src/molecules/YesOrNo.md

@@ -3,7 +3,7 @@ A group of radio buttons that provides just two options: "Yes" or "No"
 ```js
 <YesOrNo
   name="yesorno" 
-  onChange={event => console.log(event.target.value)}/>
+  onChange={value => console.log(value)}/>
 ```
 
 If a value is set, one option is selected.
@@ -12,6 +12,6 @@ If a value is set, one option is selected.
 <YesOrNo
   name="yesorno-value" 
   value="yes"
-  onChange={event => console.log(event.target.value)}/>
+  onChange={value => console.log(value)}/>
 ```