@nypl/design-system-react-components 1.0.1 → 1.0.2

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

@@ -0,0 +1,525 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Notification renders the UI snapshot correctly 1`] = `
+<aside
+  className="css-1xdhyk6"
+  data-type="standard"
+  id="notificationID1"
+>
+  <div
+    className="css-0"
+  >
+    <header
+      className="css-1xdhyk6"
+    >
+      <svg
+        aria-hidden={true}
+        className="chakra-icon css-q3eg3a"
+        focusable={false}
+        id="notificationID1-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="notificationID1-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 2`] = `
+<aside
+  className="css-1xdhyk6"
+  data-type="announcement"
+  id="notificationID2"
+>
+  <div
+    className="css-0"
+  >
+    <header
+      className="css-1xdhyk6"
+    >
+      <svg
+        aria-hidden={true}
+        className="chakra-icon css-u7u798"
+        focusable={false}
+        id="notificationID2-notification-icon"
+        role="img"
+        title="Notification announcement 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="notificationID2-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 3`] = `
+<aside
+  className="css-1xdhyk6"
+  data-type="warning"
+  id="notificationID3"
+>
+  <div
+    className="css-0"
+  >
+    <header
+      className="css-1xdhyk6"
+    >
+      <svg
+        aria-hidden={true}
+        className="chakra-icon css-zzgjc6"
+        focusable={false}
+        id="notificationID3-notification-icon"
+        role="img"
+        title="Notification warning 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="notificationID3-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 4`] = `
+<aside
+  className="css-1xdhyk6"
+  data-type="standard"
+  id="notificationID4"
+>
+  <div
+    className="css-0"
+  >
+    <div
+      className="css-1xdhyk6"
+    >
+      <svg
+        aria-hidden={true}
+        className="chakra-icon css-q3eg3a"
+        focusable={false}
+        id="notificationID4-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>
+</aside>
+`;
+
+exports[`Notification renders the UI snapshot correctly 5`] = `
+<aside
+  className="css-1xdhyk6"
+  data-type="standard"
+  id="notificationID5"
+>
+  <div
+    className="css-0"
+  >
+    <header
+      className="css-1xdhyk6"
+    >
+      <h4
+        className="chakra-heading css-1xdhyk6"
+        id="notificationID5-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 6`] = `
+<aside
+  className="css-1xdhyk6"
+  data-type="standard"
+  id="notificationID6"
+>
+  <div
+    className="css-0"
+  >
+    <div
+      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"
+      >
+        Notification content.
+      </div>
+    </div>
+  </div>
+</aside>
+`;

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

@@ -0,0 +1,184 @@
+import { useState } from "react";
+import { VStack } from "@chakra-ui/react";
+import {
+  ArgsTable,
+  Canvas,
+  Description,
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
+import { withDesign } from "storybook-addon-designs";
+
+import Button from "../Button/Button";
+import DSProvider from "../../theme/provider";
+import Pagination from "./Pagination";
+import { getCategory } from "../../utils/componentCategories";
+import { getStorybookHrefProps } from "../../utils/utils";
+
+export const hrefProps = getStorybookHrefProps(10);
+
+<Meta
+  title={getCategory("Pagination")}
+  component={Pagination}
+  decorators={[withDesign]}
+  parameters={{
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=17226%3A932",
+    },
+    jest: ["Pagination.test.tsx"],
+  }}
+  argTypes={{
+    className: { control: false },
+    currentPage: { control: false },
+    getPageHref: { control: false },
+    id: { control: false },
+    initialPage: { table: { defaultValue: { summary: 1 } } },
+    onPageChange: { control: false },
+  }}
+/>
+
+# Pagination
+
+| Component Version | DS Version |
+| ----------------- | ---------- |
+| Added             | `0.0.10`   |
+| Latest            | `0.28.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} />
+
+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.
+
+## 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
+
+In order to update the URL with a query parameter, the parent component must
+declare and pass a `getPageHref` function to the `Pagination` component. This
+function takes a `selectedPage` number argument for the selected page and it
+should return a string with the desired URL that the pagination links should go
+to. Note that this will refresh the browser on every click.
+
+In the following example, the `getPageHref` function will compute a new URL that
+has `&page=` as a URL query. In your own application this query parameter can be
+named anything but you have to pick up the value in the wrapper component.
+
+```tsx
+// Example in a search results page.
+const getPageHref = (selectedPage: number) => {
+  // This should be updated for your router system, if any, including the
+  // base or origin URL.
+  return `${location.origin}?q=celeste&page=${selectedPage}`;
+};
+```
+
+<Canvas withToolbar>
+  <Story
+    name="Pagination with URL Updates"
+    args={{
+      className: undefined,
+      getPageHref: hrefProps.getPageHref,
+      id: "pagination-id",
+      initialPage: hrefProps.computedCurrentPage || 1,
+      pageCount: 10,
+    }}
+  >
+    {(args) => <Pagination {...args} onPageChange={undefined} />}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Pagination with URL Updates" />
+
+## Pagination with Unchanging URL
+
+It is preferred to use the `Pagination` component with the `getPageHref`
+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 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 = (selectedPage: number) => {
+  console.log(`Current page: ${selectedPage}`);
+  // Do what you need to with the `currentPage` value.
+};
+```
+
+<Canvas withToolbar>
+  <Story
+    name="Pagination with Unchanging URL"
+    args={{
+      className: undefined,
+      id: "pagination-id-2",
+      initialPage: 7,
+      onPageChange: (selectedPage) => {
+        console.log(`Current page: ${selectedPage}`);
+      },
+      pageCount: 100,
+    }}
+  >
+    {(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 id="go-to-btn" type="button" onClick={handleClick}>
+        Go to Page 1
+      </Button>
+    </VStack>
+  );
+}
+
+<Canvas>
+  <DSProvider>
+    <CurrentPagePaginationExample />
+  </DSProvider>
+</Canvas>