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

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

@@ -103,29 +103,34 @@ const VariantsTemplate = () => {
 };
 // Story par défaut
 export const Default = Template.bind({});
+Default.storyName = 'Squelette par défaut';
 Default.args = {
     blocks: 3,
 };
 // Story pour la variante texte
 export const VarianteTexte = Template.bind({});
+VarianteTexte.storyName = 'Squelette de texte';
 VarianteTexte.args = {
     blocks: 5,
     variant: 'text',
 };
 // Story pour la variante article
 export const VarianteArticle = Template.bind({});
+VarianteArticle.storyName = "Squelette d'article";
 VarianteArticle.args = {
     blocks: 6,
     variant: 'article',
 };
 // Story pour la variante layout
 export const VarianteLayout = Template.bind({});
+VarianteLayout.storyName = 'Squelette de mise en page';
 VarianteLayout.args = {
     blocks: 8,
     variant: 'layout',
 };
 // Story pour toutes les variantes ensemble
 export const VarianteMosaique = VariantsTemplate.bind({});
+VarianteMosaique.storyName = 'Squelette en mosaïque';
 Default.parameters = {
     docs: {
         description: {

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

@@ -73,42 +73,49 @@ const Template = args => {
     return element;
 };
 export const Default = Template.bind({});
+Default.storyName = 'Étiquette par défaut';
 Default.args = {
     variant: 'default',
     size: 'small',
     content: 'Mon tag',
 };
 export const Grey = Template.bind({});
+Grey.storyName = 'Étiquette grise';
 Grey.args = {
     variant: 'grey',
     size: 'small',
     content: 'Mon tag',
 };
 export const Blue = Template.bind({});
+Blue.storyName = 'Étiquette bleue';
 Blue.args = {
     variant: 'blue',
     size: 'small',
     content: 'Mon tag',
 };
 export const Green = Template.bind({});
+Green.storyName = 'Étiquette verte';
 Green.args = {
     variant: 'green',
     size: 'small',
     content: 'Mon tag',
 };
 export const Orange = Template.bind({});
+Orange.storyName = 'Étiquette orange';
 Orange.args = {
     variant: 'orange',
     size: 'small',
     content: 'Mon tag',
 };
 export const Red = Template.bind({});
+Red.storyName = 'Étiquette rouge';
 Red.args = {
     variant: 'red',
     size: 'small',
     content: 'Mon tag',
 };
 export const Purple = Template.bind({});
+Purple.storyName = 'Étiquette violette';
 Purple.args = {
     variant: 'purple',
     size: 'small',

package/dist/collection/stories/components/spw-text-field/spw-text-field.stories.js

@@ -77,6 +77,7 @@ const Template = args => {
     return element;
 };
 export const Default = Template.bind({});
+Default.storyName = 'Champ de texte par défaut';
 Default.args = {
     placeholder: 'Mon placeholder',
     label: 'Mon label',
@@ -96,6 +97,7 @@ Default.parameters = {
  * AVEC WARNING
  * ------------------------------------------------------------------------------------------------- */
 export const AvecWarning = Template.bind({});
+AvecWarning.storyName = 'Champ avec avertissement';
 AvecWarning.args = {
     placeholder: 'Entrez une valeur',
     label: 'Champ avec avertissement',
@@ -114,6 +116,7 @@ AvecWarning.parameters = {
  * AVEC ERREUR
  * ------------------------------------------------------------------------------------------------- */
 export const AvecErreur = Template.bind({});
+AvecErreur.storyName = 'Champ avec erreur';
 AvecErreur.args = {
     placeholder: 'Entrez votre email',
     label: 'Adresse email',
@@ -134,6 +137,7 @@ AvecErreur.parameters = {
  * AVEC MASQUE
  * ------------------------------------------------------------------------------------------------- */
 export const AvecMasque = Template.bind({});
+AvecMasque.storyName = 'Champ avec masque de saisie';
 AvecMasque.args = {
     placeholder: '__ /__ /____',
     label: 'Date de naissance',
@@ -153,6 +157,7 @@ AvecMasque.parameters = {
  * AVEC TOOLTIP
  * ------------------------------------------------------------------------------------------------- */
 export const AvecTooltip = Template.bind({});
+AvecTooltip.storyName = 'Champ avec infobulle';
 AvecTooltip.args = {
     placeholder: 'Entrez votre IBAN',
     label: 'Numéro IBAN',
@@ -175,6 +180,7 @@ AvecTooltip.parameters = {
  * TYPE NUMBER
  * ------------------------------------------------------------------------------------------------- */
 export const TypeNumber = Template.bind({});
+TypeNumber.storyName = 'Champ numérique';
 TypeNumber.args = {
     placeholder: '0',
     label: 'Quantité',
@@ -198,6 +204,7 @@ TypeNumber.parameters = {
  * TYPE NUMBER AVEC INDICATEUR
  * ------------------------------------------------------------------------------------------------- */
 export const TypeNumberAvecIndicateur = Template.bind({});
+TypeNumberAvecIndicateur.storyName = 'Champ numérique avec unité';
 TypeNumberAvecIndicateur.args = {
     placeholder: '0',
     label: 'Prix unitaire',
@@ -215,3 +222,26 @@ TypeNumberAvecIndicateur.parameters = {
         },
     },
 };
+export const HintExpandable = () => {
+    const element = document.createElement(elementTag);
+    element.setAttribute('label', 'Mon label');
+    element.setAttribute('name', 'text-field-hint-expandable');
+    element.setAttribute('hint', "Ceci est un texte d'aide.");
+    element.setAttribute('is-expandable', 'true');
+    element.setAttribute('expand-label', 'En savoir plus');
+    element.setAttribute('collapse-label', 'Réduire');
+    element.setAttribute('show-hint-icon', 'true');
+    const details = document.createElement('div');
+    details.setAttribute('slot', 'details');
+    details.innerHTML = '<div class="spw-ds-wysiwyg">Ceci est un message avec du <strong>texte en gras</strong>. Ainsi qu\'un <a href="#">lien</a></div>';
+    element.appendChild(details);
+    return element;
+};
+HintExpandable.storyName = 'Champ avec indice dépliable';
+HintExpandable.parameters = {
+    docs: {
+        description: {
+            story: `Champ avec hint dépliable. Le message d'aide est masqué par défaut et révélé au clic via isExpandable. Le slot details permet d'afficher du contenu riche (HTML) dans le panneau déplié. Cas d'usage : explications longues, règles de saisie détaillées, aides contextuelles facultatives.`,
+        },
+    },
+};

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

@@ -66,6 +66,7 @@ const Template = args => {
     return element;
 };
 export const Default = Template.bind({});
+Default.storyName = 'Zone de texte';
 Default.args = {
     placeholder: 'Mon placeholder',
     label: 'Mon label',
@@ -74,3 +75,124 @@ Default.args = {
     required: true,
     showHintIcon: false,
 };
+export const HintExpandable = () => {
+    const element = document.createElement('spw-textarea');
+    element.setAttribute('label', 'Mon label');
+    element.setAttribute('name', 'textarea-hint-expandable');
+    element.setAttribute('hint', "Ceci est un texte d'aide.");
+    element.setAttribute('is-expandable', 'true');
+    element.setAttribute('expand-label', 'En savoir plus');
+    element.setAttribute('collapse-label', 'Réduire');
+    element.setAttribute('show-hint-icon', 'true');
+    const details = document.createElement('div');
+    details.setAttribute('slot', 'details');
+    details.innerHTML = '<div class="spw-ds-wysiwyg">Ceci est un message avec du <strong>texte en gras</strong>. Ainsi qu\'un <a href="#">lien</a></div>';
+    element.appendChild(details);
+    return element;
+};
+HintExpandable.storyName = 'Zone de texte avec indice dépliable';
+HintExpandable.parameters = {
+    docs: {
+        description: {
+            story: `Zone de texte avec hint dépliable. Le message d'aide est masqué par défaut et révélé au clic via isExpandable. Le slot details permet d'afficher du contenu riche (HTML) dans le panneau déplié. Cas d'usage : explications longues, instructions de saisie détaillées, aides contextuelles facultatives.`,
+        },
+    },
+};
+export const WithError = Template.bind({});
+WithError.storyName = 'Zone de texte avec erreur';
+WithError.args = {
+    placeholder: 'Mon placeholder',
+    label: 'Mon label',
+    name: 'textarea-error',
+    error: 'Ce champ est obligatoire.',
+    required: true,
+};
+WithError.parameters = {
+    docs: {
+        description: {
+            story: `Zone de texte en état d'erreur. Le message d'erreur est affiché sous le champ avec un style visuel distinctif. Cas d'usage : validation de formulaire, champ obligatoire non rempli, format de saisie incorrect.`,
+        },
+    },
+};
+export const WithSuccess = Template.bind({});
+WithSuccess.storyName = 'Zone de texte avec succès';
+WithSuccess.args = {
+    placeholder: 'Mon placeholder',
+    label: 'Mon label',
+    name: 'textarea-success',
+    value: 'Mon texte valide.',
+    success: 'Le contenu est valide.',
+};
+WithSuccess.parameters = {
+    docs: {
+        description: {
+            story: `Zone de texte en état de succès. Un message de confirmation est affiché sous le champ. Cas d'usage : validation en temps réel, confirmation après vérification du contenu saisi.`,
+        },
+    },
+};
+export const WithWarning = Template.bind({});
+WithWarning.storyName = 'Zone de texte avec avertissement';
+WithWarning.args = {
+    placeholder: 'Mon placeholder',
+    label: 'Mon label',
+    name: 'textarea-warning',
+    value: 'Mon texte.',
+    warning: 'Ce contenu pourrait être incomplet.',
+};
+WithWarning.parameters = {
+    docs: {
+        description: {
+            story: `Zone de texte avec avertissement. Le message d'avertissement signale un problème non bloquant. Cas d'usage : contenu trop court, risque de perte de données, suggestion de compléter la saisie.`,
+        },
+    },
+};
+export const Disabled = Template.bind({});
+Disabled.storyName = 'Zone de texte désactivée';
+Disabled.args = {
+    placeholder: 'Mon placeholder',
+    label: 'Mon label',
+    name: 'textarea-disabled',
+    value: 'Contenu non modifiable.',
+    disabled: true,
+};
+Disabled.parameters = {
+    docs: {
+        description: {
+            story: `Zone de texte désactivée. Le champ est en lecture seule et non interactif. Cas d'usage : affichage d'un contenu figé, champ conditionnel non applicable, données non éditables dans un formulaire.`,
+        },
+    },
+};
+export const WithMaxLength = Template.bind({});
+WithMaxLength.storyName = 'Zone de texte avec limite de caractères';
+WithMaxLength.args = {
+    placeholder: 'Mon placeholder',
+    label: 'Mon label',
+    name: 'textarea-maxlength',
+    maxLength: 200,
+    hint: '200 caractères maximum.',
+    showHintIcon: false,
+};
+WithMaxLength.parameters = {
+    docs: {
+        description: {
+            story: `Zone de texte avec limite de caractères (maxLength). Cas d'usage : champs de description courts, bio utilisateur, résumés, commentaires limités.`,
+        },
+    },
+};
+export const WithTooltip = Template.bind({});
+WithTooltip.storyName = 'Zone de texte avec infobulle';
+WithTooltip.args = {
+    placeholder: 'Mon placeholder',
+    label: 'Mon label',
+    name: 'textarea-tooltip',
+    tooltipTitle: 'Aide à la saisie',
+    tooltipText: 'Décrivez votre demande de manière précise pour obtenir une réponse adaptée.',
+    tooltipDirection: 'top',
+};
+WithTooltip.parameters = {
+    docs: {
+        description: {
+            story: `Zone de texte avec infobulle (tooltip) sur le label. Fournit une aide contextuelle sans encombrer l'interface. Cas d'usage : champs dont le sens n'est pas immédiatement évident, consignes de saisie complémentaires.`,
+        },
+    },
+};

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