@nypl/design-system-react-components 1.0.0 → 1.0.3-beta

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

@@ -1,525 +0,0 @@
-// 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

@@ -1,184 +0,0 @@
-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 type="button" onClick={handleClick}>
-        Go to Page 1
-      </Button>
-    </VStack>
-  );
-}
-
-<Canvas>
-  <DSProvider>
-    <CurrentPagePaginationExample />
-  </DSProvider>
-</Canvas>