Feat/htl 110511 update drawer divider

common/changes/pcln-design-system/feat-HTL-110511-update-drawer-divider_2024-11-05-21-55.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-design-system",
+      "comment": "Add divider styling logic",
+      "type": "minor"
+    }
+  ],
+  "packageName": "pcln-design-system"
+}

packages/core/src/Drawer/Drawer.spec.tsx

@@ -48,4 +48,24 @@ describe('Drawer', () => {
     )
     expect(getByText('Custom Heading')).toBeTruthy()
   })
+
+  test('renders Drawer with no divider', () => {
+    const { getByTestId } = render(
+      <Drawer
+        isOpen={true}
+        placement='right'
+        onClose={jest.fn}
+        onCollapse={jest.fn}
+        heading={<div>Custom Heading</div>}
+        showDivider={false} // Default true
+      >
+        Content
+      </Drawer>
+    )
+
+    const element = getByTestId('drawer-divider')
+    const style = window.getComputedStyle(element)
+    const boxShadow = style?.boxShadow
+    expect(boxShadow).toBeFalsy()
+  })
 })

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

@@ -181,7 +181,7 @@ export const WithCustomHeadingAndContent = (args) => (
   </DrawerStory>
 )
 
-export const WithCustomHeading = (args) => (
+export const WithNeighborhoodsHeadingNoDivider = (args) => (
   <DrawerStory
     {...args}
     placement='right'
@@ -191,6 +191,7 @@ export const WithCustomHeading = (args) => (
     width='100%'
     onClose={null}
     onCollapse={null}
+    showDivider={false}
   />
 )
 

packages/core/src/Drawer/Drawer.tsx

@@ -20,6 +20,7 @@ export type DrawerProps = SpaceProps &
     isMobile?: boolean
     isOpen?: boolean
     isDraggable?: boolean
+    showDivider?: boolean
     onClose?: () => void
     onCollapse?: () => void
     placement?: PlacementOptions
@@ -47,6 +48,13 @@ const dragToDismissAnimation = (onDragEnd) => {
   }
 }
 
+const getDividerStyle = ({ showDivider, boxShadow }) =>
+  showDivider
+    ? {
+        boxShadow,
+      }
+    : {}
+
 export const Drawer: React.FC<DrawerProps> = ({
   children,
   heading,
@@ -55,6 +63,7 @@ export const Drawer: React.FC<DrawerProps> = ({
   isMobile = false,
   isOpen = false,
   isDraggable = true,
+  showDivider = true,
   onClose,
   onCollapse,
   placement = 'right',
@@ -140,9 +149,8 @@ export const Drawer: React.FC<DrawerProps> = ({
                         maxHeight={`calc(${props.height ?? '100vh'} - 100px)`}
                         overflow='scroll'
                         onScroll={onScrollHandler}
-                        style={{
-                          boxShadow,
-                        }}
+                        data-testid='drawer-divider'
+                        style={getDividerStyle({ showDivider, boxShadow })}
                       >
                         <Box py={2} px={3} height='100%'>
                           {children}

packages/core/src/SlideBox/Slide.tsx

@@ -30,8 +30,9 @@ export function Slide({
   const ref = useRef()
 
   useEffect(() => {
-    /* istanbul ignore next */
+    /* c8 ignore next */
     if (isCurrentSlide === true && typeof slideBoxRef?.current?.scroll === 'function' && ref?.current) {
+      /* c8 ignore next */
       const { offsetLeft, offsetParent, offsetWidth } = ref.current
       const { offsetWidth: parentOffset } = offsetParent || {}
       slideBoxRef?.current?.scroll({ left: offsetLeft - parentOffset + offsetWidth + overflowAllowancePxX })