@spw-ds/spw-stencil-library 1.14.2 → 1.15.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

@@ -335,6 +335,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 +358,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 +377,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 +516,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: {

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',

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

@@ -399,6 +399,7 @@ const TemplateFeaturedCard = args => {
     return element;
 };
 export const Cards = TemplateCards.bind({});
+Cards.storyName = 'Mosaïque de cartes';
 Cards.args = {
     isMasonry: true,
     colsDesktop: 3,
@@ -406,6 +407,7 @@ Cards.args = {
     colsMobile: 1,
 };
 export const IconTiles = TemplateIconTiles.bind({});
+IconTiles.storyName = "Mosaïque de tuiles à icône";
 IconTiles.args = {
     isMasonry: true,
     colsDesktop: 3,
@@ -413,6 +415,7 @@ IconTiles.args = {
     colsMobile: 1,
 };
 export const LightTiles = TemplateLightTiles.bind({});
+LightTiles.storyName = 'Mosaïque de tuiles légères';
 LightTiles.args = {
     isMasonry: true,
     colsDesktop: 3,
@@ -420,6 +423,7 @@ LightTiles.args = {
     colsMobile: 1,
 };
 export const BigTiles = TemplateBigTiles.bind({});
+BigTiles.storyName = 'Mosaïque de grandes tuiles';
 BigTiles.args = {
     isMasonry: true,
     colsDesktop: 3,
@@ -427,6 +431,7 @@ BigTiles.args = {
     colsMobile: 1,
 };
 export const FeaturedCard = TemplateFeaturedCard.bind({});
+FeaturedCard.storyName = 'Mosaïque avec carte mise en avant';
 FeaturedCard.args = {
     isMasonry: true,
     colsDesktop: 3,

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

@@ -123,6 +123,7 @@ const TemplateDefault = args => {
     return element;
 };
 export const Default = TemplateDefault.bind({});
+Default.storyName = 'Barre latérale par défaut';
 Default.args = {
     defaultExpanded: false,
 };

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

@@ -128,6 +128,7 @@ const Template = args => {
 };
 // ─── Story 1 : Défaut ─────────────────────────────────────────────────────
 export const Default = Template.bind({});
+Default.storyName = 'Slider par défaut';
 Default.args = {
     showArrows: true,
     showDots: true,
@@ -145,6 +146,7 @@ Default.parameters = {
 };
 // ─── Story 2 : Flèches à l'extérieur ─────────────────────────────────────
 export const ArrowsOutside = () => makeSlider({ showArrows: true, showDots: true, arrowsPosition: 'outside', dotsPosition: 'inside' }, heroSlides());
+ArrowsOutside.storyName = "Flèches à l'extérieur";
 ArrowsOutside.parameters = {
     docs: {
         description: {
@@ -157,6 +159,7 @@ ArrowsOutside.parameters = {
 };
 // ─── Story 3 : Dots à l'extérieur ────────────────────────────────────────
 export const DotsOutside = () => makeSlider({ showArrows: true, showDots: true, arrowsPosition: 'inside', dotsPosition: 'outside' }, heroSlides());
+DotsOutside.storyName = "Dots à l'extérieur";
 DotsOutside.parameters = {
     docs: {
         description: {
@@ -169,6 +172,7 @@ DotsOutside.parameters = {
 };
 // ─── Story 4 : Flèches et dots à l'extérieur ─────────────────────────────
 export const AllOutside = () => makeSlider({ showArrows: true, showDots: true, arrowsPosition: 'outside', dotsPosition: 'outside' }, heroSlides());
+AllOutside.storyName = "Flèches et dots à l'extérieur";
 AllOutside.parameters = {
     docs: {
         description: {
@@ -181,6 +185,7 @@ AllOutside.parameters = {
 };
 // ─── Story 5 : Galerie d'images (hero featured) ───────────────────────────
 export const GalerieImages = () => makeSlider({ showArrows: true, showDots: true, arrowsPosition: 'outside', dotsPosition: 'outside' }, featuredSlides());
+GalerieImages.storyName = "Galerie d'images";
 GalerieImages.parameters = {
     docs: {
         description: {
@@ -200,6 +205,7 @@ GalerieImages.parameters = {
 };
 // ─── Story 6 : Autoplay ───────────────────────────────────────────────────
 export const Autoplay = () => makeSlider({ showArrows: true, showDots: true, showAutoplayToggle: true, autoplayEnabled: true, autoplayInterval: 3000, dotsPosition: 'inside' }, heroSlides());
+Autoplay.storyName = 'Autoplay activé';
 Autoplay.parameters = {
     docs: {
         description: {
@@ -212,6 +218,7 @@ Autoplay.parameters = {
 };
 // ─── Story 7 : Autoplay + galerie images ──────────────────────────────────
 export const AutoplayGalerie = () => makeSlider({ showArrows: false, showDots: true, showAutoplayToggle: true, autoplayEnabled: true, autoplayInterval: 4000, arrowsPosition: 'inside', dotsPosition: 'outside' }, featuredSlides());
+AutoplayGalerie.storyName = "Autoplay + galerie d'images";
 AutoplayGalerie.parameters = {
     docs: {
         description: {
@@ -231,6 +238,7 @@ AutoplayGalerie.parameters = {
 };
 // ─── Story 8 : Hauteur fixe ───────────────────────────────────────────────
 export const HauteurFixe = () => makeSlider({ showArrows: true, showDots: true, hasFixedHeight: true, dotsPosition: 'inside' }, heroSlides());
+HauteurFixe.storyName = 'Hauteur fixe';
 HauteurFixe.parameters = {
     docs: {
         description: {