cleaning up checkbox and README

src/CheckBox/CheckBox.stories.jsx

@@ -12,14 +12,12 @@ storiesOf('CheckBox', module)
     <CheckBox
       name="checkbox"
       label="check me out!"
-      checked="false"
     />
   ))
   .add('disabled', () => (
     <CheckBox
       name="checkbox"
       label="you cannot check me out"
-      checked="false"
       disabled={boolean('disabled', true)}
     />
   ))
@@ -27,14 +25,13 @@ storiesOf('CheckBox', module)
     <CheckBox
       name="checkbox"
       label="(un)check me out"
-      checked="true"
+      checked
     />
   ))
   .add('call a function', () => (
     <CheckBox
       name="checkbox"
       label="check out the console"
-      checked="false"
       onChangeState={() => console.log('the checkbox changed state')}
     />
   ));

src/CheckBox/CheckBox.test.jsx

@@ -9,7 +9,6 @@ describe('<CheckBox />', () => {
       <CheckBox
         name="checkbox"
         label="check me out!"
-        checked="false"
       />,
   );
 
@@ -24,7 +23,6 @@ describe('<CheckBox />', () => {
       <CheckBox
         name="checkbox"
         label="check me out!"
-        checked="false"
       />,
       );
 
@@ -45,7 +43,6 @@ describe('<CheckBox />', () => {
       <CheckBox
         name="checkbox"
         label="check me out!"
-        checked="false"
         onChangeState={spy}
       />,
     );
@@ -60,7 +57,7 @@ describe('<CheckBox />', () => {
       <CheckBox
         name="checkbox"
         label="I start checked"
-        checked="true"
+        checked
       />,
     );
 
@@ -77,7 +74,6 @@ describe('<CheckBox />', () => {
       <CheckBox
         name="checkbox"
         label="I am disabled"
-        checked="false"
         disabled
       />,
     );

src/CheckBox/README.md

@@ -2,13 +2,13 @@
 
 Checkbox based off of the [WAI-ARIA authoring guidelines for the checkbox component](https://www.w3.org/TR/wai-aria-1.1/#checkbox). The checkbox is an HTMl input element with added attributes to ensure proper functionality and accessibility. The checkbox is wrapped in an `asInput` component. The `asInput` wrapper is passed the input element as well as a second parameter set to `false` to ensure that the label is placed to the right of the checkbox.
 
-The following inputs should be passed into every checkbox component:
-* `name`: `name` attribute - type `String`
-* `label`: label to be placed next to the checkbox - type `String`
-* `checked`: `"true"` if the default state should be checked, `"false"` otherwise - type `String`
+The following parameters should be passed into every checkbox component:
+* `name` (`String`): `name` attribute
+* `label` (`String`): label to be placed next to the checkbox
 
-The following input can optionally be passed into a checkbox component:
-* `disabled`: `true` if the checkbox should be disabled, `false` otherwise - type `Boolean`
+The following parameters can optionally be passed into a checkbox component:
+* `checked` (`Boolean`): `true` if the default state should be checked, `false` otherwise
+* `disabled` (`Boolean`): `true` if the checkbox should be disabled, `false` otherwise
 * `onChangeState`: function to be called when the checkbox changes state
 
 The implementation of the checkbox contains the following functions:

src/CheckBox/index.jsx

@@ -13,29 +13,16 @@ class Check extends React.Component {
     }
 
     const id = newId('checkbox');
-    if (props.checked === 'true') {
-      this.state = {
-        id,
-        checked: true,
-      };
-    } else {
-      this.state = {
-        id,
-        checked: false,
-      };
-    }
+    this.state = {
+      id,
+      checked: props.checked || false,
+    };
   }
 
   handleClick() {
-    if (this.state.checked === true) {
-      this.setState({
-        checked: false,
-      });
-    } else {
-      this.setState({
-        checked: true,
-      });
-    }
+    this.setState({
+      checked: !this.state.checked,
+    });
     if (this.onChangeState) {
       this.onChangeState();
     }
@@ -63,9 +50,8 @@ Check.propTypes = inputProps;
 
 const CheckBox = asInput(Check, false);
 
-CheckBox.propTupes = {
+CheckBox.propTypes = {
   ...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, order = true) => {
+const asInput = (WrappedComponent, labelFirst = true) => {
   class NewComponent extends React.Component {
     constructor(props) {
       super(props);
@@ -85,28 +85,9 @@ const asInput = (WrappedComponent, order = true) => {
 
     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']}>
+          {labelFirst && <label htmlFor={this.state.id}>{this.props.label}</label>}
           <WrappedComponent
             {...this.props}
             {...this.state}
@@ -118,7 +99,7 @@ const asInput = (WrappedComponent, order = true) => {
             onChange={this.handleChange}
             onBlur={this.handleBlur}
           />
-          <label htmlFor={this.state.id}>{this.props.label}</label>
+          {!labelFirst && <label htmlFor={this.state.id}>{this.props.label}</label>}
           {error}
           {description}
         </div>