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

package/dist/collection/stories/components/spw-toast/spw-toast.stories.js

@@ -171,6 +171,7 @@ export const Default = args => {
     // wrapper.appendChild(button);
     return button;
 };
+Default.storyName = 'Toast par défaut';
 Default.args = {
     heading: 'Titre du toast',
     message: 'Ceci est le message du toast.',
@@ -180,6 +181,7 @@ Default.args = {
 };
 // --- INFO ---
 export const Info = Template.bind({});
+Info.storyName = "Toast d'information";
 Info.args = {
     heading: 'Information',
     message: 'La liste des demandes a été mise à jour.',
@@ -187,6 +189,7 @@ Info.args = {
 };
 // --- SUCCÈS ---
 export const Succes = Template.bind({});
+Succes.storyName = 'Toast de succès';
 Succes.args = {
     heading: 'Enregistrement réussi',
     message: 'Vos modifications ont bien été sauvegardées.',
@@ -194,6 +197,7 @@ Succes.args = {
 };
 // --- AVERTISSEMENT ---
 export const Avertissement = Template.bind({});
+Avertissement.storyName = "Toast d'avertissement";
 Avertissement.args = {
     heading: 'Attention',
     message: 'Cette action modifiera les données de tous les utilisateurs.',
@@ -201,6 +205,7 @@ Avertissement.args = {
 };
 // --- ALERTE ---
 export const Alerte = Template.bind({});
+Alerte.storyName = "Toast d'alerte";
 Alerte.args = {
     heading: 'Erreur',
     message: 'Une erreur est survenue. Veuillez réessayer.',
@@ -208,6 +213,7 @@ Alerte.args = {
 };
 // --- PERMANENT ---
 export const Permanent = Template.bind({});
+Permanent.storyName = 'Toast permanent';
 Permanent.args = {
     heading: 'Action requise',
     message: 'Veuillez confirmer votre adresse e-mail pour continuer.',
@@ -237,8 +243,10 @@ export const AvecLien = () => {
     // wrapper.appendChild(button);
     return button;
 };
+AvecLien.storyName = 'Toast avec lien';
 // --- SANS FERMETURE AUTOMATIQUE NI BOUTON ---
 export const SansBoutonFermeture = Template.bind({});
+SansBoutonFermeture.storyName = 'Toast sans bouton de fermeture';
 SansBoutonFermeture.args = {
     heading: 'Chargement en cours…',
     message: 'Veuillez patienter pendant le traitement de votre demande.',

package/dist/collection/stories/components/spw-tooltip/spw-tooltip.stories.js

@@ -67,8 +67,128 @@ const Template = args => {
     return element;
 };
 export const Default = Template.bind({});
+Default.storyName = 'Infobulle par défaut';
 Default.args = {
     tooltipTitle: 'Mon titre',
     tooltipText: 'Mon texte',
     label: 'Mon élément déclencheur',
 };
+Default.parameters = {
+    docs: {
+        description: {
+            story: `Infobulle de base au survol d'un élément déclencheur. Affiche un titre et un texte descriptif. Cas d'usage : aide contextuelle, explication d'un terme ou d'une action.`,
+        },
+    },
+};
+export const DirectionBottom = Template.bind({});
+DirectionBottom.storyName = 'Infobulle en bas';
+DirectionBottom.args = {
+    tooltipTitle: 'Information',
+    tooltipText: "L'infobulle s'affiche sous l'élément.",
+    direction: 'bottom',
+    label: 'Survolez-moi',
+};
+DirectionBottom.parameters = {
+    docs: {
+        description: {
+            story: `Infobulle positionnée en dessous de l'élément déclencheur. Cas d'usage : éléments en haut de page où l'infobulle vers le haut sortirait du viewport.`,
+        },
+    },
+};
+export const DirectionLeft = Template.bind({});
+DirectionLeft.storyName = 'Infobulle à gauche';
+DirectionLeft.args = {
+    tooltipTitle: 'Information',
+    tooltipText: "L'infobulle s'affiche à gauche de l'élément.",
+    direction: 'left',
+    label: 'Survolez-moi',
+};
+DirectionLeft.parameters = {
+    docs: {
+        description: {
+            story: `Infobulle positionnée à gauche de l'élément déclencheur. Cas d'usage : éléments en bord droit d'interface, tableaux avec actions à droite.`,
+        },
+    },
+};
+export const DirectionRight = Template.bind({});
+DirectionRight.storyName = 'Infobulle à droite';
+DirectionRight.args = {
+    tooltipTitle: 'Information',
+    tooltipText: "L'infobulle s'affiche à droite de l'élément.",
+    direction: 'right',
+    label: 'Survolez-moi',
+};
+DirectionRight.parameters = {
+    docs: {
+        description: {
+            story: `Infobulle positionnée à droite de l'élément déclencheur. Cas d'usage : éléments en bord gauche d'interface, icônes dans une sidebar.`,
+        },
+    },
+};
+export const TextOnly = Template.bind({});
+TextOnly.storyName = 'Infobulle sans titre';
+TextOnly.args = {
+    tooltipText: 'Explication courte sans titre.',
+    label: 'Survolez-moi',
+};
+TextOnly.parameters = {
+    docs: {
+        description: {
+            story: `Infobulle avec texte uniquement, sans titre. Cas d'usage : messages d'aide courts, descriptions d'icônes, libellés de boutons icône.`,
+        },
+    },
+};
+export const OnIcon = () => {
+    const tooltip = document.createElement('spw-tooltip');
+    tooltip.setAttribute('tooltip-title', 'Aide à la saisie');
+    tooltip.setAttribute('tooltip-text', 'Saisissez votre numéro de registre national au format XX.XX.XX-XXX.XX.');
+    tooltip.setAttribute('direction', 'top');
+    const icon = document.createElement('spw-icon');
+    icon.setAttribute('icon', 'fa-circle-info');
+    tooltip.appendChild(icon);
+    return tooltip;
+};
+OnIcon.storyName = 'Infobulle sur icône';
+OnIcon.parameters = {
+    docs: {
+        description: {
+            story: `Infobulle déclenchée au survol d'une icône d'information. Cas d'usage : aide contextuelle sur les labels de formulaire, explications de champs techniques.`,
+        },
+    },
+};
+export const OnButton = () => {
+    const tooltip = document.createElement('spw-tooltip');
+    tooltip.setAttribute('tooltip-title', 'Supprimer');
+    tooltip.setAttribute('tooltip-text', 'Cette action est irréversible.');
+    tooltip.setAttribute('direction', 'top');
+    tooltip.setAttribute('cursor', 'pointer');
+    const button = document.createElement('spw-button');
+    button.setAttribute('variant', 'secondary');
+    button.setAttribute('icon-left', 'fa-trash');
+    button.textContent = 'Supprimer';
+    tooltip.appendChild(button);
+    return tooltip;
+};
+OnButton.storyName = 'Infobulle sur bouton';
+OnButton.parameters = {
+    docs: {
+        description: {
+            story: `Infobulle sur un bouton d'action pour avertir l'utilisateur des conséquences. Cas d'usage : actions destructives, confirmations d'intention, boutons dont le libellé seul est insuffisant.`,
+        },
+    },
+};
+export const WithMaxWidth = Template.bind({});
+WithMaxWidth.storyName = 'Infobulle avec largeur maximale';
+WithMaxWidth.args = {
+    tooltipTitle: 'Explication détaillée',
+    tooltipText: "Ce champ attend une valeur numérique comprise entre 1 et 100. Les valeurs décimales sont acceptées avec un point comme séparateur. Exemple : 42.5.",
+    maxWidth: 300,
+    label: 'Survolez-moi',
+};
+WithMaxWidth.parameters = {
+    docs: {
+        description: {
+            story: `Infobulle avec largeur maximale définie pour les contenus longs. Cas d'usage : descriptions détaillées, instructions de saisie complètes, aides contextuelles riches.`,
+        },
+    },
+};

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

@@ -96,6 +96,7 @@ const Template = args => {
     return element;
 };
 export const Default = Template.bind({});
+Default.storyName = 'Accordéon par défaut';
 Default.args = {
     icon: 'fa-book',
     tag: 'h3',
@@ -139,6 +140,7 @@ const TemplateSeparated = args => {
     return element;
 };
 export const Separated = TemplateSeparated.bind({});
+Separated.storyName = 'Accordéon avec items séparés';
 Separated.args = {
     icon: 'fa-book',
     tag: 'h3',
@@ -194,6 +196,7 @@ const TemplateSeparatedWithSlotRight = args => {
     return element;
 };
 export const SeparatedAvecSlotRight = TemplateSeparatedWithSlotRight.bind({});
+SeparatedAvecSlotRight.storyName = 'Accordéon séparé avec étiquettes';
 SeparatedAvecSlotRight.args = {
     icon: 'fa-folder',
     tag: 'h3',

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

@@ -209,9 +209,9 @@ function getHtmlContent(variant, slotArgs) {
 }
 const Template = args => {
     const wrapper = document.createElement('div');
-    wrapper.style.maxWidth = '2000px';
-    const element = document.createElement(elementTag);
     const variant = args.variant || 'news';
+    wrapper.style.maxWidth = variant === 'highlighted' ? '800px' : '400px';
+    const element = document.createElement(elementTag);
     const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
     const masterProps = controls.__realProps || Object.keys(controls);
     Object.entries(args).forEach(([key, val]) => {
@@ -228,6 +228,7 @@ const Template = args => {
     return wrapper;
 };
 export const Default = Template.bind({});
+Default.storyName = 'Carte par défaut';
 Default.args = {
     fullHeight: true,
     href: 'http://google.com',
@@ -241,8 +242,10 @@ Default.args = {
     excerpt: "L'actualité nous invite à nous engager, à devenir chaque jour un peu plus \"consom'acteur\". Comment ? L'Agence wallonne pour la Promotion d'une Agriculture de Qualité (APAQ-W) nous propose quelques pistes pour privilégier le local.",
 };
 export const WithoutImage = Template.bind({});
+WithoutImage.storyName = 'Carte sans image';
 WithoutImage.args = Object.assign(Object.assign({}, Default.args), { imgSrc: '' });
 export const Light = Template.bind({});
+Light.storyName = 'Carte light';
 Light.args = {
     fullHeight: true,
     href: 'http://google.com',
@@ -253,6 +256,7 @@ Light.args = {
     contentDate: '',
 };
 export const Vertical = Template.bind({});
+Vertical.storyName = 'Carte publication';
 Vertical.args = {
     variant: 'vertical',
     fullHeight: true,
@@ -267,6 +271,7 @@ Vertical.args = {
     excerpt: "L'actualité nous invite à nous engager, à devenir chaque jour un peu plus \"consom'acteur\". Comment ? L'Agence wallonne pour la Promotion d'une Agriculture de Qualité (APAQ-W) nous propose quelques pistes pour privilégier le local.",
 };
 export const Event = Template.bind({});
+Event.storyName = 'Carte événement';
 Event.args = {
     variant: 'event',
     fullHeight: true,
@@ -281,6 +286,7 @@ Event.args = {
     title: 'Comment soutenir nos agricultrices et agriculteurs ?',
 };
 export const Video = Template.bind({});
+Video.storyName = 'Carte vidéo';
 Video.args = {
     variant: 'video',
     fullHeight: true,
@@ -293,6 +299,7 @@ Video.args = {
     title: 'Comment soutenir nos agricultrices et agriculteurs ?',
 };
 export const Mini = Template.bind({});
+Mini.storyName = 'Carte compacte (sidebar)';
 Mini.args = {
     variant: 'sidebar',
     fullHeight: true,
@@ -304,6 +311,7 @@ Mini.args = {
     title: 'Comment soutenir nos agricultrices et agriculteurs ?',
 };
 export const People = Template.bind({});
+People.storyName = 'Carte profil';
 People.args = {
     variant: 'people',
     fullHeight: true,
@@ -317,6 +325,7 @@ People.args = {
     imgSrc: 'https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?q=80&w=717&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
 };
 export const PeopleWithAffiliates = Template.bind({});
+PeopleWithAffiliates.storyName = 'Carte profil avec enfants';
 PeopleWithAffiliates.args = {
     variant: 'people',
     withAffiliates: true,
@@ -331,6 +340,7 @@ PeopleWithAffiliates.args = {
     imgSrc: 'https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?q=80&w=717&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
 };
 export const Highlighted = Template.bind({});
+Highlighted.storyName = 'Carte mise en avant';
 Highlighted.args = {
     variant: 'highlighted',
     fullHeight: true,
@@ -433,6 +443,7 @@ export const RoundedPicture = () => {
   `;
     return wrapper;
 };
+RoundedPicture.storyName = 'Carte avec image arrondie';
 RoundedPicture.parameters = {
     docs: {
         description: {