fixup! Feat(web-react): Introduce Drawer component #DS-1580

lmc-eu · Dec 30, 2024 · 1b43c11 · 1b43c11
1 parent 6f246ab
commit 1b43c11
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/packages/web-react/src/components/Drawer/stories/Drawer.stories.tsx b/packages/web-react/src/components/Drawer/stories/Drawer.stories.tsx
@@ -2,7 +2,7 @@ import { Markdown } from '@storybook/blocks';
 import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 import React from 'react';
-import { AlignmentY } from '../../../constants';
+import { AlignmentX } from '../../../constants';
 import Drawer from '../Drawer';
 import ReadMe from '../README.md';
 
@@ -16,8 +16,8 @@ const meta: Meta<typeof Drawer> = {
   },
   argTypes: {},
   args: {
-    alignmentY: AlignmentY.CENTER,
-    id: 'modal',
+    alignment: AlignmentX.CENTER,
+    id: 'drawer',
     isOpen: false,
     onClose: fn(),
     closeOnEscapeKeyDown: true,
@@ -27,3 +27,7 @@ const meta: Meta<typeof Drawer> = {
 
 export default meta;
 type Story = StoryObj<typeof Drawer>;
+
+export const Playground: Story = {
+  name: 'Drawer',
+};
diff --git a/packages/web-react/src/components/Drawer/useDrawerDialogStyleProps.ts b/packages/web-react/src/components/Drawer/useDrawerDialogStyleProps.ts
@@ -1,21 +1,21 @@
 import { ElementType, CSSProperties } from 'react';
-import { DrawerDialogCSSHeight, ModalDialogCSSHeightBreakpoints, DrawerDialogProps } from '../../types';
+import { DrawerDialogCSSHeight, DrawerDialogProps, DrawerDialogCSSHeightBreakpoints } from '../../types';
 
 interface CustomizedHeightCSSProperties extends CSSProperties {
   [key: string]: string | undefined | number;
 }
 
 const setCustomHeight = (
   baseVarName: string,
-  propValue: DrawerDialogCSSHeight | ModalDialogCSSHeightBreakpoints | undefined,
+  propValue: DrawerDialogCSSHeight | DrawerDialogCSSHeightBreakpoints | undefined,
 ): CustomizedHeightCSSProperties => {
   if (!propValue) return {};
 
   if (typeof propValue === 'object') {
     return Object.keys(propValue).reduce((acc, key) => {
       const suffix = key === 'mobile' ? '' : `-${key}`;
       const propName = `--${baseVarName}${suffix}`;
-      acc[propName] = propValue[key as keyof ModalDialogCSSHeightBreakpoints]?.toString();
+      acc[propName] = propValue[key as keyof DrawerDialogCSSHeightBreakpoints]?.toString();
 
       return acc;
     }, {} as CustomizedHeightCSSProperties);