Refactor Radio a bit

src/components/base/CheckBox/stories.js

@@ -3,9 +3,12 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { boolean } from '@storybook/addon-knobs'
+import { action } from '@storybook/addon-actions'
 
 import CheckBox from 'components/base/CheckBox'
 
 const stories = storiesOf('CheckBox', module)
 
-stories.add('basic', () => <CheckBox isChecked={boolean('isChecked', false)} />)
+stories.add('basic', () => (
+  <CheckBox isChecked={boolean('isChecked', false)} onChange={action('onChange')} />
+))

src/components/base/Radio/index.js

@@ -1,33 +1,22 @@
 // @flow
 
-import React, { PureComponent } from 'react'
+import React from 'react'
+import noop from 'lodash/noop'
 import styled from 'styled-components'
 
-import Box from 'components/base/Box'
+import { Tabbable } from 'components/base/Box'
 
-const Base = styled(Box).attrs({
+const Base = styled(Tabbable).attrs({ relative: true })`
-  align: 'center',
+  outline: none;
-  justify: 'center',
+  box-shadow: 0 0 0 1px ${p => (p.isChecked ? p.theme.colors.cream : p.theme.colors.argile)};
-  relative: true,
-})`
-  box-shadow: 0 0 0 ${p => (p.checked ? 4 : 1)}px
-    ${p => (p.checked ? p.theme.colors.cream : p.theme.colors.argile)};
   border-radius: 50%;
   height: 19px;
   width: 19px;
   transition: all ease-in-out 0.1s;
 
-  input[type='radio'] {
+  &:focus {
-    bottom: 0;
+    box-shadow: 0 0 0 ${p => (p.isChecked ? 4 : 2)}px
-    cursor: pointer;
+      ${p => (p.isChecked ? p.theme.colors.cream : p.theme.colors.argile)};
-    height: 100%;
-    left: 0;
-    opacity: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    width: 100%;
-    z-index: 10;
   }
 
   &:before,
@@ -45,7 +34,7 @@ const Base = styled(Box).attrs({
   &:before {
     background-color: ${p => p.theme.colors.blue};
     ${p =>
-      p.checked &&
+      p.isChecked &&
       `
       bottom: 0;
       left: 0;
@@ -57,7 +46,7 @@ const Base = styled(Box).attrs({
   &:after {
     background-color: ${p => p.theme.colors.white};
     ${p =>
-      p.checked &&
+      p.isChecked &&
       `
       bottom: 7px;
       left: 7px;
@@ -68,52 +57,17 @@ const Base = styled(Box).attrs({
 `
 
 type Props = {
-  checked: boolean,
+  isChecked: boolean,
   onChange?: Function,
 }
 
-type State = {
+function Radio(props: Props) {
-  checked: boolean,
+  const { isChecked, onChange } = props
+  return <Base {...props} isChecked={isChecked} onClick={() => onChange(!isChecked)} />
 }
 
-class Radio extends PureComponent<Props, State> {
+Radio.defaultProps = {
-  static defaultProps = {
+  onChange: noop,
-    checked: false,
-  }
-
-  state = {
-    checked: this.props.checked,
-  }
-
-  componentWillReceiveProps(nextProps: Props) {
-    this.setState({
-      checked: nextProps.checked,
-    })
-  }
-
-  handleChange = (e: SyntheticInputEvent<HTMLInputElement>) => {
-    const { onChange } = this.props
-    const { checked } = e.target
-
-    this.setState({
-      checked,
-    })
-
-    if (onChange) {
-      onChange(checked)
-    }
-  }
-
-  render() {
-    const { checked } = this.state
-    const { onChange, ...props } = this.props
-
-    return (
-      <Base {...props} checked={checked}>
-        <input type="radio" checked={checked} onChange={this.handleChange} />
-      </Base>
-    )
-  }
 }
 
 export default Radio

src/components/base/Radio/stories.js

@@ -2,10 +2,13 @@
 
 import React from 'react'
 import { storiesOf } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
 import { boolean } from '@storybook/addon-knobs'
 
 import Radio from 'components/base/Radio'
 
 const stories = storiesOf('Radio', module)
 
-stories.add('basic', () => <Radio checked={boolean('checked', false)} />)
+stories.add('basic', () => (
+  <Radio isChecked={boolean('checked', false)} onChange={action('onChange')} />
+))