@purpurds/drawer 5.15.1

package/src/drawer-frame.test.tsx

@@ -0,0 +1,139 @@
+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 { DrawerFrame } from "./drawer-frame";
+
+expect.extend(matchers);
+
+const noop = () => {};
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("DrawerFrame", () => {
+  it("should have the sticky-footer class if stickyFooter is set", () => {
+    render(
+      <RadixDialog.Root open={true}>
+        <RadixDialog.Content>
+          <DrawerFrame
+            data-testid={Selectors.DRAWER_FRAME}
+            backButton
+            backButtonOnlyIcon={false}
+            backButtonText="Back"
+            closeButtonText="Close"
+            footerContent={<div>Footer content</div>}
+            onAnimationEnd={noop}
+            onBackButtonClick={noop}
+            onSwipeStart={noop}
+            onSwipeMove={noop}
+            onSwipeCancel={noop}
+            onSwipeEnd={noop}
+            stickyFooter
+            title="Title"
+          >
+            Some drawer-content
+          </DrawerFrame>
+        </RadixDialog.Content>
+      </RadixDialog.Root>
+    );
+    expect(screen.getByTestId(Selectors.DRAWER_FRAME)).toHaveClass(
+      "purpur-drawer-frame--sticky-footer"
+    );
+  });
+
+  it.each([
+    { stickyFooter: true, expectedScrollArea: Selectors.STICKY_FOOTER_SCROLL_AREA },
+    { stickyFooter: false, expectedScrollArea: Selectors.DEFAULT_SCROLL_AREA },
+  ])("should render the correct scroll area depending on stickyFooter prop", (args) => {
+    render(
+      <RadixDialog.Root open={true}>
+        <RadixDialog.Content>
+          <DrawerFrame
+            data-testid={Selectors.DRAWER_FRAME}
+            backButton
+            backButtonOnlyIcon={false}
+            backButtonText="Back"
+            closeButtonText="Close"
+            footerContent={<div>Footer content</div>}
+            onAnimationEnd={noop}
+            onBackButtonClick={noop}
+            onSwipeStart={noop}
+            onSwipeMove={noop}
+            onSwipeCancel={noop}
+            onSwipeEnd={noop}
+            stickyFooter={args.stickyFooter}
+            title="Title"
+          >
+            Some drawer-content
+          </DrawerFrame>
+        </RadixDialog.Content>
+      </RadixDialog.Root>
+    );
+    expect(screen.getByTestId(args.expectedScrollArea)).toBeInTheDocument();
+  });
+
+  it.each([
+    {
+      stickyFooter: true,
+      footerContent: <div>Footer content</div>,
+      expectedFooter: Selectors.STICKY_FOOTER,
+    },
+    {
+      stickyFooter: true,
+      footerContent: undefined,
+      expectedFooter: Selectors.STICKY_FOOTER,
+    },
+    {
+      stickyFooter: false,
+      footerContent: <div>Footer content</div>,
+      expectedFooter: Selectors.FOOTER,
+    },
+    {
+      stickyFooter: false,
+      footerContent: undefined,
+      expectedFooter: Selectors.FOOTER,
+    },
+  ])("should only show footerContent if there is any", (args) => {
+    render(
+      <RadixDialog.Root open={true}>
+        <RadixDialog.Content>
+          <DrawerFrame
+            data-testid={Selectors.DRAWER_FRAME}
+            backButton
+            backButtonOnlyIcon={false}
+            backButtonText="Back"
+            closeButtonText="Close"
+            footerContent={args.footerContent}
+            onAnimationEnd={noop}
+            onBackButtonClick={noop}
+            onSwipeStart={noop}
+            onSwipeMove={noop}
+            onSwipeCancel={noop}
+            onSwipeEnd={noop}
+            stickyFooter={args.stickyFooter}
+            title="Title"
+          >
+            Some drawer-content
+          </DrawerFrame>
+        </RadixDialog.Content>
+      </RadixDialog.Root>
+    );
+    if (args.footerContent) {
+      expect(screen.getByTestId(args.expectedFooter)).toBeInTheDocument();
+    } else {
+      expect(screen.queryByTestId(args.expectedFooter)).not.toBeInTheDocument();
+    }
+  });
+});
+
+const Selectors = {
+  DRAWER_FRAME: "purpur-drawer-frame",
+  STICKY_FOOTER_SCROLL_AREA: "purpur-drawer-frame-sticky-footer-scroll-area",
+  STICKY_FOOTER: "purpur-drawer-frame-sticky-footer",
+  DEFAULT_SCROLL_AREA: "purpur-drawer-frame-scroll-area",
+  FOOTER: "purpur-drawer-frame-footer",
+};

package/src/drawer-frame.tsx

@@ -0,0 +1,140 @@
+import React, { ForwardedRef, forwardRef, ReactNode } from "react";
+import c from "classnames/bind";
+
+import { DrawerContainer } from "./drawer-container";
+import styles from "./drawer-frame.module.scss";
+import { DrawerHandle } from "./drawer-handle";
+import { DrawerHeader } from "./drawer-header";
+import { DrawerScrollArea } from "./drawer-scroll-area";
+import { SwipeEvent } from "./types";
+const cx = c.bind(styles);
+
+export type DrawerFrameProps = {
+  ["data-testid"]?: string;
+  backButton: boolean;
+  backButtonText?: string;
+  backButtonOnlyIcon: boolean;
+  children: ReactNode;
+  className?: string;
+  closeButtonText: string;
+  footerContent?: ReactNode;
+  onAnimationEnd: (event: React.AnimationEvent<HTMLDivElement>) => void;
+  onBackButtonClick?: () => void;
+  onSwipeStart(): void;
+  onSwipeMove(event: SwipeEvent): void;
+  onSwipeCancel(): void;
+  onSwipeEnd(event: SwipeEvent): void;
+  stickyFooter: boolean;
+  title: string;
+};
+
+const rootClassName = "purpur-drawer-frame";
+
+export const DrawerFrame = forwardRef(
+  (
+    {
+      ["data-testid"]: dataTestId = "purpur-drawer-frame",
+      backButton,
+      backButtonText,
+      backButtonOnlyIcon,
+      children,
+      className,
+      closeButtonText,
+      footerContent,
+      onAnimationEnd,
+      onBackButtonClick,
+      onSwipeStart,
+      onSwipeMove,
+      onSwipeCancel,
+      onSwipeEnd,
+      title,
+      stickyFooter,
+      ...props
+    }: DrawerFrameProps,
+    ref: ForwardedRef<HTMLDivElement>
+  ) => {
+    const classes = cx([
+      className,
+      rootClassName,
+      {
+        [`${rootClassName}--sticky-footer`]: stickyFooter,
+      },
+    ]);
+
+    return (
+      <div
+        className={classes}
+        data-testid={dataTestId}
+        ref={ref}
+        onAnimationEnd={onAnimationEnd}
+        {...props}
+      >
+        <DrawerHandle
+          onSwipeStart={onSwipeStart}
+          onSwipeMove={onSwipeMove}
+          onSwipeCancel={onSwipeCancel}
+          onSwipeEnd={onSwipeEnd}
+        />
+        <DrawerContainer
+          className={cx(`${rootClassName}__header`)}
+          variant="header"
+          stickyFooter={stickyFooter}
+        >
+          <DrawerHeader
+            title={title}
+            backButtonOnlyIcon={backButtonOnlyIcon}
+            backButton={backButton}
+            backButtonText={backButtonText}
+            closeButtonText={closeButtonText}
+            onBackButtonClick={onBackButtonClick}
+          />
+        </DrawerContainer>
+        {stickyFooter ? (
+          <>
+            <DrawerScrollArea
+              className={cx(`${rootClassName}__body`)}
+              data-testid={`${dataTestId}-sticky-footer-scroll-area`}
+            >
+              <DrawerContainer stickyFooter>{children}</DrawerContainer>
+            </DrawerScrollArea>
+            {footerContent && (
+              <DrawerContainer
+                className={cx(`${rootClassName}__footer`)}
+                data-testid={`${dataTestId}-sticky-footer`}
+                variant="footer"
+                stickyFooter={stickyFooter}
+              >
+                {footerContent}
+              </DrawerContainer>
+            )}
+          </>
+        ) : (
+          <DrawerScrollArea
+            className={cx(`${rootClassName}__body`)}
+            data-testid={`${dataTestId}-scroll-area`}
+          >
+            <div
+              className={cx([
+                `${rootClassName}__content-container`,
+                { [`${rootClassName}__content-container--no-footer`]: !footerContent },
+              ])}
+            >
+              <DrawerContainer stickyFooter={stickyFooter}>{children}</DrawerContainer>
+              {footerContent && (
+                <DrawerContainer
+                  data-testid={`${dataTestId}-footer`}
+                  stickyFooter={stickyFooter}
+                  variant="footer"
+                >
+                  {footerContent}
+                </DrawerContainer>
+              )}
+            </div>
+          </DrawerScrollArea>
+        )}
+      </div>
+    );
+  }
+);
+
+DrawerFrame.displayName = "DrawerFrame";

package/src/drawer-handle.module.scss

@@ -0,0 +1,23 @@
+@import "@purpurds/tokens/breakpoint/variables";
+
+.purpur-drawer-handle {
+  align-items: center;
+  display: flex;
+  height: var(--purpur-spacing-250);
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  width: 100%;
+
+  @media screen and (min-width: $purpur-breakpoint-md) {
+    display: none;
+  }
+
+  &::before {
+    content: "";
+    background: var(--purpur-color-border-weak);
+    border-radius: var(--purpur-border-radius-full);
+    height: var(--purpur-spacing-50);
+    width: var(--purpur-spacing-600);
+  }
+}

package/src/drawer-handle.test.tsx

@@ -0,0 +1,37 @@
+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, vi } from "vitest";
+
+import { DrawerHandle } from "./drawer-handle";
+
+expect.extend(matchers);
+
+const onSwipeStart = vi.fn();
+const onSwipeMove = vi.fn();
+const onSwipeCancel = vi.fn();
+const onSwipeEnd = vi.fn();
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("DrawerHandle", () => {
+  it("should render", async () => {
+    render(
+      <DrawerHandle
+        data-testid={Selectors.DRAWER_HANDLE}
+        onSwipeStart={onSwipeStart}
+        onSwipeMove={onSwipeMove}
+        onSwipeCancel={onSwipeCancel}
+        onSwipeEnd={onSwipeEnd}
+      />
+    );
+    const drawerHandle = screen.getByTestId(Selectors.DRAWER_HANDLE);
+    expect(drawerHandle).toBeInTheDocument();
+  });
+});
+
+const Selectors = {
+  DRAWER_HANDLE: "purpur-drawer-handle",
+};

package/src/drawer-handle.tsx

@@ -0,0 +1,59 @@
+import React, { ForwardedRef, forwardRef } from "react";
+import c from "classnames/bind";
+
+import styles from "./drawer-handle.module.scss";
+import { SwipeEvent } from "./types";
+import { useSwipeTracking } from "./use-swipe-tracking.hook";
+const cx = c.bind(styles);
+
+export type DrawerHandleProps = {
+  ["data-testid"]?: string;
+  className?: string;
+  onSwipeStart(): void;
+  onSwipeMove(event: SwipeEvent): void;
+  onSwipeCancel(): void;
+  onSwipeEnd(event: SwipeEvent): void;
+};
+
+const rootClassName = "purpur-drawer-handle";
+
+export const DrawerHandle = forwardRef(
+  (
+    {
+      ["data-testid"]: dataTestId = "purpur-drawer-handle",
+      className,
+      onSwipeStart,
+      onSwipeMove,
+      onSwipeCancel,
+      onSwipeEnd,
+      ...props
+    }: DrawerHandleProps,
+    ref: ForwardedRef<HTMLDivElement>
+  ) => {
+    const classes = cx([className, rootClassName]);
+    const pointerStartRef = React.useRef<{ y: number } | null>(null);
+    const swipeDeltaRef = React.useRef<{ y: number } | null>(null);
+    const { onPointerDown, onPointerMove, onPointerUp } = useSwipeTracking(
+      swipeDeltaRef,
+      pointerStartRef,
+      onSwipeStart,
+      onSwipeMove,
+      onSwipeCancel,
+      onSwipeEnd
+    );
+
+    return (
+      <div
+        className={classes}
+        data-testid={dataTestId}
+        onPointerDown={onPointerDown}
+        onPointerMove={onPointerMove}
+        onPointerUp={onPointerUp}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+DrawerHandle.displayName = "DrawerHandle";

package/src/drawer-header.module.scss

@@ -0,0 +1,29 @@
+.purpur-drawer-header {
+  &__row {
+    display: flex;
+    align-items: center;
+    gap: var(--purpur-spacing-100);
+
+    &--with-back-button {
+      margin-bottom: var(--purpur-spacing-100);
+    }
+  }
+
+  &__left {
+    flex: 1 1 auto;
+  }
+
+  &__right {
+    flex: 0 0 auto;
+  }
+
+  &__close-button {
+    margin-right: calc(-1 * var(--purpur-spacing-100));
+  }
+
+  &__back-button {
+    &--only-icon {
+      margin-left: calc(-1 * var(--purpur-spacing-100));
+    }
+  }
+}

package/src/drawer-header.test.tsx

@@ -0,0 +1,173 @@
+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, vi } from "vitest";
+
+import { DrawerHeader } from "./drawer-header";
+
+expect.extend(matchers);
+
+const handleBackClick = vi.fn();
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("DrawerHeader", () => {
+  it.each([
+    {
+      backButton: true,
+      backButtonText: "Back",
+      handleBackClick: handleBackClick,
+      shouldExist: true,
+    },
+    { backButton: true, backButtonText: "Back", handleBackClick: undefined, shouldExist: false },
+    {
+      backButton: true,
+      backButtonText: "",
+      handleBackClick: handleBackClick,
+      shouldExist: false,
+    },
+    {
+      backButton: true,
+      backButtonText: undefined,
+      handleBackClick: handleBackClick,
+      shouldExist: false,
+    },
+    {
+      backButton: false,
+      backButtonText: "Back",
+      handleBackClick: handleBackClick,
+      shouldExist: false,
+    },
+  ])("should display the back button if required props are set", (args) => {
+    render(
+      <RadixDialog.Root open={true}>
+        <RadixDialog.Content>
+          <DrawerHeader
+            backButton={args.backButton}
+            backButtonText={args.backButtonText}
+            backButtonOnlyIcon={false}
+            closeButtonText="Close"
+            data-testid={Selectors.DRAWER_HEADER}
+            onBackButtonClick={args.handleBackClick}
+            title="Title"
+          />
+        </RadixDialog.Content>
+      </RadixDialog.Root>
+    );
+    if (args.shouldExist) {
+      expect(screen.getByTestId(Selectors.HEADER_ROW)).toHaveClass(
+        "purpur-drawer-header__row--with-back-button"
+      );
+      expect(screen.getByTestId(Selectors.BACK_BUTTON)).toBeInTheDocument();
+    } else {
+      expect(screen.getByTestId(Selectors.HEADER_ROW)).not.toHaveClass(
+        "purpur-drawer-header__row--with-back-button"
+      );
+      expect(screen.queryByTestId(Selectors.BACK_BUTTON)).not.toBeInTheDocument();
+    }
+  });
+
+  it.each([
+    {
+      backButton: true,
+      backButtonText: "Back",
+      handleBackClick: handleBackClick,
+      expectedTitleSelector: Selectors.TITLE_TOGETHER_WITH_BACK_BUTTON,
+    },
+    {
+      backButton: true,
+      backButtonText: "Back",
+      handleBackClick: undefined,
+      expectedTitleSelector: Selectors.TITLE,
+    },
+    {
+      backButton: true,
+      backButtonText: "",
+      handleBackClick: handleBackClick,
+      expectedTitleSelector: Selectors.TITLE,
+    },
+    {
+      backButton: true,
+      backButtonText: undefined,
+      handleBackClick: handleBackClick,
+      expectedTitleSelector: Selectors.TITLE,
+    },
+    {
+      backButton: false,
+      backButtonText: "Back",
+      handleBackClick: handleBackClick,
+      expectedTitleSelector: Selectors.TITLE,
+    },
+  ])(
+    "should display the title in the correct position depending on if back button is present or not",
+    (args) => {
+      render(
+        <RadixDialog.Root open={true}>
+          <RadixDialog.Content>
+            <DrawerHeader
+              backButton={args.backButton}
+              backButtonText={args.backButtonText}
+              backButtonOnlyIcon={false}
+              closeButtonText="Close"
+              data-testid={Selectors.DRAWER_HEADER}
+              onBackButtonClick={args.handleBackClick}
+              title="Title"
+            />
+          </RadixDialog.Content>
+        </RadixDialog.Root>
+      );
+      expect(screen.getByTestId(args.expectedTitleSelector)).toBeInTheDocument();
+    }
+  );
+
+  it("should add the button text as aria-label if backButtonOnlyIcon is true", () => {
+    render(
+      <RadixDialog.Root open={true}>
+        <RadixDialog.Content>
+          <DrawerHeader
+            backButton
+            backButtonText="Back"
+            backButtonOnlyIcon
+            closeButtonText="Close"
+            data-testid={Selectors.DRAWER_HEADER}
+            onBackButtonClick={handleBackClick}
+            title="Title"
+          />
+        </RadixDialog.Content>
+      </RadixDialog.Root>
+    );
+    expect(screen.getByTestId(Selectors.BACK_BUTTON)).toHaveAttribute("aria-label", "Back");
+    expect(screen.getByTestId(Selectors.BACK_BUTTON)).not.toHaveTextContent("Back");
+  });
+
+  it("should not add the button text as aria-label if backButtonOnlyIcon is false", () => {
+    render(
+      <RadixDialog.Root open={true}>
+        <RadixDialog.Content>
+          <DrawerHeader
+            backButton
+            backButtonText="Back"
+            backButtonOnlyIcon={false}
+            closeButtonText="Close"
+            data-testid={Selectors.DRAWER_HEADER}
+            onBackButtonClick={handleBackClick}
+            title="Title"
+          />
+        </RadixDialog.Content>
+      </RadixDialog.Root>
+    );
+    expect(screen.getByTestId(Selectors.BACK_BUTTON)).not.toHaveAttribute("aria-label", "Back");
+    expect(screen.getByTestId(Selectors.BACK_BUTTON)).toHaveTextContent("Back");
+  });
+});
+
+const Selectors = {
+  DRAWER_HEADER: "purpur-drawer-header",
+  HEADER_ROW: "purpur-drawer-header-row",
+  BACK_BUTTON: "purpur-drawer-header-back-button",
+  TITLE_TOGETHER_WITH_BACK_BUTTON: "purpur-drawer-header-title-with-back-button",
+  TITLE: "purpur-drawer-header-title",
+};