Added custom checkbox and radiobutton

Adslot · Dec 18, 2015 · 6a7f07c · 6a7f07c
1 parent 842af75
commit 6a7f07c
Show file tree

Hide file tree

Showing 4 changed files with 116 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -52,6 +52,7 @@
     "eslint-plugin-react": "^3.11.3",
     "file-loader": "^0.8.5",
     "generator-react-webpack": "^3.1.1",
+    "icheck": "^1.0.2",
     "isparta-loader": "^2.0.0",
     "jscs": "^2.7.0",
     "karma": "^0.13.15",
@@ -72,6 +73,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,59 @@
+.icheckbox,
+.iradio {
+  display: inline-block;
+  background-repeat: no-repeat;
+  vertical-align: middle;
+  width: 16px;
+  height: 16px;
+  border: none;
+  cursor: pointer;
+
+  & + span {
+    margin: 0 5px;
+  }
+}
+
+.icheckbox {
+  &,
+  &.hover {
+    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h16v16"/><path fill="#FFFFFF" d="M1.6 14.6c-0.1 0-0.3-0.1-0.3-0.3V1.6c0-0.1 0.1-0.3 0.3-0.3h12.7c0.1 0 0.3 0.1 0.3 0.3v12.7c0 0.1-0.1 0.3-0.3 0.3H1.6z"/><path fill="#D3D3D3" d="M14.2 1.8v12.4H1.8V1.8H14.2M14.4 1H1.6C1.3 1 1 1.3 1 1.6v12.7C1 14.7 1.3 15 1.6 15h12.7c0.4 0 0.6-0.3 0.6-0.6V1.6C15 1.3 14.7 1 14.4 1L14.4 1z"/></svg>');
+  }
+  &.checked {
+    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg"><path fill="#4AAFCD" d="M14.4 15H1.6C1.3 15 1 14.7 1 14.4V1.6C1 1.3 1.3 1 1.6 1h12.7C14.7 1 15 1.3 15 1.6v12.7C15 14.7 14.7 15 14.4 15z"/><path fill="#FFFFFF" d="M11.5 4.7c-0.2-0.2-0.5-0.1-0.7 0.1l-4.1 5.4L5.2 8.4C5 8.2 4.7 8.1 4.5 8.3 4.3 8.5 4.3 8.8 4.4 9l1.9 2.3c0.1 0.1 0.2 0.2 0.4 0.2 0 0 0 0 0 0 0.1 0 0.3-0.1 0.4-0.2l4.5-5.9C11.7 5.2 11.7 4.9 11.5 4.7z"/></svg>');
+  }
+  &.disabled {
+    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg"><path fill="#D3D3D3" d="M14.4 15H1.6C1.3 15 1 14.7 1 14.4V1.6C1 1.3 1.3 1 1.6 1h12.7C14.7 1 15 1.3 15 1.6v12.7C15 14.7 14.7 15 14.4 15z"/></svg>');
+
+    &,
+    &.checked {
+      cursor: default;
+    }
+
+    &.checked {
+      background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg"><path fill="#D3D3D3" d="M14.4 15H1.6C1.3 15 1 14.7 1 14.4V1.6C1 1.3 1.3 1 1.6 1h12.7C14.7 1 15 1.3 15 1.6v12.7C15 14.7 14.7 15 14.4 15z"/><path fill="#ACACAC" d="M11.5 4.7c-0.2-0.2-0.5-0.1-0.7 0.1l-4.1 5.4L5.2 8.4C5 8.2 4.7 8.1 4.5 8.3 4.3 8.5 4.3 8.8 4.4 9l1.9 2.3c0.1 0.1 0.2 0.2 0.4 0.2 0 0 0 0 0 0 0.1 0 0.3-0.1 0.4-0.2l4.5-5.9C11.7 5.2 11.7 4.9 11.5 4.7z"/></svg>');
+    }
+  }
+}
+
+.iradio {
+  &,
+  &.hover {
+    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg"><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"><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"><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"><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>');
+    }
+  }
+}
+