@purpurds/drawer 5.15.1

package/dist/styles.css

@@ -0,0 +1 @@
+._purpur-drawer_xzrkg_1{height:100vh}._purpur-drawer-content_1j9c0_1{animation:_drawerSmallScreenAnimation_1j9c0_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);height:90%;max-width:100%;position:absolute;right:0;top:10%;transition:transform var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);width:100%}@media screen and (min-width: 600px){._purpur-drawer-content_1j9c0_1{animation:_drawerLargeScreenAnimation_1j9c0_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);height:100%;max-width:calc(30rem * var(--purpur-rescale));top:0}}._purpur-drawer-content_1j9c0_1:focus{outline:none}._purpur-drawer-content__content-container_1j9c0_22{display:flex;flex-direction:column;gap:var(--purpur-spacing-400)}._purpur-drawer-content__drawer-frame_1j9c0_27[data-swipe=cancel]{transform:translateY(0);transition:transform var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}._purpur-drawer-content__drawer-frame_1j9c0_27[data-swipe=move]{transform:translateY(var(--purpur-drawer-swipe-move-y))}._purpur-drawer-content__drawer-frame_1j9c0_27[data-swipe=end]{animation:_slideDown_1j9c0_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out) forwards}._purpur-drawer-content__description_1j9c0_37{color:var(--purpur-color-text-default);display:block;font-family:var(--purpur-typography-family-default);font-size:var(--purpur-typography-scale-100);font-weight:var(--purpur-typography-weight-normal);-webkit-hyphens:none;hyphens:none;line-height:var(--purpur-typography-line-height-loose);margin:0}._purpur-drawer-overlay_1j9c0_48{animation:_overlayAnimation_1j9c0_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);background:var(--purpur-color-overlay-default);top:0;right:0;bottom:0;left:0;position:fixed;transition:opacity var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}@keyframes _slideDown_1j9c0_1{0%{transform:translateY(var(--purpur-drawer-swipe-end-y))}to{transform:translateY(100%)}}@keyframes _overlayAnimation_1j9c0_1{0%{opacity:0}to{opacity:1}}@keyframes _drawerLargeScreenAnimation_1j9c0_1{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes _drawerSmallScreenAnimation_1j9c0_1{0%{transform:translateY(100%)}to{transform:translateY(0)}}._purpur-drawer-container--header_1r6tb_1{padding:var(--purpur-spacing-250) var(--purpur-spacing-300) var(--purpur-spacing-200);border-bottom:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak)}._purpur-drawer-container--body_1r6tb_5{padding:var(--purpur-spacing-400) var(--purpur-spacing-300) 0}._purpur-drawer-container--body_1r6tb_5._purpur-drawer-container--sticky_1r6tb_8{padding:var(--purpur-spacing-400) var(--purpur-spacing-300)}._purpur-drawer-container--footer_1r6tb_11{padding:0 var(--purpur-spacing-300) var(--purpur-spacing-200)}._purpur-drawer-container--footer_1r6tb_11._purpur-drawer-container--sticky_1r6tb_8{border-top:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak);padding:var(--purpur-spacing-200) var(--purpur-spacing-300)}._purpur-drawer-frame_jj7dt_1{background-color:var(--purpur-color-background-primary);border-top-left-radius:var(--purpur-border-radius-lg);border-top-right-radius:var(--purpur-border-radius-lg);box-shadow:var(--purpur-shadow-lg);display:flex;flex-direction:column;height:100%;position:relative}@media screen and (min-width: 600px){._purpur-drawer-frame_jj7dt_1{border-bottom-left-radius:var(--purpur-border-radius-lg);border-top-right-radius:0}}._purpur-drawer-frame--sticky-footer_jj7dt_17{gap:0}._purpur-drawer-frame__header_jj7dt_20{flex:0 0 auto}._purpur-drawer-frame__body_jj7dt_23{flex:1 1 auto;overflow:hidden}._purpur-drawer-frame__footer_jj7dt_27{flex:0 0 auto}._purpur-drawer-frame__content-container_jj7dt_30{display:flex;flex-direction:column;gap:var(--purpur-spacing-400)}._purpur-drawer-frame__content-container--no-footer_jj7dt_35{margin-bottom:var(--purpur-spacing-400)}._purpur-drawer-handle_3n0ew_1{align-items:center;display:flex;height:var(--purpur-spacing-250);justify-content:center;position:absolute;top:0;width:100%}@media screen and (min-width: 600px){._purpur-drawer-handle_3n0ew_1{display:none}}._purpur-drawer-handle_3n0ew_1: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)}._purpur-drawer-header__row_1yg5w_1{display:flex;align-items:center;gap:var(--purpur-spacing-100)}._purpur-drawer-header__row--with-back-button_1yg5w_6{margin-bottom:var(--purpur-spacing-100)}._purpur-drawer-header__left_1yg5w_9{flex:1 1 auto}._purpur-drawer-header__right_1yg5w_12{flex:0 0 auto}._purpur-drawer-header__close-button_1yg5w_15{margin-right:calc(-1 * var(--purpur-spacing-100))}._purpur-drawer-header__back-button--only-icon_1yg5w_18{margin-left:calc(-1 * var(--purpur-spacing-100))}._purpur-drawer-scroll-area__root_1p63i_1,._purpur-drawer-scroll-area__viewport_1p63i_4{height:100%}._purpur-drawer-scroll-area__scrollbar_1p63i_7{display:flex;-webkit-user-select:none;user-select:none;touch-action:none;padding:var(--purpur-spacing-25);background:var(--purpur-color-functional-white);transition:background var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);width:var(--purpur-spacing-100)}._purpur-drawer-scroll-area__thumb_1p63i_18{background:var(--purpur-color-gray-200);border-radius:var(--purpur-spacing-200);flex:1;position:relative}._purpur-drawer-scroll-area__thumb_1p63i_18: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/dist/types.d.ts

@@ -0,0 +1,8 @@
+export type SwipeEvent = {
+    originalEvent: React.PointerEvent;
+    delta: {
+        y: number;
+    };
+};
+export type OpenHandlerFunction = (open: boolean) => void;
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG;IAAE,aAAa,EAAE,KAAK,CAAC,YAAY,CAAC;IAAC,KAAK,EAAE;QAAE,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CAAE,CAAC;AAErF,MAAM,MAAM,mBAAmB,GAAG,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC"}

package/dist/use-swipe-to-dismiss.hook.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { SwipeEvent } from './types';
+
+type UseSwipeToDismiss = {
+    onAnimationEnd(event: React.AnimationEvent<HTMLDivElement>): void;
+    onSwipeStart(): void;
+    onSwipeMove(event: SwipeEvent): void;
+    onSwipeCancel(): void;
+    onSwipeEnd(event: SwipeEvent): void;
+};
+export declare const useSwipeToDismiss: <T extends HTMLElement>(containerRef: React.MutableRefObject<T | null>, handleOpenChange: (open: boolean) => void) => UseSwipeToDismiss;
+export {};
+//# sourceMappingURL=use-swipe-to-dismiss.hook.d.ts.map

package/dist/use-swipe-to-dismiss.hook.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-swipe-to-dismiss.hook.d.ts","sourceRoot":"","sources":["../src/use-swipe-to-dismiss.hook.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,KAAK,iBAAiB,GAAG;IACvB,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC;IAClE,YAAY,IAAI,IAAI,CAAC;IACrB,WAAW,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACrC,aAAa,IAAI,IAAI,CAAC;IACtB,UAAU,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,WAAW,gBACvC,KAAK,CAAC,gBAAgB,CAAC,CAAC,GAAG,IAAI,CAAC,oBAC5B,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,KACxC,iBA4CF,CAAC"}

package/dist/use-swipe-tracking.hook.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { SwipeEvent } from './types';
+
+type UseSwipeTracking = {
+    onPointerDown(event: React.PointerEvent): void;
+    onPointerMove(event: React.PointerEvent): void;
+    onPointerUp(event: React.PointerEvent): void;
+};
+export declare const useSwipeTracking: (pointerStartRef: React.MutableRefObject<{
+    y: number;
+} | null>, swipeDeltaRef: React.MutableRefObject<{
+    y: number;
+} | null>, onSwipeStart: () => void, onSwipeMove: (event: SwipeEvent) => void, onSwipeCancel: () => void, onSwipeEnd: (event: SwipeEvent) => void) => UseSwipeTracking;
+export {};
+//# sourceMappingURL=use-swipe-tracking.hook.d.ts.map

package/dist/use-swipe-tracking.hook.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-swipe-tracking.hook.d.ts","sourceRoot":"","sources":["../src/use-swipe-tracking.hook.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,KAAK,gBAAgB,GAAG;IACtB,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;IAC/C,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;IAC/C,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;CAC9C,CAAC;AAEF,eAAO,MAAM,gBAAgB,oBACV,KAAK,CAAC,gBAAgB,CAAC;IAAE,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,iBAC9C,KAAK,CAAC,gBAAgB,CAAC;IAAE,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,gBAC7C,MAAM,IAAI,eACX,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,iBACzB,MAAM,IAAI,cACb,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,KACtC,gBAuDF,CAAC"}

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@purpurds/drawer",
+  "version": "5.15.1",
+  "license": "AGPL-3.0-only",
+  "main": "./dist/drawer.cjs.js",
+  "types": "./dist/drawer.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/drawer.cjs.js",
+      "types": "./dist/drawer.d.ts",
+      "default": "./dist/drawer.es.js"
+    },
+    "./styles": "./dist/styles.css"
+  },
+  "source": "src/drawer.tsx",
+  "dependencies": {
+    "@radix-ui/react-dialog": "~1.0.5",
+    "@radix-ui/react-scroll-area": "~1.0.5",
+    "classnames": "~2.5.0",
+    "@purpurds/heading": "5.15.1",
+    "@purpurds/tokens": "5.15.1",
+    "@purpurds/button": "5.15.1",
+    "@purpurds/icon": "5.15.1",
+    "@purpurds/paragraph": "5.15.1"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "~1.10.0",
+    "@storybook/blocks": "^8.2.6",
+    "@storybook/preview-api": "^8.2.6",
+    "@storybook/react": "^8.2.6",
+    "@telia/base-rig": "~8.2.0",
+    "@telia/react-rig": "~3.2.0",
+    "@testing-library/dom": "~9.3.3",
+    "@testing-library/jest-dom": "~6.4.0",
+    "@testing-library/react": "~14.3.0",
+    "@testing-library/user-event": "~14.5.1",
+    "@types/node": "20.12.12",
+    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18.3.3",
+    "eslint-plugin-testing-library": "~6.2.0",
+    "eslint": "^8.57.0",
+    "jsdom": "~22.1.0",
+    "lint-staged": "~10.5.3",
+    "prettier": "~2.8.8",
+    "react-dom": "^18.3.1",
+    "react": "^18.3.1",
+    "storybook": "^8.2.6",
+    "typescript": "^5.5.4",
+    "vite": "5.3.4",
+    "vitest": "~1.5.0",
+    "@purpurds/component-rig": "1.0.0"
+  },
+  "scripts": {
+    "build:dev": "vite",
+    "build:watch": "vite build --watch",
+    "build": "vite build",
+    "ci:build": "rushx build",
+    "coverage": "vitest run --coverage",
+    "lint:fix": "eslint . --fix",
+    "lint": "lint-staged --no-stash 2>&1",
+    "sbdev": "rush sbdev",
+    "test:unit": "vitest run --passWithNoTests",
+    "test:watch": "vitest --watch",
+    "test": "rushx test:unit",
+    "typecheck": "tsc -p ./tsconfig.json"
+  }
+}

package/src/drawer-container.module.scss

@@ -0,0 +1,24 @@
+.purpur-drawer-container {
+  $root: &;
+  &--header {
+    padding: var(--purpur-spacing-250) var(--purpur-spacing-300) var(--purpur-spacing-200);
+    border-bottom: var(--purpur-border-width-xs) solid var(--purpur-color-border-weak);
+  }
+
+  &--body {
+    padding: var(--purpur-spacing-400) var(--purpur-spacing-300) 0;
+
+    &#{$root}--sticky {
+      padding: var(--purpur-spacing-400) var(--purpur-spacing-300);
+    }
+  }
+
+  &--footer {
+    padding: 0 var(--purpur-spacing-300) var(--purpur-spacing-200);
+
+    &#{$root}--sticky {
+      border-top: var(--purpur-border-width-xs) solid var(--purpur-color-border-weak);
+      padding: var(--purpur-spacing-200) var(--purpur-spacing-300);
+    }
+  }
+}

package/src/drawer-container.test.tsx

@@ -0,0 +1,74 @@
+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 { DrawerContainer } from "./drawer-container";
+
+expect.extend(matchers);
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("DrawerContainer", () => {
+  it.each([
+    { variant: "header" as const, expectedClassModifier: "header" },
+    { variant: "body" as const, expectedClassModifier: "body" },
+    { variant: "footer" as const, expectedClassModifier: "footer" },
+    { variant: undefined, expectedClassModifier: "body" },
+  ])(
+    "variant $variant should set the correct variant class purpur-drawer-container--$expectedClassModifier",
+    (args) => {
+      render(
+        <DrawerContainer
+          data-testid={Selectors.DRAWER_CONTAINER}
+          variant={args.variant}
+          stickyFooter
+        >
+          Some drawer container content
+        </DrawerContainer>
+      );
+      expect(screen.getByTestId(Selectors.DRAWER_CONTAINER)).toHaveClass(
+        `purpur-drawer-container--${args.expectedClassModifier}`
+      );
+    }
+  );
+
+  it("should set the sticky class when stickyFooter is true", () => {
+    render(
+      <DrawerContainer data-testid={Selectors.DRAWER_CONTAINER} stickyFooter>
+        Some drawer container content
+      </DrawerContainer>
+    );
+    expect(screen.getByTestId(Selectors.DRAWER_CONTAINER)).toHaveClass(
+      "purpur-drawer-container--sticky"
+    );
+  });
+
+  it("should not set the sticky class when stickyFooter is false", () => {
+    render(
+      <DrawerContainer data-testid={Selectors.DRAWER_CONTAINER} stickyFooter={false}>
+        Some drawer container content
+      </DrawerContainer>
+    );
+    expect(screen.getByTestId(Selectors.DRAWER_CONTAINER)).not.toHaveClass(
+      "purpur-drawer-container--sticky"
+    );
+  });
+
+  it("should render children", () => {
+    render(
+      <DrawerContainer data-testid={Selectors.DRAWER_CONTAINER} stickyFooter={false}>
+        Some drawer container content
+      </DrawerContainer>
+    );
+    expect(screen.getByTestId(Selectors.DRAWER_CONTAINER)).toHaveTextContent(
+      "Some drawer container content"
+    );
+  });
+});
+
+const Selectors = {
+  DRAWER_CONTAINER: "purpur-drawer-container",
+};

package/src/drawer-container.tsx

@@ -0,0 +1,48 @@
+import React, { ForwardedRef, forwardRef, ReactNode } from "react";
+import c from "classnames/bind";
+
+import styles from "./drawer-container.module.scss";
+const cx = c.bind(styles);
+
+export type DrawerContainerProps = {
+  ["data-testid"]?: string;
+  children: ReactNode;
+  className?: string;
+  stickyFooter: boolean;
+  variant?: "header" | "body" | "footer";
+};
+
+const rootClassName = "purpur-drawer-container";
+
+export const DrawerContainer = forwardRef(
+  (
+    {
+      ["data-testid"]: dataTestId = "purpur-drawer-container",
+      children,
+      className,
+      variant = "body",
+      stickyFooter,
+      ...props
+    }: DrawerContainerProps,
+    ref: ForwardedRef<HTMLDivElement>
+  ) => {
+    const classes = cx([
+      className,
+      rootClassName,
+      {
+        [`${rootClassName}--${variant}`]: variant,
+      },
+      {
+        [`${rootClassName}--sticky`]: stickyFooter,
+      },
+    ]);
+
+    return (
+      <div className={classes} data-testid={dataTestId} ref={ref} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+
+DrawerContainer.displayName = "DrawerContainer";

package/src/drawer-content.module.scss

@@ -0,0 +1,101 @@
+@import "@purpurds/tokens/breakpoint/variables";
+
+$animation-settings: var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);
+
+.purpur-drawer-content {
+  animation: drawerSmallScreenAnimation $animation-settings;
+  height: 90%;
+  max-width: 100%;
+  position: absolute;
+  right: 0;
+  top: 10%;
+  transition: transform $animation-settings;
+  width: 100%;
+
+  @media screen and (min-width: $purpur-breakpoint-md) {
+    animation: drawerLargeScreenAnimation $animation-settings;
+    height: 100%;
+    max-width: calc(30rem * var(--purpur-rescale));
+    top: 0;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &__content-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--purpur-spacing-400);
+  }
+
+  &__drawer-frame {
+    &[data-swipe="cancel"] {
+      transform: translateY(0);
+      transition: transform $animation-settings;
+    }
+
+    &[data-swipe="move"] {
+      transform: translateY(var(--purpur-drawer-swipe-move-y));
+    }
+
+    &[data-swipe="end"] {
+      animation: slideDown $animation-settings forwards;
+    }
+  }
+
+  &__description {
+    color: var(--purpur-color-text-default);
+    display: block;
+    font-family: var(--purpur-typography-family-default);
+    font-size: var(--purpur-typography-scale-100);
+    font-weight: var(--purpur-typography-weight-normal);
+    hyphens: none;
+    line-height: var(--purpur-typography-line-height-loose);
+    margin: 0;
+  }
+}
+
+.purpur-drawer-overlay {
+  animation: overlayAnimation $animation-settings;
+  background: var(--purpur-color-overlay-default);
+  inset: 0;
+  position: fixed;
+  transition: opacity $animation-settings;
+}
+
+@keyframes slideDown {
+  from {
+    transform: translateY(var(--purpur-drawer-swipe-end-y));
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+
+@keyframes overlayAnimation {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes drawerLargeScreenAnimation {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0%);
+  }
+}
+
+@keyframes drawerSmallScreenAnimation {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0%);
+  }
+}

package/src/drawer-content.test.tsx

@@ -0,0 +1,80 @@
+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 { DrawerContent } from "./drawer-content";
+
+expect.extend(matchers);
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("DrawerContent", () => {
+  it("should show the body text if it is provided", () => {
+    render(
+      <RadixDialog.Root open={true}>
+        <DrawerContent
+          data-testid={Selectors.DRAWER_CONTENT}
+          backButton
+          backButtonText="Back"
+          bodyText="This is the body text"
+          closeButtonText="Close"
+          onBackButtonClick={() => {}}
+          stickyFooter
+          title="Title"
+        >
+          Some drawer-content
+        </DrawerContent>
+      </RadixDialog.Root>
+    );
+    expect(screen.getByTestId(Selectors.BODY_TEXT)).toBeInTheDocument();
+    expect(screen.getByTestId(Selectors.BODY_TEXT)).toHaveTextContent("This is the body text");
+  });
+
+  it("should not show the body text if it is provided", () => {
+    render(
+      <RadixDialog.Root open={true}>
+        <DrawerContent
+          data-testid={Selectors.DRAWER_CONTENT}
+          backButton
+          backButtonText="Back"
+          closeButtonText="Close"
+          onBackButtonClick={() => {}}
+          stickyFooter
+          title="Title"
+        >
+          Some drawer-content
+        </DrawerContent>
+      </RadixDialog.Root>
+    );
+    expect(screen.queryByTestId(Selectors.BODY_TEXT)).not.toBeInTheDocument();
+  });
+
+  it.each(["This is the bodyText", undefined])("should render children", (bodyText) => {
+    render(
+      <RadixDialog.Root open={true}>
+        <DrawerContent
+          data-testid={Selectors.DRAWER_CONTENT}
+          backButton
+          backButtonText="Back"
+          bodyText={bodyText}
+          closeButtonText="Close"
+          onBackButtonClick={() => {}}
+          stickyFooter
+          title="Title"
+        >
+          Some drawer-content
+        </DrawerContent>
+      </RadixDialog.Root>
+    );
+    expect(screen.getByTestId(Selectors.DRAWER_CONTENT)).toHaveTextContent("Some drawer-content");
+  });
+});
+
+const Selectors = {
+  DRAWER_CONTENT: "purpur-drawer-content",
+  BODY_TEXT: "purpur-drawer-content-description",
+};

package/src/drawer-content.tsx

@@ -0,0 +1,124 @@
+import React, { ForwardedRef, forwardRef, ReactNode, useContext, useRef } from "react";
+import * as RadixDialog from "@radix-ui/react-dialog";
+import c from "classnames/bind";
+
+import { DrawerContext } from "./drawer.context";
+import styles from "./drawer-content.module.scss";
+import { DrawerFrame } from "./drawer-frame";
+import { OpenHandlerFunction } from "./types";
+import { useSwipeToDismiss } from "./use-swipe-to-dismiss.hook";
+const cx = c.bind(styles);
+
+export type WithBackButton = {
+  backButton: boolean;
+  backButtonText: string;
+  backButtonOnlyIcon?: boolean;
+  onBackButtonClick: () => void;
+};
+
+export type WithoutBackButton = {
+  backButton?: never;
+  backButtonText?: never;
+  backButtonOnlyIcon?: never;
+  onBackButtonClick?: never;
+};
+
+export type DrawerContentProps = {
+  ["data-testid"]?: string;
+  bodyText?: string;
+  children: ReactNode;
+  className?: string;
+  closeButtonText: string;
+  disableCloseOnClickOutside?: boolean;
+  footerContent?: ReactNode;
+  stickyFooter?: boolean;
+  title: string;
+} & (WithoutBackButton | WithBackButton);
+
+const rootClassName = "purpur-drawer-content";
+
+export const DrawerContent = forwardRef(
+  (
+    {
+      ["data-testid"]: dataTestId = "purpur-drawer-content",
+      backButton = false,
+      backButtonText,
+      backButtonOnlyIcon = false,
+      bodyText,
+      children,
+      className,
+      closeButtonText,
+      disableCloseOnClickOutside = false,
+      footerContent,
+      onBackButtonClick,
+      stickyFooter = false,
+      title,
+      ...props
+    }: DrawerContentProps,
+    ref: ForwardedRef<HTMLDivElement>
+  ) => {
+    const classes = cx([className, rootClassName]);
+
+    const drawerFrameRef = useRef<HTMLDivElement>(null);
+    const onOpenChange = useContext(DrawerContext);
+    const { onAnimationEnd, onSwipeStart, onSwipeMove, onSwipeCancel, onSwipeEnd } =
+      useSwipeToDismiss(drawerFrameRef, onOpenChange as OpenHandlerFunction);
+
+    const handlePointerDownOutside = (event: CustomEvent<{ originalEvent: PointerEvent }>) => {
+      if (disableCloseOnClickOutside) {
+        event.preventDefault();
+      }
+    };
+
+    return (
+      <RadixDialog.Portal>
+        <RadixDialog.Overlay
+          className={cx("purpur-drawer-overlay")}
+          data-testid={`${dataTestId}-overlay`}
+        >
+          <RadixDialog.Content
+            onPointerDownOutside={handlePointerDownOutside}
+            className={classes}
+            data-testid={dataTestId}
+            ref={ref}
+            {...props}
+          >
+            <DrawerFrame
+              backButton={backButton}
+              backButtonText={backButtonText}
+              backButtonOnlyIcon={backButtonOnlyIcon}
+              closeButtonText={closeButtonText}
+              className={cx(`${rootClassName}__drawer-frame`)}
+              footerContent={footerContent}
+              ref={drawerFrameRef}
+              onAnimationEnd={onAnimationEnd}
+              onBackButtonClick={onBackButtonClick}
+              onSwipeStart={onSwipeStart}
+              onSwipeMove={onSwipeMove}
+              onSwipeCancel={onSwipeCancel}
+              onSwipeEnd={onSwipeEnd}
+              stickyFooter={stickyFooter}
+              title={title}
+            >
+              {bodyText ? (
+                <div className={cx(`${rootClassName}__content-container`)}>
+                  <RadixDialog.Description
+                    className={cx(`${rootClassName}__description`)}
+                    data-testid={`${dataTestId}-description`}
+                  >
+                    {bodyText}
+                  </RadixDialog.Description>
+                  <div>{children}</div>
+                </div>
+              ) : (
+                children
+              )}
+            </DrawerFrame>
+          </RadixDialog.Content>
+        </RadixDialog.Overlay>
+      </RadixDialog.Portal>
+    );
+  }
+);
+
+DrawerContent.displayName = "DrawerContent";

package/src/drawer-frame.module.scss

@@ -0,0 +1,44 @@
+@import "@purpurds/tokens/breakpoint/variables";
+
+.purpur-drawer-frame {
+  background-color: var(--purpur-color-background-primary);
+  border-top-left-radius: var(--purpur-border-radius-lg);
+  border-top-right-radius: var(--purpur-border-radius-lg);
+  box-shadow: var(--purpur-shadow-lg);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  position: relative;
+
+  @media screen and (min-width: $purpur-breakpoint-md) {
+    border-bottom-left-radius: var(--purpur-border-radius-lg);
+    border-top-right-radius: 0;
+  }
+
+  &--sticky-footer {
+    gap: 0;
+  }
+
+  &__header {
+    flex: 0 0 auto;
+  }
+
+  &__body {
+    flex: 1 1 auto;
+    overflow: hidden;
+  }
+
+  &__footer {
+    flex: 0 0 auto;
+  }
+
+  &__content-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--purpur-spacing-400);
+
+    &--no-footer {
+      margin-bottom: var(--purpur-spacing-400);
+    }
+  }
+}