@nypl/design-system-react-components 0.25.12 → 0.26.1

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,11 +10,11 @@ exports[`Notification renders the UI snapshot correctly 1`] = `
     className="css-0"
   >
     <header
-      className="css-0"
+      className="css-1xdhyk6"
     >
       <svg
         aria-hidden={true}
-        className="chakra-icon css-onkibi"
+        className="chakra-icon css-q3eg3a"
         focusable={false}
         id="notificationID1-notification-icon"
         role="img"
@@ -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,11 +74,11 @@ exports[`Notification renders the UI snapshot correctly 2`] = `
     className="css-0"
   >
     <header
-      className="css-0"
+      className="css-1xdhyk6"
     >
       <svg
         aria-hidden={true}
-        className="chakra-icon css-onkibi"
+        className="chakra-icon css-u7u798"
         focusable={false}
         id="notificationID2-notification-icon"
         role="img"
@@ -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,11 +138,11 @@ exports[`Notification renders the UI snapshot correctly 3`] = `
     className="css-0"
   >
     <header
-      className="css-0"
+      className="css-1xdhyk6"
     >
       <svg
         aria-hidden={true}
-        className="chakra-icon css-onkibi"
+        className="chakra-icon css-zzgjc6"
         focusable={false}
         id="notificationID3-notification-icon"
         role="img"
@@ -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,11 +202,11 @@ exports[`Notification renders the UI snapshot correctly 4`] = `
     className="css-0"
   >
     <div
-      className="css-0"
+      className="css-1xdhyk6"
     >
       <svg
         aria-hidden={true}
-        className="chakra-icon css-onkibi"
+        className="chakra-icon css-q3eg3a"
         focusable={false}
         id="notificationID4-notification-icon"
         role="img"
@@ -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,7 @@ exports[`Notification renders the UI snapshot correctly 6`] = `
     className="css-0"
   >
     <div
-      className="css-0"
+      className="css-1xdhyk6"
     >
       <div
         className="css-0"
@@ -302,7 +302,7 @@ exports[`Notification renders the UI snapshot correctly 6`] = `
 
 exports[`Notification renders the UI snapshot correctly 7`] = `
 <aside
-  className="css-0"
+  className="css-1xdhyk6"
   data-type="standard"
   id="notificationID7"
 >
@@ -310,11 +310,11 @@ exports[`Notification renders the UI snapshot correctly 7`] = `
     className="css-0"
   >
     <div
-      className="css-0"
+      className="css-1xdhyk6"
     >
       <svg
         aria-hidden={true}
-        className="chakra-icon css-onkibi"
+        className="chakra-icon css-q3eg3a"
         focusable={false}
         id="notificationID7-notification-icon"
         role="img"
@@ -353,7 +353,7 @@ exports[`Notification renders the UI snapshot correctly 7`] = `
   </div>
   <button
     aria-label="Close the notification"
-    className="chakra-button css-0"
+    className="chakra-button css-1xdhyk6"
     data-testid="button"
     id="notificationID7-notification-dismissible-button"
     onClick={[Function]}
@@ -361,7 +361,7 @@ exports[`Notification renders the UI snapshot correctly 7`] = `
   >
     <svg
       aria-hidden={true}
-      className="chakra-icon css-onkibi"
+      className="chakra-icon css-1grhd2q"
       focusable={false}
       id="notificationID7-dismissible-notification-icon"
       role="img"
@@ -394,3 +394,132 @@ exports[`Notification renders the UI snapshot correctly 7`] = `
   </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"
+      >
+        Notification content.
+      </div>
+    </div>
+  </div>
+</aside>
+`;

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

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { VStack } from "@chakra-ui/react";
 import {
   ArgsTable,
   Canvas,
@@ -43,7 +44,16 @@ export const hrefProps = getStorybookHrefProps(10);
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.10`   |
-| Latest            | `0.25.12`  |
+| 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} />
 
@@ -51,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
 
@@ -85,7 +106,7 @@ const getPageHref = (selectedPage: number) => {
       pageCount: 10,
     }}
   >
-    {(args) => <Pagination {...args} />}
+    {(args) => <Pagination {...args} onPageChange={undefined} />}
   </Story>
 </Canvas>
 
@@ -123,7 +144,7 @@ const onPageChange = (selectedPage: number) => {
       pageCount: 100,
     }}
   >
-    {(args) => <Pagination {...args} />}
+    {(args) => <Pagination {...args} getPageHref={undefined} />}
   </Story>
 </Canvas>
 
@@ -144,7 +165,7 @@ export function CurrentPagePaginationExample() {
   const handleClick = () => setPage(1);
   const handleSelection = (selectedPage) => setPage(selectedPage);
   return (
-    <>
+    <VStack align="start" spacing={6}>
       <Pagination
         pageCount={10}
         currentPage={page}
@@ -153,7 +174,7 @@ export function CurrentPagePaginationExample() {
       <Button type="button" buttonType="primary" onClick={handleClick}>
         Go to Page 1
       </Button>
-    </>
+    </VStack>
   );
 }
 

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

@@ -197,14 +197,64 @@ describe("Pagination", () => {
           />
         )
         .toJSON();
+      const withChakraProps = renderer
+        .create(
+          <Pagination
+            id="chakra"
+            pageCount={10}
+            initialPage={1}
+            getPageHref={getPageHref}
+            p="20px"
+            color="ui.error.primary"
+          />
+        )
+        .toJSON();
+      const withOtherProps = renderer
+        .create(
+          <Pagination
+            id="props"
+            pageCount={10}
+            initialPage={1}
+            getPageHref={getPageHref}
+            data-testid="props"
+          />
+        )
+        .toJSON();
 
       expect(firstPage).toMatchSnapshot();
       expect(lastPage).toMatchSnapshot();
       expect(middlePage).toMatchSnapshot();
+      expect(withChakraProps).toMatchSnapshot();
+      expect(withOtherProps).toMatchSnapshot();
     });
   });
 
   describe("Behavior", () => {
+    it("navigates to the appropriate page when the Next or Previous links are clicked", () => {
+      const onPageChange = (page: number) => (currentPage = page);
+      let currentPage = 3;
+
+      render(
+        <Pagination
+          pageCount={5}
+          initialPage={currentPage}
+          onPageChange={onPageChange}
+        />
+      );
+
+      let links = screen.getAllByRole("link");
+
+      // Previous link
+      userEvent.click(links[0]);
+      expect(currentPage).toEqual(2);
+
+      links = screen.getAllByRole("link");
+
+      // Next link
+      userEvent.click(links[links.length - 1]);
+      expect(currentPage).toEqual(3);
+    });
+
     it("updates the links href value when getPageHref is used", () => {
       const getPageHref = (page: number) => `?page=${page}`;
       render(
@@ -348,7 +398,9 @@ describe("Pagination", () => {
         />
       );
       expect(warn).toHaveBeenCalledWith(
-        "NYPL Reservoir Pagination: Props for both `getPageHref` and `onPageChange` are passed. Will default to using `getPageHref`."
+        "NYPL Reservoir Pagination: Props for both `getPageHref` and " +
+          "`onPageChange` are passed. The component will default to using " +
+          "`getPageHref`."
       );
     });
 
@@ -359,7 +411,8 @@ describe("Pagination", () => {
         <Pagination pageCount={10} currentPage={2} getPageHref={getPageHref} />
       );
       expect(warn).toHaveBeenCalledWith(
-        "NYPL Reservoir Pagination: The `currentPage` prop does not work with the `getPageHref` prop. Use `currentPage` with `onPageChange` instead."
+        "NYPL Reservoir Pagination: The `currentPage` prop does not work with " +
+          "the `getPageHref` prop. Use `currentPage` with `onPageChange` instead."
       );
     });
   });

package/src/components/Pagination/Pagination.tsx

@@ -1,12 +1,10 @@
+import { Box, chakra, useMultiStyleConfig } from "@chakra-ui/react";
 import React, { useState, useRef } from "react";
-import { Box, useMultiStyleConfig } from "@chakra-ui/react";
 
 import Link from "../Link/Link";
 import List from "../List/List";
 import { ListTypes } from "../List/ListTypes";
 import { range } from "../../utils/utils";
-import generateUUID from "../../helpers/generateUUID";
-
 export interface PaginationProps {
   /** Additional className. */
   className?: string;
@@ -32,15 +30,16 @@ export interface PaginationProps {
 /**
  * A component that provides a navigational list of page items.
  */
-const Pagination: React.FC<PaginationProps> = (props: PaginationProps) => {
+export const Pagination = chakra((props: PaginationProps) => {
   const {
     className,
     currentPage,
     getPageHref,
-    id = generateUUID(),
+    id,
     initialPage = 1,
     onPageChange,
     pageCount,
+    ...rest
   } = props;
   const refCurrentPage = useRef(currentPage);
   const [selectedPage, setSelectedPage] = useState<number>(initialPage);
@@ -64,13 +63,16 @@ const Pagination: React.FC<PaginationProps> = (props: PaginationProps) => {
   }
   if (getPageHref && onPageChange) {
     console.warn(
-      "NYPL Reservoir Pagination: Props for both `getPageHref` and `onPageChange` are passed. Will default to using `getPageHref`."
+      "NYPL Reservoir Pagination: Props for both `getPageHref` and " +
+        "`onPageChange` are passed. The component will default to using " +
+        "`getPageHref`."
     );
   }
 
   if (getPageHref && currentPage) {
     console.warn(
-      "NYPL Reservoir Pagination: The `currentPage` prop does not work with the `getPageHref` prop. Use `currentPage` with `onPageChange` instead."
+      "NYPL Reservoir Pagination: The `currentPage` prop does not work with " +
+        "the `getPageHref` prop. Use `currentPage` with `onPageChange` instead."
     );
   }
 
@@ -96,7 +98,7 @@ const Pagination: React.FC<PaginationProps> = (props: PaginationProps) => {
   // Select the next page.
   const nextPage = (e: Event) => {
     if (selectedPage < pageCount) {
-      handlePageClick(e, previousPageNumber);
+      handlePageClick(e, nextPageNumber);
     }
   };
   /**
@@ -248,6 +250,7 @@ const Pagination: React.FC<PaginationProps> = (props: PaginationProps) => {
       role="navigation"
       className={className}
       __css={styles}
+      {...rest}
     >
       <List type={ListTypes.Unordered} inline noStyling id={`${id}-list`}>
         {previousLiLink}
@@ -256,6 +259,6 @@ const Pagination: React.FC<PaginationProps> = (props: PaginationProps) => {
       </List>
     </Box>
   );
-};
+});
 
 export default Pagination;