@nypl/design-system-react-components 0.25.1 → 0.25.5

package/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap

@@ -130,6 +130,94 @@ exports[`Checkbox Renders the UI snapshot correctly 2`] = `
 `;
 
 exports[`Checkbox Renders the UI snapshot correctly 3`] = `
+<label
+  className="chakra-checkbox css-1uiwwan"
+  data-checked=""
+  onClick={[Function]}
+>
+  <input
+    aria-disabled={false}
+    aria-invalid={false}
+    checked={true}
+    className="chakra-checkbox__input"
+    disabled={false}
+    id="checkbox-checked"
+    name="default"
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    required={false}
+    style={
+      Object {
+        "border": "0px",
+        "clip": "rect(0px, 0px, 0px, 0px)",
+        "height": "1px",
+        "margin": "-1px",
+        "overflow": "hidden",
+        "padding": "0px",
+        "position": "absolute",
+        "whiteSpace": "nowrap",
+        "width": "1px",
+      }
+    }
+    type="checkbox"
+  />
+  <span
+    aria-hidden={true}
+    className="chakra-checkbox__control css-dnty2r"
+    data-checked=""
+    data-indeterminate=""
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+  >
+    <div
+      style={
+        Object {
+          "alignItems": "center",
+          "display": "flex",
+          "height": "100%",
+          "justifyContent": "center",
+          "transform": "none",
+        }
+      }
+    >
+      <svg
+        className="css-o8vbdw"
+        style={
+          Object {
+            "opacity": 1,
+            "stroke": "currentColor",
+            "strokeWidth": 4,
+            "transform": "none",
+          }
+        }
+        viewBox="0 0 24 24"
+      >
+        <line
+          x1="21"
+          x2="3"
+          y1="12"
+          y2="12"
+        />
+      </svg>
+    </div>
+  </span>
+  <span
+    className="chakra-checkbox__label css-1oeb2oe"
+    data-checked=""
+    onMouseDown={[Function]}
+    onTouchStart={[Function]}
+  >
+    Test Label
+  </span>
+</label>
+`;
+
+exports[`Checkbox Renders the UI snapshot correctly 4`] = `
 <label
   className="chakra-checkbox css-1uiwwan"
   onClick={[Function]}
@@ -192,7 +280,7 @@ exports[`Checkbox Renders the UI snapshot correctly 3`] = `
 </label>
 `;
 
-exports[`Checkbox Renders the UI snapshot correctly 4`] = `
+exports[`Checkbox Renders the UI snapshot correctly 5`] = `
 <label
   className="chakra-checkbox css-1uiwwan"
   data-invalid=""
@@ -258,7 +346,7 @@ exports[`Checkbox Renders the UI snapshot correctly 4`] = `
 </label>
 `;
 
-exports[`Checkbox Renders the UI snapshot correctly 5`] = `
+exports[`Checkbox Renders the UI snapshot correctly 6`] = `
 <label
   className="chakra-checkbox css-1uiwwan"
   data-disabled=""

package/src/components/CheckboxGroup/CheckboxGroup.stories.mdx

@@ -39,7 +39,7 @@ import Checkbox from "../Checkbox/Checkbox";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.1`   |
-| Latest            | `0.25.1`   |
+| Latest            | `0.25.3`   |
 
 <Description of={CheckboxGroup} />
 
@@ -48,8 +48,8 @@ import Checkbox from "../Checkbox/Checkbox";
     name="CheckboxGroup"
     args={{
       defaultValue: ["4"],
-      invalidText: "This is the error text :(",
       helperText: "This is the helper text for the full group.",
+      invalidText: "This is the error text :(",
       isDisabled: false,
       isInvalid: false,
       isRequired: false,
@@ -57,6 +57,7 @@ import Checkbox from "../Checkbox/Checkbox";
       layout: CheckboxGroupLayoutTypes.Column,
       name: "checkbox-story",
       optReqFlag: true,
+      showHelperInvalidText: true,
       showLabel: true,
     }}
   >
@@ -143,6 +144,85 @@ a row.
   </DSProvider>
 </Canvas>
 
+## Indeterminate Example
+
+The "indeterminate" state can be used when a group of checkboxes are not all
+checked or unchecked. In the following example, if only one child checkebox is
+checked, the parent checkbox will be in the "indeterminate" state. Once both
+children are checked, the parent will be in the "checked" state.
+
+The following working example can be used in your application to keep track of
+the checked and indeterminate states - taken and modified from Chakra's
+[Checkbox](https://chakra-ui.com/docs/form/checkbox#indeterminate) documentation.
+Note that this example is specifically using NYPL DS `Checkbox` and
+`CheckboxGroup` components.
+
+```tsx
+export function IndeterminateExample() {
+  const [checkedItems, setCheckedItems] = React.useState([false, false]);
+  const allChecked = checkedItems.every(Boolean);
+  const isIndeterminate = checkedItems.some(Boolean) && !allChecked;
+  return (
+    <CheckboxGroup
+      labelText="Indeterminate Example"
+      name="indeterminate-example"
+    >
+      <Checkbox
+        isChecked={allChecked}
+        isIndeterminate={isIndeterminate}
+        onChange={(e) => setCheckedItems([e.target.checked, e.target.checked])}
+        labelText="Parent Checkbox"
+      />
+      <Checkbox
+        isChecked={checkedItems[0]}
+        onChange={(e) => setCheckedItems([e.target.checked, checkedItems[1]])}
+        labelText="Child Checkbox 1"
+      />
+      <Checkbox
+        isChecked={checkedItems[1]}
+        onChange={(e) => setCheckedItems([checkedItems[0], e.target.checked])}
+        labelText="Child Checkbox 2"
+      />
+    </CheckboxGroup>
+  );
+}
+```
+
+export function IndeterminateExample() {
+  const [checkedItems, setCheckedItems] = React.useState([false, false]);
+  const allChecked = checkedItems.every(Boolean);
+  const isIndeterminate = checkedItems.some(Boolean) && !allChecked;
+  return (
+    <CheckboxGroup
+      labelText="Indeterminate Example"
+      name="indeterminate-example"
+    >
+      <Checkbox
+        isChecked={allChecked}
+        isIndeterminate={isIndeterminate}
+        onChange={(e) => setCheckedItems([e.target.checked, e.target.checked])}
+        labelText="Parent Checkbox"
+      />
+      <Checkbox
+        isChecked={checkedItems[0]}
+        onChange={(e) => setCheckedItems([e.target.checked, checkedItems[1]])}
+        labelText="Child Checkbox 1"
+      />
+      <Checkbox
+        isChecked={checkedItems[1]}
+        onChange={(e) => setCheckedItems([checkedItems[0], e.target.checked])}
+        labelText="Child Checkbox 2"
+      />
+    </CheckboxGroup>
+  );
+}
+
+<Canvas>
+  <DSProvider>
+    <IndeterminateExample />
+  </DSProvider>
+</Canvas>
+
 ## Getting Checkbox Data Values
 
 ### Controlled Component using `name`, `defaultValue`, and `onChange` props

package/src/components/CheckboxGroup/CheckboxGroup.test.tsx

@@ -114,7 +114,7 @@ describe("Checkbox", () => {
     // The "group" role here is for the `fieldset` element.
     expect(screen.getByRole("group")).toHaveAttribute(
       "id",
-      "checkbox-group-some-id"
+      "some-id-checkbox-group"
     );
   });
 
@@ -192,7 +192,34 @@ describe("Checkbox", () => {
 
   it("sets the error state for all its Checkbox children", () => {
     render(
-      <CheckboxGroup labelText="Test Label" name="test9" isInvalid>
+      <CheckboxGroup
+        labelText="Test Label"
+        name="test9"
+        isInvalid
+        invalidText="There's an error!"
+      >
+        <Checkbox value="2" labelText="Checkbox 2" />
+        <Checkbox value="3" labelText="Checkbox 3" />
+        <Checkbox value="4" labelText="Checkbox 4" />
+      </CheckboxGroup>
+    );
+    const Checkboxes = screen.getAllByRole("checkbox");
+
+    expect(Checkboxes).toHaveLength(3);
+    expect(Checkboxes[0]).toHaveAttribute("aria-invalid");
+    expect(Checkboxes[1]).toHaveAttribute("aria-invalid");
+    expect(Checkboxes[2]).toHaveAttribute("aria-invalid");
+  });
+
+  it("does not render the invalid text when 'isInvalid' is true but 'showHelperInvalidText' is false", () => {
+    render(
+      <CheckboxGroup
+        labelText="Test Label"
+        name="test9"
+        isInvalid
+        invalidText="There's an error!"
+        showHelperInvalidText={false}
+      >
         <Checkbox value="2" labelText="Checkbox 2" />
         <Checkbox value="3" labelText="Checkbox 3" />
         <Checkbox value="4" labelText="Checkbox 4" />

package/src/components/CheckboxGroup/CheckboxGroup.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 import {
   Box,
-  Stack,
   CheckboxGroup as ChakraCheckboxGroup,
+  Stack,
   useMultiStyleConfig,
 } from "@chakra-ui/react";
 
@@ -11,18 +11,19 @@ import generateUUID from "../../helpers/generateUUID";
 import { spacing } from "../../theme/foundations/spacing";
 import { CheckboxGroupLayoutTypes } from "./CheckboxGroupLayoutTypes";
 import Checkbox from "../Checkbox/Checkbox";
+import Fieldset from "../Fieldset/Fieldset";
 
 export interface CheckboxGroupProps {
   /** Any child node passed to the component. */
   children: React.ReactNode;
   /** Populates the initial value of the input */
   defaultValue?: string[];
-  /** Optional string to populate the HelperErrorText for error state */
-  invalidText?: string;
   /** Optional string to populate the HelperErrorText for standard state */
   helperText?: string;
   /** ID that other components can cross reference for accessibility purposes */
   id?: string;
+  /** Optional string to populate the HelperErrorText for error state */
+  invalidText?: string;
   /** Adds the 'disabled' prop to the input when true. */
   isDisabled?: boolean;
   /** A`dds the 'aria-invalid' attribute to the input and
@@ -41,6 +42,8 @@ export interface CheckboxGroupProps {
   onChange?: (value: string[]) => void;
   /** Whether or not to display "Required"/"Optional" in the label text. */
   optReqFlag?: boolean;
+  /** Offers the ability to hide the helper/invalid text. */
+  showHelperInvalidText?: boolean;
   /** Offers the ability to show the group's legend onscreen or hide it. Refer
    * to the `labelText` property for more information. */
   showLabel?: boolean;
@@ -59,9 +62,9 @@ const CheckboxGroup = React.forwardRef<HTMLInputElement, CheckboxGroupProps>(
     const {
       children,
       defaultValue = [],
-      invalidText,
       helperText,
       id = generateUUID(),
+      invalidText,
       isDisabled = false,
       isInvalid = false,
       isRequired = false,
@@ -70,6 +73,7 @@ const CheckboxGroup = React.forwardRef<HTMLInputElement, CheckboxGroupProps>(
       name,
       onChange,
       optReqFlag = true,
+      showHelperInvalidText = true,
       showLabel = true,
     } = props;
     const footnote = isInvalid ? invalidText : helperText;
@@ -110,19 +114,16 @@ const CheckboxGroup = React.forwardRef<HTMLInputElement, CheckboxGroupProps>(
       }
     });
 
-    // Get the Chakra-based styles for all the custom elements in this component.
-    const styles = useMultiStyleConfig("CustomCheckboxGroup", {});
+    // Get the Chakra-based styles for the custom elements in this component.
+    const styles = useMultiStyleConfig("CheckboxGroup", {});
 
     return (
-      <Box as="fieldset" id={`checkbox-group-${id}`} __css={styles}>
-        <legend className={showLabel ? "" : "sr-only"}>
-          <span>{labelText}</span>
-          {optReqFlag && (
-            <Box as="span" __css={styles.required}>
-              {isRequired ? "Required" : "Optional"}
-            </Box>
-          )}
-        </legend>
+      <Fieldset
+        id={`${id}-checkbox-group`}
+        isLegendHidden={!showLabel}
+        legendText={labelText}
+        optReqFlag={optReqFlag}
+      >
         <ChakraCheckboxGroup {...checkboxProps}>
           <Stack
             id={id}
@@ -131,16 +132,19 @@ const CheckboxGroup = React.forwardRef<HTMLInputElement, CheckboxGroupProps>(
             spacing={spacingProp}
             ref={ref}
             aria-label={!showLabel ? labelText : null}
+            sx={styles.stack}
           >
             {newChildren}
           </Stack>
         </ChakraCheckboxGroup>
-        {footnote && (
+        {footnote && showHelperInvalidText && (
           <Box __css={styles.helper}>
-            <HelperErrorText isError={isInvalid}>{footnote}</HelperErrorText>
+            <HelperErrorText isInvalid={isInvalid} id={`${id}-helperErrorText`}>
+              {footnote}
+            </HelperErrorText>
           </Box>
         )}
-      </Box>
+      </Fieldset>
     );
   }
 );

package/src/components/CheckboxGroup/__snapshots__/CheckboxGroup.test.tsx.snap

@@ -3,19 +3,15 @@
 exports[`Checkbox renders the UI snapshot correctly 1`] = `
 <fieldset
   className="css-0"
-  id="checkbox-group-column"
+  id="column-checkbox-group"
 >
-  <legend
-    className=""
-  >
-    <span>
-      column
-    </span>
-    <span
+  <legend>
+    column
+    <div
       className="css-0"
     >
       Optional
-    </span>
+    </div>
   </legend>
   <div
     aria-label={null}
@@ -152,19 +148,15 @@ exports[`Checkbox renders the UI snapshot correctly 1`] = `
 exports[`Checkbox renders the UI snapshot correctly 2`] = `
 <fieldset
   className="css-0"
-  id="checkbox-group-row"
+  id="row-checkbox-group"
 >
-  <legend
-    className=""
-  >
-    <span>
-      row
-    </span>
-    <span
+  <legend>
+    row
+    <div
       className="css-0"
     >
       Optional
-    </span>
+    </div>
   </legend>
   <div
     aria-label={null}
@@ -301,19 +293,15 @@ exports[`Checkbox renders the UI snapshot correctly 2`] = `
 exports[`Checkbox renders the UI snapshot correctly 3`] = `
 <fieldset
   className="css-0"
-  id="checkbox-group-noLabel"
+  id="noLabel-checkbox-group"
 >
-  <legend
-    className="sr-only"
-  >
-    <span>
-      no label
-    </span>
-    <span
+  <legend>
+    no label
+    <div
       className="css-0"
     >
       Optional
-    </span>
+    </div>
   </legend>
   <div
     aria-label="no label"
@@ -450,19 +438,15 @@ exports[`Checkbox renders the UI snapshot correctly 3`] = `
 exports[`Checkbox renders the UI snapshot correctly 4`] = `
 <fieldset
   className="css-0"
-  id="checkbox-group-helperText"
+  id="helperText-checkbox-group"
 >
-  <legend
-    className=""
-  >
-    <span>
-      helperText
-    </span>
-    <span
+  <legend>
+    helperText
+    <div
       className="css-0"
     >
       Optional
-    </span>
+    </div>
   </legend>
   <div
     aria-label={null}
@@ -599,7 +583,9 @@ exports[`Checkbox renders the UI snapshot correctly 4`] = `
     <div
       aria-atomic={true}
       aria-live="off"
-      className="helper-text"
+      className=" css-0"
+      data-isinvalid={false}
+      id="helperText-helperErrorText"
     >
       helper text
     </div>
@@ -610,19 +596,15 @@ exports[`Checkbox renders the UI snapshot correctly 4`] = `
 exports[`Checkbox renders the UI snapshot correctly 5`] = `
 <fieldset
   className="css-0"
-  id="checkbox-group-invalidText"
+  id="invalidText-checkbox-group"
 >
-  <legend
-    className=""
-  >
-    <span>
-      invalidText
-    </span>
-    <span
+  <legend>
+    invalidText
+    <div
       className="css-0"
     >
       Optional
-    </span>
+    </div>
   </legend>
   <div
     aria-label={null}
@@ -759,14 +741,10 @@ exports[`Checkbox renders the UI snapshot correctly 5`] = `
 exports[`Checkbox renders the UI snapshot correctly 6`] = `
 <fieldset
   className="css-0"
-  id="checkbox-group-optReq"
+  id="optReq-checkbox-group"
 >
-  <legend
-    className=""
-  >
-    <span>
-      no optional or required label
-    </span>
+  <legend>
+    no optional or required label
   </legend>
   <div
     aria-label={null}
@@ -903,19 +881,15 @@ exports[`Checkbox renders the UI snapshot correctly 6`] = `
 exports[`Checkbox renders the UI snapshot correctly 7`] = `
 <fieldset
   className="css-0"
-  id="checkbox-group-required"
+  id="required-checkbox-group"
 >
-  <legend
-    className=""
-  >
-    <span>
-      required
-    </span>
-    <span
+  <legend>
+    required
+    <div
       className="css-0"
     >
-      Required
-    </span>
+      Optional
+    </div>
   </legend>
   <div
     aria-label={null}
@@ -1052,19 +1026,15 @@ exports[`Checkbox renders the UI snapshot correctly 7`] = `
 exports[`Checkbox renders the UI snapshot correctly 8`] = `
 <fieldset
   className="css-0"
-  id="checkbox-group-invalid"
+  id="invalid-checkbox-group"
 >
-  <legend
-    className=""
-  >
-    <span>
-      invalid
-    </span>
-    <span
+  <legend>
+    invalid
+    <div
       className="css-0"
     >
       Optional
-    </span>
+    </div>
   </legend>
   <div
     aria-label={null}
@@ -1207,19 +1177,15 @@ exports[`Checkbox renders the UI snapshot correctly 8`] = `
 exports[`Checkbox renders the UI snapshot correctly 9`] = `
 <fieldset
   className="css-0"
-  id="checkbox-group-disabled"
+  id="disabled-checkbox-group"
 >
-  <legend
-    className=""
-  >
-    <span>
-      disabled
-    </span>
-    <span
+  <legend>
+    disabled
+    <div
       className="css-0"
     >
       Optional
-    </span>
+    </div>
   </legend>
   <div
     aria-label={null}

package/src/components/ComponentWrapper/ComponentWrapper.tsx

@@ -0,0 +1,63 @@
+import * as React from "react";
+import { Box, useMultiStyleConfig } from "@chakra-ui/react";
+import generateUUID from "../../helpers/generateUUID";
+import Heading from "../Heading/Heading";
+import { HeadingLevels } from "../Heading/HeadingTypes";
+import HelperErrorText from "../HelperErrorText/HelperErrorText";
+import Text from "../Text/Text";
+
+export interface ComponentWrapperProps {
+  /** The UI elements that will be wrapped by this component */
+  children: React.ReactNode;
+  /** Optional string to set the text for a video description */
+  descriptionText?: string;
+  /** Optional string to set the text for a `Heading` component */
+  headingText?: string;
+  /** Optional string to set the text for a `HelperErrorText` component */
+  helperText?: string;
+  /** ID that other components can cross reference for accessibility purposes */
+  id?: string;
+}
+
+function ComponentWrapper(
+  props: React.PropsWithChildren<ComponentWrapperProps>
+) {
+  const {
+    children,
+    descriptionText,
+    headingText,
+    helperText,
+    id = generateUUID(),
+  } = props;
+  const hasChildren = !!children;
+  const styles = useMultiStyleConfig("ComponentWrapper", { hasChildren });
+
+  if (!hasChildren) {
+    console.warn("Component Wrapper has no children.");
+  }
+
+  return (
+    <Box __css={styles}>
+      <>
+        {headingText && (
+          <Heading
+            id={`${id}-heading`}
+            level={HeadingLevels.Two}
+            text={headingText}
+          />
+        )}
+        {descriptionText && <Text>{descriptionText}</Text>}
+        {children}
+        {helperText && (
+          <Box __css={styles.helperText}>
+            <HelperErrorText id={`${id}-helperText`} isInvalid={false}>
+              {helperText}
+            </HelperErrorText>
+          </Box>
+        )}
+      </>
+    </Box>
+  );
+}
+
+export default ComponentWrapper;