@nypl/design-system-react-components 0.25.13 → 0.27.0

package/src/components/Modal/Modal.tsx

@@ -1,34 +1,154 @@
+import {
+  chakra,
+  Modal as ChakraModal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+  useDisclosure,
+  ButtonGroup,
+} 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 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

@@ -59,7 +59,18 @@ export const enumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.23.2`   |
-| Latest            | `0.25.13`  |
+| Latest            | `0.26.0`   |
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Component Props](#component-props)
+- [Accessibility](#accessibility)
+- [Variants](#variants)
+- [Custom Icon](#custom-icon)
+- [Dismissible](#dismissible)
+
+## Overview
 
 <Description of={Notification} />
 
@@ -70,6 +81,8 @@ In the preview below, the border around the `Notification` is not part of the
 component. It has been added to help illustrate how the `Notification` sits
 within a parent element.
 
+## Component Props
+
 <Canvas>
   <Story
     name="Notification with Controls"
@@ -118,11 +131,22 @@ be rendered inside other landmark elements such as the `header` and `footer`
 landmark elements. Adding a `Notification` component inside an HTML `main` landmark
 element is acceptable.
 
+Every `Notification` component must have a unique `aria-label` attribute. This
+is set through the `ariaLabel` prop. A unique `aria-label` value, along with the
+`aside` HTML landmark element, helps screen readers better navigate a page with
+multiple `Notification`s.
+
 Icons rendered in the `Notification` component are decorative by default which
 means that they are hidden to screen readers. Since the "X" close icon inside the
 dismissible button is decorative and because there is no discernible text inside
 the button, an `aria-label` attribute is added to the button.
 
+Resources:
+
+- [MDN Aria: complementary role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/complementary_role)
+- [Deque Creating Accessible SVGs](https://www.deque.com/blog/creating-accessible-svgs/)
+- [CSS Tricks Accessible SVG Icons](https://css-tricks.com/accessible-svg-icons/)
+
 ## Variants
 
 ### With NotificationHeading

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

@@ -247,6 +247,27 @@ describe("Notification", () => {
         />
       )
       .toJSON();
+    const withChakraProps = renderer
+      .create(
+        <Notification
+          id="chakra"
+          notificationContent={<>Notification content.</>}
+          notificationHeading="Notification Heading"
+          p="20px"
+          color="ui.error.primary"
+        />
+      )
+      .toJSON();
+    const withOtherProps = renderer
+      .create(
+        <Notification
+          id="props"
+          notificationContent={<>Notification content.</>}
+          notificationHeading="Notification Heading"
+          data-testid="props"
+        />
+      )
+      .toJSON();
 
     expect(standard).toMatchSnapshot();
     expect(announcement).toMatchSnapshot();
@@ -255,5 +276,7 @@ describe("Notification", () => {
     expect(withoutAnIcon).toMatchSnapshot();
     expect(withoutHeadingAndIcon).toMatchSnapshot();
     expect(dismissible).toMatchSnapshot();
+    expect(withChakraProps).toMatchSnapshot();
+    expect(withOtherProps).toMatchSnapshot();
   });
 });

package/src/components/Notification/Notification.tsx

@@ -1,5 +1,5 @@
+import { Box, chakra, useMultiStyleConfig } from "@chakra-ui/react";
 import React, { useState } from "react";
-import { Box, useMultiStyleConfig } from "@chakra-ui/react";
 
 import Button from "../Button/Button";
 import { ButtonTypes } from "../Button/ButtonTypes";
@@ -8,8 +8,6 @@ import { HeadingLevels } from "../Heading/HeadingTypes";
 import Icon from "../Icons/Icon";
 import { IconColors, IconNames, IconSizes } from "../Icons/IconTypes";
 import { NotificationTypes } from "./NotificationTypes";
-import generateUUID from "../../helpers/generateUUID";
-
 interface BaseProps {
   /** Optional prop to control text alignment in `NotificationContent` */
   alignText?: boolean;
@@ -52,66 +50,67 @@ export interface NotificationProps extends BasePropsWithoutAlignText {
 /**
  * NotificationHeading child-component.
  */
-export function NotificationHeading(
-  props: React.PropsWithChildren<BasePropsWithoutAlignText>
-) {
-  const { children, icon, id, isCentered, notificationType } = props;
-  const styles = useMultiStyleConfig("NotificationHeading", {
-    icon,
-    isCentered,
-    notificationType,
-  });
-  return (
-    <Box as="header" __css={styles}>
-      {icon}
-      <Heading
-        additionalStyles={styles.heading}
-        id={`${id}-heading`}
-        level={HeadingLevels.Four}
-      >
-        {children}
-      </Heading>
-    </Box>
-  );
-}
+export const NotificationHeading = chakra(
+  (props: React.PropsWithChildren<BasePropsWithoutAlignText>) => {
+    const { children, icon, id, isCentered, notificationType, ...rest } = props;
+    const styles = useMultiStyleConfig("NotificationHeading", {
+      icon,
+      isCentered,
+      notificationType,
+    });
+    return (
+      <Box as="header" __css={styles} {...rest}>
+        {icon}
+        <Heading
+          additionalStyles={styles.heading}
+          id={`${id}-heading`}
+          level={HeadingLevels.Four}
+        >
+          {children}
+        </Heading>
+      </Box>
+    );
+  }
+);
 
 /**
  * NotificationContent child-component.
  */
-export function NotificationContent(
-  props: React.PropsWithChildren<BasePropsWithoutIsCentered>
-) {
-  const { alignText, children, icon, notificationType } = props;
-  const styles = useMultiStyleConfig("NotificationContent", {
-    alignText,
-    icon,
-    notificationType,
-  });
-  return (
-    <Box __css={styles}>
-      {icon}
-      <Box __css={styles.content}>{children}</Box>
-    </Box>
-  );
-}
+export const NotificationContent = chakra(
+  (props: React.PropsWithChildren<BasePropsWithoutIsCentered>) => {
+    const { alignText, children, icon, notificationType, ...rest } = props;
+    const styles = useMultiStyleConfig("NotificationContent", {
+      alignText,
+      icon,
+      notificationType,
+    });
+    return (
+      <Box __css={styles} {...rest}>
+        {icon}
+        <Box __css={styles.content}>{children}</Box>
+      </Box>
+    );
+  }
+);
 
 /**
  * Component used to present users with three different levels of notifications:
  * standard, announcement, and warning.
  */
-export default function Notification(props: NotificationProps) {
+export const Notification = chakra((props: NotificationProps) => {
   const {
     ariaLabel,
     className,
     dismissible = false,
     icon,
-    id = generateUUID(),
+    id,
     isCentered = false,
     noMargin = false,
     notificationContent,
     notificationHeading,
     notificationType = NotificationTypes.Standard,
     showIcon = true,
+    ...rest
   } = props;
   const [isOpen, setIsOpen] = useState(true);
   const handleClose = () => setIsOpen(false);
@@ -214,6 +213,7 @@ export default function Notification(props: NotificationProps) {
       data-type={notificationType}
       id={id}
       __css={styles}
+      {...rest}
     >
       <Box __css={styles.container}>
         {childHeading}
@@ -222,4 +222,6 @@ export default function Notification(props: NotificationProps) {
       {dismissibleButton}
     </Box>
   );
-}
+});
+
+export default Notification;