🔖 chore(*): DSFR v1.10.0-rc1

README.md

@@ -166,10 +166,10 @@ Afin d’utiliser ces icônes, des classes utilitaires CSS sont associés à cha
 Ces classes sont disponible dans `utility` qui importe `dist/utility/icons/icons.css`.
 Il est aussi possible d’importer uniquement certaines catégories d’icônes afin d’optimiser le poids. Par ex. :  `dist/utility/icons/system/system.css` pour les icônes “system”.
 
-Pour plus d’informations : [Voir la documentation des icônes](https://www.systeme-de-design.gouv.fr/elements-d-interface/fondamentaux-techniques/icones).
+Pour plus d’informations : [Voir la documentation des icônes](https://www.systeme-de-design.gouv.fr/elements-d-interface/fondamentaux-techniques/icone).
 
 ### Favicon
-[La documentation des favicons](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/icones-de-favoris) détaille la façon de les implémenter dans vos pages.
+[La documentation des favicons](https://www.systeme-de-design.gouv.fr/elements-d-interface/fondamentaux-techniques/icone-de-favoris) détaille la façon de les implémenter dans vos pages.
 
 ## Fonctionnement
 

module/animate/_index.scss

@@ -0,0 +1 @@
+@forward 'mixin/caret';

module/animate/mixin/_caret.scss

@@ -0,0 +1,11 @@
+@mixin caret() {
+  &::after {
+    transition: transform 0.3s;
+  }
+
+  &[aria-expanded='true'] {
+    &::after {
+      transform: rotate(-180deg);
+    }
+  }
+}

module/color/mixin/_data-uri-svg.scss

@@ -25,7 +25,7 @@
   $light: result.get($light-colors, $value);
   $light: specificity.important($light, $important);
 
-  @if $legacy {
+  @if $legacy and $prop != false {
     @include legacy.is(ie11) {
       #{$prop}: #{url(utilities.data-uri(string.encode-svg($light, true), svg))};
     }
@@ -41,6 +41,8 @@
       --data-uri-svg: #{url(utilities.data-uri(string.encode-svg($dark, false), svg))};
     }
 
-    #{$prop}: var(--data-uri-svg);
+    @if $prop != false {
+      #{$prop}: var(--data-uri-svg);
+    }
   }
 }

module/color/mixin/_element.scss

@@ -14,7 +14,7 @@
 
 $COLOR: constant.$value;
 
-@mixin _element($prop, $context, $tokens, $options: (), $value: $COLOR) {
+@mixin element($prop, $context, $tokens, $options: (), $value: $COLOR) {
   $legacy: map.get($options, legacy);
   $important: map.get($options, important);
   $hover: map.get($options, hover);
@@ -101,7 +101,7 @@ $COLOR: constant.$value;
   @if not map.has-key($options, hover) {
     $options: map.merge($options, (hover: inherit));
   }
-  @include _element(background-color, background, $tokens, $options);
+  @include element(background-color, background, $tokens, $options);
 }
 
 /// @param {list} $tokens - liste des tokens de décision
@@ -156,7 +156,7 @@ $COLOR: constant.$value;
     }
     $value: $transformed;
   }
-  @include _element(background-image, background, $tokens, $options, $value);
+  @include element(background-image, background, $tokens, $options, $value);
 }
 
 /// Ajout d'une couleur de texte sur un élément
@@ -166,7 +166,7 @@ $COLOR: constant.$value;
 ///   - legacy {boolean}: version pour navigateurs modernes ou anciens.
 ///   - important {boolean}: si true, applique !important à la règle css
 @mixin text($tokens, $options) {
-  @include _element(color, text, $tokens, $options);
+  @include element(color, text, $tokens, $options);
 }
 
 /// Ajout d'une couleur de texte sur un élément
@@ -176,7 +176,7 @@ $COLOR: constant.$value;
 ///   - legacy {boolean}: version pour navigateurs modernes ou anciens.
 ///   - important {boolean}: si true, applique !important à la règle css
 @mixin text-fill($tokens, $options) {
-  @include _element(-webkit-text-fill-color, text, $tokens, $options);
+  @include element(-webkit-text-fill-color, text, $tokens, $options);
 }
 
 /// Ajout d'une couleur de fill sur un élément
@@ -186,7 +186,7 @@ $COLOR: constant.$value;
 ///   - legacy {boolean}: version pour navigateurs modernes ou anciens.
 ///   - important {boolean}: si true, applique !important à la règle css
 @mixin fill($tokens, $options) {
-  @include _element(fill, background , $tokens, $options);
+  @include element(fill, background , $tokens, $options);
 }
 
 /// Ajout d'une couleur de border sur un élément
@@ -202,7 +202,7 @@ $COLOR: constant.$value;
   @if map.has-key($options, side) {
     $prop:border-#{map.get($options, side)};
   }
-  @include _element($prop, border, $tokens, $options, $value);
+  @include element($prop, border, $tokens, $options, $value);
 }
 
 @mixin no-border($options: ()) {
@@ -228,7 +228,7 @@ $COLOR: constant.$value;
 ///   - important {boolean}: si true, applique !important à la règle css
 /// @param {List} $value - définition des propriétés d'outline
 @mixin outline($tokens, $options, $value:1px solid $COLOR) {
-  @include _element(outline, border, $tokens, $options, $value);
+  @include element(outline, border, $tokens, $options, $value);
 }
 
 /// Ajout d'une couleur de box-shadow sur un élément
@@ -257,7 +257,7 @@ $COLOR: constant.$value;
   @if $has-keys {
     $value: $transformed;
   }
-  @include _element(box-shadow, border, $tokens, $options, spacing.space($value));
+  @include element(box-shadow, border, $tokens, $options, spacing.space($value));
 }
 
 /// Supprime la shadow-box sur l'élément

module/color/variable/_box-shadows.scss

@@ -8,6 +8,7 @@ $values: (
   top-1-in: inset 0 1px 0 0 $COLOR,
   top-1-out: 0 -1px 0 0 $COLOR,
   right-1-in: inset -1px 0 0 0 $COLOR,
+  right-1-out: 1px 0 0 0 $COLOR,
   bottom-1-in: inset 0 -1px 0 0 $COLOR,
   bottom-1-out: 0 1px 0 0 $COLOR,
   left-1-in: inset 1px 0 0 0 $COLOR,

module/elevation/mixin/_elevate.scss

@@ -10,7 +10,9 @@
   $legacy: map.get($options, legacy);
 
   @include z-index.z-index($level, $legacy);
-  @include background.background($layer, $options);
+  @if not map.get($options, no-background) {
+    @include background.background($layer, $options);
+  }
 
   @if not $legacy {
     @include shadow.shadow($layer);

module/reset/_index.scss

@@ -0,0 +1 @@
+@forward 'mixin/appearance';

module/reset/mixin/_appearance.scss

@@ -0,0 +1,12 @@
+/// Mixin de propriété appearance avec support des plateformes antérieures
+///
+/// @example scss -
+///   .foo {
+///     @include appearance(none);
+///   }
+
+@mixin appearance($appearance: auto) {
+  -webkit-appearance: $appearance;
+  -moz-appearance: $appearance;
+  appearance: $appearance;
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gouvfr/dsfr",
-  "version": "1.9.3",
+  "version": "1.10.0-rc.1",
   "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>",
@@ -72,7 +72,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "sass": "^1.59.2",
     "sass-true": "^6.1.0",
-    "semver": "^7.5.0",
+    "semver": "^7.5.3",
     "standard": "^16.0.4",
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^20.0.0",

src/analytics/.package.yml

@@ -16,10 +16,10 @@ script:
   - password
   - navigation
   - tab
+  - tooltip
   - display
   - table
   - tag
-  - download
 example:
   style:
     - core
@@ -64,6 +64,7 @@ example:
     - tag
     - tile
     - toggle
+    - tooltip
     - transcription
     - translate
     - upload

src/analytics/doc/analytics.md

@@ -2,25 +2,14 @@
 # Analytics
 
 > **Warnning**
-> Version Beta
->  * Les tests sur les données remontées sont toujours en cours.
-Merci de nous informer des problématiques que vous pourriez rencontrer.
->  * Les versions précédentes du DSFR sont en partie supportées.
-> Le périmètre de ce support sera détaillé dans de prochaines versions.
-> L’usage avec d’anciennes versions est livré “AS IS”.
+> Ce package est prévu pour fonctionner de manière optimale avec la version dsfr-1.9.0 ou suppérieure.
+> L'ajout d'un patch, présent dans `dist/patch/`, permet le support des versions précédentes (à partir de la version dsfr-1.3.0).
+> Pour ce faire, importer `dist/patch/patch.module.min.js` et `dist/patch/patch.nomodule.min.js` après l'élément de configuration window.dsfr.analytics et avant le JS du DSFR.
+> 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.
 
 
-> **Note**
->  * Support de IE11
->  * Support des SPA (Angular, React et Vue)
->  * Tous les composants implémentés
->  * Taux de click désactivé par défaut (économie de donnée) et activable via la configuration
->  * Opt out complet supporté
->  * id requis sur les éléments tracés, l’API remonte les id manquants dans la console
-
 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.
 
-Ce package est compatible à partir de la version dsfr-1.9.0, pour les versions précédentes l’ajout d'un patch permet unsupport jusqu’à dsfr-1.3.0.
 
 
 - Analytics
@@ -29,12 +18,12 @@ Ce package est compatible à partir de la version dsfr-1.9.0, pour les versions
     - [class ConsentManagerPlatform](analytics/installation/cmp.md)
     - [class Opt](analytics/installation/opt.md)
   - [Collector](analytics/collector.md)
-    - [class Analytics](analytics/classes/analytics.md)
-    - [class Page](analytics/classes/page.md)
-    - [class User](analytics/classes/user.md)
-    - [class Site](analytics/classes/site.md)
-    - [class Search](analytics/classes/search.md)
-    - [class Funnel](analytics/classes/funnel.md)
+    - [class Analytics](analytics/collector/analytics.md)
+    - [class Page](analytics/collector/page.md)
+    - [class User](analytics/collector/user.md)
+    - [class Site](analytics/collector/site.md)
+    - [class Search](analytics/collector/search.md)
+    - [class Funnel](analytics/collector/funnel.md)
   - [Actions](analytics/actions.md)
     - [Actions d’interaction hors composant](analytics/actions/custom-actions.md)
     - [Actions sur les composants DSFR](analytics/actions/component-actions.md)

src/analytics/doc/analytics/actions.md

@@ -17,13 +17,9 @@ Ce nom d’action est constitué du type d’action, de l’intitulé de l'élé
 > **Note**
 > ⚠️ **Un id est obligatoire sur tous les éléments traqués** (retrouvez les éléments du dsfr nécéssitant 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, ex:
-
 >  * Deux boutons différents ne doivent pas avoir le même id, même sur des pages différentes
-
 >  * Le header peut avoir le même id sur toute les pages s’il est identique
-
 >  * pérenne : L’id doit être le même pour tous les utilisateurs et figé dans le temps.
 
 exemple d’actionName : `(click)_titre_niveau_2_›_titre_niveau_3_›_label_de_l_element_[button-id-1]`
@@ -45,7 +41,7 @@ L’activation de cette fonctionnalité se fait d’abord dans le fichier de [co
 Après avoir été activée, elle sera automatiquement en place sur les composants qui supportent la fonctionnalité (voir dernière colonne dans le [tableau](actions/component-actions.md)).
 
 > ***Note**
-> Cette fonctionnalité peut entraîner un envoi de données très important, puisque chaque composant permettant de suivre le taux de click enverra la donnée d’affichage. Il est important de s’assurer de la pertinence de cette fonctionnalité.
+> Cette fonctionnalité est désactivée par défaut car elle peut entraîner un envoi de données très important (puisque chaque composant permettant de suivre le taux de click enverra la donnée d’affichage). Il est important de s’assurer de la pertinence de cette fonctionnalité.
 
 
 - Analytics/Actions

src/analytics/doc/analytics/actions/component-actions.md

@@ -1,6 +1,6 @@
 ## Actions sur les composants DSFR
 
-Les composants du DSFR envoient automatiquement des actions prédéfinies, aucune action supplémentaire n’est nécessaire pour ces actions.
+Les composants du DSFR envoient automatiquement des actions prédéfinies.
 
 Le tableau, ci-dessous, regroupe les différentes actions remontées à Eulérian pour chaque composant du DSFR.
 Vous trouverez pour chaque composant une colonne :
@@ -10,7 +10,7 @@ Vous trouverez pour chaque composant une colonne :
   * **Type** : Type d'action envoyé à Eulérian
   * **Breakpoints** : Si renseigné, l'action est définie uniquement sur ces [breakpoints] de largeur de page. Si vide, sur tous les [breakpoints].
   * **Valeur** : Valeur de l'action envoyée à Eulérian
-  * **Label** : Valeurs possibles du label, dans l'ordre de priorité, en fonction de leur présence 
+  * **Label** : Valeurs possibles du label, dans l'ordre de priorité, en fonction de leur présence
 
 
 | **Composant** | **Elément**                                                                                                 |            **Type**             | **Breakpoints** |        **Valeur**        | **Label**                                                                                                                                                    | **Taux** **de click** |

src/analytics/doc/analytics/collector/page.md

@@ -14,9 +14,13 @@ window.dsfr.analytics.page
             page: {
                 path: 'path\_name/from/url', // path for page tracking
                 referrer: 'path\_name/ref/url/', // referrer for virtual pages (not for real page, eulerian automatically collects document.referrer)
+                id: 'page-id', // unique page id (string)
                 title: 'page title', // page title for virtual pages
                 name: 'page name', // equivalent to title if not defined
+                author: 'John Doe', // page author name
+                date: 'YYYY/MM/DD' // page creation date
                 labels: \['label1', 'label2', 'label3', 'label4', 'label5'\],
+                tags: \['tag1', 'tag2', 'tagN'\], // no tags limit
                 template: 'nom template', // page template
                 group: 'group', // page group. if not defined, fallback to template value
                 segment: 'segment', // site segment. if not defined, fallback to template value
@@ -46,9 +50,9 @@ _String_ (EA: path)
 
 `window.dsfr.analytics.page.path`
 
-* Défini le chemin de la page.
+* Défini le chemin de la page
 
-* Utilise `document.location.pathname` si non défini.
+* Utilise `document.location.pathname` si non défini
 
 * * *
 
@@ -62,6 +66,16 @@ _String_ (EA: referrer)
 
 * * *
 
+##### id
+
+_String_ (EA: page\_id)
+
+`window.dsfr.analytics.page.id`
+
+* Défini l'identifiant unique de la page
+
+* * *
+
 ##### title
 
 _String_ (EA: page\_title)
@@ -82,6 +96,28 @@ _String_ (EA: page\_name)
 
 * * *
 
+##### author
+
+_String_ (EA: page\_author)
+
+`window.dsfr.analytics.page.author`
+
+* Défini le nom de l'auteur de la page
+
+* * *
+
+##### date
+
+_Date_ (EA: page\_date)
+
+`window.dsfr.analytics.page.date`
+
+* Défini la date de publication de la page
+
+* * *
+
+
+
 ##### labels
 
 _Array`<String>`_ (EA: pagelabel)
@@ -105,6 +141,16 @@ page\_category3)
 
 * * *
 
+##### tags
+
+_Array`<String>`_ (EA: page\_tags)
+
+`window.dsfr.analytics.page.tags`
+
+* Défini les tags associés à la page. Si plusieurs tags, ils doivent être séparés par une virgule sans espaces (pas de limite)
+
+* * *
+
 ##### template
 
 _String_ (EA: template)
@@ -141,9 +187,7 @@ _String_ (EA: page\_subtemplate)
 
 `window.dsfr.analytics.page.subtemplate`
 
-Apporte un niveau de détail supplémentaire lié au contenu pour les page\_template comprenant beaucoup de pages
-sur
-des thèmes différents
+Apporte un niveau de détail supplémentaire lié au contenu pour les page\_template comprenant beaucoup de pages sur des thèmes différents
 
 * * *