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

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

@@ -1,20 +1,162 @@
 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 renderer from "react-test-renderer";
 
-import Modal from "./Modal";
+import { Button } from "../Button/Button";
+import { ButtonTypes } from "../Button/ButtonTypes";
+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={ButtonTypes.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={ButtonTypes.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("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("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={ButtonTypes.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,
+  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/Pagination/Pagination.stories.mdx

@@ -8,7 +8,6 @@ import {
   Story,
 } from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
-import { withQuery } from "@storybook/addon-queryparams";
 
 import Button from "../Button/Button";
 import DSProvider from "../../theme/provider";
@@ -21,7 +20,7 @@ export const hrefProps = getStorybookHrefProps(10);
 <Meta
   title={getCategory("Pagination")}
   component={Pagination}
-  decorators={[withDesign, withQuery]}
+  decorators={[withDesign]}
   parameters={{
     design: {
       type: "figma",

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

@@ -214,8 +214,8 @@ exports[`SearchBar renders the UI snapshot correctly 2`] = `
             </svg>
           </div>
         </div>
-        
       </div>
+      
     </div>
     <div
       className="css-1xdhyk6"

package/src/components/Select/Select.stories.mdx

@@ -79,7 +79,7 @@ export const labelPositionsEnumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.7.0`    |
-| Latest            | `0.26.0`   |
+| Latest            | `0.27.0`   |
 
 ## Table of Contents
 
@@ -309,9 +309,9 @@ can be used to show or hide the "Required" text within the `label` element.
 
 ### Controlled Component using `value` and `onChange` props
 
-If your application uses controlled React components and the Reservoir Design 
+If your application uses controlled React components and the Reservoir Design
 System (DS) `Select` component must be controlled, you can pass and extract the
-value through the `value` and `onChange` props. This will be called every time 
+value through the `value` and `onChange` props. This will be called every time
 a new `option` value is selected.
 
 Try it out: open up the browser's console to see new values being logged on

package/src/components/Select/Select.tsx

@@ -96,7 +96,6 @@ export const Select = chakra(
       const styles = useMultiStyleConfig("CustomSelect", {
         variant: selectType,
         labelPosition,
-        labelWidth,
       });
       const finalInvalidText = invalidText
         ? invalidText
@@ -108,6 +107,10 @@ export const Select = chakra(
       // must be passed.
       const controlledProps = onChange ? { onChange, value } : {};
 
+      // The number of pixels between the label and select elements
+      // when the labelPosition is inline (equivalent to --nypl-space-xs).
+      const labelSelectGap = 8;
+
       if (!showLabel) {
         ariaAttributes["aria-label"] =
           labelText && footnote ? `${labelText} - ${footnote}` : labelText;
@@ -124,9 +127,11 @@ export const Select = chakra(
       useEffect(() => {
         if (labelPosition === LabelPositions.Inline) {
           if (labelRef.current) {
-            const width = labelRef.current.clientWidth + 8;
+            const width = labelRef.current.clientWidth + labelSelectGap;
             setLabelWidth(width);
           }
+        } else {
+          setLabelWidth(0);
         }
       }, [labelPosition]);
 
@@ -171,14 +176,15 @@ export const Select = chakra(
             >
               {children}
             </ChakraSelect>
-            {footnote && showHelperInvalidText && (
-              <HelperErrorText
-                id={`${id}-helperText`}
-                isInvalid={isInvalid}
-                text={footnote}
-              />
-            )}
           </Box>
+          {footnote && showHelperInvalidText && (
+            <HelperErrorText
+              id={`${id}-helperText`}
+              isInvalid={isInvalid}
+              text={footnote}
+              ml={{ sm: "auto", md: `${labelWidth}px` }}
+            />
+          )}
         </Box>
       );
     }

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

@@ -280,19 +280,19 @@ exports[`Select Renders the UI snapshot correctly 3`] = `
         </svg>
       </div>
     </div>
-    <div
-      aria-atomic={true}
-      aria-live="polite"
-      className="css-1xdhyk6"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "Tom doesn't count as a sibling :(.",
-        }
-      }
-      data-isinvalid={true}
-      id="select-helperText"
-    />
   </div>
+  <div
+    aria-atomic={true}
+    aria-live="polite"
+    className="css-1mpebub"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "Tom doesn't count as a sibling :(.",
+      }
+    }
+    data-isinvalid={true}
+    id="select-helperText"
+  />
 </div>
 `;
 
@@ -387,19 +387,19 @@ exports[`Select Renders the UI snapshot correctly 4`] = `
         </svg>
       </div>
     </div>
-    <div
-      aria-atomic={true}
-      aria-live="off"
-      className="css-1xdhyk6"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "Remember, Logan will judge you no matter who you pick.",
-        }
-      }
-      data-isinvalid={false}
-      id="select-helperText"
-    />
   </div>
+  <div
+    aria-atomic={true}
+    aria-live="off"
+    className="css-1mpebub"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "Remember, Logan will judge you no matter who you pick.",
+      }
+    }
+    data-isinvalid={false}
+    id="select-helperText"
+  />
 </div>
 `;
 

package/src/index.ts

@@ -69,7 +69,7 @@ export { default as List } from "./components/List/List";
 export { ListTypes } from "./components/List/ListTypes";
 export { default as Logo } from "./components/Logo/Logo";
 export { LogoColors, LogoNames, LogoSizes } from "./components/Logo/LogoTypes";
-export { default as Modal } from "./components/Modal/Modal";
+export { ModalTrigger, useModal } from "./components/Modal/Modal";
 export { default as Notification } from "./components/Notification/Notification";
 export { NotificationTypes } from "./components/Notification/NotificationTypes";
 export { default as Pagination } from "./components/Pagination/Pagination";

package/src/styles.scss

@@ -21,4 +21,3 @@
 // Components.
 @import "./components/Autosuggest/_Autosuggest.scss";
 @import "./components/DatePicker/_DatePicker.scss";
-@import "./components/Modal/_Modal.scss";

package/src/theme/components/select.ts

@@ -29,7 +29,7 @@ const select = {
 
 const Select = {
   parts: ["helperText", "inline", "select"],
-  baseStyle: ({ labelPosition, labelWidth }) => {
+  baseStyle: ({ labelPosition }) => {
     return {
       marginBottom: "xs",
       // The backgroundColor set to "ui.white" hides the arrow SVG icon when
@@ -38,10 +38,6 @@ const Select = {
       ".chakra-select__icon-wrapper": {
         zIndex: "9999",
       },
-      helperText: {
-        marginLeft:
-          labelPosition === "inline" ? { md: `${labelWidth}px` } : null,
-      },
       inline: {
         display: { md: "flex" },
         gap: { md: "var(--nypl-space-xs)" },

package/src/components/Modal/_Modal.scss

@@ -1,18 +0,0 @@
-.no-scroll {
-  overflow: hidden;
-  position: fixed;
-  top: -100vh;
-}
-
-.modal {
-  padding: var(--nypl-space-s);
-
-  background-color: var(--nypl-colors-ui-gray-x-light-warm);
-  height: 100vh;
-  left: 0;
-  overflow-y: auto;
-  position: fixed;
-  top: 0;
-  width: 100vw;
-  z-index: 999;
-}