Fix onChange/state handling for radio groups

src/atoms/Radio.js

 import React from 'react'
 import classes from './Radio.local.css'
 
-const Radio = ({ name, value, label, checked, required }) => (
+const Radio = ({ name, value, label, checked, required, onChange }) => (
   <label className={classes.root}>
     <input
       className={classes.input}
@@ -9,7 +9,8 @@ const Radio = ({ name, value, label, checked, required }) => (
       name={name}
       value={value}
       checked={checked}
-      required={required}/>
+      required={required}
+      onChange={onChange}/>
     {label}
   </label>
 )

src/atoms/Radio.md

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

src/index.js

 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 YesOrNo } from './molecules/YesOrNo'

src/molecules/RadioGroup.js

 import React from 'react'
 import Radio from '../atoms/Radio'
 
-const RadioGroup = ({ name, value, options, required }) => (
-  <div>
-    {options.map(option => (
-      <Radio
-        key={option.value}
-        name={name}
-        required={required}
-        value={option.value}
-        label={option.label}
-        checked={option.value === value}/>
-    ))}
-  </div>
-)
+class RadioGroup extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      value: props.value
+    }
+  }
+
+  handleChange = event => {
+    this.setState({
+      value: event.target.value
+    })
+
+    this.props.onChange(event)
+  }
+
+  render () {
+    const { name, options, required } = this.props
+    const { value } = this.state
+
+    return (
+      <div>
+        {options.map(option => (
+          <Radio
+            key={option.value}
+            name={name}
+            required={required}
+            value={option.value}
+            label={option.label}
+            checked={option.value === value}
+            onChange={this.handleChange}/>
+        ))}
+      </div>
+    )
+  }
+}
 
 export default RadioGroup

src/molecules/RadioGroup.md

 A group of radio buttons.
 
 ```js
-initialState = { foo: undefined };
-
 const options = [
   {
     value: 'one',
@@ -20,7 +18,6 @@ const options = [
 
 <RadioGroup 
   options={options} 
-  name="foo"
-  value={state.foo} 
-  handleChange={event => setState({ foo: event.target.value })}/>
+  name="radiogroup-foo"
+  onChange={event => console.log(event.target.value)}/>
 ```

src/molecules/YesOrNo.js

@@ -13,12 +13,14 @@ const options = [
   }
 ]
 
-const YesOrNo = ({ name, value }) => (
+const YesOrNo = ({ name, value, required, onChange }) => (
   <RadioGroup
     className={classes.root}
     name={name}
     options={options}
-    value={value}/>
+    value={value}
+    required={required}
+    onChange={onChange}/>
 )
 
 export default YesOrNo

src/molecules/YesOrNo.md

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