@nypl/design-system-react-components 0.25.0 → 0.25.4

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

@@ -63,7 +63,7 @@ describe("Checkbox", () => {
         id="inputID"
         labelText="Test Label"
         helperText="This is the helper text."
-        errorText="This is the error text :("
+        invalidText="This is the error text :("
       />
     );
     expect(screen.getByText("This is the helper text.")).toBeVisible();
@@ -77,7 +77,7 @@ describe("Checkbox", () => {
         labelText="Test Label"
         isInvalid
         helperText="This is the helper text."
-        errorText="This is the error text :("
+        invalidText="This is the error text :("
       />
     );
     expect(screen.getByText("This is the error text :(")).toBeVisible();
@@ -109,6 +109,22 @@ describe("Checkbox", () => {
     expect(screen.getByRole("checkbox")).toHaveAttribute("checked");
   });
 
+  it("Sets the 'indeterminate' state", () => {
+    const { container, rerender } = render(
+      <Checkbox id="inputID" labelText="Test Label" isChecked />
+    );
+    expect(
+      container.querySelector(".chakra-checkbox__control")
+    ).not.toHaveAttribute("data-indeterminate");
+
+    rerender(
+      <Checkbox id="inputID" labelText="Test Label" isChecked isIndeterminate />
+    );
+    expect(
+      container.querySelector(".chakra-checkbox__control")
+    ).toHaveAttribute("data-indeterminate");
+  });
+
   it("Sets the 'disabled' attribute", () => {
     render(
       <Checkbox
@@ -139,10 +155,28 @@ describe("Checkbox", () => {
         id="inputID-attributes"
         labelText="onChange test"
         showLabel={true}
+        invalidText="This is the error text!"
+        isInvalid
+      />
+    );
+    expect(screen.getByRole("checkbox")).toHaveAttribute("aria-invalid");
+    expect(screen.getByText("This is the error text!")).toBeInTheDocument();
+  });
+
+  it("does not render the error text when 'isInvalid' is true but 'showHelperInvalidText' is false", () => {
+    render(
+      <Checkbox
+        id="inputID-attributes"
+        labelText="onChange test"
+        showLabel={true}
+        showHelperInvalidText={false}
         isInvalid
       />
     );
     expect(screen.getByRole("checkbox")).toHaveAttribute("aria-invalid");
+    expect(
+      screen.queryByText("This is the error text!")
+    ).not.toBeInTheDocument();
   });
 
   it("Changing the value calls the onChange handler", () => {
@@ -170,6 +204,16 @@ describe("Checkbox", () => {
         <Checkbox id="checkbox-checked" labelText="Test Label" isChecked />
       )
       .toJSON();
+    const isIndeterminate = renderer
+      .create(
+        <Checkbox
+          id="checkbox-checked"
+          labelText="Test Label"
+          isChecked
+          isIndeterminate
+        />
+      )
+      .toJSON();
     const isRequired = renderer
       .create(
         <Checkbox id="checkbox-required" labelText="Test Label" isRequired />
@@ -188,6 +232,7 @@ describe("Checkbox", () => {
 
     expect(primary).toMatchSnapshot();
     expect(isChecked).toMatchSnapshot();
+    expect(isIndeterminate).toMatchSnapshot();
     expect(isRequired).toMatchSnapshot();
     expect(isInvalid).toMatchSnapshot();
     expect(isDisabled).toMatchSnapshot();

package/src/components/Checkbox/Checkbox.tsx

@@ -11,36 +11,40 @@ 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 the error state
-   * when `isInvalid` is true.
-   */
-  errorText?: string;
   /** Optional string to populate the HelperErrorText for standard state */
   helperText?: string;
   /** ID that other components can cross reference for accessibility purposes */
   id?: string;
-  /** When using the Checkbox as a "controlled" form element, you can specify the
-   * Checkbox's checked state using this prop.
+  /** Optional string to populate the HelperErrorText for the error state
+   * when `isInvalid` is true. */
+  invalidText?: string;
+  /** When using the Checkbox as a "controlled" form element, you can specify
+   * the Checkbox's checked state using this prop.
    * Learn more about controlled and uncontrolled form fields:
    * https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/ */
   isChecked?: boolean;
   /** Adds the 'disabled' and `aria-disabled` attributes to the input when true.
-   * This also makes the text italic and color scheme gray.
-   */
+   * This also makes the text italic and color scheme gray. */
   isDisabled?: boolean;
+  /** Adds the indeterminate state to the `Checkbox`. */
+  isIndeterminate?: boolean;
   /** Adds the 'aria-invalid' attribute to the input when true. This also makes
-   * the color theme "NYPL error" red for the button and text.
-   */
+   * the color theme "NYPL error" red for the button and text. */
   isInvalid?: boolean;
   /** Adds the 'required' attribute to the input when true. */
   isRequired?: boolean;
-  /** The checkbox's label.  This will serve as the text content for a `<label>` element if `showlabel` is true, or an "aria-label" if `showLabel` is false. */
+  /** The checkbox's label. This will serve as the text content for a `<label>`
+   * element if `showlabel` is true, or an "aria-label" if `showLabel` is false. */
   labelText: string;
-  /** The name prop indicates into which group of checkboxes this checkbox belongs.  If none is specified, 'default' will be used */
+  /** The name prop indicates into which group of checkboxes this checkbox
+   * belongs. If none is specified, 'default' will be used */
   name?: string;
   /** The action to perform on the `<input>`'s onChange function  */
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  /** Offers the ability to show the checkbox's label onscreen or hide it. Refer to the `labelText` property for more information. */
+  /** Offers the ability to hide the helper/invalid text. */
+  showHelperInvalidText?: boolean;
+  /** Offers the ability to show the checkbox's label onscreen or hide it.
+   * Refer to the `labelText` property for more information. */
   showLabel?: boolean;
   /** Populates the value of the input */
   value?: string;
@@ -51,15 +55,17 @@ export const onChangeDefault = () => {
 };
 
 function CheckboxIcon(props) {
-  const { isIndeterminate, ...rest } = props;
-
-  const d = isIndeterminate
-    ? "M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm0,19a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,12,19Zm1.6-6.08a1,1,0,0,0-.6.917,1,1,0,1,1-2,0,3,3,0,0,1,1.8-2.75A2,2,0,1,0,10,9.255a1,1,0,1,1-2,0,4,4,0,1,1,5.6,3.666Z"
-    : "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";
+  // We don't need the `isIndeterminate` or `isChecked` props but it
+  // causes rendering issues on the SVG element, so we remove them
+  // before passing all the props to the `Icon` component.
+  const { isIndeterminate, isChecked, ...rest } = props;
 
   return (
     <Icon viewBox="0 0 24 24" {...rest}>
-      <path fill="currentColor" d={d} />
+      <path
+        fill="currentColor"
+        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"
+      />
     </Icon>
   );
 }
@@ -68,64 +74,63 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
   (props, ref?) => {
     const {
       className,
-      errorText,
+      invalidText,
       helperText,
-      id,
+      id = generateUUID(),
       isChecked,
       isDisabled = false,
+      isIndeterminate = false,
       isInvalid = false,
       isRequired = false,
       labelText,
       name,
+      showHelperInvalidText = true,
       showLabel = true,
       value,
     } = props;
-
     const styles = useMultiStyleConfig("Checkbox", {});
-    const footnote = isInvalid ? errorText : helperText;
-    const attributes = {};
-    const checkboxID = id || generateUUID();
+    const footnote = isInvalid ? invalidText : helperText;
+    const ariaAttributes = {};
     const onChange = props.onChange || onChangeDefault;
+    // Use Chakra's default indeterminate icon.
+    const icon = !isIndeterminate ? <CheckboxIcon /> : undefined;
 
     if (!showLabel) {
-      attributes["aria-label"] =
+      ariaAttributes["aria-label"] =
         labelText && footnote ? `${labelText} - ${footnote}` : labelText;
     } else {
-      if (footnote) attributes["aria-describedby"] = `${checkboxID}-helperText`;
+      if (footnote) ariaAttributes["aria-describedby"] = `${id}-helperText`;
     }
 
     return (
       <>
         <ChakraCheckbox
-          id={checkboxID}
+          id={id}
           className={className}
           name={name || "default"}
           isDisabled={isDisabled}
           isInvalid={isInvalid}
           isRequired={isRequired}
+          isIndeterminate={isIndeterminate}
           ref={ref}
           value={value}
           {...(isChecked !== undefined
             ? {
-                isChecked: isChecked,
-                onChange: onChange,
+                isChecked,
+                onChange,
               }
             : {
                 defaultIsChecked: false,
               })}
-          icon={<CheckboxIcon />}
-          //iconColor="ui.focus"
+          icon={icon}
           __css={styles}
-          {...attributes}
+          {...ariaAttributes}
         >
           {showLabel && labelText}
         </ChakraCheckbox>
-        {footnote && showLabel && (
-          <Box __css={styles.helper} aria-disabled={isDisabled}>
-            <HelperErrorText
-              isError={isInvalid}
-              id={`${checkboxID}-helperText`}
-            >
+        {footnote && showHelperInvalidText && (
+          <Box __css={styles.helper}>
+            <HelperErrorText isInvalid={isInvalid} id={`${id}-helperText`}>
               {footnote}
             </HelperErrorText>
           </Box>
@@ -135,6 +140,4 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
   }
 );
 
-Checkbox.displayName = "Checkbox";
-
 export default Checkbox;

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

@@ -45,7 +45,6 @@ exports[`Checkbox Renders the UI snapshot correctly 1`] = `
     <svg
       className="chakra-icon css-1vfv7ic"
       focusable={false}
-      isChecked={false}
       viewBox="0 0 24 24"
     >
       <path
@@ -67,6 +66,7 @@ exports[`Checkbox Renders the UI snapshot correctly 1`] = `
 exports[`Checkbox Renders the UI snapshot correctly 2`] = `
 <label
   className="chakra-checkbox css-1uiwwan"
+  data-checked=""
   onClick={[Function]}
 >
   <input
@@ -110,7 +110,6 @@ exports[`Checkbox Renders the UI snapshot correctly 2`] = `
     <svg
       className="chakra-icon css-oi1lnb"
       focusable={false}
-      isChecked={true}
       viewBox="0 0 24 24"
     >
       <path
@@ -131,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]}
@@ -175,7 +262,6 @@ exports[`Checkbox Renders the UI snapshot correctly 3`] = `
     <svg
       className="chakra-icon css-1vfv7ic"
       focusable={false}
-      isChecked={false}
       viewBox="0 0 24 24"
     >
       <path
@@ -194,9 +280,10 @@ 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=""
   onClick={[Function]}
 >
   <input
@@ -240,7 +327,6 @@ exports[`Checkbox Renders the UI snapshot correctly 4`] = `
     <svg
       className="chakra-icon css-1vfv7ic"
       focusable={false}
-      isChecked={false}
       viewBox="0 0 24 24"
     >
       <path
@@ -260,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=""
@@ -307,7 +393,6 @@ exports[`Checkbox Renders the UI snapshot correctly 5`] = `
     <svg
       className="chakra-icon css-1vfv7ic"
       focusable={false}
-      isChecked={false}
       viewBox="0 0 24 24"
     >
       <path