feature/UIDS-300 Adds indeterminate state handling to CheckboxButton (#306)

* adds indeterminate state handling to CheckboxButton

* removes eslint disable rule, updates doc, updates story

Author: jasonbasuil

spec/__snapshots__/Storyshots.test.js.snap

@@ -634,6 +634,75 @@ exports[`Storyshots Design System/Card Default 1`] = `
 </div>
 `;
 
+exports[`Storyshots Design System/CheckboxButton Default 1`] = `
+<div
+  style={
+    Object {
+      "padding": "1rem",
+    }
+  }
+>
+  <input
+    checked={true}
+    className="checkbox"
+    disabled={false}
+    id="1"
+    onChange={[Function]}
+    type="checkbox"
+    value={1}
+  />
+</div>
+`;
+
+exports[`Storyshots Design System/CheckboxButton Indeterminate 1`] = `
+<div
+  style={
+    Object {
+      "padding": "1rem",
+    }
+  }
+>
+  <div
+    style={
+      Object {
+        "display": "flex",
+        "flexDirection": "column",
+        "rowGap": "1rem",
+      }
+    }
+  >
+    <input
+      checked={false}
+      id="select-all"
+      indeterminate={false}
+      onChange={[Function]}
+      type="checkbox"
+    />
+    <input
+      checked={false}
+      id="1"
+      onChange={[Function]}
+      type="checkbox"
+      value="1"
+    />
+    <input
+      checked={false}
+      id="2"
+      onChange={[Function]}
+      type="checkbox"
+      value="2"
+    />
+    <input
+      checked={false}
+      id="3"
+      onChange={[Function]}
+      type="checkbox"
+      value="3"
+    />
+  </div>
+</div>
+`;
+
 exports[`Storyshots Design System/Copy To Clipboard Button Default 1`] = `
 <div
   style={

src/CheckboxButton/CheckboxButton.jsx

@@ -1,6 +1,12 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 
+export const CHECKED_STATES = {
+  CHECKED: true,
+  UNCHECKED: false,
+  INDETERMINATE: 'indeterminate',
+};
+
 const CheckboxButton = React.forwardRef(({
   checked,
   className,
@@ -11,21 +17,30 @@ const CheckboxButton = React.forwardRef(({
   value,
   onChange,
   ...rest
-}, ref) => (
-  <input
-    checked={checked}
-    className={className}
-    disabled={disabled}
-    id={id}
-    indeterminate={indeterminate}
-    name={name}
-    ref={ref}
-    type="checkbox"
-    value={value}
-    onChange={onChange}
-    {...rest}
-  />
-));
+}, ref) => {
+  useEffect(() => {
+    if (ref && ref.current) {
+      const checkboxRef = ref.current;
+      checkboxRef.indeterminate = indeterminate;
+    }
+  }, [indeterminate, ref]);
+
+  return (
+    <input
+      checked={checked}
+      className={className}
+      disabled={disabled}
+      id={id}
+      indeterminate={indeterminate}
+      name={name}
+      ref={ref}
+      type="checkbox"
+      value={value}
+      onChange={onChange}
+      {...rest}
+    />
+  );
+});
 
 CheckboxButton.propTypes = {
   checked: PropTypes.bool,

src/CheckboxButton/CheckboxButton.mdx

@@ -0,0 +1,32 @@
+import { ArgsTable, Story, Canvas } from '@storybook/addon-docs/blocks';
+import CheckboxButton from './CheckboxButton';
+
+# CheckboxButton
+A checkbox control.
+
+<Canvas>
+  <Story id="design-system-checkboxbutton--default" />
+</Canvas>
+
+<ArgsTable of={CheckboxButton} />
+
+## Anatomy 
+- States: checked, unchecked, & indeterminate
+
+## Stories
+
+### Default
+
+<Canvas>
+  <Story id="design-system-checkboxbutton--default" />
+</Canvas>
+
+### Indeterminate
+
+- When a checkbox "owns" a number of sub-checkboxes and any one or more of the sub-checkboxes have a different state than the others, the owning checkbox is in the indeterminate state (or "partially" checked)
+- The indeterminate state of a checkbox is visual only.
+- You can’t make a checkbox indeterminate through HTML. There is no indeterminate attribute. It is a property of checkboxes though, which you can change via JavaScript (i.e. we're handling it through refs and `useEffect` on the CheckboxButton component). Please use the `indeterminate` prop to get the desired effect. 
+
+<Canvas>
+  <Story id="design-system-checkboxbutton--indeterminate" />
+</Canvas>

src/CheckboxButton/CheckboxButton.stories.jsx

@@ -0,0 +1,77 @@
+import React, { useRef, useState } from 'react';
+import CheckboxButton, { CHECKED_STATES } from 'src/CheckboxButton';
+
+import mdx from './CheckboxButton.mdx';
+
+export default {
+  title: 'Design System/CheckboxButton',
+  component: CheckboxButton,
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+export const Default = () => {
+  const [isChecked, setIsChecked] = useState(CHECKED_STATES.CHECKED);
+
+  const handleChange = () => {
+    setIsChecked((prev) => !prev);
+  };
+
+  return (
+    <CheckboxButton
+      checked={isChecked}
+      className="checkbox"
+      disabled={false}
+      id="1"
+      type="checkbox"
+      value={1}
+      onChange={handleChange}
+    />
+  );
+};
+
+export const Indeterminate = () => {
+  const inputEl = useRef(null);
+  const [checked, setChecked] = useState([]);
+  const checkboxes = ['1', '2', '3'];
+
+  const onCheckAll = (event) => {
+    if (event.target.checked) {
+      setChecked(checkboxes);
+    } else {
+      setChecked([]);
+    }
+  };
+
+  const onCheck = (event, value) => {
+    if (event.target.checked) {
+      setChecked([...checked, value]);
+    } else {
+      setChecked(checked.filter((item) => item !== value));
+    }
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', rowGap: '1rem' }}>
+      <CheckboxButton
+        checked={checked.length === 3}
+        id="select-all"
+        indeterminate={checked.length > 0 && checked.length < 3}
+        ref={inputEl}
+        onChange={onCheckAll}
+      />
+      {checkboxes.map((item) => (
+        <CheckboxButton
+          checked={checked.includes(item)}
+          id={item}
+          key={item}
+          value={item}
+          onChange={(e) => onCheck(e, item)}
+        />
+      ))}
+    </div>
+  );
+};

src/CheckboxButton/index.js

@@ -1,3 +1,4 @@
-import CheckboxButton from './CheckboxButton';
+import CheckboxButton, { CHECKED_STATES } from './CheckboxButton';
 
+export { CHECKED_STATES };
 export default CheckboxButton;

src/index.js

@@ -1,7 +1,7 @@
 import { Alert, MessageTypes } from 'src/Alert';
 import Avatar from 'src/Avatar';
 import Card, { CardSizes } from 'src/Card';
-import CheckboxButton from 'src/CheckboxButton';
+import CheckboxButton, { CHECKED_STATES } from 'src/CheckboxButton';
 import CheckboxButtonGroup from 'src/CheckboxButtonGroup';
 import CopyToClipboard from 'src/CopyToClipboard';
 import CopyToClipboardButton from 'src/CopyToClipboardButton';
@@ -53,6 +53,7 @@ export {
   CardSizes,
   CheckboxButton,
   CheckboxButtonGroup,
+  CHECKED_STATES,
   CopyToClipboard,
   CopyToClipboardButton,
   FadeTransition,