@simplybusiness/mobius 3.0.0

package/src/components/Modal/Modal.story.mdx

@@ -0,0 +1,378 @@
+import { useState } from "react";
+import { Meta, ArgsTable, Story } from "@storybook/addon-docs";
+import { Box } from "../Box";
+import { Button } from "../Button";
+import { Modal } from ".";
+import { excludeControls } from "../../utils/excludeControls";
+
+<Meta
+  title="Components/Modal"
+  component={Modal}
+  argTypes={{
+    animation: { control: "radio", options: ["", "slideUp", "fade"] },
+    size: {
+      control: "radio",
+      options: ["md", "fullscreen"],
+    },
+    ...excludeControls(
+      "className",
+      "onClose",
+      "appElement",
+      "parentSelector",
+      "isOpen",
+    ),
+  }}
+/>
+
+# Modal
+
+The `Modal` component is used for displaying data that overlays the content
+beneath. It can be comprised of header and main content sections, both of which
+are optional.
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { Modal } from "@simplybusiness/mobius";
+```
+
+## Examples
+
+### Basic Modal
+
+Modal `open` state should be set in a parent container and passed in as a prop, along with an `onClose` function to set open state to false (or otherwise hide the modal).
+
+You will also need to set some trigger element or event to show the modal. Ordinarily that will be a button, but any user event will work.
+
+export const Demo = props => {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Show Modal</Button>
+      <Modal {...props} isOpen={open} onClose={() => setOpen(false)}>
+        <Modal.Header>The Latin Modal</Modal.Header>
+        <Modal.Content>
+          Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed
+          at eros et lectus mollis posuere. Morbi augue augue, venenatis vel
+          consectetur sed, vulputate et lorem. Integer venenatis nibh molestie
+          commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi
+          augue, scelerisque commodo libero vitae, vulputate interdum ex.
+          Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla.
+        </Modal.Content>
+      </Modal>
+    </>
+  );
+};
+
+<Demo />
+
+```jsx
+const Demo = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Show Modal</Button>
+
+      <Modal isOpen={open} onClose={() => setOpen(false)}>
+        <Modal.Header>The Latin Modal</Modal.Header>
+        <Modal.Content>
+          Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed
+          at eros et lectus mollis posuere. Morbi augue augue, venenatis vel
+          consectetur sed, vulputate et lorem. Integer venenatis nibh molestie
+          commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi
+          augue, scelerisque commodo libero vitae, vulputate interdum ex.
+          Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla.
+        </Modal.Content>
+      </Modal>
+    </>
+  );
+};
+```
+
+### Fullscreen Modal
+
+Set the `size` prop to "fullscreen".
+
+export const FullScreenDemo = props => {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)} variant="secondary">
+        Show Fullscreen Modal 🚀
+      </Button>
+      <Modal
+        {...props}
+        size="fullscreen"
+        isOpen={open}
+        onClose={() => setOpen(false)}
+        preventCloseOnEsc
+      >
+        <Modal.Header>The Full Screen Modal</Modal.Header>
+        <Modal.Content>
+          Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed
+          at eros et lectus mollis posuere. Morbi augue augue, venenatis vel
+          consectetur sed, vulputate et lorem. Integer venenatis nibh molestie
+          commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi
+          augue, scelerisque commodo libero vitae, vulputate interdum ex.
+          Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla.
+        </Modal.Content>
+      </Modal>
+    </>
+  );
+};
+
+<FullScreenDemo />
+
+```jsx
+const FullScreenDemo = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)} variant="secondary">
+        Show Fullscreen Modal 🚀
+      </Button>
+
+      <Modal
+        size="fullscreen"
+        isOpen={open}
+        onClose={() => setOpen(false)}
+        preventCloseOnEsc
+      >
+        <Modal.Header>The Latin Modal</Modal.Header>
+        <Modal.Content>...</Modal.Content>
+      </Modal>
+    </>
+  );
+};
+```
+
+### With Animation
+
+Set the `animation` prop to either `slideUp` or `fade`.
+
+_Note:_ the animation will be disabled if user has reduced motion preference enabled on their device.
+
+export const WithAnimationDemo = ({ animation }) => {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>
+        Show Modal With Animation 🧙‍♂️
+      </Button>
+      <Modal isOpen={open} onClose={() => setOpen(false)} animation={animation}>
+        <Modal.Header>The Latin Modal</Modal.Header>
+        <Modal.Content>
+          Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed
+          at eros et lectus mollis posuere. Morbi augue augue, venenatis vel
+          consectetur sed, vulputate et lorem. Integer venenatis nibh molestie
+          commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi
+          augue, scelerisque commodo libero vitae, vulputate interdum ex.
+          Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla.
+        </Modal.Content>
+      </Modal>
+    </>
+  );
+};
+
+<WithAnimationDemo />
+
+```jsx
+const WithAnimationDemo = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>
+        Show Modal With Animation 🧙‍♂️
+      </Button>
+
+      <Modal isOpen={open} onClose={() => setOpen(false)} animation="slideUp">
+        <Modal.Header>The Latin Modal</Modal.Header>
+        <Modal.Content>
+          Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed
+          at eros et lectus mollis posuere. Morbi augue augue, venenatis vel
+          consectetur sed, vulputate et lorem. Integer venenatis nibh molestie
+          commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi
+          augue, scelerisque commodo libero vitae, vulputate interdum ex.
+          Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla.
+        </Modal.Content>
+      </Modal>
+    </>
+  );
+};
+```
+
+## Closing a Modal from within a child `<iframe>`
+
+### Step 1: Create embeddable `<iframe>`
+
+1. Create `example` directory with `index.html` file in it:
+
+```
+mkdir example && cd example && touch index.html
+```
+
+2. Edit your `index.html` file as follows:
+
+```html
+<html>
+  <body>
+    <button type="button" id="close-button">Close this window</button>
+    <script>
+      const button = document.getElementById("close-button");
+      const handleClick = () =>
+        window.parent.postMessage({ mobiusCloseModal: true }, "*");
+      button.addEventListener("click", handleClick);
+    </script>
+  </body>
+</html>
+```
+
+3. Start a simple HTTP server from within the `example` directory:
+
+```
+npx serve .
+```
+
+### Step 2: Embed the `<iframe>` in a React component
+
+```jsx
+import { useEffect, useCallback } from "react";
+
+export const ExampleContent = ({ onClose }) => {
+  const iframeUrl = "http://localhost:3000";
+
+  const handleMessage = useCallback(
+    (event: MessageEvent) => {
+      const { data } = event;
+
+      if (event.origin.startsWith(iframeUrl)) {
+        const { mobiusCloseModal } = data;
+
+        if (mobiusCloseModal) {
+          onClose();
+        }
+      }
+    },
+    [iframeUrl],
+  );
+
+  useEffect(() => {
+    window.addEventListener("message", handleMessage);
+
+    return () => window.removeEventListener("message", handleMessage);
+  }, [handleMessage]);
+
+  return (
+    <iframe
+      src={iframeUrl}
+      style={{
+        backgroundColor: "lightgrey",
+        border: "none",
+        width: "100%",
+        height: "100%",
+      }}
+    />
+  );
+};
+```
+
+### Normal
+
+<Story
+  name="Normal"
+  args={{
+    isOpen: false,
+    shouldFocusAfterRender: true,
+    animation: "",
+    preventCloseOnEsc: false,
+    closeLabel: "Close",
+    size: "md",
+  }}
+>
+  {args => <Demo {...args} />}
+</Story>
+
+### Full Screen
+
+<Story
+  name="Full Screen"
+  args={{
+    isOpen: false,
+    shouldFocusAfterRender: true,
+    animation: "",
+    preventCloseOnEsc: false,
+    closeLabel: "Close",
+    size: "fullscreen",
+  }}
+>
+  {args => <FullScreenDemo {...args} />}
+</Story>
+
+### With Animation
+
+<Story
+  name="With Animation"
+  args={{
+    isOpen: false,
+    animation: "slideUp",
+    shouldFocusAfterRender: true,
+    preventCloseOnEsc: false,
+    closeLabel: "Close",
+    size: "md",
+  }}
+>
+  {args => <WithAnimationDemo {...args} />}
+</Story>
+
+## Props
+
+<ArgsTable components={{ Modal: Modal }} />
+
+## Component HTML Structure and Class names
+
+The following HTML is rendered for a simple Modal:
+
+```html
+<div class="mobius/ModalPortal">
+  <div class="mobius/ModalOverlay">
+    <div class="mobius/Modal" role="dialog" aria-modal="true">
+      <header class="mobius/ModalHeader">
+        Header content
+        <button
+          aria-label="Close"
+          class="mobius mobius/Button --variant-basic mobius/ModalClose"
+        >
+          <svg class="mobius mobius/Icon">{cross}</svg>
+        </button>
+      </header>
+      <div class="mobius/ModalContent">{content..}</div>
+    </div>
+  </div>
+</div>
+```
+
+Class names are augmented with the following flags if true (affected classes shown above):
+
+- --slide-up
+- --fade
+- --has-reduced-motion
+- --is-fullscreen
+- --is-xs
+- --is-sm
+- --is-md
+- --is-lg
+- --is-xl
+- --is-xxl
+
+---
+
+[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Modal) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

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

@@ -0,0 +1,195 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Modal, ModalSizeType } from ".";
+
+const MODAL_CLASS_NAME = "mobius/Modal";
+const OVERLAY_CLASS_NAME = "mobius/ModalOverlay";
+const BODY_CLASS_NAME = "mobius/Modal--is-open";
+const MODAL_CLOSE_CLASS_NAME = "mobius/ModalClose";
+
+const mockMatchMedia = (matches: boolean) => {
+  Object.defineProperty(window, "matchMedia", {
+    writable: true,
+    configurable: true,
+    value: jest.fn().mockImplementation(query => ({
+      matches,
+      media: query,
+      onchange: null,
+      addListener: jest.fn(),
+      removeListener: jest.fn(),
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    })),
+  });
+};
+
+describe("Modal", () => {
+  beforeEach(() => {
+    mockMatchMedia(true);
+  });
+
+  it("should render without errors", () => {
+    const { container } = render(<Modal isOpen onClose={() => {}} />);
+    expect(container).toBeTruthy();
+  });
+
+  it("should render with default class names", () => {
+    render(
+      <Modal isOpen onClose={() => {}}>
+        <Modal.Header />
+      </Modal>,
+    );
+
+    const dialog = screen.getByRole("dialog");
+    const closeButton = screen.getByLabelText("Close");
+
+    expect(dialog).toHaveClass(MODAL_CLASS_NAME);
+    expect(dialog.parentElement).toHaveClass(OVERLAY_CLASS_NAME);
+    expect(document.body).toHaveClass(BODY_CLASS_NAME);
+    expect(closeButton).toHaveClass(MODAL_CLOSE_CLASS_NAME);
+  });
+
+  it("should render with custom class name", () => {
+    render(
+      <Modal className="my-test-modal" isOpen onClose={() => {}}>
+        <Modal.Header />
+      </Modal>,
+    );
+
+    const dialog = screen.getByRole("dialog");
+    const closeButton = screen.getByLabelText("Close");
+
+    expect(dialog).toHaveClass(MODAL_CLASS_NAME);
+    expect(dialog).toHaveClass("my-test-modal");
+    expect(dialog.parentElement).toHaveClass(OVERLAY_CLASS_NAME);
+    expect(document.body).toHaveClass(BODY_CLASS_NAME);
+    expect(closeButton).toHaveClass(MODAL_CLOSE_CLASS_NAME);
+  });
+
+  describe("given the size prop is set", () => {
+    it.each(["fullscreen", "xs", "sm", "md", "lg", "xl", "xxl"])(
+      "to %s, it should render with --is-%s class name",
+      size => {
+        render(
+          <Modal isOpen onClose={() => {}} size={size as ModalSizeType} />,
+        );
+
+        const dialog = screen.getByRole("dialog");
+        expect(dialog).toHaveClass(`--is-${size}`);
+      },
+    );
+  });
+
+  describe("given the animation prop is set to slideUp", () => {
+    it("should render with appropriate class name", () => {
+      render(<Modal isOpen onClose={() => {}} animation="slideUp" />);
+
+      const dialog = screen.getByRole("dialog");
+      expect(dialog).toHaveClass("--slide-up");
+      expect(dialog.parentElement).toHaveClass("--fade");
+    });
+  });
+
+  describe("given the animation prop is set to fade", () => {
+    it("should render with appropriate class name", () => {
+      render(<Modal isOpen onClose={() => {}} animation="fade" />);
+
+      const dialog = screen.getByRole("dialog");
+      expect(dialog).toHaveClass("--fade");
+      expect(dialog.parentElement).toHaveClass("--fade");
+    });
+  });
+
+  describe("given the user has reduced motion preference enabled", () => {
+    beforeEach(() => {
+      mockMatchMedia(false);
+    });
+
+    afterEach(() => {
+      jest.resetAllMocks();
+    });
+
+    it("renders with appropriate class name", () => {
+      render(<Modal isOpen onClose={() => {}} />);
+
+      const dialog = screen.getByRole("dialog");
+      expect(dialog).toHaveClass("--has-reduced-motion");
+    });
+  });
+
+  describe("pressing ESC key", () => {
+    it("should close the modal", async () => {
+      const content = "Sample content";
+      let modalOpen = true;
+      const onClose = () => {
+        modalOpen = false;
+      };
+
+      render(
+        <Modal isOpen={modalOpen} onClose={onClose}>
+          {content}
+        </Modal>,
+      );
+
+      const modalContent = screen.getByText(content);
+      expect(modalContent).toBeInTheDocument();
+      await userEvent.keyboard("[Escape]");
+      expect(modalOpen).toBe(false);
+    });
+  });
+
+  describe("pressing close button", () => {
+    it("should close the modal", async () => {
+      const content = "Sample content";
+      let modalOpen = true;
+      const onClose = () => {
+        modalOpen = false;
+      };
+
+      render(
+        <Modal isOpen={modalOpen} onClose={onClose}>
+          <Modal.Header />
+          {content}
+        </Modal>,
+      );
+
+      const modalContent = screen.getByText(content);
+      expect(modalContent).toBeInTheDocument();
+      const closeButton = screen.getByLabelText("Close");
+      await fireEvent.click(closeButton);
+      expect(modalOpen).toBe(false);
+    });
+  });
+
+  describe("closeLabel prop", () => {
+    describe("given the label is defined", () => {
+      it("should render the label", () => {
+        const closeLabel = "Leave";
+
+        render(
+          <Modal isOpen onClose={() => {}} closeLabel={closeLabel}>
+            <Modal.Header />
+            Sample content
+          </Modal>,
+        );
+
+        const closeButton = screen.getByText(closeLabel);
+        expect(closeButton).toBeInTheDocument();
+      });
+    });
+
+    describe("given the label is not defined", () => {
+      it("should render the default close button", () => {
+        render(
+          <Modal isOpen onClose={() => {}}>
+            <Modal.Header />
+          </Modal>,
+        );
+
+        const closeButton = screen.getByLabelText("Close");
+        expect(closeButton).toBeInTheDocument();
+      });
+    });
+  });
+});

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,109 @@
+import {
+  Children,
+  isValidElement,
+  cloneElement,
+  useEffect,
+  ReactNode,
+} from "react";
+import ReactModal from "react-modal";
+import clsx from "clsx";
+import { SizeType } from "../../types/size";
+import { sizeClasses } from "../../utils/sizeClasses";
+
+export type ModalSizeType = SizeType | "fullscreen";
+export interface ModalProps {
+  isOpen: boolean;
+  onClose: (
+    event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>,
+  ) => void;
+  children?: ReactNode;
+  className?: string;
+  closeLabel?: string;
+  size?: ModalSizeType;
+  appElement?: string;
+  preventCloseOnEsc?: boolean;
+  animation?: "slideUp" | "fade";
+  shouldFocusAfterRender?: boolean;
+  parentSelector?: () => HTMLElement;
+}
+
+const Modal = ({
+  isOpen,
+  onClose,
+  children,
+  className,
+  closeLabel,
+  size = "md",
+  appElement = "body",
+  preventCloseOnEsc,
+  animation,
+  shouldFocusAfterRender = true,
+  parentSelector,
+}: ModalProps) => {
+  const noPreference = window.matchMedia(
+    "(prefers-reduced-motion: no-preference)",
+  );
+  const shouldAnimate = noPreference.matches && !!animation;
+
+  const modalClasses = clsx(
+    "mobius",
+    "mobius/Modal",
+    {
+      "--slide-up": animation === "slideUp",
+      "--fade": animation === "fade",
+      "--has-reduced-motion": !noPreference.matches,
+      "--is-fullscreen": size === "fullscreen",
+      ...(size !== "fullscreen" && sizeClasses(size)),
+    },
+    className,
+  );
+
+  const overlayClasses = clsx("mobius/ModalOverlay", {
+    "--fade": shouldAnimate,
+  });
+
+  useEffect(() => {
+    // https://reactcommunity.org/react-modal/accessibility/
+    if (process.env.NODE_ENV !== "test") {
+      ReactModal.setAppElement(appElement);
+    }
+  }, [appElement]);
+
+  return (
+    <ReactModal
+      isOpen={isOpen}
+      onRequestClose={onClose}
+      className={{
+        base: modalClasses,
+        afterOpen: "",
+        beforeClose: "--is-closing",
+      }}
+      portalClassName="mobius/ModalPortal"
+      overlayClassName={{
+        base: overlayClasses,
+        afterOpen: "",
+        beforeClose: "--is-closing",
+      }}
+      bodyOpenClassName="mobius/Modal--is-open"
+      ariaHideApp={process.env.NODE_ENV !== "test"}
+      shouldCloseOnEsc={!preventCloseOnEsc}
+      closeTimeoutMS={shouldAnimate ? 300 : 0}
+      shouldFocusAfterRender={shouldFocusAfterRender}
+      parentSelector={parentSelector}
+    >
+      {Children.map(children, child => {
+        if (isValidElement(child)) {
+          return cloneElement(child, {
+            onClose,
+            closeLabel,
+          } as any);
+        }
+
+        return child;
+      })}
+    </ReactModal>
+  );
+};
+
+Modal.displayName = "Modal";
+export { Modal };

package/src/components/Modal/index.tsx

@@ -0,0 +1,28 @@
+import { Modal as ModalComponent, ModalProps, ModalSizeType } from "./Modal";
+import {
+  Header,
+  HeaderProps as ModalHeaderProps,
+  HeaderElementType as ModalHeaderElementType,
+} from "./Header";
+import {
+  Content,
+  ContentProps as ModalContentProps,
+  DivElementType as ModalContentDivElementType,
+} from "./Content";
+
+const Modal = Object.assign(ModalComponent, {
+  Header,
+  Content,
+});
+
+Modal.displayName = "Modal";
+export { Modal };
+
+export type {
+  ModalProps,
+  ModalHeaderProps,
+  ModalHeaderElementType,
+  ModalContentProps,
+  ModalContentDivElementType,
+  ModalSizeType,
+};