feat(Checkbox): create component

package.json

@@ -63,6 +63,7 @@
     "@babel/preset-react": "7.0.0-beta.56",
     "@babel/register": "7.0.0-beta.56",
     "@nivo/bar": "0.42.1",
+    "@sambego/storybook-state": "^1.0.7",
     "@storybook/addon-actions": "3.4.10",
     "@storybook/addon-info": "3.4.10",
     "@storybook/addon-knobs": "3.4.10",

src/CheckBox/README.md

@@ -0,0 +1,35 @@
+# CheckBox
+
+### Usage
+
+```jsx
+import CheckBox from 'components/CheckBox';
+
+// or
+
+import { CheckBox } from 'components';
+```
+
+<!-- STORY -->
+
+### Properties
+
+- `checked` - Whether the button is checked or not.
+- `disabled` - Whether the button is enabled or not.
+- `onChange` - Callback whence clicked.
+
+| propName   | propType | defaultValue | isRequired |
+| ---------- | :------: | :----------: | :--------: |
+| `checked`  |  `bool`  |   `false`    |     -      |
+| `disabled` |  `bool`  |    `true`    |     -      |
+| `onChange` |  `func`  |  `() => {}`  |     -      |
+
+### Example
+
+```jsx
+import CheckBox from 'components/CheckBox';
+
+render() {
+  return <CheckBox>Add sauce?</CheckBox>
+}
+```

src/CheckBox/__stories__/CheckBox.stories.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, boolean } from '@storybook/addon-knobs/react';
+import { State, Store } from '@sambego/storybook-state';
+
+import { CheckBox } from '../..';
+
+const store = new Store({
+  checked: false,
+});
+
+storiesOf('CheckBox', module)
+  .addDecorator(withKnobs)
+  .add('default', () => {
+    const enabledValue = boolean('Enabled', true, 'state');
+
+    return (
+      <State store={store}>
+        <CheckBox disabled={!enabledValue}>A really cool choice</CheckBox>
+      </State>
+    );
+  })
+  .add('controlled', () => {
+    const checkedValue = boolean('Checked', false, 'state');
+    const enabledValue = boolean('Enabled', true, 'state');
+
+    return (
+      <CheckBox checked={checkedValue} disabled={!enabledValue} onChange={() => {}}>
+        What?
+      </CheckBox>
+    );
+  });

src/CheckBox/__tests__/CheckBox.test.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { ThemeProvider } from 'styled-components';
+import 'jest-styled-components';
+
+import CheckBox from '..';
+import Theme from '../../Theme';
+
+describe('<CheckBox />', () => {
+  it('should render without a problem', () => {
+    const render = mount(
+      <ThemeProvider theme={Theme}>
+        <CheckBox id="test" />
+      </ThemeProvider>,
+    );
+    expect(render).toMatchSnapshot();
+  });
+
+  it('should render without a problem when checked and enabled', () => {
+    const render = mount(
+      <ThemeProvider theme={Theme}>
+        <CheckBox id="test" checked />
+      </ThemeProvider>,
+    );
+    expect(render).toMatchSnapshot();
+  });
+
+  it('should render without a problem when unchecked and enabled', () => {
+    const render = mount(
+      <ThemeProvider theme={Theme}>
+        <CheckBox id="test" checked={false} />
+      </ThemeProvider>,
+    );
+    expect(render).toMatchSnapshot();
+  });
+
+  it('should render without a problem when checked and disabled', () => {
+    const render = mount(
+      <ThemeProvider theme={Theme}>
+        <CheckBox id="test" checked disabled />
+      </ThemeProvider>,
+    );
+    expect(render).toMatchSnapshot();
+  });
+
+  it('should render without a problem when unchecked and disabled', () => {
+    const render = mount(
+      <ThemeProvider theme={Theme}>
+        <CheckBox id="test" checked={false} disabled />
+      </ThemeProvider>,
+    );
+    expect(render).toMatchSnapshot();
+  });
+
+  it('should call change handler when enabled', () => {
+    const spy = jest.fn();
+    const render = mount(
+      <ThemeProvider theme={Theme}>
+        <CheckBox id="test" checked onChange={spy} />
+      </ThemeProvider>,
+    );
+    render.simulate('click');
+
+    expect(spy).toHaveBeenCalled();
+  });
+
+  it('should not call change handler when disabled', () => {
+    const spy = jest.fn();
+    const render = mount(
+      <ThemeProvider theme={Theme}>
+        <CheckBox id="test" checked disabled onChange={spy} />
+      </ThemeProvider>,
+    );
+    render.simulate('click');
+
+    expect(spy).not.toHaveBeenCalled();
+  });
+});