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

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

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

@@ -27,6 +27,8 @@ const meta = {
 
 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.
 
+[<spw-link icon="fa-arrow-up-right-from-square" icon-position="right">Voir la documentation sur Zeroheight</spw-link>](https://zeroheight.com/2310c7a1e/p/3326e7-tuile-tile)
+
 ## Structure
 
 Le composant se compose de trois éléments :
@@ -56,7 +58,43 @@ Le composant se compose de trois éléments :
 - **Variant light** : Navigation par catégories, sections thématiques
 - **Variant big** : Mise en avant de contenus majeurs, landing pages
 
-[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/3326e7-tuile-tile)
+## Tracking Matomo
+
+**card_click** est émis lors d'un click sur une tuile.
+
+<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
         `,
             },
         },
@@ -76,6 +114,12 @@ function htmlContentLight() {
 function htmlContentBig() {
     return /* HTML */ ` <spw-tile-title>Titre de ma tuile</spw-tile-title> `;
 }
+function htmlContentWithDescription() {
+    return /* HTML */ `
+    <spw-tile-title>Titre de ma tuile</spw-tile-title>
+    <spw-tile-description>Description qui apporte plus de contexte sur le contenu de la tuile.</spw-tile-description>
+  `;
+}
 const TemplateIcon = args => {
     const element = document.createElement(elementTag);
     const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
@@ -127,6 +171,24 @@ const TemplateBig = args => {
     wrapper.appendChild(element);
     return wrapper;
 };
+const TemplateWithDescription = 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);
+    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 = htmlContentWithDescription();
+    wrapper.appendChild(element);
+    return wrapper;
+};
 export const Icon = TemplateIcon.bind({});
 Icon.storyName = 'Tuile avec icône';
 Icon.args = {
@@ -152,6 +214,26 @@ Big.args = {
     imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
     imageAlt: 'Image de tuile',
 };
+export const DescriptionOnHover = TemplateWithDescription.bind({});
+DescriptionOnHover.storyName = 'Tuile avec description au hover';
+DescriptionOnHover.args = {
+    variant: 'light',
+    href: 'https://google.com',
+    target: '_blank',
+    imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
+    imageAlt: 'Image de tuile',
+    revealDescription: true,
+};
+export const DescriptionStatic = TemplateWithDescription.bind({});
+DescriptionStatic.storyName = 'Tuile avec description statique';
+DescriptionStatic.args = {
+    variant: 'light',
+    href: 'https://google.com',
+    target: '_blank',
+    imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
+    imageAlt: 'Image de tuile',
+    revealDescription: false,
+};
 Icon.parameters = {
     docs: {
         description: {
@@ -205,3 +287,25 @@ Cas d'usage : landing pages avec sections principales, mise en avant d'univers t
         },
     },
 };
+DescriptionOnHover.parameters = {
+    docs: {
+        description: {
+            story: `
+Tuile light avec description qui apparaît au hover (comportement par défaut, reveal-description="true"). Le titre reste toujours visible, la description est révélée à l'interaction.
+
+Cas d'usage : grille de tuiles où l'on veut garder un rendu épuré (titres seuls) et enrichir l'information au survol. La description est masquée en mobile.
+      `,
+        },
+    },
+};
+DescriptionStatic.parameters = {
+    docs: {
+        description: {
+            story: `
+Tuile light avec description toujours visible (reveal-description="false"). Titre et description sont affichés en permanence par-dessus l'image.
+
+Cas d'usage : quand la description est essentielle à la compréhension du contenu ou du choix, et ne doit pas dépendre d'une interaction (souvent le cas en mobile ou pour l'accessibilité).
+      `,
+        },
+    },
+};

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

@@ -29,6 +29,8 @@ Le composant Timeline affiche une liste d'événements ou d'étapes de manière
 - Support des liens sur les labels
 - Option "voir plus" pour limiter le nombre d'items affichés
 - Descriptions et contenu personnalisés
+
+## Composant interactif
         `,
             },
         },

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

@@ -43,6 +43,44 @@ Le composant se compose de trois parties :
 - Détection automatique de la section active
 - Barre de progression pour les sections principales (h2)
 - Support du responsive design avec position sticky
+
+## Tracking Matomo
+
+**table_of_content_click** est émis lors d'un click sur un élément de la table des matières.
+
+<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': 'table_of_content_click',
+    // default parameter for Matomo
+    'event_category':  'Link clicks',
+    'event_action':  'Table of content link click',
+    'event_name':  'Personnaliser votre profil',
+    'event_value': 'https://monespace.wallonie.be/me/profile',
+
+    // parameters giving context & reusable for other button or link clicks
+    'link_text':   'Personnaliser votre profil',
+    'link_url':  'https://monespace.wallonie.be/me/profile',
+    'link_type': 'Table of content 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-topbar/spw-topbar.stories.js

@@ -51,6 +51,8 @@ Le composant est un élément simple sans sous-composants :
 - Barre de navigation supérieure d'outil métier
 - Header d'interface d'administration
 - Bandeau supérieur d'application interne
+
+## Composant interactif
 `,
             },
         },