docs(Drawer): Fix Drawer examples (#1401)

cengage · Aug 23, 2024 · b579733 · b579733 · github-actions · Aug 23, 2024
1 parent 2cccca8
commit b579733
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 20 deletions.
diff --git a/.changeset/docs-drawerExample.md b/.changeset/docs-drawerExample.md
diff --git a/.changeset/docs-drawerExample2.md b/.changeset/docs-drawerExample2.md
@@ -0,0 +1,5 @@
+---
+'react-magma-docs': patch
+---
+
+docs(Drawer): Fix Drawer examples
diff --git a/packages/react-magma-dom/src/components/Drawer/Drawer.stories.tsx b/packages/react-magma-dom/src/components/Drawer/Drawer.stories.tsx
@@ -30,6 +30,7 @@ export const Default = args => {
         header="Drawer Title"
         onClose={() => setShowDrawer(false)}
         isOpen={showDrawer}
+        closeAriaLabel="Close drawer"
         {...args}
       >
         <p>This is a Drawer, doing Drawer things.</p>
@@ -55,6 +56,7 @@ export const SiteNavigation = args => {
         isOpen={showDrawer}
         position={DrawerPosition.right}
         ariaLabel="Site Navigation Drawer"
+        closeAriaLabel="Close Navigation Drawer"
       >
         <NavTabs orientation={TabsOrientation.vertical}>
           <NavTab to="#">One</NavTab>

diff --git a/website/react-magma-docs/src/pages/api/drawer.mdx b/website/react-magma-docs/src/pages/api/drawer.mdx
@@ -17,18 +17,19 @@ Drawer accepts a position (top, right, bottom, or left)
 
 ```typescript
 import React from 'react';
-import { Button, Drawer, VisuallyHidden } from 'react-magma-dom';
+import { Button, Drawer, DrawerPosition, VisuallyHidden } from 'react-magma-dom';
 
 export function Example() {
   const [showDrawer, setShowDrawer] = React.useState(false);
 
   return (
     <>
       <Drawer
+        closeAriaLabel="Close drawer"
         header="Drawer Title"
-        onClose={() => setShowDrawer(false)}
         isOpen={showDrawer}
-        position="bottom"
+        onClose={() => setShowDrawer(false)}
+        position={DrawerPosition.bottom}
       >
         <p>This is a Drawer, doing Drawer things.</p>
         <p>
@@ -49,11 +50,12 @@ export function Example() {
 ```typescript
 import React from 'react';
 import {
+  Button,
   Drawer,
   DrawerPosition,
-  NavTabs,
   NavTab,
-  Button,
+  NavTabs,
+  TabsOrientation,
   VisuallyHidden,
 } from 'react-magma-dom';
 export function Example() {
@@ -63,8 +65,9 @@ export function Example() {
     <>
       <Drawer
         ariaLabel="drawer"
-        onClose={() => setShowDrawer(false)}
+        closeAriaLabel="Close drawer"
         isOpen={showDrawer}
+        onClose={() => setShowDrawer(false)}
         position={DrawerPosition.right}
       >
         <NavTabs orientation={TabsOrientation.vertical}>
@@ -90,6 +93,7 @@ import React from 'react';
 import {
   Button,
   Drawer,
+  DrawerPosition,
   VisuallyHidden,
   Card,
   CardBody,
@@ -102,11 +106,12 @@ export function Example() {
     <Card isInverse>
       <CardBody>
         <Drawer
+          closeAriaLabel="Close drawer"
           header="Drawer Title"
-          onClose={() => setShowDrawer(false)}
-          isOpen={showDrawer}
-          position="right"
           isInverse
+          isOpen={showDrawer}
+          onClose={() => setShowDrawer(false)}
+          position={DrawerPosition.right}
         >
           <p>This is a Drawer, doing Drawer things.</p>
           <p>
@@ -146,19 +151,18 @@ export function Example() {
     <I18nContext.Provider
       value={{
         ...defaultI18n,
-        example: 'example i18n',
+        modal: {
+          closeAriaLabel: 'Cerrar'
+        }
       }}
     >
       <Drawer
         header="Drawer Title"
-        onClose={() => setShowDrawer(false)}
         isOpen={showDrawer}
+        onClose={() => setShowDrawer(false)}
         position={DrawerPosition.bottom}
       >
         <p>override default i18n value:</p>
-        <p>
-          <Button>This is a button</Button>
-        </p>
       </Drawer>
       <Button onClick={() => setShowDrawer(true)}>
         Show Drawer
@@ -169,7 +173,7 @@ export function Example() {
 }
 ```
 
-# Drawer Props
+## Drawer Props
 
 **Any other props supplied will be provided to the wrapping `div` element.**