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

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

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

@@ -33,6 +33,44 @@ Le composant se compose de deux éléments :
 - Grilles de tuiles ou cartes uniformes
 - Mise en avant d'un élément principal (span 2x2)
 - Sections de contenu avec hiérarchie visuelle
+
+## Tracking Matomo
+
+**card_click** est émis lors d'un click sur une carte contenue dans la grille.
+
+<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-group/spw-group.stories.js

@@ -21,6 +21,8 @@ const meta = {
 
 Le composant Groupe permet d'organiser plusieurs éléments interactifs (boutons, checkboxes, radios) en une unité visuelle cohérente. Il facilite la gestion d'actions connexes et améliore l'expérience utilisateur.
 
+[<spw-link icon="fa-arrow-up-right-from-square" icon-position="right">Voir la documentation sur Zeroheight</spw-link>](https://zeroheight.com/2310c7a1e/p/56fd38-groupe-de-boutons)
+
 ## Types de groupes
 
 Le composant supporte trois types d'éléments :
@@ -28,7 +30,7 @@ Le composant supporte trois types d'éléments :
 - **Checkboxes** : Groupe de cases à cocher
 - **Radios** : Groupe de boutons radio
 
-[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/56fd38-groupe-de-boutons)
+## Composant interactif
         `,
             },
         },

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 :
@@ -51,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
         `,
             },
         },

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