@sproutsocial/seeds-react-modal 1.0.0

package/src/__tests__/Modal.test.tsx

@@ -0,0 +1,134 @@
+/* eslint-disable */
+import React from "react";
+import { COLOR_PURPLE_300 } from "@sproutsocial/seeds-color";
+import {
+  render,
+  fireEvent,
+  cleanup,
+  screen,
+} from "@sproutsocial/seeds-react-testing-library";
+import Modal from "../Modal";
+
+afterEach(() => cleanup());
+
+describe("Modal", () => {
+  it("renders a custom background color", () => {
+    // Use baseElement since it renders in a Portal
+    render(
+      <Modal
+        isOpen={true}
+        label="Label"
+        bg={COLOR_PURPLE_300}
+        onClose={() => {}}
+        closeButtonLabel="Close this dialog"
+      >
+        ajdsfljasdlfjlasdjf
+      </Modal>
+    );
+
+    expect(screen.getByRole("dialog")).toHaveStyleRule(
+      "background-color",
+      COLOR_PURPLE_300
+    );
+  });
+
+  it("should close on overlay click and esc", () => {
+    const onClose = jest.fn();
+    render(
+      <Modal
+        isOpen={true}
+        label="Label"
+        bg={COLOR_PURPLE_300}
+        onClose={onClose}
+        closeButtonLabel="Close this dialog"
+      >
+        <Modal.Header>
+          <Modal.CloseButton />
+        </Modal.Header>
+        ajdsfljasdlfjlasdjf
+      </Modal>
+    );
+
+    fireEvent.click(screen.getByRole("dialog").parentElement as HTMLElement);
+    expect(onClose).toHaveBeenCalled();
+
+    onClose.mockClear();
+    fireEvent.keyDown(screen.getByText("ajdsfljasdlfjlasdjf"), {
+      key: "Escape",
+      keyCode: 27,
+    });
+    expect(onClose).toHaveBeenCalled();
+
+    onClose.mockClear();
+    fireEvent.click(screen.getByLabelText("Close this dialog"));
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it("should NOT close on overlay click and esc if onClick is not provided", () => {
+    const onClose = jest.fn();
+    const { baseElement, getByText, queryByLabelText } = render(
+      <Modal
+        isOpen={true}
+        label="Label"
+        bg={COLOR_PURPLE_300}
+        closeButtonLabel="Close this dialog"
+      >
+        ajdsfljasdlfjlasdjf
+      </Modal>
+    );
+
+    expect(queryByLabelText("Close this dialog")).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("dialog").parentElement as HTMLElement);
+    expect(onClose).not.toHaveBeenCalled();
+
+    onClose.mockClear();
+    fireEvent.keyDown(screen.getByText("ajdsfljasdlfjlasdjf"), {
+      key: "Escape",
+      keyCode: 27,
+    });
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  describe("Modal.Header", () => {
+    it("should have an aria-label on the close button", () => {
+      render(
+        <Modal
+          isOpen={true}
+          label="Label"
+          bg={COLOR_PURPLE_300}
+          onClose={() => {}}
+          closeButtonLabel="Close this dialog"
+        >
+          <Modal.Header>
+            <Modal.CloseButton />
+          </Modal.Header>
+          ajdsfljasdlfjlasdjf
+        </Modal>
+      );
+
+      expect(screen.getByLabelText("Close this dialog")).toBeInTheDocument();
+    });
+
+    it("should accept the onClose handler from ModalContext", () => {
+      const onClose = jest.fn();
+      render(
+        <Modal
+          isOpen={true}
+          label="Label"
+          bg={COLOR_PURPLE_300}
+          onClose={onClose}
+          closeButtonLabel="Close this dialog"
+        >
+          <Modal.Header>
+            <Modal.CloseButton />
+          </Modal.Header>
+          ajdsfljasdlfjlasdjf
+        </Modal>
+      );
+
+      fireEvent.click(screen.getByLabelText("Close this dialog"));
+      expect(onClose).toHaveBeenCalled();
+    });
+  });
+});

package/src/__tests__/Modal.typetest.tsx

@@ -0,0 +1,209 @@
+import * as React from "react";
+import { Box } from "@sproutsocial/seeds-react-box";
+import { Button } from "@sproutsocial/seeds-react-button";
+import { Input } from "@sproutsocial/seeds-react-input";
+import { Text } from "@sproutsocial/seeds-react-text";
+import Modal from "../Modal";
+import FormField from "@sproutsocial/seeds-react-form-field";
+
+const longContent = `
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+  eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem
+  ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+  tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum
+  dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+  incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
+  amet, consectetur adipiscing elit, sed do eiusmod tempor
+  incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
+  amet, consectetur adipiscing elit, sed do eiusmod tempor
+  incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
+  amet, consectetur adipiscing elit, sed do eiusmod tempor
+  incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
+  amet, consectetur adipiscing elit, sed do eiusmod tempor
+  incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
+  amet, consectetur adipiscing elit, sed do eiusmod tempor
+  incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
+  amet, consectetur adipiscing elit, sed do eiusmod tempor
+  incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
+  amet, consectetur adipiscing elit, sed do eiusmod tempor
+  incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
+  amet, consectetur adipiscing elit, sed do eiusmod tempor
+  incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
+  amet, consectetur adipiscing elit, sed do eiusmod tempor
+  incididunt ut labore et dolore magna aliqua.`;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function ModalTypeTest() {
+  return (
+    <>
+      <Modal
+        appElementSelector="#root"
+        isOpen={true}
+        onClose={jest.fn()}
+        closeButtonLabel="Close this dialog"
+        label="Example Modal"
+      >
+        <React.Fragment>
+          <Modal.Header
+            title="Assign Chatbot"
+            subtitle="The chatbot will respond to customers from this profile."
+          />
+          <Modal.Content>{longContent}</Modal.Content>
+          <Modal.Footer>
+            <Button appearance="primary" width={1}>
+              Full-Width Button
+            </Button>
+          </Modal.Footer>
+        </React.Fragment>
+      </Modal>
+      <Modal
+        appElementSelector="#root"
+        isOpen={false}
+        closeButtonLabel="n/a"
+        label="Example Modal"
+      >
+        <React.Fragment>
+          <Modal.Content>{longContent}</Modal.Content>
+          <Modal.Footer>
+            <Button appearance="primary" width={1} onClick={jest.fn()}>
+              Must click to close
+            </Button>
+          </Modal.Footer>
+        </React.Fragment>
+      </Modal>
+      <Modal
+        appElementSelector="#root"
+        isOpen={true}
+        onClose={jest.fn()}
+        closeButtonLabel="Close this dialog"
+        label="Example Modal"
+      >
+        <React.Fragment>
+          <Modal.Header title="" subtitle="" bordered>
+            <Box width="100%" bg="purple.400">
+              Custom header
+            </Box>
+          </Modal.Header>
+          <Modal.Content>{longContent}</Modal.Content>
+          <Modal.Footer>
+            <Button appearance="primary" width={1}>
+              Full-Width Button
+            </Button>
+          </Modal.Footer>
+        </React.Fragment>
+      </Modal>
+      <Modal
+        appElementSelector="#root"
+        isOpen={false}
+        onClose={jest.fn()}
+        closeButtonLabel="Close this dialog"
+        label="Example Modal"
+      >
+        <React.Fragment>
+          <Modal.Header bordered>
+            <Box>
+              <Text as="h1" fontSize={400} fontWeight="semibold">
+                Assign Chatbot
+              </Text>
+              <Text as="div" fontSize={200}>
+                The chatbot will respond to customers from this profile.
+              </Text>
+            </Box>
+            <Box>
+              <button>dummy button 1</button>
+              <button>dummy button 2</button>
+              <Modal.CloseButton />
+            </Box>
+          </Modal.Header>
+          <Modal.Content>{longContent}</Modal.Content>
+        </React.Fragment>
+      </Modal>
+      <Modal
+        appElementSelector="#root"
+        isOpen={true}
+        onClose={jest.fn()}
+        closeButtonLabel="Close this dialog"
+        label="Example Modal"
+      >
+        <React.Fragment>
+          <Modal.Header />
+          <Modal.Content>{longContent}</Modal.Content>
+          <Modal.Footer>
+            <Button appearance="primary" width={1}>
+              Full-Width Button
+            </Button>
+          </Modal.Footer>
+        </React.Fragment>
+      </Modal>
+      <Modal
+        width="500px"
+        appElementSelector="#root"
+        isOpen={true}
+        onClose={jest.fn()}
+        closeButtonLabel="Close this dialog"
+        label="Example Modal"
+      >
+        <React.Fragment>
+          <Modal.Header
+            title="Create Share Link"
+            subtitle="Anyone with this link will be able to view its contents."
+          />
+          <Modal.Content>
+            <FormField
+              label="Label"
+              helperText="This is some helpful helper text"
+            >
+              {
+                // is there a reason that the props are not passed to the input?
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                (props) => (
+                  <Input
+                    placeholder="Type the things..."
+                    name="title"
+                    id="title"
+                  />
+                )
+              }
+            </FormField>
+          </Modal.Content>
+          <Modal.Footer>
+            <Box display="flex" justifyContent="flex-end">
+              <Button appearance="primary">Create Link</Button>
+            </Box>
+          </Modal.Footer>
+        </React.Fragment>
+      </Modal>
+      <Modal
+        bg="container.background.decorative.purple"
+        width="500px"
+        appElementSelector="#root"
+        isOpen={true}
+        onClose={jest.fn()}
+        closeButtonLabel="Close this dialog"
+        label="Example Modal"
+      >
+        <React.Fragment>
+          <Modal.Header
+            title="Create Share Link"
+            subtitle="Anyone with this link will be able to view its contents."
+          />
+          <Modal.Content>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem
+            ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+            tempor incididunt ut labore et dolore magna aliqua.
+          </Modal.Content>
+          <Modal.Footer>
+            <Box display="flex" justifyContent="flex-end">
+              <Button appearance="primary">Create Link</Button>
+            </Box>
+          </Modal.Footer>
+        </React.Fragment>
+      </Modal>
+      {/* @ts-expect-error - test that missing required props is rejected */}
+      <Modal />
+    </>
+  );
+}
+
+export default ModalTypeTest;

package/src/index.ts

@@ -0,0 +1,5 @@
+import Modal from "./Modal";
+
+export default Modal;
+export { Modal };
+export * from "./ModalTypes";

package/src/styled.d.ts

@@ -0,0 +1,7 @@
+import "styled-components";
+import { TypeTheme } from "@sproutsocial/seeds-react-theme";
+
+declare module "styled-components" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface DefaultTheme extends TypeTheme {}
+}

package/src/styles.tsx

@@ -0,0 +1,141 @@
+import React from "react";
+import styled, { createGlobalStyle } from "styled-components";
+import { width, zIndex } from "styled-system";
+import ReactModal from "react-modal";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
+import Box, { type TypeContainerProps } from "@sproutsocial/seeds-react-box";
+
+// This is the max space allowed between the modal and the edge of the browser
+const BODY_PADDING = "64px";
+
+const ReactModalAdapter = ({
+  className = "",
+  ...props
+}: { className?: string } & Omit<
+  ReactModal.Props,
+  "portalClassName" | "className" | "overlayClassName"
+>) => {
+  // We want to create *__Content and *__Overlay class names on the subcomponents.
+  // Because `className` could be a space-separated list of class names, we make
+  // sure that we append `__Content` and `__Overlay` to every class name.
+  const contentClassName = className
+    .split(" ")
+    .map((className) => `${className} ${className}__Content`)
+    .join(" ");
+
+  const overlayClassName = className
+    .split(" ")
+    .map((className) => `${className} ${className}__Overlay`)
+    .join(" ");
+
+  return (
+    <ReactModal
+      portalClassName={className}
+      className={contentClassName}
+      overlayClassName={overlayClassName}
+      {...props}
+    />
+  );
+};
+
+export const Body = createGlobalStyle`
+  .ReactModal__Body--open {
+    overflow: hidden;
+  }
+`;
+
+export const Container = styled(ReactModalAdapter)<TypeContainerProps>`
+  &__Overlay {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: ${(props) => props.theme.colors.overlay.background.base};
+    opacity: 0;
+    will-change: opacity;
+    transition: opacity ${(props) => props.theme.duration.medium}
+      ${(props) => props.theme.easing.ease_inout};
+
+    ${zIndex}
+
+    &.ReactModal__Overlay--after-open {
+      opacity: 1;
+    }
+    &.ReactModal__Overlay--before-close {
+      opacity: 0;
+    }
+  }
+
+  &__Content {
+    display: flex;
+    flex-direction: column;
+    background: ${(props) => props.theme.colors.container.background.base};
+    border-radius: ${(props) => props.theme.radii[600]};
+    box-shadow: ${(props) => props.theme.shadows.medium};
+    filter: blur(0);
+    color: ${(props) => props.theme.colors.text.body};
+
+    outline: none;
+    max-width: calc(100vw - ${BODY_PADDING});
+    max-height: calc(100vh - ${BODY_PADDING});
+    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+      /**
+       * This prevents the modal from being very short in IE11. Better too big
+       * than too small.
+       */
+      height: calc(100vh - ${BODY_PADDING});
+    }
+
+    ${width}
+
+    ${COMMON}
+  }
+`;
+
+export const Content = styled(Box)`
+  font-family: ${(props) => props.theme.fontFamily};
+  min-height: 80px;
+  overflow-y: auto;
+  flex: 1 1 auto;
+  padding: ${(props) => props.theme.space[400]}
+    ${(props) => props.theme.space[450]};
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    /* 'flex-basis: auto' breaks overflow in IE11 */
+    flex-basis: 100%;
+  }
+`;
+
+export const HeaderContainer = styled(Box)`
+  font-family: ${(props) => props.theme.fontFamily};
+  padding: ${(props) => props.theme.space[400]}
+    ${(props) => props.theme.space[450]};
+`;
+
+export const Header = styled(HeaderContainer)<{ bordered?: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 0 0 auto;
+  border-bottom-width: ${(props) => props.theme.borderWidths[500]};
+  border-bottom-color: ${(props) =>
+    props.bordered ? props.theme.colors.container.border.base : "transparent"};
+  border-bottom-style: solid;
+`;
+
+export const Footer = styled(Box)`
+  flex: 0 0 auto;
+  font-family: ${(props) => props.theme.fontFamily};
+  padding: ${(props) => props.theme.space[400]}
+    ${(props) => props.theme.space[450]};
+  border-bottom-right-radius: ${(props) => props.theme.radii[500]};
+  border-bottom-left-radius: ${(props) => props.theme.radii[500]};
+`;
+
+Container.displayName = "ModalContainer";
+Content.displayName = "Content";
+Header.displayName = "Modal.Header";
+Footer.displayName = "Modal.Footer";

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@sproutsocial/seeds-tsconfig/bundler/dom/library-monorepo",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "module": "esnext"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "coverage"]
+}

package/tsup.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig((options) => ({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  clean: true,
+  legacyOutput: true,
+  dts: options.dts,
+  external: ["react"],
+  sourcemap: true,
+  metafile: options.metafile,
+}));