@purpurds/drawer 5.15.1

package/src/drawer-header.tsx

@@ -0,0 +1,117 @@
+import React, { ForwardedRef, forwardRef } from "react";
+import { Button, BUTTON_VARIANT } from "@purpurds/button";
+import { Heading, TitleVariant } from "@purpurds/heading";
+import { IconClose } from "@purpurds/icon";
+import { IconArrowLeft } from "@purpurds/icon";
+import * as RadixDialog from "@radix-ui/react-dialog";
+import c from "classnames/bind";
+
+import styles from "./drawer-header.module.scss";
+const cx = c.bind(styles);
+
+export type DrawerHeaderProps = {
+  ["data-testid"]?: string;
+  backButton: boolean;
+  backButtonText?: string;
+  backButtonOnlyIcon: boolean;
+  className?: string;
+  closeButtonText: string;
+  onBackButtonClick?: () => void;
+  title: string;
+};
+
+const rootClassName = "purpur-drawer-header";
+
+export const DrawerHeader = forwardRef(
+  (
+    {
+      ["data-testid"]: dataTestId = "purpur-drawer-header",
+      backButton,
+      backButtonText,
+      backButtonOnlyIcon,
+      className,
+      closeButtonText,
+      onBackButtonClick,
+      title,
+      ...props
+    }: DrawerHeaderProps,
+    ref: ForwardedRef<HTMLDivElement>
+  ) => {
+    const classes = cx([className, rootClassName]);
+
+    return (
+      <div className={classes} data-testid={dataTestId} ref={ref} {...props}>
+        <div
+          className={cx([
+            `${rootClassName}__row`,
+            {
+              [`${rootClassName}__row--with-back-button`]:
+                backButton && backButtonText && onBackButtonClick,
+            },
+          ])}
+          data-testid={`${dataTestId}-row`}
+        >
+          <div className={cx(`${rootClassName}__left`)}>
+            {backButton && backButtonText && onBackButtonClick ? (
+              <Button
+                aria-label={backButtonOnlyIcon ? backButtonText : ""}
+                className={cx([
+                  `${rootClassName}__back-button`,
+                  {
+                    [`${rootClassName}__back-button--only-icon`]: backButtonOnlyIcon,
+                  },
+                ])}
+                data-testid={`${dataTestId}-back-button`}
+                iconOnly={backButtonOnlyIcon}
+                onClick={onBackButtonClick}
+                size="sm"
+                variant={backButtonOnlyIcon ? BUTTON_VARIANT.TERTIARY_PURPLE : BUTTON_VARIANT.TEXT}
+              >
+                <IconArrowLeft size="sm" />
+                {!backButtonOnlyIcon && backButtonText}
+              </Button>
+            ) : (
+              <RadixDialog.Title asChild>
+                <Heading
+                  data-testid={`${dataTestId}-title`}
+                  tag="h2"
+                  variant={TitleVariant.TITLE200}
+                >
+                  {title}
+                </Heading>
+              </RadixDialog.Title>
+            )}
+          </div>
+
+          <div className={cx(`${rootClassName}__right`)}>
+            <RadixDialog.Close asChild>
+              <Button
+                aria-label={closeButtonText}
+                className={cx(`${rootClassName}__close-button`)}
+                iconOnly
+                size="sm"
+                variant={BUTTON_VARIANT.TERTIARY_PURPLE}
+              >
+                <IconClose size="sm" />
+              </Button>
+            </RadixDialog.Close>
+          </div>
+        </div>
+        {backButton && backButtonText && onBackButtonClick && (
+          <RadixDialog.Title asChild>
+            <Heading
+              className={cx(`${rootClassName}__heading`)}
+              data-testid={`${dataTestId}-title-with-back-button`}
+              tag="h2"
+              variant={TitleVariant.TITLE200}
+            >
+              {title}
+            </Heading>
+          </RadixDialog.Title>
+        )}
+      </div>
+    );
+  }
+);
+
+DrawerHeader.displayName = "DrawerHeader";

package/src/drawer-scroll-area.module.scss

@@ -0,0 +1,42 @@
+$animation-settings: var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);
+
+.purpur-drawer-scroll-area {
+  &__root {
+    height: 100%;
+  }
+
+  &__viewport {
+    height: 100%;
+  }
+
+  &__scrollbar {
+    display: flex;
+    /* ensures no selection */
+    user-select: none;
+    /* disable browser handling of all panning and zooming gestures on touch devices */
+    touch-action: none;
+    padding: var(--purpur-spacing-25);
+    background: var(--purpur-color-functional-white);
+    transition: background $animation-settings;
+    width: var(--purpur-spacing-100);
+  }
+
+  &__thumb {
+    background: var(--purpur-color-gray-200);
+    border-radius: var(--purpur-spacing-200);
+    flex: 1;
+    position: relative;
+
+    &::before {
+      content: "";
+      height: 100%;
+      left: 50%;
+      min-height: var(--purpur-spacing-300);
+      min-width: var(--purpur-spacing-300);
+      position: absolute;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 100%;
+    }
+  }
+}

package/src/drawer-scroll-area.test.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+
+import { DrawerScrollArea } from "./drawer-scroll-area";
+
+expect.extend(matchers);
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("DrawerScrollArea", () => {
+  it("should render children", async () => {
+    render(
+      <DrawerScrollArea data-testid={Selectors.DRAWER_SCROLL_AREA}>
+        This is the scrollable content
+      </DrawerScrollArea>
+    );
+    const scrollArea = screen.getByTestId(Selectors.DRAWER_SCROLL_AREA);
+    expect(scrollArea).toHaveTextContent("This is the scrollable content");
+  });
+});
+
+const Selectors = {
+  DRAWER_SCROLL_AREA: "purpur-drawer-scroll-area",
+};

package/src/drawer-scroll-area.tsx

@@ -0,0 +1,45 @@
+import React, { ForwardedRef, forwardRef, ReactNode } from "react";
+import * as RadixScrollArea from "@radix-ui/react-scroll-area";
+import c from "classnames/bind";
+
+import styles from "./drawer-scroll-area.module.scss";
+const cx = c.bind(styles);
+
+export type DrawerScrollAreaProps = {
+  ["data-testid"]?: string;
+  children: ReactNode;
+  className?: string;
+};
+
+const rootClassName = "purpur-drawer-scroll-area";
+
+export const DrawerScrollArea = forwardRef(
+  (
+    {
+      ["data-testid"]: dataTestId = "purpur-drawer-scroll-area",
+      children,
+      className,
+      ...props
+    }: DrawerScrollAreaProps,
+    ref: ForwardedRef<HTMLDivElement>
+  ) => {
+    const classes = cx([className, rootClassName]);
+    return (
+      <div className={classes} data-testid={dataTestId} ref={ref} {...props}>
+        <RadixScrollArea.Root className={cx(`${rootClassName}__root`)}>
+          <RadixScrollArea.Viewport className={cx(`${rootClassName}__viewport`)}>
+            {children}
+          </RadixScrollArea.Viewport>
+          <RadixScrollArea.Scrollbar
+            className={cx(`${rootClassName}__scrollbar`)}
+            orientation="vertical"
+          >
+            <RadixScrollArea.Thumb className={cx(`${rootClassName}__thumb`)} />
+          </RadixScrollArea.Scrollbar>
+        </RadixScrollArea.Root>
+      </div>
+    );
+  }
+);
+
+DrawerScrollArea.displayName = "DrawerScrollArea";

package/src/drawer-trigger.test.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import * as RadixDialog from "@radix-ui/react-dialog";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+
+import { DrawerTrigger } from "./drawer-trigger";
+
+expect.extend(matchers);
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("DrawerTrigger", () => {
+  it("should render children", async () => {
+    render(
+      <RadixDialog.Root open={true}>
+        <DrawerTrigger>
+          <button type="button" data-testid={Selectors.DRAWER_TRIGGER}>
+            This is the trigger content
+          </button>
+        </DrawerTrigger>
+      </RadixDialog.Root>
+    );
+    const drawerTrigger = screen.getByTestId(Selectors.DRAWER_TRIGGER);
+    expect(drawerTrigger).toHaveTextContent("This is the trigger content");
+  });
+});
+
+const Selectors = {
+  DRAWER_TRIGGER: "purpur-drawer-trigger",
+};

package/src/drawer-trigger.tsx

@@ -0,0 +1,34 @@
+import React, { ForwardedRef, forwardRef, ReactNode } from "react";
+import * as RadixDialog from "@radix-ui/react-dialog";
+
+export type DrawerTriggerProps = {
+  ["data-testid"]?: string;
+  children: ReactNode;
+  className?: string;
+};
+
+export const DrawerTrigger = forwardRef(
+  (
+    {
+      ["data-testid"]: dataTestId = "purpur-drawer-trigger",
+      children,
+      className,
+      ...props
+    }: DrawerTriggerProps,
+    ref: ForwardedRef<HTMLButtonElement>
+  ) => {
+    return (
+      <RadixDialog.Trigger
+        asChild
+        className={className}
+        data-testid={dataTestId}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </RadixDialog.Trigger>
+    );
+  }
+);
+
+DrawerTrigger.displayName = "DrawerTrigger";

package/src/drawer.context.ts

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+
+import { OpenHandlerFunction } from "./types";
+
+export const DrawerContext = createContext<OpenHandlerFunction | null>(null);

package/src/drawer.module.scss

@@ -0,0 +1,3 @@
+.purpur-drawer {
+  height: 100vh;
+}

package/src/drawer.stories.tsx

@@ -0,0 +1,197 @@
+import React from "react";
+import { Button } from "@purpurds/button";
+import { Heading } from "@purpurds/heading";
+import { Paragraph } from "@purpurds/paragraph";
+import { useArgs } from "@storybook/preview-api";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import "@purpurds/heading/styles";
+import "@purpurds/button/styles";
+import "@purpurds/paragraph/styles";
+import "@purpurds/icon/styles";
+import { Drawer, DrawerProps } from "./drawer";
+import { DrawerContent } from "./drawer-content";
+
+const StorybookTestBodyContent = () => {
+  return (
+    <>
+      <Heading variant="subsection-100" tag="h3">
+        The standard Lorem Ipsum passage, used since the 1500s
+      </Heading>
+      <Paragraph variant="paragraph-100" style={{ marginBottom: "32px" }}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </Paragraph>
+
+      <Heading variant="subsection-100" tag="h3">
+        Section 1.10.32 of de Finibus Bonorum et Malorum, written by Cicero in 45 BC
+      </Heading>
+      <Paragraph variant="paragraph-100" style={{ marginBottom: "32px" }}>
+        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
+        laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
+        architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
+        aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
+        voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
+        consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et
+        dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
+        exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
+        consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil
+        molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+      </Paragraph>
+
+      <Heading variant="subsection-100" tag="h3">
+        Section 1.10.33 of de Finibus Bonorum et Malorum, written by Cicero in 45 BC
+      </Heading>
+      <Paragraph variant="paragraph-100">
+        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
+        voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
+        cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id
+        est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam
+        libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
+        maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.
+        Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut
+        et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a
+        sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis
+        doloribus asperiores repellat.
+      </Paragraph>
+    </>
+  );
+};
+
+const StorybookTestFooterContent = () => {
+  return (
+    <div style={{ textAlign: "center" }}>
+      <div
+        style={{
+          display: "flex",
+          gap: "16px",
+          width: "100%",
+          marginBottom: "16px",
+        }}
+      >
+        <Button variant="secondary" style={{ flex: "1 1 50%" }}>
+          Secondary button
+        </Button>
+        <Button variant="primary" style={{ flex: "1 1 50%" }}>
+          Primary button
+        </Button>
+      </div>
+      <Button variant="tertiary-purple" style={{ minWidth: "50%" }}>
+        Tertiary button
+      </Button>
+    </div>
+  );
+};
+
+const meta = {
+  title: "Components/Drawer",
+  component: Drawer,
+  parameters: {
+    design: [
+      {
+        name: "Drawer",
+        type: "figma",
+        url: "https://www.figma.com/design/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?node-id=48315-32864",
+      },
+    ],
+  },
+  subcomponents: {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    "Drawer.Trigger": Drawer.Trigger,
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    "Drawer.Content": Drawer.Content,
+  },
+  args: {
+    className: "myClass",
+    open: false,
+  },
+} satisfies Meta<typeof Drawer>;
+
+export default meta;
+type DrawerStory = StoryObj<typeof Drawer>;
+
+export const ShowcaseForDrawer: DrawerStory = {
+  name: "Showcase",
+  render: (args) => {
+    const [props, updateArgs]: [
+      DrawerProps,
+      (newArgs: Partial<DrawerProps>) => void,
+      (argNames?: (keyof DrawerProps)[] | undefined) => void
+    ] = useArgs(); // eslint-disable-line react-hooks/rules-of-hooks
+    const handler = (isOpen: boolean) => {
+      updateArgs({ open: isOpen });
+    };
+
+    return (
+      <div>
+        <Drawer {...args} {...props} onOpenChange={handler}>
+          <Drawer.Trigger>
+            <Button variant="primary">Open drawer</Button>
+          </Drawer.Trigger>
+          <Drawer.Content
+            backButton
+            backButtonText="Back"
+            backButtonOnlyIcon={false}
+            bodyText="This is the body text"
+            closeButtonText="Close drawer"
+            onBackButtonClick={() => {
+              return undefined;
+            }}
+            footerContent={<StorybookTestFooterContent />}
+            title="Title"
+            stickyFooter
+          >
+            <StorybookTestBodyContent />
+          </Drawer.Content>
+        </Drawer>
+      </div>
+    );
+  },
+};
+
+type DrawerContentStory = StoryObj<typeof DrawerContent>;
+export const ShowcaseForDrawerContent: DrawerContentStory = {
+  name: "Drawer.Content",
+  args: {
+    backButton: true,
+    backButtonText: "Back",
+    backButtonOnlyIcon: false,
+    bodyText: "This is the body text",
+    closeButtonText: "Close drawer",
+    disableCloseOnClickOutside: false,
+    footerContent: <StorybookTestFooterContent />,
+    onBackButtonClick: () => {
+      return undefined;
+    },
+    title: "Title",
+    stickyFooter: true,
+  },
+  render: (args) => {
+    const [props, updateArgs]: [
+      DrawerProps,
+      (newArgs: Partial<DrawerProps>) => void,
+      (argNames?: (keyof DrawerProps)[] | undefined) => void
+    ] = useArgs(); // eslint-disable-line react-hooks/rules-of-hooks
+    const handler = (isOpen: boolean) => {
+      updateArgs({ open: isOpen });
+    };
+
+    return (
+      <div>
+        <Drawer {...props} onOpenChange={handler}>
+          <Drawer.Trigger>
+            <Button variant="primary">Open drawer</Button>
+          </Drawer.Trigger>
+          <Drawer.Content {...args}>
+            <StorybookTestBodyContent />
+          </Drawer.Content>
+        </Drawer>
+      </div>
+    );
+  },
+};