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

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

@@ -2,7 +2,7 @@
 
 exports[`Notification renders the UI snapshot correctly 1`] = `
 <aside
-  className="css-0"
+  className="css-1xdhyk6"
   data-type="standard"
   id="notificationID1"
 >
@@ -10,15 +10,15 @@ exports[`Notification renders the UI snapshot correctly 1`] = `
     className="css-0"
   >
     <header
-      className="css-0"
+      className="css-1xdhyk6"
     >
       <svg
-        aria-hidden={false}
-        className="chakra-icon css-onkibi"
+        aria-hidden={true}
+        className="chakra-icon css-q3eg3a"
         focusable={false}
         id="notificationID1-notification-icon"
         role="img"
-        title="alert_notification_important icon"
+        title="Notification standard icon"
         viewBox="0 0 24 24"
       >
         <g
@@ -45,14 +45,14 @@ exports[`Notification renders the UI snapshot correctly 1`] = `
         </g>
       </svg>
       <h4
-        className="chakra-heading css-0"
+        className="chakra-heading css-1xdhyk6"
         id="notificationID1-heading"
       >
         Notification Heading
       </h4>
     </header>
     <div
-      className="css-0"
+      className="css-1xdhyk6"
     >
       <div
         className="css-0"
@@ -66,7 +66,7 @@ exports[`Notification renders the UI snapshot correctly 1`] = `
 
 exports[`Notification renders the UI snapshot correctly 2`] = `
 <aside
-  className="css-0"
+  className="css-1xdhyk6"
   data-type="announcement"
   id="notificationID2"
 >
@@ -74,15 +74,15 @@ exports[`Notification renders the UI snapshot correctly 2`] = `
     className="css-0"
   >
     <header
-      className="css-0"
+      className="css-1xdhyk6"
     >
       <svg
-        aria-hidden={false}
-        className="chakra-icon css-onkibi"
+        aria-hidden={true}
+        className="chakra-icon css-u7u798"
         focusable={false}
         id="notificationID2-notification-icon"
         role="img"
-        title="speaker_notes icon"
+        title="Notification announcement icon"
         viewBox="0 0 24 24"
       >
         <g
@@ -109,14 +109,14 @@ exports[`Notification renders the UI snapshot correctly 2`] = `
         </g>
       </svg>
       <h4
-        className="chakra-heading css-0"
+        className="chakra-heading css-1xdhyk6"
         id="notificationID2-heading"
       >
         Notification Heading
       </h4>
     </header>
     <div
-      className="css-0"
+      className="css-1xdhyk6"
     >
       <div
         className="css-0"
@@ -130,7 +130,7 @@ exports[`Notification renders the UI snapshot correctly 2`] = `
 
 exports[`Notification renders the UI snapshot correctly 3`] = `
 <aside
-  className="css-0"
+  className="css-1xdhyk6"
   data-type="warning"
   id="notificationID3"
 >
@@ -138,15 +138,15 @@ exports[`Notification renders the UI snapshot correctly 3`] = `
     className="css-0"
   >
     <header
-      className="css-0"
+      className="css-1xdhyk6"
     >
       <svg
-        aria-hidden={false}
-        className="chakra-icon css-onkibi"
+        aria-hidden={true}
+        className="chakra-icon css-zzgjc6"
         focusable={false}
         id="notificationID3-notification-icon"
         role="img"
-        title="error_filled icon"
+        title="Notification warning icon"
         viewBox="0 0 24 24"
       >
         <g
@@ -173,14 +173,14 @@ exports[`Notification renders the UI snapshot correctly 3`] = `
         </g>
       </svg>
       <h4
-        className="chakra-heading css-0"
+        className="chakra-heading css-1xdhyk6"
         id="notificationID3-heading"
       >
         Notification Heading
       </h4>
     </header>
     <div
-      className="css-0"
+      className="css-1xdhyk6"
     >
       <div
         className="css-0"
@@ -194,7 +194,7 @@ exports[`Notification renders the UI snapshot correctly 3`] = `
 
 exports[`Notification renders the UI snapshot correctly 4`] = `
 <aside
-  className="css-0"
+  className="css-1xdhyk6"
   data-type="standard"
   id="notificationID4"
 >
@@ -202,15 +202,15 @@ exports[`Notification renders the UI snapshot correctly 4`] = `
     className="css-0"
   >
     <div
-      className="css-0"
+      className="css-1xdhyk6"
     >
       <svg
-        aria-hidden={false}
-        className="chakra-icon css-onkibi"
+        aria-hidden={true}
+        className="chakra-icon css-q3eg3a"
         focusable={false}
         id="notificationID4-notification-icon"
         role="img"
-        title="alert_notification_important icon"
+        title="Notification standard icon"
         viewBox="0 0 24 24"
       >
         <g
@@ -248,7 +248,7 @@ exports[`Notification renders the UI snapshot correctly 4`] = `
 
 exports[`Notification renders the UI snapshot correctly 5`] = `
 <aside
-  className="css-0"
+  className="css-1xdhyk6"
   data-type="standard"
   id="notificationID5"
 >
@@ -256,17 +256,17 @@ exports[`Notification renders the UI snapshot correctly 5`] = `
     className="css-0"
   >
     <header
-      className="css-0"
+      className="css-1xdhyk6"
     >
       <h4
-        className="chakra-heading css-0"
+        className="chakra-heading css-1xdhyk6"
         id="notificationID5-heading"
       >
         Notification Heading
       </h4>
     </header>
     <div
-      className="css-0"
+      className="css-1xdhyk6"
     >
       <div
         className="css-0"
@@ -280,7 +280,7 @@ exports[`Notification renders the UI snapshot correctly 5`] = `
 
 exports[`Notification renders the UI snapshot correctly 6`] = `
 <aside
-  className="css-0"
+  className="css-1xdhyk6"
   data-type="standard"
   id="notificationID6"
 >
@@ -288,7 +288,231 @@ exports[`Notification renders the UI snapshot correctly 6`] = `
     className="css-0"
   >
     <div
-      className="css-0"
+      className="css-1xdhyk6"
+    >
+      <div
+        className="css-0"
+      >
+        Notification content.
+      </div>
+    </div>
+  </div>
+</aside>
+`;
+
+exports[`Notification renders the UI snapshot correctly 7`] = `
+<aside
+  className="css-1xdhyk6"
+  data-type="standard"
+  id="notificationID7"
+>
+  <div
+    className="css-0"
+  >
+    <div
+      className="css-1xdhyk6"
+    >
+      <svg
+        aria-hidden={true}
+        className="chakra-icon css-q3eg3a"
+        focusable={false}
+        id="notificationID7-notification-icon"
+        role="img"
+        title="Notification standard icon"
+        viewBox="0 0 24 24"
+      >
+        <g
+          stroke="currentColor"
+          strokeWidth="1.5"
+        >
+          <path
+            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+            fill="none"
+            strokeLinecap="round"
+          />
+          <path
+            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+            fill="currentColor"
+            strokeLinecap="round"
+          />
+          <circle
+            cx="12"
+            cy="12"
+            fill="none"
+            r="11.25"
+            strokeMiterlimit="10"
+          />
+        </g>
+      </svg>
+      <div
+        className="css-0"
+      >
+        Notification content.
+      </div>
+    </div>
+  </div>
+  <button
+    aria-label="Close the notification"
+    className="chakra-button css-1xdhyk6"
+    data-testid="button"
+    id="notificationID7-notification-dismissible-button"
+    onClick={[Function]}
+    type="button"
+  >
+    <svg
+      aria-hidden={true}
+      className="chakra-icon css-1grhd2q"
+      focusable={false}
+      id="notificationID7-dismissible-notification-icon"
+      role="img"
+      title="Notification close icon"
+      viewBox="0 0 24 24"
+    >
+      <g
+        stroke="currentColor"
+        strokeWidth="1.5"
+      >
+        <path
+          d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+          fill="none"
+          strokeLinecap="round"
+        />
+        <path
+          d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+          fill="currentColor"
+          strokeLinecap="round"
+        />
+        <circle
+          cx="12"
+          cy="12"
+          fill="none"
+          r="11.25"
+          strokeMiterlimit="10"
+        />
+      </g>
+    </svg>
+  </button>
+</aside>
+`;
+
+exports[`Notification renders the UI snapshot correctly 8`] = `
+<aside
+  className="css-kle7zy"
+  data-type="standard"
+  id="chakra"
+>
+  <div
+    className="css-0"
+  >
+    <header
+      className="css-1xdhyk6"
+    >
+      <svg
+        aria-hidden={true}
+        className="chakra-icon css-q3eg3a"
+        focusable={false}
+        id="chakra-notification-icon"
+        role="img"
+        title="Notification standard icon"
+        viewBox="0 0 24 24"
+      >
+        <g
+          stroke="currentColor"
+          strokeWidth="1.5"
+        >
+          <path
+            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+            fill="none"
+            strokeLinecap="round"
+          />
+          <path
+            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+            fill="currentColor"
+            strokeLinecap="round"
+          />
+          <circle
+            cx="12"
+            cy="12"
+            fill="none"
+            r="11.25"
+            strokeMiterlimit="10"
+          />
+        </g>
+      </svg>
+      <h4
+        className="chakra-heading css-1xdhyk6"
+        id="chakra-heading"
+      >
+        Notification Heading
+      </h4>
+    </header>
+    <div
+      className="css-1xdhyk6"
+    >
+      <div
+        className="css-0"
+      >
+        Notification content.
+      </div>
+    </div>
+  </div>
+</aside>
+`;
+
+exports[`Notification renders the UI snapshot correctly 9`] = `
+<aside
+  className="css-1xdhyk6"
+  data-testid="props"
+  data-type="standard"
+  id="props"
+>
+  <div
+    className="css-0"
+  >
+    <header
+      className="css-1xdhyk6"
+    >
+      <svg
+        aria-hidden={true}
+        className="chakra-icon css-q3eg3a"
+        focusable={false}
+        id="props-notification-icon"
+        role="img"
+        title="Notification standard icon"
+        viewBox="0 0 24 24"
+      >
+        <g
+          stroke="currentColor"
+          strokeWidth="1.5"
+        >
+          <path
+            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+            fill="none"
+            strokeLinecap="round"
+          />
+          <path
+            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+            fill="currentColor"
+            strokeLinecap="round"
+          />
+          <circle
+            cx="12"
+            cy="12"
+            fill="none"
+            r="11.25"
+            strokeMiterlimit="10"
+          />
+        </g>
+      </svg>
+      <h4
+        className="chakra-heading css-1xdhyk6"
+        id="props-heading"
+      >
+        Notification Heading
+      </h4>
+    </header>
+    <div
+      className="css-1xdhyk6"
     >
       <div
         className="css-0"

package/src/components/Pagination/Pagination.stories.mdx

@@ -1,3 +1,5 @@
+import { useState } from "react";
+import { VStack } from "@chakra-ui/react";
 import {
   ArgsTable,
   Canvas,
@@ -8,9 +10,13 @@ import {
 import { withDesign } from "storybook-addon-designs";
 import { withQuery } from "@storybook/addon-queryparams";
 
+import Button from "../Button/Button";
+import DSProvider from "../../theme/provider";
 import Pagination from "./Pagination";
-import * as stories from "./Pagination.stories.tsx";
 import { getCategory } from "../../utils/componentCategories";
+import { getStorybookHrefProps } from "../../utils/utils";
+
+export const hrefProps = getStorybookHrefProps(10);
 
 <Meta
   title={getCategory("Pagination")}
@@ -25,6 +31,7 @@ import { getCategory } from "../../utils/componentCategories";
   }}
   argTypes={{
     className: { control: false },
+    currentPage: { control: false },
     getPageHref: { control: false },
     id: { control: false },
     initialPage: { table: { defaultValue: { summary: 1 } } },
@@ -37,7 +44,16 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.10`   |
-| Latest            | `0.25.10`  |
+| Latest            | `0.26.0`   |
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Accessibility](#accessibility)
+- [Pagination with URL Updates](#pagination-with-url-updates)
+- [Pagination with Unchanging URL](#pagination-with-unchanging-url)
+
+## Overview
 
 <Description of={Pagination} />
 
@@ -45,7 +61,18 @@ The `Pagination` component helps navigate between pages of a multi-page
 application. It is commonly used on a search results page. Update the `pageCount`
 prop in the Controls to explore this component with many or few pages.
 
-Pagination uses anchor tags because it is navigating between URLs.
+## Accessibility
+
+Internally, the `Pagination` component is implemented with a `<nav>` element with
+an `aria-label` attribute of `"Pagination"` and an unordered `<ul>` element. This
+component uses anchor `<a>` tags because it is navigating between URLs. In the
+"unchanging URL" variation, each anchor tag has an `href` attribute with a value
+of `"#"`, because the URL is not changing.
+
+Resources:
+
+- [W3C Design System Pagination](https://design-system.w3.org/components/pagination.html)
+- [a11ymatters Accessible Pagination](https://www.a11ymatters.com/pattern/pagination/)
 
 ## Pagination with URL Updates
 
@@ -73,14 +100,13 @@ const getPageHref = (selectedPage: number) => {
     name="Pagination with URL Updates"
     args={{
       className: undefined,
-      getPageHref: undefined,
+      getPageHref: hrefProps.getPageHref,
       id: "pagination-id",
-      initialPage: 1,
-      onPageChange: undefined,
+      initialPage: hrefProps.computedCurrentPage || 1,
       pageCount: 10,
     }}
   >
-    {(args) => stories.PaginationGetPageHref(args)}
+    {(args) => <Pagination {...args} onPageChange={undefined} />}
   </Story>
 </Canvas>
 
@@ -93,14 +119,14 @@ function passed as a prop and that the URL is updated whenever a page is
 changed. However, the optional `onPageChange` prop is available in case URL
 updating is not desired.
 
-In the following example, the `onPageChange` function gets the current page as
+In the following example, the `onPageChange` function gets the selected page as
 its only function argument. This is computed internally in the `Pagination`
 component through its own state.
 
 ```tsx
 // Example in a search results page.
-const onPageChange = (currentPage: number) => {
-  console.log(`Current page: ${currentPage}`);
+const onPageChange = (selectedPage: number) => {
+  console.log(`Current page: ${selectedPage}`);
   // Do what you need to with the `currentPage` value.
 };
 ```
@@ -110,13 +136,50 @@ const onPageChange = (currentPage: number) => {
     name="Pagination with Unchanging URL"
     args={{
       className: undefined,
-      getPageHref: undefined,
       id: "pagination-id-2",
       initialPage: 7,
-      onPageChange: undefined,
+      onPageChange: (selectedPage) => {
+        console.log(`Current page: ${selectedPage}`);
+      },
       pageCount: 100,
     }}
   >
-    {(args) => stories.PaginationOnPageChange(args)}
+    {(args) => <Pagination {...args} getPageHref={undefined} />}
   </Story>
 </Canvas>
+
+### Forcing a Page Change Programmatically
+
+There may be circumstances when you want to programmatically force the page
+number to change without the user explicitly requesting it (for example, if
+you want a user to be brought back to page 1 after entering a new search term).
+You can use the `currentPage` prop to do this. Note, the `currentPage` prop can
+only be used with the client-side, unchanging URL version of the `Pagination`
+component, and in combination with the `onPageChange` function.
+
+The following example shows that the user can be brought to page 1 without clicking
+on the `Pagination` component.
+
+export function CurrentPagePaginationExample() {
+  const [page, setPage] = useState(1);
+  const handleClick = () => setPage(1);
+  const handleSelection = (selectedPage) => setPage(selectedPage);
+  return (
+    <VStack align="start" spacing={6}>
+      <Pagination
+        pageCount={10}
+        currentPage={page}
+        onPageChange={(selectedPage) => handleSelection(selectedPage)}
+      />
+      <Button type="button" buttonType="primary" onClick={handleClick}>
+        Go to Page 1
+      </Button>
+    </VStack>
+  );
+}
+
+<Canvas>
+  <DSProvider>
+    <CurrentPagePaginationExample />
+  </DSProvider>
+</Canvas>