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

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

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

@@ -0,0 +1,294 @@
+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`.
+
+export const scrollModalProps = {
+  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",
+};
+
+<Canvas withToolbar>
+  <Story name="Content Window Scrolling">
+    <ModalTrigger
+      buttonText="Button Text"
+      id="modal-scrolling"
+      modalProps={scrollModalProps}
+    />
+  </Story>
+</Canvas>

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

@@ -0,0 +1,157 @@
+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();
+  });
+});