feat(Switch): add initial switch

src/atoms/atoms.js

@@ -28,6 +28,7 @@ export { Row, Column } from './FlexLayout';
 export { Scrollable } from './Scrollable';
 export { Select } from './dataEntry/Select';
 export { SelectField } from './dataEntry/SelectField';
+export { Switch } from './dataEntry/Switch';
 export { Stars } from './Stars';
 export { Tabs } from './Tabs';
 export { Text } from './typography/Text';

src/atoms/dataEntry/Switch/Switch.js

@@ -0,0 +1,35 @@
+// @flow
+
+import React from 'react';
+import { SwitchTag, SwitchInputTag, SwitchApperanceTag, SwitchLabelTag } from './Switch.theme';
+
+type SwitchProps = {
+  label?: string,
+  name?: string,
+  value: boolean,
+  onChange?: (boolean, SyntheticInputEvent<HTMLInputElement>) => void,
+};
+
+class Switch extends React.Component<SwitchProps> {
+  onChange = (e: SyntheticInputEvent<HTMLInputElement>) => {
+    const { onChange } = this.props;
+
+    if (typeof onChange === 'function') {
+      onChange(e.target.checked, e);
+    }
+  };
+
+  render() {
+    const { label, value, name, onChange, ...rest } = this.props;
+
+    return (
+      <SwitchTag tagName="label" { ...rest }>
+        <SwitchInputTag tagName="input" type="checkbox" name={ name } checked={ value } onChange={ this.onChange } />
+        <SwitchApperanceTag value={ value } />
+        { label && <SwitchLabelTag>{ label }</SwitchLabelTag> }
+      </SwitchTag>
+    );
+  }
+}
+
+export { Switch };

src/atoms/dataEntry/Switch/Switch.stories.js

@@ -0,0 +1,15 @@
+// @flow
+
+import React from 'react';
+
+export default (asStory: *) => {
+  asStory('ATOMS/DATA ENTRY/Switch', module, (story, { Switch, Column }) => {
+    story
+      .add('with label', () => (
+        <Column>
+          <Switch label="Switch Label" value={ false } />
+          <Switch label="Switch Label" value />
+        </Column>
+      ));
+  });
+};

src/atoms/dataEntry/Switch/Switch.theme.js

@@ -0,0 +1,53 @@
+// @flow
+
+import { createStyledTag, createTheme } from '../../../utils';
+
+const name = 'Switch';
+
+const theme = createTheme(name, {
+  modifiers: {},
+  defaults: {},
+});
+
+const SwitchTag = createStyledTag(name, {
+  display: 'flex',
+  alignItems: 'center',
+  height: '4rem',
+  cursor: 'pointer',
+});
+
+const SwitchInputTag = createStyledTag(name, {
+  display: 'none',
+});
+
+const SwitchApperanceTag = createStyledTag(name, props => ({
+  display: 'flex',
+  height: '2.6rem',
+  width: '5.2rem',
+  borderRadius: '2.6rem',
+  backgroundColor: props.theme.COLORS[props.value ? 'LIGHT_BLUE' : 'LIGHT_GRAY1'],
+  position: 'relative',
+
+  '&:before': {
+    content: '\'\'',
+    position: 'absolute',
+    width: '2rem',
+    height: '2rem',
+    borderRadius: '2rem',
+    backgroundColor: '#fff',
+    left: `${props.value ? 29 : 3}px`,
+    top: '3px',
+    zIndex: 1,
+    transition: '.4s',
+  },
+}));
+
+const SwitchLabelTag = createStyledTag(name, props => ({
+  fontFamily: 'Poppins',
+  fontSize: '1.2rem',
+  marginLeft: '1rem',
+  userSelect: 'none',
+  color: props.theme.COLORS.GRAY1,
+}));
+
+export { theme, SwitchTag, SwitchInputTag, SwitchApperanceTag, SwitchLabelTag };

src/atoms/dataEntry/Switch/index.js

@@ -0,0 +1,3 @@
+// @flow
+export { Switch } from './Switch';
+export { theme } from './Switch.theme';

src/atoms/theme.js

@@ -28,6 +28,7 @@ import { theme as selectTheme } from './dataEntry/Select';
 import { theme as starsTheme } from './Stars';
 import { theme as textAreaFieldTheme } from './dataEntry/TextAreaField';
 import { theme as textAreaTheme } from './dataEntry/TextArea';
+import { theme as switchTheme } from './dataEntry/Switch';
 import { theme as textTheme } from './typography/Text';
 import { theme as loaderTheme } from './Loader';
 import { theme as tableTheme } from './Table';
@@ -64,4 +65,5 @@ export const theme = {
   ...textTheme,
   ...loaderTheme,
   ...tableTheme,
+  ...switchTheme,
 };

storybook/__tests__/__snapshots__/storyshots.test.js.snap

@@ -8434,6 +8434,167 @@ exports[`Storyshots ATOMS/DATA ENTRY/SelectField default 1`] = `
 </div>
 `;
 
+exports[`Storyshots ATOMS/DATA ENTRY/Switch with label 1`] = `
+.emotion-9 {
+  margin: 2rem;
+}
+
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: flex-start;
+  -ms-flex-line-pack: start;
+  align-content: flex-start;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  cursor: inherit;
+}
+
+.emotion-8 > *:not(:last-child) {
+  margin-bottom: 1rem;
+}
+
+.emotion-0 {
+  display: none;
+}
+
+.emotion-3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 4rem;
+  cursor: pointer;
+}
+
+.emotion-1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 2.6rem;
+  width: 5.2rem;
+  border-radius: 2.6rem;
+  background-color: #d0d7dd;
+  position: relative;
+}
+
+.emotion-1:before {
+  content: '';
+  position: absolute;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 2rem;
+  background-color: #fff;
+  left: 3px;
+  top: 3px;
+  z-index: 1;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.emotion-2 {
+  font-family: Poppins;
+  font-size: 1.2rem;
+  margin-left: 1rem;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  color: #878c93;
+}
+
+.emotion-5 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 2.6rem;
+  width: 5.2rem;
+  border-radius: 2.6rem;
+  background-color: #4DA1FF;
+  position: relative;
+}
+
+.emotion-5:before {
+  content: '';
+  position: absolute;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 2rem;
+  background-color: #fff;
+  left: 29px;
+  top: 3px;
+  z-index: 1;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+<div
+  className="emotion-9"
+>
+  <div
+    className="emotion-8"
+  >
+    <label
+      className="emotion-3"
+    >
+      <input
+        checked={false}
+        className="emotion-0"
+        name={undefined}
+        onChange={[Function]}
+        type="checkbox"
+      />
+      <div
+        className="emotion-1"
+        value={false}
+      />
+      <div
+        className="emotion-2"
+      >
+        Switch Label
+      </div>
+    </label>
+    <label
+      className="emotion-3"
+    >
+      <input
+        checked={true}
+        className="emotion-0"
+        name={undefined}
+        onChange={[Function]}
+        type="checkbox"
+      />
+      <div
+        className="emotion-5"
+        value={true}
+      />
+      <div
+        className="emotion-2"
+      >
+        Switch Label
+      </div>
+    </label>
+  </div>
+</div>
+`;
+
 exports[`Storyshots ATOMS/DATA ENTRY/TextArea with placeholder 1`] = `
 .emotion-1 {
   margin: 2rem;