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

package/dist/collection/stories/components/spw-field-message/spw-field-message.stories.js

@@ -21,6 +21,8 @@ const meta = {
 
 Le composant Field Message affiche des messages d'aide, d'erreur, de succès ou d'avertissement associés aux champs de formulaire. Il guide l'utilisateur et fournit un feedback visuel sur la validation.
 
+[<spw-link icon="fa-arrow-up-right-from-square" icon-position="right">Voir la documentation sur Zeroheight</spw-link>](https://zeroheight.com/2310c7a1e/p/99862d-indice-de-champ-hint)
+
 ## Variantes disponibles
 
 - **hint** : Message d'aide neutre (par défaut)
@@ -44,7 +46,7 @@ Le composant Field Message affiche des messages d'aide, d'erreur, de succès ou
 - Instructions de remplissage
 - Feedback utilisateur en temps réel
 
-[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/99862d-indice-de-champ-hint)
+## Composant interactif
         `,
             },
         },

package/dist/collection/stories/components/spw-file-upload/spw-file-upload.stories.js

@@ -21,6 +21,8 @@ const meta = {
 
 Le composant File Upload permet aux utilisateurs de sélectionner et télécharger un ou plusieurs fichiers vers l'application. Il intègre validation de type, taille et nombre de fichiers avec feedback visuel.
 
+[<spw-link icon="fa-arrow-up-right-from-square" icon-position="right">Voir la documentation sur Zeroheight</spw-link>](https://zeroheight.com/2310c7a1e/p/934c31-envoi-de-fichiers-upload)
+
 ## Fonctionnalités
 
 - Sélection de fichiers unique ou multiple
@@ -40,7 +42,44 @@ Le composant File Upload permet aux utilisateurs de sélectionner et télécharg
 - Import de fichiers de données (CSV, Excel)
 - Téléchargement de fichiers multiples
 
-[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/934c31-envoi-de-fichiers-upload)
+## Tracking Matomo
+
+**file_upload** est émis pour tous les uploads de fichier par utilisateur. Un seul event par upload, même si il comporte plusieurs fichiers.
+
+<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': 'file_upload',
+    // default parameter for Matomo
+    'event_category':  'Flow events',
+    'event_action':  'File upload',
+    'event_name':  'File upload : Demande de réduction du précompte immobilier',
+    'event_value': 'Attestation de reconnaissance de handicap',
+
+    // parameters giving context & reusable for other button or link clicks
+    'link_text':  'selectionnez' OR 'charger',
+    'link_url':  '', // Not necessary here
+    'link_type': 'Button clicks',
+    'page_language': 'FR',
+    'document_name': 'Attestation de reconnaissance de handicap',
+
+    // 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/components/spw-icon/spw-icon.stories.js

@@ -33,6 +33,8 @@ Le composant Icon permet d'afficher une icône de la bibliothèque Font Awesome.
 - Pictogrammes informatifs (statut, type de fichier)
 - Icônes fonctionnelles dans boutons et liens
 - Indicateurs visuels dans formulaires et messages
+
+## Composant interactif
         `,
             },
         },

package/dist/collection/stories/components/spw-input-slider/spw-input-slider.stories.js

@@ -55,6 +55,8 @@ Le composant Input Slider permet aux utilisateurs de sélectionner une valeur nu
 - Filtres de recherche (âge, distance, etc.)
 - Configuration de paramètres numériques
 - Sélection de plage horaire ou de dates
+
+## Composant interactif
         `,
             },
         },

package/dist/collection/stories/components/spw-link/spw-link.stories.js

@@ -21,6 +21,8 @@ const meta = {
 
 Le composant Link permet de créer des liens hypertextes pour naviguer vers d'autres pages, sections de la page courante ou ressources externes. Il offre des options de personnalisation avec icônes et variantes visuelles.
 
+[<spw-link icon="fa-arrow-up-right-from-square" icon-position="right">Voir la documentation sur Zeroheight</spw-link>](https://zeroheight.com/2310c7a1e/p/47998e-lien)
+
 ## Fonctionnalités
 
 - Support des icônes FontAwesome (gauche ou droite)
@@ -37,7 +39,7 @@ Le composant Link permet de créer des liens hypertextes pour naviguer vers d'au
 - Liens inline dans du contenu texte
 - Appels à l'action secondaires
 
-[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/47998e-lien)
+## Composant interactif
         `,
             },
         },

package/dist/collection/stories/components/spw-loading/spw-loading.stories.js

@@ -21,6 +21,8 @@ const meta = {
 
 Le composant Loading (loader) indique visuellement qu'une action ou un chargement de contenu est en cours. Il fournit un feedback immédiat à l'utilisateur pendant les opérations asynchrones.
 
+[<spw-link icon="fa-arrow-up-right-from-square" icon-position="right">Voir la documentation sur Zeroheight</spw-link>](https://zeroheight.com/2310c7a1e/p/957e2a-chargement-loader)
+
 ## Fonctionnalités
 
 - Animation de chargement circulaire
@@ -37,7 +39,7 @@ Le composant Loading (loader) indique visuellement qu'une action ou un chargemen
 - États de chargement de page ou section
 - Feedback visuel pendant traitements longs
 
-[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/957e2a-chargement-loader)
+## Composant interactif
         `,
             },
         },

package/dist/collection/stories/components/spw-pagination/spw-pagination.stories.js

@@ -21,6 +21,8 @@ const meta = {
 
 Le composant Pagination permet aux utilisateurs de naviguer entre différentes pages d'un contenu divisé. Il affiche les numéros de pages cliquables avec indicateur de page active.
 
+[<spw-link icon="fa-arrow-up-right-from-square" icon-position="right">Voir la documentation sur Zeroheight</spw-link>](https://zeroheight.com/2310c7a1e/p/0281c1-pagination)
+
 ## Variantes disponibles
 
 - **default** : Pagination avec boutons de numéros de page
@@ -43,7 +45,7 @@ Le composant Pagination permet aux utilisateurs de naviguer entre différentes p
 - Navigation dans articles ou actualités
 - Résultats de recherche étendus
 
-[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/0281c1-pagination)
+## Composant interactif
         `,
             },
         },

package/dist/collection/stories/components/spw-radio/spw-radio.stories.js

@@ -22,6 +22,8 @@ const meta = {
 
 Le composant Radio permet aux utilisateurs de sélectionner une seule option parmi plusieurs choix mutuellement exclusifs. Contrairement aux checkboxes, un seul bouton radio peut être sélectionné à la fois dans un groupe.
 
+[<spw-link icon="fa-arrow-up-right-from-square" icon-position="right">Voir la documentation sur Zeroheight</spw-link>](https://zeroheight.com/2310c7a1e/p/03147d-bouton-radio)
+
 ## Fonctionnalités
 
 - Sélection unique dans un groupe
@@ -38,7 +40,7 @@ Le composant Radio permet aux utilisateurs de sélectionner une seule option par
 - Paramètres de configuration uniques
 - Questions à choix unique dans formulaires
 
-[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/03147d-bouton-radio)
+## Composant interactif
         `,
             },
         },

package/dist/collection/stories/components/spw-scrolltop/spw-scrolltop.stories.js

@@ -38,6 +38,8 @@ Le composant Scroll Top affiche un bouton flottant permettant de remonter en hau
 - Listes paginées ou infinies
 - Containers scrollables (modales, panneaux latéraux)
 - Amélioration de la navigation utilisateur
+
+## Composant interactif
         `,
             },
         },

package/dist/collection/stories/components/spw-search-field/spw-search-field.stories.js

@@ -27,6 +27,8 @@ const meta = {
 
 Le composant Search Field permet aux utilisateurs d'effectuer des recherches avec autocomplétion et suggestions. Il propose des résultats en temps réel pendant la saisie et peut inclure un bouton de soumission.
 
+[<spw-link icon="fa-arrow-up-right-from-square" icon-position="right">Voir la documentation sur Zeroheight</spw-link>](https://zeroheight.com/2310c7a1e/p/9384eb-champ-de-recherche-search-input)
+
 ## Variantes disponibles
 
 - **default** : Champ standard avec suggestions
@@ -54,9 +56,50 @@ Le composant Search Field permet aux utilisateurs d'effectuer des recherches ave
 - Recherche de contenu ou produits
 - Moteur de recherche interne
 
----
+## Tracking Matomo
+
+**internal_search** est émis lorsqu'une recherche pour un mot est soumise. Event envoyé à chaque fois que les résultats se mettent à jour.
+
+<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': 'internal_search',
+    // default parameter for Matomo
+    'event_category':  'Search',
+    'event_action':  'Search query',
+    'event_name':  'Search term : Master',
+    'event_value': '121', // Number of search results
+
+    // parameters giving context & reusable for other button or link clicks
+    'link_text':   '', // Not necessary here
+    'link_url':  '', // Not necessary here
+    'link_type': 'Search bar',
+    'page_language': 'FR',
+
+    // search parameters (in case results are filtered by a search)
+    'search_term':   'Master',
+    'number_of_search_results': 121 ,
+    'filter_name':   'Région', // If filter applied
+    'filter_value':   'Liege', // If filter applied
+    'filters_applied': 'Région : Liege|Type d emploi : Contractuel', // All filters concatenated with pipes in application order
+
+    // 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'
+});
+\`\`\`
 
-[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/9384eb-champ-de-recherche-search-input)
+</details>
+
+---
 
 ---
 
@@ -196,6 +239,8 @@ await searchField.resetInput();
 // Mettre le focus sur le champ
 await searchField.setFocus();
 \`\`\`
+
+## Composant interactif
         `,
             },
         },

package/dist/collection/stories/components/spw-select/spw-select.stories.js

@@ -21,6 +21,8 @@ const meta = {
 
 Le composant Select permet aux utilisateurs de choisir une option dans une liste déroulante. Version native HTML stylisée, il offre une expérience familière et accessible pour la sélection simple.
 
+[<spw-link icon="fa-arrow-up-right-from-square" icon-position="right">Voir la documentation sur Zeroheight</spw-link>](https://zeroheight.com/2310c7a1e/p/7029dd-champ-de-selection-select)
+
 ## Fonctionnalités
 
 - Liste déroulante native HTML
@@ -39,7 +41,50 @@ Le composant Select permet aux utilisateurs de choisir une option dans une liste
 - Paramètres de configuration simples
 - Sélection dans listes courtes
 
-[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/7029dd-champ-de-selection-select)
+## Tracking Matomo
+
+**sorting_option_applied** est émis lorsqu'une option de tri est appliquée. Event envoyé à chaque fois que les résultats se mettent à jour.
+
+<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': 'sorting_option_applied',
+    // default parameter for Matomo
+    'event_category':  'Search',
+    'event_action':  'Sorting option applied',
+    'event_name':  'Sorting option : démarches récemment menées',
+    'event_value': '', // Not necessary here
+
+    // parameters giving context & reusable for other button or link clicks
+    'link_text':   'Mobilité',
+    'link_url':  '', // Not necessary here
+    'link_type': 'Checkbox clicks',
+    'page_language': 'FR',
+
+    // search parameters (in case results are also filtered by a search or filters)
+    'search_term':   'taxe',
+    'number_of_search_results': 6 ,
+    'filter_name':   'Thématique',
+    'filter_value':   'Mobilité',
+    'filters_applied': 'Thematique : Activité économique|Thematique : Mobilité', // All filters concatenated with pipes in application order
+
+    // 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/components/spw-separator/spw-separator.stories.js

@@ -21,6 +21,8 @@ const meta = {
 
 Le composant Separator (divider) permet de créer des séparations visuelles entre différentes sections de contenu. Il améliore la lisibilité et structure l'information de manière claire.
 
+[<spw-link icon="fa-arrow-up-right-from-square" icon-position="right">Voir la documentation sur Zeroheight</spw-link>](https://zeroheight.com/2310c7a1e/p/381355-separateur)
+
 ## Variantes disponibles
 
 - **horizontal** : Séparation horizontale (par défaut)
@@ -39,7 +41,7 @@ Le composant Separator (divider) permet de créer des séparations visuelles ent
 - Division d'éléments dans une toolbar
 - Séparation visuelle dans des listes ou cartes
 
-[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/381355-separateur)
+## Composant interactif
         `,
             },
         },

package/dist/collection/stories/components/spw-skeleton/spw-skeleton.stories.js

@@ -21,6 +21,8 @@ const meta = {
 
 Le composant Skeleton affiche un aperçu animé du contenu avant son chargement complet. Il améliore l'expérience utilisateur en réduisant la frustration liée aux temps d'attente et donne une indication visuelle de la structure à venir.
 
+[<spw-link icon="fa-arrow-up-right-from-square" icon-position="right">Voir la documentation sur Zeroheight</spw-link>](https://zeroheight.com/2310c7a1e/p/54b742-squelette)
+
 ## Variantes disponibles
 
 - **text** : Lignes de texte avec variations de largeur
@@ -42,7 +44,7 @@ Le composant Skeleton affiche un aperçu animé du contenu avant son chargement
 - Placeholder pour images en cours de chargement
 - États de chargement de pages entières
 
-[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/54b742-squelette)
+## Composant interactif
         `,
             },
         },

package/dist/collection/stories/components/spw-tag/spw-tag.stories.js

@@ -21,6 +21,8 @@ const meta = {
 
 Le composant Tag permet d'afficher des étiquettes visuelles pour catégoriser, labelliser ou indiquer le statut d'un élément. Compact et discret, il attire l'attention sur des informations clés sans surcharger l'interface.
 
+[<spw-link icon="fa-arrow-up-right-from-square" icon-position="right">Voir la documentation sur Zeroheight</spw-link>](https://zeroheight.com/2310c7a1e/p/621ede-tag)
+
 ## Variantes disponibles
 
 - **default** : Tag par défaut avec fond gris clair
@@ -43,7 +45,7 @@ Le composant Tag permet d'afficher des étiquettes visuelles pour catégoriser,
 - Labels informatifs dans cartes et listes
 - Badges de notification ou compteurs
 
-[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/621ede-tag)
+## Composant interactif
         `,
             },
         },

package/dist/collection/stories/components/spw-text-field/spw-text-field.stories.js

@@ -21,6 +21,8 @@ const meta = {
 
 Le composant Text Field permet aux utilisateurs d'entrer du texte court sur une seule ligne. Élément fondamental des formulaires, il intègre label, placeholder, validation et messages d'aide.
 
+[<spw-link icon="fa-arrow-up-right-from-square" icon-position="right">Voir la documentation sur Zeroheight</spw-link>](https://zeroheight.com/2310c7a1e/p/859851-champ-de-saisie-input-field)
+
 ## Variantes disponibles
 
 - **text** : Texte standard (par défaut)
@@ -47,7 +49,7 @@ Le composant Text Field permet aux utilisateurs d'entrer du texte court sur une
 - Champs de connexion
 - Saisie d'adresses et coordonnées
 
-[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/859851-champ-de-saisie-input-field)
+## Composant interactif
         `,
             },
         },

package/dist/collection/stories/components/spw-textarea/spw-textarea.stories.js

@@ -21,6 +21,8 @@ const meta = {
 
 Le composant Textarea permet aux utilisateurs de saisir du texte long sur plusieurs lignes. Idéal pour les commentaires, descriptions et contenus étendus dans les formulaires.
 
+[<spw-link icon="fa-arrow-up-right-from-square" icon-position="right">Voir la documentation sur Zeroheight</spw-link>](https://zeroheight.com/2310c7a1e/p/6692b4-champ-texte-textarea)
+
 ## Fonctionnalités
 
 - Hauteur configurable (nombre de lignes)
@@ -36,7 +38,7 @@ Le composant Textarea permet aux utilisateurs de saisir du texte long sur plusie
 - Feedback utilisateur et témoignages
 - Notes et observations
 
-[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/6692b4-champ-texte-textarea)
+## Composant interactif
         `,
             },
         },

package/dist/collection/stories/components/spw-toast/spw-toast.stories.js

@@ -21,6 +21,8 @@ const meta = {
 
 Le composant Toast affiche des notifications temporaires non-bloquantes pour informer l'utilisateur du résultat d'une action ou d'un événement système.
 
+[<spw-link icon="fa-arrow-up-right-from-square" icon-position="right">Voir la documentation sur Zeroheight</spw-link>](https://zeroheight.com/2310c7a1e/p/15cbdc-toast)
+
 ## Fonctionnalités
 
 - 4 variantes visuelles : info, success, warning, alert
@@ -124,7 +126,7 @@ this.toast.create({
 this.toast.dismissAll();
 \`\`\`
 
-[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/15cbdc-toast)
+## Composant interactif
         `,
             },
         },

package/dist/collection/stories/components/spw-tooltip/spw-tooltip.stories.js

@@ -21,6 +21,8 @@ const meta = {
 
 Le composant Tooltip affiche des informations contextuelles supplémentaires au survol d'un élément. Il permet de fournir des explications, des aides ou des précisions sans surcharger l'interface.
 
+[<spw-link icon="fa-arrow-up-right-from-square" icon-position="right">Voir la documentation sur Zeroheight</spw-link>](https://zeroheight.com/2310c7a1e/p/748e85-infobulle-tooltip)
+
 ## Fonctionnalités
 
 - Affichage au survol
@@ -37,7 +39,7 @@ Le composant Tooltip affiche des informations contextuelles supplémentaires au
 - Descriptions détaillées sans encombrer l'interface
 - Aide à la complétion de formulaires complexes
 
-[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/748e85-infobulle-tooltip)
+## Composant interactif
         `,
             },
         },

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

@@ -36,6 +36,8 @@ const meta = {
 
 Les accordéons permettent aux utilisateurs d'afficher et de masquer des sections de contenu présentés dans une page. Ils sont particulièrement utiles pour organiser de grandes quantités d'informations de manière compacte et améliorer la lisibilité du contenu.
 
+[<spw-link icon="fa-arrow-up-right-from-square" icon-position="right">Voir la documentation sur Zeroheight</spw-link>](https://zeroheight.com/2310c7a1e/p/054567-accordeon)
+
 ## Structure
 
 Le composant se compose de trois parties :
@@ -52,7 +54,43 @@ Le composant se compose de trois parties :
 - Accessibilité avec gestion du clavier et attributs ARIA
 - Personnalisation du niveau de titre pour le SEO
 
-[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/054567-accordeon)
+## Tracking Matomo
+
+**accordion_expand** / **accordion_collapse** sont émis lors de l'ouverture ou de la fermeture d'un item de l'accordéon.
+
+<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': 'accordion_expand' OR 'accordion_collapse',
+    // default parameter for Matomo
+    'event_category':  'Modules',
+    'event_action':  'Accordion expand' OR 'Accordion collapse',
+    'event_name':  'Accordion expand : Documents',
+    'event_value': '', // Not necessary here
+
+    // parameters giving context & reusable for other button or link clicks
+    'link_text':   'Documents',
+    'link_url':  '', // Not necessary here
+    'link_type': 'Accordion',
+    '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-card/spw-card.stories.js

@@ -31,6 +31,8 @@ const meta = {
 
 Le composant Carte est un conteneur cliquable qui affiche un aperçu visuel de contenu (article, événement, personne, vidéo). Il permet de présenter des informations de manière attrayante et structurée, souvent utilisé dans des listes ou grilles de contenus similaires.
 
+[<spw-link icon="fa-arrow-up-right-from-square" icon-position="right">Voir la documentation sur Zeroheight</spw-link>](https://zeroheight.com/2310c7a1e/p/71f31e-carte-card)
+
 ## Variants disponibles
 
 - **Default / Horizontal** : Carte classique avec image à gauche, contenu à droite
@@ -65,7 +67,43 @@ Le composant se compose de plusieurs parties :
 - Responsive design adaptatif
 - Hover states et transitions fluides
 
-[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/71f31e-carte-card)
+## Tracking Matomo
+
+**card_click** est émis lors d'un click sur une carte.
+
+<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-drawer/spw-drawer.stories.js

@@ -49,6 +49,8 @@ Le composant Drawer est un panneau latéral (ou haut/bas) qui s'affiche par-dess
 - Slot footer pour une zone d'actions fixe en bas
 - Méthodes programmatiques openDrawer() et closeDrawer()
 - Événements spwDrawerOpen et spwDrawerClose
+
+## Composant interactif
         `,
             },
         },

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

@@ -22,6 +22,8 @@ const meta = {
 
 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.
 
+[<spw-link icon="fa-arrow-up-right-from-square" icon-position="right">Voir la documentation sur Zeroheight</spw-link>](https://zeroheight.com/2310c7a1e/p/91a10d-pied-de-page-footer)
+
 ## Structure
 
 Le composant se compose de plusieurs sous-éléments :
@@ -39,7 +41,43 @@ Le composant **spw-socials** peut être associé au footer en le plaçant **stru
 - Support du Shadow DOM pour l'encapsulation
 - 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)
+## Tracking Matomo
+
+**footer_menu_click** est émis lors d'un click sur un élément du menu de navigation du footer.
+
+<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': 'footer_menu_click',
+    // default parameter for Matomo
+    'event_category':  'Link clicks',
+    'event_action':  'Footer 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': 'Footer 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
         `,
             },
         },