@nypl/design-system-react-components 0.25.2 → 0.25.6

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"
     );
   });
 

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
@@ -113,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}
@@ -134,6 +132,7 @@ const CheckboxGroup = React.forwardRef<HTMLInputElement, CheckboxGroupProps>(
             spacing={spacingProp}
             ref={ref}
             aria-label={!showLabel ? labelText : null}
+            sx={styles.stack}
           >
             {newChildren}
           </Stack>
@@ -145,7 +144,7 @@ const CheckboxGroup = React.forwardRef<HTMLInputElement, CheckboxGroupProps>(
             </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}
@@ -612,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}
@@ -761,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}
@@ -905,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}
@@ -1054,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}
@@ -1209,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}