From e3a156edd47cb5558eb1847f80114997338e35fc Mon Sep 17 00:00:00 2001
From: Farhanah Sheets <fsheets@edx.org>
Date: Fri, 5 Jan 2018 10:48:41 -0500
Subject: [PATCH] feat(checkboxgroup): New CheckBoxGroup, update CheckBox &
 asInput styles

---
 .../__snapshots__/Storyshots.test.js.snap     | 327 +++++++++++++++++-
 README.md                                     |   1 +
 src/CheckBox/index.jsx                        |   3 +-
 src/CheckBoxGroup/CheckBoxGroup.scss          |   2 +
 src/CheckBoxGroup/CheckBoxGroup.stories.jsx   |  28 ++
 src/CheckBoxGroup/CheckBoxGroup.test.jsx      |  34 ++
 src/CheckBoxGroup/README.md                   |   8 +
 src/CheckBoxGroup/index.jsx                   |  20 ++
 src/asInput/index.jsx                         |  42 ++-
 9 files changed, 442 insertions(+), 23 deletions(-)
 create mode 100644 src/CheckBoxGroup/CheckBoxGroup.scss
 create mode 100644 src/CheckBoxGroup/CheckBoxGroup.stories.jsx
 create mode 100644 src/CheckBoxGroup/CheckBoxGroup.test.jsx
 create mode 100644 src/CheckBoxGroup/README.md
 create mode 100644 src/CheckBoxGroup/index.jsx

diff --git a/.storybook/__snapshots__/Storyshots.test.js.snap b/.storybook/__snapshots__/Storyshots.test.js.snap
index 24c3af3045..0f6998001f 100644
--- a/.storybook/__snapshots__/Storyshots.test.js.snap
+++ b/.storybook/__snapshots__/Storyshots.test.js.snap
@@ -14,10 +14,19 @@ exports[`Storyshots Button basic usage 1`] = `
 
 exports[`Storyshots CheckBox basic usage 1`] = `
 <div
-  className="form-group"
+  className={
+    Array [
+      "form-check",
+    ]
+  }
 >
   <input
     aria-checked={false}
+    className={
+      Array [
+        "form-check-input",
+      ]
+    }
     defaultChecked={false}
     disabled={false}
     id="asInput1"
@@ -26,7 +35,13 @@ exports[`Storyshots CheckBox basic usage 1`] = `
     type="checkbox"
   />
   <label
+    className={
+      Array [
+        "form-check-label",
+      ]
+    }
     htmlFor="asInput1"
+    id="label-asInput1"
   >
     check me out!
   </label>
@@ -42,10 +57,19 @@ exports[`Storyshots CheckBox basic usage 1`] = `
 
 exports[`Storyshots CheckBox call a function 1`] = `
 <div
-  className="form-group"
+  className={
+    Array [
+      "form-check",
+    ]
+  }
 >
   <input
     aria-checked={false}
+    className={
+      Array [
+        "form-check-input",
+      ]
+    }
     defaultChecked={false}
     disabled={false}
     id="asInput1"
@@ -54,7 +78,13 @@ exports[`Storyshots CheckBox call a function 1`] = `
     type="checkbox"
   />
   <label
+    className={
+      Array [
+        "form-check-label",
+      ]
+    }
     htmlFor="asInput1"
+    id="label-asInput1"
   >
     check out the console
   </label>
@@ -70,10 +100,19 @@ exports[`Storyshots CheckBox call a function 1`] = `
 
 exports[`Storyshots CheckBox default checked 1`] = `
 <div
-  className="form-group"
+  className={
+    Array [
+      "form-check",
+    ]
+  }
 >
   <input
     aria-checked={true}
+    className={
+      Array [
+        "form-check-input",
+      ]
+    }
     defaultChecked={true}
     disabled={false}
     id="asInput1"
@@ -82,7 +121,13 @@ exports[`Storyshots CheckBox default checked 1`] = `
     type="checkbox"
   />
   <label
+    className={
+      Array [
+        "form-check-label",
+      ]
+    }
     htmlFor="asInput1"
+    id="label-asInput1"
   >
     (un)check me out
   </label>
@@ -98,10 +143,19 @@ exports[`Storyshots CheckBox default checked 1`] = `
 
 exports[`Storyshots CheckBox disabled 1`] = `
 <div
-  className="form-group"
+  className={
+    Array [
+      "form-check",
+    ]
+  }
 >
   <input
     aria-checked={false}
+    className={
+      Array [
+        "form-check-input",
+      ]
+    }
     defaultChecked={false}
     disabled={true}
     id="asInput1"
@@ -110,7 +164,13 @@ exports[`Storyshots CheckBox disabled 1`] = `
     type="checkbox"
   />
   <label
+    className={
+      Array [
+        "form-check-label",
+      ]
+    }
     htmlFor="asInput1"
+    id="label-asInput1"
   >
     you cannot check me out
   </label>
@@ -124,6 +184,133 @@ exports[`Storyshots CheckBox disabled 1`] = `
 </div>
 `;
 
+exports[`Storyshots CheckBoxGroup basic usage 1`] = `
+<div
+  className="form-group"
+>
+  <div
+    className={
+      Array [
+        "form-check",
+      ]
+    }
+  >
+    <input
+      aria-checked={false}
+      className={
+        Array [
+          "form-check-input",
+        ]
+      }
+      defaultChecked={false}
+      disabled={false}
+      id="checkbox1"
+      name="basicCheckBox"
+      onChange={[Function]}
+      type="checkbox"
+    />
+    <label
+      className={
+        Array [
+          "form-check-label",
+        ]
+      }
+      htmlFor="checkbox1"
+      id="label-checkbox1"
+    >
+      CheckBox 1
+    </label>
+    <div
+      aria-live="polite"
+      className="form-control-feedback"
+      id="error-checkbox1"
+    >
+      <span />
+    </div>
+  </div>
+  <div
+    className={
+      Array [
+        "form-check",
+      ]
+    }
+  >
+    <input
+      aria-checked={false}
+      className={
+        Array [
+          "form-check-input",
+        ]
+      }
+      defaultChecked={false}
+      disabled={false}
+      id="checkbox2"
+      name="basicCheckBox"
+      onChange={[Function]}
+      type="checkbox"
+    />
+    <label
+      className={
+        Array [
+          "form-check-label",
+        ]
+      }
+      htmlFor="checkbox2"
+      id="label-checkbox2"
+    >
+      CheckBox 2
+    </label>
+    <div
+      aria-live="polite"
+      className="form-control-feedback"
+      id="error-checkbox2"
+    >
+      <span />
+    </div>
+  </div>
+  <div
+    className={
+      Array [
+        "form-check",
+      ]
+    }
+  >
+    <input
+      aria-checked={false}
+      className={
+        Array [
+          "form-check-input",
+        ]
+      }
+      defaultChecked={false}
+      disabled={false}
+      id="checkbox3"
+      name="basicCheckBox"
+      onChange={[Function]}
+      type="checkbox"
+    />
+    <label
+      className={
+        Array [
+          "form-check-label",
+        ]
+      }
+      htmlFor="checkbox3"
+      id="label-checkbox3"
+    >
+      CheckBox 3
+    </label>
+    <div
+      aria-live="polite"
+      className="form-control-feedback"
+      id="error-checkbox3"
+    >
+      <span />
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Dropdown basic usage 1`] = `
 <div
   className="dropdown"
@@ -248,9 +435,18 @@ exports[`Storyshots Icon with screenreader text 1`] = `
 
 exports[`Storyshots InputSelect basic usage 1`] = `
 <div
-  className="form-group"
+  className={
+    Array [
+      "form-group",
+    ]
+  }
 >
   <label
+    className={
+      Array [
+        "",
+      ]
+    }
     htmlFor="asInput1"
     id="label-asInput1"
   >
@@ -299,9 +495,18 @@ exports[`Storyshots InputSelect basic usage 1`] = `
 
 exports[`Storyshots InputSelect separate labels and values 1`] = `
 <div
-  className="form-group"
+  className={
+    Array [
+      "form-group",
+    ]
+  }
 >
   <label
+    className={
+      Array [
+        "",
+      ]
+    }
     htmlFor="asInput1"
     id="label-asInput1"
   >
@@ -360,9 +565,18 @@ exports[`Storyshots InputSelect separate labels and values 1`] = `
 
 exports[`Storyshots InputSelect separate option groups 1`] = `
 <div
-  className="form-group"
+  className={
+    Array [
+      "form-group",
+    ]
+  }
 >
   <label
+    className={
+      Array [
+        "",
+      ]
+    }
     htmlFor="asInput1"
     id="label-asInput1"
   >
@@ -469,9 +683,18 @@ exports[`Storyshots InputSelect separate option groups 1`] = `
 
 exports[`Storyshots InputSelect with validation 1`] = `
 <div
-  className="form-group"
+  className={
+    Array [
+      "form-group",
+    ]
+  }
 >
   <label
+    className={
+      Array [
+        "",
+      ]
+    }
     htmlFor="asInput1"
     id="label-asInput1"
   >
@@ -561,9 +784,18 @@ exports[`Storyshots InputText focus test 1`] = `
     </div>
   </div>
   <div
-    className="form-group"
+    className={
+      Array [
+        "form-group",
+      ]
+    }
   >
     <label
+      className={
+        Array [
+          "",
+        ]
+      }
       htmlFor="data"
       id="label-data"
     >
@@ -597,9 +829,18 @@ exports[`Storyshots InputText focus test 1`] = `
 
 exports[`Storyshots InputText minimal usage 1`] = `
 <div
-  className="form-group"
+  className={
+    Array [
+      "form-group",
+    ]
+  }
 >
   <label
+    className={
+      Array [
+        "",
+      ]
+    }
     htmlFor="asInput1"
     id="label-asInput1"
   >
@@ -632,9 +873,18 @@ exports[`Storyshots InputText minimal usage 1`] = `
 
 exports[`Storyshots InputText validation 1`] = `
 <div
-  className="form-group"
+  className={
+    Array [
+      "form-group",
+    ]
+  }
 >
   <label
+    className={
+      Array [
+        "",
+      ]
+    }
     htmlFor="username"
     id="label-username"
   >
@@ -673,9 +923,18 @@ exports[`Storyshots InputText validation 1`] = `
 
 exports[`Storyshots InputText validation with danger theme 1`] = `
 <div
-  className="form-group"
+  className={
+    Array [
+      "form-group",
+    ]
+  }
 >
   <label
+    className={
+      Array [
+        "",
+      ]
+    }
     htmlFor="asInput1"
     id="label-asInput1"
   >
@@ -1189,9 +1448,18 @@ exports[`Storyshots Modal modal with element body 1`] = `
             Enter your e-mail address to receive free cat facts!
           </p>
           <div
-            className="form-group"
+            className={
+              Array [
+                "form-group",
+              ]
+            }
           >
             <label
+              className={
+                Array [
+                  "",
+                ]
+              }
               htmlFor="asInput1"
               id="label-asInput1"
             >
@@ -2279,9 +2547,18 @@ exports[`Storyshots Tabs basic usage 1`] = `
 
 exports[`Storyshots Textarea minimal usage 1`] = `
 <div
-  className="form-group"
+  className={
+    Array [
+      "form-group",
+    ]
+  }
 >
   <label
+    className={
+      Array [
+        "",
+      ]
+    }
     htmlFor="asInput1"
     id="label-asInput1"
   >
@@ -2317,9 +2594,18 @@ exports[`Storyshots Textarea minimal usage 1`] = `
 
 exports[`Storyshots Textarea scrollable 1`] = `
 <div
-  className="form-group"
+  className={
+    Array [
+      "form-group",
+    ]
+  }
 >
   <label
+    className={
+      Array [
+        "",
+      ]
+    }
     htmlFor="asInput1"
     id="label-asInput1"
   >
@@ -2355,9 +2641,18 @@ exports[`Storyshots Textarea scrollable 1`] = `
 
 exports[`Storyshots Textarea validation 1`] = `
 <div
-  className="form-group"
+  className={
+    Array [
+      "form-group",
+    ]
+  }
 >
   <label
+    className={
+      Array [
+        "",
+      ]
+    }
     htmlFor="asInput1"
     id="label-asInput1"
   >
diff --git a/README.md b/README.md
index 329832ee00..b1207543ba 100644
--- a/README.md
+++ b/README.md
@@ -44,6 +44,7 @@ Demo implementations of each component are viewable at the Paragon doc site at h
 - [asInput](src/asInput)
 - [Button](src/Button)
 - [CheckBox](src/CheckBox)
+- [CheckBoxGroup](src/CheckBoxGroup)
 - [Dropdown](src/Dropdown)
 - [Hyperlink](src/Hyperlink)
 - [Icon](src/Icon)
diff --git a/src/CheckBox/index.jsx b/src/CheckBox/index.jsx
index b3ee37cc9b..a568bd35bf 100644
--- a/src/CheckBox/index.jsx
+++ b/src/CheckBox/index.jsx
@@ -28,6 +28,7 @@ class Check extends React.Component {
     return (
       <input
         id={props.id}
+        className={props.className}
         type="checkbox"
         name={props.name}
         defaultChecked={this.state.checked}
@@ -49,6 +50,6 @@ Check.defaultProps = {
   onChange: () => {},
 };
 
-const CheckBox = asInput(Check, false);
+const CheckBox = asInput(Check, 'checkbox', false);
 
 export default CheckBox;
diff --git a/src/CheckBoxGroup/CheckBoxGroup.scss b/src/CheckBoxGroup/CheckBoxGroup.scss
new file mode 100644
index 0000000000..dcdb87ad58
--- /dev/null
+++ b/src/CheckBoxGroup/CheckBoxGroup.scss
@@ -0,0 +1,2 @@
+@import "~bootstrap/scss/_forms";
+@import "~bootstrap/scss/mixins/_forms";
diff --git a/src/CheckBoxGroup/CheckBoxGroup.stories.jsx b/src/CheckBoxGroup/CheckBoxGroup.stories.jsx
new file mode 100644
index 0000000000..3a580eaf93
--- /dev/null
+++ b/src/CheckBoxGroup/CheckBoxGroup.stories.jsx
@@ -0,0 +1,28 @@
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable no-console */
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import CheckBoxGroup from './index';
+import CheckBox from '../CheckBox';
+
+storiesOf('CheckBoxGroup', module)
+  .add('basic usage', () => (
+    <CheckBoxGroup>
+      <CheckBox
+        id="checkbox1"
+        name="basicCheckBox"
+        label="CheckBox 1"
+      />
+      <CheckBox
+        id="checkbox2"
+        name="basicCheckBox"
+        label="CheckBox 2"
+      />
+      <CheckBox
+        id="checkbox3"
+        name="basicCheckBox"
+        label="CheckBox 3"
+      />
+    </CheckBoxGroup>
+  ));
diff --git a/src/CheckBoxGroup/CheckBoxGroup.test.jsx b/src/CheckBoxGroup/CheckBoxGroup.test.jsx
new file mode 100644
index 0000000000..a95b958251
--- /dev/null
+++ b/src/CheckBoxGroup/CheckBoxGroup.test.jsx
@@ -0,0 +1,34 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import { mount } from 'enzyme';
+import CheckBoxGroup from './index';
+import CheckBox from '../CheckBox';
+
+describe('<CheckBoxGroup />', () => {
+  it('correct number of children displayed in group', () => {
+    const checkBoxGroup = (
+      <CheckBoxGroup>
+        <CheckBox
+          id="checkbox1"
+          name="basicCheckBox"
+          label="CheckBox 1"
+        />
+        <CheckBox
+          id="checkbox2"
+          name="basicCheckBox"
+          label="CheckBox 2"
+        />
+        <CheckBox
+          id="checkbox3"
+          name="basicCheckBox"
+          label="CheckBox 3"
+        />
+      </CheckBoxGroup>
+    );
+    const wrapper = mount(checkBoxGroup);
+
+    expect(wrapper.find('[id="checkbox1"]').exists()).toEqual(true);
+    expect(wrapper.find('[id="checkbox2"]').exists()).toEqual(true);
+    expect(wrapper.find('[id="checkbox3"]').exists()).toEqual(true);
+  });
+});
diff --git a/src/CheckBoxGroup/README.md b/src/CheckBoxGroup/README.md
new file mode 100644
index 0000000000..4d400976e2
--- /dev/null
+++ b/src/CheckBoxGroup/README.md
@@ -0,0 +1,8 @@
+# CheckBoxGroup
+
+CheckboxGroup is a group of the CheckBox components. It takes CheckBox components as children and wraps them in the bootstrap `form-group` styling. See `CheckBox` description for more details
+
+## API
+
+### `children` (array of `CheckBox`; required)
+`children` represents the CheckBox components defined within the CheckBoxGroup component and is not a specific named prop that needs to be passed in. At least one CheckBox must be defined within the group. Example: `<CheckBoxGroup><CheckBox .../></CheckBoxGroup>` 
diff --git a/src/CheckBoxGroup/index.jsx b/src/CheckBoxGroup/index.jsx
new file mode 100644
index 0000000000..96c2e1a538
--- /dev/null
+++ b/src/CheckBoxGroup/index.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ElementPropTypes from 'react-element-proptypes';
+
+import CheckBox from '../CheckBox';
+import styles from './CheckBoxGroup.scss';
+
+function CheckBoxGroup(props) {
+  return (
+    <div className={styles['form-group']}>
+      {props.children}
+    </div>
+  );
+}
+
+CheckBoxGroup.propTypes = {
+  children: PropTypes.arrayOf(ElementPropTypes.elementOfType(CheckBox)).isRequired,
+};
+
+export default CheckBoxGroup;
diff --git a/src/asInput/index.jsx b/src/asInput/index.jsx
index 05d2421569..08aae9f740 100644
--- a/src/asInput/index.jsx
+++ b/src/asInput/index.jsx
@@ -41,7 +41,7 @@ export const defaultProps = {
   themes: [],
 };
 
-const asInput = (WrappedComponent, labelFirst = true) => {
+const asInput = (WrappedComponent, inputType = undefined, labelFirst = true) => {
   class NewComponent extends React.Component {
     constructor(props) {
       super(props);
@@ -125,10 +125,33 @@ const asInput = (WrappedComponent, labelFirst = true) => {
       return desc;
     }
 
+    getLabel() {
+      return (
+        <label
+          id={`label-${this.state.id}`}
+          htmlFor={this.state.id}
+          className={[classNames({
+            [styles['form-check-label']]: this.isGroupedInput(),
+          })]}
+        >
+          {this.props.label}
+        </label>
+      );
+    }
+
     hasDangerTheme() {
       return this.props.themes.includes('danger');
     }
 
+    isGroupedInput() {
+      switch (inputType) {
+        case 'checkbox':
+          return true;
+        default:
+          return false;
+      }
+    }
+
     handleBlur(event) {
       const val = event.target.value;
 
@@ -149,21 +172,28 @@ const asInput = (WrappedComponent, labelFirst = true) => {
     render() {
       const { description, error, describedBy } = this.getDescriptions();
       return (
-        <div className={styles['form-group']}>
-          {labelFirst && <label id={`label-${this.state.id}`} htmlFor={this.state.id}>{this.props.label}</label>}
+        <div className={[classNames({
+            [styles['form-group']]: !this.isGroupedInput(),
+            [styles['form-check']]: this.isGroupedInput(),
+          })]}
+        >
+          {labelFirst && this.getLabel()}
           <WrappedComponent
             {...this.props}
             {...this.state}
             className={[classNames(
-              styles['form-control'],
-              { [styles['is-invalid']]: !this.state.isValid && this.hasDangerTheme() },
+              {
+                [styles['form-control']]: !this.isGroupedInput(),
+                [styles['form-check-input']]: this.isGroupedInput(),
+                [styles['is-invalid']]: !this.state.isValid && this.hasDangerTheme(),
+              },
               { ...this.props.className },
             )]}
             describedBy={describedBy}
             onChange={this.handleChange}
             onBlur={this.handleBlur}
           />
-          {!labelFirst && <label htmlFor={this.state.id}>{this.props.label}</label>}
+          {!labelFirst && this.getLabel()}
           {error}
           {description}
         </div>