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

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