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

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

@@ -3,19 +3,19 @@
 exports[`Pagination Rendering renders the UI snapshot correctly 1`] = `
 <nav
   aria-label="Pagination"
-  className="css-0"
+  className="css-1xdhyk6"
   id="firstPage"
   role="navigation"
 >
   <ul
-    className="css-0"
+    className="css-1xdhyk6"
     id="firstPage-list"
   >
     <li>
       <a
         aria-current="page"
         aria-label="Page 1"
-        className="css-1858g8z"
+        className="css-1eo4rk2"
         href="page=1"
         id="firstPage-1"
         rel={null}
@@ -28,7 +28,7 @@ exports[`Pagination Rendering renders the UI snapshot correctly 1`] = `
       <a
         aria-current={null}
         aria-label="Page 2"
-        className="css-0"
+        className="css-1xdhyk6"
         href="page=2"
         id="firstPage-2"
         rel={null}
@@ -41,7 +41,7 @@ exports[`Pagination Rendering renders the UI snapshot correctly 1`] = `
       <a
         aria-current={null}
         aria-label="Page 3"
-        className="css-0"
+        className="css-1xdhyk6"
         href="page=3"
         id="firstPage-3"
         rel={null}
@@ -54,7 +54,7 @@ exports[`Pagination Rendering renders the UI snapshot correctly 1`] = `
       <a
         aria-current={null}
         aria-label="Page 4"
-        className="css-0"
+        className="css-1xdhyk6"
         href="page=4"
         id="firstPage-4"
         rel={null}
@@ -67,7 +67,7 @@ exports[`Pagination Rendering renders the UI snapshot correctly 1`] = `
       <a
         aria-current={null}
         aria-label="Page 5"
-        className="css-0"
+        className="css-1xdhyk6"
         href="page=5"
         id="firstPage-5"
         rel={null}
@@ -83,7 +83,7 @@ exports[`Pagination Rendering renders the UI snapshot correctly 1`] = `
       <a
         aria-current={null}
         aria-label="Page 10"
-        className="css-0"
+        className="css-1xdhyk6"
         href="page=10"
         id="firstPage-10"
         rel={null}
@@ -95,7 +95,7 @@ exports[`Pagination Rendering renders the UI snapshot correctly 1`] = `
     <li>
       <a
         aria-label="Next page"
-        className="css-0"
+        className="css-1xdhyk6"
         href="page=2"
         id="firstPage-Next"
         rel={null}
@@ -111,18 +111,18 @@ exports[`Pagination Rendering renders the UI snapshot correctly 1`] = `
 exports[`Pagination Rendering renders the UI snapshot correctly 2`] = `
 <nav
   aria-label="Pagination"
-  className="css-0"
+  className="css-1xdhyk6"
   id="lastPage"
   role="navigation"
 >
   <ul
-    className="css-0"
+    className="css-1xdhyk6"
     id="lastPage-list"
   >
     <li>
       <a
         aria-label="Previous page"
-        className="css-0"
+        className="css-1xdhyk6"
         href="page=9"
         id="lastPage-Previous"
         rel={null}
@@ -135,7 +135,7 @@ exports[`Pagination Rendering renders the UI snapshot correctly 2`] = `
       <a
         aria-current={null}
         aria-label="Page 1"
-        className="css-0"
+        className="css-1xdhyk6"
         href="page=1"
         id="lastPage-1"
         rel={null}
@@ -151,7 +151,7 @@ exports[`Pagination Rendering renders the UI snapshot correctly 2`] = `
       <a
         aria-current={null}
         aria-label="Page 6"
-        className="css-0"
+        className="css-1xdhyk6"
         href="page=6"
         id="lastPage-6"
         rel={null}
@@ -164,7 +164,7 @@ exports[`Pagination Rendering renders the UI snapshot correctly 2`] = `
       <a
         aria-current={null}
         aria-label="Page 7"
-        className="css-0"
+        className="css-1xdhyk6"
         href="page=7"
         id="lastPage-7"
         rel={null}
@@ -177,7 +177,7 @@ exports[`Pagination Rendering renders the UI snapshot correctly 2`] = `
       <a
         aria-current={null}
         aria-label="Page 8"
-        className="css-0"
+        className="css-1xdhyk6"
         href="page=8"
         id="lastPage-8"
         rel={null}
@@ -190,7 +190,7 @@ exports[`Pagination Rendering renders the UI snapshot correctly 2`] = `
       <a
         aria-current={null}
         aria-label="Page 9"
-        className="css-0"
+        className="css-1xdhyk6"
         href="page=9"
         id="lastPage-9"
         rel={null}
@@ -203,7 +203,7 @@ exports[`Pagination Rendering renders the UI snapshot correctly 2`] = `
       <a
         aria-current="page"
         aria-label="Page 10"
-        className="css-1858g8z"
+        className="css-1eo4rk2"
         href="page=10"
         id="lastPage-10"
         rel={null}
@@ -219,18 +219,18 @@ exports[`Pagination Rendering renders the UI snapshot correctly 2`] = `
 exports[`Pagination Rendering renders the UI snapshot correctly 3`] = `
 <nav
   aria-label="Pagination"
-  className="css-0"
+  className="css-1xdhyk6"
   id="middlePage"
   role="navigation"
 >
   <ul
-    className="css-0"
+    className="css-1xdhyk6"
     id="middlePage-list"
   >
     <li>
       <a
         aria-label="Previous page"
-        className="css-0"
+        className="css-1xdhyk6"
         href="page=4"
         id="middlePage-Previous"
         rel={null}
@@ -243,7 +243,7 @@ exports[`Pagination Rendering renders the UI snapshot correctly 3`] = `
       <a
         aria-current={null}
         aria-label="Page 1"
-        className="css-0"
+        className="css-1xdhyk6"
         href="page=1"
         id="middlePage-1"
         rel={null}
@@ -259,7 +259,7 @@ exports[`Pagination Rendering renders the UI snapshot correctly 3`] = `
       <a
         aria-current={null}
         aria-label="Page 4"
-        className="css-0"
+        className="css-1xdhyk6"
         href="page=4"
         id="middlePage-4"
         rel={null}
@@ -272,7 +272,7 @@ exports[`Pagination Rendering renders the UI snapshot correctly 3`] = `
       <a
         aria-current="page"
         aria-label="Page 5"
-        className="css-1858g8z"
+        className="css-1eo4rk2"
         href="page=5"
         id="middlePage-5"
         rel={null}
@@ -285,7 +285,7 @@ exports[`Pagination Rendering renders the UI snapshot correctly 3`] = `
       <a
         aria-current={null}
         aria-label="Page 6"
-        className="css-0"
+        className="css-1xdhyk6"
         href="page=6"
         id="middlePage-6"
         rel={null}
@@ -301,7 +301,7 @@ exports[`Pagination Rendering renders the UI snapshot correctly 3`] = `
       <a
         aria-current={null}
         aria-label="Page 10"
-        className="css-0"
+        className="css-1xdhyk6"
         href="page=10"
         id="middlePage-10"
         rel={null}
@@ -313,7 +313,7 @@ exports[`Pagination Rendering renders the UI snapshot correctly 3`] = `
     <li>
       <a
         aria-label="Next page"
-        className="css-0"
+        className="css-1xdhyk6"
         href="page=6"
         id="middlePage-Next"
         rel={null}
@@ -325,3 +325,220 @@ exports[`Pagination Rendering renders the UI snapshot correctly 3`] = `
   </ul>
 </nav>
 `;
+
+exports[`Pagination Rendering renders the UI snapshot correctly 4`] = `
+<nav
+  aria-label="Pagination"
+  className="css-kle7zy"
+  id="chakra"
+  role="navigation"
+>
+  <ul
+    className="css-1xdhyk6"
+    id="chakra-list"
+  >
+    <li>
+      <a
+        aria-current="page"
+        aria-label="Page 1"
+        className="css-1eo4rk2"
+        href="page=1"
+        id="chakra-1"
+        rel={null}
+        target={null}
+      >
+        1
+      </a>
+    </li>
+    <li>
+      <a
+        aria-current={null}
+        aria-label="Page 2"
+        className="css-1xdhyk6"
+        href="page=2"
+        id="chakra-2"
+        rel={null}
+        target={null}
+      >
+        2
+      </a>
+    </li>
+    <li>
+      <a
+        aria-current={null}
+        aria-label="Page 3"
+        className="css-1xdhyk6"
+        href="page=3"
+        id="chakra-3"
+        rel={null}
+        target={null}
+      >
+        3
+      </a>
+    </li>
+    <li>
+      <a
+        aria-current={null}
+        aria-label="Page 4"
+        className="css-1xdhyk6"
+        href="page=4"
+        id="chakra-4"
+        rel={null}
+        target={null}
+      >
+        4
+      </a>
+    </li>
+    <li>
+      <a
+        aria-current={null}
+        aria-label="Page 5"
+        className="css-1xdhyk6"
+        href="page=5"
+        id="chakra-5"
+        rel={null}
+        target={null}
+      >
+        5
+      </a>
+    </li>
+    <li>
+      ...
+    </li>
+    <li>
+      <a
+        aria-current={null}
+        aria-label="Page 10"
+        className="css-1xdhyk6"
+        href="page=10"
+        id="chakra-10"
+        rel={null}
+        target={null}
+      >
+        10
+      </a>
+    </li>
+    <li>
+      <a
+        aria-label="Next page"
+        className="css-1xdhyk6"
+        href="page=2"
+        id="chakra-Next"
+        rel={null}
+        target={null}
+      >
+        Next
+      </a>
+    </li>
+  </ul>
+</nav>
+`;
+
+exports[`Pagination Rendering renders the UI snapshot correctly 5`] = `
+<nav
+  aria-label="Pagination"
+  className="css-1xdhyk6"
+  data-testid="props"
+  id="props"
+  role="navigation"
+>
+  <ul
+    className="css-1xdhyk6"
+    id="props-list"
+  >
+    <li>
+      <a
+        aria-current="page"
+        aria-label="Page 1"
+        className="css-1eo4rk2"
+        href="page=1"
+        id="props-1"
+        rel={null}
+        target={null}
+      >
+        1
+      </a>
+    </li>
+    <li>
+      <a
+        aria-current={null}
+        aria-label="Page 2"
+        className="css-1xdhyk6"
+        href="page=2"
+        id="props-2"
+        rel={null}
+        target={null}
+      >
+        2
+      </a>
+    </li>
+    <li>
+      <a
+        aria-current={null}
+        aria-label="Page 3"
+        className="css-1xdhyk6"
+        href="page=3"
+        id="props-3"
+        rel={null}
+        target={null}
+      >
+        3
+      </a>
+    </li>
+    <li>
+      <a
+        aria-current={null}
+        aria-label="Page 4"
+        className="css-1xdhyk6"
+        href="page=4"
+        id="props-4"
+        rel={null}
+        target={null}
+      >
+        4
+      </a>
+    </li>
+    <li>
+      <a
+        aria-current={null}
+        aria-label="Page 5"
+        className="css-1xdhyk6"
+        href="page=5"
+        id="props-5"
+        rel={null}
+        target={null}
+      >
+        5
+      </a>
+    </li>
+    <li>
+      ...
+    </li>
+    <li>
+      <a
+        aria-current={null}
+        aria-label="Page 10"
+        className="css-1xdhyk6"
+        href="page=10"
+        id="props-10"
+        rel={null}
+        target={null}
+      >
+        10
+      </a>
+    </li>
+    <li>
+      <a
+        aria-label="Next page"
+        className="css-1xdhyk6"
+        href="page=2"
+        id="props-Next"
+        rel={null}
+        target={null}
+      >
+        Next
+      </a>
+    </li>
+  </ul>
+</nav>
+`;

package/src/components/Placeholder/Placeholder.tsx

@@ -13,5 +13,7 @@ export default function Placeholder({
   children,
   variant,
 }: React.PropsWithChildren<PlaceholderProps>) {
-  return <div className={`placeholder placeholder-${variant}`}>{children}</div>;
+  return (
+    <div className={`placeholder placeholder--${variant}`}>{children}</div>
+  );
 }

package/src/components/ProgressIndicator/ProgressIndicator.stories.mdx

@@ -71,10 +71,27 @@ export const typesEnumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.4`   |
-| Latest            | `0.25.12`  |
+| Latest            | `0.26.0`   |
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Component Props](#component-props)
+- [Accessibility](#accessibility)
+- [Linear Type](#linear-type)
+- [Circular Type](#circular-type)
+- [Sizing](#sizing)
+- [Labels](#labels)
+- [Indeterminate State](#indeterminate-state)
+- [Dark Mode](#dark-mode)
+- [Get Input Values](#get-input-values)
+
+## Overview
 
 <Description of={ProgressIndicator} />
 
+## Component Props
+
 <Canvas withToolbar>
   <Story
     name="ProgressIndicator with Controls"
@@ -101,6 +118,26 @@ export const typesEnumValues = getStorybookEnumValues(
 
 <ArgsTable story="ProgressIndicator with Controls" />
 
+## Accessibility
+
+Chakra UI takes care of the internal accessibility attributes for this component.
+Specifically, the `role` attribute is set to `progressbar` and the `aria-valuenow`
+attribute is set to the value of the `value` prop, or the percentage completion
+value. The min and max values are set to "0" and "100", respectively, and are set
+with the `aria-valuemin` and `aria-valuemax` attributes. This makes this
+component and its value(s) visible to screen readers.
+
+When `showLabel` is set to false, the `labelText` value will be set to the
+main `<div>`'s `aria-label` attribute. This is the same div that contains the
+`aria-valuemin`, `aria-valuemax`, and `aria-valuenow` attributes.
+
+Resources:
+
+- [DigitalA11y WAI-ARIA: ROLE=PROGRESSBAR](https://www.digitala11y.com/progressbar-role/)
+- [MDN Using the progressbar role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role)
+- [Chakra UI Progress](https://chakra-ui.com/docs/components/feedback/progress)
+- [Chakra UI Circular Progress](https://chakra-ui.com/docs/components/feedback/circular-progress)
+
 ## Linear Type
 
 Progress bars are preferred in vertically narrow areas such as tables, cards,
@@ -114,6 +151,7 @@ dialogs, etc.
     }}
   >
     <ProgressIndicator
+      id="linear"
       indicatorType={ProgressIndicatorTypes.Linear}
       labelText="Linear Progress Type"
       value={50}
@@ -135,6 +173,7 @@ full-screen loading. Set the `indicatorType` prop to
     }}
   >
     <ProgressIndicator
+      id="circular"
       indicatorType={ProgressIndicatorTypes.Circular}
       labelText="Linear Progress Type"
       value={50}
@@ -142,7 +181,7 @@ full-screen loading. Set the `indicatorType` prop to
   </Story>
 </Canvas>
 
-### Sizing
+## Sizing
 
 The starting height for the progress bar is 4px on mobile and 8px for desktop.
 The `size` prop can be used to optionally set the height to 4px for desktop
@@ -153,8 +192,13 @@ through the `ProgressIndicatorSizes.Small` value.
 <Canvas>
   <DSProvider>
     <SimpleGrid columns={1} gap={GridGaps.Medium}>
-      <ProgressIndicator labelText="Default 8px size" value={50} />
       <ProgressIndicator
+        id="default-size"
+        labelText="Default 8px size"
+        value={50}
+      />
+      <ProgressIndicator
+        id="small-size"
         labelText="Small 4px size"
         size={ProgressIndicatorSizes.Small}
         value={50}
@@ -174,11 +218,13 @@ percentage will not displayed.
   <DSProvider>
     <SimpleGrid columns={1} gap={GridGaps.Medium}>
       <ProgressIndicator
+        id="default-size"
         indicatorType={ProgressIndicatorTypes.Circular}
         labelText="Default 48px size"
         value={50}
       />
       <ProgressIndicator
+        id="small-size"
         indicatorType={ProgressIndicatorTypes.Circular}
         labelText="Small 24px size"
         size={ProgressIndicatorSizes.Small}
@@ -188,7 +234,7 @@ percentage will not displayed.
   </DSProvider>
 </Canvas>
 
-### Labels
+## Labels
 
 The `labelText` value and the `value` percentage are displayed by default. They
 can be hidden through the `showLabel` prop.
@@ -202,11 +248,13 @@ the progress element to provide a description of the progress for screen readers
   <DSProvider>
     <SimpleGrid columns={1} gap={GridGaps.Medium}>
       <ProgressIndicator
+        id="label"
         labelText="This label will be added through aria-label"
         showLabel={false}
         value={50}
       />
       <ProgressIndicator
+        id="label-hidden"
         indicatorType={ProgressIndicatorTypes.Circular}
         labelText="This label will be added through aria-label"
         showLabel={false}
@@ -216,7 +264,7 @@ the progress element to provide a description of the progress for screen readers
   </DSProvider>
 </Canvas>
 
-### Indeterminate State
+## Indeterminate State
 
 When the `isIndeterminate` prop is set to true, the `value` prop is ignored and
 the state is set to an animated indeterminate state. This is often used when the
@@ -226,11 +274,13 @@ exact value or progress of the task is unknown.
   <DSProvider>
     <SimpleGrid columns={1} gap={GridGaps.Medium}>
       <ProgressIndicator
+        id="indeterminate"
         isIndeterminate
         labelText="Indeterminate state"
         value={50}
       />
       <ProgressIndicator
+        id="indeterminate-circular"
         indicatorType={ProgressIndicatorTypes.Circular}
         isIndeterminate
         labelText="Indeterminate state"
@@ -240,7 +290,7 @@ exact value or progress of the task is unknown.
   </DSProvider>
 </Canvas>
 
-### Dark Mode
+## Dark Mode
 
 When in "dark mode", set the `darkMode` prop to true. This will render the
 progress bar and the label text in white for better contrast.
@@ -251,9 +301,15 @@ Note: the background is manually set to better showcase the `darkMode` prop.
   <DSProvider>
     <Box bg="black" w="100%" h="200px" p="20px">
       <SimpleGrid columns={1} gap={GridGaps.Medium}>
-        <ProgressIndicator labelText="Dark Mode" value={50} darkMode />
         <ProgressIndicator
           darkMode
+          id="darkmode"
+          labelText="Dark Mode"
+          value={50}
+        />
+        <ProgressIndicator
+          darkMode
+          id="darkmode-circular"
           indicatorType={ProgressIndicatorTypes.Circular}
           labelText="Dark Mode"
           value={50}
@@ -263,7 +319,7 @@ Note: the background is manually set to better showcase the `darkMode` prop.
   </DSProvider>
 </Canvas>
 
-### Example
+## Get Input Values
 
 In the following example, we are setting the `value` prop based on a timer that
 increases the value every second by 10. Once it reaches 100, it resets to 0.
@@ -282,8 +338,13 @@ function ProgressIndicatorExample() {
   }, []);
   return (
     <SimpleGrid columns={1} gap={GridGaps.Medium}>
-      <ProgressIndicator labelText="Progress example" value={value} />
       <ProgressIndicator
+        id="example"
+        labelText="Progress example"
+        value={value}
+      />
+      <ProgressIndicator
+        id="example-circular"
         indicatorType={ProgressIndicatorTypes.Circular}
         labelText="Progress example"
         value={value}
@@ -303,8 +364,13 @@ export function ProgressIndicatorExample() {
   }, []);
   return (
     <SimpleGrid columns={1} gap={GridGaps.Medium}>
-      <ProgressIndicator labelText="Progress example" value={value} />
       <ProgressIndicator
+        id="example"
+        labelText="Progress example"
+        value={value}
+      />
+      <ProgressIndicator
+        id="example-circular"
         indicatorType={ProgressIndicatorTypes.Circular}
         labelText="Progress example"
         value={value}