@nypl/design-system-react-components 0.26.0 → 0.28.0

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

@@ -1,20 +1,157 @@
-import * as React from "react";
-import { render } from "@testing-library/react";
+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 Modal from "./Modal";
+import Button from "../Button/Button";
+import { ModalTrigger, useModal } from "./Modal";
 
 describe("Modal Accessibility", () => {
-  it("passes axe accessibility test", async () => {
-    const { container } = render(<Modal />);
+  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("Modal", () => {
-  it("modal applies 'no-scroll' class to body", () => {
-    const utils = render(<Modal />);
-    expect(utils.container.querySelector(".modal")).toBeInTheDocument();
-    expect(document.body.classList[0]).toEqual("no-scroll");
+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();
   });
 });

package/src/components/Modal/Modal.tsx

@@ -1,34 +1,154 @@
+import {
+  chakra,
+  Modal as ChakraModal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+  useDisclosure,
+} from "@chakra-ui/react";
 import * as React from "react";
 
-export interface ModalProps {
-  /** ClassName that appears in addition to "modal" */
-  className?: string;
+import Button from "../Button/Button";
+import ButtonGroup from "../ButtonGroup/ButtonGroup";
+import useWindowSize from "../../hooks/useWindowSize";
+
+interface BaseModalProps {
+  bodyContent?: string | JSX.Element;
+  closeButtonLabel?: string;
+  headingText?: string | JSX.Element;
   /** ID that other components can cross reference for accessibility purposes */
   id?: string;
+  isOpen?: boolean;
+  onClose?: () => void;
 }
 
-/** Full-screen modal that appears on top of the body of the page. */
-export default class Modal extends React.Component<ModalProps, any> {
-  componentDidMount() {
-    document.body.classList.add("no-scroll");
-  }
-
-  componentWillUnmount() {
-    document.body.classList.remove("no-scroll");
-  }
+export interface ModalProps {
+  buttonText?: string;
+  /** ID that other components can cross reference for accessibility purposes */
+  id?: string;
+  modalProps: BaseModalProps;
+}
 
-  render() {
-    const { id, className } = this.props;
+const BaseModal = chakra(
+  ({
+    bodyContent,
+    closeButtonLabel = "Close",
+    headingText,
+    id,
+    isOpen,
+    onClose,
+    ...rest
+  }: React.PropsWithChildren<BaseModalProps>) => {
+    // Based on --nypl-breakpoint-medium
+    const breakpointMedium = 600;
+    const defaultSize = "xl";
+    const fullSize = "full";
+    const [size, setSize] = React.useState<string>(defaultSize);
+    const windowDimensions = useWindowSize();
+    React.useEffect(() => {
+      if (windowDimensions.width <= breakpointMedium) {
+        setSize(fullSize);
+      } else {
+        setSize(defaultSize);
+      }
+    }, [windowDimensions.width]);
 
     return (
-      <div
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-        tabIndex={0}
-        className={`modal ${className}`}
+      <ChakraModal
         id={id}
+        isOpen={isOpen}
+        onClose={onClose}
+        scrollBehavior="inside"
+        size={size}
+        {...rest}
       >
-        {this.props.children}
-      </div>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>{headingText}</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>{bodyContent}</ModalBody>
+
+          <ModalFooter>
+            <ButtonGroup>
+              <Button id="modal-close-btn" onClick={onClose}>
+                {closeButtonLabel}
+              </Button>
+            </ButtonGroup>
+          </ModalFooter>
+        </ModalContent>
+      </ChakraModal>
+    );
+  }
+);
+
+/**
+ * The `ModalTrigger` component renders a button that you click to open the
+ * internal `Modal` component. Note that props to update the internal `Modal`
+ * component are passed through to the `modalProps` prop.
+ */
+export const ModalTrigger = chakra(
+  ({
+    buttonText,
+    id,
+    modalProps,
+    ...rest
+  }: React.PropsWithChildren<ModalProps>) => {
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    const finalOnCloseHandler = () => {
+      modalProps.onClose && modalProps.onClose();
+      onClose();
+    };
+    return (
+      <>
+        <Button id="modal-open-btn" onClick={onOpen}>
+          {buttonText}
+        </Button>
+
+        <BaseModal
+          bodyContent={modalProps.bodyContent}
+          closeButtonLabel={modalProps.closeButtonLabel}
+          headingText={modalProps.headingText}
+          id={id}
+          isOpen={isOpen}
+          onClose={finalOnCloseHandler}
+          {...rest}
+        />
+      </>
     );
   }
+);
+
+/**
+ * This hook function can be used to render the `Modal` component with a custom
+ * open button(s) and optional custom close button(s). You must render your own
+ * button and pass the appropriate `onOpen` and ` handler for the modal to open.
+ */
+export function useModal() {
+  const { isOpen, onClose, onOpen } = useDisclosure();
+  const Modal = chakra(
+    ({
+      bodyContent,
+      closeButtonLabel,
+      headingText,
+      id,
+      ...rest
+    }: React.PropsWithChildren<BaseModalProps>) => {
+      return (
+        <BaseModal
+          bodyContent={bodyContent}
+          closeButtonLabel={closeButtonLabel}
+          headingText={headingText}
+          id={id}
+          isOpen={isOpen}
+          onClose={onClose}
+          {...rest}
+        />
+      );
+    }
+  );
+
+  return { onClose, onOpen, Modal };
 }

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

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ModalTrigger renders the UI snapshot correctly 1`] = `
+<button
+  className="chakra-button css-1xdhyk6"
+  data-testid="button"
+  id="modal-open-btn"
+  onClick={[Function]}
+  type="button"
+>
+  Button Text
+</button>
+`;
+
+exports[`useModal renders the UI snapshot correctly 1`] = `
+<button
+  className="chakra-button css-1xdhyk6"
+  data-testid="button"
+  id="1"
+  onClick={[Function]}
+  type="button"
+>
+  Open Modal
+</button>
+`;

package/src/components/Notification/Notification.stories.mdx

@@ -8,18 +8,10 @@ import {
 import { withDesign } from "storybook-addon-designs";
 
 import Icon from "../Icons/Icon";
-import { IconColors, IconNames } from "../Icons/IconTypes";
 import Link from "../Link/Link";
 import Notification from "./Notification";
-import { NotificationTypes } from "./NotificationTypes";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
-import { getStorybookEnumValues } from "../../utils/utils";
-
-export const enumValues = getStorybookEnumValues(
-  NotificationTypes,
-  "NotificationTypes"
-);
 
 <Meta
   title={getCategory("Notification")}
@@ -47,9 +39,7 @@ export const enumValues = getStorybookEnumValues(
     },
     notificationContent: { control: false },
     notificationType: {
-      control: { type: "select" },
-      table: { defaultValue: { summary: "NotificationTypes.Standard" } },
-      options: enumValues.options,
+      table: { defaultValue: { summary: "standard" } },
     },
   }}
 />
@@ -59,7 +49,7 @@ export const enumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.23.2`   |
-| Latest            | `0.26.0`   |
+| Latest            | `0.28.0`   |
 
 ## Table of Contents
 
@@ -105,16 +95,13 @@ within a parent element.
           nisi erat porttitor ligula.
         </>
       ),
-      notificationType: "NotificationTypes.Standard",
+      notificationType: "standard",
       showIcon: true,
     }}
   >
     {(args) => (
       <div style={{ border: "1px solid #ccc" }}>
-        <Notification
-          {...args}
-          notificationType={enumValues.getValue(args.notificationType)}
-        />
+        <Notification {...args} />
       </div>
     )}
   </Story>
@@ -172,7 +159,7 @@ Resources:
 <Canvas>
   <DSProvider>
     <Notification
-      notificationType={NotificationTypes.Announcement}
+      notificationType="announcement"
       notificationHeading="Announcement Notification"
       notificationContent={
         <>
@@ -191,7 +178,7 @@ Resources:
 <Canvas>
   <DSProvider>
     <Notification
-      notificationType={NotificationTypes.Warning}
+      notificationType="warning"
       notificationHeading="Warning Notification"
       notificationContent={
         <>
@@ -229,7 +216,7 @@ Resources:
 <Canvas>
   <DSProvider>
     <Notification
-      notificationType={NotificationTypes.Announcement}
+      notificationType="announcement"
       notificationContent={
         <>
           This is an "announcement" Notification without a heading. Cras mattis
@@ -247,7 +234,7 @@ Resources:
 <Canvas>
   <DSProvider>
     <Notification
-      notificationType={NotificationTypes.Warning}
+      notificationType="warning"
       notificationContent={
         <>
           This is a "warning" Notification without a heading. Cras mattis
@@ -330,12 +317,7 @@ The default icon can be overridden by using the `icon` prop to pass a custom `Ic
 <Canvas>
   <Story name="Custom Icons">
     <Notification
-      icon={
-        <Icon
-          name={IconNames.Check}
-          color={IconColors.SectionResearchSecondary}
-        />
-      }
+      icon={<Icon name="check" color="section.research.secondary" />}
       notificationHeading="Custom Icon"
       notificationContent={
         <>
@@ -370,7 +352,7 @@ appears once.
           nascetur ridiculus mus.
         </>
       }
-      notificationType={NotificationTypes.Announcement}
+      notificationType="announcement"
     />
   </Story>
 </Canvas>

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

@@ -1,12 +1,10 @@
 import * as React from "react";
-import { render, screen } from "@testing-library/react";
+import { render, RenderResult, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
 import renderer from "react-test-renderer";
 
 import Notification from "./Notification";
-import { NotificationTypes } from "./NotificationTypes";
 import Icon from "../Icons/Icon";
-import { IconNames, IconColors, IconSizes } from "../Icons/IconTypes";
 
 describe("Notification Accessibility", () => {
   it("passes axe accessibility test with heading", async () => {
@@ -56,7 +54,7 @@ describe("Notification Accessibility", () => {
 });
 
 describe("Notification", () => {
-  let utils;
+  let utils: RenderResult;
   beforeEach(() => {
     utils = render(
       <Notification
@@ -107,9 +105,9 @@ describe("Notification", () => {
           <Icon
             id="custom-icon"
             className="custom-icon"
-            color={IconColors.BrandPrimary}
-            name={IconNames.Check}
-            size={IconSizes.Large}
+            color="brand.primary"
+            name="check"
+            size="large"
           />
         }
         id="notificationID"
@@ -130,7 +128,7 @@ describe("Notification", () => {
         id="notificationID"
         notificationContent={<>Notification content.</>}
         notificationHeading="Notification Heading"
-        notificationType={NotificationTypes.Announcement}
+        notificationType="announcement"
       />
     );
 
@@ -146,7 +144,7 @@ describe("Notification", () => {
         id="notificationID"
         notificationContent={<>Notification content.</>}
         notificationHeading="Notification Heading"
-        notificationType={NotificationTypes.Warning}
+        notificationType="warning"
       />
     );
 
@@ -170,7 +168,6 @@ describe("Notification", () => {
         id="notificationID"
         notificationContent={<>Notification content.</>}
         notificationHeading="Notification Heading"
-        notificationType={NotificationTypes.Standard}
       />
     );
 
@@ -197,7 +194,7 @@ describe("Notification", () => {
           id="notificationID2"
           notificationContent={<>Notification content.</>}
           notificationHeading="Notification Heading"
-          notificationType={NotificationTypes.Announcement}
+          notificationType="announcement"
         />
       )
       .toJSON();
@@ -207,7 +204,7 @@ describe("Notification", () => {
           id="notificationID3"
           notificationContent={<>Notification content.</>}
           notificationHeading="Notification Heading"
-          notificationType={NotificationTypes.Warning}
+          notificationType="warning"
         />
       )
       .toJSON();