Merge branch 'dev-1.10.0' into fix/tab-arrows

GouvernementFR · Feb 27, 2023 · 8bf6b4f · 8bf6b4f
2 parents abcd75c + fcffc5a
commit 8bf6b4f
Show file tree

Hide file tree

Showing 16 changed files with 68 additions and 41 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gouvfr/dsfr",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "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>",

diff --git a/src/component/consent/example/index.ejs b/src/component/consent/example/index.ejs
@@ -6,4 +6,4 @@
 
 <%- sample('Placeholder cookies désactivés standard', './sample/placeholder.ejs', {}, true); %>
 
-<%- sample('Placeholder dans un bloc vidéo responsive grande taille', '../../content/example/sample/media-vid-1x1', {content: {service: "Youtube", size:'lg', consent: { title: '**Nom du service** est désactivé', body: 'Autorisez le dépôt de cookies pour accèder à cette fonctionnalité.', button: {size: 'md', label: "Autoriser"}}, transcription: {id: uniqueId('transcription'), content: randomContent(['title', 'text', 'list'])}}}, true); %>
+<%- sample('Placeholder dans un bloc vidéo responsive grande taille', '../../content/example/sample/media-vid-1x1', {content: {service: "Youtube", size:'lg', consent: { title: '**Nom du service** est désactivé', body: 'Autorisez le dépôt de cookies pour accèder à cette fonctionnalité.', button: {size: 'md', label: "Autoriser"}}, transcription: {id: uniqueId('transcription'), title: getText('modal.title', 'transcription'), content: randomContent(['text', 'list'])}}}, true); %>
diff --git a/src/component/content/example/index.ejs b/src/component/content/example/index.ejs
@@ -2,52 +2,52 @@
 
 <%- sample('Média image edito', './sample/media-img', {}, true); %>
 
-<%- sample('Média image edito, petite taille', './sample/media-img', {content:{size:'sm'}}, true); %>
+<%- sample('Média image edito, petite taille', './sample/media-img', { content: { size:'sm' } }, true); %>
 
-<%- sample('Média image edito, grande taille', './sample/media-img', {content:{size:'lg'}}, true); %>
+<%- sample('Média image edito, grande taille', './sample/media-img', { content: { size:'lg' } }, true); %>
 
-<%- sample('Média image edito ratio 32x9', './sample/media-img', {content:{ratio:'32x9'}}, true); %>
+<%- sample('Média image edito ratio 32x9', './sample/media-img', { content: { ratio:'32x9' } }, true); %>
 
-<%- sample('Média image edito ratio 16x9', './sample/media-img', {content:{ratio:'16x9'}}, true); %>
+<%- sample('Média image edito ratio 16x9', './sample/media-img', { content: { ratio:'16x9' } }, true); %>
 
-<%- sample('Média image edito ratio 3x2', './sample/media-img', {content:{ratio:'3x2'}}, true); %>
+<%- sample('Média image edito ratio 3x2', './sample/media-img', { content: { ratio:'3x2' } }, true); %>
 
-<%- sample('Média image edito ratio 4x3', './sample/media-img', {content:{ratio:'4x3'}}, true); %>
+<%- sample('Média image edito ratio 4x3', './sample/media-img', { content: { ratio:'4x3' } }, true); %>
 
-<%- sample('Média image edito ratio 1x1', './sample/media-img', {content:{ratio:'1x1'}}, true); %>
+<%- sample('Média image edito ratio 1x1', './sample/media-img', { content: { ratio:'1x1' } }, true); %>
 
-<%- sample('Média image edito ratio 3x4', './sample/media-img', {content:{ratio:'3x4'}}, true); %>
+<%- sample('Média image edito ratio 3x4', './sample/media-img', { content: { ratio:'3x4' } }, true); %>
 
-<%- sample('Média image edito ratio 2x3', './sample/media-img', {content:{ratio:'2x3'}}, true); %>
+<%- sample('Média image edito ratio 2x3', './sample/media-img', { content: { ratio:'2x3' } }, true); %>
 
-<%- sample('Média image en svg, porteur d’information', './sample/media-svg', {content:{illustration:false}}, true); %>
+<%- sample('Média image en svg, porteur d’information', './sample/media-svg', { content: { illustration: false } }, true); %>
 
-<%- sample('Média image, SVG décoratif', './sample/media-svg', {content:{illustration:true}}, true); %>
+<%- sample('Média image, SVG décoratif', './sample/media-svg', { content: { illustration: true } }, true); %>
 
-<%- sample('Média image avec une transcription', './sample/media-img', {content: {transcription: {id: uniqueId('transcription'), content: randomContent(['title', 'text', 'list'])}}}, true); %>
+<%- sample('Média image avec une transcription', './sample/media-img', { content: { transcription: true } }, true); %>
 
-<%- sample('Média video edito, ratio d‘aspect 16/9 par défaut', './sample/media-vid-default', {content: {transcription: {id: uniqueId('transcription'), content: randomContent(['title', 'text', 'list'])}}}, true); %>
+<%- sample('Média video edito, ratio d‘aspect 16/9 par défaut', './sample/media-vid-default', { content: { transcription: true } }, true); %>
 
-<%- sample('Média video edito, ratio d‘aspect 16/9 par défaut, petite taille', './sample/media-vid-default', {content:{size:'sm', transcription: {id: uniqueId('transcription'), content: randomContent(['title', 'text', 'list'])}}}, true); %>
+<%- sample('Média video edito, ratio d‘aspect 16/9 par défaut, petite taille', './sample/media-vid-default', { content: { size:'sm', transcription: true } }, true); %>
 
-<%- sample('Média video edito, ratio d‘aspect 16/9 par défaut, grande taille', './sample/media-vid-default', {content:{size:'lg', transcription: {id: uniqueId('transcription'), content: randomContent(['title', 'text', 'list'])}}}, true); %>
+<%- sample('Média video edito, ratio d‘aspect 16/9 par défaut, grande taille', './sample/media-vid-default', { content: { size:'lg', transcription: true } }, true); %>
 
-<%- sample('Média video edito, ratio d‘aspect 4x3', './sample/media-vid-4x3', {content: {transcription: {id: uniqueId('transcription'), content: randomContent(['title', 'text', 'list'])}}}, true); %>
+<%- sample('Média video edito, ratio d‘aspect 4x3', './sample/media-vid-4x3', { content: { transcription: true } }, true); %>
 
-<%- sample('Média video edito, ratio d‘aspect 4x3, petite taille', './sample/media-vid-4x3', {content:{size:'sm', transcription: {id: uniqueId('transcription'), content: randomContent(['title', 'text', 'list'])}}}, true); %>
+<%- sample('Média video edito, ratio d‘aspect 4x3, petite taille', './sample/media-vid-4x3', { content:{ size:'sm', transcription: true } }, true); %>
 
-<%- sample('Média video edito, ratio d‘aspect 4x3, grande taille', './sample/media-vid-4x3', {content:{size:'lg', transcription: {id: uniqueId('transcription'), content: randomContent(['title', 'text', 'list'])}}}, true); %>
+<%- sample('Média video edito, ratio d‘aspect 4x3, grande taille', './sample/media-vid-4x3', { content:{ size:'lg', transcription: true } }, true); %>
 
-<%- sample('Média video edito, ratio d‘aspect 1x1', './sample/media-vid-1x1', {content: {transcription: {id: uniqueId('transcription'), content: randomContent(['title', 'text', 'list'])}}}, true); %>
+<%- sample('Média video edito, ratio d‘aspect 1x1', './sample/media-vid-1x1', { content: { transcription: true } }, true); %>
 
-<%- sample('Média video edito, ratio d‘aspect 1x1, petite taille', './sample/media-vid-1x1', {content:{size:'sm', transcription: {id: uniqueId('transcription'), content: randomContent(['title', 'text', 'list'])}}}, true); %>
+<%- sample('Média video edito, ratio d‘aspect 1x1, petite taille', './sample/media-vid-1x1', { content: { size:'sm', transcription: true } }, true); %>
 
-<%- sample('Média video edito, ratio d‘aspect 1x1, grande taille', './sample/media-vid-1x1', {content:{size:'lg', transcription: {id: uniqueId('transcription'), content: randomContent(['title', 'text', 'list'])}}}, true); %>
+<%- sample('Média video edito, ratio d‘aspect 1x1, grande taille', './sample/media-vid-1x1', { content: { size:'lg', transcription: true } }, true); %>
 
 <%- deprecation(); %>
 
 <%- sample('Média video edito, ratio d‘aspect 16/9 par défaut', '../deprecated/example/sample/media-vid-default', {}, true); %>
 
-<%- sample('Média video edito, ratio d‘aspect 4/3', '../deprecated/example/sample/media-vid-default', {content:{ratio:'4x3'}}, true); %>
+<%- sample('Média video edito, ratio d‘aspect 4/3', '../deprecated/example/sample/media-vid-default', { content: { ratio:'4x3' } }, true); %>
 
-<%- sample('Média image edito, ratio d‘aspect 4/3', '../deprecated/example/sample/media-img', {content:{ratio:'4x3'}}, true); %>
+<%- sample('Média image edito, ratio d‘aspect 4/3', '../deprecated/example/sample/media-img', { content: { ratio:'4x3' } }, true); %>
diff --git a/src/component/content/example/sample/media-default.ejs b/src/component/content/example/sample/media-default.ejs
@@ -0,0 +1,12 @@
+<%
+const content = locals.content || {};
+
+if (content.transcription === true) content.transcription = {
+  id: uniqueId('transcription'),
+  title: getText('modal.title', 'transcription'),
+  content: randomContent(['text', 'list'])
+};
+
+%>
+
+<%- include('../../template/ejs/media', { content: content }); %>
diff --git a/src/component/content/example/sample/media-img.ejs b/src/component/content/example/sample/media-img.ejs
@@ -9,4 +9,4 @@ let data = {
 };
 %>
 
-<%- include('../../template/ejs/media', {content:data}); %>
+<%- include('media-default', {content:data}); %>
diff --git a/src/component/content/example/sample/media-svg.ejs b/src/component/content/example/sample/media-svg.ejs
@@ -7,6 +7,7 @@ let data = {
   caption: 'Description / Source',
   link: 'Label lien',
 };
+
 %>
 
-<%- include('../../template/ejs/media', {content:data}); %>
+<%- include('media-default', {content:data}); %>
diff --git a/src/component/content/example/sample/media-vid-default.ejs b/src/component/content/example/sample/media-vid-default.ejs
@@ -1,11 +1,12 @@
 <%
 const content = locals.content || {};
 const data = {
-  vid: { ...vidData(null, null, content.ratio || null)},
-  caption: 'Description / Source',
-  link: 'Label lien',
-  ...content
+  vid: {
+    ...vidData(null, null, content.ratio || null)},
+    caption: 'Description / Source',
+    link: 'Label lien',
+    ...content
 };
 %>
 
-<%- include('../../template/ejs/media', {content:data}); %>
+<%- include('media-default', {content:data}); %>
diff --git a/src/component/footer/style/module/_top.scss b/src/component/footer/style/module/_top.scss
@@ -10,8 +10,8 @@
 #{ns(footer)} {
   &__top {
     @include display-flex(null);
-    @include margin(-10v 0 4v);
-    @include margin(-10v 0 10v, md);
+    @include margin(-9.5v 0 4v);
+    @include margin(-9.5v 0 10v, md);
     @include padding(8v 0 4v);
   }
 

diff --git a/src/component/link/style/tool/_build.scss b/src/component/link/style/tool/_build.scss
@@ -101,7 +101,7 @@
       @if $places != null {
         @each $place in $places {
           @include _link-class($base, $size, $place) {
-            @include _build-link-icon($size-settings, $place, $size);
+            @include _build-link-icon($size-settings, $place, $size, true);
           }
 
           @if $align-on-content {

diff --git a/src/component/link/style/tool/_icon.scss b/src/component/link/style/tool/_icon.scss
@@ -5,7 +5,7 @@
 
 @use 'module/spacing';
 
-@mixin _build-link-icon($size-settings, $place, $size:md) {
+@mixin _build-link-icon($size-settings, $place, $size:md, $override-icon: true) {
 
   $icon-size: icon-size(map_get($size-settings, icon));
 
@@ -30,7 +30,7 @@
     overflow: initial;
     max-width: 100%;
     max-height: none;
-    @include after {
+    @include icon-content(false, $override-icon) {
       --icon-size: #{$icon-size};
       margin-right: -($icon-margin);
       margin-left: $icon-margin-x;

diff --git a/src/component/link/style/tool/_nest.scss b/src/component/link/style/tool/_nest.scss
@@ -23,7 +23,7 @@
         $is-before: _get-link-is-before($places, $place);
         $icon-size: _get-link-icon-size($size-settings, $places, $place);
         @if $place != null {
-          @include _build-link-icon($size-settings, $place, $size);
+          @include _build-link-icon($size-settings, $place, $size, $override-icon);
         }
         @include icon-style($restrain);
         @include icon-image($icon, $restrain);

diff --git a/src/component/tag/style/_legacy.scss b/src/component/tag/style/_legacy.scss
@@ -16,7 +16,8 @@
     }
   }
 
-  @include clickable-selector {
+  button,
+  input[type=button] {
     #{ns(tag)} {
       // empeche le hover du tag pressable sur ie
       @include pressed-selector(true) {

diff --git a/src/component/tag/style/_scheme.scss b/src/component/tag/style/_scheme.scss
@@ -22,6 +22,7 @@
     }
   }
 
+  a,
   button,
   input[type=button] {
     &#{ns(tag)} {
@@ -32,7 +33,12 @@
         @include color.text(action-high accent, (legacy: $legacy));
         @include color.background(action-low accent, (legacy: $legacy, hover: true));
       }
+    }
+  }
 
+  button,
+  input[type=button] {
+    &#{ns(tag)} {
       @include pressed-selector(true) {
         &:not(:disabled) {
           @include color.transparent-background((legacy:$legacy));

diff --git a/src/component/tag/style/module/_group.scss b/src/component/tag/style/module/_group.scss
@@ -23,7 +23,8 @@
   &#{ns-group(tags)}--sm {
     @include nest-tag(sm, null);
 
-    @include clickable-selector {
+    button,
+    input[type=button] {
       &#{ns(tag)} {
         &#{ns(tag)}--dismiss {
           @include icon(null, xs, after) {

diff --git a/src/component/transcription/i18n/fr.yml b/src/component/transcription/i18n/fr.yml
@@ -5,7 +5,7 @@ doc: https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/trans
 collapse:
   title: Transcription
 modal:
-  title: Titre du contenu
+  title: Titre de la vidéo
 button:
   close: Fermer
   fullscreen: Agrandir

diff --git a/src/component/transcription/style/_module.scss b/src/component/transcription/style/_module.scss
@@ -81,6 +81,7 @@
       opacity: inherit;
       background-color: inherit;
       position: relative;
+      z-index: auto;
 
       &::after {
         content: none;
@@ -125,6 +126,10 @@
         @include margin(0);
         @include padding(4v);
       }
+
+      #{ns(modal)}__title {
+        display: none;
+      }
     }
 
     &--opened {