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

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,154 @@
+import {
+  chakra,
+  Modal as ChakraModal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+  useDisclosure,
+} from "@chakra-ui/react";
+import * as React from "react";
+
+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;
+}
+
+export interface ModalProps {
+  buttonText?: string;
+  /** ID that other components can cross reference for accessibility purposes */
+  id?: string;
+  modalProps: BaseModalProps;
+}
+
+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 (
+      <ChakraModal
+        id={id}
+        isOpen={isOpen}
+        onClose={onClose}
+        scrollBehavior="inside"
+        size={size}
+        {...rest}
+      >
+        <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

@@ -0,0 +1,358 @@
+import {
+  ArgsTable,
+  Canvas,
+  Description,
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
+import { withDesign } from "storybook-addon-designs";
+
+import Icon from "../Icons/Icon";
+import Link from "../Link/Link";
+import Notification from "./Notification";
+import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
+
+<Meta
+  title={getCategory("Notification")}
+  component={Notification}
+  decorators={[withDesign]}
+  parameters={{
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/?node-id=10734%3A812",
+    },
+    jest: ["Notification.test.tsx"],
+  }}
+  argTypes={{
+    className: { control: false },
+    dismissible: {
+      table: { defaultValue: { summary: false } },
+    },
+    icon: { control: false },
+    id: { control: false },
+    isCentered: {
+      table: { defaultValue: { summary: false } },
+    },
+    noMargin: {
+      table: { defaultValue: { summary: false } },
+    },
+    notificationContent: { control: false },
+    notificationType: {
+      table: { defaultValue: { summary: "standard" } },
+    },
+  }}
+/>
+
+# Notification
+
+| Component Version | DS Version |
+| ----------------- | ---------- |
+| Added             | `0.23.2`   |
+| Latest            | `0.28.0`   |
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Component Props](#component-props)
+- [Accessibility](#accessibility)
+- [Variants](#variants)
+- [Custom Icon](#custom-icon)
+- [Dismissible](#dismissible)
+
+## Overview
+
+<Description of={Notification} />
+
+The `Notification` component is a configurable callout that should be used to
+display important messages.
+
+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"
+    args={{
+      ariaLabel: "Notification label",
+      className: undefined,
+      dismissible: false,
+      icon: undefined,
+      id: "notification-id",
+      isCentered: false,
+      noMargin: false,
+      notificationHeading: "Notification Heading",
+      notificationContent: (
+        <>
+          Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus
+          mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum
+          at eros. Cum sociis natoque penatibus et magnis dis parturient montes,
+          nascetur ridiculus mus. Vivamus sagittis lacus vel augue laoreet
+          rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus,
+          nisi erat porttitor ligula.
+        </>
+      ),
+      notificationType: "standard",
+      showIcon: true,
+    }}
+  >
+    {(args) => (
+      <div style={{ border: "1px solid #ccc" }}>
+        <Notification {...args} />
+      </div>
+    )}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Notification with Controls" />
+
+## Accessibility
+
+The `Notification` component renders with an HTML `aside` element as its wrapper.
+This is an HTML landmark element that is similar to adding an attribute of
+`role="complementary"`. For accessibility purposes, landmark elements should not
+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
+
+<Canvas>
+  <DSProvider>
+    <Notification
+      notificationHeading="Standard Notification"
+      notificationContent={
+        <>
+          This is a "standard" Notification with a heading. Cras mattis
+          consectetur purus sit amet fermentum. Maecenas faucibus mollis
+          interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at
+          eros. Cum sociis natoque penatibus et magnis dis parturient montes,
+          nascetur ridiculus mus. Vivamus sagittis lacus vel augue laoreet
+          rutrum faucibus dolor auctor.
+        </>
+      }
+    />
+  </DSProvider>
+</Canvas>
+
+<Canvas>
+  <DSProvider>
+    <Notification
+      notificationType="announcement"
+      notificationHeading="Announcement Notification"
+      notificationContent={
+        <>
+          This is an "announcement" Notification with a heading. Cras mattis
+          consectetur purus sit amet fermentum. Maecenas faucibus mollis
+          interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at
+          eros. Cum sociis natoque penatibus et magnis dis parturient montes,
+          nascetur ridiculus mus. Vivamus sagittis lacus vel augue laoreet
+          rutrum faucibus dolor auctor.
+        </>
+      }
+    />
+  </DSProvider>
+</Canvas>
+
+<Canvas>
+  <DSProvider>
+    <Notification
+      notificationType="warning"
+      notificationHeading="Warning Notification"
+      notificationContent={
+        <>
+          This is a "warning" Notification with a heading. Cras mattis
+          consectetur purus sit amet fermentum. Maecenas faucibus mollis
+          interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at
+          eros. Cum sociis natoque penatibus et magnis dis parturient montes,
+          nascetur ridiculus mus. Vivamus sagittis lacus vel augue laoreet
+          rutrum faucibus dolor auctor.
+        </>
+      }
+    />
+  </DSProvider>
+</Canvas>
+
+### Without NotificationHeading
+
+<Canvas>
+  <DSProvider>
+    <Notification
+      notificationContent={
+        <>
+          This is a "standard" Notification without a heading. Cras mattis
+          consectetur purus sit amet fermentum. Maecenas faucibus mollis
+          interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at
+          eros. Cum sociis natoque penatibus et magnis dis parturient montes,
+          nascetur ridiculus mus. Vivamus sagittis lacus vel augue laoreet
+          rutrum faucibus dolor auctor.
+        </>
+      }
+    />
+  </DSProvider>
+</Canvas>
+
+<Canvas>
+  <DSProvider>
+    <Notification
+      notificationType="announcement"
+      notificationContent={
+        <>
+          This is an "announcement" Notification without a heading. Cras mattis
+          consectetur purus sit amet fermentum. Maecenas faucibus mollis
+          interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at
+          eros. Cum sociis natoque penatibus et magnis dis parturient montes,
+          nascetur ridiculus mus. Vivamus sagittis lacus vel augue laoreet
+          rutrum faucibus dolor auctor.
+        </>
+      }
+    />
+  </DSProvider>
+</Canvas>
+
+<Canvas>
+  <DSProvider>
+    <Notification
+      notificationType="warning"
+      notificationContent={
+        <>
+          This is a "warning" Notification without a heading. Cras mattis
+          consectetur purus sit amet fermentum. Maecenas faucibus mollis
+          interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at
+          eros. Cum sociis natoque penatibus et magnis dis parturient montes,
+          nascetur ridiculus mus. Vivamus sagittis lacus vel augue laoreet
+          rutrum faucibus dolor auctor.
+        </>
+      }
+    />
+  </DSProvider>
+</Canvas>
+
+### Without Icon
+
+The `Notification` icon can be hidden with the `showIcon` prop set to `false`.
+
+<Canvas>
+  <DSProvider>
+    <Notification
+      notificationHeading="Standard Notification without Icon"
+      notificationContent={
+        <>
+          Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus
+          mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum
+          at eros. Cum sociis natoque penatibus et magnis dis parturient montes,
+          nascetur ridiculus mus.
+        </>
+      }
+      showIcon={false}
+    />
+    <Notification
+      notificationContent={
+        <>
+          This is an Standard Notification without a heading or icon. Cras
+          mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis
+          interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at
+          eros. Cum sociis natoque penatibus et magnis dis parturient montes,
+          nascetur ridiculus mus.
+        </>
+      }
+      showIcon={false}
+    />
+  </DSProvider>
+</Canvas>
+
+### With HTML content
+
+The `notificationContent` prop can accept HTML.
+
+<Canvas>
+  <DSProvider>
+    <Notification
+      notificationHeading="Standard Notification with HTML content"
+      notificationContent={
+        <>
+          <p>
+            Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus
+            mollis interdum.
+          </p>
+          <p>
+            Morbi leo risus, porta ac consectetur ac, vestibulum at eros.{" "}
+            <b>
+              Cum sociis natoque penatibus et magnis dis parturient montes,
+              nascetur ridiculus mus
+            </b>
+            . <Link href="#">This is a link</Link>.
+          </p>
+        </>
+      }
+    />
+  </DSProvider>
+</Canvas>
+
+## Custom Icon
+
+The default icon can be overridden by using the `icon` prop to pass a custom `Icon` component.
+
+<Canvas>
+  <Story name="Custom Icons">
+    <Notification
+      icon={<Icon name="check" color="section.research.secondary" />}
+      notificationHeading="Custom Icon"
+      notificationContent={
+        <>
+          This is a Notification with a custom icon. Cras mattis consectetur
+          purus sit amet fermentum. Maecenas faucibus mollis interdum. Morbi leo
+          risus, porta ac consectetur ac, vestibulum at eros. Cum sociis natoque
+          penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+        </>
+      }
+    />
+  </Story>
+</Canvas>
+
+## Dismissible
+
+A dismissible `Notification` component can be created by setting the
+`dismissible` prop to `true`. Once the "X" close icon on the upper right is
+clicked, the `Notification` will be removed from the DOM, therefore it only
+appears once.
+
+<Canvas>
+  <Story name="Dismissible">
+    <Notification
+      dismissible
+      notificationHeading="Dismissible Notification"
+      notificationContent={
+        <>
+          This is a dismissible Notification with an X icon. Cras mattis
+          consectetur purus sit amet fermentum. Maecenas faucibus mollis
+          interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at
+          eros. Cum sociis natoque penatibus et magnis dis parturient montes,
+          nascetur ridiculus mus.
+        </>
+      }
+      notificationType="announcement"
+    />
+  </Story>
+</Canvas>