feat(HTL-109459): multiroom drawer)

priceline · Oct 22, 2024 · ca44f4a · ca44f4a
1 parent 9f68dcd
commit ca44f4a
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 8 deletions.
diff --git a/common/changes/pcln-design-system/feat-HTL-109459-multiroom-drawer_2024-10-22-16-20.json b/common/changes/pcln-design-system/feat-HTL-109459-multiroom-drawer_2024-10-22-16-20.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-design-system",
+      "comment": "update drawer props",
+      "type": "minor"
+    }
+  ],
+  "packageName": "pcln-design-system"
+}
diff --git a/packages/core/src/Drawer/Drawer.stories.tsx b/packages/core/src/Drawer/Drawer.stories.tsx
@@ -142,7 +142,7 @@ export const Anchored = (args) => (
 )
 
 export const Mobile = (args) => (
-  <DrawerStory {...args} isMobile isFloating={false} placement='right'>
+  <DrawerStory {...args} isMobile isFloating={false} placement='right' width='100%'>
     Drawer Content
   </DrawerStory>
 )

diff --git a/packages/core/src/Drawer/Drawer.styled.tsx b/packages/core/src/Drawer/Drawer.styled.tsx
@@ -3,7 +3,6 @@ import { Flex } from '../Flex/Flex'
 import { theme } from '../theme'
 import { motion } from 'framer-motion'
 import React from 'react'
-import { Absolute } from '../Absolute/Absolute'
 import { getPaletteColor } from '../utils'
 import { Box } from '../Box/Box'
 import { IconButton } from '../IconButton/IconButton'
@@ -13,7 +12,7 @@ const Component = React.forwardRef((props, ref: React.MutableRefObject<HTMLDivEl
   <Box {...props} ref={ref} />
 ))
 
-const AnimatedAbsolute = motion(Component)
+const AnimatedComponent = motion(Component)
 
 const getBorderRadiusStyles = (placement, isFloating) => {
   const themeRadius = theme.borderRadii['2xl']
@@ -40,13 +39,14 @@ const positions: Record<PlacementOptions, string> = {
 }
 const getPlacementStyles = (placement) =>
   placement ? `margin-inline:auto; margin-block:auto; ${positions[placement]};` : ``
-export const DrawerWrapper = styled(Absolute)`
+export const DrawerWrapper = styled(Box)`
+  position: fixed;
   ${({ placement }) =>
     `
     ${getPlacementStyles(placement)}
     `}
 `
-export const DrawerRoot = styled(AnimatedAbsolute)`
+export const DrawerRoot = styled(AnimatedComponent)`
   background-color: ${getPaletteColor('background.lightest')};
   ${({ theme, placement, isFloating }) =>
     `box-shadow: ${theme.shadows['overlay-md']};

diff --git a/packages/core/src/Drawer/Drawer.tsx b/packages/core/src/Drawer/Drawer.tsx
@@ -12,15 +12,16 @@ import { MotionVariants } from '../Animate/Animate'
 export type PlacementOptions = 'top' | 'bottom' | 'right' | 'left'
 export type DrawerProps = SpaceProps &
   LayoutProps & {
+    children?: string | React.ReactNode
     heading?: string | React.ReactNode
     isCollapsed?: boolean
     isFloating?: boolean
-    isOpen?: boolean
     isMobile?: boolean
+    isOpen?: boolean
+    isDraggable?: boolean
     onClose?: () => void
     onCollapse?: () => void
     placement?: PlacementOptions
-    children?: string | React.ReactNode
   }
 
 const enterAnimation = {
@@ -51,6 +52,7 @@ export const Drawer: React.FC<DrawerProps> = ({
   isFloating = true,
   isMobile = false,
   isOpen = false,
+  isDraggable = true,
   onClose,
   onCollapse,
   placement = 'right',
@@ -67,6 +69,7 @@ export const Drawer: React.FC<DrawerProps> = ({
           maxWidth={isMobile ? '100%' : ['400px', '600px', '800px', '100%']}
           width={isMobile ? '100%' : props.width}
           height={!isCollapsed && props.height ? props.height : 'fit-content'}
+          {...props}
         >
           <DrawerRoot
             data-testid='drawer'
@@ -75,7 +78,7 @@ export const Drawer: React.FC<DrawerProps> = ({
             key='drawer'
             placement={isMobile ? 'bottom' : placement}
             {...enterAnimation[isMobile ? 'bottom' : placement]}
-            {...dragToDismissAnimation(onCollapse)}
+            {...(isDraggable ? dragToDismissAnimation(onCollapse) : {})}
             height='100%'
             width='100%'
             overflow='hidden'