fix(drawer): docs canvas without drawer & position demo

Signed-off-by: Alexandre Esteves <[email protected]>

packages/ods/src/components/drawer/src/index.html

@@ -26,7 +26,6 @@
         Fermentum malesuada nisi quis congue mi eget feugiat magna. Lobortis fringilla aliquet ultrices consectetur sociosqu netus nascetur erat. Tristique egestas nibh euismod vestibulum malesuada molestie pellentesque porttitor. Blandit tincidunt bibendum interdum suscipit torquent sodales sit. Sem cursus tristique odio parturient potenti cubilia nulla mattis natoque. Nulla fermentum nec euismod eros nisi aliquam in. Leo eget ex suspendisse montes amet cubilia penatibus ipsum.
         Montes maecenas justo facilisi tristique ultricies maecenas mollis donec aptent. Atincidunt integer neque laoreet est finibus. Proin accumsan torquent ullamcorper in ornare rutrum. Aenean maximus blandit dignissim inceptos rutrum. Mus libero interdum libero nam porttitor arcu, interdum nostra consequat. Hendrerit quis rhoncus pulvinar netus lacus. Phasellus donec morbi libero dictum blandit fringilla ad est purus.
         Quisque morbi suscipit potenti ut nullam aenean; litora fermentum efficitur. Proin fringilla enim tristique; lacinia fermentum dapibus vitae. Tellus montes praesent adipiscing enim euismod cursus nec quisque. Suscipit etiam lectus rutrum mollis, nisl rhoncus posuere ultrices quam. Tincidunt pellentesque varius curabitur ante ut accumsan. Turpis litora accumsan dapibus viverra inceptos pretium aptent. Parturient eu elementum praesent eget interdum iaculis commodo nisi lacinia. Conubia inceptos porta mi lacinia pharetra ligula. Pulvinar vulputate primis duis habitasse etiam feugiat dolor.
-
       </p>
 
       <button id="button-open-modal">open modal</button>

packages/storybook/src/components/canvasWithoutContext/CanvasWithoutContext.tsx

@@ -5,13 +5,15 @@ import styles from './canvasWithoutContext.module.css';
 
 type Props = {
   of: ModuleExports,
+  className?: string,
+  sourceState?: string,
 }
 
 // Remove the transform form to the element because it create a new stacking context
 // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context
-const CanvasWithoutContext = ({ of }: Props) => {
+const CanvasWithoutContext = ({ of, className, sourceState = 'none' }: Props) => {
   return (
-    <Canvas of={ of } sourceState="none" className={ styles['canvas-without-context'] } />
+    <Canvas of={ of } sourceState={ sourceState } className={ `${className} ${styles['canvas-without-context']}` } />
   );
 };
 

packages/storybook/stories/components/drawer/drawer.stories.ts

@@ -191,14 +191,19 @@ export const Position: StoryObj = {
 
   const drawerPosition = document.querySelector('#drawer-position');
 
-  [buttonLeft, buttonRight, buttonBottom, buttonTop].forEach((button) => button.addEventListener('click', () => {
-    drawerPosition.position = button.id.replace('button-drawer-', '');
-    if (drawerPosition.isOpen) {
-      drawerPosition.close();
-    } else {
-      drawerPosition.open();
-    }
-}));
+  [buttonLeft, buttonRight, buttonBottom, buttonTop].forEach((button) =>
+    button.addEventListener('click', async() => {
+      const lastPosition = drawerPosition.position;
+      drawerPosition.position = button.id.replace('button-drawer-', '');
+      if (lastPosition !== drawerPosition.position && drawerPosition.isOpen) {
+        return;
+      }
+      if (drawerPosition.isOpen) {
+        await drawerPosition.close();
+      } else {
+        await drawerPosition.open();
+      }
+    }));
 })();
 </script>
   `,

packages/storybook/stories/components/drawer/technical-information.mdx

@@ -12,7 +12,7 @@ import { CanvasWithoutContext } from '../../../src/components/canvasWithoutConte
 
 <Heading label="Overview" level={ 2 } />
 
-<CanvasWithoutContext of={ DrawerStories.Overview } sourceState="none" />
+<CanvasWithoutContext of={ DrawerStories.Overview } />
 
 <TechnicalSpecification data={ SpecificationsDrawer } />