@purpurds/drawer 8.6.0 → 8.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/drawer",
-  "version": "8.6.0",
+  "version": "8.8.0",
   "license": "AGPL-3.0-only",
   "main": "./dist/drawer.cjs.js",
   "types": "./dist/drawer.d.ts",
@@ -18,13 +18,13 @@
     "@radix-ui/react-dialog": "~1.1.6",
     "@radix-ui/react-scroll-area": "~1.2.3",
     "classnames": "~2.5.0",
-    "@purpurds/button": "8.6.0",
-    "@purpurds/icon": "8.6.0",
-    "@purpurds/common-types": "8.6.0",
-    "@purpurds/tokens": "8.6.0",
-    "@purpurds/paragraph": "8.6.0",
-    "@purpurds/visually-hidden": "8.6.0",
-    "@purpurds/heading": "8.6.0"
+    "@purpurds/common-types": "8.8.0",
+    "@purpurds/heading": "8.8.0",
+    "@purpurds/tokens": "8.8.0",
+    "@purpurds/button": "8.8.0",
+    "@purpurds/visually-hidden": "8.8.0",
+    "@purpurds/icon": "8.8.0",
+    "@purpurds/paragraph": "8.8.0"
   },
   "devDependencies": {
     "@storybook/react-vite": "^9.0.18",

package/src/drawer-container.tsx

@@ -27,14 +27,12 @@ export const DrawerContainer = forwardRef<HTMLDivElement, DrawerContainerProps>(
     ref
   ) => {
     const classes = cx([
-      className,
       rootClassName,
       {
         [`${rootClassName}--${variant}`]: variant,
-      },
-      {
         [`${rootClassName}--sticky`]: stickyFooter,
       },
+      className,
     ]);
 
     return (

package/src/drawer-content.tsx

@@ -69,11 +69,13 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
     ref
   ) => {
     const classes = cx([
-      className,
       rootClassName,
-      { [`${rootClassName}--fit-to-content`]: fitToContent },
-      { [`${rootClassName}--left`]: position === "left" },
-      { [`${rootClassName}--right`]: position === "right" },
+      {
+        [`${rootClassName}--fit-to-content`]: fitToContent,
+        [`${rootClassName}--left`]: position === "left",
+        [`${rootClassName}--right`]: position === "right",
+      },
+      className,
     ]);
 
     const drawerFrameRef = useRef<HTMLDivElement>(null);

package/src/drawer-frame.tsx

@@ -59,7 +59,6 @@ export const DrawerFrame = forwardRef<HTMLDivElement, DrawerFrameProps>(
   ) => {
     const hasBackButton = !!(backButton && backButtonText && onBackButtonClick);
     const classes = cx([
-      className,
       rootClassName,
       {
         [`${rootClassName}--fit-to-content`]: fitToContent,
@@ -69,6 +68,7 @@ export const DrawerFrame = forwardRef<HTMLDivElement, DrawerFrameProps>(
         [`${rootClassName}--without-back-button`]: !hasBackButton,
         [`${rootClassName}--with-back-button`]: hasBackButton,
       },
+      className,
     ]);
 
     return (

package/src/drawer-handle.tsx

@@ -30,7 +30,7 @@ export const DrawerHandle = forwardRef<HTMLDivElement, DrawerHandleProps>(
     },
     ref
   ) => {
-    const classes = cx([className, rootClassName]);
+    const classes = cx([rootClassName, className]);
     const pointerStartRef = React.useRef<{ y: number } | null>(null);
     const swipeDeltaRef = React.useRef<{ y: number } | null>(null);
     const { onPointerDown, onPointerMove, onPointerUp } = useSwipeTracking(

package/src/drawer-header.tsx

@@ -1,8 +1,8 @@
 import React, { forwardRef } from "react";
 import { Button, BUTTON_VARIANT } from "@purpurds/button";
 import type { BaseProps } from "@purpurds/common-types";
-import { Heading, TitleVariant } from "@purpurds/heading";
-import { IconArrowLeft } from "@purpurds/icon/arrow-left";
+import { DisplayVariant, Heading } from "@purpurds/heading";
+import { IconChevronLeft } from "@purpurds/icon/chevron-left";
 import { IconClose } from "@purpurds/icon/close";
 import { VisuallyHidden } from "@purpurds/visually-hidden";
 import * as RadixDialog from "@radix-ui/react-dialog";
@@ -40,7 +40,7 @@ export const DrawerHeader = forwardRef<HTMLDivElement, DrawerHeaderProps>(
     },
     ref
   ) => {
-    const classes = cx([className, rootClassName]);
+    const classes = cx([rootClassName, className]);
     const hasBackButton = !!(backButton && backButtonText && onBackButtonClick);
 
     return (
@@ -70,7 +70,7 @@ export const DrawerHeader = forwardRef<HTMLDivElement, DrawerHeaderProps>(
                 size="sm"
                 variant={backButtonOnlyIcon ? BUTTON_VARIANT.TERTIARY_PURPLE : BUTTON_VARIANT.TEXT}
               >
-                <IconArrowLeft size="sm" />
+                <IconChevronLeft size="sm" />
                 {!backButtonOnlyIcon && backButtonText}
               </Button>
             ) : headerContent ? (
@@ -85,7 +85,7 @@ export const DrawerHeader = forwardRef<HTMLDivElement, DrawerHeaderProps>(
                 <Heading
                   data-testid={`${dataTestId}-title`}
                   tag="h2"
-                  variant={TitleVariant.TITLE200}
+                  variant={DisplayVariant.DISPLAY10}
                   tabIndex={-1}
                 >
                   {title}
@@ -122,7 +122,7 @@ export const DrawerHeader = forwardRef<HTMLDivElement, DrawerHeaderProps>(
                 data-testid={`${dataTestId}-title-with-back-button`}
                 tag="h2"
                 tabIndex={-1}
-                variant={TitleVariant.TITLE200}
+                variant={DisplayVariant.DISPLAY10}
               >
                 {title}
               </Heading>

package/src/drawer-scroll-area.tsx

@@ -25,7 +25,7 @@ export const DrawerScrollArea = forwardRef<HTMLDivElement, DrawerScrollAreaProps
     },
     ref
   ) => {
-    const classes = cx([className, rootClassName]);
+    const classes = cx([rootClassName, className]);
     return (
       <div className={classes} data-testid={dataTestId} ref={ref} {...props}>
         <RadixScrollArea.Root