docs(drawer): 📝 finish docs

adaptui · Jul 25, 2022 · 1dea3a1 · 1dea3a1
1 parent 42545fb
commit 1dea3a1
Show file tree

Hide file tree

Showing 10 changed files with 148 additions and 39 deletions.
diff --git a/docs-templates/dialog.md b/docs-templates/dialog.md
diff --git a/docs-templates/drawer.md b/docs-templates/drawer.md
@@ -0,0 +1,31 @@
+# Drawer
+
+`Drawer` component that controls visibility of a section of content by following
+the
+[WAI-ARIA Dialog(Modal) Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/)
+for it's
+[keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/#:~:text=choosing%20a%20date.-,Keyboard%20Interaction,-In%20the%20following)
+&
+[accessibility properties](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/#:~:text=or%20cancel%20button.-,WAI%2DARIA%20Roles%2C%20States%2C%20and%20Properties,-The%20element%20that).
+
+<!-- ADD_TOC -->
+
+## Usage
+
+<!-- ADD_EXAMPLE src/drawer/stories/templates/DrawerBasicJsx.ts -->
+
+<!-- CODESANDBOX
+link_title: Drawer
+js: src/drawer/stories/templates/DrawerBasicJsx.ts
+css: src/drawer/stories/templates/DrawerBasicCss.ts
+-->
+
+<!-- CODESANDBOX
+link_title: Drawer TS
+tsx: src/drawer/stories/templates/DrawerBasicTsx.ts
+css: src/drawer/stories/templates/DrawerBasicCss.ts
+-->
+
+<!-- ADD_COMPOSITION src/drawer -->
+
+<!-- ADD_PROPS src/drawer -->
diff --git a/docs/code-base-overview.md b/docs/code-base-overview.md
@@ -107,7 +107,7 @@ link
 - [DatePicker](./datepicker.md)
 - [DateRangePicker](./daterange-picker.md)
 - [TimeField](./timefield.md)
-- [Dialog](./dialog.md)
+- [Drawer](./drawer.md)
 - [Disclosure](./disclosure.md)
 - [Link](./Link.md)
 - [Meter](./meter.md)

diff --git a/docs/drawer.md b/docs/drawer.md
diff --git a/src/dialog/drawer.ts → src/drawer/drawer.ts b/src/dialog/drawer.ts → src/drawer/drawer.ts
@@ -41,7 +41,7 @@ export type DrawerProps<T extends As = "div"> = Props<DrawerOptions<T>>;
 
 export type Placement = keyof typeof PLACEMENTS;
 
-const PLACEMENTS = {
+export const PLACEMENTS = {
   left: {
     left: 0,
     top: 0,

diff --git a/src/dialog/index.ts → src/drawer/index.ts b/src/dialog/index.ts → src/drawer/index.ts
diff --git a/src/dialog/stories/DrawerBasic.component.tsx → src/drawer/stories/DrawerBasic.component.tsx b/src/dialog/stories/DrawerBasic.component.tsx → src/drawer/stories/DrawerBasic.component.tsx
diff --git a/src/dialog/stories/DrawerBasic.css → src/drawer/stories/DrawerBasic.css b/src/dialog/stories/DrawerBasic.css → src/drawer/stories/DrawerBasic.css
diff --git a/src/dialog/stories/DrawerBasic.stories.tsx → src/drawer/stories/DrawerBasic.stories.tsx b/src/dialog/stories/DrawerBasic.stories.tsx → src/drawer/stories/DrawerBasic.stories.tsx
@@ -20,6 +20,4 @@ export default {
   },
 } as Meta;
 
-export const Default: Story = {
-  args: {},
-};
+export const Default: Story = { args: {} };
diff --git a/src/index.ts b/src/index.ts
@@ -4,8 +4,8 @@ export * from "./calendar";
 export * from "./datefield";
 export * from "./datepicker";
 export * from "./daterange-picker";
-export * from "./dialog";
 export * from "./disclosure";
+export * from "./drawer";
 export * from "./link";
 export * from "./meter";
 export * from "./numberfield";