feat(PixOverlay): add component story

1024pix · Jan 9, 2025 · 23c943f · 23c943f
1 parent 0ce1aef
commit 23c943f
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 74 deletions.
diff --git a/addon/components/pix-overlay.hbs b/addon/components/pix-overlay.hbs
@@ -1,6 +1,6 @@
 <div
   class="pix-overlay {{unless @isVisible ' pix-overlay--hidden'}}"
-  {{on "click" this.onContainerClick}}
+  {{on "click" this.onClick}}
   {{trap-focus @isVisible}}
   {{on-escape-action @onClose}}
 >

diff --git a/addon/components/pix-overlay.js b/addon/components/pix-overlay.js
@@ -4,7 +4,6 @@ import { action } from '@ember/object';
 export default class PixOverlay extends Component {
   @action
   onClick(event) {
-    console.log(event.target);
     const isClickOnOverlay = event.target.classList.contains('pix-overlay');
 
     if (this.args.onClose && isClickOnOverlay) {

diff --git a/app/stories/pix-overlay.mdx b/app/stories/pix-overlay.mdx
@@ -0,0 +1,24 @@
+import { Meta, Story, ArgTypes } from '@storybook/blocks';
+import * as ComponentStories from './pix-overlay.stories';
+
+<Meta of={ComponentStories} />
+
+# Pix Overlay
+
+Un `Overlay` est un bloc non opaque venant superposer l'écran principal de l'application.
+
+Utilisé, par exemple, dans les composants `PixModal` et `PixSidebar`, il vient mettre en avant les nouveaux blocs en premier plan.
+
+Une fois ouvert, l'Overlay peut-être fermé au clic ou via la touche "Echap".
+
+  <Story of={ComponentStories.overlay} height={60} />
+
+## Usage
+
+```html
+<PixOverlay @isVisible={{true}} @onClose={{this.myCallback}} />
+```
+
+## Arguments
+
+<ArgTypes of={ComponentStories} />
diff --git a/app/stories/pix-overlay.stories.js b/app/stories/pix-overlay.stories.js
@@ -0,0 +1,26 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export default {
+  title: 'Other/Overlay',
+  argTypes: {
+    isVisible: {
+      name: 'isVisible',
+      description: "Visibilité de l'overlay",
+      type: { name: 'bool', required: false },
+      table: { defaultValue: { summary: true } },
+      control: { type: 'radio' },
+      options: [true, false],
+    },
+    onClose: {
+      name: 'onClose',
+      description: "Callback déclenché à la fermeture de l'overlay",
+    },
+  },
+};
+
+export const overlay = (args) => ({
+  template: hbs`<PixOverlay @isVisible={{this.isVisible}}>
+  Du contenu en dessous de l'overlay.
+</PixOverlay>`,
+  context: args,
+});
diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
@@ -1,74 +1,3 @@
 {{page-title "Dummy"}}
 
-<PixAppLayout @variant="orga">
-  <:navigation>
-    <PixNavigation @menuLabel="Menu" @navigationAriaLabel="navigation principale">
-      <:brand>
-        <a href="/">
-          <img src="/pix-orga.svg" alt="pix orga" />
-        </a>
-      </:brand>
-      <:navElements>
-        <PixNavigationButton @route="modal-page" @icon="campaign">
-          Modal
-        </PixNavigationButton>
-        <PixNavigationButton @route="select-page" @icon="book">select</PixNavigationButton>
-        <PixNavigationButton @route="sidebar-page" @icon="doorOpen">Sidebar</PixNavigationButton>
-        <PixNavigationButton @route="tooltip-page" @icon="signpost">tooltip</PixNavigationButton>
-        <PixNavigationButton @route="table-page" @icon="assignment">Table</PixNavigationButton>
-        <PixNavigationButton href="https://pix.fr" @icon="book">Documentation</PixNavigationButton>
-        <PixNavigationButton
-          href="https://pix.fr"
-          title="Pix.fr"
-          @target="_blank"
-          @icon="help"
-        >Centre d'aide</PixNavigationButton>
-      </:navElements>
-      <:footer>
-        <p>
-          1 000 places disponibles
-        </p>
-        <PixNavigationSeparator />
-        <p>
-          Martin Dupond
-        </p>
-        <p>{{this.structure.label}}</p>
-        <PixStructureSwitcher
-          @label="Changer d'organisation"
-          @structures={{this.structures}}
-          @value={{this.structure.value}}
-          @onChange={{this.setStructure}}
-        />
-        <PixButton @triggerAction={{this.disconnect}} @variant="tertiary">Se déconnecter</PixButton>
-      </:footer>
-    </PixNavigation>
-  </:navigation>
-  <:main>
-    <main>
-      {{outlet}}
-    </main>
-  </:main>
-  <:footer>
-    <footer>
-      <ul>
-        <li>
-          <a href="https://pix.fr/mentions-legales" target="_blank" rel="noopener noreferrer">
-            Mentions légales
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://pix.fr/accessibilite-pix-certif"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Accessibilité : partiellement conforme
-          </a>
-        </li>
-      </ul>
-      <div>
-        <span>© 2024 Pix</span>
-      </div>
-    </footer>
-  </:footer>
-</PixAppLayout>
+{{outlet}}