Add Radio component, change Checkbox component

src/components/base/Checkbox/index.js

@@ -1,11 +1,25 @@
 // @flow
 
 import React, { PureComponent } from 'react'
-import styled from 'styled-components'
+import styled, { keyframes } from 'styled-components'
 
 import Box from 'components/base/Box'
 import Icon from 'components/base/Icon'
 
+const bounce = keyframes`
+  0% {
+    transform: scale(1, 1);
+  }
+
+  50% {
+    transform: scale(1.7, 1.7);
+  }
+
+  100% {
+    transform: scale(1, 1);
+  }
+`
+
 const Base = styled(Box).attrs({
   align: 'center',
   justify: 'center',
@@ -14,9 +28,7 @@ const Base = styled(Box).attrs({
   background-color: ${p => (p.checked ? p.theme.colors.blue : p.theme.colors.white)};
   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%;
   font-size: 7px;
-
   height: 19px;
   width: 19px;
   transition: all ease-in-out 0.1s;
@@ -33,17 +45,16 @@ const Base = styled(Box).attrs({
     width: 100%;
     z-index: 10;
   }
+`
 
-  > span {
+const IconWrapper = styled(Icon).attrs({
-    position: relative;
+  color: 'white',
-    top: 1px;
+})`
-    opacity: ${p => (p.checked ? 1 : 0)};
+  animation: ${bounce} ease-in-out 0.5s;
-    transition: all ease-in-out 0.1s;
-  }
 `
 
 type Props = {
-  checked?: boolean,
+  checked: boolean,
   onChange?: Function,
 }
 
@@ -52,16 +63,18 @@ type State = {
 }
 
 class Checkbox extends PureComponent<Props, State> {
+  static defaultProps = {
+    checked: false,
+  }
+
   state = {
-    checked: this.props.checked || false,
+    checked: this.props.checked,
   }
 
   componentWillReceiveProps(nextProps: Props) {
-    if (nextProps.checked) {
+    this.setState({
-      this.setState({
+      checked: nextProps.checked,
-        checked: nextProps.checked,
+    })
-      })
-    }
   }
 
   handleChange = (e: SyntheticInputEvent<HTMLInputElement>) => {
@@ -82,9 +95,9 @@ class Checkbox extends PureComponent<Props, State> {
     const { onChange, ...props } = this.props
 
     return (
-      <Base {...props}>
+      <Base {...props} checked={checked}>
         <input type="checkbox" checked={checked} onChange={this.handleChange} />
-        <Icon color="white" name="check" />
+        {checked && <IconWrapper name="check" />}
       </Base>
     )
   }

src/components/base/Modal/index.js

@@ -126,9 +126,14 @@ export class Modal extends PureComponent<Props> {
       >
         {(m, isVisible) => (
           <Container isVisible={isVisible}>
-            <Backdrop op={m.opacity} onClick={preventBackdropClick ? undefined : onClose} />
+            <Backdrop op={m.opacity} />
-            <GrowScroll full align="center">
+            <GrowScroll full align="center" onClick={preventBackdropClick ? undefined : onClose}>
-              <Wrapper preventSideMargin={preventSideMargin} op={m.opacity} offset={m.y}>
+              <Wrapper
+                preventSideMargin={preventSideMargin}
+                op={m.opacity}
+                offset={m.y}
+                onClick={e => e.stopPropagation()}
+              >
                 {render({ data, onClose })}
               </Wrapper>
             </GrowScroll>

src/components/base/Radio/index.js

@@ -0,0 +1,119 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+import styled from 'styled-components'
+
+import Box from 'components/base/Box'
+
+const Base = styled(Box).attrs({
+  align: 'center',
+  justify: 'center',
+  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'] {
+    bottom: 0;
+    cursor: pointer;
+    height: 100%;
+    left: 0;
+    opacity: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 100%;
+    z-index: 10;
+  }
+
+  &:before,
+  &:after {
+    border-radius: 50%;
+    bottom: 100%;
+    content: ' ';
+    left: 100%;
+    position: absolute;
+    right: 100%;
+    top: 100%;
+    transition: all ease-in-out 0.2s;
+  }
+
+  &:before {
+    background-color: ${p => p.theme.colors.blue};
+    ${p =>
+      p.checked &&
+      `
+      bottom: 0;
+      left: 0;
+      right: 0;
+      top: 0;
+    `};
+  }
+
+  &:after {
+    background-color: ${p => p.theme.colors.white};
+    ${p =>
+      p.checked &&
+      `
+      bottom: 7px;
+      left: 7px;
+      right: 7px;
+      top: 7px;
+    `};
+  }
+`
+
+type Props = {
+  checked: boolean,
+  onChange?: Function,
+}
+
+type State = {
+  checked: boolean,
+}
+
+class Radio extends PureComponent<Props, State> {
+  static defaultProps = {
+    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

@@ -0,0 +1,9 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+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)} />)