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

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

@@ -22,6 +22,8 @@ const meta = {
 
 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.
 
+[<spw-link icon="fa-arrow-up-right-from-square" icon-position="right">Voir la documentation sur Zeroheight</spw-link>](https://zeroheight.com/2310c7a1e/p/78fef5-en-tete-de-site-header)
+
 ## Structure
 
 Le composant se compose de plusieurs sous-éléments :
@@ -34,7 +36,13 @@ Le composant se compose de plusieurs sous-éléments :
 
 ## Slots
 
-- Support des slots logo, logo-mobile, top-left, right, search
+- **logo** : Logo desktop (remplace le logo Wallonie par défaut)
+- **logo-mobile** : Logo mobile
+- **top-left** : Zone gauche de la barre supérieure (ex: sélecteur de persona)
+- **right** : Zone droite de la barre desktop, à côté de la recherche (ex: sélecteur de langue)
+- **search** : Contenu de l'overlay de recherche
+- **user-info** : Espace utilisateur affiché en desktop, à droite de la barre principale
+- **user-info-mobile** : Espace utilisateur affiché en mobile, à côté du bouton hamburger. Masqué automatiquement quand la navigation ou la recherche est ouverte
 
 ## Fonctionnalités
 
@@ -45,7 +53,43 @@ Le composant se compose de plusieurs sous-éléments :
 - Gestion automatique des états actifs
 - Accessibilité complète (ARIA, navigation clavier)
 
-[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/78fef5-en-tete-de-site-header)
+## Tracking Matomo
+
+**navigation_menu_click** est émis lors d'un click sur un élément du menu de navigation principal.
+
+<details>
+<summary style="font-size: 12px;">Voir le code de tracking</summary>
+
+\`\`\`javascript
+// default Google dataLayer format adapted for Matomo
+
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+    'event': 'navigation_menu_click',
+    // default parameter for Matomo
+    'event_category':  'Link clicks',
+    'event_action':  'Navigation menu',
+    'event_name':  'Gérer mon profil',
+    'event_value': 'https://monespace.wallonie.be/me/profile',
+
+    // parameters giving context & reusable for other button or link clicks
+    'link_text':   'Gérer mon profil',
+    'link_url':  'https://monespace.wallonie.be/me/profile',
+    'link_type': 'Navigation menu link',
+    'page_language': 'FR',
+
+    // user-level parameters, not specific to the event
+    'user_id':  'JKSFI29924FDK',
+    'user_email':  'sebatien.fabri.ext@spw.wallonie.be',  // Can be in clear in the dataLayer but we will never collect it without a hash
+    'user_type':  'employé SPW' OR 'citoyen' ,
+    'user_postal_code':  '4000',
+    'user_city':  'LIEGE'
+});
+\`\`\`
+
+</details>
+
+## Composant interactif
         `,
             },
         },
@@ -528,3 +572,97 @@ Utilisation : ajoutez variant="megamenu" sur le spw-header-navigation-item souha
         },
     },
 };
+function htmlContentUserInfo(slotArgs) {
+    return /* HTML */ `
+    <div slot="top-left">
+      <spw-header-persona>
+        <option data-link="#" selected value="citoyen">Citoyen</option>
+        <option data-link="#" value="entreprise">Entreprise</option>
+        <option data-link="#" value="pouvoirs-locaux">Pouvoirs locaux</option>
+      </spw-header-persona>
+    </div>
+
+    <div slot="right">
+      <spw-header-lang>
+        <option data-link="#" selected value="fr">Fr</option>
+        <option data-link="#" value="nl">Nl</option>
+        <option data-link="#" value="en">En</option>
+        <option data-link="#" value="de">De</option>
+      </spw-header-lang>
+    </div>
+
+    <spw-dropdown slot="user-info" direction="bottom" alignment="end" has-padding="false" content-width="160">
+      <spw-avatar clickable initials="JD" bubble="3"></spw-avatar>
+      <div slot="dropdownContent">
+        <div>
+          <spw-dropdown-item>Mon profil</spw-dropdown-item>
+          <spw-dropdown-item>Paramètres</spw-dropdown-item>
+          <spw-dropdown-item>Déconnexion</spw-dropdown-item>
+        </div>
+      </div>
+    </spw-dropdown>
+
+    <spw-dropdown slot="user-info-mobile" direction="bottom" alignment="end" has-padding="false" content-width="160">
+      <spw-avatar clickable initials="JD" bubble="3"></spw-avatar>
+      <div slot="dropdownContent">
+        <div>
+          <spw-dropdown-item>Mon profil</spw-dropdown-item>
+          <spw-dropdown-item>Paramètres</spw-dropdown-item>
+          <spw-dropdown-item>Déconnexion</spw-dropdown-item>
+        </div>
+      </div>
+    </spw-dropdown>
+
+    <div slot="search">
+      <spw-search-field class="mb-4" size="medium" name="search" placeholder="Exemple : un mot-clé..."></spw-search-field>
+    </div>
+
+    <spw-header-navigation>
+      <spw-header-navigation-item is-active="${slotArgs.isActive}">
+        <a href="#">Rubrique 1</a>
+      </spw-header-navigation-item>
+      <spw-header-navigation-item>
+        <a href="#">Rubrique 2</a>
+      </spw-header-navigation-item>
+      <spw-header-navigation-item>
+        <a href="#">Rubrique 3</a>
+      </spw-header-navigation-item>
+    </spw-header-navigation>
+  `;
+}
+const TemplateUserInfo = args => {
+    const element = 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)) {
+            element.setAttribute(toKebabCase(key), val);
+        }
+        else if (key.startsWith('on')) {
+            element.addEventListener(key.substring(2).toLowerCase(), val);
+        }
+    });
+    element.innerHTML = htmlContentUserInfo(args);
+    return element;
+};
+export const AvecEspaceUtilisateur = TemplateUserInfo.bind({});
+AvecEspaceUtilisateur.storyName = 'En-tête avec espace utilisateur';
+AvecEspaceUtilisateur.args = {
+    isActive: false,
+    siteTitle: 'Titre du site',
+    borderColor: 'var(--spw-ds-primary)',
+};
+AvecEspaceUtilisateur.parameters = {
+    docs: {
+        description: {
+            story: `
+Header avec espace utilisateur connecté via les slots user-info (desktop) et user-info-mobile (mobile).
+
+- En desktop, le dropdown avatar apparaît à droite de la barre principale, à côté du bouton de recherche.
+- En mobile, il apparaît à côté du bouton hamburger, et se masque automatiquement quand la navigation ou la recherche est ouverte.
+
+Les deux slots sont indépendants : chacun est une instance distincte du composant, avec son propre état.
+      `,
+        },
+    },
+};

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

@@ -22,6 +22,8 @@ const meta = {
 
 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.
 
+[<spw-link icon="fa-arrow-up-right-from-square" icon-position="right">Voir la documentation sur Zeroheight</spw-link>](https://zeroheight.com/2310c7a1e/p/5039a3-bandeau-den-tete-hero-banner)
+
 ## Variants disponibles
 
 - **Grey** : Arrière-plan gris avec image latérale
@@ -40,7 +42,43 @@ Le composant Hero Banner crée un bandeau visuel impactant en haut de page pour
 - Support du contenu HTML dans le slot par défaut
 - Accessibilité avec gestion du clavier
 
-[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/5039a3-bandeau-den-tete-hero-banner)
+## Tracking Matomo
+
+**hero_banner_click** est émis lors d'un click sur un hero banner.
+
+<details>
+<summary style="font-size: 12px;">Voir le code de tracking</summary>
+
+\`\`\`javascript
+// default Google dataLayer format adapted for Matomo
+
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+    'event': 'hero_banner_click',
+    // default parameter for Matomo
+    'event_category':  'Link clicks',
+    'event_action':  'Hero banner clicks',
+    'event_name':  'Nouvelle demarche',
+    'event_value': 'https://monespace.wallonie.be/me/new-formality',
+
+    // parameters giving context & reusable for other button or link clicks
+    'link_text':   'Nouvelle demarche',
+    'link_url':  'https://monespace.wallonie.be/me/new-formality',
+    'link_type': 'Hero banner clicks',
+    'page_language': 'FR',
+
+    // user-level parameters, not specific to the event
+    'user_id':  'JKSFI29924FDK',
+    'user_email':  'sebatien.fabri.ext@spw.wallonie.be',  // Can be in clear in the dataLayer but we will never collect it without a hash
+    'user_type':  'employé SPW' OR 'citoyen' ,
+    'user_postal_code':  '4000',
+    'user_city':  'LIEGE'
+});
+\`\`\`
+
+</details>
+
+## Composant interactif
         `,
             },
         },

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

@@ -36,6 +36,8 @@ Le composant Lightbox est une visionneuse d'images avec galerie, navigation, min
 - Méthodes programmatiques open(index) et close()
 - Événements spwLightboxOpen et spwLightboxClose
 - Slot personnalisable sur spw-lightbox-item pour utiliser n'importe quel déclencheur
+
+## Composant interactif
         `,
             },
         },

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

@@ -22,6 +22,8 @@ const meta = {
 
 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.
 
+[<spw-link icon="fa-arrow-up-right-from-square" icon-position="right">Voir la documentation sur Zeroheight</spw-link>](https://zeroheight.com/2310c7a1e/p/51c7cf-liste)
+
 ## Structure
 
 Le composant se compose de quatre éléments :
@@ -45,7 +47,7 @@ Le composant se compose de quatre éléments :
 - Répertoires de documents ou ressources
 - Accès rapides (variant shortcut)
 
-[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/51c7cf-liste)
+## Composant interactif
         `,
             },
         },

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

@@ -21,6 +21,8 @@ const meta = {
 
 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.
 
+[<spw-link icon="fa-arrow-up-right-from-square" icon-position="right">Voir la documentation sur Zeroheight</spw-link>](https://zeroheight.com/2310c7a1e/p/039ae1-message)
+
 ## Variants disponibles
 
 - **Default** : Message standard sans contexte particulier
@@ -36,7 +38,42 @@ Le composant Message affiche des notifications ou des informations importantes
 - Accessibilité avec attributs ARIA (role="alert", aria-live)
 - Support du clavier pour la fermeture
 
-[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/039ae1-message)
+## Slots
+
+- **default** : Contenu du message (texte descriptif)
+- **right** : Élément aligné à droite (bouton, lien, icône). **Disponible uniquement en version compact et lorsque is-dismissable="false"** (car il remplace visuellement le bouton "Masquer"). Ignoré dans tous les autres cas.
+
+## Tracking Matomo
+
+**message_show** / **message_hide** sont émis lorsqu'un message apparaît à l'écran ou lorsqu'il est fermé / masqué.
+
+<details>
+<summary style="font-size: 12px;">Voir le code de tracking</summary>
+
+\`\`\`javascript
+// default Google dataLayer format adapted for Matomo
+
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+    'event': 'message_show' OR 'message_hide',
+    // default parameter for Matomo
+    'event_category':  'Message interactions',
+    'event_action':  'Message show' OR 'Message hide',
+    'event_name':  'Titre du message|Contenu du message',
+    'event_value': '', // not applicable
+
+    // user-level parameters, not specific to the event
+    'user_id':  'JKSFI29924FDK',
+    'user_email':  'sebatien.fabri.ext@spw.wallonie.be',  // Can be in clear in the dataLayer but we will never collect it without a hash
+    'user_type':  'employé SPW' OR 'citoyen' ,
+    'user_postal_code':  '4000',
+    'user_city':  'LIEGE'
+});
+\`\`\`
+
+</details>
+
+## Composant interactif
         `,
             },
         },
@@ -196,3 +233,43 @@ Utilisé pour des messages très courts ne nécessitant pas de description suppl
         },
     },
 };
+export const CompactWithRightSlot = () => {
+    const element = document.createElement('spw-message');
+    element.setAttribute('message-id', '8');
+    element.setAttribute('message-title', 'Mise à jour effectuée');
+    element.setAttribute('variant', 'info');
+    element.setAttribute('size', 'compact');
+    element.setAttribute('is-dismissable', 'false');
+    element.innerHTML = /* HTML */ `
+    Votre profil a été enregistré.
+    <spw-button slot="right" size="small" href="#">Bouton d'action</spw-button>
+  `;
+    return element;
+};
+CompactWithRightSlot.storyName = 'Message compact avec slot right';
+CompactWithRightSlot.parameters = {
+    docs: {
+        description: {
+            story: `
+Version compacte avec un élément aligné à droite via le slot right (bouton, lien, icône).
+
+**Contraintes** :
+- Uniquement disponible sur size="compact"
+- Uniquement disponible lorsque is-dismissable="false" (le slot remplace visuellement le bouton "Masquer")
+
+En mobile (< lg), le slot right passe sous le bloc titre + contenu ; en desktop, il est aligné à droite du message.
+      `,
+        },
+        source: {
+            code: `<spw-message
+  message-title="Mise à jour effectuée"
+  variant="info"
+  size="compact"
+  is-dismissable="false"
+>
+  Votre profil a été enregistré.
+  <spw-button slot="right" size="small" href="#">Bouton d'action</spw-button>
+</spw-message>`,
+        },
+    },
+};

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

@@ -25,6 +25,8 @@ const meta = {
 
 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.
 
+[<spw-link icon="fa-arrow-up-right-from-square" icon-position="right">Voir la documentation sur Zeroheight</spw-link>](https://zeroheight.com/2310c7a1e/p/75759c-modale)
+
 ## Tailles disponibles
 
 - **Small** : Pour des messages courts ou confirmations simples
@@ -42,7 +44,37 @@ Le composant Modal affiche une fenêtre superposée qui capte l'attention de l'u
 - Méthodes programmatiques openModal() et closeModal()
 - Événements spwModalOpen et spwModalClose
 
-[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/75759c-modale)
+## Tracking Matomo
+
+**modal_show** / **modal_hide** sont émis lorsqu'une modale apparaît à l'écran ou lorsqu'elle est fermée / masquée.
+
+<details>
+<summary style="font-size: 12px;">Voir le code de tracking</summary>
+
+\`\`\`javascript
+// default Google dataLayer format adapted for Matomo
+
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+    'event': 'modal_show' OR 'modal_hide',
+    // default parameter for Matomo
+    'event_category':  'Modal interactions',
+    'event_action':  'Modal show' OR 'Modal_hide',
+    'event_name':  'Titre du message|Contenu du message',
+    'event_value': '', // not applicable
+
+    // user-level parameters, not specific to the event
+    'user_id':  'JKSFI29924FDK',
+    'user_email':  'sebatien.fabri.ext@spw.wallonie.be',  // Can be in clear in the dataLayer but we will never collect it without a hash
+    'user_type':  'employé SPW' OR 'citoyen' ,
+    'user_postal_code':  '4000',
+    'user_city':  'LIEGE'
+});
+\`\`\`
+
+</details>
+
+## Composant interactif
         `,
             },
         },

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

@@ -22,6 +22,8 @@ const meta = {
 
 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.
 
+[<spw-link icon="fa-arrow-up-right-from-square" icon-position="right">Voir la documentation sur Zeroheight</spw-link>](https://zeroheight.com/2310c7a1e/p/378091-carousel-slider)
+
 ## Structure
 
 Le composant se compose de deux éléments :
@@ -49,7 +51,43 @@ Le composant se compose de deux éléments :
 - Grilles de cartes avec contenus de hauteurs différentes
 - Affichage de tuiles d'accès rapides organisées
 
-[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/378091-carousel-slider)
+## Tracking Matomo
+
+**card_click** est émis lors d'un click sur une carte contenue dans la mosaïque.
+
+<details>
+<summary style="font-size: 12px;">Voir le code de tracking</summary>
+
+\`\`\`javascript
+// default Google dataLayer format adapted for Matomo
+
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+    'event': 'card_click',
+    // default parameter for Matomo
+    'event_category':  'Link clicks',
+    'event_action':  'Card clicks',
+    'event_name':  'Comment soutenir nos agricultrices et agriculteurs?',
+    'event_value': 'https://www.wallonie.be/fr/demarches/demander-une-aide-linvestissement-pour-mon-activite-agricole',
+
+    // parameters giving context & reusable for other button or link clicks
+    'link_text':   'Comment soutenir nos agricultrices et agriculteurs?',
+    'link_url':  'https://www.wallonie.be/fr/demarches/demander-une-aide-linvestissement-pour-mon-activite-agricole',
+    'link_type': 'Card clicks',
+    'page_language': 'FR',
+
+    // user-level parameters, not specific to the event
+    'user_id':  'JKSFI29924FDK',
+    'user_email':  'sebatien.fabri.ext@spw.wallonie.be',  // Can be in clear in the dataLayer but we will never collect it without a hash
+    'user_type':  'employé SPW' OR 'citoyen' ,
+    'user_postal_code':  '4000',
+    'user_city':  'LIEGE'
+});
+\`\`\`
+
+</details>
+
+## Composant interactif
         `,
             },
         },

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

@@ -22,6 +22,8 @@ const meta = {
 
 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.
 
+[<spw-link icon="fa-arrow-up-right-from-square" icon-position="right">Voir la documentation sur Zeroheight</spw-link>](https://zeroheight.com/2310c7a1e/p/30d84f-sidebar)
+
 ## Structure
 
 Le composant se compose de quatre éléments :
@@ -52,7 +54,43 @@ Le composant se compose de quatre éléments :
 - Interfaces d'applications métier
 - Portails avec navigation complexe
 
-[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/30d84f-sidebar)
+## Tracking Matomo
+
+**navigation_menu_click** est émis lors d'un click sur un élément du menu de navigation.
+
+<details>
+<summary style="font-size: 12px;">Voir le code de tracking</summary>
+
+\`\`\`javascript
+// default Google dataLayer format adapted for Matomo
+
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+    'event': 'navigation_menu_click',
+    // default parameter for Matomo
+    'event_category':  'Link clicks',
+    'event_action':  'Navigation menu',
+    'event_name':  'Gérer mon profil',
+    'event_value': 'https://monespace.wallonie.be/me/profile',
+
+    // parameters giving context & reusable for other button or link clicks
+    'link_text':   'Gérer mon profil',
+    'link_url':  'https://monespace.wallonie.be/me/profile',
+    'link_type': 'Navigation menu link',
+    'page_language': 'FR',
+
+    // user-level parameters, not specific to the event
+    'user_id':  'JKSFI29924FDK',
+    'user_email':  'sebatien.fabri.ext@spw.wallonie.be',  // Can be in clear in the dataLayer but we will never collect it without a hash
+    'user_type':  'employé SPW' OR 'citoyen' ,
+    'user_postal_code':  '4000',
+    'user_city':  'LIEGE'
+});
+\`\`\`
+
+</details>
+
+## Composant interactif
         `,
             },
         },