@sproutsocial/seeds-react-modal 1.0.0

package/src/Modal.stories.tsx

@@ -0,0 +1,420 @@
+import React, { useState, type FC } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Box } from "@sproutsocial/seeds-react-box";
+import { Button } from "@sproutsocial/seeds-react-button";
+import { FormField } from "@sproutsocial/seeds-react-form-field";
+import { Input } from "@sproutsocial/seeds-react-input";
+import { Text } from "@sproutsocial/seeds-react-text";
+import Modal from "./Modal";
+
+export interface StatefulStoryProps<T> {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  children: FC<{ state: T; setState: (state: T) => void }>;
+  initialState: T;
+}
+
+export function StatefulStory<T>({
+  children,
+  initialState,
+}: StatefulStoryProps<T>) {
+  const [state, setState] = useState<T>(initialState);
+  return children({ state, setState });
+}
+
+const meta: Meta<typeof Modal> = {
+  title: "Components/Modal",
+  component: Modal,
+};
+export default meta;
+
+type Story = StoryObj<typeof Modal>;
+
+export const Default: Story = {
+  render: () => (
+    <StatefulStory
+      initialState={{
+        isOpen: false,
+      }}
+    >
+      {({ setState, state }) => (
+        <div>
+          <Button
+            appearance="primary"
+            onClick={() =>
+              setState({
+                isOpen: !state.isOpen,
+              })
+            }
+          >
+            Open Modal
+          </Button>
+          <Box height="2000px" color="text.body">
+            Really tall box.
+          </Box>
+          <Modal
+            appElementSelector="#root"
+            isOpen={state.isOpen}
+            onClose={() =>
+              setState({
+                isOpen: !state.isOpen,
+              })
+            }
+            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>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                {/* ...existing content... */}
+              </Modal.Content>
+              <Modal.Footer>
+                <Button appearance="primary" width={1}>
+                  Full-Width Button
+                </Button>
+              </Modal.Footer>
+            </React.Fragment>
+          </Modal>
+        </div>
+      )}
+    </StatefulStory>
+  ),
+};
+
+export const NotCloseable: Story = {
+  render: () => (
+    <StatefulStory
+      initialState={{
+        isOpen: false,
+      }}
+    >
+      {({ setState, state }) => (
+        <div>
+          <Button
+            appearance="primary"
+            onClick={() =>
+              setState({
+                isOpen: !state.isOpen,
+              })
+            }
+          >
+            Open Modal
+          </Button>
+          <Box height="2000px" color="text.body">
+            Really tall box.
+          </Box>
+          <Modal
+            appElementSelector="#root"
+            isOpen={state.isOpen}
+            closeButtonLabel="n/a"
+            label="Example Modal"
+          >
+            <React.Fragment>
+              <Modal.Content>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                {/* ...existing content... */}
+              </Modal.Content>
+              <Modal.Footer>
+                <Button
+                  appearance="primary"
+                  width={1}
+                  onClick={() =>
+                    setState({
+                      isOpen: !state.isOpen,
+                    })
+                  }
+                >
+                  Must click to close
+                </Button>
+              </Modal.Footer>
+            </React.Fragment>
+          </Modal>
+        </div>
+      )}
+    </StatefulStory>
+  ),
+};
+
+export const CustomHeader: Story = {
+  render: () => (
+    <StatefulStory
+      initialState={{
+        isOpen: false,
+      }}
+    >
+      {({ setState, state }) => (
+        <div>
+          <Button
+            appearance="primary"
+            onClick={() =>
+              setState({
+                isOpen: !state.isOpen,
+              })
+            }
+          >
+            Open Modal
+          </Button>
+          <Modal
+            appElementSelector="#root"
+            isOpen={state.isOpen}
+            onClose={() =>
+              setState({
+                isOpen: !state.isOpen,
+              })
+            }
+            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>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                {/* ...existing content... */}
+              </Modal.Content>
+              <Modal.Footer>
+                <Button appearance="primary" width={1}>
+                  Full-Width Button
+                </Button>
+              </Modal.Footer>
+            </React.Fragment>
+          </Modal>
+        </div>
+      )}
+    </StatefulStory>
+  ),
+};
+
+export const NoFooter: Story = {
+  render: () => (
+    <StatefulStory
+      initialState={{
+        isOpen: false,
+      }}
+    >
+      {({ setState, state }) => (
+        <div>
+          <Button
+            appearance="primary"
+            onClick={() =>
+              setState({
+                isOpen: !state.isOpen,
+              })
+            }
+          >
+            Open Modal
+          </Button>
+          <Modal
+            appElementSelector="#root"
+            isOpen={state.isOpen}
+            onClose={() =>
+              setState({
+                isOpen: !state.isOpen,
+              })
+            }
+            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>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                {/* ...existing content... */}
+              </Modal.Content>
+            </React.Fragment>
+          </Modal>
+        </div>
+      )}
+    </StatefulStory>
+  ),
+};
+
+export const NoTitle: Story = {
+  render: () => (
+    <StatefulStory
+      initialState={{
+        isOpen: false,
+      }}
+    >
+      {({ setState, state }) => (
+        <div>
+          <Button
+            appearance="primary"
+            onClick={() =>
+              setState({
+                isOpen: !state.isOpen,
+              })
+            }
+          >
+            Open Modal
+          </Button>
+          <Modal
+            appElementSelector="#root"
+            isOpen={state.isOpen}
+            onClose={() =>
+              setState({
+                isOpen: !state.isOpen,
+              })
+            }
+            closeButtonLabel="Close this dialog"
+            label="Example Modal"
+          >
+            <React.Fragment>
+              <Modal.Header />
+              <Modal.Content>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                {/* ...existing content... */}
+              </Modal.Content>
+              <Modal.Footer>
+                <Button appearance="primary" width={1}>
+                  Full-Width Button
+                </Button>
+              </Modal.Footer>
+            </React.Fragment>
+          </Modal>
+        </div>
+      )}
+    </StatefulStory>
+  ),
+};
+
+export const WithForm: Story = {
+  render: () => (
+    <StatefulStory
+      initialState={{
+        isOpen: false,
+      }}
+    >
+      {({ setState, state }) => (
+        <div>
+          <Button
+            appearance="primary"
+            onClick={() =>
+              setState({
+                isOpen: !state.isOpen,
+              })
+            }
+          >
+            Open Modal
+          </Button>
+          <Modal
+            width="500px"
+            appElementSelector="#root"
+            isOpen={state.isOpen}
+            onClose={() =>
+              setState({
+                isOpen: !state.isOpen,
+              })
+            }
+            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 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>
+        </div>
+      )}
+    </StatefulStory>
+  ),
+};
+
+export const CustomBackgroundColor: Story = {
+  render: () => (
+    <StatefulStory
+      initialState={{
+        isOpen: false,
+      }}
+    >
+      {({ setState, state }) => (
+        <div>
+          <Button
+            appearance="primary"
+            onClick={() =>
+              setState({
+                isOpen: !state.isOpen,
+              })
+            }
+          >
+            Open Modal
+          </Button>
+          <Modal
+            bg="container.background.decorative.purple"
+            width="500px"
+            appElementSelector="#root"
+            isOpen={state.isOpen}
+            onClose={() =>
+              setState({
+                isOpen: !state.isOpen,
+              })
+            }
+            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.
+                {/* ...existing content... */}
+              </Modal.Content>
+              <Modal.Footer>
+                <Box display="flex" justifyContent="flex-end">
+                  <Button appearance="primary">Create Link</Button>
+                </Box>
+              </Modal.Footer>
+            </React.Fragment>
+          </Modal>
+        </div>
+      )}
+    </StatefulStory>
+  ),
+};

package/src/Modal.tsx

@@ -0,0 +1,160 @@
+import * as React from "react";
+import { useContext } from "react";
+import Box from "@sproutsocial/seeds-react-box";
+import Button from "@sproutsocial/seeds-react-button";
+import Icon from "@sproutsocial/seeds-react-icon";
+import Text from "@sproutsocial/seeds-react-text";
+import { Container, Content, Header, Footer, Body } from "./styles";
+import type {
+  TypeModalProps,
+  TypeModalCloseButtonProps,
+  TypeModalContentProps,
+  TypeModalFooterProps,
+  TypeModalHeaderProps,
+} from "./ModalTypes";
+
+type TypeModalContext = Partial<{
+  onClose: () => void;
+  closeButtonLabel: string;
+  label: string;
+}>;
+
+const ModalContext = React.createContext<TypeModalContext>({});
+
+const ModalHeader = (props: TypeModalHeaderProps) => {
+  const { title, subtitle, children, bordered, ...rest } = props;
+  return (
+    <Header bordered={title || subtitle || bordered} {...rest}>
+      {children ? (
+        children
+      ) : (
+        <React.Fragment>
+          <Box>
+            {title && (
+              <Text as="h1" fontSize={400} fontWeight="semibold">
+                {title}
+              </Text>
+            )}
+            {subtitle && (
+              <Text as="div" fontSize={200}>
+                {subtitle}
+              </Text>
+            )}
+          </Box>
+          <Box display="flex" alignItems="center" justify-content="flex-end">
+            <ModalCloseButton ml={400} />
+          </Box>
+        </React.Fragment>
+      )}
+    </Header>
+  );
+};
+
+const ModalCloseButton = (props: TypeModalCloseButtonProps) => {
+  const { onClose, closeButtonLabel } = useContext(ModalContext);
+  if (!onClose) return null;
+  return (
+    <Button onClick={onClose} {...props}>
+      <Icon name="x-outline" ariaLabel={closeButtonLabel} />
+    </Button>
+  );
+};
+
+const ModalFooter = (props: TypeModalFooterProps) => (
+  <Footer borderTop={500} borderColor="container.border.base" {...props} />
+);
+
+ModalFooter.defaultProps = {
+  bg: "container.background.base",
+};
+
+const ModalContent = React.forwardRef(
+  ({ children, ...rest }: TypeModalContentProps, ref) => {
+    const { label } = useContext(ModalContext);
+    return (
+      <Content data-qa-modal data-qa-label={label} ref={ref} {...rest}>
+        {children}
+      </Content>
+    );
+  }
+);
+
+/**
+ * The modal you want
+ */
+const Modal = (props: TypeModalProps) => {
+  const {
+    appElementSelector,
+    children,
+    isOpen,
+    label,
+    onClose,
+    closeButtonLabel,
+    width,
+    zIndex,
+    data = {},
+    ...rest
+  } = props;
+
+  const isCloseable = Boolean(onClose);
+  const appElement =
+    appElementSelector && document
+      ? (document.querySelector(appElementSelector) as HTMLElement)
+      : undefined;
+
+  return (
+    <Container
+      appElement={appElement}
+      ariaHideApp={!!appElement}
+      isOpen={isOpen}
+      contentLabel={label}
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      onRequestClose={onClose || (() => {})}
+      shouldFocusAfterRender={true}
+      shouldCloseOnOverlayClick={isCloseable}
+      shouldCloseOnEsc={isCloseable}
+      shouldReturnFocusAfterClose={true}
+      closeTimeoutMS={200}
+      role="dialog"
+      width={width}
+      zIndex={zIndex}
+      data={{
+        "qa-modal": "",
+        "qa-modal-isopen": isOpen,
+        ...data,
+      }}
+      {...rest}
+    >
+      <React.Fragment>
+        <Body />
+
+        <ModalContext.Provider
+          value={{
+            onClose,
+            closeButtonLabel,
+            label,
+          }}
+        >
+          {children}
+        </ModalContext.Provider>
+      </React.Fragment>
+    </Container>
+  );
+};
+
+Modal.defaultProps = {
+  width: "800px",
+  zIndex: 6,
+};
+
+ModalHeader.displayName = "Modal.Header";
+ModalFooter.displayName = "Modal.Footer";
+ModalContent.displayName = "Modal.Content";
+ModalCloseButton.displayName = "Modal.CloseButton";
+
+Modal.Header = ModalHeader;
+Modal.Footer = ModalFooter;
+Modal.Content = ModalContent;
+Modal.CloseButton = ModalCloseButton;
+
+export default Modal;

package/src/ModalTypes.ts

@@ -0,0 +1,67 @@
+import * as React from "react";
+import ReactModal from "react-modal";
+import type {
+  TypeBoxProps,
+  TypeContainerProps,
+} from "@sproutsocial/seeds-react-box";
+import type { TypeButtonProps } from "@sproutsocial/seeds-react-button";
+
+export interface TypeModalCloseButtonProps
+  extends Omit<TypeButtonProps, "children"> {
+  children?: void | null;
+}
+
+export interface TypeModalHeaderProps extends TypeBoxProps {
+  title?: string;
+  subtitle?: string;
+
+  /** Passing children will override the default modal header */
+  children?: React.ReactNode;
+
+  /** If you're rendering a custom header, you can use this prop to add a bottom border */
+  bordered?: boolean;
+}
+
+export interface TypeModalFooterProps extends TypeBoxProps {
+  bg?: string;
+  children: React.ReactNode;
+}
+
+export interface TypeModalContentProps extends TypeBoxProps {
+  children?: React.ReactNode;
+}
+
+export interface TypeModalProps
+  extends TypeContainerProps,
+    // @ts-notes - onClose is an alias for onRequestClose so we don't need to include it here
+    Omit<ReactModal.Props, keyof TypeContainerProps | "onRequestClose"> {
+  /** section of app to aria hide for the modal */
+  appElementSelector?: string;
+
+  /** trigger to open or close the modal */
+  isOpen: boolean;
+
+  /** label for screen readers to announce the modal */
+  label: string;
+
+  /** body content of the modal */
+  children: React.ReactNode;
+
+  /** callback for close */
+  onClose?: () => void;
+
+  /** aria-label for modal X */
+  closeButtonLabel: string;
+
+  /** Controls the z-index CSS property */
+  zIndex?: number;
+
+  /** The max width of the modal container */
+  width?: string | number;
+
+  /**
+   * Custom attributes to be added to the modals container
+   * Each key will be prepended with "data-" when rendered in the DOM
+   */
+  data?: Record<string, string | boolean | number>;
+}