feat(modal): testing & storybook

ovh · Aug 25, 2023 · 8040dca · 8040dca
1 parent 4a9e478
commit 8040dca
Show file tree

Hide file tree

Showing 10 changed files with 160 additions and 36 deletions.
diff --git a/packages/specifications/components/modal/specifications-modal.mdx b/packages/specifications/components/modal/specifications-modal.mdx
@@ -1,10 +1,10 @@
 import {Description} from '@storybook/addon-docs';
 
-[//]: # (import Specs from '@ovhcloud/ods-core/src/components/modal/docs/spec.md';)
+import Specs from '@ovhcloud/ods-core/src/components/modal/docs/spec.md';
 import SpecsModalContents from './specifications-modal-contents.mdx';
 import SpecsModalTests from './specifications-modal-tests.mdx';
 
-[//]: # (<Description>{Specs}</Description>)
+<Description>{Specs}</Description>
 
 ## Contents
 <SpecsModalContents />

diff --git a/packages/stencil/components/modal/src/components/osds-modal/osds-modal.e2e.ts b/packages/stencil/components/modal/src/components/osds-modal/osds-modal.e2e.ts
@@ -15,6 +15,11 @@ describe('e2e:osds-modal', () => {
     await page.evaluate(() => document.body.style.setProperty('margin', '0px'));
 
     el = await page.find('osds-modal');
+
+    await page.evaluate(() => {
+      const wrapperElement = document.querySelector('osds-modal')?.shadowRoot?.querySelector('.wrapper') as HTMLElement;
+      wrapperElement.style.setProperty('animation', 'none');
+    });
   }
 
   it('should render', async () => {
@@ -160,4 +165,60 @@ describe('e2e:osds-modal', () => {
     });
   });
 
+  describe('keyboard navigation', () => {
+    it('should allow keyboard navigation inside modal but not outside when body has inert attribute', async () => {
+
+      page = await newE2EPage();
+
+      await page.setContent(`
+        <button id="outsideButton">Outside Modal</button>
+        <osds-modal dismissible="true">
+          <button id="insideModalButton1">Inside Modal 1</button>
+          <button id="insideModalButton2">Inside Modal 2</button>
+        </osds-modal>
+      `);
+
+      const outsideButton = await page.find('#outsideButton');
+      await outsideButton.click();
+      await page.waitForChanges();
+
+      await page.evaluate(() => {
+        document.body.setAttribute('inert', '');
+      });
+      const inert = await page.evaluate(() => document.body.hasAttribute('inert'));
+      expect(inert).toBe(true);
+      await page.waitForChanges();
+
+      await page.keyboard.press('Tab');
+      await page.waitForChanges();
+      const activeElementId1 = await page.evaluate(() => document.activeElement?.id);
+      expect(activeElementId1).toBe('insideModalButton1');
+
+      await page.keyboard.press('Tab');
+      await page.waitForChanges();
+      const activeElementId2 = await page.evaluate(() => document.activeElement?.id);
+      expect(activeElementId2).toBe('insideModalButton2');
+
+      await page.keyboard.press('Tab');
+      await page.waitForChanges();
+      const activeElementId3 = await page.evaluate(() => document.activeElement?.id);
+      expect(activeElementId3).toBe('insideModalButton1');
+
+      await page.waitForChanges();
+
+      await page.evaluate(() => {
+        document.body.setAttribute('inert', '');
+      });
+      const inert2 = await page.evaluate(() => document.body.hasAttribute('inert'));
+      expect(inert2).toBe(false);
+      await page.waitForChanges();
+
+      await page.keyboard.press('Tab');
+      await page.waitForChanges();
+      const activeElementId4 = await page.evaluate(() => document.activeElement?.id);
+      expect(activeElementId4).toBe('outsideButton');
+    });
+
+  });
+
 });
diff --git a/packages/stencil/components/modal/src/components/osds-modal/osds-modal.scss b/packages/stencil/components/modal/src/components/osds-modal/osds-modal.scss
@@ -35,7 +35,7 @@
 
 :host .backdrop {
   position: absolute;
-  background: rgba(0, 0, 0, 0.5);
+  opacity: 30%;
 }
 
 :host .wrapper {
@@ -54,7 +54,13 @@
   cursor: pointer;
 }
 
-:host .wrapper .actions {
+:host .wrapper .content .slot {
+  display: flex;
+  flex-direction: column;
+  overflow-y: scroll;
+}
+
+:host .wrapper .content .actions {
   display: flex;
   align-items: center;
   justify-content: flex-end;

diff --git a/packages/stencil/components/modal/src/components/osds-modal/osds-modal.tsx b/packages/stencil/components/modal/src/components/osds-modal/osds-modal.tsx
@@ -60,7 +60,7 @@ export class OsdsModal implements OdsModal<OdsStencilMethods<OdsModalMethods>, O
   }
 
   componentWillRender(): void {
-
+    document.documentElement.appendChild(this.el);
   }
 
   render() {
@@ -102,7 +102,9 @@ export class OsdsModal implements OdsModal<OdsStencilMethods<OdsModalMethods>, O
               </div>
             }
 
-            <slot></slot>
+            <div class="slot">
+              <slot></slot>
+            </div>
 
             <div class="actions">
               <slot name="actions"></slot>

diff --git a/packages/stencil/components/modal/src/components/osds-modal/styles/osds-modal.color.scss b/packages/stencil/components/modal/src/components/osds-modal/styles/osds-modal.color.scss
@@ -8,6 +8,10 @@
   )) using($colors) {
     @include osds-modal-on-selected-host() {
       //color: map_get($colors, color);
+      .backdrop {
+        background-color: map_get($colors, color);
+      }
+
       .wrapper .header {
         background-color: map_get($colors, background-color);
       }

diff --git a/packages/stencil/components/modal/src/components/osds-modal/styles/osds-modal.size.scss b/packages/stencil/components/modal/src/components/osds-modal/styles/osds-modal.size.scss
@@ -14,8 +14,9 @@
     }
 
     :host .wrapper {
+        width: 70%;
         border-radius: var(--ods-size-04);
-        margin: 8px;
+        margin: var(--ods-size-04);
     }
 
     @media screen and (max-width: 768px) {
@@ -24,12 +25,6 @@
         }
     }
 
-    @media screen and (min-width: 768px) {
-        :host .wrapper {
-            width: 70%;
-        }
-    }
-
     @media screen and (min-width: 1280px) {
         :host .wrapper {
             width: 512px;
@@ -38,8 +33,8 @@
 
     :host .wrapper .header {
         width: 100%;
-        height: calc(var(--ods-size-09) + 8px);
-        padding: 0 4px;
+        height: calc(var(--ods-size-09) + var(--ods-size-04));
+        padding: 0 calc(var(--ods-size-04) / 2);
     }
 
     :host .wrapper .content {
@@ -51,6 +46,10 @@
         margin-bottom: var(--ods-size-05);
     }
 
+    :host .wrapper .content .slot {
+        max-height: 30vh;
+    }
+
     :host .wrapper .content .actions {
         margin-top: var(--ods-size-05);
         width: 100%;

diff --git a/packages/stencil/components/modal/src/index.html b/packages/stencil/components/modal/src/index.html
@@ -13,24 +13,28 @@
   <script nomodule src='/build/osds-modal.js'></script>
   <link rel="stylesheet" href="/build/osds-modal.css">
 </head>
-<body>
+
+<body inert>
   <osds-text color="text">
     OVHcloud, anciennement OVH, est une entreprise française. Elle pratique initialement de l'hébergement de serveur, et est un fournisseur d'accès à Internet (FAI), puis opérateur de télécommunications pour les entreprises. Elle se développe, à la fin des années 2010, dans le cloud computing (informatique en nuage).
   </osds-text>
+  <osds-button slot="actions" color="default" href="https://www.ovh.com/fr/" target="_blank">En savoir plus</osds-button>
+  <osds-button slot="actions" color="primary" href="https://www.ovh.com/fr/" target="_blank">On m'héberge</osds-button>
   <script>
     document.querySelectorAll('ods-modal').forEach((elem) => {});
   </script>
+
+  <osds-modal
+    color="info"
+    headline="On Vous Héberge ?"
+    dismissible="true"
+  >
+    <osds-text color="text">
+      OVHcloud, anciennement OVH, est une entreprise française. Elle pratique initialement de l'hébergement de serveur, et est un fournisseur d'accès à Internet (FAI), puis opérateur de télécommunications pour les entreprises. Elle se développe, à la fin des années 2010, dans le cloud computing (informatique en nuage).
+    </osds-text>
+    <osds-button slot="actions" color="default" href="https://www.ovh.com/fr/" target="_blank">En savoir plus</osds-button>
+    <osds-button slot="actions" color="primary" href="https://www.ovh.com/fr/" target="_blank">On m'héberge</osds-button>
+  </osds-modal>
 </body>
 
-<osds-modal
-  color="info"
-  headline="On Vous Héberge ?"
-  dismissible="true"
->
-  <osds-text color="text">
-    OVHcloud, anciennement OVH, est une entreprise française. Elle pratique initialement de l'hébergement de serveur, et est un fournisseur d'accès à Internet (FAI), puis opérateur de télécommunications pour les entreprises. Elle se développe, à la fin des années 2010, dans le cloud computing (informatique en nuage).
-  </osds-text>
-  <osds-button slot="actions" color="default" href="https://www.ovh.com/fr/" target="_blank">En savoir plus</osds-button>
-  <osds-button slot="actions" color="primary" href="https://www.ovh.com/fr/" target="_blank">On m'héberge</osds-button>
-</osds-modal>
 </html>
diff --git a/packages/tools/storybook/stories/components/modal/modal.specifications.stories.mdx b/packages/tools/storybook/stories/components/modal/modal.specifications.stories.mdx
@@ -2,7 +2,7 @@ import { Meta } from '@storybook/addon-docs';
 import SpecificationsModal from '@ovhcloud/ods-specifications/components/modal/specifications-modal.mdx';
 import Notes from '../notes.mdx';
 
-<Meta title="UI Components/Modal [atom]/Specifications" />
+<Meta title="UI Components/Modal [molecule]/Specifications" />
 
 # Modal - Technical Specification
 ----

diff --git a/...s/tools/storybook/stories/components/modal/modal.web-component.stories.page.mdx b/...s/tools/storybook/stories/components/modal/modal.web-component.stories.page.mdx
@@ -3,7 +3,7 @@ import { Canvas, Description, Meta, DocsContainer } from '@storybook/addon-docs'
 import Usage from '@ovhcloud/ods-stencil-modal/src/docs/osds-modal/usage.mdx';
 import APITable from '@ovhcloud/ods-stencil-modal/dist/docs/components/osds-modal/readme.md';
 
-<Meta title="UI Components/️Modal [atom]/Web Component" />
+<Meta title="UI Components/️Modal [molecule]/Web Component" />
 
 # `<osds-modal>`
 

diff --git a/packages/tools/storybook/stories/components/modal/modal.web-components.stories.ts b/packages/tools/storybook/stories/components/modal/modal.web-components.stories.ts
@@ -1,12 +1,14 @@
 import { html } from 'lit-html';
 import { iframe } from '../../../.storybook/iframe';
-
+import { odsModalDefaultAttributes } from '@ovhcloud/ods-core';
 import { defineCustomElements } from '@ovhcloud/ods-stencil-modal/loader';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html';
 import {
   extractArgTypes,
   extractStoryParams,
   getTagAttributes,
 } from '../../../core/componentHTMLUtils';
+import { OdsThemeColorIntentList } from '@ovhcloud/ods-theming';
 
 import changelog from '@ovhcloud/ods-stencil-modal/CHANGELOG.md';
 import page from './modal.web-component.stories.page.mdx';
@@ -15,29 +17,75 @@ defineCustomElements();
 
 /* Default story parameters  */
 const storyParams = {
-
+  color: {
+    category: 'General',
+    defaultValue: odsModalDefaultAttributes.color,
+    options: OdsThemeColorIntentList,
+    control: { type: 'select' },
+  },
+  dismissible: {
+    category: 'General',
+    defaultValue: odsModalDefaultAttributes.dismissible,
+  },
+  headline: {
+    category: 'General',
+    defaultValue: 'On Vous Héberge ?',
+  },
+  masked: {
+    category: 'General',
+    defaultValue: odsModalDefaultAttributes.masked,
+  },
+  content: {
+    category: 'Slot',
+    defaultValue: `<osds-text color="text">OVHcloud, anciennement OVH, est une entreprise française. Elle pratique initialement de l'hébergement de serveur, et est un fournisseur d'accès à Internet (FAI), puis opérateur de télécommunications pour les entreprises. Elle se développe, à la fin des années 2010, dans le cloud computing (informatique en nuage).</osds-text>`,
+  },
+  actions: {
+    category: 'Slot',
+    defaultValue: `<osds-button slot="actions" color="default" href="https://www.ovh.com/fr/" target="_blank">En savoir plus</osds-button>
+<osds-button slot="actions" color="primary" href="https://www.ovh.com/fr/" target="_blank">On m'héberge</osds-button>`,
+  },
 };
 
 export default {
-  title: 'UI Components/Modal [atom]/Web Component',
+  title: 'UI Components/Modal [molecule]/Web Component',
   parameters: {
     notes: {
       API: iframe('/stencil-modal/modules/index.html'),
       changelog,
     },
     docs: { page }
   },
-  argTypes: extractArgTypes(storyParams)
+  argTypes: extractArgTypes(storyParams),
 };
 
-/* Default */
 const TemplateDefault = (args:any) => {
+  const handleOpenModal = () => {
+    const modal = document.querySelector('osds-modal');
+    if (modal) {
+      modal.open();
+    }
+    args.onOpenModal();
+  }
+
+  const handleCloseModal = () => {
+    const modal = document.querySelector('osds-modal');
+    if (modal) {
+      modal.close();
+    }
+    args.onOpenModal();
+  }
+
   return html`
-    <osds-modal ...=${getTagAttributes(args)}>
-      Modal
+    <button @click=${handleOpenModal}>Trigger "open()"</button>
+    <button @click=${handleCloseModal}>Trigger "close()"</button>
+
+    <osds-modal id="my-modal" ...=${getTagAttributes(args)}>
+      ${unsafeHTML(args.content)}
+      ${unsafeHTML(args.actions)}
     </osds-modal>
   `;
 }
+
 export const Default = TemplateDefault.bind({});
 Default.args = {
   ...extractStoryParams(storyParams),