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

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: {

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

@@ -77,6 +77,7 @@ const Template = args => {
     return container;
 };
 export const Base = Template.bind({});
+Base.storyName = 'Tableau de base';
 Base.args = {
     innerHTML: `
     <spw-table-head>
@@ -129,6 +130,7 @@ Base.parameters = {
     },
 };
 export const StickyTableWithMaxHeight = Template.bind({});
+StickyTableWithMaxHeight.storyName = 'Tableau sticky avec hauteur maximale';
 StickyTableWithMaxHeight.args = {
     maxHeight: '225',
     minWidth: '800',
@@ -143,6 +145,7 @@ StickyTableWithMaxHeight.parameters = {
     },
 };
 export const ZebraTableWithSorting = Template.bind({});
+ZebraTableWithSorting.storyName = 'Tableau zébré avec tri';
 ZebraTableWithSorting.args = {
     isZebra: true,
     innerHTML: `
@@ -185,6 +188,7 @@ ZebraTableWithSorting.parameters = {
     },
 };
 export const TableWithActionsAndTags = Template.bind({});
+TableWithActionsAndTags.storyName = 'Tableau avec actions et tags';
 TableWithActionsAndTags.args = {
     isZebra: true,
     innerHTML: `
@@ -331,6 +335,7 @@ TableWithActionsAndTags.parameters = {
     },
 };
 export const CompactTable = Template.bind({});
+CompactTable.storyName = 'Tableau compact';
 CompactTable.args = {
     isZebra: true,
     innerHTML: `
@@ -373,6 +378,7 @@ CompactTable.parameters = {
     },
 };
 export const LoadingWithSkeleton = Template.bind({});
+LoadingWithSkeleton.storyName = 'Tableau avec squelette de chargement';
 LoadingWithSkeleton.args = {
     isZebra: true,
     innerHTML: `
@@ -504,6 +510,7 @@ const TemplateContainer = args => {
     return container;
 };
 export const WithContainer = TemplateContainer.bind({});
+WithContainer.storyName = 'Tableau dans un conteneur';
 WithContainer.args = {
     innerHTML: `
     <spw-table is-sticky="true" is-zebra="true" max-width="1000" max-height="600">
@@ -587,6 +594,7 @@ WithContainer.parameters = {
     },
 };
 export const WithSidebar = TemplateContainer.bind({});
+WithSidebar.storyName = 'Tableau avec sidebar';
 WithSidebar.args = {
     innerHTML: `
     <spw-table-sidebar sidebar-title="Filtres de recherche" sidebar-icon="fa-filter">

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

@@ -239,6 +239,7 @@ const TemplateMultiLevel = args => {
     return element;
 };
 export const Default = TemplateDefault.bind({});
+Default.storyName = 'Onglets par défaut';
 Default.args = {
     disabled: true,
     bubble: true,
@@ -256,6 +257,7 @@ Cas d'usage : navigation entre différentes sections d'un formulaire, d'un profi
     },
 };
 export const Box = TemplateBox.bind({});
+Box.storyName = 'Onglets de type box';
 Box.args = {
     disabled: true,
     bubble: true,
@@ -274,6 +276,7 @@ Cas d'usage : interfaces nécessitant une meilleure distinction visuelle, dashbo
     },
 };
 export const MultiLevel = TemplateMultiLevel.bind({});
+MultiLevel.storyName = 'Onglets multi-niveaux';
 MultiLevel.args = {
     disabled: true,
     bubble: true,
@@ -322,7 +325,7 @@ const TemplateWithTagAndIcon = args => {
     return element;
 };
 export const WithTag = TemplateWithTag.bind({});
-WithTag.storyName = 'With Tags';
+WithTag.storyName = 'Onglets avec tags';
 WithTag.args = {
     defaultActiveTab: '1',
     tagText: 'Beta',
@@ -342,7 +345,7 @@ Cas d'usage : indiquer un statut (nouveau, erreur, alerte), afficher un compteur
     },
 };
 export const WithTagAndIcon = TemplateWithTagAndIcon.bind({});
-WithTagAndIcon.storyName = 'With Tags & Icons';
+WithTagAndIcon.storyName = 'Onglets avec tags et icônes';
 WithTagAndIcon.args = {
     defaultActiveTab: '1',
 };
@@ -388,7 +391,7 @@ const TemplateCentered = args => {
     return element;
 };
 export const Centered = TemplateCentered.bind({});
-Centered.storyName = 'Centered';
+Centered.storyName = 'Onglets centrés';
 Centered.args = {
     defaultActiveTab: '1',
 };

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

@@ -17,6 +17,11 @@ const meta = {
     tags: ['autodocs'],
     parameters: {
         docs: {
+            source: {
+                transform: (src) => {
+                    return src.replace(/^<div[^>]*>\n?\s*/i, '').replace(/\n?\s*<\/div>$/i, '');
+                },
+            },
             description: {
                 component: `
 
@@ -87,6 +92,8 @@ const TemplateIcon = args => {
     return element;
 };
 const TemplateLight = args => {
+    const wrapper = document.createElement('div');
+    wrapper.style.maxWidth = '400px';
     const element = document.createElement(elementTag);
     const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
     const masterProps = controls.__realProps || Object.keys(controls);
@@ -99,9 +106,12 @@ const TemplateLight = args => {
         }
     });
     element.innerHTML = htmlContentLight();
-    return element;
+    wrapper.appendChild(element);
+    return wrapper;
 };
 const TemplateBig = args => {
+    const wrapper = document.createElement('div');
+    wrapper.style.maxWidth = '400px';
     const element = document.createElement(elementTag);
     const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
     const masterProps = controls.__realProps || Object.keys(controls);
@@ -114,15 +124,18 @@ const TemplateBig = args => {
         }
     });
     element.innerHTML = htmlContentBig();
-    return element;
+    wrapper.appendChild(element);
+    return wrapper;
 };
 export const Icon = TemplateIcon.bind({});
+Icon.storyName = 'Tuile avec icône';
 Icon.args = {
     variant: 'icon',
     href: 'https://google.com',
     target: '_blank',
 };
 export const Light = TemplateLight.bind({});
+Light.storyName = 'Tuile avec image de fond';
 Light.args = {
     variant: 'light',
     href: 'https://google.com',
@@ -131,6 +144,7 @@ Light.args = {
     imageAlt: 'Image de tuile',
 };
 export const Big = TemplateBig.bind({});
+Big.storyName = 'Tuile plus grande avec image de fond';
 Big.args = {
     variant: 'big',
     href: 'https://google.com',

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

@@ -156,6 +156,7 @@ const TemplateWithLongText = args => {
     return element;
 };
 export const Default = TemplateDefault.bind({});
+Default.storyName = 'Timeline par défaut';
 Default.args = {};
 Default.parameters = {
     docs: {
@@ -165,6 +166,7 @@ Default.parameters = {
     },
 };
 export const WithLinks = TemplateWithLinks.bind({});
+WithLinks.storyName = 'Timeline avec liens';
 WithLinks.args = {};
 WithLinks.parameters = {
     docs: {
@@ -174,6 +176,7 @@ WithLinks.parameters = {
     },
 };
 export const WithVisibleItemsLimit = TemplateWithVisibleItems.bind({});
+WithVisibleItemsLimit.storyName = "Timeline avec limitation du nombre d'items visibles";
 WithVisibleItemsLimit.args = {
     visibleItems: 3,
     showMoreText: "Afficher plus d'événements",
@@ -186,6 +189,7 @@ WithVisibleItemsLimit.parameters = {
     },
 };
 export const WithLongText = TemplateWithLongText.bind({});
+WithLongText.storyName = 'Timeline avec textes longs';
 WithLongText.args = {
     visibleItems: 3,
     showMoreText: 'Voir tous les événements',

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

@@ -243,6 +243,7 @@ const TemplateSimple = () => {
     return wrapper;
 };
 export const FAQ = TemplateFAQ.bind({});
+FAQ.storyName = 'Table des matières par défaut avec barre de progression';
 FAQ.parameters = {
     docs: {
         description: {
@@ -251,6 +252,7 @@ FAQ.parameters = {
     },
 };
 export const Simple = TemplateSimple.bind({});
+Simple.storyName = 'Table des matières simple sans barre de progression';
 Simple.parameters = {
     docs: {
         description: {

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

@@ -95,6 +95,7 @@ const TemplateDefault = createTemplate(htmlContentDefault);
 const TemplateCustomLogo = createTemplate(htmlContentCustomLogo);
 const TemplateMinimal = createTemplate(htmlContentMinimal);
 export const Default = TemplateDefault.bind({});
+Default.storyName = 'Topbar par défaut';
 Default.args = {};
 Default.parameters = {
     docs: {
@@ -113,7 +114,7 @@ La topbar ajoute automatiquement la classe "has-topbar" au body, permettant aux
     },
 };
 export const CustomLogo = TemplateCustomLogo.bind({});
-CustomLogo.storyName = 'Logo personnalisé';
+CustomLogo.storyName = 'Topbar avec logo personnalisé';
 CustomLogo.args = {
     hasWallonieLogo: false,
 };
@@ -133,7 +134,7 @@ Cas d'usage : portails métier ou applications spécialisées nécessitant une i
     },
 };
 export const Minimal = TemplateMinimal.bind({});
-Minimal.storyName = 'Minimal';
+Minimal.storyName = 'Topbar minimaliste';
 Minimal.args = {};
 Minimal.parameters = {
     docs: {

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

@@ -145,6 +145,7 @@ const TemplateWithWarning = args => {
     return element;
 };
 export const Horizontal = TemplateHorizontal.bind({});
+Horizontal.storyName = 'Wizard horizontal';
 Horizontal.args = {
     currentStep: 2,
     variant: 'horizontal',
@@ -157,6 +158,7 @@ Horizontal.parameters = {
     },
 };
 export const Vertical = TemplateVertical.bind({});
+Vertical.storyName = 'Wizard vertical';
 Vertical.args = {
     currentStep: 2,
     variant: 'vertical',
@@ -169,6 +171,7 @@ Vertical.parameters = {
     },
 };
 export const WithIcons = TemplateWithIcons.bind({});
+WithIcons.storyName = 'Wizard avec icônes personnalisées';
 WithIcons.args = {
     currentStep: 3,
     variant: 'horizontal',
@@ -181,6 +184,7 @@ WithIcons.parameters = {
     },
 };
 export const WithError = TemplateWithStates.bind({});
+WithError.storyName = 'Wizard avec étape en erreur';
 WithError.args = {
     currentStep: 3,
     variant: 'horizontal',
@@ -193,6 +197,7 @@ WithError.parameters = {
     },
 };
 export const WithWarning = TemplateWithWarning.bind({});
+WithWarning.storyName = 'Wizard avec étape en warning';
 WithWarning.args = {
     currentStep: 2,
     variant: 'horizontal',