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

package/src/components/ProgressIndicator/ProgressIndicator.test.tsx

@@ -9,10 +9,15 @@ import { ProgressIndicatorTypes } from "./ProgressIndicatorTypes";
 describe("ProgressIndicator Accessibility", () => {
   it("passes axe accessibility for linear and circular types", async () => {
     const linearUtils = render(
-      <ProgressIndicator labelText="Linear" value={50} />
+      <ProgressIndicator
+        id="progressIndicatorLinear"
+        labelText="Linear"
+        value={50}
+      />
     );
     const circularUtils = render(
       <ProgressIndicator
+        id="progressIndicatorCircular"
         labelText="Circular"
         value={50}
         indicatorType={ProgressIndicatorTypes.Circular}
@@ -24,10 +29,16 @@ describe("ProgressIndicator Accessibility", () => {
 
   it("passes axe accessibility for linear and circular types without labels", async () => {
     const linearUtils = render(
-      <ProgressIndicator labelText="Linear" value={50} showLabel={false} />
+      <ProgressIndicator
+        id="progressIndicatorLinear"
+        labelText="Linear"
+        value={50}
+        showLabel={false}
+      />
     );
     const circularUtils = render(
       <ProgressIndicator
+        id="progressIndicatorCircular"
         labelText="Circular"
         value={50}
         indicatorType={ProgressIndicatorTypes.Circular}
@@ -40,10 +51,16 @@ describe("ProgressIndicator Accessibility", () => {
 
   it("passes axe accessibility for linear and circular types for indeterminate state", async () => {
     const linearUtils = render(
-      <ProgressIndicator labelText="Linear" value={50} isIndeterminate />
+      <ProgressIndicator
+        id="progressIndicatorLinear"
+        labelText="Linear"
+        value={50}
+        isIndeterminate
+      />
     );
     const circularUtils = render(
       <ProgressIndicator
+        id="progressIndicatorCircular"
         labelText="Circular"
         value={50}
         indicatorType={ProgressIndicatorTypes.Circular}
@@ -56,10 +73,16 @@ describe("ProgressIndicator Accessibility", () => {
 
   it("passes axe accessibility for linear and circular types for dark mode", async () => {
     const linearUtils = render(
-      <ProgressIndicator labelText="Linear" value={50} darkMode />
+      <ProgressIndicator
+        id="progressIndicatorLinear"
+        labelText="Linear"
+        value={50}
+        darkMode
+      />
     );
     const circularUtils = render(
       <ProgressIndicator
+        id="progressIndicatorCircular"
         labelText="Circular"
         value={50}
         indicatorType={ProgressIndicatorTypes.Circular}
@@ -73,7 +96,9 @@ describe("ProgressIndicator Accessibility", () => {
 
 describe("ProgressIndicator", () => {
   it("renders a label and a progressbar for the linear type", () => {
-    render(<ProgressIndicator labelText="Linear" value={50} />);
+    render(
+      <ProgressIndicator id="progressIndicator" labelText="Linear" value={50} />
+    );
     expect(screen.getByLabelText("Linear")).toBeInTheDocument();
     expect(screen.getByRole("progressbar")).toBeInTheDocument();
   });
@@ -81,6 +106,7 @@ describe("ProgressIndicator", () => {
   it("renders a label, a progressbar, and an svg for the circular type", () => {
     const { container } = render(
       <ProgressIndicator
+        id="progressIndicator"
         labelText="Circular"
         indicatorType={ProgressIndicatorTypes.Circular}
         value={50}
@@ -93,7 +119,12 @@ describe("ProgressIndicator", () => {
 
   it("renders the appropriate aria atttribute when the label is hidden", () => {
     render(
-      <ProgressIndicator labelText="Linear" value={50} showLabel={false} />
+      <ProgressIndicator
+        id="progressIndicator"
+        labelText="Linear"
+        value={50}
+        showLabel={false}
+      />
     );
     expect(screen.getByLabelText("Linear")).toBeInTheDocument();
     expect(screen.getByRole("progressbar")).toHaveAttribute(
@@ -104,20 +135,30 @@ describe("ProgressIndicator", () => {
 
   it("renders the value passed", () => {
     const { rerender } = render(
-      <ProgressIndicator labelText="Linear" value={50} />
+      <ProgressIndicator id="progressIndicator" labelText="Linear" value={50} />
     );
     expect(screen.getByText("50%")).toBeInTheDocument();
 
-    rerender(<ProgressIndicator labelText="Linear" value={89} />);
+    rerender(
+      <ProgressIndicator id="progressIndicator" labelText="Linear" value={89} />
+    );
     expect(screen.getByText("89%")).toBeInTheDocument();
 
-    rerender(<ProgressIndicator labelText="Linear" value={4} />);
+    rerender(
+      <ProgressIndicator id="progressIndicator" labelText="Linear" value={4} />
+    );
     expect(screen.getByText("4%")).toBeInTheDocument();
   });
 
   it("logs a warning if a value less than 0 is passed", () => {
     const warn = jest.spyOn(console, "warn");
-    render(<ProgressIndicator labelText="Linear" value={-20} />);
+    render(
+      <ProgressIndicator
+        id="progressIndicator"
+        labelText="Linear"
+        value={-20}
+      />
+    );
 
     expect(warn).toHaveBeenCalledWith(
       "NYPL Reservoir ProgressIndicator: An invalid value was passed for the" +
@@ -128,7 +169,13 @@ describe("ProgressIndicator", () => {
 
   it("logs a warning if a value more than 100 is passed", () => {
     const warn = jest.spyOn(console, "warn");
-    render(<ProgressIndicator labelText="Linear" value={150} />);
+    render(
+      <ProgressIndicator
+        id="progressIndicator"
+        labelText="Linear"
+        value={150}
+      />
+    );
 
     expect(warn).toHaveBeenCalledWith(
       "NYPL Reservoir ProgressIndicator: An invalid value was passed for the" +
@@ -216,6 +263,27 @@ describe("ProgressIndicator", () => {
         />
       )
       .toJSON();
+    const withChakraProps = renderer
+      .create(
+        <ProgressIndicator
+          id="chakra"
+          labelText="Linear"
+          value={50}
+          p="20px"
+          color="ui.red.primary"
+        />
+      )
+      .toJSON();
+    const withOtherProps = renderer
+      .create(
+        <ProgressIndicator
+          id="props"
+          labelText="Linear"
+          value={50}
+          data-testid="props"
+        />
+      )
+      .toJSON();
 
     expect(linearBasic).toMatchSnapshot();
     expect(circularBasic).toMatchSnapshot();
@@ -225,5 +293,7 @@ describe("ProgressIndicator", () => {
     expect(circularIndeterminate).toMatchSnapshot();
     expect(linearDarkMode).toMatchSnapshot();
     expect(circularDarkMode).toMatchSnapshot();
+    expect(withChakraProps).toMatchSnapshot();
+    expect(withOtherProps).toMatchSnapshot();
   });
 });

package/src/components/ProgressIndicator/ProgressIndicator.tsx

@@ -1,24 +1,24 @@
-import React from "react";
 import {
   Box,
+  chakra,
   CircularProgress as ChakraCircularProgress,
   CircularProgressLabel as ChakraCircularProgressLabel,
   Progress as ChakraProgress,
   useMultiStyleConfig,
 } from "@chakra-ui/react";
+import React from "react";
 
 import {
   ProgressIndicatorSizes,
   ProgressIndicatorTypes,
 } from "./ProgressIndicatorTypes";
-import generateUUID from "../../helpers/generateUUID";
 import Label from "../Label/Label";
 
 export interface ProgressIndicatorProps {
   /** Flag to render the component in a dark background. */
   darkMode?: boolean;
   /** ID that other components can cross reference for accessibility purposes. */
-  id?: string;
+  id: string;
   /** Whether the `ProgressIndicator` should be linear or circular. */
   indicatorType?: ProgressIndicatorTypes;
   /** Whether the progress animation should display because the `value` prop is
@@ -40,24 +40,28 @@ export interface ProgressIndicatorProps {
  * time to complete or consists of multiple steps. Examples include downloading,
  * uploading, or processing.
  */
-const ProgressIndicator: React.FC<ProgressIndicatorProps> = (
-  props: ProgressIndicatorProps
-) => {
+export const ProgressIndicator = chakra((props: ProgressIndicatorProps) => {
   const {
     darkMode = false,
-    id = generateUUID(),
+    id,
     indicatorType = ProgressIndicatorTypes.Linear,
     isIndeterminate = false,
     labelText,
     showLabel = true,
     size = ProgressIndicatorSizes.Default,
     value = 0,
+    ...rest
   } = props;
   const styles = useMultiStyleConfig("ProgressIndicator", {
     darkMode,
     size,
   });
   let finalValue = value;
+  if (!id) {
+    console.warn(
+      "NYPL Reservoir Progress Indicator: This component's required `id` prop was not passed."
+    );
+  }
   if (finalValue < 0 || finalValue > 100) {
     console.warn(
       "NYPL Reservoir ProgressIndicator: An invalid value was passed for the" +
@@ -122,7 +126,11 @@ const ProgressIndicator: React.FC<ProgressIndicatorProps> = (
     );
   };
 
-  return <Box __css={styles}>{progressComponent(indicatorType)}</Box>;
-};
+  return (
+    <Box __css={styles} {...rest}>
+      {progressComponent(indicatorType)}
+    </Box>
+  );
+});
 
 export default ProgressIndicator;

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

@@ -2,10 +2,10 @@
 
 exports[`ProgressIndicator Renders the UI snapshot correctly 1`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
 >
   <label
-    className="css-0"
+    className="css-1xdhyk6"
     htmlFor="linearBasic"
     id="linearBasic-label"
   >
@@ -45,7 +45,7 @@ exports[`ProgressIndicator Renders the UI snapshot correctly 1`] = `
 
 exports[`ProgressIndicator Renders the UI snapshot correctly 2`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
 >
   <div
     className="css-0"
@@ -89,7 +89,7 @@ exports[`ProgressIndicator Renders the UI snapshot correctly 2`] = `
       </div>
     </div>
     <label
-      className="css-0"
+      className="css-1xdhyk6"
       htmlFor="circularBasic"
       id="circularBasic-label"
     >
@@ -101,7 +101,7 @@ exports[`ProgressIndicator Renders the UI snapshot correctly 2`] = `
 
 exports[`ProgressIndicator Renders the UI snapshot correctly 3`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
 >
   <div
     className="css-0"
@@ -131,7 +131,7 @@ exports[`ProgressIndicator Renders the UI snapshot correctly 3`] = `
 
 exports[`ProgressIndicator Renders the UI snapshot correctly 4`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
 >
   <div
     className="css-0"
@@ -174,10 +174,10 @@ exports[`ProgressIndicator Renders the UI snapshot correctly 4`] = `
 
 exports[`ProgressIndicator Renders the UI snapshot correctly 5`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
 >
   <label
-    className="css-0"
+    className="css-1xdhyk6"
     htmlFor="linearIndeterminate"
     id="linearIndeterminate-label"
   >
@@ -211,7 +211,7 @@ exports[`ProgressIndicator Renders the UI snapshot correctly 5`] = `
 
 exports[`ProgressIndicator Renders the UI snapshot correctly 6`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
 >
   <div
     className="css-0"
@@ -247,7 +247,7 @@ exports[`ProgressIndicator Renders the UI snapshot correctly 6`] = `
       </svg>
     </div>
     <label
-      className="css-0"
+      className="css-1xdhyk6"
       htmlFor="circularIndeterminate"
       id="circularIndeterminate-label"
     >
@@ -259,10 +259,10 @@ exports[`ProgressIndicator Renders the UI snapshot correctly 6`] = `
 
 exports[`ProgressIndicator Renders the UI snapshot correctly 7`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
 >
   <label
-    className="css-0"
+    className="css-1xdhyk6"
     htmlFor="linearDarkMode"
     id="linearDarkMode-label"
   >
@@ -302,7 +302,7 @@ exports[`ProgressIndicator Renders the UI snapshot correctly 7`] = `
 
 exports[`ProgressIndicator Renders the UI snapshot correctly 8`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
 >
   <div
     className="css-0"
@@ -346,7 +346,7 @@ exports[`ProgressIndicator Renders the UI snapshot correctly 8`] = `
       </div>
     </div>
     <label
-      className="css-0"
+      className="css-1xdhyk6"
       htmlFor="circularDarkMode"
       id="circularDarkMode-label"
     >
@@ -355,3 +355,90 @@ exports[`ProgressIndicator Renders the UI snapshot correctly 8`] = `
   </div>
 </div>
 `;
+
+exports[`ProgressIndicator Renders the UI snapshot correctly 9`] = `
+<div
+  className="css-10g9ftz"
+>
+  <label
+    className="css-1xdhyk6"
+    htmlFor="chakra"
+    id="chakra-label"
+  >
+    Linear
+  </label>
+  <div
+    className="css-0"
+  >
+    <div
+      className="css-kdwx3d"
+      id="chakra"
+    >
+      <div
+        aria-label={null}
+        aria-labelledby="chakra-label"
+        aria-valuemax={100}
+        aria-valuemin={0}
+        aria-valuenow={50}
+        className="css-1jy0d03"
+        role="progressbar"
+        style={
+          Object {
+            "width": "50%",
+          }
+        }
+      />
+    </div>
+    <div
+      className="css-0"
+    >
+      50
+      %
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ProgressIndicator Renders the UI snapshot correctly 10`] = `
+<div
+  className="css-1xdhyk6"
+  data-testid="props"
+>
+  <label
+    className="css-1xdhyk6"
+    htmlFor="props"
+    id="props-label"
+  >
+    Linear
+  </label>
+  <div
+    className="css-0"
+  >
+    <div
+      className="css-kdwx3d"
+      id="props"
+    >
+      <div
+        aria-label={null}
+        aria-labelledby="props-label"
+        aria-valuemax={100}
+        aria-valuemin={0}
+        aria-valuenow={50}
+        className="css-1jy0d03"
+        role="progressbar"
+        style={
+          Object {
+            "width": "50%",
+          }
+        }
+      />
+    </div>
+    <div
+      className="css-0"
+    >
+      50
+      %
+    </div>
+  </div>
+</div>
+`;

package/src/components/Radio/Radio.stories.mdx

@@ -53,7 +53,22 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.22.0`   |
-| Latest            | `0.25.13`  |
+| Latest            | `0.26.0`   |
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Component Props](#component-props)
+- [Accessibility](#accessibility)
+- [Checked](#checked)
+- [Focused](#focused)
+- [Errored](#errored)
+- [Disabled](#disabled)
+- [Helper Text](#helper-text)
+- [Error Text](#error-text)
+- [With JSX Element Label](#with-jsx-element-label)
+
+## Overview
 
 <Description of={Radio} />
 
@@ -62,6 +77,8 @@ show the `Radio` button in isolation. We recommend to always use the `Radio`
 component inside the Design System `RadioGroup` component. The `RadioGroup`
 component will handle all the states and data management.
 
+## Component Props
+
 <Canvas withToolbar>
   <Story
     name="Radio"
@@ -88,11 +105,27 @@ component will handle all the states and data management.
 
 <ArgsTable story="Radio" />
 
+## Accessibility
+
+The `Radio` component renders an `input` element with the `type="radio"` attribute.
+This HTML element is accessible by default.
+
+When `showLabel` is set to false, the `labelText` value will be set to the
+`<input>`'s `aria-label` attribute.
+
+Resources:
+
+- [W3C ARIA radiogroup and radio example](https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20160317/examples/radio/radio.html)
+- [W3C Radio Button Example](https://www.w3.org/TR/2017/WD-wai-aria-practices-1.1-20170628/examples/radio/radio-1/radio-1.html)
+- [MDN input type="radio"](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio)
+- [Deque University Radio and Radio Group](https://dequeuniversity.com/library/aria/radio-and-radio-group)
+- [Chakra UI Radio](https://chakra-ui.com/docs/components/form/radio)
+
 ## Checked
 
 <Canvas>
   <DSProvider>
-    <Radio labelText="I am checked" isChecked value="1" />
+    <Radio labelText="I am checked" id="checked" isChecked value="1" />
   </DSProvider>
 </Canvas>
 
@@ -100,7 +133,10 @@ component will handle all the states and data management.
 
 <Canvas>
   <DSProvider>
-    <Radio labelText="Click or tab to the Radio to see its focus state" />
+    <Radio
+      id="focused"
+      labelText="Click or tab to the Radio to see its focus state"
+    />
   </DSProvider>
 </Canvas>
 
@@ -109,8 +145,13 @@ component will handle all the states and data management.
 <Canvas>
   <DSProvider>
     <HStack>
-      <Radio isInvalid labelText="I am in an error state" />
-      <Radio isInvalid isChecked labelText="I am checked in an error state" />
+      <Radio id="invalid" isInvalid labelText="I am in an error state" />
+      <Radio
+        id="invalid-checked"
+        isInvalid
+        isChecked
+        labelText="I am checked in an error state"
+      />
     </HStack>
   </DSProvider>
 </Canvas>
@@ -120,8 +161,13 @@ component will handle all the states and data management.
 <Canvas>
   <DSProvider>
     <HStack>
-      <Radio isDisabled labelText="I am disabled" />
-      <Radio isDisabled isChecked labelText="I am checked and disabled" />
+      <Radio id="disabled" isDisabled labelText="I am disabled" />
+      <Radio
+        id="disabled-checked"
+        isDisabled
+        isChecked
+        labelText="I am checked and disabled"
+      />
     </HStack>
   </DSProvider>
 </Canvas>
@@ -131,9 +177,10 @@ component will handle all the states and data management.
 <Canvas>
   <DSProvider>
     <Radio
-      name="testHelperText"
-      labelText="I have helper text"
       helperText="I am the helper text for this Radio"
+      id="help-text"
+      labelText="I have helper text"
+      name="testHelperText"
     />
   </DSProvider>
 </Canvas>
@@ -143,10 +190,11 @@ component will handle all the states and data management.
 <Canvas>
   <DSProvider>
     <Radio
-      name="testErrorText"
-      labelText="I have error text"
+      id="invalid-text"
       invalidText="I am the error text for this Radio"
       isInvalid
+      labelText="I have error text"
+      name="testErrorText"
     />
   </DSProvider>
 </Canvas>
@@ -159,6 +207,10 @@ usage.
 
 <Canvas>
   <DSProvider>
-    <Radio labelText={<span>Arts</span>} name="jsxElementLabel" />
+    <Radio
+      id="jsx-label"
+      labelText={<span>Arts</span>}
+      name="jsxElementLabel"
+    />
   </DSProvider>
 </Canvas>

package/src/components/Radio/Radio.test.tsx

@@ -5,7 +5,6 @@ import { axe } from "jest-axe";
 import renderer from "react-test-renderer";
 
 import Radio from "./Radio";
-import * as generateUUID from "../../helpers/generateUUID";
 
 describe("Radio Accessibility", () => {
   it("passes axe accessibility test with string label", async () => {
@@ -93,13 +92,6 @@ describe("Radio Button", () => {
     expect(screen.getByRole("radio")).toHaveAttribute("id", "inputID");
   });
 
-  it("calls the UUID generation function if no id prop value is passed", () => {
-    const generateUUIDSpy = jest.spyOn(generateUUID, "default");
-    expect(generateUUIDSpy).toHaveBeenCalledTimes(0);
-    render(<Radio labelText="Hello" />);
-    expect(generateUUIDSpy).toHaveBeenCalledTimes(1);
-  });
-
   it("sets the 'checked' attribute", () => {
     render(
       <Radio
@@ -168,6 +160,7 @@ describe("Radio Button", () => {
     const warn = jest.spyOn(console, "warn");
     render(
       <Radio
+        id="radio"
         value="arts"
         labelText={
           <Flex>
@@ -185,6 +178,18 @@ describe("Radio Button", () => {
     );
   });
 
+  it("logs a warning when there is no `id` passed", () => {
+    const warn = jest.spyOn(console, "warn");
+    render(
+      // @ts-ignore: Typescript complains when a required prop is not passed, but
+      // here we don't want to pass the required prop to make sure the warning appears.
+      <Radio labelText="Arts" />
+    );
+    expect(warn).toHaveBeenCalledWith(
+      "NYPL Reservoir Radio: This component's required `id` prop was not passed."
+    );
+  });
+
   it("renders the UI snapshot correctly", () => {
     const primary = renderer
       .create(<Radio id="inputID" labelText="Test Label" />)
@@ -216,6 +221,19 @@ describe("Radio Button", () => {
         />
       )
       .toJSON();
+    const withChakraProps = renderer
+      .create(
+        <Radio
+          id="chakra"
+          labelText="Test Label"
+          p="20px"
+          color="ui.error.primary"
+        />
+      )
+      .toJSON();
+    const withOtherProps = renderer
+      .create(<Radio id="props" labelText="Test Label" data-testid="props" />)
+      .toJSON();
 
     expect(primary).toMatchSnapshot();
     expect(isChecked).toMatchSnapshot();
@@ -223,5 +241,7 @@ describe("Radio Button", () => {
     expect(isInvalid).toMatchSnapshot();
     expect(isDisabled).toMatchSnapshot();
     expect(withJSXLabel).toMatchSnapshot();
+    expect(withChakraProps).toMatchSnapshot();
+    expect(withOtherProps).toMatchSnapshot();
   });
 });