@spw-ds/spw-stencil-library 1.12.2 → 1.14.0

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

@@ -8,7 +8,7 @@ catch (error) {
 }
 import { withComponentControls, extractArgTypes, toKebabCase } from "../../../utils/utils";
 const elementTag = 'spw-footer';
-const subComponentTags = ['spw-footer-bottom', 'spw-footer-content', 'spw-footer-content-col', 'spw-footer-link'];
+const subComponentTags = ['spw-footer-bottom', 'spw-footer-content', 'spw-footer-content-col', 'spw-footer-link', 'spw-socials'];
 const argTypes = Object.assign(Object.assign({}, withComponentControls(componentsData, { tag: elementTag })), extractArgTypes(componentsData, subComponentTags));
 const meta = {
     title: 'Organismes/Pied de page (footer)',
@@ -25,18 +25,20 @@ Le composant Footer est la section inférieure récurrente d'une page web. Il co
 
 ## Structure
 
-Le composant se compose de quatre sous-éléments :
+Le composant se compose de plusieurs sous-éléments :
 - **spw-footer** : Conteneur principal avec gestion des colonnes responsive
 - **spw-footer-content** : Section supérieure avec colonnes de liens
 - **spw-footer-content-col** : Colonne individuelle avec titre
 - **spw-footer-link** : Lien de navigation dans le footer
 - **spw-footer-bottom** : Barre inférieure avec mentions légales
 
+Le composant **spw-socials** peut être associé au footer en le plaçant **structurellement en dehors** de spw-footer, juste avant lui. Cela permet de conserver une séparation claire entre le bandeau de réseaux sociaux et le footer proprement dit.
+
 ## Fonctionnalités
 
 - Configuration dynamique du nombre de colonnes par breakpoint
 - Support du Shadow DOM pour l'encapsulation
-- Deux versions : complète avec sections ou légère (bottom only)
+- Trois versions : complète avec sections, légère (bottom only), ou avec bandeau de réseaux sociaux
 
 [<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/91a10d-pied-de-page-footer)
         `,
@@ -45,6 +47,17 @@ Le composant se compose de quatre sous-éléments :
     },
 };
 export default meta;
+function htmlSocials(slotArgs) {
+    return /* HTML */ `
+    <spw-socials main-title="${slotArgs.socialsMainTitle}">
+      <a target="_blank" aria-label="Facebook" title="Facebook" href="#"><spw-icon variant="fa-brands" icon="fa-facebook"></spw-icon></a>
+      <a target="_blank" aria-label="Instagram" title="Instagram" href="#"><spw-icon variant="fa-brands" icon="fa-instagram"></spw-icon></a>
+      <a target="_blank" aria-label="Twitter" title="Twitter" href="#"><spw-icon variant="fa-brands" icon="fa-x-twitter"></spw-icon></a>
+      <a target="_blank" aria-label="YouTube" title="YouTube" href="#"><spw-icon variant="fa-brands" icon="fa-youtube"></spw-icon></a>
+      <a target="_blank" aria-label="LinkedIn" title="LinkedIn" href="#"><spw-icon variant="fa-brands" icon="fa-linkedin-in"></spw-icon></a>
+    </spw-socials>
+  `;
+}
 function htmlContent(slotArgs) {
     return /* HTML */ `
     <spw-footer-content>
@@ -167,3 +180,44 @@ Idéal pour les pages simples, pages de connexion ou applications où un footer
         },
     },
 };
+const TemplateWithSocials = args => {
+    const wrapper = document.createElement('div');
+    const footer = 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)) {
+            footer.setAttribute(toKebabCase(key), val);
+        }
+        else if (key.startsWith('on')) {
+            footer.addEventListener(key.substring(2).toLowerCase(), val);
+        }
+    });
+    footer.innerHTML = htmlContent(args);
+    wrapper.innerHTML = htmlSocials(args);
+    wrapper.appendChild(footer);
+    return wrapper;
+};
+export const WithSocials = TemplateWithSocials.bind({});
+WithSocials.args = {
+    socialsMainTitle: 'Restez connecté',
+    colTitle1: 'Accès rapides',
+    colTitle2: 'Liens utiles',
+    colTitle3: 'Sites généraux de Wallonie',
+    colTitle4: 'Nous contacter',
+    siteTitle: 'Titre du site',
+    colsDesktop: 4,
+    colsTablet: 2,
+    colsMobile: 1,
+};
+WithSocials.parameters = {
+    docs: {
+        description: {
+            story: `
+Footer complet précédé du bandeau de réseaux sociaux. Le composant spw-socials est placé structurellement **en dehors** de spw-footer, juste avant lui.
+
+Cas d'usage typique : footer d'un site institutionnel avec présence sur les réseaux sociaux mise en avant au-dessus du footer principal.
+      `,
+        },
+    },
+};

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

@@ -373,3 +373,23 @@ FeaturedNaturalSize.parameters = {
         },
     },
 };
+export const AvecCopyrightTooltip = TemplateFeatured.bind({});
+AvecCopyrightTooltip.args = {
+    variant: 'featured',
+    imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
+    imageAlt: 'Image featured',
+    surface: 'light',
+    featuredRatio: '16/9',
+    copyrightText: 'Unsplash',
+    copyrightHref: 'https://unsplash.com',
+    tooltipCopyrightTitle: 'Crédit photo',
+    tooltipCopyrightText: 'Photo par John Doe via Unsplash',
+    tooltipCopyrightMaxWidth: '200',
+};
+AvecCopyrightTooltip.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-list/spw-list.stories.js

@@ -256,3 +256,94 @@ AvecIcone.parameters = {
         },
     },
 };
+export const ListeFichiers = () => {
+    const element = document.createElement(elementTag);
+    element.setAttribute('gap', 'large');
+    element.style.maxWidth = '768px';
+    element.style.width = '100%';
+    element.innerHTML = /* HTML */ `
+    <spw-list-item icon="" line-clamp="1">
+      <spw-list-title>Formulaire urbanisme</spw-list-title>
+      <spw-group slot="buttons" orientation="horizontal" is-full-width>
+        <spw-button is-full-width-mobile variant="primary" icon-position="right" icon="fa-arrow-up-right-from-square" size="small">Remplir en ligne</spw-button>
+        <spw-dropdown content-width="120" direction="bottom" has-padding="false">
+          <spw-button is-full-width-mobile variant="secondary" icon-position="right" icon="fa-chevron-down" size="small">Télécharger</spw-button>
+          <div slot="dropdownContent">
+            <spw-dropdown-container><spw-link icon="fa-download" icon-position="left" download>PDF</spw-link></spw-dropdown-container>
+            <spw-separator></spw-separator>
+            <spw-dropdown-container><spw-link icon="fa-download" icon-position="left" download>DOC</spw-link></spw-dropdown-container>
+          </div>
+        </spw-dropdown>
+      </spw-group>
+    </spw-list-item>
+    <spw-list-item icon="">
+      <spw-list-title>Formulaire urbanisme</spw-list-title>
+      <spw-group slot="buttons" orientation="horizontal" is-full-width>
+        <spw-button is-full-width-mobile variant="primary" icon-position="right" icon="fa-arrow-up-right-from-square" size="small">Remplir en ligne</spw-button>
+        <spw-button download is-full-width-mobile variant="secondary" size="small">Télécharger (PDF)</spw-button>
+      </spw-group>
+    </spw-list-item>
+    <spw-list-item icon="">
+      <spw-list-title>Formulaire urbanisme</spw-list-title>
+      <spw-group slot="buttons" orientation="horizontal" is-full-width>
+        <spw-button is-full-width-mobile variant="primary" icon-position="right" icon="fa-arrow-up-right-from-square" size="small">Remplir en ligne</spw-button>
+      </spw-group>
+    </spw-list-item>
+    <spw-list-item icon="">
+      <spw-list-title>Formulaire urbanisme</spw-list-title>
+      <spw-group slot="buttons" orientation="horizontal" is-full-width>
+        <spw-button download is-full-width-mobile variant="primary" icon-position="left" icon="fa-download" size="small">Télécharger</spw-button>
+      </spw-group>
+    </spw-list-item>
+  `;
+    return element;
+};
+ListeFichiers.parameters = {
+    docs: {
+        description: {
+            story: `
+Liste de fichiers avec boutons d'action. Illustre les différentes combinaisons possibles pour un item de formulaire :
+- Item avec bouton primaire (remplir en ligne) et dropdown de téléchargement multi-formats (PDF, DOC)
+- Item avec bouton primaire (remplir en ligne) et bouton secondaire de téléchargement direct (PDF)
+- Item avec bouton primaire uniquement (formulaire en ligne seulement)
+- Item avec bouton de téléchargement unique
+
+Cas d'usage : liste de formulaires administratifs combinant accès en ligne et téléchargement de documents.
+      `,
+        },
+    },
+};
+export const ListeFichiersLight = () => {
+    const wrapper = document.createElement('div');
+    wrapper.innerHTML = /* HTML */ `
+    <h3 class="spw-ds-typography-heading-03 mb-3">Formulaires à télécharger</h3>
+    <spw-group type="links" orientation="vertical" alignment="left">
+      <spw-link download variant="tertiary" icon-position="left" icon="fa-download">Mon fichier à télécharger</spw-link>
+      <spw-link download variant="tertiary" icon-position="left" icon="fa-download">Mon fichier à télécharger</spw-link>
+      <spw-link download variant="tertiary" icon-position="left" icon="fa-download">Mon fichier à télécharger</spw-link>
+    </spw-group>
+
+    <h3 class="spw-ds-typography-heading-03 mb-3 mt-4">Formulaires en ligne</h3>
+    <spw-group type="links" orientation="vertical" alignment="left">
+      <spw-link target="_blank" variant="tertiary" icon-position="right" icon="fa-arrow-up-right-from-square">Mon lien externe</spw-link>
+      <spw-link target="_blank" variant="tertiary" icon-position="right" icon="fa-arrow-up-right-from-square">Mon lien externe</spw-link>
+      <spw-link target="_blank" variant="tertiary" icon-position="right" icon="fa-arrow-up-right-from-square">Mon lien externe</spw-link>
+    </spw-group>
+  `;
+    return wrapper;
+};
+ListeFichiersLight.parameters = {
+    docs: {
+        description: {
+            story: `
+Version light pour lister des fichiers ou liens sans le composant spw-list. Utilise spw-group avec type="links" et spw-link en variante tertiaire.
+
+Deux déclinaisons :
+- **Formulaires à télécharger** : icône fa-download à gauche, attribut download
+- **Formulaires en ligne** : icône fa-arrow-up-right-from-square à droite, target="_blank"
+
+Cas d'usage : liste simple de liens sans besoin de mise en valeur structurée, zones secondaires d'une page, listes compactes dans des colonnes ou encarts.
+      `,
+        },
+    },
+};

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

@@ -11,7 +11,7 @@ const elementTag = 'spw-wizard';
 const subComponentTags = ['spw-wizard-item'];
 const argTypes = Object.assign(Object.assign({}, withComponentControls(componentsData, { tag: elementTag })), extractArgTypes(componentsData, subComponentTags));
 const meta = {
-    title: 'Organismes/Wizard',
+    title: 'Organismes/Barre de progression (stepper, wizard)',
     component: elementTag,
     argTypes,
     tags: ['autodocs'],