From 94c62764a6bacf3756b5fd5da7089e018ddaf212 Mon Sep 17 00:00:00 2001
From: wp-aberg <102534985+wp-aberg@users.noreply.github.com>
Date: Thu, 1 Sep 2022 17:18:18 -0400
Subject: [PATCH] feat: add drawer component (#190)
---
.../docs/components/drawer.mdx | 505 ++
.../pages/kitchen-sink/index.tsx | 10 +
.../public/img/components/drawer/anatomy.svg | 34 +
build.washingtonpost.com/public/sitemap.xml | 4 +
package-lock.json | 7078 +++++++++++++----
ui/drawer/README.md | 11 +
ui/drawer/jest-setup.ts | 1 +
ui/drawer/jest.config.js | 7 +
ui/drawer/package.json | 60 +
ui/drawer/src/Drawer.tsx | 24 +
ui/drawer/src/DrawerClose.test.tsx | 36 +
ui/drawer/src/DrawerClose.tsx | 71 +
ui/drawer/src/DrawerContent.test.tsx | 75 +
ui/drawer/src/DrawerContent.tsx | 178 +
ui/drawer/src/DrawerCustomTrigger.test.tsx | 59 +
ui/drawer/src/DrawerCustomTrigger.tsx | 44 +
ui/drawer/src/DrawerRoot.test.tsx | 101 +
ui/drawer/src/DrawerRoot.tsx | 79 +
ui/drawer/src/DrawerScrim.test.tsx | 50 +
ui/drawer/src/DrawerScrim.tsx | 47 +
ui/drawer/src/DrawerTrigger.test.tsx | 43 +
ui/drawer/src/DrawerTrigger.tsx | 32 +
ui/drawer/src/hooks.test.ts | 90 +
ui/drawer/src/hooks.ts | 60 +
ui/drawer/src/index.ts | 1 +
ui/drawer/src/play.stories.jsx | 171 +
ui/drawer/tsconfig.json | 8 +
ui/kit/package.json | 7 +-
ui/kit/src/index.ts | 1 +
29 files changed, 7177 insertions(+), 1710 deletions(-)
create mode 100644 build.washingtonpost.com/docs/components/drawer.mdx
create mode 100644 build.washingtonpost.com/public/img/components/drawer/anatomy.svg
create mode 100644 ui/drawer/README.md
create mode 100644 ui/drawer/jest-setup.ts
create mode 100644 ui/drawer/jest.config.js
create mode 100644 ui/drawer/package.json
create mode 100644 ui/drawer/src/Drawer.tsx
create mode 100644 ui/drawer/src/DrawerClose.test.tsx
create mode 100644 ui/drawer/src/DrawerClose.tsx
create mode 100644 ui/drawer/src/DrawerContent.test.tsx
create mode 100644 ui/drawer/src/DrawerContent.tsx
create mode 100644 ui/drawer/src/DrawerCustomTrigger.test.tsx
create mode 100644 ui/drawer/src/DrawerCustomTrigger.tsx
create mode 100644 ui/drawer/src/DrawerRoot.test.tsx
create mode 100644 ui/drawer/src/DrawerRoot.tsx
create mode 100644 ui/drawer/src/DrawerScrim.test.tsx
create mode 100644 ui/drawer/src/DrawerScrim.tsx
create mode 100644 ui/drawer/src/DrawerTrigger.test.tsx
create mode 100644 ui/drawer/src/DrawerTrigger.tsx
create mode 100644 ui/drawer/src/hooks.test.ts
create mode 100644 ui/drawer/src/hooks.ts
create mode 100644 ui/drawer/src/index.ts
create mode 100644 ui/drawer/src/play.stories.jsx
create mode 100644 ui/drawer/tsconfig.json
diff --git a/build.washingtonpost.com/docs/components/drawer.mdx b/build.washingtonpost.com/docs/components/drawer.mdx
new file mode 100644
index 000000000..d760adedd
--- /dev/null
+++ b/build.washingtonpost.com/docs/components/drawer.mdx
@@ -0,0 +1,505 @@
+---
+title: Drawer
+description: A drawer is a panel that is typically overlaid on top of a page and slides in from off-canvas (tied to a side of the screen). It contains a set of information or actions. Since the user can interact with the Drawer without leaving the current page, tasks can be achieved more efficiently within the same context.
+component: drawer
+status: "Draft"
+---
+
+## Anatomy
+
+
+
+
+
+1. Container
+2. Button icon
+3. Scrim
+
+---
+
+## Options
+
+### Position
+
+The drawer can be attached to any side of the screen.
+
+```jsx withPreview
+export default function Example() {
+ return (
+
+
+ Top
+
+ Your Drawer Content. Click scrim to close
+
+
+
+
+
+ Left
+
+ Your Drawer Content. Click scrim to close
+
+
+
+
+ Right
+
+ Your Drawer Content. Click scrim to close
+
+
+
+
+
+ Bottom
+
+ Your Drawer Content. Click scrim to close
+
+
+
+
+ );
+}
+```
+
+### Optional Close
+
+The drawer close button icon can be optional.
+
+```jsx withPreview
+export default function Example() {
+ return (
+
+
+ See example
+
Click button to see option
+
+
+ Close is optional. Click outside the drawer to close click the scrim to
+ close the drawer.
+
+
+
+ );
+}
+```
+
+### Optional Scrim
+
+The scrim is optional when using the drawer. Should note that without a scrim, it is recommended to have a close button to ensure users can close the drawer if that is desired.
+
+```jsx withPreview
+export default function Example() {
+ return (
+
+
+ See example
+
Click button to see option
+
+
+
+ Scrim is optional
+
+
+ );
+}
+```
+
+### Optional Scrim color
+
+The scrim color can be changed by defining the color using one of our background colors from our tokens
+
+```jsx withPreview
+export default function Example() {
+ return (
+
+
+ See example
+
Click button to see option
+
+
+
+ This uses red500 as the scrim background
+
+
+
+ );
+}
+```
+
+### Drawer color
+
+The drawer color can be changed by defining the color using one of our background colors from our tokens.
+
+```jsx withPreview
+export default function Example() {
+ return (
+
+
+ See example
+
Click button to see option
+
+
+ A dark drawer
+
+
+
+ );
+}
+```
+
+### Height and Width
+
+Drawer width and height can be defined. Height can be defined if the position is `top` or `bottom` and width can be defined if the position is `right` or `left`.
+
+```jsx withPreview
+export default function Example() {
+ return (
+
+
+ See bottom example
+
+ This drawer is set to 200px height.
+
+
+
+
+ See left example
+
+ This drawer is set to 200px width.
+
+
+
+
+ );
+}
+```
+
+---
+
+## Behavior
+
+### Closing
+
+When the close button icon is rendered, the drawer can be closed by either clicking the scrim or the close button. Note: The drawer can be set to open and will remain open even if the scrim is clicked on.
+
+```jsx withPreview
+export default function Example() {
+ return (
+
+ Scrim / button to close
+
+
+ Click scrim or button to close
+
+
+
+ );
+}
+```
+
+### Content overflow
+
+Content will overflow, both vertically and horizontally, in the drawer by default.
+
+```jsx withPreview
+export default function Example() {
+ return (
+
+ See drawer with overflow
+
+
+
+ Overflow by scrolling
+
+
+
+
+ );
+}
+```
+
+---
+
+## Guidance
+
+### Content should be accessible
+
+Do not combine colors of the drawer where text is not accessible to the user. Read more about [WCAG accessible contrast requirements](https://webaim.org/articles/contrast/).
+
+```jsx withPreview isGuide="error"
+export default function Example() {
+ return (
+
+ See bad example
+
+ Text should be accessible
+
+
+
+ );
+}
+```
+
+### Avoid full screen
+
+A drawer should never take the fullscreen of the viewer window.
+The drawer should always leave at least 1/3 of the screen available.
+
+```jsx withPreview isGuide="warning"
+export default function Example() {
+ return (
+
+ See example
+
+ Click close button to close
+
+
+ );
+}
+```
+
+---
+
+## API Reference
+
+### DrawerRoot
+
+ void",
+ rawType: "",
+ required: "false",
+ description: "callback to respond to open state",
+ defaultValue: "----",
+ },
+ {
+ name: "open",
+ type: "enum",
+ rawType: "boolean",
+ required: "false",
+ description: "controlled open state used with onOpenChange",
+ defaultValue: "----",
+ },
+ {
+ name: "defaultOpen",
+ type: "enum",
+ rawType: "boolean",
+ required: "false",
+ description: "should the drawer be open by default (on mount)",
+ defaultValue: "----",
+ },
+ {
+ name: "zIndex",
+ type: "enum",
+ rawType: "number | Token",
+ required: "false",
+ description: "zIndex of drawer @default theme.zIndices.shell",
+ defaultValue: "\n theme.zIndices.shell\n",
+ },
+ ]}
+/>
+
+### DrawerTrigger
+
+
+
+### DrawerCustomTrigger
+
+
+
+### DrawerContent
+
+
+
+### DrawerClose
+
+
diff --git a/build.washingtonpost.com/pages/kitchen-sink/index.tsx b/build.washingtonpost.com/pages/kitchen-sink/index.tsx
index a03125e19..af0c066e4 100644
--- a/build.washingtonpost.com/pages/kitchen-sink/index.tsx
+++ b/build.washingtonpost.com/pages/kitchen-sink/index.tsx
@@ -18,6 +18,7 @@ import {
Divider,
Avatar,
PaginationDots,
+ Drawer,
} from "@washingtonpost/wpds-ui-kit";
import Chart from "@washingtonpost/wpds-assets/asset/chart";
import Settings from "@washingtonpost/wpds-assets/asset/settings";
@@ -365,6 +366,15 @@ function HomePage() {
+