Update: CheckboxGroup and CheckboxSingle components

docs/components/Layout/index.jsx

@@ -14,6 +14,8 @@ import TextareaExample from '../../examples/TextareaExample';
 import TextEllipsisExample from '../../examples/TextEllipsisExample';
 import AlertExample from '../../examples/AlertExample';
 import CheckboxExample from '../../examples/CheckboxExample';
+import CheckboxSingleExample from '../../examples/CheckboxSingleExample';
+import CheckboxGroupExample from '../../examples/CheckboxGroupExample';
 import RadioExample from '../../examples/RadioExample';
 import SelectExample from '../../examples/SelectExample';
 import DatePickerExample from '../../examples/DatePickerExample';
@@ -74,6 +76,8 @@ const componentsBySection = {
     'list-picker',
     'user-list-picker',
     'checkbox',
+    'checkbox-single',
+    'checkbox-group',
     'radio',
     'select',
     'date-picker',
@@ -174,6 +178,8 @@ class PageLayout extends React.Component {
             <ListPickerExample />
             <UserListPickerExample />
             <CheckboxExample />
+            <CheckboxSingleExample />
+            <CheckboxGroupExample />
             <RadioExample />
             <SelectExample />
             <DatePickerExample />

docs/examples/CheckboxGroupExample.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import Example from '../components/Example';
+import { CheckboxSingle } from '../../src';
+import { CheckboxGroup } from '../../src';
+
+const Konsole = window.console;
+
+const onChange = function(value, event, name) {
+  Konsole.log({checkboxGroupExample_CustomOnChange_value: value});
+  Konsole.log({checkboxGroupExample_CustomOnChange_event: event});
+  Konsole.log({checkboxGroupExample_CustomOnChange_name: name});
+}
+
+class CheckboxGroupExample extends React.PureComponent {
+  render() {
+    return(
+      <CheckboxGroup name="movies" value={['terminator', 'predator']} onChange={onChange}>
+        <CheckboxSingle label="The Terminator" value="terminator" />
+        <CheckboxSingle label="Predator" value="predator"/>
+        <CheckboxSingle label="The Sound of Music" value="soundofmusic"/>
+      </CheckboxGroup>
+    );
+  }
+}
+
+const exampleProps = {
+  componentName: 'CheckboxGroup',
+  notes: 'Contains individual checkboxes. The state of child checkboxes is held in an array.',
+  exampleCodeSnippet: `
+      <CheckboxGroup name="movies" value={['terminator', 'predator']} onChange={onChange}>
+        <CheckboxSingle label="The Terminator" value="terminator" />
+        <CheckboxSingle label="Predator" value="predator"/>
+        <CheckboxSingle label="The Sound of Music" value="soundofmusic"/>
+      </CheckboxGroup>
+  `,
+  propTypeSectionArray: [
+    {
+      label: '',
+      propTypes: [
+        {
+          propType: 'name',
+          type: 'string',
+        },
+        {
+          propType: 'value',
+          type: 'Array of strings',
+          note: 'The strings must be the values of the group\'s child Checkboxes',
+        },
+        {
+          propType: 'children',
+          type: '<Checkbox /> elements',
+        },
+        {
+          propType: 'onChange',
+          type: 'Function',
+        },
+      ],
+    },
+  ],
+};
+
+export default () => (
+  <Example {...exampleProps}>
+    <CheckboxGroupExample />
+  </Example>
+);

docs/examples/CheckboxSingleExample.jsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import Example from '../components/Example';
+import { CheckboxSingle } from '../../src';
+
+const Konsole = window.console;
+
+const onChange = function(value, event, name) {
+  Konsole.log({checkboxSingleExample_CustomOnChange_value: value});
+  Konsole.log({checkboxSingleExample_CustomOnChange_event: event});
+  Konsole.log({checkboxSingleExample_CustomOnChange_name: name});
+}
+
+class CheckboxSingleExample extends React.PureComponent {
+  render() {
+    return <CheckboxSingle
+      name="Name goes here"
+      label="Label goes here"
+      value="Value goes here"
+      dts="data-test-selector-goes-here"
+      checked=""
+      onChangeCallback={onChange}
+    />;
+  }
+}
+
+const exampleProps = {
+  componentName: 'CheckboxSingle',
+  notes: '',
+  exampleCodeSnippet: `
+    <CheckboxSingle
+      name="Name goes here"
+      label="Label goes here"
+      value="Value goes here"
+      disabled="disabled"
+      dts="data-test-selector-goes-here"
+    />
+  `,
+  propTypeSectionArray: [
+    {
+      label: '',
+      propTypes: [
+        {
+          propType: 'name',
+          type: 'string',
+        },
+        {
+          propType: 'label',
+          type: 'string',
+        },
+        {
+          propType: 'value',
+          type: 'string',
+        },
+        {
+          propType: 'checked',
+          type: 'string',
+          note: 'Can be any string, not necessarily "checked" or "true."'
+        },
+        {
+          propType: 'disabled',
+          type: 'string',
+          note: 'Can be any string, not necessarily "disabled" or "true."'
+        },
+        {
+          propType: 'dts',
+          type: 'string',
+        },
+        {
+          propType: 'onChange',
+          type: 'function',
+        },
+      ],
+    },
+  ],
+};
+
+export default () => (
+  <Example {...exampleProps}>
+    <CheckboxSingleExample />
+  </Example>
+);

src/components/adslot-ui/CheckboxGroup/index.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './styles.scss';
+
+const Konsole = window.console;
+
+class CheckboxGroup extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: this.props.value || [],
+    };
+    this.renderChildren = this.renderChildren.bind(this);
+    this.onChangeCallback = this.onChangeCallback.bind(this);
+  }
+
+  onChangeCallback(checkboxParams, event) {
+    let newValue;
+    if(checkboxParams.checked){
+      newValue = this.state.value.concat([checkboxParams.value]);
+    } else {
+      newValue = this.state.value.filter(currentValue => currentValue !== checkboxParams.value);
+    }
+
+    Konsole.log(newValue);
+    this.setState({value: newValue});
+
+    if (this.props.onChange) {
+      this.props.onChange(newValue, event, this.props.name);
+    }
+  }
+
+  renderChildren() {
+    return React.Children.map(this.props.children, (child) =>
+      React.cloneElement(child, {
+        name: this.props.name,
+        checked: (this.state.value.indexOf(child.props.value) >= 0) ? "checked" : "",
+        onChangeCallback: this.onChangeCallback,
+      }));
+  }
+
+  render() {
+    const classes = `checkbox-group ${this.props.customClasses}`;
+    return (
+      <div className={classes}>
+        {this.renderChildren()}
+      </div>
+    );
+  }
+}
+
+CheckboxGroup.propTypes = {
+  name: PropTypes.string.isRequired,
+  value: PropTypes.arrayOf(PropTypes.string),
+	children: PropTypes.arrayOf(PropTypes.element).isRequired,
+  customClasses: PropTypes.string,
+  onChange: PropTypes.func,
+};
+
+CheckboxGroup.defaultProps = {};
+
+export default CheckboxGroup;

src/components/adslot-ui/CheckboxGroup/index.spec.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import CheckboxGroup from '.';
+
+describe('CheckboxGroup', () => {
+  it('should render with defaults', () => {
+    const component = shallow(<CheckboxGroup />);
+  });
+});

src/components/adslot-ui/CheckboxGroup/styles.scss

@@ -0,0 +1,9 @@
+.checkbox-group label {
+	line-height: 20px;
+}
+
+.checkbox-group input {
+	margin: 2px 5px 0 0;
+	line-height: 20px;
+	display: inline-block;
+}

src/components/adslot-ui/CheckboxSingle/index.jsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './styles.scss';
+
+class CheckboxSingle extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+      checked: props.checked || false,
+      disabled: props.disabled || false,
+      name: props.name,
+      value: props.value,
+      dts: props.dts || "",
+      label: props.label || "",
+    };
+    this.onChange = this.onChange.bind(this);
+    if(this.props.onChangeCallback) {
+      this.onChangeCallback = this.props.onChangeCallback.bind(this);
+    }
+	}
+
+  onChange(event) {
+    const isChecked = Boolean(event.target.checked);
+    const isDisabled = Boolean(event.target.disabled);
+    this.setState({
+      checked: isChecked,
+      disabled: isDisabled,
+    });
+    if(this.onChangeCallback) {
+      this.onChangeCallback({value: this.state.value, checked: isChecked}, event, this.props.name);
+    }
+  }
+
+	render() {
+    const onChangeHandler = this.onChange;
+    const booleanAttributes = { disabled: "", checked: "" };
+    if(this.state.disabled) {
+      booleanAttributes.disabled = "disabled";
+    }
+    if(this.state.checked) {
+      booleanAttributes.checked = "checked";
+    }
+
+		return(
+  <div className="checkbox-single">
+    <label>
+      <input
+        type="checkbox"
+        name={this.state.name}
+        value={this.state.value}
+        onChange={onChangeHandler}
+        data-test-selector={this.state.dts}
+        {...booleanAttributes}
+      />
+      {this.state.label}
+    </label>
+  </div>
+		);
+	}
+}
+
+CheckboxSingle.propTypes = {
+  name: PropTypes.string,
+  label: PropTypes.string,
+  value: PropTypes.string.isRequired,
+  dts: PropTypes.string,
+  disabled: PropTypes.string,
+  checked: PropTypes.string,
+  onChangeCallback: PropTypes.func,
+};
+
+export default CheckboxSingle;

src/components/adslot-ui/CheckboxSingle/index.spec.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import CheckboxSingle from '.';
+
+describe('CheckboxSingle', () => {
+  it('should render with defaults', () => {
+    const component = shallow(<CheckboxSingle />);
+  });
+});

src/components/adslot-ui/CheckboxSingle/styles.scss

@@ -0,0 +1,9 @@
+.checkbox-single label {
+	line-height: 20px;
+}
+
+.checkbox-single input {
+	margin: 2px 5px 0 0;
+	line-height: 20px;
+	display: inline-block;
+}

src/components/adslot-ui/index.js

@@ -1,6 +1,8 @@
 import Accordion from 'adslot-ui/Accordion';
 import AlertInput from 'adslot-ui/AlertInput';
 import Carousel from 'adslot-ui/Carousel';
+import CheckboxSingle from 'adslot-ui/CheckboxSingle';
+import CheckboxGroup from 'adslot-ui/CheckboxGroup';
 import ConfirmModal from 'adslot-ui/ConfirmModal';
 import HelpIconPopover from 'adslot-ui/HelpIconPopover';
 import FilePicker from 'adslot-ui/FilePicker';
@@ -28,6 +30,8 @@ export {
   Accordion,
   AlertInput,
   Carousel,
+  CheckboxSingle,
+  CheckboxGroup,
   ConfirmModal,
   fastStatelessWrapper,
   FilePicker,

src/index.js

@@ -52,6 +52,8 @@ import {
   Accordion,
   AlertInput,
   Carousel,
+  CheckboxSingle,
+  CheckboxGroup,
   ConfirmModal,
   fastStatelessWrapper,
   FilePicker,
@@ -87,6 +89,8 @@ export {
   Card,
   Carousel,
   Checkbox,
+  CheckboxSingle,
+  CheckboxGroup,
   ConfirmModal,
   Dropdown,
   DatePicker,