From d6bd90b655b9df9814dd4963672a09ea67972d1c Mon Sep 17 00:00:00 2001 From: "Matheus P. Silva" Date: Tue, 17 Sep 2024 08:30:55 -0300 Subject: [PATCH 1/4] docs(drawer): add docs and first example --- packages/docs/examples/drawer-controlled.tsx | 61 ++++++++++++++++++++ packages/docs/pages/components/drawer.mdx | 20 ++++++- 2 files changed, 80 insertions(+), 1 deletion(-) create mode 100644 packages/docs/examples/drawer-controlled.tsx diff --git a/packages/docs/examples/drawer-controlled.tsx b/packages/docs/examples/drawer-controlled.tsx new file mode 100644 index 000000000..6a4d86c2a --- /dev/null +++ b/packages/docs/examples/drawer-controlled.tsx @@ -0,0 +1,61 @@ +import { + DrawerProvider, + Button, + DrawerPopover, + DrawerHeader, + DrawerHeading, + DrawerDismiss, + DrawerContent, + DrawerFooter, +} from '@vtex/shoreline' +import { DecorativeBox } from '../components/decorative-box' +import { useState } from 'react' + +export default function Example() { + const [open, setOpen] = useState(false) + const [loading, setLoading] = useState(false) + + async function someServerAction() { + if (open) { + setOpen(false) + + return + } + + setLoading(true) + + await new Promise((resolve) => { + setTimeout(resolve, 3000) + }) + + setLoading(false) + setOpen(true) + } + + return ( + <> + + + + + Drawer Heading + + + + + + + + + + + + + ) +} diff --git a/packages/docs/pages/components/drawer.mdx b/packages/docs/pages/components/drawer.mdx index 76c3e0fbf..94af0eaee 100644 --- a/packages/docs/pages/components/drawer.mdx +++ b/packages/docs/pages/components/drawer.mdx @@ -1,6 +1,24 @@ # Drawer -Comming soon +Drawer displays content related to a minor job within a page's main job. It does not block interactions outside the overlay, allowing users to interact with content. + + + +## Anatomy + +## Examples + +### Controlled + +The open and onChangeOpen props of DrawerProvider are used to control the DrawerPopover open state. + + + +### Large content + +The DrawerContent adds a scrollbar for large content. + +{/* */} {/* From 005751a667f978a9b655b36a3a82bc5cfabcff39 Mon Sep 17 00:00:00 2001 From: "Matheus P. Silva" Date: Fri, 20 Sep 2024 11:53:41 -0300 Subject: [PATCH 2/4] docs(drawer): add all pages --- packages/docs/examples/drawer-controlled.tsx | 5 +- .../docs/examples/drawer-long-content.tsx | 39 ++++++++++++ packages/docs/examples/drawer-small.tsx | 39 ++++++++++++ packages/docs/examples/drawer.tsx | 6 +- packages/docs/pages/components/drawer.mdx | 63 +++++++++++++++---- .../components/drawer/drawer-content.mdx | 13 ++++ .../components/drawer/drawer-dismiss.mdx | 13 ++++ .../pages/components/drawer/drawer-footer.mdx | 13 ++++ .../pages/components/drawer/drawer-header.mdx | 13 ++++ .../components/drawer/drawer-heading.mdx | 13 ++++ .../components/drawer/drawer-popover.mdx | 13 ++++ .../components/drawer/drawer-provider.mdx | 13 ++++ .../components/drawer/drawer-trigger.mdx | 13 ++++ 13 files changed, 241 insertions(+), 15 deletions(-) create mode 100644 packages/docs/examples/drawer-long-content.tsx create mode 100644 packages/docs/examples/drawer-small.tsx create mode 100644 packages/docs/pages/components/drawer/drawer-content.mdx create mode 100644 packages/docs/pages/components/drawer/drawer-dismiss.mdx create mode 100644 packages/docs/pages/components/drawer/drawer-footer.mdx create mode 100644 packages/docs/pages/components/drawer/drawer-header.mdx create mode 100644 packages/docs/pages/components/drawer/drawer-heading.mdx create mode 100644 packages/docs/pages/components/drawer/drawer-popover.mdx create mode 100644 packages/docs/pages/components/drawer/drawer-provider.mdx create mode 100644 packages/docs/pages/components/drawer/drawer-trigger.mdx diff --git a/packages/docs/examples/drawer-controlled.tsx b/packages/docs/examples/drawer-controlled.tsx index 6a4d86c2a..1033c20a7 100644 --- a/packages/docs/examples/drawer-controlled.tsx +++ b/packages/docs/examples/drawer-controlled.tsx @@ -24,6 +24,9 @@ export default function Example() { setLoading(true) + // This promise simulates a call to an API. + // Using the controlled apporach of the Drawer + // is particullary useful in programmatic dispatch scenarios. await new Promise((resolve) => { setTimeout(resolve, 3000) }) @@ -40,7 +43,7 @@ export default function Example() { - Drawer Heading + Controlled Drawer diff --git a/packages/docs/examples/drawer-long-content.tsx b/packages/docs/examples/drawer-long-content.tsx new file mode 100644 index 000000000..33965b119 --- /dev/null +++ b/packages/docs/examples/drawer-long-content.tsx @@ -0,0 +1,39 @@ +import { + DrawerProvider, + DrawerTrigger, + Button, + DrawerPopover, + DrawerHeader, + DrawerHeading, + DrawerDismiss, + DrawerContent, + DrawerFooter, +} from '@vtex/shoreline' +import { DecorativeBox } from '../components/decorative-box' + +export default function Example() { + return ( + + + + + + + Drawer Heading + + + + + + + + + + + + ) +} diff --git a/packages/docs/examples/drawer-small.tsx b/packages/docs/examples/drawer-small.tsx new file mode 100644 index 000000000..1fb2903f6 --- /dev/null +++ b/packages/docs/examples/drawer-small.tsx @@ -0,0 +1,39 @@ +import { + DrawerProvider, + DrawerTrigger, + Button, + DrawerPopover, + DrawerHeader, + DrawerHeading, + DrawerDismiss, + DrawerContent, + DrawerFooter, +} from '@vtex/shoreline' +import { DecorativeBox } from '../components/decorative-box' + +export default function Example() { + return ( + + + + + + + Small Drawer + + + + + + + + + + + + ) +} diff --git a/packages/docs/examples/drawer.tsx b/packages/docs/examples/drawer.tsx index 413fd5d1b..1482ce654 100644 --- a/packages/docs/examples/drawer.tsx +++ b/packages/docs/examples/drawer.tsx @@ -15,15 +15,15 @@ export default function Example() { return ( - + - + Drawer Heading - + + + + + Drawer Heading + + + + Content goes here + + + + + + + + ) +} +``` + ## Examples ### Controlled -The open and onChangeOpen props of DrawerProvider are used to control the DrawerPopover open state. +The `open` and `onChangeOpen` props of [DrawerProvider](/components/drawer/drawer-provider) are used to control the [DrawerPopover](/components/drawer/drawer-popover) open state. -### Large content - -The DrawerContent adds a scrollbar for large content. +### Long content -{/* */} +The [DrawerContent](/components/drawer/drawer-content) adds a scrollbar for long content. -{/* + - +### Small size -## Optional props +The [DrawerPopover](/components/drawer/drawer-popover) has either a `small` or `medium`(default) size. - + ## Related components - - */} + diff --git a/packages/docs/pages/components/drawer/drawer-content.mdx b/packages/docs/pages/components/drawer/drawer-content.mdx new file mode 100644 index 000000000..c9650d20e --- /dev/null +++ b/packages/docs/pages/components/drawer/drawer-content.mdx @@ -0,0 +1,13 @@ +# DrawerContent + + + + + +## Required props + + + +## Optional props + + diff --git a/packages/docs/pages/components/drawer/drawer-dismiss.mdx b/packages/docs/pages/components/drawer/drawer-dismiss.mdx new file mode 100644 index 000000000..48a8e63e0 --- /dev/null +++ b/packages/docs/pages/components/drawer/drawer-dismiss.mdx @@ -0,0 +1,13 @@ +# DrawerDismiss + + + + + +## Required props + + + +## Optional props + + diff --git a/packages/docs/pages/components/drawer/drawer-footer.mdx b/packages/docs/pages/components/drawer/drawer-footer.mdx new file mode 100644 index 000000000..ca03a7cca --- /dev/null +++ b/packages/docs/pages/components/drawer/drawer-footer.mdx @@ -0,0 +1,13 @@ +# DrawerFooter + + + + + +## Required props + + + +## Optional props + + diff --git a/packages/docs/pages/components/drawer/drawer-header.mdx b/packages/docs/pages/components/drawer/drawer-header.mdx new file mode 100644 index 000000000..ffc654fb3 --- /dev/null +++ b/packages/docs/pages/components/drawer/drawer-header.mdx @@ -0,0 +1,13 @@ +# DrawerHeader + + + + + +## Required props + + + +## Optional props + + diff --git a/packages/docs/pages/components/drawer/drawer-heading.mdx b/packages/docs/pages/components/drawer/drawer-heading.mdx new file mode 100644 index 000000000..a50efdcae --- /dev/null +++ b/packages/docs/pages/components/drawer/drawer-heading.mdx @@ -0,0 +1,13 @@ +# DrawerHeading + + + + + +## Required props + + + +## Optional props + + diff --git a/packages/docs/pages/components/drawer/drawer-popover.mdx b/packages/docs/pages/components/drawer/drawer-popover.mdx new file mode 100644 index 000000000..e6a7ae39d --- /dev/null +++ b/packages/docs/pages/components/drawer/drawer-popover.mdx @@ -0,0 +1,13 @@ +# DrawerPopover + + + + + +## Required props + + + +## Optional props + + diff --git a/packages/docs/pages/components/drawer/drawer-provider.mdx b/packages/docs/pages/components/drawer/drawer-provider.mdx new file mode 100644 index 000000000..fcf4c855b --- /dev/null +++ b/packages/docs/pages/components/drawer/drawer-provider.mdx @@ -0,0 +1,13 @@ +# DrawerProvider + + + + + +## Required props + + + +## Optional props + + diff --git a/packages/docs/pages/components/drawer/drawer-trigger.mdx b/packages/docs/pages/components/drawer/drawer-trigger.mdx new file mode 100644 index 000000000..71eee5e2b --- /dev/null +++ b/packages/docs/pages/components/drawer/drawer-trigger.mdx @@ -0,0 +1,13 @@ +# DrawerTrigger + + + + + +## Required props + + + +## Optional props + + From acbe27aefa6ad16804b55b7319febc6c10d8dea4 Mon Sep 17 00:00:00 2001 From: "Matheus P. Silva" Date: Fri, 20 Sep 2024 15:08:57 -0300 Subject: [PATCH 3/4] docs(drawer): add props docs --- packages/docs/pages/components/drawer.mdx | 3 ++ .../components/drawer/drawer-content.mdx | 4 -- .../components/drawer/drawer-dismiss.mdx | 4 -- .../pages/components/drawer/drawer-footer.mdx | 6 +-- .../pages/components/drawer/drawer-header.mdx | 6 +-- .../components/drawer/drawer-heading.mdx | 4 -- .../docs/public/assets/drawer-anatomy.png | Bin 0 -> 199647 bytes .../src/components/drawer/drawer-content.tsx | 7 +++- .../src/components/drawer/drawer-dismiss.tsx | 10 +++-- .../src/components/drawer/drawer-footer.tsx | 8 ++-- .../src/components/drawer/drawer-header.tsx | 25 ++++++----- .../src/components/drawer/drawer-heading.tsx | 9 ++-- .../src/components/drawer/drawer-popover.tsx | 3 ++ .../src/components/drawer/drawer-provider.tsx | 39 +++++++++++++----- .../src/components/drawer/drawer-trigger.tsx | 6 ++- 15 files changed, 75 insertions(+), 59 deletions(-) create mode 100644 packages/docs/public/assets/drawer-anatomy.png diff --git a/packages/docs/pages/components/drawer.mdx b/packages/docs/pages/components/drawer.mdx index 8634b09b4..e94256ab0 100644 --- a/packages/docs/pages/components/drawer.mdx +++ b/packages/docs/pages/components/drawer.mdx @@ -6,6 +6,8 @@ ## Anatomy +![Drawer anatomy](/assets/drawer-anatomy.png) + The Drawer is a composition of several components: | Component | Description | @@ -19,6 +21,7 @@ The Drawer is a composition of several components: | [DrawerContent](/components/drawer/drawer-content) | Main content inside of the [DrawerPopover](/components/drawer/drawer-popover) | | [DrawerFooter](/components/drawer/drawer-footer) | The fixed Footer mainly used for actions | + The example code below, illustrates how this components interact with each other: ```jsx diff --git a/packages/docs/pages/components/drawer/drawer-content.mdx b/packages/docs/pages/components/drawer/drawer-content.mdx index c9650d20e..1127105f9 100644 --- a/packages/docs/pages/components/drawer/drawer-content.mdx +++ b/packages/docs/pages/components/drawer/drawer-content.mdx @@ -4,10 +4,6 @@ -## Required props - - - ## Optional props diff --git a/packages/docs/pages/components/drawer/drawer-dismiss.mdx b/packages/docs/pages/components/drawer/drawer-dismiss.mdx index 48a8e63e0..83253de0a 100644 --- a/packages/docs/pages/components/drawer/drawer-dismiss.mdx +++ b/packages/docs/pages/components/drawer/drawer-dismiss.mdx @@ -4,10 +4,6 @@ -## Required props - - - ## Optional props diff --git a/packages/docs/pages/components/drawer/drawer-footer.mdx b/packages/docs/pages/components/drawer/drawer-footer.mdx index ca03a7cca..68eef7c2f 100644 --- a/packages/docs/pages/components/drawer/drawer-footer.mdx +++ b/packages/docs/pages/components/drawer/drawer-footer.mdx @@ -4,10 +4,6 @@ -## Required props - - - ## Optional props - +All props of `