🔖 chore(*): DSFR v1.11.2

CHANGELOG.md

@@ -12,6 +12,52 @@ Pour plus d’informations : [Voir la documentation](https://www.systeme-de-desi
 
 ## v1.11
 
+### [v1.11.2](https://github.com/GouvernementFR/dsfr/compare/v1.11.1...v1.11.2) - 1er Mars 2024
+
+#### 🐛 fix(analytics): documentation et correctif version standalone [(#895)](https://github.com/GouvernementFR/dsfr/pull/895)
+- Apporte des éléments correctifs à l'issue #880
+  - correctifs dans la version standalone :
+    - configuration appliquée au logging (verbose, production)
+    - retrait de dépendances non requises
+  - ajout de documentation sur la version standalone
+    - installation
+    - fonctionnalités disponibles
+  - Extraction de Modes du fichier de la class Options pour réduire les dépendances
+
+
+#### ⬆️ chore(dependencies): met a jour les dépendances Node [(#894)](https://github.com/GouvernementFR/dsfr/pull/894)
+- passage à postcss 8.4.32
+
+
+#### 🐛 fix(header): correctif erreur itérable null [(#893)](https://github.com/GouvernementFR/dsfr/pull/893)
+- corrige l'issue #890, la valeur null renvoyée par la fonction match est remplacée par un array vide pour permettre son itération
+
+
+#### 🐛 fix(range): correctif dispose input [(#891)](https://github.com/GouvernementFR/dsfr/pull/891)
+- corrige un bug js sur l'écouteur d'événement
+
+
+#### ✨ feat(doc): ajout d'infos sur la configuration dans la doc analytics [(#888)](https://github.com/GouvernementFR/dsfr/pull/888)
+- ajoute dans la doc de configuration des analytics, la possibilité de surcharger la configuration du mode production via le paramètre dans l'url : ?production=false
+
+
+#### 🐛 fix(tag): corrige le hover des tags cliquables [(#887)](https://github.com/GouvernementFR/dsfr/pull/887)
+- le hover des tags cliquables avait disparu
+
+
+#### ✨ feat(core): ajout d'un retour à la ligne des mots trop long [(#886)](https://github.com/GouvernementFR/dsfr/pull/886)
+- ajout de la propriété `overflow-wrap: world-break` sur body permettant le passage à la ligne des mots plus grands que leur conteneur.
+
+
+#### 🐛 fix(analytics): correctif héritage listenClick [(#885)](https://github.com/GouvernementFR/dsfr/pull/885)
+- corrige un bug js au niveau de l'héritage du listenClick. Renommage de la fonction listenClick en listenActionClick car la fonction existe déja sur la classe héritée "Instance"
+
+
+#### 🐛 fix(header): correction overflow hidden cache le focus [(#881)](https://github.com/GouvernementFR/dsfr/pull/881)
+- correction du focus caché par un overflow hidden, sur le lien du logo du header
+
+
+
 ### [v1.11.1](https://github.com/GouvernementFR/dsfr/compare/v1.11.0...v1.11.1) - 31 Janvier 2024
 
 #### ⬆️ chore(dependencies): met a jour les dépendances Node [(#877)](https://github.com/GouvernementFR/dsfr/pull/877)

package.json

@@ -1,9 +1,9 @@
 {
   "name": "@gouvfr/dsfr",
-  "version": "1.11.1",
+  "version": "1.11.2",
   "description": "Système de Design de l'Etat - DSFR",
   "repository": "git@github.com:GouvernementFR/dsfr.git",
-  "author": "Service d'Information du Gouvernement <jean-charles.hourdeaux@pm.gouv.fr>",
+  "author": "Service d'Information du Gouvernement <maxime.beaugrand@pm.gouv.fr>",
   "license": "SEE LICENSE IN LICENSE.md",
   "config": {
     "prefix": "fr",
@@ -59,7 +59,7 @@
     "pa11y": "^6.2.3",
     "parse-github-url": "^1.0.2",
     "path": "^0.12.7",
-    "postcss": "^8.4.21",
+    "postcss": "8.4.32",
     "postcss-banner": "^4.0.1",
     "postcss-combine-duplicated-selectors": "^10.0.3",
     "postcss-discard-duplicates": "^5.1.0",

src/analytics/doc/analytics.md

@@ -14,7 +14,7 @@
 > Les différents tests effectués semblent montrer un fonctionnement global sans que nous puissions garantir une compatibilité optimale sur ces versions. N'hésitez pas à nous remonter tous problèmes rencontrés.
 
 
-Le système de design apporte avec lui un outil de collecte de données analytics basé sur la solution Eulérian. Ce package, bien que fourni par le DSFR, peut être utilisé indépendamment de celui-ci via une version standalone.
+Le système de design apporte avec lui un outil de collecte de données analytics basé sur la solution Eulérian. Ce package, bien que fourni par le DSFR, peut être utilisé indépendamment de celui-ci via une [version standalone](analytics/installation.md#Version standalone).
 
 
 

src/analytics/doc/analytics/actions.md

@@ -12,6 +12,9 @@ Les actions correspondent aux évènements et aux interactions que l’on souhai
 
 * Les actions d'interaction sont limitées dans leur envoi à la seule première interaction avec l'élément dans la page, sauf si la donnée associée à l'envoi change. Par exemple, un bouton particulier dans le menu enverra des données au premier click, puis sera limité. Si la page change, il enverra de nouveau des données au premier click. Dans le cas d'un composant de recherche, chaque interaction enverra une requête de recherche différente et passera outre la règle de limitation. Si la requête de recherche est identique à la précédente, celle-ci ne sera pas envoyée.
 
+> **Note** :
+> Les actions ne sont pas supportées dans la [version standalone](./installation.md#Version standalone). Pour mesurer les actions avec l'API analytics, utiliser la version complète du DSFR
+
 #### ActionName
 
 Lorsqu’une action est émise, un actionName est envoyé à Eulérian.
@@ -23,8 +26,8 @@ Ce nom d’action est constitué de 3 éléments :
 * Title : la hiérarchie des intitulés des éléments ou la valeur de l'attribut `data-fr-analytics-action`
 * Id : l'id de l'élément (correspondant à l'attribut `id`sur l'élément) - obligatoire.
 
-> **Important**
-> ⚠️ **Un id est obligatoire sur tous les éléments traqués** (retrouvez les éléments du dsfr nécessitant un id dans la colonne “element” du [tableau d'actions des composants du dsfr](actions/component-actions.md)).
+> **⚠️ Important :**
+> **Un id est obligatoire sur tous les éléments traqués** (retrouvez les éléments du dsfr nécessitant un id dans la colonne “element” du [tableau d'actions des composants du dsfr](actions/component-actions.md)).
 >Il est nécessaire que l’id soit :
 >  * unique : L’id doit être unique au site, par exemple:
 >    * Deux boutons différents ne doivent pas avoir le même id, même sur des pages différentes
@@ -33,7 +36,7 @@ Ce nom d’action est constitué de 3 éléments :
 
 exemple d’actionName : `(click)_titre_niveau_2_›_titre_niveau_3_›_label_de_l_element_[button-id-1]`
 
-> **Note**
+> **Note :**
 > Les espaces sont remplacé par des `_` [_ | low line (U+005F) @ Graphemica](https://graphemica.com/_)
 > Les niveaux de hiérarchie sont séparé par des `›` [› | single right-pointing angle quotation mark (U+203A) @ Graphemica](https://graphemica.com/%E2%80%BA)
 > Les caractères suivants `"'<>*$&~`|\?^~` étant restreints par Eulerian, ils sont remplacés par une équivalence en caractère fullwidth : [Graphemica | Halfwidth and Fullwidth Forms](https://graphemica.com/blocks/halfwidth-and-fullwidth-forms)
@@ -49,7 +52,7 @@ L’API analytics utilise des actions pour suivre les interactions de l’utilis
 
 L'ajout de l'attribut `data-fr-analytics-rating` sur élément particulier permet d'activer la mesure du taux d’interaction sur cet élément, à savoir le rapport entre le nombre de fois où il a été affiché et le nombre de fois où une interaction a eu lieu.
 
-> **Important**
+> **⚠️ Important :**
 > Cette fonctionnalité entraîne un envoi de donnée plus important, la donnée d'affichage étant automatiquement envoyée tandis que l'envoi de la donnée d'interaction se fait à l'intervention de l'utilisateur. Pour rappel, le modèle de facturation dépend du volume d'appels envoyés à Eulerian et l'envoi de multiples affichages de composants entraîne donc une hausse de la consommation de données. Il est important de s’assurer de la pertinence de chaque élément où cette fonctionnalité est activée afin d'optimiser l'envoi de données.
 
 

src/analytics/doc/analytics/collector.md

@@ -48,7 +48,7 @@ _Boolean_
 
 Défini si la mesure d'audience des actions est activée ou non.
 
-* Par défaut, la mesure d'audience des actions est activée.
+* Par défaut, la mesure d'audience des actions est désactivée (`false`)
 
 * * *
 

src/analytics/doc/analytics/installation.md

@@ -1,18 +1,44 @@
 ## Installation
 
+#### Au sein du DSFR
+
 Pour installer le système d’analytics, il suffit d’importer le fichier javascript :
 `/dist/analytics/analytics.module.js` **après** `dsfr.module.js`
 
-Le script d’Eulerian est automatiquement chargé au sein du package, attention à ne pas l’insérer dans la page afin
-d'éviter les doublons.
+Fonctionnalités disponibles :
+- Intégration CMP
+- Optout
+- Collecte de pages
+- Actions dans les composants
+- Actions hors composants
+
+Le script d’Eulerian est automatiquement chargé au sein du package, attention à ne pas l’insérer dans la page afin d'éviter les doublons.
+
+> **⚠️ Important :** 
+> Pour les versions du dsfr inférieures à dsfr-1.9.0 (minimum 1.3.0), il est nécessaire d’ajouter le fichier : `/dist/patch/patch.module.js` **avant** `dsfr.module.js`
+
+Il est préférable d'utiliser l'api dans ses dernières versions pour profiter des optimisations et correctifs
+
+Analytics est un package à part, il n’est pas compris dans le fichier js global du DSFR. Il n'est cependant pas totalement autonome et est dépendant du core du DSFR (compris dans le fichier global du DSFR)
+
+#### Version standalone
+
+Pour installer la version standalone du système d’analytics, il suffit d’importer le fichier javascript :
+`/standalone/analytics/analytics.module.standalone.js`
+
+Fonctionnalités disponibles :
+- Intégration CMP
+- Optout
+- Collecte de pages
+- ~~Actions dans les composants~~
+- ~~Actions hors composants~~
 
-⚠️ Pour les versions du dsfr inférieures à dsfr-1.9.0 (minimum 1.3.0), il est nécessaire d’ajouter le fichier : `/dist/patch/patch.module.js` **avant** `dsfr.module.js`
+Cette version permet d’effectuer la mesure d'audience sans dépendance au DSFR et peut fonctionner de manière autonome.
 
-Il est préférable d'effectuer une montée de version en 1.9.3 pour profiter des optimisations optimales.
+> **⚠️ Important :**
+> La mesure des actions n'est pas disponible dans cette version
 
-Analytics est un package à part, il n’est pas compris dans le fichier js global du dsfr.
-Le package dispose tout de même d’une dépendance au DSFR, notamment au core.
-Une version standalone des analytics permet d’utiliser ce package en dehors de toutes dépendances au DSFR.
+#### Pour aller plus loin
 
 Pour le fonctionnement du package Analytics, une configuration particulière du dsfr est nécessaire :
 [Configuration](installation/configuration.md)

src/analytics/doc/analytics/installation/configuration.md

@@ -25,5 +25,5 @@ La configuration doit être placée **avant** les fichiers `patch.module.js`, `d
 </script>
 ```
 
-Utiliser le DSFR mode verbose permet d’afficher dans la console le résultat de la fonction collect(), montrant les
-informations envoyées à Eulerian.
+Les résultats de la fonction collect(), montrant les informations envoyées à Eulerian, sont affichés dans la console.
+En mode production, les logs n'apparaissent pas dans la console. Il est alors possible de surcharger la configuration via le paramètre dans l'url : `?production=false`

src/analytics/script/integration/component/breadcrumb/breadcrumb-link-actionee.js

@@ -11,7 +11,7 @@ class BreadcrumbLinkActionee extends ComponentActionee {
 
   init () {
     this.detectInteractionType();
-    this.listenClick();
+    this.listenActionClick();
   }
 
   handleClick () {

src/analytics/script/integration/component/button/button-actionee.js

@@ -14,7 +14,7 @@ class ButtonActionee extends ComponentActionee {
 
   init () {
     this.detectInteractionType();
-    this.listenClick();
+    this.listenActionClick();
   }
 
   handleClick () {

src/analytics/script/integration/component/card/card-actionee.js

@@ -16,7 +16,7 @@ class CardActionee extends ComponentActionee {
     if (link) {
       this.link = link;
       this.detectInteractionType(link);
-      this.listenClick(link);
+      this.listenActionClick(link);
     }
   }
 

src/analytics/script/integration/component/connect/connect-actionee.js

@@ -12,7 +12,7 @@ class ConnectActionee extends ComponentActionee {
 
   init () {
     this.detectInteractionType();
-    this.listenClick();
+    this.listenActionClick();
   }
 
   get label () {

src/analytics/script/integration/component/connect/connect-link-actionee.js

@@ -12,7 +12,7 @@ class ConnectLinkActionee extends ComponentActionee {
 
   init () {
     this.detectInteractionType();
-    this.listenClick();
+    this.listenActionClick();
   }
 
   get label () {

src/analytics/script/integration/component/download/download-actionee.js

@@ -12,7 +12,7 @@ class DownloadActionee extends ComponentActionee {
 
   init () {
     this.detectInteractionType();
-    this.listenClick();
+    this.listenActionClick();
   }
 
   get label () {

src/analytics/script/integration/component/footer/footer-link-actionee.js

@@ -11,7 +11,7 @@ class FooterLinkActionee extends ComponentActionee {
 
   init () {
     this.detectInteractionType();
-    this.listenClick();
+    this.listenActionClick();
   }
 
   get label () {

src/analytics/script/integration/component/link/link-actionee.js

@@ -12,7 +12,7 @@ class LinkActionee extends ComponentActionee {
 
   init () {
     this.detectInteractionType();
-    this.listenClick();
+    this.listenActionClick();
   }
 
   get label () {

src/analytics/script/integration/component/navigation/navigation-link-actionee.js

@@ -12,7 +12,7 @@ class NavigationLinkActionee extends ComponentActionee {
 
   init () {
     this.detectInteractionType();
-    this.listenClick();
+    this.listenActionClick();
   }
 
   get label () {

src/analytics/script/integration/component/pagination/pagination-link-actionee.js

@@ -11,7 +11,7 @@ class PaginationLinkActionee extends ComponentActionee {
 
   init () {
     this.detectInteractionType();
-    this.listenClick();
+    this.listenActionClick();
   }
 
   get label () {

src/analytics/script/integration/component/sidemenu/sidemenu-link-actionee.js

@@ -12,7 +12,7 @@ class SidemenuLinkActionee extends ComponentActionee {
 
   init () {
     this.detectInteractionType();
-    this.listenClick();
+    this.listenActionClick();
   }
 
   get label () {

src/analytics/script/integration/component/summary/summary-link-actionee.js

@@ -12,7 +12,7 @@ class SummaryLinkActionee extends ComponentActionee {
 
   init () {
     this.detectInteractionType();
-    this.listenClick();
+    this.listenActionClick();
   }
 
   get label () {

src/analytics/script/integration/component/tag/tag-actionee.js

@@ -19,12 +19,12 @@ class TagActionee extends ComponentActionee {
 
       case this.isInteractive && this.node.classList.contains(TagSelector.DISMISSIBLE):
         this.setDismissType();
-        this.listenClick();
+        this.listenActionClick();
         break;
 
       case this.isInteractive:
         this.detectInteractionType();
-        this.listenClick();
+        this.listenActionClick();
         break;
     }
   }

src/analytics/script/integration/component/tile/tile-actionee.js

@@ -16,7 +16,7 @@ class TileActionee extends ComponentActionee {
     if (link) {
       this.link = link;
       this.detectInteractionType(link);
-      this.listenClick(link);
+      this.listenActionClick(link);
     }
   }
 

src/analytics/script/integration/component/translate/translate-selector.js

@@ -5,6 +5,6 @@ const COLLAPSE = api.internals.ns.selector('collapse');
 
 export const TranslateSelector = {
   BUTTON: `${TRANSLATE}__btn`,
-  COLLAPSE: `${TRANSLATE} > ${COLLAPSE}, ${TRANSLATE} > *:not(${TRANSLATE}):not(${COLLAPSE}) > ${COLLAPSE}, ${TRANSLATE} > *:not(${TRANSLATE}, ${COLLAPSE}) > *:not(${TRANSLATE}, ${COLLAPSE}) > ${COLLAPSE}`,
+  COLLAPSE: `${TRANSLATE} > ${COLLAPSE}, ${TRANSLATE} > *:not(${TRANSLATE}):not(${COLLAPSE}) > ${COLLAPSE}, ${TRANSLATE} > *:not(${TRANSLATE}):not(${COLLAPSE}) > *:not(${TRANSLATE}):not(${COLLAPSE}) > ${COLLAPSE}`,
   COLLAPSE_LEGACY: `${TRANSLATE} ${COLLAPSE}`
 };

src/analytics/script/integration/core/action/a-actionee.js

@@ -11,7 +11,7 @@ class AActionee extends Actionee {
 
   init () {
     this.detectInteractionType();
-    this.listenClick();
+    this.listenActionClick();
   }
 
   get label () {

src/analytics/script/integration/core/actionee.js

@@ -138,10 +138,10 @@ class Actionee extends api.core.Instance {
     this._type = Type.CLICK;
   }
 
-  listenClick (target) {
+  listenActionClick (target) {
     if (target) {
       this._clickTarget = target;
-      this._clickTarget.addEventListener('click', this.handlingClick, { capture: true });
+      this._clickTarget.addEventListener('click', this._handlingClick, { capture: true });
     } else this.listenClick({ capture: true });
   }
 
@@ -258,7 +258,7 @@ class Actionee extends api.core.Instance {
 
   dispose () {
     if (this._clickTarget) {
-      this._clickTarget.removeEventListener('click', this.handlingClick);
+      this._clickTarget.removeEventListener('click', this._handlingClick);
     }
     super.dispose();
   }

src/analytics/standalone/api.js

@@ -1,14 +1,28 @@
-import api from '../api.js';
 import ns from '../../core/script/api/utilities/namespace';
-import { completeAssign } from '../../core/script/api/utilities/property/complete-assign';
-import { Modes } from '../../core/script/api/options/options.js';
+import { Modes } from '../../core/script/api/options/modes.js';
+import config from '../../core/config';
 
-api.inspector = completeAssign(console, {});
+const api = {};
+
+const hasLoggingLevel = (level) => api.internals.configuration.production !== true && (level > 1 || api.internals.configuration.verbose);
+
+api.inspector = {
+  log: (...msg) => hasLoggingLevel(0) ? console.log.apply(console, msg) : null,
+  debug: (...msg) => hasLoggingLevel(1) ? console.debug.apply(console, msg) : null,
+  info: (...msg) => hasLoggingLevel(2) ? console.info.apply(console, msg) : null,
+  warn: (...msg) => hasLoggingLevel(3) ? console.warn.apply(console, msg) : null,
+  error: (...msg) => hasLoggingLevel(4) ? console.error.apply(console, msg) : null
+};
+
+const configuration = window[config.namespace];
 
 api.internals = {
-  ns: ns
+  ns: ns,
+  configuration: configuration
 };
 
 api.Modes = Modes;
+api.mode = configuration.mode || Modes.AUTO;
 
+window[config.namespace] = api;
 export default api;