@spw-ds/spw-stencil-library 1.13.0 → 1.14.1

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)',
@@ -19,24 +19,25 @@ const meta = {
         docs: {
             description: {
                 component: `
-<strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
 
 Le composant Footer est la section inférieure récurrente d'une page web. Il contient généralement des liens de navigation secondaire, des informations de contact, des mentions légales et le copyright du site.
 
 ## 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 +46,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 +179,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-grid/spw-grid.stories.js

@@ -19,7 +19,6 @@ const meta = {
         docs: {
             description: {
                 component: `
-<strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
 
 Le composant Grid est un système de grille CSS avancé permettant d'organiser des éléments en colonnes et lignes responsives. Il supporte les spans (étendues) pour créer des mises en page complexes et dynamiques.
 

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

@@ -18,7 +18,6 @@ const meta = {
         docs: {
             description: {
                 component: `
-<strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
 
 Le composant Groupe permet d'organiser plusieurs éléments interactifs (boutons, checkboxes, radios) en une unité visuelle cohérente. Il facilite la gestion d'actions connexes et améliore l'expérience utilisateur.
 

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

@@ -19,7 +19,6 @@ const meta = {
         docs: {
             description: {
                 component: `
-<strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
 
 Le composant Header est la section supérieure d'une page web. Il contient le logo, la navigation principale, la recherche, le sélecteur de langue et le sélecteur de persona. C'est un élément crucial pour l'orientation et l'accessibilité du site.
 

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

@@ -19,7 +19,6 @@ const meta = {
         docs: {
             description: {
                 component: `
-<strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
 
 Le composant Hero Banner crée un bandeau visuel impactant en haut de page pour capter l'attention et mettre en avant un message clé, un appel à l'action ou du contenu principal. Il combine image, texte et actions de manière équilibrée.
 

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

@@ -19,7 +19,6 @@ const meta = {
         docs: {
             description: {
                 component: `
-<strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
 
 Le composant Lightbox est une visionneuse d'images avec galerie, navigation, miniatures, légendes en superposition et API programmatique.
 

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

@@ -19,7 +19,6 @@ const meta = {
         docs: {
             description: {
                 component: `
-<strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
 
 Le composant List organise et présente des informations de manière structurée et facilement lisible. Il permet d'afficher des éléments avec titre, description, catégorie et métadonnées dans un format cohérent.
 

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

@@ -18,7 +18,6 @@ const meta = {
         docs: {
             description: {
                 component: `
-<strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
 
 Le composant Message affiche des notifications ou des informations importantes à l'utilisateur de manière contextuelle. Il permet de communiquer des messages de succès, d'alerte, d'information ou d'avertissement.
 

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

@@ -19,7 +19,6 @@ const meta = {
         docs: {
             description: {
                 component: `
-<strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
 
 Le composant Modal affiche une fenêtre superposée qui capte l'attention de l'utilisateur pour afficher du contenu ou des actions importantes. Il masque temporairement le reste de l'interface et nécessite une interaction avant de continuer.
 

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

@@ -19,7 +19,6 @@ const meta = {
         docs: {
             description: {
                 component: `
-<strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
 
 Le composant Mosaic permet d'afficher une grille d'éléments sous la forme d'un masonry (mise en page dynamique type Pinterest). Il s'adapte automatiquement à la hauteur variable des contenus et offre une configuration responsive.
 

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

@@ -19,7 +19,6 @@ const meta = {
         docs: {
             description: {
                 component: `
-<strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
 
 Le composant Sidebar est un panneau latéral rétractable pour la navigation principale ou les actions contextuelles. Idéal pour les back-offices et applications web complexes nécessitant une navigation permanente et accessible.
 

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

@@ -19,7 +19,6 @@ const meta = {
         docs: {
             description: {
                 component: `
-<strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
 
 Le composant Slider (carousel) permet d'afficher un enchaînement d'éléments défilants. Idéal pour mettre en avant plusieurs contenus importants dans un espace limité avec navigation fluide entre les items.
 

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

@@ -19,7 +19,6 @@ const meta = {
         docs: {
             description: {
                 component: `
-<strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
 
 Le composant Tableau permet d'afficher et d'organiser efficacement de grandes quantités de données structurées. Il offre des fonctionnalités avancées de tri, filtrage et pagination pour faciliter la consultation et l'analyse des informations.
 

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

@@ -19,7 +19,6 @@ const meta = {
         docs: {
             description: {
                 component: `
-<strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
 
 Les onglets sont utilisés pour organiser le contenu associé dans une interface. Ils permettent de naviguer entre différentes sections de contenu sans quitter la page, en affichant une seule section à la fois.
 

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

@@ -19,7 +19,6 @@ const meta = {
         docs: {
             description: {
                 component: `
-<strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
 
 Le composant Tile est un bloc visuel cliquable permettant aux utilisateurs de naviguer vers des pages ou de sélectionner des options. Il offre trois variantes adaptées à différents contextes d'utilisation.
 

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

@@ -19,7 +19,6 @@ const meta = {
         docs: {
             description: {
                 component: `
-<strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
 
 Le composant Timeline affiche une liste d'événements ou d'étapes de manière chronologique. Contrairement au wizard, il s'agit d'une représentation purement visuelle sans logique de navigation.
 

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

@@ -19,7 +19,6 @@ const meta = {
         docs: {
             description: {
                 component: `
-<strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
 
 Le composant Table des matières / Table of contents (TOC) génère automatiquement une table des matières interactive basée sur les titres (h2-h6) présents dans le contenu. Il permet une navigation fluide dans la page avec suivi de progression visuel.
 

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

@@ -19,7 +19,6 @@ const meta = {
         docs: {
             description: {
                 component: `
-<strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="orange">En cours</spw-tag>
 
 Le composant Topbar définit une barre supérieure horizontale pour les interfaces de back-office. Il affiche le logo, le titre de l'application et une baseline explicative, avec possibilité d'ajouter des éléments à droite.
 

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'],
@@ -19,7 +19,6 @@ const meta = {
         docs: {
             description: {
                 component: `
-<strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
 
 Le wizard (ou assistant) permet de guider l'utilisateur à travers un processus en plusieurs étapes. Il affiche la progression et permet de naviguer entre les étapes.