@nypl/design-system-react-components 0.25.13 → 0.26.0

package/src/components/Checkbox/Checkbox.tsx

@@ -1,5 +1,5 @@
 import {
-  Box,
+  chakra,
   Checkbox as ChakraCheckbox,
   Icon,
   useMultiStyleConfig,
@@ -9,15 +9,13 @@ import * as React from "react";
 import HelperErrorText, {
   HelperErrorTextType,
 } from "../HelperErrorText/HelperErrorText";
-import generateUUID from "../../helpers/generateUUID";
-
 export interface CheckboxProps {
   /** className you can add in addition to 'input' */
   className?: string;
   /** Optional string to populate the HelperErrorText for standard state */
   helperText?: HelperErrorTextType;
   /** ID that other components can cross reference for accessibility purposes */
-  id?: string;
+  id: string;
   /** Optional string to populate the HelperErrorText for the error state
    * when `isInvalid` is true. */
   invalidText?: HelperErrorTextType;
@@ -73,13 +71,13 @@ function CheckboxIcon(props) {
   );
 }
 
-const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
-  (props, ref?) => {
+export const Checkbox = chakra(
+  React.forwardRef<HTMLInputElement, CheckboxProps>((props, ref?) => {
     const {
       className,
       invalidText,
       helperText,
-      id = generateUUID(),
+      id,
       isChecked,
       isDisabled = false,
       isIndeterminate = false,
@@ -90,6 +88,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
       showHelperInvalidText = true,
       showLabel = true,
       value,
+      ...rest
     } = props;
     const styles = useMultiStyleConfig("Checkbox", {});
     const footnote: HelperErrorTextType = isInvalid ? invalidText : helperText;
@@ -98,6 +97,12 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
     // Use Chakra's default indeterminate icon.
     const icon = !isIndeterminate ? <CheckboxIcon /> : undefined;
 
+    if (!id) {
+      console.warn(
+        "NYPL Reservoir Checkbox: This component's required `id` prop was not passed."
+      );
+    }
+
     if (!showLabel) {
       if (typeof labelText !== "string") {
         console.warn(
@@ -134,21 +139,21 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
           alignItems="flex-start"
           __css={styles}
           {...ariaAttributes}
+          {...rest}
         >
           {showLabel && labelText}
         </ChakraCheckbox>
         {footnote && showHelperInvalidText && (
-          <Box __css={styles.helper}>
-            <HelperErrorText
-              id={`${id}-helperText`}
-              isInvalid={isInvalid}
-              text={footnote}
-            />
-          </Box>
+          <HelperErrorText
+            additionalStyles={styles.helperErrorText}
+            id={`${id}-helperText`}
+            isInvalid={isInvalid}
+            text={footnote}
+          />
         )}
       </>
     );
-  }
+  })
 );
 
 export default Checkbox;

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

@@ -2,7 +2,7 @@
 
 exports[`Checkbox Renders the UI snapshot correctly 1`] = `
 <label
-  className="chakra-checkbox css-g8du1g"
+  className="chakra-checkbox css-1cgy6rg"
   onClick={[Function]}
 >
   <input
@@ -65,7 +65,7 @@ exports[`Checkbox Renders the UI snapshot correctly 1`] = `
 
 exports[`Checkbox Renders the UI snapshot correctly 2`] = `
 <label
-  className="chakra-checkbox css-g8du1g"
+  className="chakra-checkbox css-1cgy6rg"
   data-checked=""
   onClick={[Function]}
 >
@@ -131,7 +131,7 @@ exports[`Checkbox Renders the UI snapshot correctly 2`] = `
 
 exports[`Checkbox Renders the UI snapshot correctly 3`] = `
 <label
-  className="chakra-checkbox css-g8du1g"
+  className="chakra-checkbox css-1cgy6rg"
   data-checked=""
   onClick={[Function]}
 >
@@ -219,7 +219,7 @@ exports[`Checkbox Renders the UI snapshot correctly 3`] = `
 
 exports[`Checkbox Renders the UI snapshot correctly 4`] = `
 <label
-  className="chakra-checkbox css-g8du1g"
+  className="chakra-checkbox css-1cgy6rg"
   onClick={[Function]}
 >
   <input
@@ -282,7 +282,7 @@ exports[`Checkbox Renders the UI snapshot correctly 4`] = `
 
 exports[`Checkbox Renders the UI snapshot correctly 5`] = `
 <label
-  className="chakra-checkbox css-g8du1g"
+  className="chakra-checkbox css-1cgy6rg"
   data-invalid=""
   onClick={[Function]}
 >
@@ -348,7 +348,7 @@ exports[`Checkbox Renders the UI snapshot correctly 5`] = `
 
 exports[`Checkbox Renders the UI snapshot correctly 6`] = `
 <label
-  className="chakra-checkbox css-g8du1g"
+  className="chakra-checkbox css-1cgy6rg"
   data-disabled=""
   onClick={[Function]}
 >
@@ -414,7 +414,7 @@ exports[`Checkbox Renders the UI snapshot correctly 6`] = `
 
 exports[`Checkbox Renders the UI snapshot correctly 7`] = `
 <label
-  className="chakra-checkbox css-g8du1g"
+  className="chakra-checkbox css-1cgy6rg"
   onClick={[Function]}
 >
   <input
@@ -487,3 +487,130 @@ exports[`Checkbox Renders the UI snapshot correctly 7`] = `
   </span>
 </label>
 `;
+
+exports[`Checkbox Renders the UI snapshot correctly 8`] = `
+<label
+  className="chakra-checkbox css-vrx9r6"
+  onClick={[Function]}
+>
+  <input
+    aria-disabled={false}
+    aria-invalid={false}
+    checked={false}
+    className="chakra-checkbox__input"
+    disabled={false}
+    id="checkbox-chakra"
+    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"
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+  >
+    <svg
+      className="chakra-icon css-1vfv7ic"
+      focusable={false}
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
+        fill="currentColor"
+      />
+    </svg>
+  </span>
+  <span
+    className="chakra-checkbox__label css-1oeb2oe"
+    onMouseDown={[Function]}
+    onTouchStart={[Function]}
+  >
+    Test Label
+  </span>
+</label>
+`;
+
+exports[`Checkbox Renders the UI snapshot correctly 9`] = `
+<label
+  className="chakra-checkbox css-1cgy6rg"
+  data-testid="testid"
+  onClick={[Function]}
+>
+  <input
+    aria-disabled={false}
+    aria-invalid={false}
+    checked={false}
+    className="chakra-checkbox__input"
+    disabled={false}
+    id="checkbox-props"
+    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"
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+  >
+    <svg
+      className="chakra-icon css-1vfv7ic"
+      focusable={false}
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
+        fill="currentColor"
+      />
+    </svg>
+  </span>
+  <span
+    className="chakra-checkbox__label css-1oeb2oe"
+    onMouseDown={[Function]}
+    onTouchStart={[Function]}
+  >
+    Test Label
+  </span>
+</label>
+`;

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

@@ -52,9 +52,6 @@ export const enumValues = getStorybookEnumValues(LayoutTypes, "LayoutTypes");
     },
     name: { control: false },
     onChange: { control: false },
-    optReqFlag: {
-      table: { defaultValue: { summary: true } },
-    },
     ref: { table: { disable: true } },
     showHelperInvalidText: {
       table: { defaultValue: { summary: true } },
@@ -62,6 +59,9 @@ export const enumValues = getStorybookEnumValues(LayoutTypes, "LayoutTypes");
     showLabel: {
       table: { defaultValue: { summary: true } },
     },
+    showRequiredLabel: {
+      table: { defaultValue: { summary: true } },
+    },
   }}
 />
 
@@ -70,10 +70,27 @@ export const enumValues = getStorybookEnumValues(LayoutTypes, "LayoutTypes");
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.1`   |
-| Latest            | `0.25.13`  |
+| Latest            | `0.26.0`   |
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Component Props](#component-props)
+- [Accessibility](#accessibility)
+- [Layout Patterns](#layout-patterns)
+- [Errored](#errored)
+- [Required](#required)
+- [Disabled](#disabled)
+- [With JSX Element labels](#with-jsx-element-labels)
+- [Indeterminate Example](#indeterminate-example)
+- [Getting Checkbox Input Values](#getting-checkbox-input-values)
+
+## Overview
 
 <Description of={CheckboxGroup} />
 
+## Component Props
+
 <Canvas withToolbar>
   <Story
     name="CheckboxGroup"
@@ -90,9 +107,9 @@ export const enumValues = getStorybookEnumValues(LayoutTypes, "LayoutTypes");
       layout: "LayoutTypes.Column",
       name: "checkbox-story",
       onChange: undefined,
-      optReqFlag: true,
       showHelperInvalidText: true,
       showLabel: true,
+      showRequiredLabel: true,
     }}
   >
     {(args) => (
@@ -108,6 +125,16 @@ export const enumValues = getStorybookEnumValues(LayoutTypes, "LayoutTypes");
 
 <ArgsTable story="CheckboxGroup" />
 
+## Accessibility
+
+The `CheckboxGroup` renders a group of `Checkbox` components that are wrapped in
+a `<fieldset>` element. The `<fieldset>` element renders a `<legend>` element that
+can be visually hidden through the `showLabel` prop.
+
+Resources:
+
+- [Chakra UI Checkbox](https://chakra-ui.com/docs/components/form/checkbox)
+
 ## Layout Patterns
 
 Use the `layout` prop to set the `Checkbox` buttons to display in a column or in
@@ -116,9 +143,9 @@ a row.
 <Canvas>
   <DSProvider>
     <CheckboxGroup
+      id="column"
       labelText="Column (default)"
       name="column-example"
-      optReqFlag={false}
     >
       <Checkbox value="2" labelText="Checkbox 2" />
       <Checkbox value="3" labelText="Checkbox 3" />
@@ -127,10 +154,10 @@ a row.
     </CheckboxGroup>
     <br />
     <CheckboxGroup
+      id="row"
       labelText="Row"
       name="row-example"
       layout={LayoutTypes.Row}
-      optReqFlag={false}
     >
       <Checkbox value="2" labelText="Checkbox 2" />
       <Checkbox value="3" labelText="Checkbox 3" />
@@ -145,11 +172,30 @@ a row.
 <Canvas>
   <DSProvider>
     <CheckboxGroup
-      labelText="Errored Checkbox Group"
-      name="errored-example"
-      optReqFlag={false}
+      id="errored"
       invalidText="Error message for the full group."
       isInvalid
+      labelText="Errored Checkbox Group"
+      name="errored-example"
+    >
+      <Checkbox value="2" labelText="Checkbox 2" />
+      <Checkbox value="3" labelText="Checkbox 3" />
+      <Checkbox value="4" labelText="Checkbox 4" />
+      <Checkbox value="5" labelText="Checkbox 5" />
+    </CheckboxGroup>
+  </DSProvider>
+</Canvas>
+
+## Required
+
+<Canvas>
+  <DSProvider>
+    <CheckboxGroup
+      id="required"
+      isRequired
+      labelText="Required Checkbox Group"
+      name="required-example"
+      helperText="The reason for being required."
     >
       <Checkbox value="2" labelText="Checkbox 2" />
       <Checkbox value="3" labelText="Checkbox 3" />
@@ -164,11 +210,11 @@ a row.
 <Canvas>
   <DSProvider>
     <CheckboxGroup
+      id="disabled"
+      isDisabled
       labelText="Disabled Checkbox Group"
       name="disabled-example"
-      optReqFlag={false}
       helperText="The reason for being disabled."
-      isDisabled
     >
       <Checkbox value="2" labelText="Checkbox 2" />
       <Checkbox value="3" labelText="Checkbox 3" />
@@ -191,10 +237,10 @@ order to make this work, pass in the `isFullWidth` prop.
 <Canvas>
   <DSProvider>
     <CheckboxGroup
+      id="full-width"
+      isFullWidth
       labelText="Checkbox Group"
       name="checkbox-example"
-      optReqFlag={false}
-      isFullWidth
     >
       <Checkbox
         labelText={
@@ -250,8 +296,8 @@ 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.
+Note that this example is specifically using Reservoir Design System (DS) 
+`Checkbox` and `CheckboxGroup` components.
 
 ```tsx
 export function IndeterminateExample() {
@@ -260,6 +306,7 @@ export function IndeterminateExample() {
   const isIndeterminate = checkedItems.some(Boolean) && !allChecked;
   return (
     <CheckboxGroup
+      id="indeterminate"
       labelText="Indeterminate Example"
       name="indeterminate-example"
     >
@@ -290,6 +337,7 @@ export function IndeterminateExample() {
   const isIndeterminate = checkedItems.some(Boolean) && !allChecked;
   return (
     <CheckboxGroup
+      id="indeterminate"
       labelText="Indeterminate Example"
       name="indeterminate-example"
     >
@@ -319,7 +367,7 @@ export function IndeterminateExample() {
   </DSProvider>
 </Canvas>
 
-## Getting Checkbox Data Values
+## Getting Checkbox Input Values
 
 ### Controlled Component using `name`, `defaultValue`, and `onChange` props