feature(checkbox): adding checkbox component, using material design p…

…ackage for icons

.babelrc.js

@@ -3,7 +3,19 @@ const cjs = BABEL_ENV === 'cjs' || NODE_ENV === 'test'
 
 module.exports = {
 	presets: [['env', { loose: true, modules: false }], 'react'],
-	plugins: ['transform-object-rest-spread', 'transform-class-properties', cjs && 'transform-es2015-modules-commonjs'].filter(
+  plugins: [
+    'transform-object-rest-spread', 
+    [
+      "transform-imports", {
+        "react-material-icon-svg": {
+            "transform": "react-material-icon-svg/dist/${member}",
+            "preventFullImport": true
+        }
+      }
+    ], 
+    'transform-class-properties', 
+    cjs && 'transform-es2015-modules-commonjs'
+  ].filter(
 		Boolean,
 	),
-}
+}

package.json

@@ -42,6 +42,7 @@
     "babel-plugin-external-helpers": "^6.22.0",
     "babel-plugin-react-svg": "^2.1.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-imports": "^1.5.0",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-plugin-transform-react-jsx": "^6.24.1",
     "babel-preset-env": "^1.7.0",
@@ -101,7 +102,8 @@
   "dependencies": {
     "@livechat/data-utils": "^0.2.3",
     "classnames": "^2.2.6",
-    "prop-types": "^15.6.2"
+    "prop-types": "^15.6.2",
+    "react-material-icon-svg": "^1.7.0"
   },
   "postcss": {},
   "jest": {

setup.js

@@ -13,6 +13,7 @@ global.RadioButton = Components.RadioButton;
 global.FormGroup = Components.FormGroup;
 global.FieldGroup = Components.FieldGroup;
 global.TextAreaField = Components.TextAreaField;
+global.CheckboxField = Components.CheckboxField;
 
 // docs components
 global.ComponentHtmlMarkup = ComponentHtmlMarkup;

src/components/CheckboxField/CheckboxField.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames/bind';
+import { CheckIcon } from 'react-material-icon-svg';
+import FieldDescription from '../FieldDescription';
+import styles from './style.scss';
+import getMergedClassNames from '../../utils/getMergedClassNames';
+
+const cx = classNames.bind(styles);
+
+const CheckboxField = props => {
+  const {
+    className,
+    children,
+    checked,
+    disabled,
+    id,
+    description,
+    ...restProps
+  } = props;
+
+  const baseClass = 'checkbox';
+  const mergedClassNames = getMergedClassNames(
+    cx({
+      [baseClass]: true,
+      [`${baseClass}--selected`]: checked,
+      [`${baseClass}--disabled`]: disabled
+    }),
+    className
+  );
+
+  return (
+    <div className={mergedClassNames}>
+      <label className={styles[`${baseClass}__label`]} htmlFor={id}>
+        <div className={styles[`${baseClass}__square`]}>
+          <CheckIcon className={styles[`${baseClass}__checkmark`]} />
+          <input
+            className={styles[`${baseClass}__input`]}
+            {...restProps}
+            type="radio"
+            id={id}
+            checked={checked}
+            disabled={disabled}
+          />
+        </div>
+        <div className={styles[`${baseClass}__text`]}>{children}</div>
+      </label>
+      {description && (
+        <FieldDescription className={styles[`${baseClass}__helper`]}>
+          {description}
+        </FieldDescription>
+      )}
+    </div>
+  );
+};
+
+CheckboxField.propTypes = {
+  className: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  onClick: PropTypes.func,
+  onChange: PropTypes.func,
+  checked: PropTypes.bool.isRequired,
+  children: PropTypes.node.isRequired,
+  description: PropTypes.string,
+  disabled: PropTypes.bool
+};
+
+CheckboxField.defaultProps = {
+  onChange: () => {}
+};
+
+export default CheckboxField;

src/components/CheckboxField/CheckboxField.md

@@ -0,0 +1,61 @@
+Use checkboxes when there is a short list of options and the user can select multiple options, all or none.
+
+<h3>Checkbox Field</h3>
+
+```js
+initialState = { checked: false };
+
+<CheckboxField
+  checked={state.checked}
+  onClick={() => setState({checked: !state.checked})}
+  id='checkbox-example-1'
+  description='checkbox helper text'
+>
+  Checkbox label
+</CheckboxField>
+```
+```js noeditor
+  <ComponentHtmlMarkup>
+    <CheckboxField
+      checked
+      id='checkbox-example-1'
+      description='checkbox helper text'
+    >
+      Checkbox label
+    </CheckboxField>
+  </ComponentHtmlMarkup>
+```
+
+<h3>CheckboxField Disabled</h3>
+
+```js
+<CheckboxField
+  checked
+  disabled
+  id='checkbox-example-2'
+>
+  Checkbox Field label
+</CheckboxField>
+```
+```js noeditor
+  <ComponentHtmlMarkup>
+    <CheckboxField
+      checked
+      disabled
+      id='checkbox-example-2'
+    >
+      Checkbox Field label
+    </CheckboxField>
+  </ComponentHtmlMarkup>
+```
+
+<h3>Best practices</h3>
+<ul>
+  <li>Labels appear to the right of checkboxes, and start with a captital letter.</li>
+  <li>Labels state clearly what will happen if the box is checked.</li>
+  <li>Use positive wording (“Turn on notifications” instead of “Turn off notifications”).</li>
+  <li>Don’t use commas at the end of each line.</li>
+  <li>Users can select the checkbox by clicking on the box or its label.</li>
+  <li>Each checkbox is independent – selecting one doesn't uncheck others in the list.</li>
+  <li>List options from most likely to least likely to be selected.</li>
+</ul>

src/components/CheckboxField/index.js

@@ -0,0 +1,3 @@
+import CheckboxField from './CheckboxField';
+
+export default CheckboxField;

src/components/CheckboxField/style.scss

@@ -0,0 +1,81 @@
+@import '../../scss/variables/colors';
+
+$base-class: 'checkbox';
+
+.#{$base-class} {
+  display: inline-block;
+
+  &__label {
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  &__square {
+    position: relative;
+    width: 16px;
+    height: 16px;
+    border-radius: 4px;
+    background-color:#f3f7f9;
+    border: 1px solid #bcc6d0;
+    margin-right: 8px;
+    transition: all 0.2s ease;
+    box-sizing: border-box;
+  }
+
+  &__checkmark {
+    opacity: 0;
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 10px;
+    height: 10px;
+    fill: #fff;
+    transition: all 0.2s ease;
+  }
+
+  &--selected {
+    .#{$base-class}__square {
+      background-color: $primary-color;
+      border-color: $primary-color;
+    }
+
+    .#{$base-class}__checkmark {
+      opacity: 1;
+    }
+  }
+
+  &__text {
+    font-size: 15px;
+    color: $font-primary-color;
+  }
+
+  &__input {
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+  }
+
+  &--disabled {
+    opacity: 0.3;
+    .#{$base-class} {
+      &__square {
+        border-color: $font-tertiary-color;
+        background-color: $font-tertiary-color;
+      }
+      &__label {
+        color: $font-primary-color;
+        cursor: not-allowed;
+      }
+      &__input {
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  &__helper {
+    cursor: default;
+    margin-left: 24px;
+  }
+} 

src/components/FieldGroup/FieldGroup.md

@@ -1,3 +1,5 @@
+Use FieldGroup component to group related elements, ie. checkboxes or radio buttons. Component provides label for group of fields which improves accessibility of your form.
+
 Field Group
 ```js
 initialState = { formValue: '1' };

src/components/FormGroup/FormGroup.md

@@ -1,4 +1,4 @@
-Use FormGroup component to group fields not related to each other.
+Use FormGroup component to group elements and display it in nice layout (inline or stacked).
 
 Form Group
 ```js

src/components/index.js

@@ -4,9 +4,9 @@ export { default as Button } from './Button';
 export { default as InputField } from './InputField';
 export { default as TextAreaField } from './TextAreaField';
 export { default as RadioButton } from './RadioButton';
+export { default as CheckboxField } from './CheckboxField';
 export { default as FormGroup } from './FormGroup';
 export { default as FieldGroup } from './FieldGroup';
 export { default as FieldError } from './FieldError';
-export { default as Input } from './Input';
 export { default as FieldLabel } from './FieldLabel';
 export { default as FieldDescription } from './FieldDescription';

styleguide.config.js

@@ -48,6 +48,7 @@ module.exports = {
             './src/components/InputField/InputField.js',
             './src/components/TextAreaField/TextAreaField.js',
             './src/components/RadioButton/RadioButton.js',
+            './src/components/CheckboxField/CheckboxField.js',
             './src/components/FieldGroup/FieldGroup.js',
             './src/components/FormGroup/FormGroup.js'
           ],