fixed checkbox issues, added parameter to HOC

.storybook/__snapshots__/Storyshots.test.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots CheckBox basic usage 1`] = `
-<label
-  htmlFor="checkbox1"
+<div
+  className="form-group"
 >
   <input
     aria-checked={false}
-    aria-describedby="checkbox"
     defaultChecked={false}
-    disabled={undefined}
-    id="checkbox1"
+    disabled={false}
+    id="asInput1"
     name="checkbox"
     onClick={[Function]}
-    tabIndex="0"
     type="checkbox"
   />
-  check me out!
-</label>
+  <label
+    htmlFor="asInput1"
+  >
+    check me out!
+  </label>
+</div>
 `;
 
 exports[`Storyshots CheckBox call a function 1`] = `
-<label
-  htmlFor="checkbox4"
+<div
+  className="form-group"
 >
   <input
     aria-checked={false}
-    aria-describedby="checkbox"
     defaultChecked={false}
-    disabled={undefined}
-    id="checkbox4"
+    disabled={false}
+    id="asInput7"
     name="checkbox"
     onClick={[Function]}
-    tabIndex="0"
     type="checkbox"
   />
-  check out the console
-</label>
+  <label
+    htmlFor="asInput7"
+  >
+    check out the console
+  </label>
+</div>
 `;
 
 exports[`Storyshots CheckBox default checked 1`] = `
-<label
-  htmlFor="checkbox3"
+<div
+  className="form-group"
 >
   <input
     aria-checked={true}
-    aria-describedby="checkbox"
     defaultChecked={true}
-    disabled={undefined}
-    id="checkbox3"
+    disabled={false}
+    id="asInput5"
     name="checkbox"
     onClick={[Function]}
-    tabIndex="0"
     type="checkbox"
   />
-  (un)check me out
-</label>
+  <label
+    htmlFor="asInput5"
+  >
+    (un)check me out
+  </label>
+</div>
 `;
 
 exports[`Storyshots CheckBox disabled 1`] = `
-<label
-  htmlFor="checkbox2"
+<div
+  className="form-group"
 >
   <input
     aria-checked={false}
-    aria-describedby="checkbox"
     defaultChecked={false}
     disabled={true}
-    id="checkbox2"
+    id="asInput3"
     name="checkbox"
     onClick={[Function]}
-    tabIndex="0"
     type="checkbox"
   />
-  you cannot check me out
-</label>
+  <label
+    htmlFor="asInput3"
+  >
+    you cannot check me out
+  </label>
+</div>
 `;
 
 exports[`Storyshots Dropdown basic usage 1`] = `
@@ -142,14 +150,14 @@ exports[`Storyshots InputSelect basic usage 1`] = `
   className="form-group"
 >
   <label
-    htmlFor="asInput5"
+    htmlFor="asInput9"
   >
     Fruits
   </label>
   <select
     aria-describedby={undefined}
     className="form-control"
-    id="asInput5"
+    id="asInput9"
     name="fruits"
     onBlur={[Function]}
     onChange={[Function]}
@@ -185,14 +193,14 @@ exports[`Storyshots InputSelect separate labels and values 1`] = `
   className="form-group"
 >
   <label
-    htmlFor="asInput6"
+    htmlFor="asInput10"
   >
     New England States
   </label>
   <select
     aria-describedby={undefined}
     className="form-control"
-    id="asInput6"
+    id="asInput10"
     name="new-england-states"
     onBlur={[Function]}
     onChange={[Function]}
@@ -238,14 +246,14 @@ exports[`Storyshots InputSelect separate option groups 1`] = `
   className="form-group"
 >
   <label
-    htmlFor="asInput7"
+    htmlFor="asInput11"
   >
     Northeast States
   </label>
   <select
     aria-describedby={undefined}
     className="form-control"
-    id="asInput7"
+    id="asInput11"
     name="northeast-states"
     onBlur={[Function]}
     onChange={[Function]}
@@ -339,14 +347,14 @@ exports[`Storyshots InputSelect with validation 1`] = `
   className="form-group"
 >
   <label
-    htmlFor="asInput8"
+    htmlFor="asInput12"
   >
     Favorite Color
   </label>
   <select
     aria-describedby={undefined}
     className="form-control"
-    id="asInput8"
+    id="asInput12"
     name="color"
     onBlur={[Function]}
     onChange={[Function]}
@@ -397,7 +405,7 @@ exports[`Storyshots InputText minimal usage 1`] = `
   className="form-group"
 >
   <label
-    htmlFor="asInput9"
+    htmlFor="asInput13"
   >
     First Name
   </label>
@@ -406,7 +414,7 @@ exports[`Storyshots InputText minimal usage 1`] = `
     aria-invalid={false}
     className="form-control"
     disabled={false}
-    id="asInput9"
+    id="asInput13"
     name="name"
     onBlur={[Function]}
     onChange={[Function]}
@@ -423,16 +431,16 @@ exports[`Storyshots InputText validation 1`] = `
   className="form-group"
 >
   <label
-    htmlFor="asInput10"
+    htmlFor="asInput14"
   >
     Username
   </label>
   <input
-    aria-describedby="undefined description-asInput10"
+    aria-describedby="undefined description-asInput14"
     aria-invalid={false}
     className="form-control"
     disabled={false}
-    id="asInput10"
+    id="asInput14"
     name="username"
     onBlur={[Function]}
     onChange={[Function]}
@@ -443,7 +451,7 @@ exports[`Storyshots InputText validation 1`] = `
   />
   <small
     className="form-text"
-    id="description-asInput10"
+    id="description-asInput14"
   >
     The unique name that identifies you throughout the site.
   </small>
@@ -498,10 +506,10 @@ exports[`Storyshots Tabs basic usage 1`] = `
   >
     <li
       className="nav-item"
-      id="tab-label-tabInterface11-0"
+      id="tab-label-tabInterface15-0"
     >
       <a
-        aria-controls="tab-panel-tabInterface11-0"
+        aria-controls="tab-panel-tabInterface15-0"
         aria-selected={true}
         className="nav-link active"
         onClick={[Function]}
@@ -513,10 +521,10 @@ exports[`Storyshots Tabs basic usage 1`] = `
     </li>
     <li
       className="nav-item"
-      id="tab-label-tabInterface11-1"
+      id="tab-label-tabInterface15-1"
     >
       <a
-        aria-controls="tab-panel-tabInterface11-1"
+        aria-controls="tab-panel-tabInterface15-1"
         aria-selected={false}
         className="nav-link"
         onClick={[Function]}
@@ -528,10 +536,10 @@ exports[`Storyshots Tabs basic usage 1`] = `
     </li>
     <li
       className="nav-item"
-      id="tab-label-tabInterface11-2"
+      id="tab-label-tabInterface15-2"
     >
       <a
-        aria-controls="tab-panel-tabInterface11-2"
+        aria-controls="tab-panel-tabInterface15-2"
         aria-selected={false}
         className="nav-link"
         onClick={[Function]}
@@ -547,9 +555,9 @@ exports[`Storyshots Tabs basic usage 1`] = `
   >
     <div
       aria-hidden={false}
-      aria-labelledby="tab-label-tabInterface11-0"
+      aria-labelledby="tab-label-tabInterface15-0"
       className="tab-pane active"
-      id="tab-panel-tabInterface11-0"
+      id="tab-panel-tabInterface15-0"
       role="tabpanel"
     >
       <div>
@@ -558,9 +566,9 @@ exports[`Storyshots Tabs basic usage 1`] = `
     </div>
     <div
       aria-hidden={true}
-      aria-labelledby="tab-label-tabInterface11-1"
+      aria-labelledby="tab-label-tabInterface15-1"
       className="tab-pane"
-      id="tab-panel-tabInterface11-1"
+      id="tab-panel-tabInterface15-1"
       role="tabpanel"
     >
       <div>
@@ -569,9 +577,9 @@ exports[`Storyshots Tabs basic usage 1`] = `
     </div>
     <div
       aria-hidden={true}
-      aria-labelledby="tab-label-tabInterface11-2"
+      aria-labelledby="tab-label-tabInterface15-2"
       className="tab-pane"
-      id="tab-panel-tabInterface11-2"
+      id="tab-panel-tabInterface15-2"
       role="tabpanel"
     >
       <div>

src/CheckBox/CheckBox.stories.jsx

@@ -11,7 +11,6 @@ storiesOf('CheckBox', module)
   .add('basic usage', () => (
     <CheckBox
       name="checkbox"
-      describedBy="checkbox"
       label="check me out!"
       checked="false"
     />
@@ -19,7 +18,6 @@ storiesOf('CheckBox', module)
   .add('disabled', () => (
     <CheckBox
       name="checkbox"
-      describedBy="checkbox"
       label="you cannot check me out"
       checked="false"
       disabled={boolean('disabled', true)}
@@ -28,7 +26,6 @@ storiesOf('CheckBox', module)
   .add('default checked', () => (
     <CheckBox
       name="checkbox"
-      describedBy="checkbox"
       label="(un)check me out"
       checked="true"
     />
@@ -36,9 +33,8 @@ storiesOf('CheckBox', module)
   .add('call a function', () => (
     <CheckBox
       name="checkbox"
-      describedBy="checkbox"
       label="check out the console"
       checked="false"
-      onChange={() => console.log('the checkbox changed state')}
+      onChangeState={() => console.log('the checkbox changed state')}
     />
   ));

src/CheckBox/CheckBox.test.jsx

 /* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
-import { shallow, mount } from 'enzyme';
+import { mount } from 'enzyme';
 import CheckBox from './index';
 
 describe('<CheckBox />', () => {
   it('attributes are set correctly', () => {
-    const wrapper = shallow(
+    const wrapper = mount(
       <CheckBox
         name="checkbox"
-        describedBy="this is a checkbox"
         label="check me out!"
         checked="false"
       />,
@@ -17,16 +16,13 @@ describe('<CheckBox />', () => {
     expect(wrapper.find('[name="checkbox"]').exists()).toEqual(true);
     expect(wrapper.find('[type="checkbox"]').exists()).toEqual(true);
     expect(wrapper.find('[defaultChecked=false]').exists()).toEqual(true);
-    expect(wrapper.find('[aria-describedby="this is a checkbox"]').exists()).toEqual(true);
     expect(wrapper.find('[aria-checked=false]').exists()).toEqual(true);
-    expect(wrapper.find('[tabIndex="0"]').exists()).toEqual(true);
   });
 
   it('aria-label changes after click', () => {
-    const wrapper = shallow(
+    const wrapper = mount(
       <CheckBox
         name="checkbox"
-        descibedBy="checkbox"
         label="check me out!"
         checked="false"
       />,
@@ -34,24 +30,23 @@ describe('<CheckBox />', () => {
 
     expect(wrapper.find('[aria-checked=false]').exists()).toEqual(true);
 
-    wrapper.find('input').simulate('click');
+    wrapper.find('[type="checkbox"]').simulate('click');
     expect(wrapper.find('[aria-checked=false]').exists()).toEqual(false);
     expect(wrapper.find('[aria-checked=true]').exists()).toEqual(true);
 
-    wrapper.find('input').simulate('click');
+    wrapper.find('[type="checkbox"]').simulate('click');
     expect(wrapper.find('[aria-checked=false]').exists()).toEqual(true);
     expect(wrapper.find('[aria-checked=true]').exists()).toEqual(false);
   });
 
   it('check that callback function is triggered when clicked', () => {
     const spy = jest.fn();
-    const wrapper = shallow(
+    const wrapper = mount(
       <CheckBox
         name="checkbox"
-        descibedBy="checkbox"
         label="check me out!"
         checked="false"
-        onChange={spy}
+        onChangeState={spy}
       />,
     );
 
@@ -61,10 +56,9 @@ describe('<CheckBox />', () => {
   });
 
   it('checks if start state can be set to checked', () => {
-    const wrapper = shallow(
+    const wrapper = mount(
       <CheckBox
         name="checkbox"
-        describedBy="checkbox"
         label="I start checked"
         checked="true"
       />,
@@ -82,7 +76,6 @@ describe('<CheckBox />', () => {
     const wrapper = mount(
       <CheckBox
         name="checkbox"
-        describedBy="checkbox"
         label="I am disabled"
         checked="false"
         disabled

src/CheckBox/index.jsx

 import React from 'react';
 
-import { inputProps } from '../asInput';
+import asInput, { inputProps } from '../asInput';
 import newId from '../utils/newId';
 
-class CheckBox extends React.Component {
+class Check extends React.Component {
   constructor(props) {
     super(props);
 
     this.handleClick = this.handleClick.bind(this);
-    if (this.props.onChange) {
-      this.onChange = this.props.onChange.bind(this);
+    if (this.props.onChangeState) {
+      this.onChangeState = this.props.onChangeState.bind(this);
     }
 
     const id = newId('checkbox');
@@ -36,8 +36,8 @@ class CheckBox extends React.Component {
         checked: true,
       });
     }
-    if (this.onChange) {
-      this.onChange();
+    if (this.onChangeState) {
+      this.onChangeState();
     }
   }
 
@@ -46,24 +46,26 @@ class CheckBox extends React.Component {
     const props = { ...this.props };
 
     return (
-      <label htmlFor={this.state.id}>
-        <input
-          id={this.state.id}
-          name={props.name}
-          type="checkbox"
-          defaultChecked={this.state.checked}
-          aria-describedby={props.describedBy}
-          aria-checked={this.state.checked}
-          tabIndex="0"
-          onClick={this.handleClick}
-          disabled={props.disabled}
-        />
-        {props.label}
-      </label>
+      <input
+        id={props.id}
+        type="checkbox"
+        name={props.name}
+        defaultChecked={this.state.checked}
+        aria-checked={this.state.checked}
+        onClick={this.handleClick}
+        disabled={props.disabled}
+      />
     );
   }
 }
 
-CheckBox.propTypes = inputProps;
+Check.propTypes = inputProps;
+
+const CheckBox = asInput(Check, false);
+
+CheckBox.propTupes = {
+  ...Check.propTypes,
+  ...CheckBox.propTypes,
+};
 
 export default CheckBox;

src/asInput/index.jsx

@@ -24,7 +24,7 @@ export const inputProps = {
   className: PropTypes.arrayOf(PropTypes.string),
 };
 
-const asInput = (WrappedComponent) => {
+const asInput = (WrappedComponent, order = true) => {
   class NewComponent extends React.Component {
     constructor(props) {
       super(props);
@@ -85,10 +85,28 @@ const asInput = (WrappedComponent) => {
 
     render() {
       const { description, error, describedBy } = this.getDescriptions();
-
+      if (order) {
+        return (
+          <div className={styles['form-group']}>
+            <label htmlFor={this.state.id}>{this.props.label}</label>
+            <WrappedComponent
+              {...this.props}
+              {...this.state}
+              className={[
+                styles['form-control'],
+                ...this.props.className,
+              ]}
+              describedBy={describedBy}
+              onChange={this.handleChange}
+              onBlur={this.handleBlur}
+            />
+            {error}
+            {description}
+          </div>
+        );
+      }
       return (
         <div className={styles['form-group']}>
-          <label htmlFor={this.state.id}>{this.props.label}</label>
           <WrappedComponent
             {...this.props}
             {...this.state}
@@ -100,6 +118,7 @@ const asInput = (WrappedComponent) => {
             onChange={this.handleChange}
             onBlur={this.handleBlur}
           />
+          <label htmlFor={this.state.id}>{this.props.label}</label>
           {error}
           {description}
         </div>