@sproutsocial/seeds-react-drawer 1.0.0

package/src/DrawerTypes.ts

@@ -0,0 +1,80 @@
+import * as React from "react";
+import type {
+  TypeSystemCommonProps,
+  TypeStyledComponentsCommonProps,
+} from "@sproutsocial/seeds-react-system-props";
+import type { TypeBoxProps } from "@sproutsocial/seeds-react-box";
+import type { TypeButtonProps } from "@sproutsocial/seeds-react-button";
+
+type DrawerAnimationDirection = "left" | "right";
+
+export interface TypeDrawerContext {
+  /** Callback for close button */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onClose?: () => any;
+
+  /** aria-label for drawer close button */
+  closeButtonLabel?: string;
+}
+// TODO: Should the render prop be a React.FC?
+export interface TypeDrawerCloseButtonProps
+  extends Omit<TypeButtonProps, "children"> {
+  /** An optional function that receives the context of the parent drawer as an argument. Can be used to customize the on-close behavior. */
+  render?: React.FC<TypeDrawerContext>;
+  children?: React.ReactNode;
+}
+
+export interface TypeDrawerHeaderProps extends TypeBoxProps {
+  title?: string;
+  children?: React.ReactNode;
+
+  /** An optional function that receives the context of the parent drawer as an argument. Can be used to customize the appearance of the header. */
+  render?: React.FC<TypeDrawerContext>;
+}
+
+export interface TypeInnerDrawerProps
+  extends Omit<TypeDrawerProps, "closeButtonLabel"> {
+  width: number;
+  direction: DrawerAnimationDirection;
+}
+
+type useBodyClicksProps = Pick<
+  TypeDrawerProps,
+  "closeTargets" | "onClose" | "disableCloseOnClickOutside"
+>;
+
+export interface TypeUseCloseOnBodyClickProps
+  extends Pick<
+    TypeDrawerProps,
+    "closeTargets" | "onClose" | "disableCloseOnClickOutside"
+  > {
+  ref?: React.RefObject<HTMLElement | null>;
+}
+
+export interface TypeDrawerProps
+  extends TypeStyledComponentsCommonProps,
+    TypeSystemCommonProps,
+    Omit<React.ComponentPropsWithoutRef<"nav">, "color"> {
+  children: React.ReactNode;
+
+  /** Label for the close button. Usually this should be "Close" */
+  closeButtonLabel: string;
+
+  /** Whether the drawer slides in from the left or right side of the screen */
+  direction?: DrawerAnimationDirection;
+
+  /** In some cases, you may not want the user to be able to click outside of the drawer to close it. You can disable that with this prop. */
+  disableCloseOnClickOutside?: boolean;
+  id: string;
+  isOpen: boolean;
+  offset?: number;
+  onClose: () => void;
+  zIndex?: number;
+  closeTargets?: Array<Element>;
+  width?: number;
+  focusLockExemptCheck?: (element: HTMLElement) => boolean;
+}
+
+export interface TypeDrawerContentProps extends TypeBoxProps {
+  children?: React.ReactNode;
+}

package/src/__tests__/Drawer.test.tsx

@@ -0,0 +1,188 @@
+/* eslint-disable testing-library/prefer-screen-queries */
+
+import React, { useState } from "react";
+import {
+  render as testRender,
+  fireEvent,
+  waitFor,
+} from "@sproutsocial/seeds-react-testing-library";
+import type { TypeDrawerProps } from "../DrawerTypes";
+import Drawer from "../Drawer";
+
+const StatefulDrawer = ({
+  isOpen,
+  onClose,
+  children,
+  ...rest
+}: TypeDrawerProps) => {
+  const [isDrawerOpen, setIsDrawerOpen] = useState(isOpen || false);
+
+  const onDrawerClose = () => {
+    setIsDrawerOpen(false);
+    onClose();
+  };
+
+  return (
+    <Drawer
+      {...rest}
+      isOpen={isDrawerOpen}
+      onClose={onDrawerClose}
+      id="1"
+      closeButtonLabel="close button"
+    >
+      {children}
+    </Drawer>
+  );
+};
+
+const render = ({
+  isOpen = false,
+  direction,
+  disableCloseOnClickOutside,
+  children = (
+    <React.Fragment>
+      <Drawer.Header title="Drawer Header" id="drawer-1-header" />
+      <Drawer.Content>
+        <p>Drawer Content</p>
+      </Drawer.Content>
+    </React.Fragment>
+  ),
+  offset,
+  onClose = jest.fn(),
+  id = "drawer",
+  closeButtonLabel = "close",
+  width = 600,
+}: Partial<TypeDrawerProps>) => {
+  const { baseElement } = testRender(<div id="main-content" />);
+  const mainContentRef = baseElement.querySelector("#main-content");
+  return testRender(
+    <div>
+      {baseElement.innerHTML}
+      <StatefulDrawer
+        isOpen={isOpen}
+        direction={direction}
+        offset={offset}
+        onClose={onClose}
+        closeButtonLabel={closeButtonLabel}
+        id={id}
+        disableCloseOnClickOutside={disableCloseOnClickOutside}
+        // @ts-ignore - We'll come back to test updating this
+        closeTargets={[mainContentRef]}
+        width={width}
+      >
+        {children}
+      </StatefulDrawer>
+    </div>
+  );
+};
+
+describe("Drawer", () => {
+  it("should not be in the document by default", () => {
+    const { queryByText } = render({});
+    expect(queryByText(/drawer content/i)).not.toBeInTheDocument();
+  });
+
+  it("should render drawer", () => {
+    const { getByText } = render({
+      isOpen: true,
+    });
+    expect(getByText(/drawer content/i)).toBeInTheDocument();
+  });
+
+  it("should close drawer on header click", async () => {
+    const { queryByText, getByText, getByLabelText } = render({
+      isOpen: true,
+    });
+    expect(getByText(/drawer content/i)).toBeInTheDocument();
+    fireEvent.click(getByLabelText("close button"));
+    await waitFor(() => {
+      expect(queryByText(/drawer content/i)).not.toBeInTheDocument();
+    });
+  });
+
+  it("should close drawer on header click when using custom header", async () => {
+    const { queryByText, getByText, getByLabelText } = render({
+      isOpen: true,
+      children: (
+        <React.Fragment>
+          <Drawer.Header>
+            <h1>Title</h1>
+            <Drawer.CloseButton />
+          </Drawer.Header>
+          <Drawer.Content>
+            <p>Drawer Content</p>
+          </Drawer.Content>
+        </React.Fragment>
+      ),
+    });
+    expect(getByText(/drawer content/i)).toBeInTheDocument();
+    fireEvent.click(getByLabelText("close button"));
+    await waitFor(() => {
+      expect(queryByText(/drawer content/i)).not.toBeInTheDocument();
+    });
+  });
+
+  it("should close drawer on outside click", async () => {
+    const { baseElement, queryByText, getByText } = render({
+      isOpen: true,
+    });
+    expect(getByText(/drawer content/i)).toBeInTheDocument();
+    fireEvent.click(baseElement.querySelector("#main-content") as Element);
+    await waitFor(() => {
+      expect(queryByText(/drawer content/i)).not.toBeInTheDocument();
+    });
+  });
+
+  it("should not close drawer on outside click when disabled", async () => {
+    const { baseElement, queryByText, getByText } = render({
+      isOpen: true,
+      disableCloseOnClickOutside: true,
+    });
+    expect(getByText(/drawer content/i)).toBeInTheDocument();
+    fireEvent.click(baseElement.querySelector("#main-content") as Element);
+    await waitFor(() => {
+      // eslint-disable-next-line testing-library/prefer-presence-queries
+      expect(queryByText(/drawer content/i)).toBeInTheDocument();
+    });
+  });
+
+  it("should close drawer on esc key", async () => {
+    const { baseElement, queryByText, getByText } = render({
+      isOpen: true,
+      disableCloseOnClickOutside: true,
+    });
+    expect(getByText(/drawer content/i)).toBeInTheDocument();
+    fireEvent.keyDown(baseElement, {
+      key: "Escape",
+    });
+    await waitFor(() => {
+      expect(queryByText(/drawer content/i)).not.toBeInTheDocument();
+    });
+  });
+  it("should have dialog role", () => {
+    const { getByRole } = render({
+      isOpen: true,
+    });
+    expect(getByRole("dialog")).toBeInTheDocument();
+  });
+  it("should have focus on drawer when opened", () => {
+    const { getByLabelText } = render({
+      isOpen: true,
+    });
+    expect(getByLabelText("close button")).toHaveFocus();
+  });
+  it("should have an h2 with id", () => {
+    const { getByRole } = render({
+      isOpen: true,
+    });
+    expect(getByRole("heading")).toHaveAttribute("id", "drawer-1-header");
+  });
+  it("should be 600px wide by default", () => {
+    const { getByRole } = render({ isOpen: true });
+    expect(getByRole("dialog")).toHaveStyle("width: 600px");
+  });
+  it("should customize the drawer width when provided", () => {
+    const { getByRole } = render({ isOpen: true, width: 400 });
+    expect(getByRole("dialog")).toHaveStyle("width: 400px");
+  });
+});

package/src/__tests__/Drawer.typetest.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import Drawer from "../Drawer";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function DrawerTypes() {
+  const componentProps = {
+    id: "drawer-1",
+    closeButtonLabel: "close",
+    isOpen: true,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onClose: jest.fn(),
+    children: "Drawer Content",
+  };
+
+  return (
+    <>
+      <Drawer {...componentProps} />
+      <Drawer {...componentProps} direction="left">
+        <Drawer.Header title="test1">
+          <h1>Drawer Header</h1>
+        </Drawer.Header>
+        <Drawer.Content>
+          <p>Drawer Content</p>
+        </Drawer.Content>
+      </Drawer>
+      {/* @ts-expect-error - test that invalid type is rejected */}
+      <Drawer />
+      {/* @ts-expect-error - test that invalid type is rejected */}
+      <Drawer direction={true}>
+        <Drawer.Header>
+          <h1>Drawer Header</h1>
+        </Drawer.Header>
+        <Drawer.Content>
+          <p>Drawer Content</p>
+        </Drawer.Content>
+      </Drawer>
+    </>
+  );
+}

package/src/index.ts

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

package/src/styles.ts

@@ -0,0 +1,35 @@
+import type { TypeDrawerProps } from "./DrawerTypes";
+import styled, { css } from "styled-components";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
+import type { TypeSystemCommonProps } from "@sproutsocial/seeds-react-system-props";
+
+import Box from "@sproutsocial/seeds-react-box";
+
+export const Content = styled(Box)`
+  overflow-y: auto;
+`;
+
+interface ContainerType
+  extends Pick<TypeDrawerProps, "offset" | "direction">,
+    TypeSystemCommonProps {
+  width: number;
+}
+
+const Container = styled.div<ContainerType>`
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  top: 0;
+  height: 100%;
+  width: ${(props) => props.width}px;
+  background-color: ${(props) => props.theme.colors.container.background.base};
+  box-shadow: ${(props) => props.theme.shadows.high};
+  filter: blur(0);
+
+  ${(props) => css`
+    ${props.direction}: ${props.offset}px;
+  `}
+
+  ${COMMON}
+`;
+export default Container;

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,
+}));