@spw-ds/spw-stencil-library 1.14.2 → 1.16.0

package/dist/collection/stories/organisms/spw-group/spw-group.stories.js

@@ -63,6 +63,7 @@ const Template = args => {
 };
 // Stories
 export const Default = Template.bind({});
+Default.storyName = 'Groupe horizontal';
 Default.args = {
     content: defaultHtmlContent(),
 };
@@ -78,6 +79,7 @@ Parfait pour des actions primaires et secondaires côte à côte (ex: "Enregistr
     },
 };
 export const Vertical = Template.bind({});
+Vertical.storyName = 'Groupe vertical';
 Vertical.args = {
     orientation: 'vertical',
     content: `
@@ -98,6 +100,7 @@ L'orientation verticale est recommandée pour plus de 3 boutons ou sur mobile.
     },
 };
 export const MultiLine = Template.bind({});
+MultiLine.storyName = 'Groupe multi-lignes';
 MultiLine.args = {
     flexWrap: 'wrap',
     alignment: 'center',
@@ -126,6 +129,7 @@ Idéal pour des raccourcis thématiques ou des liens rapides en nombre variable.
     },
 };
 export const Links = Template.bind({});
+Links.storyName = 'Groupe de liens';
 Links.args = {
     orientation: 'vertical',
     content: `
@@ -147,7 +151,7 @@ Les icônes positionnées à gauche améliorent la scannabilité visuelle de la
     },
 };
 export const CheckboxesAvecErreur = Template.bind({});
-CheckboxesAvecErreur.storyName = 'CheckboxesError';
+CheckboxesAvecErreur.storyName = 'Groupe de cases à cocher avec erreur';
 CheckboxesAvecErreur.args = {
     type: 'checkboxes',
     orientation: 'vertical',
@@ -170,7 +174,7 @@ Groupe de checkboxes avec un message d'erreur affiché sous le groupe via la pro
     },
 };
 export const RadiosAvecErreur = Template.bind({});
-RadiosAvecErreur.storyName = 'RadiosError';
+RadiosAvecErreur.storyName = 'Groupe de boutons radio avec erreur';
 RadiosAvecErreur.args = {
     type: 'radios',
     orientation: 'vertical',
@@ -192,7 +196,7 @@ Groupe de radios avec un message d'erreur affiché sous le groupe via la prop er
     },
 };
 export const CheckboxesAvecHint = Template.bind({});
-CheckboxesAvecHint.storyName = 'CheckboxesHint';
+CheckboxesAvecHint.storyName = "Groupe de cases à cocher avec aide";
 CheckboxesAvecHint.args = {
     type: 'checkboxes',
     orientation: 'vertical',
@@ -214,7 +218,7 @@ Groupe de checkboxes avec un message d'indication affiché sous le groupe via la
     },
 };
 export const RadiosAvecSuccess = Template.bind({});
-RadiosAvecSuccess.storyName = 'RadiosSuccess';
+RadiosAvecSuccess.storyName = 'Groupe de boutons radio avec succès';
 RadiosAvecSuccess.args = {
     type: 'radios',
     orientation: 'vertical',
@@ -236,7 +240,7 @@ Groupe de radios avec un message de succès affiché sous le groupe via la prop
     },
 };
 export const CheckboxesAvecWarning = Template.bind({});
-CheckboxesAvecWarning.storyName = 'CheckboxesWarning';
+CheckboxesAvecWarning.storyName = 'Groupe de cases à cocher avec avertissement';
 CheckboxesAvecWarning.args = {
     type: 'checkboxes',
     orientation: 'horizontal',

package/dist/collection/stories/organisms/spw-header/spw-header.stories.js

@@ -34,7 +34,13 @@ Le composant se compose de plusieurs sous-éléments :
 
 ## Slots
 
-- Support des slots logo, logo-mobile, top-left, right, search
+- **logo** : Logo desktop (remplace le logo Wallonie par défaut)
+- **logo-mobile** : Logo mobile
+- **top-left** : Zone gauche de la barre supérieure (ex: sélecteur de persona)
+- **right** : Zone droite de la barre desktop, à côté de la recherche (ex: sélecteur de langue)
+- **search** : Contenu de l'overlay de recherche
+- **user-info** : Espace utilisateur affiché en desktop, à droite de la barre principale
+- **user-info-mobile** : Espace utilisateur affiché en mobile, à côté du bouton hamburger. Masqué automatiquement quand la navigation ou la recherche est ouverte
 
 ## Fonctionnalités
 
@@ -335,6 +341,7 @@ const TemplateVariant3 = args => {
     return element;
 };
 export const Default = Template.bind({});
+Default.storyName = 'En-tête complet';
 Default.args = {
     isActive: false,
     siteTitle: 'Titre du site',
@@ -357,7 +364,7 @@ Variant2Simplifie.args = {
     siteTitle: 'Titre du site',
     borderColor: 'var(--spw-ds-primary)',
 };
-Variant2Simplifie.storyName = 'Variante bouton supplémentaire';
+Variant2Simplifie.storyName = "En-tête simplifié avec bouton d'action";
 Variant2Simplifie.parameters = {
     docs: {
         description: {
@@ -376,7 +383,7 @@ Variant3Etendu.args = {
     hasWallonieLogo: false,
     borderColor: 'var(--spw-ds-tertiary)',
 };
-Variant3Etendu.storyName = 'Variante logo personnalisé';
+Variant3Etendu.storyName = 'En-tête avec logo personnalisé';
 Variant3Etendu.parameters = {
     docs: {
         description: {
@@ -515,7 +522,7 @@ Megamenu.args = {
     siteTitle: 'Titre du site',
     borderColor: 'var(--spw-ds-primary)',
 };
-Megamenu.storyName = 'Variante Megamenu';
+Megamenu.storyName = 'En-tête avec mégamenu';
 Megamenu.parameters = {
     docs: {
         description: {
@@ -527,3 +534,97 @@ Utilisation : ajoutez variant="megamenu" sur le spw-header-navigation-item souha
         },
     },
 };
+function htmlContentUserInfo(slotArgs) {
+    return /* HTML */ `
+    <div slot="top-left">
+      <spw-header-persona>
+        <option data-link="#" selected value="citoyen">Citoyen</option>
+        <option data-link="#" value="entreprise">Entreprise</option>
+        <option data-link="#" value="pouvoirs-locaux">Pouvoirs locaux</option>
+      </spw-header-persona>
+    </div>
+
+    <div slot="right">
+      <spw-header-lang>
+        <option data-link="#" selected value="fr">Fr</option>
+        <option data-link="#" value="nl">Nl</option>
+        <option data-link="#" value="en">En</option>
+        <option data-link="#" value="de">De</option>
+      </spw-header-lang>
+    </div>
+
+    <spw-dropdown slot="user-info" direction="bottom" alignment="end" has-padding="false" content-width="160">
+      <spw-avatar clickable initials="JD" bubble="3"></spw-avatar>
+      <div slot="dropdownContent">
+        <div>
+          <spw-dropdown-item>Mon profil</spw-dropdown-item>
+          <spw-dropdown-item>Paramètres</spw-dropdown-item>
+          <spw-dropdown-item>Déconnexion</spw-dropdown-item>
+        </div>
+      </div>
+    </spw-dropdown>
+
+    <spw-dropdown slot="user-info-mobile" direction="bottom" alignment="end" has-padding="false" content-width="160">
+      <spw-avatar clickable initials="JD" bubble="3"></spw-avatar>
+      <div slot="dropdownContent">
+        <div>
+          <spw-dropdown-item>Mon profil</spw-dropdown-item>
+          <spw-dropdown-item>Paramètres</spw-dropdown-item>
+          <spw-dropdown-item>Déconnexion</spw-dropdown-item>
+        </div>
+      </div>
+    </spw-dropdown>
+
+    <div slot="search">
+      <spw-search-field class="mb-4" size="medium" name="search" placeholder="Exemple : un mot-clé..."></spw-search-field>
+    </div>
+
+    <spw-header-navigation>
+      <spw-header-navigation-item is-active="${slotArgs.isActive}">
+        <a href="#">Rubrique 1</a>
+      </spw-header-navigation-item>
+      <spw-header-navigation-item>
+        <a href="#">Rubrique 2</a>
+      </spw-header-navigation-item>
+      <spw-header-navigation-item>
+        <a href="#">Rubrique 3</a>
+      </spw-header-navigation-item>
+    </spw-header-navigation>
+  `;
+}
+const TemplateUserInfo = args => {
+    const element = document.createElement(elementTag);
+    const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
+    const masterProps = controls.__realProps || Object.keys(controls);
+    Object.entries(args).forEach(([key, val]) => {
+        if (masterProps.includes(key)) {
+            element.setAttribute(toKebabCase(key), val);
+        }
+        else if (key.startsWith('on')) {
+            element.addEventListener(key.substring(2).toLowerCase(), val);
+        }
+    });
+    element.innerHTML = htmlContentUserInfo(args);
+    return element;
+};
+export const AvecEspaceUtilisateur = TemplateUserInfo.bind({});
+AvecEspaceUtilisateur.storyName = 'En-tête avec espace utilisateur';
+AvecEspaceUtilisateur.args = {
+    isActive: false,
+    siteTitle: 'Titre du site',
+    borderColor: 'var(--spw-ds-primary)',
+};
+AvecEspaceUtilisateur.parameters = {
+    docs: {
+        description: {
+            story: `
+Header avec espace utilisateur connecté via les slots user-info (desktop) et user-info-mobile (mobile).
+
+- En desktop, le dropdown avatar apparaît à droite de la barre principale, à côté du bouton de recherche.
+- En mobile, il apparaît à côté du bouton hamburger, et se masque automatiquement quand la navigation ou la recherche est ouverte.
+
+Les deux slots sont indépendants : chacun est une instance distincte du composant, avec son propre état.
+      `,
+        },
+    },
+};

package/dist/collection/stories/organisms/spw-hero/spw-hero.stories.js

@@ -115,6 +115,7 @@ const TemplateMaxi = args => {
     return element;
 };
 export const PhotoLeft = Template.bind({});
+PhotoLeft.storyName = 'Hero photo - texte à gauche';
 PhotoLeft.args = {
     variant: 'photo',
     imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
@@ -130,6 +131,7 @@ PhotoLeft.parameters = {
     },
 };
 export const PhotoRight = Template.bind({});
+PhotoRight.storyName = 'Hero photo - texte à droite';
 PhotoRight.args = {
     variant: 'photo',
     imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
@@ -145,6 +147,7 @@ PhotoRight.parameters = {
     },
 };
 export const PhotoCenter = Template.bind({});
+PhotoCenter.storyName = 'Hero photo - texte centré';
 PhotoCenter.args = {
     variant: 'photo',
     imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
@@ -160,6 +163,7 @@ PhotoCenter.parameters = {
     },
 };
 export const Maxi = TemplateMaxi.bind({});
+Maxi.storyName = 'Hero maxi plein écran avec recherche';
 Maxi.args = {
     variant: 'maxi',
     imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
@@ -176,6 +180,7 @@ Maxi.parameters = {
     },
 };
 export const GreyLeft = Template.bind({});
+GreyLeft.storyName = 'Hero gris - texte à gauche';
 GreyLeft.args = {
     variant: 'grey',
     imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
@@ -191,6 +196,7 @@ GreyLeft.parameters = {
     },
 };
 export const GreyRight = Template.bind({});
+GreyRight.storyName = 'Hero gris - texte à droite';
 GreyRight.args = {
     variant: 'grey',
     imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
@@ -206,6 +212,7 @@ GreyRight.parameters = {
     },
 };
 export const WhiteLeft = Template.bind({});
+WhiteLeft.storyName = 'Hero blanc - texte à gauche';
 WhiteLeft.args = {
     variant: 'white',
     imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
@@ -221,6 +228,7 @@ WhiteLeft.parameters = {
     },
 };
 export const WhiteRight = Template.bind({});
+WhiteRight.storyName = 'Hero blanc - texte à droite';
 WhiteRight.args = {
     variant: 'white',
     imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
@@ -236,6 +244,7 @@ WhiteRight.parameters = {
     },
 };
 export const WhiteLeftPictureFull = Template.bind({});
+WhiteLeftPictureFull.storyName = 'Hero blanc - texte à gauche, image pleine hauteur';
 WhiteLeftPictureFull.args = {
     variant: 'white',
     imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
@@ -252,6 +261,7 @@ WhiteLeftPictureFull.parameters = {
     },
 };
 export const WhiteRightPictureFull = Template.bind({});
+WhiteRightPictureFull.storyName = 'Hero blanc - texte à droite, image pleine hauteur';
 WhiteRightPictureFull.args = {
     variant: 'white',
     imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
@@ -267,6 +277,68 @@ WhiteRightPictureFull.parameters = {
         },
     },
 };
+const TemplateWithPlayButton = args => {
+    const wrapper = document.createElement('div');
+    const element = document.createElement(elementTag);
+    const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
+    const masterProps = controls.__realProps || Object.keys(controls);
+    Object.entries(args).forEach(([key, val]) => {
+        if (masterProps.includes(key)) {
+            element.setAttribute(toKebabCase(key), val);
+        }
+        else if (key.startsWith('on')) {
+            element.addEventListener(key.substring(2).toLowerCase(), val);
+        }
+    });
+    element.innerHTML = /* HTML */ `
+    <h2 class="spw-ds-typography-heading-02 mb-3">Mon titre</h2>
+    <p class="spw-ds-color-text-grey-800 mb-4">
+      Contenu du hero avec un bouton play qui ouvre une modal vidéo. Le hero est lié à la modal via l'attribut modal-video-id et le bouton play doit avoir l'attribut
+      data-modal-open correspondant à l'id de la modal ciblée.
+    </p>
+    <spw-button href="#" is-full-width-mobile="true" size="small" variant="primary">En savoir plus</spw-button>
+  `;
+    const modal = document.createElement('spw-modal');
+    modal.setAttribute('id', 'hero-video-modal');
+    modal.setAttribute('size', 'medium');
+    modal.setAttribute('caption', '');
+    modal.setAttribute('show-close-button', 'true');
+    modal.innerHTML = /* HTML */ `
+    <div slot="content">
+      <iframe
+        width="100%"
+        height="315"
+        src="https://www.youtube.com/embed/Wplwd2dnD1E?si=kV9LCDut8q1mquIj"
+        title="YouTube video player"
+        frameborder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        referrerpolicy="strict-origin-when-cross-origin"
+        allowfullscreen
+      ></iframe>
+    </div>
+  `;
+    wrapper.appendChild(element);
+    wrapper.appendChild(modal);
+    return wrapper;
+};
+export const WithPlayButton = TemplateWithPlayButton.bind({});
+WithPlayButton.storyName = 'Hero avec bouton de lecture vidéo';
+WithPlayButton.args = {
+    variant: 'grey',
+    imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
+    imageAlt: 'Attribut alt',
+    surface: 'light',
+    alignment: 'left',
+    hasVideo: true,
+    modalVideoId: 'hero-video-modal',
+};
+WithPlayButton.parameters = {
+    docs: {
+        description: {
+            story: `Hero avec bouton play intégré qui ouvre une modal vidéo. Utiliser has-video et modal-video-id pour lier le hero à une spw-modal contenant l'iframe vidéo.`,
+        },
+    },
+};
 const TemplateMini = args => {
     const element = document.createElement(elementTag);
     const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
@@ -283,6 +355,7 @@ const TemplateMini = args => {
     return element;
 };
 export const MiniLight = TemplateMini.bind({});
+MiniLight.storyName = 'Hero mini clair';
 MiniLight.args = {
     variant: 'mini',
     imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
@@ -298,6 +371,7 @@ MiniLight.parameters = {
     },
 };
 export const MiniDark = TemplateMini.bind({});
+MiniDark.storyName = 'Hero mini sombre';
 MiniDark.args = {
     variant: 'mini',
     imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
@@ -327,6 +401,7 @@ const TemplateFeatured = args => {
     return element;
 };
 export const Featured = TemplateFeatured.bind({});
+Featured.storyName = 'Hero image en avant';
 Featured.args = {
     variant: 'featured',
     imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
@@ -342,6 +417,7 @@ Featured.parameters = {
     },
 };
 export const FeaturedResponsiveRatio = TemplateFeatured.bind({});
+FeaturedResponsiveRatio.storyName = 'Hero image en avant avec ratio responsive';
 FeaturedResponsiveRatio.args = {
     variant: 'featured',
     imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
@@ -359,6 +435,7 @@ FeaturedResponsiveRatio.parameters = {
     },
 };
 export const FeaturedNaturalSize = TemplateFeatured.bind({});
+FeaturedNaturalSize.storyName = 'Hero image en avant taille naturelle';
 FeaturedNaturalSize.args = {
     variant: 'featured',
     imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
@@ -372,8 +449,9 @@ FeaturedNaturalSize.parameters = {
         },
     },
 };
-export const AvecCopyrightTooltip = TemplateFeatured.bind({});
-AvecCopyrightTooltip.args = {
+export const CopyrightTooltip = TemplateFeatured.bind({});
+CopyrightTooltip.storyName = 'Hero avec infobulle de copyright';
+CopyrightTooltip.args = {
     variant: 'featured',
     imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
     imageAlt: 'Image featured',
@@ -385,7 +463,7 @@ AvecCopyrightTooltip.args = {
     tooltipCopyrightText: 'Photo par John Doe via Unsplash',
     tooltipCopyrightMaxWidth: '200',
 };
-AvecCopyrightTooltip.parameters = {
+CopyrightTooltip.parameters = {
     docs: {
         description: {
             story: `Hero featured avec la combinaison tag de copyright et tooltip d'information. Le tag affiche la source cliquable, le tooltip (icône info) donne le détail du crédit photo au survol. Les deux peuvent coexister ou être utilisés indépendamment via copyright-text, tooltip-copyright-title et tooltip-copyright-text.`,

package/dist/collection/stories/organisms/spw-lightbox/spw-lightbox.stories.js

@@ -76,6 +76,7 @@ export const GalerieMosaique = () => {
   `;
     return wrapper;
 };
+GalerieMosaique.storyName = 'Galerie en mosaïque';
 GalerieMosaique.parameters = {
     docs: {
         description: {
@@ -127,6 +128,7 @@ export const Caption = () => {
   `;
     return wrapper;
 };
+Caption.storyName = 'Avec légendes';
 Caption.parameters = {
     docs: {
         description: {
@@ -170,6 +172,7 @@ export const GrilleUniforme = () => {
   `;
     return wrapper;
 };
+GrilleUniforme.storyName = 'Grille uniforme';
 GrilleUniforme.parameters = {
     docs: {
         description: {
@@ -203,6 +206,7 @@ export const ImageUnique = () => {
   `;
     return wrapper;
 };
+ImageUnique.storyName = 'Image unique';
 ImageUnique.parameters = {
     docs: {
         description: {
@@ -243,6 +247,7 @@ export const SansThumbnails = () => {
   `;
     return wrapper;
 };
+SansThumbnails.storyName = 'Sans miniatures';
 SansThumbnails.parameters = {
     docs: {
         description: {
@@ -282,6 +287,7 @@ export const SansBackdropClose = () => {
   `;
     return wrapper;
 };
+SansBackdropClose.storyName = "Sans fermeture par clic à l'extérieur";
 SansBackdropClose.parameters = {
     docs: {
         description: {
@@ -341,6 +347,7 @@ export const TextesAriaCustomises = () => {
   `;
     return wrapper;
 };
+TextesAriaCustomises.storyName = 'Textes ARIA personnalisés';
 TextesAriaCustomises.parameters = {
     docs: {
         description: {
@@ -412,6 +419,7 @@ export const APIProgrammatique = () => {
     });
     return wrapper;
 };
+APIProgrammatique.storyName = 'Ouverture programmatique (API)';
 APIProgrammatique.parameters = {
     docs: {
         description: {
@@ -477,6 +485,7 @@ export const Copyright = () => {
   `;
     return wrapper;
 };
+Copyright.storyName = 'Avec copyright';
 Copyright.parameters = {
     docs: {
         description: {
@@ -521,6 +530,7 @@ export const ImagesDeTaillesDifferentes = () => {
   `;
     return wrapper;
 };
+ImagesDeTaillesDifferentes.storyName = 'Images de tailles différentes';
 ImagesDeTaillesDifferentes.parameters = {
     docs: {
         description: {
@@ -559,6 +569,7 @@ export const HoverAvecLoupe = () => {
   `;
     return wrapper;
 };
+HoverAvecLoupe.storyName = 'Survol avec loupe';
 HoverAvecLoupe.parameters = {
     docs: {
         description: {
@@ -601,6 +612,7 @@ export const ThumbnailCustomViaSlot = () => {
   `;
     return wrapper;
 };
+ThumbnailCustomViaSlot.storyName = 'Miniature personnalisée via slot';
 ThumbnailCustomViaSlot.parameters = {
     docs: {
         description: {

package/dist/collection/stories/organisms/spw-list/spw-list.stories.js

@@ -116,6 +116,7 @@ const TemplateDefault = args => {
     return element;
 };
 export const Default = TemplateDefault.bind({});
+Default.storyName = 'Liste par défaut';
 Default.args = {
     variant: 'default',
     category: '',
@@ -127,6 +128,7 @@ Default.args = {
     categoryIcon: '',
 };
 export const Category = TemplateDefault.bind({});
+Category.storyName = 'Liste avec catégories';
 Category.args = {
     variant: 'default',
     category: 'Catégorie',
@@ -138,6 +140,7 @@ Category.args = {
     categoryIcon: 'fa-file-signature',
 };
 export const Shortcut = TemplateDefault.bind({});
+Shortcut.storyName = 'Liste de raccourcis';
 Shortcut.args = {
     variant: 'shortcut',
     category: '',
@@ -149,6 +152,7 @@ Shortcut.args = {
     categoryIcon: '',
 };
 export const SansIcone = TemplateDefault.bind({});
+SansIcone.storyName = 'Liste sans icône';
 SansIcone.args = {
     variant: 'default',
     category: '',
@@ -184,6 +188,7 @@ export const SansDescription = args => {
   `;
     return element;
 };
+SansDescription.storyName = 'Liste sans description';
 SansDescription.args = {
     variant: 'default',
     href: 'http://google.com',
@@ -191,6 +196,7 @@ SansDescription.args = {
     icon: 'fa-arrow-right',
 };
 export const AvecIcone = TemplateDefault.bind({});
+AvecIcone.storyName = 'Liste avec icône personnalisée';
 AvecIcone.args = {
     variant: 'default',
     category: '',
@@ -297,6 +303,7 @@ export const ListeFichiers = () => {
   `;
     return element;
 };
+ListeFichiers.storyName = "Liste de fichiers avec actions";
 ListeFichiers.parameters = {
     docs: {
         description: {
@@ -331,6 +338,7 @@ export const ListeFichiersLight = () => {
   `;
     return wrapper;
 };
+ListeFichiersLight.storyName = 'Liste de fichiers légère';
 ListeFichiersLight.parameters = {
     docs: {
         description: {

package/dist/collection/stories/organisms/spw-message/spw-message.stories.js

@@ -71,6 +71,7 @@ const commonArgs = {
     content: 'Contenu du message',
 };
 export const Default = Template.bind({});
+Default.storyName = 'Message neutre';
 Default.args = Object.assign(Object.assign({}, commonArgs), { messageId: '1', variant: 'default' });
 Default.parameters = {
     docs: {
@@ -84,6 +85,7 @@ Ce variant est approprié pour des messages informatifs sans urgence particuliè
     },
 };
 export const Success = Template.bind({});
+Success.storyName = 'Message de succès';
 Success.args = Object.assign(Object.assign({}, commonArgs), { messageId: '2', variant: 'success' });
 Success.parameters = {
     docs: {
@@ -97,6 +99,7 @@ Exemples : "Votre demande a été envoyée avec succès", "Données enregistrée
     },
 };
 export const Alert = Template.bind({});
+Alert.storyName = "Message d'alerte";
 Alert.args = Object.assign(Object.assign({}, commonArgs), { messageId: '3', variant: 'alert' });
 Alert.parameters = {
     docs: {
@@ -110,6 +113,7 @@ Exemples : "Erreur lors de la soumission", "Champs obligatoires manquants"
     },
 };
 export const Info = Template.bind({});
+Info.storyName = "Message d'information";
 Info.args = Object.assign(Object.assign({}, commonArgs), { messageId: '4', variant: 'info' });
 Info.parameters = {
     docs: {
@@ -123,6 +127,7 @@ Exemples : "Cette fonctionnalité sera bientôt disponible", "Nouveauté disponi
     },
 };
 export const Warning = Template.bind({});
+Warning.storyName = "Message d'avertissement";
 Warning.args = Object.assign(Object.assign({}, commonArgs), { messageId: '5', variant: 'warning' });
 Warning.parameters = {
     docs: {
@@ -136,7 +141,7 @@ Exemples : "Votre session expire bientôt", "Attention aux informations sensible
     },
 };
 export const CompactWithContent = Template.bind({});
-CompactWithContent.storyName = 'Compact (with content)';
+CompactWithContent.storyName = 'Message compact avec contenu';
 CompactWithContent.args = {
     messageId: '6',
     messageTitle: 'Information importante',
@@ -164,7 +169,7 @@ Idéal pour des notifications courtes ou des barres d'information en haut de pag
     },
 };
 export const CompactWithoutContent = Template.bind({});
-CompactWithoutContent.storyName = 'Compact (without content)';
+CompactWithoutContent.storyName = 'Message compact titre seul';
 CompactWithoutContent.args = {
     messageId: '7',
     messageTitle: 'Maintenance prévue ce soir',

package/dist/collection/stories/organisms/spw-modal/spw-modal.stories.js

@@ -17,6 +17,9 @@ const meta = {
     tags: ['autodocs'],
     parameters: {
         docs: {
+            story: {
+                height: '400px',
+            },
             description: {
                 component: `
 
@@ -79,6 +82,7 @@ const Template = args => {
     return fragment;
 };
 export const Small = Template.bind({});
+Small.storyName = 'Fenêtre modale petite';
 Small.args = {
     size: 'small',
     id: 'modal1',
@@ -119,6 +123,7 @@ Cas d'usage : confirmations d'actions ("Êtes-vous sûr de vouloir supprimer ?")
     },
 };
 export const Medium = Template.bind({});
+Medium.storyName = 'Fenêtre modale moyenne';
 Medium.args = {
     size: 'medium',
     id: 'modal2',
@@ -159,6 +164,7 @@ Cas d'usage : formulaires de taille moyenne, affichage d'informations détaillé
     },
 };
 export const Large = Template.bind({});
+Large.storyName = 'Fenêtre modale grande';
 Large.args = {
     size: 'large',
     id: 'modal3',
@@ -199,6 +205,7 @@ Cas d'usage : formulaires longs avec plusieurs sections, affichage de tableaux o
     },
 };
 export const Fluid = Template.bind({});
+Fluid.storyName = 'Fenêtre modale fluide';
 Fluid.args = {
     size: 'fluid',
     id: 'modal4',