Pd 12487 collapsible checklist

packages/Collapsible/package.json

@@ -7,7 +7,7 @@
   "main": "lib/index.js",
   "repository": {
     "type": "git",
-    "url": "https://github.com/acl-services/paprika/tree/master/packages/collapsible"
+    "url": "https://github.com/acl-services/paprika/tree/master/packages/Collapsible"
   },
   "publishConfig": {
     "access": "public"

packages/Collapsible/src/Collapsible.js

@@ -72,7 +72,7 @@ const Collapsible = props => {
     const { a11yText, label, isCollapsed, isDisabled, iconAlign } = props;
 
     return (
-      <React.Fragment>
+      <div data-pka-anchor="collapsible.heading">
         <RawButton
           ariaLabel={a11yText || I18n.t("collapsible.a11yText")}
           aria-expanded={!isCollapsed}
@@ -85,7 +85,7 @@ const Collapsible = props => {
           </span>
         </RawButton>
         {label}
-      </React.Fragment>
+      </div>
     );
   };
 

packages/CollapsibleChecklists/README.md

@@ -0,0 +1,47 @@
+## CollapsibleChecklists
+
+A controlled component that has checkable groups of checkable items.
+Checking the parent checks all of the children.
+
+### Installation
+
+`> npm install --save @paprika/collapsible-checklists`
+or
+`> yarn add @paprika/collapsible-checklists`
+
+### Usage
+
+```js
+import CollapsibleChecklists from "@paprika/collapsible-checklists";
+
+const YourComponent = () => {
+  return (
+    <CollapsibleChecklists
+      onChange={() => {
+        /*...*/
+      }}
+    >
+      <CollapsibleChecklists.Heading>Flowers</CollapsibleChecklists.Heading>
+
+      <CollapsibleChecklists.Group title="Roses">
+        <CollapsibleChecklists.Item isChecked>Damask</CollapsibleChecklists.Item>
+        <CollapsibleChecklists.Item isChecked>Eden</CollapsibleChecklists.Item>
+        <CollapsibleChecklists.Item isChecked>Lady Banks</CollapsibleChecklists.Item>
+      </CollapsibleChecklists.Group>
+
+      <CollapsibleChecklists.Group title="Irises">
+        <CollapsibleChecklists.Item isChecked>Siberian</CollapsibleChecklists.Item>
+        <CollapsibleChecklists.Item>Yellow</CollapsibleChecklists.Item>
+        <CollapsibleChecklists.Item isDisabled>Bearded</CollapsibleChecklists.Item>
+        <CollapsibleChecklists.Item>Netted</CollapsibleChecklists.Item>
+      </CollapsibleChecklists.Group>
+    </CollapsibleChecklists>
+  );
+};
+
+export default YourComponent;
+```
+
+### Props
+
+- `onChange`

packages/CollapsibleChecklists/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@paprika/collapsible-checklists",
+  "version": "0.1.0",
+  "description": "CollapsibleChecklists component",
+  "author": "@paprika",
+  "license": "MIT",
+  "main": "lib/index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/acl-services/paprika/tree/master/packages/CollapsibleChecklists"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@babel/runtime-corejs2": "^7.3.1",
+    "@paprika/collapsible": "^0.1.0",
+    "@paprika/stylers": "^0.1.1",
+    "@paprika/tokens": "^0.1.1",
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
+    "styled-components": "^4.2.0"
+  }
+}

packages/CollapsibleChecklists/src/CollapsibleChecklists.js

@@ -0,0 +1,39 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Heading from "./components/Heading";
+import Group from "./components/Group";
+import Item from "./components/Item";
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
+const defaultProps = {};
+
+const CollapsibleChecklists = props => {
+  const { children, onChange } = props;
+  const modifiedChildren = [];
+
+  React.Children.forEach(children, (child, index) => {
+    switch (child.type.displayName) {
+      case Group.displayName:
+        modifiedChildren.push(React.cloneElement(child, { key: `group${index}`, onChange })); // eslint-disable-line react/no-array-index-key
+        break;
+      default:
+        modifiedChildren.push(child);
+    }
+  });
+
+  return <React.Fragment>{modifiedChildren}</React.Fragment>;
+};
+
+CollapsibleChecklists.displayName = "CollapsibleChecklists";
+CollapsibleChecklists.propTypes = propTypes;
+CollapsibleChecklists.defaultProps = defaultProps;
+
+CollapsibleChecklists.Heading = Heading;
+CollapsibleChecklists.Group = Group;
+CollapsibleChecklists.Item = Item;
+
+export default CollapsibleChecklists;

packages/CollapsibleChecklists/src/components/Group/Group.js

@@ -0,0 +1,129 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Collapsible from "@paprika/collapsible";
+import Item from "../Item";
+import groupStyles from "./Group.styles";
+
+const propTypes = {
+  children: PropTypes.node, // probably an array of "Items", but could be a Spinner or anything else
+  isDisabled: PropTypes.bool,
+  onChange: PropTypes.func,
+  onExpand: PropTypes.func,
+  title: PropTypes.node.isRequired,
+};
+
+const defaultProps = {
+  children: [],
+  isDisabled: false,
+  onChange: () => {},
+  onExpand: () => {},
+};
+
+function useIsIndeterminate(checkboxRef) {
+  const [, setIsIndeterminate] = React.useState(null);
+  React.useEffect(() => {
+    setIsIndeterminate(checkboxRef.current.indeterminate);
+  }, [checkboxRef.current.indeterminate]);
+}
+
+function Group(props) {
+  const { children, isDisabled, onChange, onExpand, title } = props;
+  const [isCollapsed, setIsCollapsed] = React.useState(true);
+  const checkboxRef = React.useRef({});
+  useIsIndeterminate(checkboxRef);
+  let allAreChecked = React.Children.count(props.children) > 0;
+  let noneAreChecked = true;
+
+  React.Children.forEach(children, child => {
+    if (child.props.isChecked) {
+      noneAreChecked = false;
+    } else {
+      allAreChecked = false;
+    }
+  });
+
+  if (allAreChecked || noneAreChecked) {
+    checkboxRef.current.indeterminate = false;
+  } else if (!allAreChecked && !noneAreChecked) {
+    checkboxRef.current.indeterminate = true;
+  }
+
+  function toggleChildren() {
+    const childItems = [];
+    React.Children.forEach(children, child => {
+      if (child.type === Item) {
+        childItems.push(child);
+      }
+    });
+
+    if (childItems.length === 0) {
+      return;
+    }
+
+    const allChildItemsAreChecked =
+      childItems.filter(childItem => childItem.props.isChecked || childItem.props.isDisabled).length ===
+      childItems.length;
+
+    let childItemsToChange = [];
+    if (allChildItemsAreChecked) {
+      childItemsToChange = childItems.filter(childItem => !childItem.props.isDisabled);
+    } else {
+      childItemsToChange = childItems.filter(childItem => !childItem.props.isChecked && !childItem.props.isDisabled);
+    }
+
+    onChange(childItemsToChange);
+  }
+
+  /* eslint-disable jsx-a11y/label-has-associated-control */
+  const label = (
+    <React.Fragment>
+      <label>
+        <input
+          ref={checkboxRef}
+          checked={allAreChecked}
+          type="checkbox"
+          disabled={isDisabled}
+          onChange={toggleChildren}
+        />
+        {title}
+      </label>
+    </React.Fragment>
+  );
+  /* eslint-enable jsx-a11y/label-has-associated-control */
+
+  const modifiedChildren = [];
+  React.Children.forEach(children, (child, index) => {
+    const newProps = {
+      key: `${title}-child-${index}`,
+    };
+
+    if (child.type.displayName === Item.displayName) {
+      newProps.onChange = () => onChange([child]);
+    }
+
+    modifiedChildren.push(React.cloneElement(child, newProps));
+  });
+
+  return (
+    <Collapsible
+      css={groupStyles}
+      hasOnlyIconToggle
+      isCollapsed={isCollapsed}
+      isDisabled={isDisabled}
+      label={label}
+      onClick={() => {
+        if (isCollapsed && onExpand) {
+          onExpand();
+        }
+        setIsCollapsed(!isCollapsed);
+      }}
+    >
+      {modifiedChildren}
+    </Collapsible>
+  );
+}
+
+Group.displayName = "Group";
+Group.propTypes = propTypes;
+Group.defaultProps = defaultProps;
+export default Group;

packages/CollapsibleChecklists/src/components/Group/Group.styles.js

@@ -0,0 +1,25 @@
+import tokens from "@paprika/tokens";
+import { css } from "styled-components";
+import { disabledStyle } from "../helpers.styles";
+
+const groupStyles = css`
+  ${({ isDisabled }) => {
+    return `
+      [data-pka-anchor="collapsible.heading"] {
+        align-items: center;
+        background-color: ${tokens.color.cremeLighten5};
+        border-bottom: 1px solid ${tokens.color.blackLighten60};
+        display: flex;
+        padding: ${tokens.spaceSm};
+
+        input[type="checkbox"] {
+          margin-right: ${tokens.space};
+        }
+
+        ${isDisabled ? disabledStyle : ""};
+      }
+    `;
+  }}
+`;
+
+export default groupStyles;

packages/CollapsibleChecklists/src/components/Group/index.js

@@ -0,0 +1 @@
+export { default } from "./Group";

packages/CollapsibleChecklists/src/components/Heading/Heading.js

@@ -0,0 +1,17 @@
+import React from "react";
+import PropTypes from "prop-types";
+import headingStyles from "./Heading.styles";
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+const defaultProps = {};
+
+const Heading = ({ children }) => <div css={headingStyles}>{children}</div>;
+
+Heading.displayName = "Heading";
+Heading.propTypes = propTypes;
+Heading.defaultProps = defaultProps;
+
+export default Heading;

packages/CollapsibleChecklists/src/components/Heading/Heading.styles.js

@@ -0,0 +1,12 @@
+import tokens from "@paprika/tokens";
+import { css } from "styled-components";
+import stylers from "@paprika/stylers";
+
+const headingStyles = css`
+  background-color: ${tokens.table.header.backgroundColor};
+  border-bottom: 2px solid ${tokens.border.color};
+  font-weight: bold;
+  padding: ${tokens.space} ${tokens.space} ${tokens.space} ${stylers.spacer(2)};
+`;
+
+export default headingStyles;

packages/CollapsibleChecklists/src/components/Heading/index.js

@@ -0,0 +1 @@
+export { default } from "./Heading";

packages/CollapsibleChecklists/src/components/Item/Item.js

@@ -0,0 +1,37 @@
+import React from "react";
+import PropTypes from "prop-types";
+import itemStyles from "./Item.styles";
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  isChecked: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  onChange: PropTypes.func,
+};
+
+const defaultProps = {
+  isChecked: false,
+  isDisabled: false,
+  onChange: () => {},
+};
+
+function Item(props) {
+  const { children, isChecked, isDisabled, onChange } = props;
+
+  /* eslint-disable jsx-a11y/label-has-associated-control */
+  return (
+    <div css={itemStyles} isDisabled={isDisabled}>
+      <label>
+        <input type="checkbox" checked={isChecked} disabled={isDisabled} onChange={onChange} />
+        {children}
+      </label>
+    </div>
+  );
+  /* eslint-enable jsx-a11y/label-has-associated-control */
+}
+
+Item.displayName = "Item";
+Item.propTypes = propTypes;
+Item.defaultProps = defaultProps;
+
+export default Item;

packages/CollapsibleChecklists/src/components/Item/Item.styles.js

@@ -0,0 +1,19 @@
+import stylers from "@paprika/stylers";
+import tokens from "@paprika/tokens";
+import { css } from "styled-components";
+import { disabledStyle } from "../helpers.styles";
+
+const itemStyles = css`
+  ${({ isDisabled }) => {
+    return `
+      padding: 2px 0 2px ${stylers.spacer(5)};
+      ${isDisabled ? disabledStyle : ""};
+
+      input {
+        margin-right: ${tokens.space}
+      }
+    `;
+  }}
+`;
+
+export default itemStyles;

packages/CollapsibleChecklists/src/components/Item/index.js

@@ -0,0 +1 @@
+export { default } from "./Item";