@sproutsocial/seeds-react-drawer 1.0.0

package/src/Drawer.stories.tsx

@@ -0,0 +1,378 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Box } from "@sproutsocial/seeds-react-box";
+import { Button } from "@sproutsocial/seeds-react-button";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+// import { Tabs } from "@sproutsocial/seeds-react-tabs";
+import { Text } from "@sproutsocial/seeds-react-text";
+import Drawer from "./Drawer";
+
+// @ts-ignore We'll come back to this later
+const StatefulDrawer = ({ isOpen = true, onClose, children, ...rest }) => {
+  const [isDrawerOpen, setIsDrawerOpen] = useState(isOpen);
+
+  const onDrawerClose = () => {
+    setIsDrawerOpen(false);
+    onClose();
+  };
+
+  return (
+    <React.Fragment>
+      <Drawer
+        {...rest}
+        isOpen={isDrawerOpen}
+        onClose={onDrawerClose}
+        closeButtonLabel="closer drawer"
+        id="drawer-1"
+      >
+        {children}
+      </Drawer>
+      <Button
+        appearance="primary"
+        onClick={() => setIsDrawerOpen(!isDrawerOpen)}
+      >
+        Toggle Drawer
+      </Button>
+    </React.Fragment>
+  );
+};
+
+// @ts-ignore We'll come back to this later
+const DrawerComponent = ({ direction, offset, width }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const onOpen = () => setIsOpen(true);
+
+  const onClose = () => setIsOpen(false);
+
+  return (
+    <Box>
+      <Box
+        width="100%"
+        bg="neutral.800"
+        display="flex"
+        justifyContent="flex-end"
+        padding={300}
+      >
+        <Button
+          appearance="secondary"
+          onClick={onOpen}
+          aria-label="View Notifications"
+        >
+          <Icon name="bell-outline" aria-hidden />
+        </Button>
+      </Box>
+      <Drawer
+        onClose={onClose}
+        isOpen={isOpen}
+        direction={direction}
+        offset={offset}
+        width={width}
+        id="notifications-drawer"
+        closeButtonLabel="close drawer"
+      >
+        <Drawer.Header title="Drawer Header" />
+        <Drawer.Content>
+          <Text color="text.body">Drawer Content</Text>
+        </Drawer.Content>
+      </Drawer>
+    </Box>
+  );
+};
+
+const BigDrawerContent = () => (
+  <Text.BodyCopy as="p">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac consectetur
+    tortor. Fusce ac rutrum nibh. Phasellus rhoncus sed neque vitae dictum. Nunc
+    viverra venenatis pellentesque. Proin lorem massa, ornare in mauris eget,
+    commodo malesuada lacus. Phasellus quis purus in velit pharetra malesuada
+    sit amet nec libero. Fusce porta nulla id elit condimentum, a aliquam quam
+    placerat. Duis cursus vel felis non tincidunt. Cras sed quam at sapien
+    posuere scelerisque. Vivamus tortor sem, faucibus faucibus feugiat eu,
+    auctor vitae ex. Nunc vitae purus sit amet nulla imperdiet bibendum sit amet
+    elementum tortor. Nam vitae dui vitae metus aliquam aliquet. Curabitur
+    faucibus lacus ante, eu volutpat urna placerat vitae. Sed et porta mauris.
+    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+    inceptos himenaeos. Praesent vel leo lectus.
+    <br />
+    <br />
+    Fusce ac vehicula dui. Quisque nec lacus a sapien lobortis sagittis eget
+    vitae lacus. Aenean quis lorem nec sapien vehicula consequat. Quisque
+    efficitur et eros in dapibus. Pellentesque sagittis vel dolor vitae
+    hendrerit. Ut elementum euismod iaculis. Maecenas lobortis urna lectus, nec
+    consequat quam facilisis a. Praesent aliquam ipsum quam, id dapibus nunc
+    facilisis ut. Ut rhoncus eu mauris nec congue. Etiam tempor ante in eros
+    ullamcorper feugiat. In nec diam leo. Quisque dignissim, purus nec porttitor
+    viverra, nibh odio gravida orci, at tempor odio arcu eget felis.
+    <br />
+    <br />
+    Sed fringilla sem leo, eget molestie elit lobortis eu. Donec eget risus quis
+    ante placerat vulputate sit amet at ex. Curabitur pulvinar pellentesque
+    justo sed iaculis. Praesent bibendum fringilla eros, at dapibus augue.
+    Pellentesque iaculis, nulla vestibulum pretium placerat, leo lorem laoreet
+    lorem, vel dignissim urna nunc vel leo. Suspendisse eu ipsum pellentesque,
+    pharetra diam sed, sollicitudin neque. Duis ornare dolor at ultricies
+    facilisis. Proin vel ullamcorper justo, tincidunt condimentum nunc.
+    <br />
+    <br />
+    Morbi et elementum diam. In et imperdiet sem, in viverra lorem. Fusce sit
+    amet urna felis. Cras eget dolor ac diam gravida hendrerit. Proin id urna
+    sed lorem mattis vehicula. Nullam nec magna auctor, consequat metus quis,
+    fermentum urna. Suspendisse nec turpis sodales, condimentum enim ut, sodales
+    diam. Donec luctus enim mauris, at semper lectus sagittis a. Suspendisse mi
+    enim, convallis et aliquam quis, pharetra quis lorem. Praesent congue
+    posuere tellus, id ullamcorper mi bibendum sit amet. Praesent turpis leo,
+    tempor quis ex sit amet, efficitur viverra velit. Praesent nisi sem, aliquet
+    non nunc a, fringilla efficitur neque. Pellentesque elit est, malesuada
+    finibus orci quis, lobortis varius tellus.
+    <br />
+    <br />
+    Sed interdum nulla massa, non mollis velit imperdiet et. Nam risus magna,
+    pulvinar vulputate tristique a, ornare blandit nunc. Nam massa odio,
+    venenatis ut accumsan vel, maximus lobortis purus. Vestibulum vitae ultrices
+    odio. Morbi vitae ante sed tellus molestie blandit. Morbi porttitor mi quis
+    laoreet commodo. Donec vel rutrum ipsum. Nunc sollicitudin lacinia eros quis
+    mollis. Sed interdum nulla massa, non mollis velit imperdiet et. Nam risus
+    magna, pulvinar vulputate tristique a, ornare blandit nunc. Nam massa odio,
+    venenatis ut accumsan vel, maximus lobortis purus. Vestibulum vitae ultrices
+    odio. Morbi vitae ante sed tellus molestie blandit. Morbi porttitor mi quis
+    laoreet commodo. Donec vel rutrum ipsum. Nunc sollicitudin lacinia eros quis
+    mollis. Sed interdum nulla massa, non mollis velit imperdiet et. Nam risus
+    magna, pulvinar vulputate tristique a, ornare blandit nunc. Nam massa odio,
+    venenatis ut accumsan vel, maximus lobortis purus. Vestibulum vitae ultrices
+    odio. Morbi vitae ante sed tellus molestie blandit. Morbi porttitor mi quis
+    laoreet commodo. Donec vel rutrum ipsum. Nunc sollicitudin lacinia eros quis
+    mollis. Sed interdum nulla massa, non mollis velit imperdiet et. Nam risus
+    magna, pulvinar vulputate tristique a, ornare blandit nunc. Nam massa odio,
+    venenatis ut accumsan vel, maximus lobortis purus. Vestibulum vitae ultrices
+    odio. Morbi vitae ante sed tellus molestie blandit. Morbi porttitor mi quis
+    laoreet commodo. Donec vel rutrum ipsum. Nunc sollicitudin lacinia eros quis
+    mollis.
+  </Text.BodyCopy>
+);
+
+const meta: Meta<typeof Drawer> = {
+  title: "Components/Drawer",
+  component: Drawer,
+  args: {
+    direction: "right",
+    offset: 0,
+    isOpen: true,
+    width: 600,
+  },
+};
+export default meta;
+type Story = StoryObj<typeof Drawer>;
+
+export const DrawerWithDefaults: Story = {
+  name: "Drawer With Defaults",
+  render: (args) => (
+    <StatefulDrawer
+      direction={args.direction}
+      offset={args.offset}
+      isOpen={args.isOpen}
+      width={args.width}
+      onClose={() => {}}
+      id="drawer"
+      closeButtonLabel="close drawer"
+      aria-labeledby="drawer-1-header"
+      aria-describedby="drawer-1-content"
+    >
+      <Drawer.Header title="Drawer" id="drawer-1-header" />
+      <Drawer.Content id="drawer-1-content">
+        <BigDrawerContent />
+      </Drawer.Content>
+    </StatefulDrawer>
+  ),
+};
+
+export const DrawerWithHeaderChildren: Story = {
+  name: "Drawer With Header Children",
+  render: (args) => (
+    <StatefulDrawer
+      direction={args.direction}
+      offset={args.offset}
+      isOpen={args.isOpen}
+      width={args.width}
+      onClose={() => {}}
+      id="drawer"
+      closeButtonLabel="close drawer"
+    >
+      <Drawer.Header>
+        <Box flexGrow={1}>
+          {/* <Tabs
+            fullWidth
+            selectedId="1"
+            onSelect={() => {
+              // eslint-disable-next-line no-console
+              console.log("does nothing");
+            }}
+          >
+            <Tabs.Button id="1">
+              <Box display="flex" justifyContent="center" alignItems="center">
+                <Icon name="bell-outline" mr={350} aria-hidden />
+                <Text as="div" fontSize={200} fontWeight="semibold">
+                  Notifications
+                </Text>
+              </Box>
+            </Tabs.Button>
+            <Tabs.Button id="2">
+              <Box display="flex" justifyContent="center" alignItems="center">
+                <Icon name="triangle-exclamation-outline" mr={350} aria-hidden />
+                <Text as="div" fontSize={200} fontWeight="semibold">
+                  Issues
+                </Text>
+              </Box>
+            </Tabs.Button>
+          </Tabs> */}
+        </Box>
+        <Box display="flex">
+          <Button
+            onClick={() => {
+              // eslint-disable-next-line no-console
+              console.log("does nothing");
+            }}
+            data-qa-button="Filter"
+            mr={300}
+            aria-label="Filter"
+          >
+            <Icon name="filter-outline" aria-hidden />
+          </Button>
+          <Button
+            mr={300}
+            onClick={() => {
+              // eslint-disable-next-line no-console
+              console.log("does nothing");
+            }}
+            aria-label="Settings"
+          >
+            <Icon name="gear-outline" aria-hidden />
+          </Button>
+          <Drawer.CloseButton />
+        </Box>
+      </Drawer.Header>
+      <Drawer.Content>
+        <BigDrawerContent />
+      </Drawer.Content>
+    </StatefulDrawer>
+  ),
+};
+
+export const DrawerWithHeaderRender: Story = {
+  name: "Drawer With Header Render",
+  render: (args) => (
+    <StatefulDrawer
+      direction={args.direction}
+      offset={args.offset}
+      isOpen={args.isOpen}
+      width={args.width}
+      onClose={() => {}}
+      id="drawer"
+      closeButtonLabel="close drawer"
+    >
+      <Drawer.Header
+        render={({ onClose }) => (
+          <Box
+            display="flex"
+            justifyContent="space-between"
+            p={500}
+            border="2px solid purple"
+          >
+            <Text color="text.body">Type "close" to close drawer</Text>
+            <input
+              onChange={(event) =>
+                event.target.value === "close" && (onClose ? onClose() : null)
+              }
+            />
+          </Box>
+        )}
+      />
+      <Drawer.Content>
+        <BigDrawerContent />
+      </Drawer.Content>
+    </StatefulDrawer>
+  ),
+};
+
+export const DrawerWithCloseButtonChildren: Story = {
+  name: "Drawer With Close Button Children",
+  render: (args) => (
+    <StatefulDrawer
+      direction={args.direction}
+      offset={args.offset}
+      isOpen={args.isOpen}
+      width={args.width}
+      onClose={() => {}}
+      id="drawer"
+      closeButtonLabel="close drawer"
+      aria-labeledby="drawer-with-close-button-header"
+      aria-describedby="drawer-with-close-button-content"
+    >
+      <Drawer.Header alignItems="center">
+        <Text.Headline as="h2" id="drawer-with-close-button-header">
+          Hello
+        </Text.Headline>
+        <Drawer.CloseButton appearance="primary">Close Me</Drawer.CloseButton>
+      </Drawer.Header>
+      <Drawer.Content id="drawer-with-close-button-content">
+        <BigDrawerContent />
+      </Drawer.Content>
+    </StatefulDrawer>
+  ),
+};
+
+export const DrawerWithCloseButtonRender: Story = {
+  name: "Drawer With Close Button Render",
+  render: (args) => (
+    <StatefulDrawer
+      direction={args.direction}
+      offset={args.offset}
+      isOpen={args.isOpen}
+      width={args.width}
+      onClose={() => {}}
+      id="drawer"
+      closeButtonLabel="close drawer"
+    >
+      <Drawer.Header alignItems="center">
+        <Text.BodyCopy>
+          This Drawer Will Close three seconds after clicking the "X"
+        </Text.BodyCopy>
+        <Drawer.CloseButton
+          render={({ onClose, closeButtonLabel }) => {
+            const newOnClose = () => {
+              setTimeout(() => {
+                // eslint-disable-next-line no-console
+                console.log("close");
+                onClose && onClose();
+              }, 3000);
+            };
+
+            return (
+              <Button
+                appearance="pill"
+                onClick={newOnClose}
+                ariaLabel={closeButtonLabel}
+              >
+                <Icon name="x-outline" aria-hidden />
+              </Button>
+            );
+          }}
+        />
+      </Drawer.Header>
+      <Drawer.Content>
+        <BigDrawerContent />
+      </Drawer.Content>
+    </StatefulDrawer>
+  ),
+};
+
+export const fromLeft: Story = {
+  name: "From left",
+  args: {
+    direction: "left",
+    offset: 0,
+  },
+  // @ts-ignore We'll come back to this later
+  render: (args) => <DrawerComponent {...args} />,
+};

package/src/Drawer.tsx

@@ -0,0 +1,308 @@
+import * as React from "react";
+import { useContext, useEffect, useRef } from "react";
+import FocusLock from "react-focus-lock";
+import { animated, useTransition } from "@react-spring/web";
+import { MOTION_DURATION_MEDIUM } from "@sproutsocial/seeds-motion/unitless";
+import Box from "@sproutsocial/seeds-react-box";
+import Button from "@sproutsocial/seeds-react-button";
+import Icon from "@sproutsocial/seeds-react-icon";
+// eslint-disable-next-line import/no-deprecated
+import Text from "@sproutsocial/seeds-react-text";
+import Portal from "@sproutsocial/seeds-react-portal";
+import Container, { Content } from "./styles";
+import type {
+  TypeDrawerContext,
+  TypeDrawerCloseButtonProps,
+  TypeDrawerHeaderProps,
+  TypeDrawerProps,
+  TypeInnerDrawerProps,
+  TypeDrawerContentProps,
+  TypeUseCloseOnBodyClickProps,
+} from "./DrawerTypes";
+
+const useSlideTransition = ({
+  isVisible,
+  width,
+  direction,
+}: {
+  isVisible: boolean;
+  width: number;
+  direction: "left" | "right";
+}) => {
+  const offset = width * (direction === "left" ? -1 : 1);
+
+  return useTransition(isVisible, {
+    from: {
+      opacity: 0,
+      x: offset,
+    },
+    enter: {
+      opacity: 1,
+      x: 0,
+    },
+    leave: {
+      opacity: 0,
+      x: offset,
+    },
+    config: {
+      duration: MOTION_DURATION_MEDIUM * 1000,
+    },
+  });
+};
+
+const AnimatedDrawer = animated(Container);
+
+const doesRefContainEventTarget = (
+  ref: { current: { contains: (arg0: any) => any } },
+  event: Event
+) => {
+  return (
+    ref.current &&
+    event.target instanceof Node &&
+    ref.current.contains(event.target)
+  );
+};
+
+const DrawerContext = React.createContext<TypeDrawerContext>({});
+
+const DrawerCloseButton = (props: TypeDrawerCloseButtonProps) => {
+  const { onClose, closeButtonLabel } = useContext(DrawerContext);
+
+  if (props.render) {
+    return (
+      props.render({
+        onClose,
+        closeButtonLabel,
+      }) ?? null
+    );
+  }
+
+  return (
+    <Button
+      appearance="pill"
+      aria-label={closeButtonLabel}
+      onClick={onClose}
+      {...props}
+    >
+      {props.children || <Icon aria-hidden name="x-outline" />}
+    </Button>
+  );
+};
+
+const DrawerHeader = ({
+  title = "",
+  id = undefined,
+  children,
+  render,
+  ...rest
+}: TypeDrawerHeaderProps) => {
+  const drawerContext = useContext(DrawerContext);
+
+  if (render) {
+    return render(drawerContext);
+  }
+
+  return (
+    <Box
+      display="flex"
+      flex="0 0 auto"
+      justifyContent="space-between"
+      alignItems="center"
+      pt={400}
+      px={450}
+      {...rest}
+    >
+      {children || (
+        <React.Fragment>
+          <Text
+            as="h2"
+            fontSize={400}
+            fontWeight="semibold"
+            color="text.headline"
+            id={id}
+          >
+            {title}
+          </Text>
+          <DrawerCloseButton />
+        </React.Fragment>
+      )}
+    </Box>
+  );
+};
+
+const DrawerContent = ({ children, ...rest }: TypeDrawerContentProps) => (
+  <Content height="100%" p={450} color="text.body" {...rest}>
+    {children}
+  </Content>
+);
+
+const useCloseOnBodyClick = ({
+  ref,
+  disableCloseOnClickOutside,
+  onClose,
+  closeTargets,
+}: TypeUseCloseOnBodyClickProps) => {
+  useEffect(() => {
+    const documentBody = document.body;
+
+    if (!documentBody) {
+      return;
+    }
+
+    const onEsc = (event: KeyboardEvent): void => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    };
+
+    const bodyClick = (event: Event): void => {
+      if (
+        // @ts-ignore I'm not sure how to type this ref properly
+        !doesRefContainEventTarget(ref, event) &&
+        !disableCloseOnClickOutside
+      ) {
+        onClose();
+      }
+    };
+
+    documentBody?.addEventListener("keydown", onEsc, { capture: true });
+
+    if (closeTargets) {
+      closeTargets.forEach((targetElement) =>
+        targetElement?.addEventListener("click", bodyClick, { capture: true })
+      );
+    } else {
+      documentBody.firstElementChild?.addEventListener("click", bodyClick, {
+        capture: true,
+      });
+    }
+
+    return () => {
+      documentBody?.removeEventListener("keydown", onEsc, { capture: true });
+
+      if (closeTargets) {
+        closeTargets.forEach((targetElement) =>
+          targetElement?.removeEventListener("click", bodyClick, {
+            capture: true,
+          })
+        );
+      } else {
+        documentBody.firstElementChild?.removeEventListener(
+          "click",
+          bodyClick,
+          { capture: true }
+        );
+      }
+    };
+  }, [onClose, disableCloseOnClickOutside, closeTargets, ref]);
+};
+
+const Drawer = ({
+  id,
+  offset,
+  direction,
+  children,
+  disableCloseOnClickOutside,
+  onClose,
+  zIndex,
+  closeTargets,
+  width,
+  focusLockExemptCheck,
+  isOpen,
+  ...rest
+}: TypeInnerDrawerProps) => {
+  const ref = useRef(null);
+  useCloseOnBodyClick({
+    ref,
+    disableCloseOnClickOutside,
+    onClose,
+    closeTargets,
+  });
+
+  const transition = useSlideTransition({
+    isVisible: isOpen,
+    width,
+    direction,
+  });
+
+  return (
+    <FocusLock
+      key={id}
+      autoFocus={true}
+      returnFocus
+      whiteList={
+        focusLockExemptCheck ? (e) => !focusLockExemptCheck(e) : undefined
+      }
+    >
+      {transition((style, isVisible) =>
+        isVisible ? (
+          <AnimatedDrawer
+            ref={ref}
+            style={{ ...style, zIndex }}
+            width={width}
+            offset={offset}
+            direction={direction}
+            data-qa-drawer={id}
+            role="dialog"
+            {...rest}
+          >
+            {children}
+          </AnimatedDrawer>
+        ) : null
+      )}
+    </FocusLock>
+  );
+};
+
+const DrawerContainer = ({
+  children,
+  closeButtonLabel,
+  direction = "right",
+  disableCloseOnClickOutside = false,
+  id,
+  isOpen,
+  offset = 0,
+  onClose,
+  zIndex = 7,
+  closeTargets = [],
+  width = 600,
+  ...rest
+}: TypeDrawerProps) => {
+  return (
+    <Portal id={id}>
+      <DrawerContext.Provider
+        value={{
+          onClose,
+          closeButtonLabel,
+        }}
+      >
+        <Drawer
+          isOpen={isOpen}
+          id={id}
+          offset={offset}
+          direction={direction}
+          disableCloseOnClickOutside={disableCloseOnClickOutside}
+          onClose={onClose}
+          zIndex={zIndex}
+          closeTargets={closeTargets}
+          width={width}
+          data-qa-drawer={id || ""}
+          data-qa-drawer-isopen={isOpen}
+          {...rest}
+        >
+          {children}
+        </Drawer>
+      </DrawerContext.Provider>
+    </Portal>
+  );
+};
+
+DrawerHeader.displayName = "Drawer.Header";
+DrawerContent.displayName = "Drawer.Content";
+DrawerCloseButton.displayName = "Drawer.CloseButton";
+
+DrawerContainer.Header = DrawerHeader;
+DrawerContainer.Content = DrawerContent;
+DrawerContainer.CloseButton = DrawerCloseButton;
+
+export default DrawerContainer;