Merge pull request #12 from Adslot/checkbox-component

Added custom checkbox and radio buttons
Adslot · Dec 23, 2015 · ae2f664 · ae2f664
2 parents 8e51f04 + e486e74
commit ae2f664
Show file tree

Hide file tree

Showing 6 changed files with 148 additions and 7 deletions.
diff --git a/dist/adslot-ui-main.js b/dist/adslot-ui-main.js
diff --git a/package.json b/package.json
@@ -71,6 +71,7 @@
     "react-addons-test-utils": "^0.14.3",
     "react-bootstrap": "^0.28.1",
     "react-hot-loader": "^1.3.0",
+    "react-icheck": "^0.1.1",
     "rimraf": "^2.4.4",
     "sass-lint": "^1.4.0",
     "sass-loader": "^3.1.2",

diff --git a/src/components/Main.js b/src/components/Main.js
@@ -1,12 +1,15 @@
-import React from 'react';
-
 import {
   Button,
   Modal,
   Nav,
   NavItem,
+  Checkbox,
+  Radio,
+  RadioGroup,
 } from './distributionEntry';
 
+import React from 'react';
+
 require('styles/App.scss');
 
 class AppComponent extends React.Component {
@@ -98,6 +101,48 @@ class AppComponent extends React.Component {
             </Button>
           </Modal.Footer>
         </Modal>
+
+        <h1>Checkboxes</h1>
+        <div className="example-component-panel">
+          <Checkbox label="Unchecked" />
+        </div>
+        <div className="example-component-panel">
+          <Checkbox label="Checked" checked />
+        </div>
+        <div className="example-component-panel">
+          <Checkbox label="Disabled" disabled />
+        </div>
+        <div className="example-component-panel">
+          <Checkbox label="Checked and Disabled" checked disabled />
+        </div>
+        <h1>Radio Buttons</h1>
+        <div className="example-component-panel">
+          <RadioGroup name="testRadio" value="2">
+            <Radio
+              label="Unchecked"
+              value="1"
+            />
+            <Radio
+              label="Checked"
+              value="2"
+            />
+          </RadioGroup>
+        </div>
+        <div className="example-component-panel">
+          <RadioGroup name="testRadio" value="2">
+            <Radio
+              label="Disabled"
+              value="1"
+              disabled
+            />
+            <Radio
+              label="Checked and Disabled"
+              value="2"
+              disabled
+              checked
+            />
+          </RadioGroup>
+        </div>
       </div>
     );
   }

diff --git a/src/components/distributionEntry.js b/src/components/distributionEntry.js
@@ -1,11 +1,16 @@
 // Export all the components that are consumable.
 
 require('styles/_bootstrap-custom.scss');
+require('styles/_icheck-custom.scss');
 
 import Button from 'react-bootstrap/lib/Button';
 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 {
   Alert,
   Breadcrumb,
@@ -30,4 +35,7 @@ module.exports = {
   NavItem,
   Search,
   Slicey,
+  Checkbox,
+  Radio,
+  RadioGroup,
 };
diff --git a/src/styles/_icheck-custom.scss b/src/styles/_icheck-custom.scss
@@ -0,0 +1,65 @@
+.icheckbox,
+.iradio {
+  background-repeat: no-repeat;
+  border: 0;
+  cursor: pointer;
+  display: inline-block;
+  height: 16px;
+  position: relative;
+  vertical-align: middle;
+  width: 16px;
+
+  & + span {
+    margin: 0 5px;
+  }
+}
+
+.icheckbox {
+  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><rect y="0" fill="none" width="16" height="16"/><path fill="#FFFFFF" d="M4 14.5c-1.4 0-2.5-1.1-2.5-2.5V4c0-1.4 1.1-2.5 2.5-2.5h8c1.4 0 2.5 1.1 2.5 2.5v8c0 1.4-1.1 2.5-2.5 2.5H4z"/><path fill="#D3D3D3" d="M12 2c1.1 0 2 0.9 2 2v8c0 1.1-0.9 2-2 2H4c-1.1 0-2-0.9-2-2V4c0-1.1 0.9-2 2-2H12M12 1H4C2.4 1 1 2.3 1 4v8c0 1.6 1.4 3 3 3h8c1.6 0 3-1.4 3-3V4C15 2.3 13.7 1 12 1L12 1z"/></svg>');
+
+  &.hover {
+    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" d="M0 0h16v16H0z"/><path fill="#4AAFCD" d="M12 2c1.1 0 2 .9 2 2v8c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h8m0-1H4C2.4 1 1 2.3 1 4v8c0 1.6 1.4 3 3 3h8c1.6 0 3-1.4 3-3V4c0-1.7-1.3-3-3-3z"/></svg>');
+  }
+
+  &.checked {
+    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" d="M0 0h16v16H0z"/><path fill="#4AAFCD" d="M15 12c0 1.6-1.4 3-3 3H4c-1.7 0-3-1.4-3-3V4c0-1.7 1.3-3 3-3h8c1.6 0 3 1.3 3 3v8z"/><path fill="#FFF" d="M11.5 4.7c-.2-.2-.5-.1-.7.1l-4.1 5.4-1.5-1.8c-.2-.2-.5-.3-.7-.1-.2.2-.2.5-.1.7l1.9 2.3c.1.1.2.2.4.2.1 0 .3-.1.4-.2l4.5-5.9c.1-.2.1-.5-.1-.7z"/></svg>');
+  }
+
+  &.disabled {
+    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" d="M0 0h16v16H0z"/><path fill="#FFF" d="M4 14.5c-1.4 0-2.5-1.1-2.5-2.5V4c0-1.4 1.1-2.5 2.5-2.5h8c1.4 0 2.5 1.1 2.5 2.5v8c0 1.4-1.1 2.5-2.5 2.5H4z"/><path fill="#F1F2F2" d="M12 2c1.1 0 2 .9 2 2v8c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h8m0-1H4C2.4 1 1 2.3 1 4v8c0 1.6 1.4 3 3 3h8c1.6 0 3-1.4 3-3V4c0-1.7-1.3-3-3-3z"/></svg>');
+
+    &,
+    &.checked {
+      cursor: default;
+    }
+
+    &.checked {
+      background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#F1F2F2" d="M15 12c0 1.6-1.4 3-3 3H4c-1.7 0-3-1.4-3-3V4c0-1.7 1.3-3 3-3h8c1.6 0 3 1.3 3 3v8z"/><path fill="#E6E7E8" d="M11.5 4.7c-.2-.2-.5-.1-.7.1l-4.1 5.4-1.5-1.8c-.2-.2-.5-.3-.7-.1-.2.2-.2.5-.1.7l1.9 2.3c.1.1.2.2.4.2.1 0 .3-.1.4-.2l4.5-5.9c.1-.2.1-.5-.1-.7z"/></svg>');
+    }
+  }
+}
+
+.iradio {
+  &,
+  &.hover {
+    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#FFFFFF" d="M8 14.1c-3.4 0-6.1-2.8-6.1-6.1S4.6 1.9 8 1.9s6.1 2.8 6.1 6.1S11.4 14.1 8 14.1z"/><path fill="#D3D3D3" d="M8 2.4c3.1 0 5.6 2.5 5.6 5.6s-2.5 5.6-5.6 5.6S2.4 11.1 2.4 8 4.9 2.4 8 2.4M8 1.4c-3.7 0-6.6 3-6.6 6.6s3 6.6 6.6 6.6 6.6-3 6.6-6.6S11.7 1.4 8 1.4L8 1.4z"/></svg>');
+  }
+
+  &.checked {
+    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#FFFFFF" d="M8 14.1c-3.4 0-6.1-2.8-6.1-6.1S4.6 1.9 8 1.9s6.1 2.8 6.1 6.1S11.4 14.1 8 14.1z"/><path fill="#4AAFCD" d="M8 2.4c3.1 0 5.6 2.5 5.6 5.6s-2.5 5.6-5.6 5.6S2.4 11.1 2.4 8 4.9 2.4 8 2.4M8 1.4c-3.7 0-6.6 3-6.6 6.6s3 6.6 6.6 6.6 6.6-3 6.6-6.6S11.7 1.4 8 1.4L8 1.4z"/><path fill="#4AAFCD" d="M8 12.4c-2.4 0-4.4-2-4.4-4.4s2-4.4 4.4-4.4 4.4 2 4.4 4.4S10.4 12.4 8 12.4z"/></svg>');
+  }
+
+  &.disabled {
+    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" d="M0 0h16v16"/><circle fill="#D3D3D3" cx="8" cy="8" r="6.6"/></svg>');
+
+    &,
+    &.checked {
+      cursor: default;
+    }
+
+    &.checked {
+      background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#FFFFFF" d="M8 14.1c-3.4 0-6.1-2.8-6.1-6.1S4.6 1.9 8 1.9s6.1 2.8 6.1 6.1S11.4 14.1 8 14.1z"/><path fill="#D3D3D3" d="M8 2.4c3.1 0 5.6 2.5 5.6 5.6s-2.5 5.6-5.6 5.6S2.4 11.1 2.4 8 4.9 2.4 8 2.4M8 1.4c-3.7 0-6.6 3-6.6 6.6s3 6.6 6.6 6.6 6.6-3 6.6-6.6S11.7 1.4 8 1.4L8 1.4z"/><path fill="#D3D3D3" d="M8 12.4c-2.4 0-4.4-2-4.4-4.4s2-4.4 4.4-4.4 4.4 2 4.4 4.4S10.4 12.4 8 12.4z"/></svg>');
+    }
+  }
+}
+
diff --git a/test/components/MainTest.js b/test/components/MainTest.js
@@ -3,6 +3,12 @@
 
 import createComponent from 'helpers/shallowRenderHelper';
 import Main from 'components/Main';
+import { isElementOfType } from 'react-addons-test-utils';
+import {
+  Checkbox,
+  Radio,
+  RadioGroup,
+} from '../../src/components/distributionEntry';
 
 describe('MainComponent', () => {
   let MainComponent;
@@ -22,4 +28,20 @@ describe('MainComponent', () => {
     expect(modalComponent.props.keyboard).to.equal(false);
     expect(modalComponent.props.backdrop).to.equal(true);
   });
+
+  it('should have a checkbox component', () => {
+    const checkboxExampleContainer = MainComponent.props.children[10];
+    const checkboxComponent = checkboxExampleContainer.props.children;
+    expect(isElementOfType(checkboxComponent, Checkbox)).to.equal(true);
+    expect(checkboxComponent.props.label).to.equal('Unchecked');
+  });
+
+  it('should have a radio button component', () => {
+    const radioButtonContainer = MainComponent.props.children[15];
+    const radioGroupComponent = radioButtonContainer.props.children;
+    expect(isElementOfType(radioGroupComponent, RadioGroup)).to.equal(true);
+    const radioComponent = radioGroupComponent.props.children[0];
+    expect(isElementOfType(radioComponent, Radio)).to.equal(true);
+    expect(radioComponent.props.label).to.equal('Unchecked');
+  });
 });