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

package/src/components/Modal/Modal.tsx

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

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

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