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

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
         `,
             },
         },

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

@@ -0,0 +1,215 @@
+let componentsData;
+try {
+    componentsData = require('../../../../dist/components_json.json');
+}
+catch (error) {
+    console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');
+    componentsData = {};
+}
+import { withComponentControls, extractArgTypes } from "../../../utils/utils";
+const elementTag = 'spw-sidenav';
+const subComponentTags = ['spw-sidenav-item', 'spw-sidenav-group'];
+const argTypes = Object.assign(Object.assign({}, withComponentControls(componentsData, { tag: elementTag })), extractArgTypes(componentsData, subComponentTags));
+const meta = {
+    title: 'Organismes/Navigation latérale (sidenav)',
+    component: elementTag,
+    argTypes,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: `
+
+Le composant Sidenav est un menu de navigation vertical multi-niveaux dédié aux arborescences de contenus. Il permet de naviguer dans une hiérarchie profonde (jusqu'à plusieurs niveaux imbriqués) avec ouverture/fermeture des sections et gestion automatique de l'item actif.
+
+## Structure
+
+Le composant se compose de trois éléments :
+- **spw-sidenav** : Conteneur principal du menu de navigation
+- **spw-sidenav-item** : Item de navigation (lien ou bouton) avec état actif et gestion des enfants
+- **spw-sidenav-group** : Groupe d'items enfants, à placer dans le slot children d'un item
+
+## Fonctionnalités
+
+- Arborescence à profondeur illimitée via imbrication de spw-sidenav-group
+- État actif automatique : les ancêtres de l'item actif sont surlignés et dépliés
+- Ouverture / fermeture manuelle des sections via chevron
+- Comportement mobile drill-down : sous lg, seul le niveau contenant l'item actif est affiché avec un bouton retour permettant de remonter dans l'arborescence
+- Support du clic label configurable (open-on-click) pour toggle les enfants au lieu de naviguer
+- Accessibilité : aria-expanded, aria-current, navigation clavier
+
+## Cas d'usage
+
+- Navigation latérale de portail thématique
+- Sommaire d'un site à arborescence profonde
+- Menu de rubriques imbriquées
+- Alternative légère au spw-sidebar quand la navigation est purement hiérarchique (pas de back-office)
+
+## 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
+        `,
+            },
+        },
+    },
+};
+export default meta;
+function htmlContentEauNavigation() {
+    return /* HTML */ `
+    <spw-sidenav-item href="/home/milieux/eau/concepts.html">
+      Concepts
+      <spw-sidenav-group slot="children">
+        <spw-sidenav-item href="/home/milieux/eau/concepts/directive-cadre-sur-l-eau.html">
+          Directive-Cadre sur l'Eau
+          <spw-sidenav-group slot="children">
+            <spw-sidenav-item href="/home/milieux/eau/concepts/directive-cadre-sur-l-eau/echeances.html">Échéances</spw-sidenav-item>
+            <spw-sidenav-item href="/home/milieux/eau/concepts/directive-cadre-sur-l-eau/enquetes-publiques.html">Enquêtes publiques</spw-sidenav-item>
+          </spw-sidenav-group>
+        </spw-sidenav-item>
+        <spw-sidenav-item href="/home/milieux/eau/concepts/districts-hydrographiques.html">Districts hydrographiques</spw-sidenav-item>
+        <spw-sidenav-item href="/home/milieux/eau/concepts/concept-de-masse-d-eau.html">Concept de masse d'eau</spw-sidenav-item>
+        <spw-sidenav-item href="/home/milieux/eau/concepts/cours-deau.html">
+          Cours d'eau
+          <spw-sidenav-group slot="children">
+            <spw-sidenav-item href="/home/milieux/eau/concepts/cours-deau/hauteurs-et-debits.html">Hauteurs et débits</spw-sidenav-item>
+          </spw-sidenav-group>
+        </spw-sidenav-item>
+      </spw-sidenav-group>
+    </spw-sidenav-item>
+
+    <spw-sidenav-item href="/home/milieux/eau/etat-des-eaux.html">
+      Etat des eaux
+      <spw-sidenav-group slot="children">
+        <spw-sidenav-item href="/home/milieux/eau/etat-des-eaux/fiches-des-masses-d-eau-de-surface.html">Fiches des masses d'eau de surface</spw-sidenav-item>
+        <spw-sidenav-item href="/home/milieux/eau/etat-des-eaux/fiches-des-masses-d-eau-souterraine.html">Fiches des masses d'eau souterraine</spw-sidenav-item>
+        <spw-sidenav-item href="/home/milieux/eau/etat-des-eaux/etat-des-nappes.html">
+          Etat des nappes et des masses d'eau souterraine
+          <spw-sidenav-group slot="children">
+            <spw-sidenav-item href="/home/milieux/eau/etat-des-eaux/etat-des-nappes/reserves-aquiferes.html">Les réserves aquifères</spw-sidenav-item>
+            <spw-sidenav-item href="/home/milieux/eau/etat-des-eaux/etat-des-nappes/aspects-quantitatifs.html">Aspects quantitatifs</spw-sidenav-item>
+            <spw-sidenav-item href="/home/milieux/eau/etat-des-eaux/etat-des-nappes/aspects-qualitatifs.html">Aspects qualitatifs</spw-sidenav-item>
+          </spw-sidenav-group>
+        </spw-sidenav-item>
+        <spw-sidenav-item href="/home/milieux/eau/etat-des-eaux/plans-de-gestion.html">Plans de gestion des districts hydrographiques</spw-sidenav-item>
+      </spw-sidenav-group>
+    </spw-sidenav-item>
+
+    <spw-sidenav-item href="/home/milieux/eau/gestionnaires.html">
+      Gestionnaires
+      <spw-sidenav-group slot="children">
+        <spw-sidenav-item href="/home/milieux/eau/gestionnaires/gestion-eau-spw.html">L'eau au SPW</spw-sidenav-item>
+        <spw-sidenav-item href="/home/milieux/eau/gestionnaires/gestionnaires-de-cours-deau.html">Gestionnaires de cours d'eau</spw-sidenav-item>
+        <spw-sidenav-item href="/contrat_riviere">
+          Contrats de rivière de Wallonie
+          <spw-sidenav-group slot="children">
+            <spw-sidenav-item href="/icicommencelamer">Ici commence la mer</spw-sidenav-item>
+          </spw-sidenav-group>
+        </spw-sidenav-item>
+      </spw-sidenav-group>
+    </spw-sidenav-item>
+
+    <spw-sidenav-item href="/home/milieux/eau/outils-de-gestion.html">
+      Outils de gestion
+      <spw-sidenav-group slot="children">
+        <spw-sidenav-item href="/home/milieux/eau/outils-de-gestion/surveillance.html">
+          Surveillance
+          <spw-sidenav-group slot="children">
+            <spw-sidenav-item href="/home/milieux/eau/outils-de-gestion/surveillance/piezometrie.html" active>La Piézométrie en Wallonie</spw-sidenav-item>
+            <spw-sidenav-item href="/home/milieux/eau/outils-de-gestion/surveillance/carte-hydrogeologique.html">
+              La carte hydrogéologique de Wallonie
+              <spw-sidenav-group slot="children">
+                <spw-sidenav-item href="/home/milieux/eau/outils-de-gestion/surveillance/carte-hydrogeologique/cartes.html">Cartes</spw-sidenav-item>
+                <spw-sidenav-item href="/home/milieux/eau/outils-de-gestion/surveillance/carte-hydrogeologique/application-cartographique.html"
+                  >Application cartographique</spw-sidenav-item
+                >
+              </spw-sidenav-group>
+            </spw-sidenav-item>
+            <spw-sidenav-item href="/home/milieux/eau/outils-de-gestion/surveillance/surveillance-eaux-de-surface.html">Surveillance des eaux de surface</spw-sidenav-item>
+            <spw-sidenav-item href="/home/milieux/eau/outils-de-gestion/surveillance/surveillance-hydrochimique.html"
+              >Surveillance hydrochimique des eaux souterraines</spw-sidenav-item
+            >
+            <spw-sidenav-item href="/home/milieux/eau/outils-de-gestion/surveillance/zones-de-prevention-des-captages.html">Zones de prévention des captages</spw-sidenav-item>
+          </spw-sidenav-group>
+        </spw-sidenav-item>
+        <spw-sidenav-item href="/home/milieux/eau/outils-de-gestion/outils-specifiques.html">Outils spécifiques</spw-sidenav-item>
+      </spw-sidenav-group>
+    </spw-sidenav-item>
+
+    <spw-sidenav-item href="/home/gestion-environnementale/risques-climatiques.html">Inondations et sécheresse</spw-sidenav-item>
+    <spw-sidenav-item href="/home/legislation/eau.html">Règlementation</spw-sidenav-item>
+  `;
+}
+const Template = () => {
+    const wrapper = document.createElement('div');
+    wrapper.style.maxWidth = '400px';
+    const box = document.createElement('spw-box');
+    box.setAttribute('is-collapsible', 'true');
+    box.setAttribute('collapsible-breakpoint', 'md');
+    box.setAttribute('has-border', 'true');
+    box.setAttribute('has-radius', 'true');
+    box.setAttribute('padding', 'medium');
+    const header = document.createElement('div');
+    header.setAttribute('slot', 'header');
+    header.innerHTML = '<strong>Navigation</strong>';
+    const separator = document.createElement('spw-separator');
+    separator.className = 'spw-ds-mt-lg';
+    const sidenav = document.createElement(elementTag);
+    sidenav.className = 'spw-ds-mt-lg';
+    sidenav.innerHTML = htmlContentEauNavigation();
+    box.appendChild(header);
+    box.appendChild(separator);
+    box.appendChild(sidenav);
+    wrapper.appendChild(box);
+    return wrapper;
+};
+export const Default = Template.bind({});
+Default.storyName = 'Sidenav arborescence multi-niveaux';
+Default.parameters = {
+    docs: {
+        description: {
+            story: `
+Exemple de sidenav thématique avec un item actif en niveau 3 : *La Piézométrie en Wallonie*.
+
+Comportement observable :
+- Les ancêtres de l'item actif (*Outils de gestion → Surveillance*) sont automatiquement dépliés et surlignés
+- Cliquer sur un chevron permet de déplier/replier un sous-niveau
+- En mobile (sous lg), le sidenav bascule en mode drill-down : seul le niveau contenant l'actif est visible, avec un bouton "retour" pour remonter
+- Le sidenav est encapsulé dans un spw-box collapsible en mobile pour rester compact
+      `,
+        },
+    },
+};

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

@@ -22,6 +22,8 @@ const meta = {
 
 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.
 
+[<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 :
@@ -45,7 +47,77 @@ Le composant se compose de deux éléments :
 - Carrousels d'images (hero featured)
 - Carrousels d'actualités ou événements
 
-[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/378091-carousel-slider)
+## Tracking Matomo
+
+**carousel_banner_click** est émis lors d'un click sur un lien d'une banner de carousel.
+
+<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': 'carousel_click',
+    // default parameter for Matomo
+    'event_category':  'Link clicks',
+    'event_action':  'Carousel 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': 'Carousel 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>
+
+**carousel_slide** est émis lors d'un click pour faire slide un carousel à droite ou à gauche.
+
+<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': 'carousel_slide',
+    // default parameter for Matomo
+    'event_category':  'Carousel slide',
+    'event_action':  'Carousel slide left' OR 'Carousel slide right',
+    'event_name':  'Nouvelle demarche', // Nom du carousel banner de départ
+    'event_value': '',  // not applicable
+
+    // parameters giving context & reusable for other button or link clicks
+    'link_text':   '', //  not applicable
+    'link_url':  '', //  not applicable
+    'link_type': '', //  not applicable
+    'page_language': '', //  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-table/spw-table.stories.js

@@ -22,6 +22,8 @@ const meta = {
 
 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.
 
+[<spw-link icon="fa-arrow-up-right-from-square" icon-position="right">Voir la documentation sur Zeroheight</spw-link>](https://zeroheight.com/2310c7a1e/p/90a77b-tableau)
+
 ## Structure
 
 Le composant se compose de six parties :
@@ -48,7 +50,7 @@ Le composant se compose de six parties :
 - Responsive avec scroll horizontal
 - Accessibilité complète avec scope et aria
 
-[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/90a77b-tableau)
+## Composant interactif
         `,
             },
         },

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

@@ -22,6 +22,8 @@ const meta = {
 
 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.
 
+[<spw-link icon="fa-arrow-up-right-from-square" icon-position="right">Voir la documentation sur Zeroheight</spw-link>](https://zeroheight.com/2310c7a1e/p/857780-onglets)
+
 ## Structure
 
 Le composant se compose de quatre parties :
@@ -45,7 +47,43 @@ Le composant se compose de quatre parties :
 - Navigation au clavier accessible
 - Émission d'événement lors du changement d'onglet
 
-[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/857780-onglets)
+## Tracking Matomo
+
+**view_tab** est émis lors du click sur une tab sur une page (par exemple une page de fiche descriptive).
+
+<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': 'view_tab',
+    // default parameter for Matomo adapted to this event
+    'event_category':  'Tab clicks',
+    'event_action':  'Tab : Web Service',
+    'event_name':  'Fact sheet name : Chasse - Table des actions de chasse déclarées par date et par territoire (avec ou sans fermeture) de la saison en cours',
+    'event_value': '', // not needed here
+
+    // parameters giving context & reusable for other button or link clicks
+    'link_text':   'Web service',
+    'link_url':  'https://geoportail.test.wallonie.be/catalogue/6c69803a-b3a6-4154-bf3c-6ec5a4dd6a54.html#web-service',
+    'link_type': 'Tab',
+    'page_language': 'FR',
+
+    // user-level parameters (Some might be added by Jahaia team)
+    'user_id':  'JKSFI29924FDK',
+    'user_email':  'sebatien.fabri.ext@spw.wallonie.be',  // Can be in clear in the dataLayer but better to already hash it
+    'user_type':  'employé SPW' OR 'citoyen' ,
+    'user_postal_code':  '4000',
+    'user_city':  'LIEGE'
+});
+\`\`\`
+
+</details>
+
+## Composant interactif
         `,
             },
         },