From 92697f7990b341aa94c57e73f10df81f43011e2a Mon Sep 17 00:00:00 2001
From: Chao Liang <chao.liang@adslot.com>
Date: Fri, 25 Jan 2019 15:29:03 +1100
Subject: [PATCH] feat: rewrite checkbox component add partial select state

---
 .eslintrc                                     |   3 +-
 .sass-lint.yml                                |   4 +-
 config/common.js                              |   2 +-
 config/dev-cold.js                            |  11 --
 config/dev.js                                 |  11 --
 docs/examples/CheckboxExample.jsx             | 135 +++++++++++++-----
 docs/examples/CheckboxGroupExample.jsx        |  47 +++---
 docs/examples/styles.scss                     |  11 ++
 src/components/adslot-ui/Checkbox/index.jsx   |  86 +++++------
 .../adslot-ui/Checkbox/index.spec.jsx         |  32 +++--
 src/components/adslot-ui/Checkbox/styles.scss |  85 ++++++++++-
 .../adslot-ui/CheckboxGroup/index.jsx         |  71 ++++-----
 .../adslot-ui/CheckboxGroup/index.spec.jsx    |  31 ++--
 src/components/prop-types/inputPropTypes.js   |  19 ++-
 .../icons/checkbox/checked-disabled.svg       |   1 +
 src/styles/icons/checkbox/checked.svg         |   1 +
 src/styles/icons/checkbox/empty-disabled.svg  |   1 +
 src/styles/icons/checkbox/empty.svg           |   1 +
 src/styles/icons/checkbox/hover.svg           |   1 +
 .../icons/checkbox/partial-disabled.svg       |   1 +
 src/styles/icons/checkbox/partial-hover.svg   |   1 +
 src/styles/icons/checkbox/partial.svg         |   1 +
 22 files changed, 365 insertions(+), 191 deletions(-)
 create mode 100644 src/styles/icons/checkbox/checked-disabled.svg
 create mode 100644 src/styles/icons/checkbox/checked.svg
 create mode 100644 src/styles/icons/checkbox/empty-disabled.svg
 create mode 100644 src/styles/icons/checkbox/empty.svg
 create mode 100644 src/styles/icons/checkbox/hover.svg
 create mode 100644 src/styles/icons/checkbox/partial-disabled.svg
 create mode 100644 src/styles/icons/checkbox/partial-hover.svg
 create mode 100644 src/styles/icons/checkbox/partial.svg

diff --git a/.eslintrc b/.eslintrc
index 88f4c439b..11266cb3d 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -91,6 +91,7 @@
         "functions": "never"
       }
     ],
-    "object-curly-newline": ["error", { "multiline": true, "consistent": true }]
+    "object-curly-newline": ["error", { "multiline": true, "consistent": true }],
+    "no-console": ["error", { "allow": ["warn", "error"] }]
   }
 }
diff --git a/.sass-lint.yml b/.sass-lint.yml
index bee25cdf2..40ba1bf83 100644
--- a/.sass-lint.yml
+++ b/.sass-lint.yml
@@ -40,8 +40,8 @@ rules:
 
   # Nesting
   force-attribute-nesting: 2
-  force-element-nesting: 2
-  force-pseudo-nesting: 2
+  force-element-nesting: 0
+  force-pseudo-nesting: 0
 
   # Name Formats
   # TODO: When inline linting is supported set as error (https://github.com/sasstools/sass-lint/pull/402) and ignore
diff --git a/config/common.js b/config/common.js
index 74ea8caab..a88973a86 100644
--- a/config/common.js
+++ b/config/common.js
@@ -30,7 +30,7 @@ module.exports = {
       // "url" loader works like "file" loader except that it embeds assets smaller than specified limit in bytes
       // as data URLs to avoid requests.
       {
-        test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
+        test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/,
         loader: 'url-loader',
         options: {
           limit: 8192,
diff --git a/config/dev-cold.js b/config/dev-cold.js
index 903d51aad..8fdf59e67 100644
--- a/config/dev-cold.js
+++ b/config/dev-cold.js
@@ -18,17 +18,6 @@ module.exports = merge(commonConfig, {
     filename: 'app.js',
     publicPath,
   },
-  module: {
-    rules: [
-      {
-        test: /\.(jpe?g|png|gif|svg)$/i,
-        loaders: [
-          'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
-          'image-webpack-loader?bypassOnDebug&optipng.optimizationLevel=7&gifsicle.interlaced=false',
-        ],
-      },
-    ],
-  },
   devServer: {
     hot: false, // disable HMR on the server
     contentBase: resolve(__dirname, '../src'), // match the output path
diff --git a/config/dev.js b/config/dev.js
index d567db154..741b6ef69 100644
--- a/config/dev.js
+++ b/config/dev.js
@@ -26,17 +26,6 @@ module.exports = merge(commonConfig, {
     path: resolve(__dirname, '../dist/assets'),
     publicPath, // necessary for HMR to know where to load the hot update chunks
   },
-  module: {
-    rules: [
-      {
-        test: /\.(jpe?g|png|gif|svg)$/i,
-        loaders: [
-          'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
-          'image-webpack-loader?bypassOnDebug&optipng.optimizationLevel=7&gifsicle.interlaced=false',
-        ],
-      },
-    ],
-  },
   devServer: {
     hot: true, // enable HMR on the server
     contentBase: resolve(__dirname, '../docs'),
diff --git a/docs/examples/CheckboxExample.jsx b/docs/examples/CheckboxExample.jsx
index 7a8bb4a95..e362a00d9 100644
--- a/docs/examples/CheckboxExample.jsx
+++ b/docs/examples/CheckboxExample.jsx
@@ -3,47 +3,110 @@ import React from 'react';
 import Example from '../components/Example';
 import { Checkbox } from '../../src';
 
-class CheckboxExample extends React.PureComponent {
-  constructor(props) {
-    super(props);
+const handleChange = (...arg) => console.log('Checkbox changed with arguments', ...arg);
 
-    this.state = {
-      isChecked: false,
-    };
-    this.handleChange = this.handleChange.bind(this);
-  }
-
-  handleChange() {
-    this.setState(prevState => ({
-      isChecked: !prevState.isChecked,
-    }));
-  }
-
-  render() {
-    return (
-      <Checkbox
-        name="Name goes here"
-        label="Label goes here"
-        value="Value goes here"
-        dts="data-test-selector-goes-here"
-        onChange={this.handleChange}
-        checked={this.state.isChecked}
-      />
-    );
-  }
-}
+const CheckboxExample = () => (
+  <>
+    <h4>Not selected</h4>
+    <Checkbox label="Checked: false" checked={false} inline className="fix-size" onChange={handleChange} />
+    <Checkbox
+      label={
+        <p>
+          Checked: false <br /> <b>Disabled</b>
+        </p>
+      }
+      checked={false}
+      disabled
+      inline
+      className="fix-size"
+      onChange={handleChange}
+    />
+    <h4>Selected</h4>
+    <Checkbox label="Checked: true" checked inline className="fix-size" onChange={handleChange} />
+    <Checkbox
+      label={
+        <p>
+          Checked: true <br /> <b>Disabled</b>
+        </p>
+      }
+      checked
+      disabled
+      inline
+      className="fix-size"
+      onChange={handleChange}
+    />
+    <h4>Partial Selected</h4>
+    <Checkbox label={`Checked: 'partial'`} checked="partial" inline className="fix-size" onChange={handleChange} />
+    <Checkbox
+      label={
+        <p>
+          Checked: 'partial' <br /> <b>Disabled</b>
+        </p>
+      }
+      checked="partial"
+      disabled
+      inline
+      className="fix-size"
+      onChange={handleChange}
+    />
+    <h4>Checkboxes without labels</h4>
+    <Checkbox checked={false} inline onChange={handleChange} />
+    <Checkbox checked={false} disabled inline onChange={handleChange} />
+    <Checkbox checked inline onChange={handleChange} />
+    <Checkbox checked disabled inline onChange={handleChange} />
+    <Checkbox checked="partial" inline onChange={handleChange} />
+    <Checkbox checked="partial" disabled inline onChange={handleChange} />
+  </>
+);
 
 const exampleProps = {
   componentName: 'Checkbox',
   notes: '',
-  exampleCodeSnippet: `<Checkbox
-  name="Name goes here"
-  label="Label goes here"
-  value="Value goes here"
-  dts="data-test-selector-goes-here"
-  onChange={this.handleChange}
-  checked={this.state.isChecked}
-/>`,
+  exampleCodeSnippet: `
+  <h4>Not selected</h4>
+  <Checkbox label="Checked: false" checked={false} inline />
+  <Checkbox
+    label={
+      <p>
+        Checked: false <br /> <b>Disabled</b>
+      </p>
+    }
+    checked={false}
+    disabled
+    inline
+  />
+  <h4>Selected</h4>
+  <Checkbox label="Checked: true" checked inline />
+  <Checkbox
+    label={
+      <p>
+        Checked: true <br /> <b>Disabled</b>
+      </p>
+    }
+    checked
+    disabled
+    inline
+  />
+  <h4>Partial Selected</h4>
+  <Checkbox label={\`Checked: 'partial'\`} checked="partial" inline />
+  <Checkbox
+    label={
+      <p>
+        Checked: 'partial' <br /> <b>Disabled</b>
+      </p>
+    }
+    checked="partial"
+    disabled
+    inline
+  />
+  <h4>Checkboxes without labels</h4>
+  <Checkbox checked={false} inline />
+  <Checkbox checked={false} disabled inline />
+  <Checkbox checked inline />
+  <Checkbox checked disabled inline />
+  <Checkbox checked="partial" inline />
+  <Checkbox checked="partial" disabled inline />
+  `,
   propTypeSectionArray: [
     {
       label: '',
diff --git a/docs/examples/CheckboxGroupExample.jsx b/docs/examples/CheckboxGroupExample.jsx
index 6f37089ab..c9328cd49 100644
--- a/docs/examples/CheckboxGroupExample.jsx
+++ b/docs/examples/CheckboxGroupExample.jsx
@@ -4,22 +4,25 @@ import Example from '../components/Example';
 import { CheckboxGroup, Checkbox } from '../../src';
 
 class CheckboxGroupExample extends React.PureComponent {
-  constructor(props) {
-    super(props);
+  state = {
+    movies: ['terminator', 'predator'],
+  };
 
-    this.state = {
-      movies: ['terminator', 'predator'],
-    };
-    this.handleGroupChange = this.handleGroupChange.bind(this);
-  }
-
-  handleGroupChange(movies) {
+  handleGroupChange = movies => {
     this.setState({ movies });
-  }
+  };
+
+  displayValue = () => {
+    return _.isEmpty(this.state.movies) ? <i>Empty</i> : <i>[{this.state.movies.join(' ')}]</i>;
+  };
 
   render() {
     return (
-      <React.Fragment>
+      <>
+        <h4>
+          <b>Selected Values: {this.displayValue()}</b>
+        </h4>
+        <br />
         <CheckboxGroup name="movies" value={this.state.movies} onChange={this.handleGroupChange}>
           <Checkbox label="The Terminator" value="terminator" />
           <Checkbox label="Predator" value="predator" />
@@ -27,12 +30,12 @@ class CheckboxGroupExample extends React.PureComponent {
         </CheckboxGroup>
         <br />
         <h3>Inline CheckboxGroup</h3>
-        <CheckboxGroup name="movies" value={['terminator', 'predator']} onChange={this.handleGroupChange} inline>
+        <CheckboxGroup name="movies" value={this.state.movies} onChange={this.handleGroupChange} inline>
           <Checkbox label="The Terminator" value="terminator" />
           <Checkbox label="Predator" value="predator" />
           <Checkbox label="The Sound of Music" value="soundofmusic" />
         </CheckboxGroup>
-      </React.Fragment>
+      </>
     );
   }
 }
@@ -40,11 +43,19 @@ class CheckboxGroupExample extends React.PureComponent {
 const exampleProps = {
   componentName: 'CheckboxGroup',
   notes: 'Contains individual checkboxes. The state of child checkboxes is held in an array.',
-  exampleCodeSnippet: `<CheckboxGroup name="movies" value={['terminator', 'predator']} onChange={onChangeGroup} inline={true|false}>
-  <Checkbox label="The Terminator" value="terminator" />
-  <Checkbox label="Predator" value="predator" />
-  <Checkbox label="The Sound of Music" value="soundofmusic" />
-</CheckboxGroup>`,
+  exampleCodeSnippet: `
+  <CheckboxGroup name="movies" value={this.state.movies} onChange={this.handleGroupChange}>
+    <Checkbox label="The Terminator" value="terminator" />
+    <Checkbox label="Predator" value="predator" />
+    <Checkbox label="The Sound of Music" value="soundofmusic" />
+  </CheckboxGroup>
+
+  <CheckboxGroup name="movies" value={this.state.movies} onChange={this.handleGroupChange} inline>
+    <Checkbox label="The Terminator" value="terminator" />
+    <Checkbox label="Predator" value="predator" />
+    <Checkbox label="The Sound of Music" value="soundofmusic" />
+  </CheckboxGroup>
+  `,
   propTypeSectionArray: [
     {
       label: '',
diff --git a/docs/examples/styles.scss b/docs/examples/styles.scss
index a38f85d5a..72e0cf642 100644
--- a/docs/examples/styles.scss
+++ b/docs/examples/styles.scss
@@ -71,6 +71,17 @@
       }
     }
   }
+
+  &.checkbox-example {
+    h4 {
+      margin-top: 20px;
+      font-weight: bold;
+    }
+
+    .fix-size {
+      width: 200px;
+    }
+  }
 }
 
 .full-width {
diff --git a/src/components/adslot-ui/Checkbox/index.jsx b/src/components/adslot-ui/Checkbox/index.jsx
index 2a9a56e9f..ccf42da10 100644
--- a/src/components/adslot-ui/Checkbox/index.jsx
+++ b/src/components/adslot-ui/Checkbox/index.jsx
@@ -2,60 +2,60 @@ import _ from 'lodash';
 import React from 'react';
 import classnames from 'classnames';
 import { expandDts } from '../../../lib/utils';
-import { checkboxPropTypes } from '../../prop-types/inputPropTypes';
+import { checkboxPropTypes, checkboxCheckStates } from '../../prop-types/inputPropTypes';
 import './styles.scss';
 
-class Checkbox extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.onChangeDefault = this.onChangeDefault.bind(this);
-  }
-
-  onChangeDefault(event) {
-    this.props.onChange(event, this.props.name);
-  }
-
-  render() {
-    const { name, value, label, dts, disabled, checked, id, className, inline } = this.props;
-
-    const componentClassName = classnames([
-      'checkbox-component',
-      { 'checkbox-component-inline': inline },
-      { disabled },
-    ]);
-    const iconClassName = classnames(['selection-component-icon', 'icheckbox', { checked }, { disabled }]);
+const getNextState = checked => {
+  if (checked === 'partial') return false;
+  return !checked;
+};
 
-    return (
-      <div className={componentClassName} {...expandDts(dts)}>
-        <label>
-          <div className="checkbox-component-input-container">
-            <span className={iconClassName} />
-            <input
-              type="checkbox"
-              name={name}
-              checked={checked}
-              disabled={disabled}
-              onChange={this.onChangeDefault}
-              value={value}
-              id={id}
-              className={className}
-            />
+const Checkbox = ({ name, value, label, dts, disabled, checked, id, className, inline, onChange, size }) => {
+  if (!_.includes(checkboxCheckStates, checked)) throw new Error("The 'checked' prop should be boolean or 'partial'");
+  const componentClassName = classnames([
+    'checkbox-component',
+    {
+      'checkbox-component-inline': inline,
+      checked: checked === true,
+      'partial-checked': checked === 'partial',
+      disabled,
+    },
+    className,
+  ]);
+
+  const handleChange = () => onChange(getNextState(checked), name, value);
+
+  return (
+    <div className={componentClassName} {...expandDts(dts)}>
+      <label>
+        <input
+          type="checkbox"
+          name={name}
+          checked={checked}
+          disabled={disabled}
+          onChange={handleChange}
+          value={value}
+          id={id}
+          className={className}
+        />
+        <div className="checkbox-component-icon" style={{ width: size, height: size }} />
+        {label ? (
+          <div className="checkbox-component-label" style={{ lineHeight: `${size}px` }}>
+            {label}
           </div>
-          {label ? <div className="checkbox-component-label">{label}</div> : null}
-        </label>
-      </div>
-    );
-  }
-}
+        ) : null}
+      </label>
+    </div>
+  );
+};
 
 Checkbox.propTypes = checkboxPropTypes;
-
 Checkbox.defaultProps = {
   dts: '',
   disabled: false,
   checked: false,
   onChange: _.noop,
+  size: 16,
 };
 
 export default Checkbox;
diff --git a/src/components/adslot-ui/Checkbox/index.spec.jsx b/src/components/adslot-ui/Checkbox/index.spec.jsx
index 3b55bd10d..31e16fbc9 100644
--- a/src/components/adslot-ui/Checkbox/index.spec.jsx
+++ b/src/components/adslot-ui/Checkbox/index.spec.jsx
@@ -32,14 +32,6 @@ describe('Checkbox', () => {
     expect(labelElement.text()).to.equal('Label goes here');
   });
 
-  it('should render with just onChange', () => {
-    const onChangeHandler = sinon.spy();
-    const component = shallow(<Checkbox onChange={onChangeHandler} />);
-    const checkboxElement = component.find('input[type="checkbox"]');
-    checkboxElement.simulate('change');
-    expect(onChangeHandler.callCount).to.equal(1);
-  });
-
   it('should render with id, className', () => {
     const component = shallow(<Checkbox id="checkboxId" className="checkboxClass" />);
     const checkboxElement = component.find('input[type="checkbox"]');
@@ -49,8 +41,7 @@ describe('Checkbox', () => {
 
   it('should render without a label', () => {
     const component = shallow(<Checkbox name="movies" value="terminator" />);
-    const labelElement = component.find('label');
-    expect(labelElement.text()).to.equal('');
+    expect(component.find('.checkbox-component-label')).to.have.length(0);
   });
 
   it('should add inline class when inline prop in true', () => {
@@ -66,4 +57,25 @@ describe('Checkbox', () => {
     component.setProps({ disabled: true });
     expect(component.hasClass('disabled')).to.equal(true);
   });
+
+  it('should throw error if checked value is not accepted', () => {
+    try {
+      shallow(<Checkbox name="test" checked="test" />);
+    } catch (err) {
+      expect(err.message).to.equal("The 'checked' prop should be boolean or 'partial'");
+    }
+  });
+
+  it('should pass next state valut to the onChange function', () => {
+    const handleChange = sinon.spy();
+    const component = shallow(<Checkbox name="name" value="value" onChange={handleChange} />);
+    component.find('input').simulate('change');
+    expect(handleChange.args[0]).to.eql([true, 'name', 'value']);
+    component.setProps({ checked: true });
+    component.find('input').simulate('change');
+    expect(handleChange.args[1]).to.eql([false, 'name', 'value']);
+    component.setProps({ checked: 'partial' });
+    component.find('input').simulate('change');
+    expect(handleChange.args[2]).to.eql([false, 'name', 'value']);
+  });
 });
diff --git a/src/components/adslot-ui/Checkbox/styles.scss b/src/components/adslot-ui/Checkbox/styles.scss
index 1c722c308..b9e9c1370 100644
--- a/src/components/adslot-ui/Checkbox/styles.scss
+++ b/src/components/adslot-ui/Checkbox/styles.scss
@@ -1,3 +1,84 @@
-@import '~styles/mixins/inputStyles';
+@import '~styles/variable';
 
-@include input-style('checkbox');
+.checkbox-component {
+  $checkbox-size: 16px;
+
+  cursor: pointer;
+  display: block;
+
+  label {
+    cursor: pointer;
+    font-weight: $font-weight-light;
+    margin-bottom: 0;
+    display: flex;
+  }
+
+  // Hide html input
+  input {
+    display: none;
+  }
+
+  // Vertical stack
+  & + & {
+    margin-top: 5px;
+  }
+
+  // Horizontal stack
+  &.checkbox-component-inline {
+    display: inline-block;
+  }
+
+  &.checkbox-component-inline + &.checkbox-component-inline {
+    margin-top: 0;
+    margin-left: 10px;
+  }
+
+  .checkbox-component-icon {
+    display: inline-block;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-image: url('~styles/icons/checkbox/empty.svg');
+  }
+
+  &:hover:not(.disabled):not(.checked):not(.partial-checked) .checkbox-component-icon {
+    background-image: url('~styles/icons/checkbox/hover.svg');
+  }
+
+  &.checked .checkbox-component-icon {
+    background-image: url('~styles/icons/checkbox/checked.svg');
+  }
+
+  &.partial-checked .checkbox-component-icon {
+    background-image: url('~styles/icons/checkbox/partial.svg');
+
+    &:hover {
+      background-image: url('~styles/icons/checkbox/partial-hover.svg');
+    }
+  }
+
+  // Disable
+  &.disabled {
+    cursor: not-allowed;
+
+    label {
+      cursor: not-allowed;
+    }
+
+    .checkbox-component-icon {
+      background-image: url('~styles/icons/checkbox/empty-disabled.svg');
+    }
+
+    &.checked .checkbox-component-icon {
+      background-image: url('~styles/icons/checkbox/checked-disabled.svg');
+    }
+
+    &.partial-checked .checkbox-component-icon {
+      background-image: url('~styles/icons/checkbox/partial-disabled.svg');
+    }
+  }
+
+  .checkbox-component-label {
+    margin-left: 5px;
+    line-height: $checkbox-size;
+  }
+}
diff --git a/src/components/adslot-ui/CheckboxGroup/index.jsx b/src/components/adslot-ui/CheckboxGroup/index.jsx
index 0301bd510..78d4751a7 100644
--- a/src/components/adslot-ui/CheckboxGroup/index.jsx
+++ b/src/components/adslot-ui/CheckboxGroup/index.jsx
@@ -1,54 +1,45 @@
 import _ from 'lodash';
 import React from 'react';
 import classnames from 'classnames';
+import Checkbox from '../Checkbox';
 import { expandDts } from '../../../lib/utils';
 import { checkboxGroupPropTypes } from '../../prop-types/inputPropTypes';
 
-class CheckboxGroup extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.renderChildren = this.renderChildren.bind(this);
-    this.onChangeDefault = this.onChangeDefault.bind(this);
-  }
-
-  onChangeDefault(event) {
-    const { onChange, name, value } = this.props;
-    const checkboxValue = event.currentTarget.value;
-
+const CheckboxGroup = ({ id, className, dts, children, value, name, inline, onChange }) => {
+  const handleCheckboxChange = (nextCheckboxState, checkboxName, checkboxValue) => {
     const newValues = _.includes(value, checkboxValue)
       ? value.filter(item => item !== checkboxValue)
       : [...value, checkboxValue];
 
     onChange(newValues, name);
-  }
-
-  renderChildren() {
-    const { children, value, name, inline } = this.props;
-    return React.Children.map(children, child =>
-      React.cloneElement(child, {
-        name,
-        checked: _.includes(value, child.props.value),
-        onChange: (...args) => {
-          child.props.onChange(...args);
-          this.onChangeDefault(...args);
-        },
-        inline,
-      })
-    );
-  }
-
-  render() {
-    const { id, className, dts } = this.props;
-    const classNames = classnames(['checkbox-group-component', className]);
-
-    return (
-      <div id={id} className={classNames} {...expandDts(dts)}>
-        {this.renderChildren()}
-      </div>
-    );
-  }
-}
+  };
+
+  const renderChildren = () =>
+    React.Children.map(children, child => {
+      if (child.type === Checkbox) {
+        const childProps = {
+          ...child.props,
+          name,
+          inline,
+          checked: _.includes(value, child.props.value),
+          onChange: (...args) => {
+            child.props.onChange(...args);
+            handleCheckboxChange(...args);
+          },
+        };
+        return <child.type {...childProps} />;
+      }
+      console.error("ERROR: CheckboxGroup's children should be an array of Checkbox");
+      return null;
+    });
+  const classNames = classnames(['checkbox-group-component', className]);
+
+  return (
+    <div id={id} className={classNames} {...expandDts(dts)}>
+      {renderChildren()}
+    </div>
+  );
+};
 
 CheckboxGroup.propTypes = checkboxGroupPropTypes;
 
diff --git a/src/components/adslot-ui/CheckboxGroup/index.spec.jsx b/src/components/adslot-ui/CheckboxGroup/index.spec.jsx
index b2650ad5c..d5745e492 100644
--- a/src/components/adslot-ui/CheckboxGroup/index.spec.jsx
+++ b/src/components/adslot-ui/CheckboxGroup/index.spec.jsx
@@ -1,12 +1,13 @@
+import _ from 'lodash';
 import React from 'react';
 import sinon from 'sinon';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 import { Checkbox } from 'adslot-ui';
 import CheckboxGroup from '.';
 
 describe('CheckboxGroup', () => {
   it('should render with props', () => {
-    const component = shallow(
+    const wrapper = shallow(
       <CheckboxGroup name="movies" value={['terminator', 'predator']} className="custom-class" onChange={sinon.spy}>
         <Checkbox label="The Terminator" value="terminator" />
         <Checkbox label="Predator" value="predator" />
@@ -14,14 +15,14 @@ describe('CheckboxGroup', () => {
       </CheckboxGroup>
     );
 
-    expect(component.hasClass('custom-class')).to.equal(true);
-    const childCheckboxes = component.find('Checkbox');
+    expect(wrapper.hasClass('custom-class')).to.equal(true);
+    const childCheckboxes = wrapper.find(Checkbox);
     expect(childCheckboxes.length).to.equal(3);
   });
 
   it('should handle checkbox change events when adding selection', () => {
     const onChangeGroup = sinon.spy();
-    const component = shallow(
+    const wrapper = mount(
       <CheckboxGroup name="movies" value={['terminator', 'predator']} onChange={onChangeGroup}>
         <Checkbox label="The Terminator" value="terminator" />
         <Checkbox label="Predator" value="predator" />
@@ -29,15 +30,15 @@ describe('CheckboxGroup', () => {
       </CheckboxGroup>
     );
 
-    const childCheckboxes = component.find(Checkbox);
-    childCheckboxes.at(0).simulate('change', { currentTarget: { value: 'terminator' } });
+    const inputComponents = wrapper.find('input');
+    inputComponents.at(0).simulate('change');
     expect(onChangeGroup.callCount).to.equal(1);
     expect(onChangeGroup.calledWith(['predator'], 'movies')).to.equal(true);
   });
 
   it('should handle checkbox change events when removing selection', () => {
     const onChangeGroup = sinon.spy();
-    const component = shallow(
+    const wrapper = mount(
       <CheckboxGroup name="movies" value={['terminator', 'predator']} onChange={onChangeGroup}>
         <Checkbox label="The Terminator" value="terminator" />
         <Checkbox label="Predator" value="predator" />
@@ -45,9 +46,19 @@ describe('CheckboxGroup', () => {
       </CheckboxGroup>
     );
 
-    const childCheckboxes = component.find(Checkbox);
-    childCheckboxes.at(2).simulate('change', { currentTarget: { value: 'soundofmusic' } });
+    const inputComponents = wrapper.find('input');
+    inputComponents.at(2).simulate('change');
     expect(onChangeGroup.callCount).to.equal(1);
     expect(onChangeGroup.calledWith(['terminator', 'predator', 'soundofmusic'], 'movies')).to.equal(true);
   });
+
+  it('should print warning if child is not a Checkbox component', () => {
+    console.error = sinon.spy();
+    shallow(
+      <CheckboxGroup name="movies" value={['test']} onChange={_.noop}>
+        <div>Not a Checkbox</div>
+      </CheckboxGroup>
+    );
+    expect(console.error.calledWith("ERROR: CheckboxGroup's children should be an array of Checkbox")).to.equal(true);
+  });
 });
diff --git a/src/components/prop-types/inputPropTypes.js b/src/components/prop-types/inputPropTypes.js
index cfc838c6d..6f269202f 100644
--- a/src/components/prop-types/inputPropTypes.js
+++ b/src/components/prop-types/inputPropTypes.js
@@ -1,6 +1,8 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 
+export const checkboxCheckStates = [true, false, 'partial'];
+
 // common input tag props
 export const inputPropTypes = {
   id: PropTypes.string,
@@ -11,21 +13,26 @@ export const inputPropTypes = {
   dts: PropTypes.string,
   disabled: PropTypes.bool,
   onChange: PropTypes.func,
+  inline: PropTypes.bool,
 };
 
-export const checkboxPropTypes = _.assign({}, inputPropTypes, {
-  checked: PropTypes.bool,
-  inline: PropTypes.bool,
-});
+export const checkboxPropTypes = {
+  ...inputPropTypes,
+  checked: PropTypes.oneOf(checkboxCheckStates),
+  size: PropTypes.number,
+};
 
-export const radioButtonPropTypes = checkboxPropTypes;
+export const radioButtonPropTypes = {
+  ...inputPropTypes,
+  checked: PropTypes.bool,
+};
 
 export const checkboxGroupPropTypes = {
   id: PropTypes.string,
   className: PropTypes.string,
   name: PropTypes.string.isRequired,
   value: PropTypes.arrayOf(PropTypes.string).isRequired,
-  children: PropTypes.arrayOf(PropTypes.element).isRequired,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
   onChange: PropTypes.func.isRequired,
   dts: PropTypes.string,
   inline: PropTypes.bool,
diff --git a/src/styles/icons/checkbox/checked-disabled.svg b/src/styles/icons/checkbox/checked-disabled.svg
new file mode 100644
index 000000000..fe0729fa1
--- /dev/null
+++ b/src/styles/icons/checkbox/checked-disabled.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path opacity=".5" fill="#D3D3D3" d="M15.5 13.9c0 .9-.7 1.6-1.6 1.6H2.1c-.9 0-1.6-.7-1.6-1.6V2.1c0-.9.7-1.6 1.6-1.6H14c.9 0 1.6.7 1.6 1.6v11.8z"/><path opacity=".8" fill="#ABABAB" 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>
\ No newline at end of file
diff --git a/src/styles/icons/checkbox/checked.svg b/src/styles/icons/checkbox/checked.svg
new file mode 100644
index 000000000..b97dcfddd
--- /dev/null
+++ b/src/styles/icons/checkbox/checked.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#4AAFCD" d="M15.5 13.9c0 .9-.7 1.6-1.6 1.6H2.1c-.9 0-1.6-.7-1.6-1.6V2.1c0-.9.7-1.6 1.6-1.6H14c.9 0 1.6.7 1.6 1.6v11.8z"/><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>
\ No newline at end of file
diff --git a/src/styles/icons/checkbox/empty-disabled.svg b/src/styles/icons/checkbox/empty-disabled.svg
new file mode 100644
index 000000000..61d034fe7
--- /dev/null
+++ b/src/styles/icons/checkbox/empty-disabled.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="#D3D3D3"><path opacity=".5" d="M2.1 15c-.6 0-1-.5-1-1V2.1c0-.6.5-1 1-1H14c.6 0 1 .5 1 1V14c0 .6-.5 1-1 1H2.1z"/><path opacity=".5" d="M13.9 1.6c.3 0 .5.2.5.5V14c0 .3-.2.5-.5.5H2.1c-.3 0-.5-.2-.5-.5V2.1c0-.3.2-.5.5-.5h11.8m0-1.1H2.1C1.2.5.5 1.2.5 2.1V14c0 .9.7 1.6 1.6 1.6H14c.9 0 1.6-.7 1.6-1.6V2.1c-.1-.9-.8-1.6-1.7-1.6z"/></g></svg>
\ No newline at end of file
diff --git a/src/styles/icons/checkbox/empty.svg b/src/styles/icons/checkbox/empty.svg
new file mode 100644
index 000000000..745298d13
--- /dev/null
+++ b/src/styles/icons/checkbox/empty.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path opacity=".8" fill="#838383" d="M13.9 1.6c.3 0 .5.2.5.5V14c0 .3-.2.5-.5.5H2.1c-.3 0-.5-.2-.5-.5V2.1c0-.3.2-.5.5-.5h11.8m0-1.1H2.1C1.2.5.5 1.2.5 2.1V14c0 .9.7 1.6 1.6 1.6H14c.9 0 1.6-.7 1.6-1.6V2.1c-.1-.9-.8-1.6-1.7-1.6z"/></svg>
\ No newline at end of file
diff --git a/src/styles/icons/checkbox/hover.svg b/src/styles/icons/checkbox/hover.svg
new file mode 100644
index 000000000..5548e4f66
--- /dev/null
+++ b/src/styles/icons/checkbox/hover.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#4AAFCD" d="M13.9 1.6c.3 0 .5.2.5.5V14c0 .3-.2.5-.5.5H2.1c-.3 0-.5-.2-.5-.5V2.1c0-.3.2-.5.5-.5h11.8m0-1.1H2.1C1.2.5.5 1.2.5 2.1V14c0 .9.7 1.6 1.6 1.6H14c.9 0 1.6-.7 1.6-1.6V2.1c-.1-.9-.8-1.6-1.7-1.6z"/></svg>
\ No newline at end of file
diff --git a/src/styles/icons/checkbox/partial-disabled.svg b/src/styles/icons/checkbox/partial-disabled.svg
new file mode 100644
index 000000000..d7c55309f
--- /dev/null
+++ b/src/styles/icons/checkbox/partial-disabled.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path opacity=".5" fill="#D3D3D3" d="M2.1 15c-.6 0-1-.5-1-1V2.1c0-.6.5-1 1-1H14c.6 0 1 .5 1 1V14c0 .6-.5 1-1 1H2.1z"/><path opacity=".5" fill="#D3D3D3" d="M13.9 1.6c.3 0 .5.2.5.5V14c0 .3-.2.5-.5.5H2.1c-.3 0-.5-.2-.5-.5V2.1c0-.3.2-.5.5-.5h11.8m0-1.1H2.1C1.2.5.5 1.2.5 2.1V14c0 .9.7 1.6 1.6 1.6H14c.9 0 1.6-.7 1.6-1.6V2.1c-.1-.9-.8-1.6-1.7-1.6z"/><path opacity=".8" fill="#ABABAB" d="M11.2 8.6H5c-.3 0-.5-.2-.5-.5V8c0-.3.2-.5.5-.5h6.1c.3 0 .5.2.5.5v.2c0 .2-.2.4-.4.4z"/></svg>
\ No newline at end of file
diff --git a/src/styles/icons/checkbox/partial-hover.svg b/src/styles/icons/checkbox/partial-hover.svg
new file mode 100644
index 000000000..afc33107c
--- /dev/null
+++ b/src/styles/icons/checkbox/partial-hover.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#4AAFCD" d="M13.9 1.6c.3 0 .5.2.5.5V14c0 .3-.2.5-.5.5H2.1c-.3 0-.5-.2-.5-.5V2.1c0-.3.2-.5.5-.5h11.8m0-1.1H2.1C1.2.5.5 1.2.5 2.1V14c0 .9.7 1.6 1.6 1.6H14c.9 0 1.6-.7 1.6-1.6V2.1c-.1-.9-.8-1.6-1.7-1.6z"/><path opacity=".8" fill="#838383" d="M11.2 8.6H4.9c-.3 0-.5-.2-.5-.5v-.2c0-.3.2-.5.5-.5H11c.3 0 .5.2.5.5v.2c.1.2-.1.4-.3.5z"/></svg>
\ No newline at end of file
diff --git a/src/styles/icons/checkbox/partial.svg b/src/styles/icons/checkbox/partial.svg
new file mode 100644
index 000000000..30875bc12
--- /dev/null
+++ b/src/styles/icons/checkbox/partial.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="#838383"><path opacity=".8" d="M13.9 1.6c.3 0 .5.2.5.5V14c0 .3-.2.5-.5.5H2.1c-.3 0-.5-.2-.5-.5V2.1c0-.3.2-.5.5-.5h11.8m0-1.1H2.1C1.2.5.5 1.2.5 2.1V14c0 .9.7 1.6 1.6 1.6H14c.9 0 1.6-.7 1.6-1.6V2.1c-.1-.9-.8-1.6-1.7-1.6z"/><path opacity=".8" d="M11.2 8.6H4.9c-.3 0-.5-.2-.5-.5v-.2c0-.3.2-.5.5-.5H11c.3 0 .5.2.5.5v.2c.1.2-.1.4-.3.5z"/></g></svg>