Add toggle component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "adslot-ui",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Core component library. By Adslot",
   "main": "dist/adslot-ui-main.js",
   "scripts": {
@@ -72,6 +72,7 @@
     "react-bootstrap": "^0.28.1",
     "react-hot-loader": "^1.3.0",
     "react-icheck": "^0.1.1",
+    "react-toggle": "^2.0.1",
     "rimraf": "^2.4.4",
     "sass-lint": "^1.4.0",
     "sass-loader": "^3.1.2",

src/components/Main.js

@@ -1,11 +1,12 @@
 import {
   Button,
+  Checkbox,
   Modal,
   Nav,
   NavItem,
-  Checkbox,
   Radio,
   RadioGroup,
+  Toggle,
 } from './distributionEntry';
 
 import React from 'react';
@@ -143,6 +144,11 @@ class AppComponent extends React.Component {
             />
           </RadioGroup>
         </div>
+
+        <h1>Toggle</h1>
+        <div className="example-component-panel">
+          <Toggle />
+        </div>
       </div>
     );
   }

src/components/distributionEntry.js

@@ -2,14 +2,16 @@
 
 require('styles/_bootstrap-custom.scss');
 require('styles/_icheck-custom.scss');
+require('styles/_react-toggle-custom.scss');
 
 import Button from 'react-bootstrap/lib/Button';
+import Checkbox from 'react-icheck/lib/Checkbox';
 import Modal from 'react-bootstrap/lib/Modal';
 import Nav from 'react-bootstrap/lib/Nav';
 import NavItem from 'react-bootstrap/lib/NavItem';
-import Checkbox from 'react-icheck/lib/Checkbox';
 import Radio from 'react-icheck/lib/Radio';
 import RadioGroup from 'react-icheck/lib/RadioGroup';
+import Toggle from 'react-toggle';
 
 import {
   Alert,
@@ -26,16 +28,17 @@ module.exports = {
   Alert,
   Breadcrumb,
   Button,
+  Checkbox,
   Empty,
   Grid,
   GridCell,
   GridRow,
   Modal,
   Nav,
   NavItem,
-  Search,
-  Slicey,
-  Checkbox,
   Radio,
   RadioGroup,
+  Search,
+  Slicey,
+  Toggle,
 };

src/styles/_react-toggle-custom.scss

@@ -0,0 +1,62 @@
+@import './variable';
+@import '../../node_modules/react-toggle/style.css';
+
+.react-toggle {
+  $toggle-color: $gray-light;
+  $icon-height: 14px;
+
+  &,
+  &:hover {
+    .react-toggle-track {
+      background-color: $toggle-color;
+    }
+
+    .react-toggle-thumb {
+      border-color: $toggle-color;
+    }
+  }
+
+  &--checked,
+  &:active {
+    box-shadow: none;
+  }
+
+  svg {
+    display: none;
+  }
+
+  &-track {
+    background-color: $toggle-color;
+    border-radius: $icon-height;
+    height: $icon-height;
+    width: $icon-height * 2;
+  }
+
+  &-thumb {
+    $thumb-diameter: $icon-height - 2px;
+    height: $thumb-diameter;
+    width: $thumb-diameter;
+  }
+
+  &--checked {
+    .react-toggle-thumb {
+      left: 16px;
+    }
+  }
+
+  &--focus {
+    .react-toggle-thumb {
+      box-shadow: 0 0 1px 2px $color-primary;
+    }
+  }
+
+  // Keeping this separate as it is overriding some gross over-specificity within react-toggle
+  // https://github.com/instructure-react/react-toggle/pull/36
+  &.react-toggle--checked {
+    &:hover {
+      .react-toggle-track {
+        background-color: $toggle-color;
+      }
+    }
+  }
+}

test/components/MainTest.js

@@ -8,6 +8,7 @@ import {
   Checkbox,
   Radio,
   RadioGroup,
+  Toggle,
 } from '../../src/components/distributionEntry';
 
 describe('MainComponent', () => {
@@ -44,4 +45,10 @@ describe('MainComponent', () => {
     expect(isElementOfType(radioComponent, Radio)).to.equal(true);
     expect(radioComponent.props.label).to.equal('Unchecked');
   });
+
+  it('should have a toggle component', () => {
+    const toggleExampleContainer = MainComponent.props.children[18];
+    const toggleComponent = toggleExampleContainer.props.children;
+    expect(isElementOfType(toggleComponent, Toggle)).to.equal(true);
+  });
 });