From b93a7573d482f4a5b077aae020c4565f032f23a5 Mon Sep 17 00:00:00 2001
From: Jack Meyer <jackcmeyer@gmail.com>
Date: Tue, 15 Oct 2019 20:49:00 -0500
Subject: [PATCH] feat(checkboxes): add ability to click on label to select

#62
---
 src/components/Checkbox/Checkbox.tsx | 17 ++++++++++++-----
 stories/checkbox.stories.tsx         | 12 ++++++------
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 69e6bf2b..628ea917 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/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>
     )
   }
diff --git a/stories/checkbox.stories.tsx b/stories/checkbox.stories.tsx
index 8a6d5638..c206de7b 100644
--- a/stories/checkbox.stories.tsx
+++ b/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>
   ))