Switch component added

client/app/bundles/shared/components/Switch.jsx

@@ -0,0 +1,33 @@
+// @flow
+import React from 'react';
+import css from './Switch.scss';
+
+type Props = {
+  id?: string
+}
+
+type State = {
+  checked: boolean
+};
+
+export default class Switch extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { checked: this.props.checked || false };
+  }
+
+  handleChange = () => {
+    this.setState({ checked: !this.state.checked });
+  };
+
+  render() {
+    return (
+      <div>
+        <label className={css.switch}>
+          <input type="checkbox" onClick={this.handleChange} />
+          <div className={css.slider}>{}</div>
+        </label>
+      </div>
+    );
+  }
+}

client/app/bundles/shared/components/Switch.scss

@@ -0,0 +1,61 @@
+@import "_legacy.scss";
+@import "_base.scss";
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 119px;
+  height: 49px;
+}
+
+.switch input {
+  position: absolute;
+  display: none;
+}
+
+.slider {
+  position: absolute;
+  font-size: $small-font;
+  font-family: $font-family;
+  text-align: center;
+  vertical-align: middle;
+
+  line-height: 40px;
+  color: $mulberry-wood;
+  letter-spacing: 9.44%;
+
+  cursor: pointer;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background-color: $mulberry-wood;
+  border: 0px solid rgba(255, 255, 255, 0.7);
+  border-radius: 5px;
+  transition: .2s;
+}
+
+input:checked + .slider {
+  background-color: $yellow-green;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px $yellow-green;
+}
+
+.slider:after {
+  position: absolute;
+  content: 'OFF';
+  height: 43px;
+  width: 71.4px;
+  left: 2.3px;
+  top: 3.5px;
+  background-color: rgba(255, 255, 255, 0.7);
+  border: 0px solid rgba(255, 255, 255, 0.7);
+  border-radius: 5px;
+  transition: .2s;
+}
+
+input:checked + .slider:after {
+  content: 'ON';
+  -webkit-transform: translateX(43.5px);
+  -ms-transform: translateX(43.5px);
+  transform: translateX(43.5px);
+}

client/app/bundles/shared/components/__tests__/Switch.spec.jsx

@@ -0,0 +1,17 @@
+// @flow
+import { shallow } from 'enzyme';
+import React from 'react';
+import Switch from '../Switch';
+
+describe('Switch', () => {
+  it('always renders the switch', () => {
+    let wrapper = shallow(<Switch />);
+    expect(wrapper.find('input').exists()).toEqual(true);
+  });
+  it('checks if switch toggles on click', () => {
+    let wrapper = shallow(<Switch />);
+    expect(wrapper.find('input').exists()).toEqual(true);
+    wrapper.find('input').simulate('click');
+    expect(wrapper.find('input').exists()).toEqual(true);
+  });
+});

client/app/bundles/shared/components/_colors.scss

@@ -10,6 +10,7 @@ $white: #ffffff;
 $hampton: #e2d6a8;
 $mulberry-wood: #6d0839;
 $teak: #b4a362;
+$yellow-green: #bacf88;
 
 $text-color: $black;
 $text-color-reverse: $white;

client/app/stories/Switch.stories.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { withInfo } from '@storybook/addon-info';
+import { storiesOf } from '@storybook/react';
+
+import Switch from 'bundles/shared/components/Switch';
+
+storiesOf('Switch', module)
+  .add('Switch ON/OFF', withInfo({})(() =>
+    <Switch />
+  ));