From 1ac41252e348ffcf1fec4e332b6d7090706c3b1e Mon Sep 17 00:00:00 2001
From: Kevin <83264008+coolestKev@users.noreply.github.com>
Date: Tue, 5 Nov 2024 09:17:43 -0500
Subject: [PATCH 1/9] feat(HTL-111103): Enable custom header for drawer
 component

---
 packages/core/src/Drawer/Drawer.stories.tsx | 31 +++++++++++++++--
 packages/core/src/Drawer/Drawer.styled.tsx  | 38 +++++++++++++++++++++
 packages/core/src/Drawer/Drawer.tsx         |  6 +++-
 packages/icons/src/index.js                 |  2 +-
 4 files changed, 73 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/Drawer/Drawer.stories.tsx b/packages/core/src/Drawer/Drawer.stories.tsx
index c7d790e4e..35ad34e80 100644
--- a/packages/core/src/Drawer/Drawer.stories.tsx
+++ b/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%' padding={3} 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,23 @@ export const WithNoHeader = (args) => (
     {CustomPennyContent}
   </DrawerStory>
 )
-export const WithCustomHeaderAndContent = (args) => (
+export const WithCustomHeadingAndContent = (args) => (
   <DrawerStory {...args} placement='right' heading={CustomPennyHeader}>
     {CustomPennyContent}
   </DrawerStory>
 )
 
+export const WithUserSpecifiedCustomHeader = (args) => (
+  <DrawerStory
+    {...args}
+    placement='right'
+    customHeader={NeighborhoodsHeader}
+    isMobile
+    isFloating={false}
+    width='100%'
+  />
+)
+
 export const WithCloseButton = (args) => (
   <DrawerStory {...args} placement='right' onCollapse={undefined} includeCollapseButton={false}>
     Drawer Content
diff --git a/packages/core/src/Drawer/Drawer.styled.tsx b/packages/core/src/Drawer/Drawer.styled.tsx
index 4d5a84b50..18a836631 100644
--- a/packages/core/src/Drawer/Drawer.styled.tsx
+++ b/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,40 @@ export const HeaderButton = styled(IconButton)`
     color: ${getPaletteColor('text.dark')};
   }
 `
+
+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>
+)
diff --git a/packages/core/src/Drawer/Drawer.tsx b/packages/core/src/Drawer/Drawer.tsx
index af3fd1267..df7e4597f 100644
--- a/packages/core/src/Drawer/Drawer.tsx
+++ b/packages/core/src/Drawer/Drawer.tsx
@@ -14,6 +14,7 @@ export type PlacementOptions = 'top' | 'bottom' | 'right' | 'left'
 export type DrawerProps = SpaceProps &
   LayoutProps & {
     children?: string | React.ReactNode
+    customHeader?: string | Function | React.ReactNode
     heading?: string | React.ReactNode
     isCollapsed?: boolean
     isFloating?: boolean
@@ -49,6 +50,7 @@ const dragToDismissAnimation = (onDragEnd) => {
 
 export const Drawer: React.FC<DrawerProps> = ({
   children,
+  customHeader = null,
   heading,
   isCollapsed = false,
   isFloating = true,
@@ -86,7 +88,9 @@ export const Drawer: React.FC<DrawerProps> = ({
             overflow='hidden'
           >
             <Flex flexDirection='column'>
-              {(heading || onClose || onCollapse) && (
+              {!!customHeader && customHeader}
+
+              {!customHeader && (heading || onClose || onCollapse) && (
                 <Flex flexDirection='column'>
                   <Flex flexDirection='row' p={3}>
                     {typeof heading === 'string' ? (
diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js
index 9c24adec1..9d20df89d 100644
--- a/packages/icons/src/index.js
+++ b/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'

From b0535917b8ffcff208d09b1c5f814ef1adba5f62 Mon Sep 17 00:00:00 2001
From: Kevin <83264008+coolestKev@users.noreply.github.com>
Date: Tue, 5 Nov 2024 09:28:40 -0500
Subject: [PATCH 2/9] feat(HTL-111103): Correct type declaration

---
 packages/core/src/Drawer/Drawer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/Drawer/Drawer.tsx b/packages/core/src/Drawer/Drawer.tsx
index df7e4597f..82bd32ea7 100644
--- a/packages/core/src/Drawer/Drawer.tsx
+++ b/packages/core/src/Drawer/Drawer.tsx
@@ -14,7 +14,7 @@ export type PlacementOptions = 'top' | 'bottom' | 'right' | 'left'
 export type DrawerProps = SpaceProps &
   LayoutProps & {
     children?: string | React.ReactNode
-    customHeader?: string | Function | React.ReactNode
+    customHeader?: string | React.ReactNode
     heading?: string | React.ReactNode
     isCollapsed?: boolean
     isFloating?: boolean

From 122fc7cdd660dbdf623ee1c155fb7384c4188c7f Mon Sep 17 00:00:00 2001
From: Kevin <83264008+coolestKev@users.noreply.github.com>
Date: Tue, 5 Nov 2024 09:34:23 -0500
Subject: [PATCH 3/9] feat(HTL-111103): Add rush change

---
 ...03-drawer-component-additions_2024-11-05-14-34.json | 10 ++++++++++
 ...03-drawer-component-additions_2024-11-05-14-34.json | 10 ++++++++++
 2 files changed, 20 insertions(+)
 create mode 100644 common/changes/pcln-design-system/feat-HTL-111103-drawer-component-additions_2024-11-05-14-34.json
 create mode 100644 common/changes/pcln-icons/feat-HTL-111103-drawer-component-additions_2024-11-05-14-34.json

diff --git a/common/changes/pcln-design-system/feat-HTL-111103-drawer-component-additions_2024-11-05-14-34.json b/common/changes/pcln-design-system/feat-HTL-111103-drawer-component-additions_2024-11-05-14-34.json
new file mode 100644
index 000000000..e7073ef55
--- /dev/null
+++ b/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"
+}
\ No newline at end of file
diff --git a/common/changes/pcln-icons/feat-HTL-111103-drawer-component-additions_2024-11-05-14-34.json b/common/changes/pcln-icons/feat-HTL-111103-drawer-component-additions_2024-11-05-14-34.json
new file mode 100644
index 000000000..9f33a5928
--- /dev/null
+++ b/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"
+}
\ No newline at end of file

From 6e5c26897958e5c82fdc2b9dd86207cc153c70e2 Mon Sep 17 00:00:00 2001
From: Kevin <83264008+coolestKev@users.noreply.github.com>
Date: Tue, 5 Nov 2024 10:08:27 -0500
Subject: [PATCH 4/9] feat(HTL-111103): Update unit test

---
 packages/core/src/Drawer/Drawer.spec.tsx | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/packages/core/src/Drawer/Drawer.spec.tsx b/packages/core/src/Drawer/Drawer.spec.tsx
index 2399cacba..e0f8bfea3 100644
--- a/packages/core/src/Drawer/Drawer.spec.tsx
+++ b/packages/core/src/Drawer/Drawer.spec.tsx
@@ -1,6 +1,8 @@
 import React from 'react'
 import { render } from '../__test__/testing-library'
 import { Drawer } from './Drawer'
+import { Flex } from '../Flex/Flex'
+import { Button } from '../Button/Button'
 
 describe('Drawer', () => {
   test('renders Drawer with no heading', () => {
@@ -48,4 +50,25 @@ describe('Drawer', () => {
     )
     expect(getByText('Custom Heading')).toBeTruthy()
   })
+
+  test('renders Drawer with full custom headers (text, buttons, etc.)', () => {
+    const CustomHeader = (
+      <Flex data-testid='custom-header'>
+        CustomHeader<Button ml='auto'>Click</Button>
+      </Flex>
+    )
+
+    const { getByTestId } = render(
+      <Drawer
+        isOpen={true}
+        placement='right'
+        onClose={jest.fn}
+        onCollapse={jest.fn}
+        customHeader={CustomHeader}
+      >
+        Content
+      </Drawer>
+    )
+    expect(getByTestId('custom-header')).toBeTruthy()
+  })
 })

From 4ea120eb6f1545856b47de00d4cd421654329dc9 Mon Sep 17 00:00:00 2001
From: Kevin <83264008+coolestKev@users.noreply.github.com>
Date: Tue, 5 Nov 2024 11:37:48 -0500
Subject: [PATCH 5/9] feat(HTL-111103): Remove string union

---
 packages/core/src/Drawer/Drawer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/Drawer/Drawer.tsx b/packages/core/src/Drawer/Drawer.tsx
index 82bd32ea7..67070bac6 100644
--- a/packages/core/src/Drawer/Drawer.tsx
+++ b/packages/core/src/Drawer/Drawer.tsx
@@ -14,7 +14,7 @@ export type PlacementOptions = 'top' | 'bottom' | 'right' | 'left'
 export type DrawerProps = SpaceProps &
   LayoutProps & {
     children?: string | React.ReactNode
-    customHeader?: string | React.ReactNode
+    customHeader?: React.ReactNode
     heading?: string | React.ReactNode
     isCollapsed?: boolean
     isFloating?: boolean

From 2bd3537c4372569a7b05329428969e9a2fb2e64b Mon Sep 17 00:00:00 2001
From: Kevin <83264008+coolestKev@users.noreply.github.com>
Date: Tue, 5 Nov 2024 11:38:42 -0500
Subject: [PATCH 6/9] feat(HTL-111103): Remove string union for other props

---
 packages/core/src/Drawer/Drawer.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/Drawer/Drawer.tsx b/packages/core/src/Drawer/Drawer.tsx
index 67070bac6..b628dbe12 100644
--- a/packages/core/src/Drawer/Drawer.tsx
+++ b/packages/core/src/Drawer/Drawer.tsx
@@ -13,9 +13,9 @@ import { theme } from '../theme'
 export type PlacementOptions = 'top' | 'bottom' | 'right' | 'left'
 export type DrawerProps = SpaceProps &
   LayoutProps & {
-    children?: string | React.ReactNode
+    children?: React.ReactNode
     customHeader?: React.ReactNode
-    heading?: string | React.ReactNode
+    heading?: React.ReactNode
     isCollapsed?: boolean
     isFloating?: boolean
     isMobile?: boolean

From c8a3b5a55359c527c7297d878358b6d15267c6a1 Mon Sep 17 00:00:00 2001
From: Kevin <83264008+coolestKev@users.noreply.github.com>
Date: Tue, 5 Nov 2024 12:00:11 -0500
Subject: [PATCH 7/9] feat(HTL-111103): Remove customHeader prop and use
 heading

---
 packages/core/src/Drawer/Drawer.spec.tsx    | 23 ---------------------
 packages/core/src/Drawer/Drawer.stories.tsx |  8 ++++---
 packages/core/src/Drawer/Drawer.tsx         |  8 ++-----
 3 files changed, 7 insertions(+), 32 deletions(-)

diff --git a/packages/core/src/Drawer/Drawer.spec.tsx b/packages/core/src/Drawer/Drawer.spec.tsx
index e0f8bfea3..2399cacba 100644
--- a/packages/core/src/Drawer/Drawer.spec.tsx
+++ b/packages/core/src/Drawer/Drawer.spec.tsx
@@ -1,8 +1,6 @@
 import React from 'react'
 import { render } from '../__test__/testing-library'
 import { Drawer } from './Drawer'
-import { Flex } from '../Flex/Flex'
-import { Button } from '../Button/Button'
 
 describe('Drawer', () => {
   test('renders Drawer with no heading', () => {
@@ -50,25 +48,4 @@ describe('Drawer', () => {
     )
     expect(getByText('Custom Heading')).toBeTruthy()
   })
-
-  test('renders Drawer with full custom headers (text, buttons, etc.)', () => {
-    const CustomHeader = (
-      <Flex data-testid='custom-header'>
-        CustomHeader<Button ml='auto'>Click</Button>
-      </Flex>
-    )
-
-    const { getByTestId } = render(
-      <Drawer
-        isOpen={true}
-        placement='right'
-        onClose={jest.fn}
-        onCollapse={jest.fn}
-        customHeader={CustomHeader}
-      >
-        Content
-      </Drawer>
-    )
-    expect(getByTestId('custom-header')).toBeTruthy()
-  })
 })
diff --git a/packages/core/src/Drawer/Drawer.stories.tsx b/packages/core/src/Drawer/Drawer.stories.tsx
index 35ad34e80..b324950a7 100644
--- a/packages/core/src/Drawer/Drawer.stories.tsx
+++ b/packages/core/src/Drawer/Drawer.stories.tsx
@@ -44,7 +44,7 @@ const CustomPennyHeader = (
 )
 
 const NeighborhoodsHeader = (
-  <Flex width='100%' padding={3} alignItems='center'>
+  <Flex width='100%' alignItems='center'>
     <Flex>
       <ArrowLeft color='primary.base' />
     </Flex>
@@ -181,14 +181,16 @@ export const WithCustomHeadingAndContent = (args) => (
   </DrawerStory>
 )
 
-export const WithUserSpecifiedCustomHeader = (args) => (
+export const WithCustomHeading = (args) => (
   <DrawerStory
     {...args}
     placement='right'
-    customHeader={NeighborhoodsHeader}
+    heading={NeighborhoodsHeader}
     isMobile
     isFloating={false}
     width='100%'
+    onClose={null}
+    onCollapse={null}
   />
 )
 
diff --git a/packages/core/src/Drawer/Drawer.tsx b/packages/core/src/Drawer/Drawer.tsx
index b628dbe12..1389b5ae2 100644
--- a/packages/core/src/Drawer/Drawer.tsx
+++ b/packages/core/src/Drawer/Drawer.tsx
@@ -14,8 +14,7 @@ export type PlacementOptions = 'top' | 'bottom' | 'right' | 'left'
 export type DrawerProps = SpaceProps &
   LayoutProps & {
     children?: React.ReactNode
-    customHeader?: React.ReactNode
-    heading?: React.ReactNode
+    heading?: string | React.ReactNode
     isCollapsed?: boolean
     isFloating?: boolean
     isMobile?: boolean
@@ -50,7 +49,6 @@ const dragToDismissAnimation = (onDragEnd) => {
 
 export const Drawer: React.FC<DrawerProps> = ({
   children,
-  customHeader = null,
   heading,
   isCollapsed = false,
   isFloating = true,
@@ -88,9 +86,7 @@ export const Drawer: React.FC<DrawerProps> = ({
             overflow='hidden'
           >
             <Flex flexDirection='column'>
-              {!!customHeader && customHeader}
-
-              {!customHeader && (heading || onClose || onCollapse) && (
+              {(heading || onClose || onCollapse) && (
                 <Flex flexDirection='column'>
                   <Flex flexDirection='row' p={3}>
                     {typeof heading === 'string' ? (

From acd9f01858ae856aa5c8f42102df0b74f990a6a1 Mon Sep 17 00:00:00 2001
From: Kevin <83264008+coolestKev@users.noreply.github.com>
Date: Tue, 5 Nov 2024 12:15:38 -0500
Subject: [PATCH 8/9] feat(HTL-111103): Add comment

---
 packages/core/src/Drawer/Drawer.styled.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/core/src/Drawer/Drawer.styled.tsx b/packages/core/src/Drawer/Drawer.styled.tsx
index 18a836631..82fea8118 100644
--- a/packages/core/src/Drawer/Drawer.styled.tsx
+++ b/packages/core/src/Drawer/Drawer.styled.tsx
@@ -69,6 +69,9 @@ export const HeaderButton = styled(IconButton)`
   }
 `
 
+/**
+ * Data below is used for Drawer.stories.tsx
+ */
 export const Handle = styled.div`
   /* Handle */
 

From 1175981060951823db28dac85b8150981b5ddb50 Mon Sep 17 00:00:00 2001
From: Kevin <83264008+coolestKev@users.noreply.github.com>
Date: Tue, 5 Nov 2024 12:21:13 -0500
Subject: [PATCH 9/9] Update packages/core/src/Drawer/Drawer.tsx

Co-authored-by: Huzefa Kagdi <huzefa.kagdi@priceline.com>
---
 packages/core/src/Drawer/Drawer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/Drawer/Drawer.tsx b/packages/core/src/Drawer/Drawer.tsx
index 1389b5ae2..e3f931882 100644
--- a/packages/core/src/Drawer/Drawer.tsx
+++ b/packages/core/src/Drawer/Drawer.tsx
@@ -14,7 +14,7 @@ export type PlacementOptions = 'top' | 'bottom' | 'right' | 'left'
 export type DrawerProps = SpaceProps &
   LayoutProps & {
     children?: React.ReactNode
-    heading?: string | React.ReactNode
+    heading?: React.ReactNode
     isCollapsed?: boolean
     isFloating?: boolean
     isMobile?: boolean