Add MultipleDropDown

src/Components/Choices/DropDown.jsx

@@ -8,8 +8,9 @@ import Field from '../Field';
 class DropDown extends Field {
   handleChange = (form, value) => {
     const { name, handleChange } = this.props;
-    form.setFieldValue(name, value.value);
-    handleChange(value.value);
+    const newValue = value ? value.value : null;
+    form.setFieldValue(name, newValue);
+    handleChange(newValue);
   };
 
   renderField = (form) => {

src/Components/Choices/MultipleDropDown.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { getIn } from 'formik';
+import ReactSelect from 'react-select';
+
+import Field from '../Field';
+
+class MultipleDropDown extends Field {
+  handleChange = (form, value) => {
+    const { name, handleChange } = this.props;
+    const newValue = value ? value.map(e => e.value) : null;
+    form.setFieldValue(name, newValue);
+    handleChange(newValue);
+  };
+
+  renderCheckbox = (checked, label) => (
+    <div
+      className={classNames('dp-pc_checkbox')}
+    >
+      <span
+        className="dp-pc_checkbox__checkbox"
+      >
+        <input type="checkbox" checked={checked} readOnly />
+        <i />
+        <span className="dp-pc_checkbox__label">
+          {label}
+        </span>
+      </span>
+    </div>
+  );
+
+  renderOption = (option, form) => {
+    const { name } = this.props;
+    const checked = form.values[name].includes(option.value);
+    return this.renderCheckbox(checked, option.label);
+  };
+
+  renderField = (form) => {
+    const { name, options, ...props } = this.props;
+    return (
+      <ReactSelect
+        value={getIn(form.values, name)}
+        name={name}
+        clearable={false}
+        onChange={value => this.handleChange(form, value)}
+        onBlur={() => form.setFieldTouched(name, true)}
+        options={options}
+        removeSelected={false}
+        optionRenderer={option => this.renderOption(option, form)}
+        multi
+        {...props}
+      />
+    );
+  }
+}
+
+MultipleDropDown.propTypes = {
+  ...Field.propTypes,
+  options: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+    value: PropTypes.any.isRequired
+  })),
+  handleChange: PropTypes.func,
+};
+
+MultipleDropDown.defaultProps = {
+  handleChange() {},
+};
+
+export default MultipleDropDown;

src/Components/Field.jsx

@@ -96,7 +96,10 @@ class Field extends React.Component {
           const touch = getIn(form.touched, name);
           const value = getIn(form.values, name);
           return (
-            <div className={classNames('dp-pc_field', { 'dp-pc_error': touch && error, 'dp-pc_empty': !value })}>
+            <div className={classNames('dp-pc_field', {
+              'dp-pc_error': touch && error, 'dp-pc_empty': value === null || value.length === 0
+            })}
+            >
               {this.renderField(form)}
               { touch && error ? <ErrorMessage name={name} form={form} /> : this.renderDescription() }
               {this.renderIndicator()}

src/Components/index.js

@@ -1,5 +1,6 @@
 import Checkboxes from './Choices/Checkboxes';
 import DropDown from './Choices/DropDown';
+import MultipleDropDown from './Choices/MultipleDropDown';
 import Radio from './Choices/Radio';
 
 import Progress from './Elements/Progress';
@@ -27,6 +28,7 @@ import TicketForm from './TicketForm';
 export {
   Checkboxes,
   DropDown,
+  MultipleDropDown,
   Radio,
 
   Progress,

src/style.css

@@ -322,6 +322,63 @@
     height: 50%;
   }
 
+
+  /******************************
+      Multiple Dropdown
+  *******************************/
+
+  & .Select--multi {
+    & .Select-control .Select-value {
+      line-height: 1.2;
+      background-color: var(--option-background);
+      border-color: var(--checkbox-border);
+      color: var(--text-color);
+      border-radius: 4px;
+      border-width: 2px;
+      margin-top: 15px;
+    }
+    & .Select-control .Select-value-label {
+      position: static;
+      font-size: 12px;
+    }
+    & .Select-value-icon {
+      border-right: none;
+      font-size: 18px;
+      padding: 0 5px;
+    }
+    & .Select-control .Select-input > input {
+      margin-top: 6px;
+    }
+    & .Select-menu-outer {
+      margin-top: -5px;
+      & .dp-pc_checkbox {
+        height: auto;
+        padding: 0;
+        margin-left: 0;
+        & .dp-pc_checkbox__checkbox {
+          margin-top: 0;
+          & .dp-pc_checkbox__label {
+            padding: 0;
+            color: var(--label-color);
+          }
+        }
+      }
+      & .Select-option.is-focused {
+        background: none;
+        & .dp-pc_checkbox i {
+          border-color: var(--text-color);
+        }
+      }
+      & .Select-option.is-selected {
+        background: none;
+        & .dp-pc_checkbox__label {
+          padding: 0;
+          color: var(--text-color);
+        }
+      }
+    }
+  }
+
   /******************************
       Input checkbox
   *******************************/

tests/jest/Components/Choices/__snapshots__/testCheckboxes.jsx.snap

@@ -6,7 +6,7 @@ exports[`>>> Checkboxes --- Snapshot +++capturing Snapshot of Checkboxes 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="dp-pc_field"
+    className="dp-pc_field dp-pc_empty"
   >
     <div
       className="dp-pc_checkboxes"

tests/storybook/index.js

@@ -8,6 +8,7 @@ import './dropdown';
 import './email';
 import './file_upload';
 import './likert_scale';
+import './multiple_dropdown';
 import './password';
 import './radio';
 import './text';

tests/storybook/multiple_dropdown.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { Formik } from 'formik';
+import { Form, MultipleDropDown, Submit } from '../../src/Components';
+
+const options = [
+  { value: 'bacon', label: 'Bacon' },
+  { value: 'cheese', label: 'Cheese' },
+  { value: 'jalapenos', label: 'Jalapeños' },
+  { value: 'mushrooms', label: 'Mushrooms' },
+  { value: 'onions', label: 'Onions' },
+  { value: 'pickles', label: 'Pickles' },
+];
+
+storiesOf('Choices', module)
+  .add('MultipleDropDown', () => (
+    <Formik
+      initialValues={{ filling: ['bacon'] }}
+      onSubmit={action('submit')}
+      render={() => (
+        <Form>
+          <MultipleDropDown
+            name="filling"
+            options={options}
+            label="Filling"
+          />
+          <Submit>Submit</Submit>
+        </Form>
+      )}
+    />
+  ));