feat(HTL-111103): Enable custom header for drawer component

common/changes/pcln-design-system/feat-HTL-111103-drawer-component-additions_2024-11-05-14-34.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-design-system",
+      "comment": "Drawer component custom header onboarding",
+      "type": "minor"
+    }
+  ],
+  "packageName": "pcln-design-system"
+}

common/changes/pcln-icons/feat-HTL-111103-drawer-component-additions_2024-11-05-14-34.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-icons",
+      "comment": "",
+      "type": "none"
+    }
+  ],
+  "packageName": "pcln-icons"
+}

packages/core/src/Drawer/Drawer.stories.tsx

@@ -1,11 +1,13 @@
 import { Box } from '../Box/Box'
 import { Flex } from '../Flex/Flex'
-import { Sparkle } from 'pcln-icons'
+import { Sparkle, ArrowLeft } from 'pcln-icons'
 import { Drawer } from './Drawer'
 import React, { useState } from 'react'
 import { Text } from '../Text/Text'
 import { Stamp } from '../Stamp/Stamp'
 import { ChatMessageContainer } from '../ChatMessageContainer/ChatMessageContainer'
+import { DrawerHandle } from './Drawer.styled'
+import { Button } from '../Button/Button'
 
 function DrawerStory(props) {
   const [isOpen, setIsOpen] = useState(true)
@@ -41,6 +43,20 @@ const CustomPennyHeader = (
   </Flex>
 )
 
+const NeighborhoodsHeader = (
+  <Flex width='100%' alignItems='center'>
+    <Flex>
+      <ArrowLeft color='primary.base' />
+    </Flex>
+    <DrawerHandle />
+    <Flex ml='auto'>
+      <Button color='primary.base' size='small' variation='subtle'>
+        Search Hotels
+      </Button>
+    </Flex>
+  </Flex>
+)
+
 const CustomPennyContent = (
   <ChatMessageContainer
     messageMaxWidth='90%'
@@ -159,12 +175,25 @@ export const WithNoHeader = (args) => (
     {CustomPennyContent}
   </DrawerStory>
 )
-export const WithCustomHeaderAndContent = (args) => (
+export const WithCustomHeadingAndContent = (args) => (
   <DrawerStory {...args} placement='right' heading={CustomPennyHeader}>
     {CustomPennyContent}
   </DrawerStory>
 )
 
+export const WithCustomHeading = (args) => (
+  <DrawerStory
+    {...args}
+    placement='right'
+    heading={NeighborhoodsHeader}
+    isMobile
+    isFloating={false}
+    width='100%'
+    onClose={null}
+    onCollapse={null}
+  />
+)
+
 export const WithCloseButton = (args) => (
   <DrawerStory {...args} placement='right' onCollapse={undefined} includeCollapseButton={false}>
     Drawer Content

packages/core/src/Drawer/Drawer.styled.tsx

@@ -7,6 +7,7 @@ import { getPaletteColor } from '../utils'
 import { Box } from '../Box/Box'
 import { IconButton } from '../IconButton/IconButton'
 import { PlacementOptions } from './Drawer'
+import { Absolute } from '../Absolute/Absolute'
 
 const Component = React.forwardRef((props, ref: React.MutableRefObject<HTMLDivElement>) => (
   <Box {...props} ref={ref} />
@@ -67,3 +68,43 @@ export const HeaderButton = styled(IconButton)`
     color: ${getPaletteColor('text.dark')};
   }
 `
+
+/**
+ * Data below is used for Drawer.stories.tsx
+ */
+export const Handle = styled.div`
+  /* Handle */
+
+  /* Auto layout */
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 8px;
+
+  width: 48px;
+  height: 8px;
+
+  /* Background/Tint */
+  background: #d5dce4;
+  box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.08);
+  border-radius: 999px;
+
+  /* Inside auto layout */
+  flex: none;
+  order: 0;
+  flex-grow: 0;
+  z-index: 0;
+`
+
+export const HandleContainer = styled(Absolute)`
+  /* Centers the handle wrt parent */
+  transform: translateX(-50%);
+  cursor: grab;
+  left: 50%;
+`
+
+export const DrawerHandle = () => (
+  <HandleContainer>
+    <Handle />
+  </HandleContainer>
+)

packages/core/src/Drawer/Drawer.tsx

@@ -13,8 +13,8 @@ import { theme } from '../theme'
 export type PlacementOptions = 'top' | 'bottom' | 'right' | 'left'
 export type DrawerProps = SpaceProps &
   LayoutProps & {
-    children?: string | React.ReactNode
-    heading?: string | React.ReactNode
+    children?: React.ReactNode
+    heading?: React.ReactNode
     isCollapsed?: boolean
     isFloating?: boolean
     isMobile?: boolean

packages/icons/src/index.js

@@ -34,6 +34,7 @@ export { default as Calendar } from './Calendar.jsx'
 export { default as CalendarCheck } from './CalendarCheck.jsx'
 export { default as CalendarClock } from './CalendarClock.jsx'
 export { default as CallEnd } from './CallEnd.jsx'
+export { default as CallReceive } from './CallReceive.jsx'
 export { default as Cancel } from './Cancel.jsx'
 export { default as CarAutomatic } from './CarAutomatic.jsx'
 export { default as CarCircle } from './CarCircle.jsx'
@@ -197,7 +198,6 @@ export { default as PhoneAgent } from './PhoneAgent.jsx'
 export { default as PhoneAgentWithCard } from './PhoneAgentWithCard.jsx'
 export { default as PhoneDialPad } from './PhoneDialPad.jsx'
 export { default as PhoneForwarded } from './PhoneForwarded.jsx'
-export { default as CallReceive } from './CallReceive.jsx'
 export { default as PhoneLog } from './PhoneLog.jsx'
 export { default as Picture } from './Picture.jsx'
 export { default as PieChart } from './PieChart.jsx'