Add optional label to CheckboxBooleanInput

src/components/CheckboxBooleanInput.js

@@ -1,20 +1,28 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { FormGroup, Input, Label } from 'reactstrap';
 
-const CheckboxBooleanInput = props => (
-  <FormGroup check>
-    <Label check>
-      <Input
-        type="checkbox"
-        checked={props.value}
-        onChange={e => props.onChange && props.onChange(e.target.checked)}
-        />
-    </Label>
-  </FormGroup>
-);
+class CheckboxBooleanInput extends Component {
+  static propTypes = {
+    checkboxLabel: React.PropTypes.node,
+    value: React.PropTypes.bool
+  };
 
-CheckboxBooleanInput.propTypes = {
-  value: React.PropTypes.bool
+  render() {
+    const { checkboxLabel, onChange, value } = this.props;
+
+    return (
+      <FormGroup check>
+        <Label check>
+          <Input
+            type="checkbox"
+            checked={value}
+            onChange={e => onChange && onChange(e.target.checked)}
+          />
+          {checkboxLabel && <span className="ml-1" ref="label">{checkboxLabel}</span>}
+        </Label>
+      </FormGroup>
+    );
+  }
 }
 
 export default CheckboxBooleanInput;

src/components/CheckboxInput.js

@@ -6,6 +6,6 @@ import CheckboxListInput from './CheckboxListInput';
 const CheckboxInput = props =>
   props.children ?
     <CheckboxListInput {...props} /> :
-    <CheckboxBooleanInput {...props} />
+    <CheckboxBooleanInput {...props} />;
 
 export default CheckboxInput;

src/index.js

@@ -69,6 +69,9 @@ import BoundForm from './components/BoundForm';
 import BoundFormRow from './components/BoundFormRow';
 import Callout from './components/Callout.js';
 import Close from './components/Close.js';
+import CheckboxInput from './components/CheckboxInput.js';
+import CheckboxBooleanInput from './components/CheckboxBooleanInput.js';
+import CheckboxListInput from './components/CheckboxListInput.js';
 import CreditCardNumber from './components/CreditCardNumber.js';
 import CreditCardExpiration from './components/CreditCardExpiration.js';
 import CreditCardInput from './components/CreditCardInput.js';
@@ -179,6 +182,9 @@ export {
   BoundFormRow,
   Callout,
   Close,
+  CheckboxInput,
+  CheckboxBooleanInput,
+  CheckboxListInput,
   CreditCardNumber,
   CreditCardExpiration,
   CreditCardInput,

test/components/CheckboxBooleanInput.spec.js

@@ -2,16 +2,14 @@
 import React from 'react';
 import sinon from 'sinon';
 import assert from 'assert';
-import { shallow } from 'enzyme';
+import { mount } from 'enzyme';
 
-import { Input } from 'reactstrap';
-
-import CheckboxBooleanInput from '../../src/components/CheckboxBooleanInput';
+import { CheckboxBooleanInput, Input } from '../../src';
 
 describe('<CheckboxBooleanInput />', () => {
   let onChange = sinon.stub();
 
-  const wrapper = shallow(
+  const wrapper = mount(
     <CheckboxBooleanInput value={true} onChange={onChange} />
   );
 
@@ -25,6 +23,10 @@ describe('<CheckboxBooleanInput />', () => {
     assert.equal(component.children().length, 0);
   });
 
+  it('should not render checkboxLabel', () => {
+    assert.equal(wrapper.ref('label').exists(), false);
+  });
+
   it('should use value for checked state', () => {
     assert.strictEqual(component.prop('checked'), true);
   });
@@ -33,4 +35,12 @@ describe('<CheckboxBooleanInput />', () => {
     component.simulate('change', { target: { checked: false }});
     assert(onChange.calledWith(false));
   });
+
+  it('should render checkboxLabel if specified', () => {
+    const wrapped = mount(
+      <CheckboxBooleanInput checkboxLabel="Yowza" />
+    );
+    assert.equal(wrapped.ref('label').text(), 'Yowza');
+    assert.equal(wrapped.ref('label').exists(), true);
+  });
 });

test/components/CheckboxInput.spec.js

@@ -3,10 +3,7 @@ import React from 'react';
 import assert from 'assert';
 import { shallow } from 'enzyme';
 
-import CheckboxInput from '../../src/components/CheckboxInput';
-import CheckboxBooleanInput from '../../src/components/CheckboxBooleanInput';
-import CheckboxListInput from '../../src/components/CheckboxListInput';
-import FormChoice from '../../src/components/FormChoice';
+import { CheckboxInput, CheckboxBooleanInput, CheckboxListInput, FormChoice } from '../../src';
 
 describe('<CheckboxInput />', () => {
   it('should be a CheckboxListInput when there are children (choices)', () => {