[PLAY-1528] Drawer Beta Kit (#3686)

**What does this PR do?** A clear and concise description with your
runway ticket url.
Runway https://runway.powerhrg.com/backlog_items/PLAY-1528

This is the first implementation of the draw kit. Its like the dialog
except it only goes on the side on the page

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


![screenshot-pr3686_playbook_beta_px_powerapp_cloud-2024_09_18-09_33_10](https://github.com/user-attachments/assets/d554bbc9-93d5-46d4-813d-491f2fb5c981)

**How to test?** Steps to confirm the desired behavior:
1. Go to
https://pr3686.playbook.beta.px.powerapp.cloud/kits/drawer/react
2. Click buttons

#### Checklist:
- [x] **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.
- [x] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.
- [x] **TESTS** I have added test coverage to my code.

---------

Co-authored-by: Nida Ghuman <[email protected]>

playbook-website/config/menu.yml

@@ -43,6 +43,9 @@ kits:
     platforms: *1
     description:
     status: stable
+  - name: drawer
+    platforms: *1 
+    status: beta
 - category: buttons
   description: Buttons are used primarily for actions, such as “Save” and “Cancel”.
     Link Buttons are used for less important or less commonly used actions, such as
@@ -569,4 +572,3 @@ kits:
       with avatar, titles, name and territory. This is a versatile kit with features
       than can be added to display more info.
     status: stable
-

playbook/app/entrypoints/playbook-doc.js

@@ -35,6 +35,7 @@ import * as Detail from 'kits/pb_detail/docs'
 import * as Dialog from 'kits/pb_dialog/docs'
 import * as DistributionBarDocs from 'kits/pb_distribution_bar/docs'
 import * as Draggable from 'kits/pb_draggable/docs'
+import * as Drawer from 'kits/pb_drawer/docs'
 import * as Dropdown from 'kits/pb_dropdown/docs'
 import * as FileUpload from 'kits/pb_file_upload/docs'
 import * as Filter from 'kits/pb_filter/docs'
@@ -142,6 +143,7 @@ WebpackerReact.registerComponents({
   ...Dialog,
   ...DistributionBarDocs,
   ...Draggable,
+  ...Drawer,
   ...Dropdown,
   ...FileUpload,
   ...Filter,

playbook/app/entrypoints/playbook.scss

@@ -1,3 +1,4 @@
+
 @import 'kits/pb_advanced_table/advanced_table';
 @import 'kits/pb_avatar/avatar';
 @import 'kits/pb_avatar_action_button/avatar_action_button';
@@ -105,6 +106,7 @@
 @import 'kits/pb_user_badge/user_badge';
 @import 'kits/pb_walkthrough/walkthrough';
 @import 'kits/pb_weekday_stacked/weekday_stacked';
+@import 'kits/pb_drawer/drawer';
 @import 'utilities/mixins';
 @import 'utilities/spacing';
 @import 'utilities/cursor';

playbook/app/javascript/kits.js

@@ -34,6 +34,7 @@ export { default as Detail} from '../pb_kits/playbook/pb_detail/_detail'
 export { default as Dialog } from '../pb_kits/playbook/pb_dialog/_dialog'
 export { default as DistributionBar } from '../pb_kits/playbook/pb_distribution_bar/_distribution_bar'
 export { default as Draggable} from '../pb_kits/playbook/pb_draggable/_draggable'
+export { default as Drawer} from '../pb_kits/playbook/pb_drawer/_drawer'
 export { default as Dropdown} from '../pb_kits/playbook/pb_dropdown/_dropdown'
 export { default as FileUpload } from '../pb_kits/playbook/pb_file_upload/_file_upload'
 export { default as Filter } from '../pb_kits/playbook/pb_filter/_filter'

playbook/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -462,4 +462,4 @@ test("responsive none prop functions as expected", () => {
 
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveClass("pb_advanced_table table-responsive-none")
-})
+})

playbook/app/pb_kits/playbook/pb_drawer/_close_icon.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import Icon from '../pb_icon/_icon'
+
+import { getAllIcons } from "../utilities/icons/allicons"
+
+type CloseIconProps = {
+  onClose: () => void,
+}
+
+export const CloseIcon = (props: CloseIconProps): React.ReactElement => {
+  const { onClose } = props
+  const timesIcon = getAllIcons()["times"]
+  return (
+    <div
+        className="pb_dialog_close_icon"
+        onClick={onClose}
+    >
+      <Icon
+          className="svg-inline--fa"
+          customIcon={timesIcon.icon as unknown as { [key: string]: SVGElement }}
+          fixedWidth
+      />
+    </div>
+  )
+}