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

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

@@ -1,142 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Logo renders the UI snapshot correctly 1`] = `
-<svg
-  aria-hidden={false}
-  className="chakra-icon css-1grhd2q"
-  focusable={false}
-  id="test-logo"
-  role="img"
-  title="nyplFullBlack logo"
-  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>
-`;
-
-exports[`Logo renders the UI snapshot correctly 2`] = `
-<svg
-  aria-hidden={false}
-  className="chakra-icon css-1grhd2q"
-  focusable={false}
-  id="test-logo-size"
-  role="img"
-  title="nyplFullBlack logo"
-  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>
-`;
-
-exports[`Logo renders the UI snapshot correctly 3`] = `
-<svg
-  aria-hidden={false}
-  className="chakra-icon css-1ayys74"
-  focusable={false}
-  id="chakra"
-  role="img"
-  title="nyplFullBlack logo"
-  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>
-`;
-
-exports[`Logo renders the UI snapshot correctly 4`] = `
-<svg
-  aria-hidden={false}
-  className="chakra-icon css-1grhd2q"
-  data-testid="props"
-  focusable={false}
-  id="props"
-  role="img"
-  title="nyplFullBlack logo"
-  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>
-`;

package/src/components/Modal/Modal.stories.mdx

@@ -1,301 +0,0 @@
-import {
-  ArgsTable,
-  Canvas,
-  Description,
-  Meta,
-  Story,
-} from "@storybook/addon-docs";
-import { useState } from "react";
-
-import Button from "../Button/Button";
-import ButtonGroup from "../ButtonGroup/ButtonGroup";
-import Heading from "../Heading/Heading";
-import Link from "../Link/Link";
-import { ModalTrigger, useModal } from "./Modal";
-import { getCategory } from "../../utils/componentCategories";
-
-<Meta
-  title={getCategory("Modal")}
-  component={Modal}
-  parameters={{
-    jest: ["Modal.test.tsx"],
-  }}
-/>
-
-# Modal
-
-| Component Version | DS Version |
-| ----------------- | ---------- |
-| Added             | `0.1.0`    |
-| Latest            | `0.27.0`   |
-
-## Table of Contents
-
-- [Overview](#overview)
-- [Accessibility](#accessibility)
-- [ModalTrigger](#modaltrigger)
-- [ModalTrigger Component Props](#modaltrigger-component-props)
-- [useModal](#usemodal)
-- [useModal Component Props](#usemodal-component-props)
-- [Content Window Scrolling](#content-window-scrolling)
-
-## Overview
-
-_Note: This component is going through an accessibility review and is not
-recommended for use until it is updated._
-
-## Accessibility
-
-TBD
-
-## ModalTrigger
-
-<Description of={ModalTrigger} />
-
-```jsx
-import { ModalTrigger } from "@nypl/design-system-react-components";
-
-//...
-<ModalTrigger
-  buttonText="Button Text"
-  id="modal-trigger"
-  modalProps={{
-    bodyContent: "body text",
-    closeButtonLabel: "Close Button",
-    headingText: "Modal Heading Text",
-    onClose: () => {
-      console.log("custom close");
-    },
-  }}
-/>;
-```
-
-## ModalTrigger Component Props
-
-<Canvas withToolbar>
-  <Story
-    name="ModalTrigger"
-    args={{
-      buttonText: "Button Text",
-      id: "modal-trigger",
-      modalProps: {
-        bodyContent: "body text",
-        closeButtonLabel: "Close Button",
-        headingText: "Modal Heading Text",
-        onClose: () => {
-          console.log("custom close");
-        },
-      },
-    }}
-  >
-    {(args) => <ModalTrigger {...args} />}
-  </Story>
-</Canvas>
-
-<ArgsTable story="ModalTrigger" />
-
-## useModal
-
-<Description of={useModal} />
-
-You can retrieve the DS `Modal` component and the `onOpen` and `onClose` function
-handlers when calling the `useModal` function. The `onOpen` function handler is
-used to open the `Modal` React component. This function can be passed to any
-number of elements that use the `onClick` attribute. The `onClose` function can
-be used on any element that uses the `onClick` attribute.
-
-**NOTE: in this case, the `buttonText` prop is not necessary since you have to
-create and render your own button.**
-
-```jsx
-import { useModal } from "@nypl/design-system-react-components";
-
-// ...
-export const ModalStory = (args) => {
-  const { onClose, onOpen, Modal } = useModal();
-  const modalProps = {
-    bodyContent: (
-      <>
-        <Button id="custom-close" onClick={onClose}>
-          Go back
-        </Button>
-        <p>This is the body content.</p>
-        <Button id="custom-close2" onClick={onClose}>
-          This is a custom close button.
-        </Button>
-      </>
-    ),
-    closeButtonLabel: "Close Button",
-    headingText: "Modal Heading Text",
-    onClose: () => {
-      console.log("custom close");
-      onClose();
-    },
-  };
-  return (
-    <>
-      <ButtonGroup>
-        <Button id="1" onClick={onOpen}>
-          Open Modal
-        </Button>
-        <Button buttonType="secondary" id="2" onClick={onOpen}>
-          I can open the modal, too
-        </Button>
-      </ButtonGroup>
-      <div onClick={onOpen}>
-        I'm just a div and shouldn't be used in production but this is just an
-        example
-      </div>
-      <Modal {...modalProps} />
-    </>
-  );
-};
-```
-
-export const ModalStory = (args) => {
-  const { onClose, onOpen, Modal } = useModal();
-  const modalProps = {
-    bodyContent: (
-      <>
-        <Button id="custom-close" onClick={onClose}>
-          Go back
-        </Button>
-        <p>This is the body content.</p>
-        <Button id="custom-close2" onClick={onClose}>
-          This is a custom close button.
-        </Button>
-      </>
-    ),
-    closeButtonLabel: "Close Button",
-    headingText: "Modal Heading Text",
-    onClose: () => {
-      console.log("custom close");
-      onClose();
-    },
-  };
-  return (
-    <>
-      <ButtonGroup>
-        <Button id="1" onClick={onOpen}>
-          Open Modal
-        </Button>
-        <Button buttonType="secondary" id="2" onClick={onOpen}>
-          I can open the modal, too
-        </Button>
-      </ButtonGroup>
-      <div onClick={onOpen}>
-        I'm just a div and shouldn't be used in production but this is just an
-        example
-      </div>
-      <Modal {...modalProps} />
-    </>
-  );
-};
-
-## useModal Component Props
-
-<Canvas withToolbar>
-  <Story name="Modal">
-    <ModalStory />
-  </Story>
-</Canvas>
-
-## Content Window Scrolling
-
-In either `Modal` pattern, the main content inside the `Modal` component will
-scroll while the `Modal`'s header and footer still stay static. Check the
-example below with a lot of content inside the `Modal`.
-
-<Canvas withToolbar>
-  <Story
-    name="Content Window Scrolling"
-    args={{
-      buttonText: "Button Text",
-      id: "modal-scrolling",
-      modalProps: {
-        bodyContent: (
-          <>
-            <Heading text="Content Title" />
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua.
-              Pellentesque massa placerat duis ultricies lacus sed turpis
-              tincidunt.
-              <Link href="http://nypl.org">Porttitor eget dolor</Link> morbi non
-              arcu risus quis varius. Faucibus in ornare quam viverra orci sagittis.
-            </p>
-            <p>
-              Nisl vel pretium lectus quam id leo in. Etiam dignissim diam quis
-              enim lobortis scelerisque fermentum. Diam maecenas sed enim ut sem
-              viverra. Diam quam nulla porttitor massa id neque. Sed faucibus
-              turpis in eu mi.
-            </p>
-            <p>
-              Ornare lectus sit amet est placerat in. Quis blandit turpis cursus
-              in. Aliquam ut porttitor leo a diam sollicitudin tempor id eu.
-              Pellentesque eu tincidunt tortor aliquam nulla facilisi cras
-              fermentum. Porttitor leo a diam sollicitudin tempor id eu nisl
-              nunc. Feugiat nisl pretium fusce id velit ut tortor. Porttitor leo
-              a diam sollicitudin tempor id eu nisl nunc.
-            </p>
-            <p>
-              Mauris nunc congue nisi vitae suscipit tellus mauris a diam. Purus
-              gravida quis blandit turpis cursus in hac. Morbi tempus iaculis
-              urna id volutpat. Lectus nulla at volutpat diam ut venenatis.
-              Donec ac odio tempor orci dapibus ultrices in iaculis. Dui vivamus
-              arcu felis bibendum ut tristique. Cras semper auctor neque vitae
-              tempus quam pellentesque. Placerat orci nulla pellentesque
-              dignissim enim sit amet. Feugiat pretium nibh ipsum consequat.
-              Placerat orci nulla pellentesque dignissim. Suspendisse faucibus
-              interdum posuere lorem. Nullam non nisi est sit. Turpis egestas
-              integer eget aliquet nibh praesent. Tortor at risus 'viverra
-              adipiscing at. Eu augue ut lectus arcu bibendum at varius vel'
-              pharetra.
-            </p>
-            <Heading text="Another Title" />
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua.
-              Pellentesque massa placerat duis ultricies lacus sed turpis
-              tincidunt.
-              <Link href="http://nypl.org">Porttitor eget dolor</Link> morbi non
-              arcu risus quis varius. Faucibus in ornare quam viverra orci sagittis.
-            </p>
-            <p>
-              Nisl vel pretium lectus quam id leo in. Etiam dignissim diam quis
-              enim lobortis scelerisque fermentum. Diam maecenas sed enim ut sem
-              viverra. Diam quam nulla porttitor massa id neque. Sed faucibus
-              turpis in eu mi.
-            </p>
-            <p>
-              Ornare lectus sit amet est placerat in. Quis blandit turpis cursus
-              in. Aliquam ut porttitor leo a diam sollicitudin tempor id eu.
-              Pellentesque eu tincidunt tortor aliquam nulla facilisi cras
-              fermentum. Porttitor leo a diam sollicitudin tempor id eu nisl
-              nunc. Feugiat nisl pretium fusce id velit ut tortor. Porttitor leo
-              a diam sollicitudin tempor id eu nisl nunc.
-            </p>
-            <p>
-              Mauris nunc congue nisi vitae suscipit tellus mauris a diam. Purus
-              gravida quis blandit turpis cursus in hac. Morbi tempus iaculis
-              urna id volutpat. Lectus nulla at volutpat diam ut venenatis.
-              Donec ac odio tempor orci dapibus ultrices in iaculis. Dui vivamus
-              arcu felis bibendum ut tristique. Cras semper auctor neque vitae
-              tempus quam pellentesque. Placerat orci nulla pellentesque
-              dignissim enim sit amet. Feugiat pretium nibh ipsum consequat.
-              Placerat orci nulla pellentesque dignissim. Suspendisse faucibus
-              interdum posuere lorem. Nullam non nisi est sit. Turpis egestas
-              integer eget aliquet nibh praesent. Tortor at risus 'viverra
-              adipiscing at. Eu augue ut lectus arcu bibendum at varius vel'
-              pharetra.
-            </p>
-          </>
-        ),
-        closeButtonLabel: "Close Button",
-        headingText: "Modal Heading Text",
-      },
-    }}
-  >
-    {(args) => <ModalTrigger {...args} />}
-  </Story>
-</Canvas>

package/src/components/Modal/Modal.test.tsx

@@ -1,157 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { renderHook } from "@testing-library/react-hooks";
-import { axe } from "jest-axe";
-import * as React from "react";
-import renderer from "react-test-renderer";
-
-import Button from "../Button/Button";
-import { ModalTrigger, useModal } from "./Modal";
-
-describe("Modal Accessibility", () => {
-  it("passes axe accessibility for ModalTrigger", async () => {
-    const { container } = render(
-      <ModalTrigger
-        buttonText="Button Text"
-        id="modal-trigger"
-        modalProps={{
-          bodyContent: "body text",
-          closeButtonLabel: "Close Button",
-          headingText: "Modal Heading Text",
-          onClose: () => {
-            console.log("custom close");
-          },
-        }}
-      />
-    );
-    expect(await axe(container)).toHaveNoViolations();
-  });
-
-  it("passes axe accessibility for useModal", async () => {
-    const { result } = renderHook(() => useModal());
-    const { onClose, onOpen, Modal } = result.current;
-    const modalProps = {
-      bodyContent: (
-        <>
-          <Button id="custom-close" onClick={onClose}>
-            Go back
-          </Button>
-          <p>This is the body content.</p>
-          <Button buttonType="noBrand" id="custom-close2" onClick={onClose}>
-            This is a custom close button.
-          </Button>
-        </>
-      ),
-      closeButtonLabel: "Close Button",
-      headingText: "Modal Heading Text",
-      onClose: () => {
-        console.log("custom close");
-        onClose();
-      },
-    };
-    const { container } = render(
-      <>
-        <Button id="1" onClick={onOpen} buttonType="noBrand">
-          Open Modal
-        </Button>
-        <Modal {...modalProps} />
-      </>
-    );
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});
-
-describe("ModalTrigger", () => {
-  const modalTrigger = (
-    <ModalTrigger
-      buttonText="Button Text"
-      id="modal-trigger"
-      modalProps={{
-        bodyContent: "body text",
-        closeButtonLabel: "Close Button",
-        headingText: "Modal Heading Text",
-        onClose: () => {
-          console.log("custom close");
-        },
-      }}
-    />
-  );
-
-  it("renders content when it is opened", () => {
-    render(modalTrigger);
-    const openButton = screen.getByText("Button Text");
-    const closeButton = screen.queryByText("Close Button");
-
-    expect(openButton).toBeInTheDocument();
-    expect(closeButton).not.toBeInTheDocument();
-    expect(screen.queryByText("Modal Heading Text")).not.toBeInTheDocument();
-
-    openButton.click();
-
-    expect(openButton).toBeInTheDocument();
-    expect(screen.queryByText("Close Button")).toBeInTheDocument();
-    expect(screen.queryByText("Modal Heading Text")).toBeInTheDocument();
-  });
-
-  it("renders the UI snapshot correctly", () => {
-    const basic = renderer.create(modalTrigger).toJSON();
-
-    expect(basic).toMatchSnapshot();
-  });
-});
-
-describe("useModal", () => {
-  const { result } = renderHook(() => useModal());
-  const { onClose, onOpen, Modal } = result.current;
-  const modalProps = {
-    bodyContent: (
-      <>
-        <Button id="custom-close" onClick={onClose}>
-          Go back
-        </Button>
-        <p>This is the body content.</p>
-        <Button id="custom-close2" onClick={onClose}>
-          This is a custom close button.
-        </Button>
-      </>
-    ),
-    closeButtonLabel: "Close Button",
-    headingText: "Modal Heading Text",
-    onClose: () => {
-      console.log("custom close");
-      onClose();
-    },
-  };
-  const useModalComponent = (
-    <>
-      <Button id="1" onClick={onOpen} buttonType="noBrand">
-        Open Modal
-      </Button>
-      <Modal {...modalProps} />
-    </>
-  );
-
-  it("renders content when it is opened", () => {
-    render(useModalComponent);
-    const openButton = screen.getByText("Open Modal");
-    const closeButton = screen.queryByText("This is a custom close button.");
-
-    expect(openButton).toBeInTheDocument();
-    expect(closeButton).not.toBeInTheDocument();
-    expect(screen.queryByText("Modal Heading Text")).not.toBeInTheDocument();
-
-    openButton.click();
-
-    // TODO: Fix this test
-    // expect(openButton).toBeInTheDocument();
-    // expect(
-    //   screen.queryByText("This is a custom close button.")
-    // ).toBeInTheDocument();
-    // expect(screen.queryByText("Modal Heading Text")).toBeInTheDocument();
-  });
-
-  it("renders the UI snapshot correctly", () => {
-    const basic = renderer.create(useModalComponent).toJSON();
-
-    expect(basic).toMatchSnapshot();
-  });
-});