[PLAY-1744] Drawer Kit Refactor (#4028)

**What does this PR do?** A clear and concise description with your
runway ticket url.


**Screenshots:** Screenshots to visualize your addition/change


**How to test?** Steps to confirm the desired behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See addition/change


#### Checklist:
- [ ] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [ ] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.
- [ ] **TESTS** I have added test coverage to my code.

Author: jasperfurniss

playbook/app/pb_kits/playbook/pb_drawer/_drawer.scss

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const noop = (): void => void 0
+
+type DrawerContextType = {
+  onClose: () => void
+}
+
+export const DrawerContext = React.createContext<DrawerContextType>({
+  onClose: noop,
+})

playbook/app/pb_kits/playbook/pb_drawer/_drawer.tsx

@@ -0,0 +1,38 @@
+import React, { useState } from "react"
+import { Button, Drawer, Flex } from "playbook-ui"
+
+const useDrawer = (visible = false) => {
+  const [opened, setOpened] = useState(visible)
+  const toggle = () => setOpened(!opened)
+
+  return [opened, toggle]
+}
+
+const DrawerBehavior = () => {
+  const [drawerOpen, toggleDrawerOpen] = useDrawer()
+
+  return (
+    <>
+      <Flex wrap>
+        <Button id='sm'
+            marginRight='md'
+            onClick={toggleDrawerOpen}
+        >
+          {"Push Behavior"}
+        </Button>
+      </Flex>
+      <Flex>
+        <Drawer
+            behavior={"push"}      
+            onClose={toggleDrawerOpen}
+            opened={drawerOpen}
+            size={"lg"}
+        >
+          Test me (Push Behavior)
+        </Drawer>
+      </Flex>
+    </>
+  )
+}
+
+export default DrawerBehavior

playbook/app/pb_kits/playbook/pb_drawer/context.ts

@@ -6,19 +6,15 @@ const DrawerBorders = () => {
   const [openedBRightDrawer, setOpenedBRightDrawer] = useState(false);
   const [openedBLeftDrawer, setOpenedBLeftDrawer] = useState(false);
   const [openedBFullDrawer, setOpenedBFullDrawer] = useState(false);
-  const [openedBDefaultDrawer, setOpenedBDefaultDrawer] = useState(false);
-  const [openedBRoundedDrawer, setOpenedBRoundedDrawer] = useState(false);
 
   // Toggle functions for each drawer
   const toggleBRightDrawer = () => setOpenedBRightDrawer(!openedBRightDrawer);
   const toggleBLeftDrawer = () => setOpenedBLeftDrawer(!openedBLeftDrawer);
   const toggleBFullDrawer = () => setOpenedBFullDrawer(!openedBFullDrawer);
-  const toggleBDefaultDrawer = () => setOpenedBDefaultDrawer(!openedBDefaultDrawer);
-  const toggleBRoundedDrawer = () => setOpenedBRoundedDrawer(!openedBRoundedDrawer);
 
   return (
     <>
-      <Flex padding="md"
+      <Flex 
           wrap
       >
         <Button marginRight="md"
@@ -36,23 +32,12 @@ const DrawerBorders = () => {
         >
           Drawer with border full
         </Button>
-        <Button marginRight="md"    
-            onClick={toggleBDefaultDrawer}
-        >
-          Default Drawer
-        </Button>
-        <Button marginRight="md"
-            onClick={toggleBRoundedDrawer}
-        > 
-          Rounded Drawer
-        </Button>
       </Flex>
 
       {/* Drawers for each size */}
       <Drawer
           behavior="float"
           border="right"
-          fullHeight
           onClose={toggleBRightDrawer}
           opened={openedBRightDrawer}
           overlay={false}
@@ -64,52 +49,25 @@ const DrawerBorders = () => {
       <Drawer
           behavior="float"
           border="left"
-          fullHeight
           onClose={toggleBLeftDrawer}
           opened={openedBLeftDrawer}
           overlay={false}
-          placement="right"
+          placement="left"
           size="lg"
       >
         This is a Drawer with border left
       </Drawer>
       <Drawer
           behavior="float"
           border="full"
-          fullHeight
           onClose={toggleBFullDrawer}
           opened={openedBFullDrawer}
           overlay={false}
-          placement="right"
+          placement="left"
           size="lg"
       >
         This is a Drawer with border full
       </Drawer>
-      <Drawer
-          behavior="float"
-          fullHeight
-          onClose={toggleBDefaultDrawer}
-          opened={openedBDefaultDrawer}
-          overlay={false}
-          placement="right"
-          size="lg"
-      >   
-        This is a Default Drawer
-      </Drawer>
-      <Drawer
-          behavior="float"
-          borderRadius="rounded"
-          fullHeight
-          onClose={toggleBRoundedDrawer}
-          opened={openedBRoundedDrawer}
-          overlay={false}
-          placement="right"
-          size="lg"
-      >
-      <div style={{ paddingTop: '100px', paddingLeft: '12px' }}>
-        This is a Rounded Drawer
-      </div>
-      </Drawer>
     </>
   );
 };

playbook/app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.jsx

@@ -26,7 +26,6 @@ const DrawerBreakpoints = () => {
         <Drawer
             behavior={"push"}
             breakpoint="sm"
-            fullHeight
             onClose={toggleSmallDrawer}
             opened={smallDrawerOpened}
             overlay={false}

playbook/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx

@@ -9,47 +9,40 @@ const useDrawer = (visible = false) => {
 };
 
 const DrawerDefault = () => {
-  const [headerSeparatorDrawerOpened, toggleHeaderSeparatorDrawer] = useDrawer();
-  const [bothSeparatorsDrawerOpened, toggleBothSeparatorsDrawer] = useDrawer();
+  const [drawerLeftOpen, toggleDrawerLeftOpen] = useDrawer();
+  const [drawerRightOpen, toggleDrawerRightOpen ] = useDrawer();
 
   return (
     <>
       <Flex wrap>
         <Button
             id="sm"
             marginRight="md"
-            onClick={toggleHeaderSeparatorDrawer}
+            onClick={toggleDrawerLeftOpen}
         >
           {"Left Drawer"}
         </Button>
         <Button
             marginRight="xl"
-            onClick={toggleBothSeparatorsDrawer}
+            onClick={toggleDrawerRightOpen}
         >
           {"Right Drawer"}
         </Button>
       </Flex>
       <Flex>
         {/* Left Drawer */}
         <Drawer
-            behavior={"push"}
-            fullHeight
-            onClose={toggleHeaderSeparatorDrawer}
-            opened={headerSeparatorDrawerOpened}
-            overlay
-            placement={"left"}
+            onClose={toggleDrawerLeftOpen}
+            opened={drawerLeftOpen}
             size={"lg"}
         >
           Test me (Left Drawer)
         </Drawer>
 
         {/* Right Drawer */}
         <Drawer
-            behavior={"push"}
-            fullHeight
-            onClose={toggleBothSeparatorsDrawer}
-            opened={bothSeparatorsDrawerOpened}
-            overlay
+            onClose={toggleDrawerRightOpen}
+            opened={drawerRightOpen}
             placement={"right"}
             size={"lg"}
         >
@@ -60,4 +53,4 @@ const DrawerDefault = () => {
   );
 };
 
-export default DrawerDefault;
+export default DrawerDefault;

playbook/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx

@@ -1,31 +1,56 @@
-import React from "react";
-import { Button, Drawer, Icon, Title } from "playbook-ui";
+import React, { useState, useEffect } from "react"
+import { Button, Drawer, Icon, Nav, NavItem } from "playbook-ui"
 
 const DrawerMenu = () => {
+  const [isSmallScreen, setIsSmallScreen] = useState(false)
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(max-width: 600px)")
+    setIsSmallScreen(mediaQuery.matches)
+    const handler = (e) => setIsSmallScreen(e.matches)
+    mediaQuery.addEventListener('change', handler)
+    return () => mediaQuery.removeEventListener('change', handler)
+  }, [])
 
   return (
-    <>
-      <Button id="menuButton"
-          padding="sm"
+    <div>
+      <Button id='menuButton'
+          padding='xs'
       >
-        <Icon icon="bars"
-            size="3x"
+        <Icon icon='bars'
+            size='2x'
         />
       </Button>
       <Drawer
-          behavior="push"
-          closeBreakpoint="md"
-          menuButtonID="menuButton"
-          overlay={false}
-          placement="left"
-          size="lg"
+          breakpoint="md"
+          placement='bottom'
+          size='full'
+          triggerId='menuButton'
           withinElement
       >
-        <Title paddingBottom="md">A really neat menu</Title>
-        <Button text="This Button does nothing" />
+        <Nav 
+            highlight={false}
+            link='#'
+            orientation={isSmallScreen ? 'vertical' : 'horizontal'} 
+            padding={isSmallScreen ? 'none' : 'sm'}
+        >
+          <NavItem link='#'
+              text='About'
+          />
+          <NavItem active
+              link='#'
+              text='Case Studies'
+          />
+          <NavItem link='#'
+              text='Service'
+          />
+          <NavItem link='#'
+              text='Contacts'
+          />
+        </Nav>
       </Drawer>
-    </>
-  );
-};
+    </div>
+  )
+}
 
-export default DrawerMenu;
+export default DrawerMenu

playbook/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.jsx

@@ -1,6 +1,24 @@
-Our drawer kit can fulfill your responsive menu needs! Using the `closeBreakpoint` prop you can have the menu close on smaller screens like phones/tablets.
+The Drawer component can be used to create responsive navigation menus and sidebars. It provides flexible options for controlling when and how the drawer appears based on screen size.
+
+### Within Element
+The `withinElement` prop allows you to render the drawer within its parent container:
+- The drawer will be positioned relative to its parent element
+- Useful for creating nested navigation structures
+- This must be used in conjunction with the `triggerId` prop
+
+This provides a clean way to create responsive navigation patterns that adapt to different screen sizes while maintaining a consistent user experience.
+
+### Trigger Id
+The `triggerId` prop allows you to connect an element to control the drawer:
+- The specified element will toggle the drawer open/closed
+- The element is automatically hidden when the drawer is opened via breakpoint
+- The element reappears when the drawer is closed via breakpoint
+
+### Breakpoint
+Use the `breakpoint` prop to control when the drawer automatically opens or closes based on screen size. For example, setting `breakpoint="md"` will:
+- Close the drawer on screens smaller than the medium breakpoint (992px)
+- Automatically open the drawer on screens larger than or equal to the medium breakpoint
+
 
-Set a menu button with  the `menuButtonID` props. When the Drawer is open, the menu button will be hidden. But when your Brakpoint closes the drawer, you can toggle the Drawer open/close with your menu butotn.
 
-Also use the `withinElement` props to have the Drawer open within a specific element, instead of the default behavior of it taking up the entire screen size.
 

playbook/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.jsx

@@ -1,24 +1,25 @@
-import React, { useState } from "react";
-import { Button, Drawer, Flex } from "playbook-ui";
+import React, { useState } from "react"
+import { Button, Drawer, Flex } from "playbook-ui"
 
 const DrawerSizes = () => {
   // Individual state variables for each drawer size
-  const [openedNoOverlayDrawer, setOpenedNoOverlayDrawer] = useState(false);
-  const [openedOverlayDrawer, setOpenedOverlayDrawer] = useState(false);
+  const [openedNoOverlayDrawer, setOpenedNoOverlayDrawer] = useState(false)
+  const [openedOverlayDrawer, setOpenedOverlayDrawer] = useState(false)
 
   // Toggle functions for each drawer
-  const toggleNoOverlayDrawer = () => setOpenedNoOverlayDrawer(!openedNoOverlayDrawer);
-  const toggleOverlayDrawer = () => setOpenedOverlayDrawer(!openedOverlayDrawer);
+  const toggleNoOverlayDrawer = () =>
+    setOpenedNoOverlayDrawer(!openedNoOverlayDrawer)
+  const toggleOverlayDrawer = () => setOpenedOverlayDrawer(!openedOverlayDrawer)
 
   return (
     <>
       <Flex wrap>
-        <Button marginRight="md"
+        <Button marginRight='md'
             onClick={toggleNoOverlayDrawer}
         >
           No Overlay Drawer
         </Button>
-        <Button marginRight="md"
+        <Button marginRight='md'
             onClick={toggleOverlayDrawer}
         >
           Overlay Drawer
@@ -27,29 +28,23 @@ const DrawerSizes = () => {
 
       {/* Drawers for each size */}
       <Drawer
-          behavior="push"
-          fullHeight
           onClose={toggleNoOverlayDrawer}
           opened={openedNoOverlayDrawer}
           overlay={false}
-          placement="right"
-          size="lg"
+          size='lg'
       >
         This is a Drawer with no overlay
       </Drawer>
       <Drawer
-          behavior="push"
-          fullHeight
           onClose={toggleOverlayDrawer}
           opened={openedOverlayDrawer}
-          overlay
-          placement="right"
-          size="lg"
+          placement='right'
+          size='lg'
       >
-        This is a Drawer with an overlay 
+        This is a Drawer with an overlay
       </Drawer>
     </>
-  );
-};
+  )
+}
 
-export default DrawerSizes;
+export default DrawerSizes