feat(checkboxes): add ability to click on label to select

#62

src/components/Checkbox/Checkbox.tsx

@@ -2,15 +2,17 @@ import React, { Component } from 'react'
 import FormCheck from 'react-bootstrap/FormCheck'
 
 interface Props {
+  /** The id for the checkbox */
+  id?: string
   /** The label to render next to the checkbox */
   label: string
   /* Determines the side of the checkbox to render the label on. By default right */
   labelSide?: 'right' | 'left'
-  /* Gives the checkbox a name */
+  /** Gives the checkbox a name */
   name?: string
-  /* Determines if the checkbox should be disabled or not. By default false */
+  /** Determines if the checkbox should be disabled or not. By default false */
   disabled?: boolean
-  /* Determines if the checkbox should render inline or not. By default false. */
+  /** Determines if the checkbox should render inline or not. By default false. */
   inline?: boolean
   /** The onChange listener */
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
@@ -26,13 +28,18 @@ class Checkbox extends Component<Props, {}> {
 
     return (
       <FormCheck name={this.props.name} inline={this.props.inline}>
-        {labelSide === 'left' && <FormCheck.Label>{this.props.label}</FormCheck.Label>}
+        {labelSide === 'left' && (
+          <FormCheck.Label htmlFor={this.props.id}>{this.props.label}</FormCheck.Label>
+        )}
         <FormCheck.Input
+          id={this.props.id}
           type="checkbox"
           disabled={this.props.disabled}
           onChange={this.props.onChange}
         />
-        {labelSide === 'right' && <FormCheck.Label>{this.props.label}</FormCheck.Label>}
+        {labelSide === 'right' && (
+          <FormCheck.Label htmlFor={this.props.id}>{this.props.label}</FormCheck.Label>
+        )}
       </FormCheck>
     )
   }

stories/checkbox.stories.tsx

@@ -12,13 +12,13 @@ storiesOf('Checkbox', module)
   .add('Checkbox', () => (
     <div>
       <h1>Vertical</h1>
-      <Checkbox label="Checkbox 1" />
-      <Checkbox label="Checkbox 2" />
-      <Checkbox label="Checkbox 3" disabled />
+      <Checkbox label="Checkbox 1" id="checkbox1" />
+      <Checkbox label="Checkbox 2" id="checkbox2" />
+      <Checkbox label="Checkbox 3" id="checkbox3" disabled />
       <br />
       <h1>Horizontal</h1>
-      <Checkbox label="Checkbox 1" inline />
-      <Checkbox label="Checkbox 2" inline />
-      <Checkbox label="Checkbox 3" inline />
+      <Checkbox label="Checkbox 1" id="checkbox11" inline />
+      <Checkbox label="Checkbox 2" id="checkbox22" inline />
+      <Checkbox label="Checkbox 3" id="checkbox33" inline />
     </div>
   ))