chore(global): DSFR v1.6.0

GouvernementFR · Jun 14, 2022 · 8c93da1 · 8c93da1
2 parents 6298c93 + 8445493
commit 8c93da1
Show file tree

Hide file tree

Showing 283 changed files with 3,589 additions and 3,448 deletions.
diff --git a/.stylelintrc.yml b/.stylelintrc.yml
@@ -9,7 +9,7 @@
     "scss/at-rule-no-unknown": true,
     "no-descending-specificity": null,
     "unit-case": null,
-    "unit-no-unknown": [true, { "ignoreFunctions": ["space", "calc"], "ignoreUnits": ["N", "v", "w", "/x[0-9]+/"] }],
+    "unit-no-unknown": [true, { "ignoreFunctions": ["space", "calc"], "ignoreUnits": ["Hz", "kHz", "N", "v", "w", "/x[0-9]+/"] }],
     "at-rule-empty-line-before": null,
     "declaration-empty-line-before": null,
     "font-family-no-missing-generic-family-keyword": [true,{ "ignoreFontFamilies": ["icons"] }],

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gouvfr/dsfr",
-  "version": "1.5.1",
+  "version": "1.6.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>",
@@ -40,7 +40,7 @@
     "browserslist": "^4.19.3",
     "cssnano": "^5.0.17",
     "del": "^6.0.0",
-    "ejs": "^3.1.6",
+    "ejs": "^3.1.7",
     "eslint": "^8.9.0",
     "eslint-config-standard": "^16.0.3",
     "eslint-plugin-import": "^2.25.4",
@@ -54,8 +54,6 @@
     "js-beautify": "^1.14.0",
     "js-yaml": "^4.1.0",
     "mqpacker": "^7.0.0",
-    "node-sass": "^7.0.1",
-    "node-sass-magic-importer": "^5.3.2",
     "pa11y": "^6.1.1",
     "path": "^0.12.7",
     "postcss": "^8.4.6",

diff --git a/src/component/accordion/style/_legacy.scss b/src/component/accordion/style/_legacy.scss
@@ -18,7 +18,7 @@
       @include icon-legacy(add-line, sm);
 
       &[aria-expanded="true"] {
-        @include icon-content-legacy(subtract-line);
+        @include icon-image-legacy(subtract-line);
       }
     }
   }

diff --git a/src/component/accordion/style/_module.scss b/src/component/accordion/style/_module.scss
@@ -21,19 +21,20 @@
 
   &__btn {
     @include _build-link-base;
+    @include _link-display(flex);
     @include nest-accordion-button(add-line);
     @include size(100%);
     text-align: left;
     @include margin(0);
 
-    @include before {
+    @include after {
       @include margin-right(0);
       @include margin-left(auto);
     }
 
     &[aria-expanded="true"] {
       @include font-weight('bold');
-      @include icon-content(subtract-line, before);
+      @include icon-image(subtract-line, after);
     }
 
     @include padding(3v 0);

diff --git a/src/component/accordion/style/_setting.scss b/src/component/accordion/style/_setting.scss
@@ -14,5 +14,6 @@ $accordions-settings:(
       icon-margin-x: 1v
     )
   ),
-  places: right
+  places: right,
+  display: flex
 );
diff --git a/src/component/alert/deprecated/style/_legacy.scss b/src/component/alert/deprecated/style/_legacy.scss
@@ -0,0 +1,15 @@
+////
+/// Alert Legacy
+/// @group alert
+////
+
+@include legacy(ie11) {
+  /**
+  * reset des marges dans l'alerte
+  */
+  #{ns(alert)} {
+    #{ns(link--close)} {
+      @include icon-legacy(close-line, sm);
+    }
+  }
+}
diff --git a/src/component/alert/deprecated/style/_module.scss b/src/component/alert/deprecated/style/_module.scss
@@ -6,6 +6,7 @@
 #{ns(alert)} {
   #{ns(link--close)} {
     @include absolute(1v, 5v);
-    @include nest-btn(sm, only, null, null, false);
+    @include nest-btn(sm, only, close-line, null, false);
+    align-items: center;
   }
 }
diff --git a/src/component/alert/legacy.scss b/src/component/alert/legacy.scss
@@ -1,11 +1,14 @@
 ////
 /// Alert Legacy
-/// @group core
+/// @group alert
 ////
 
 @import '../../core/style/path/path-2';
 @import 'index';
 @import 'style/scheme';
 @import 'style/legacy';
 
+// deprecated
+@import 'deprecated/style/legacy';
+
 @include _alert-scheme(true);
diff --git a/src/component/alert/style/_legacy.scss b/src/component/alert/style/_legacy.scss
@@ -30,5 +30,9 @@
     &--warning {
       @include icon-legacy(warning-fill, null, before, false);
     }
+
+    #{ns(btn--close)} {
+      @include icon-legacy(close-line, sm);
+    }
   }
 }
diff --git a/src/component/alert/style/_module.scss b/src/component/alert/style/_module.scss
@@ -8,9 +8,8 @@
   @include padding(4v 9v 3v 14v);
   @include set-title-margin(0 0 1v);
   @include set-text-margin(0 0 1v);
-  @include icon(null, md);
-
-  @include before {
+  @include icon-size(md, before);
+  @include icon-style(before) {
     @include absolute(0, null, null, 0);
     @include margin(4v 2v);
   }
@@ -21,27 +20,34 @@
 
   #{ns(btn--close)} {
     @include absolute(1v,5v);
-    @include nest-btn(sm, only, null, null, false);
+    @include nest-btn(sm, only, close-line, null, false);
   }
 
   + #{ns(alert)} {
     @include margin-top(4v);
   }
 
   &--info {
-    @include icon-content(info-fill, before, false, '');
+    @include icon-image(info-fill, before);
   }
 
   &--success {
-    @include icon-content(success-fill, before, false, '');
+    @include icon-image(success-fill, before);
   }
 
   &--error {
-    @include icon-content(error-fill, before, false, '');
+    @include icon-image(error-fill, before);
+  }
+
+  &--warning {
+    @include icon-image(warning-fill, before);
   }
 
+  &--info,
+  &--success,
+  &--error,
   &--warning {
-    @include icon-content(warning-fill, before, false, '');
+    @include icon-content;
   }
 
   &--sm {

diff --git a/src/component/alert/template/ejs/alert.ejs b/src/component/alert/template/ejs/alert.ejs
@@ -35,8 +35,6 @@ let title = alert.title || false;
 let text = alert.text || false;
 let type = alert.type || false;
 let size = alert.size || "md";
-let expanded = alert.expanded || true;
-let attrButton = alert.buttonAttrs;
 let classes = alert.classes || [];
 let attributes = alert.attributes || {};
 classes.push(prefix + '-alert');

diff --git a/src/component/badge/style/_legacy.scss b/src/component/badge/style/_legacy.scss
@@ -14,23 +14,23 @@
     &,
     &--sm {
       &#{ns(badge)}--info {
-        @include icon-content-legacy(info-fill);
+        @include icon-image-legacy(info-fill);
       }
 
       &#{ns(badge)}--success {
-        @include icon-content-legacy(success-fill);
+        @include icon-image-legacy(success-fill);
       }
 
       &#{ns(badge)}--error {
-        @include icon-content-legacy(error-fill);
+        @include icon-image-legacy(error-fill);
       }
 
       &#{ns(badge)}--warning {
-        @include icon-content-legacy(warning-fill);
+        @include icon-image-legacy(warning-fill);
       }
 
       &#{ns(badge)}--new {
-        @include icon-content-legacy(flashlight-fill);
+        @include icon-image-legacy(flashlight-fill);
       }
     }
   }

diff --git a/src/component/badge/style/_module.scss b/src/component/badge/style/_module.scss
@@ -3,5 +3,5 @@
 /// @group badge
 ////
 
-@import 'module/badge';
+@import 'module/default';
 @import 'module/group';
diff --git a/src/component/badge/style/_setting.scss b/src/component/badge/style/_setting.scss
@@ -22,4 +22,5 @@ $badge-settings:(
     )
   ),
   places: left,
+  display: flex
 );
diff --git a/src/component/badge/style/module/_badge.scss → ...omponent/badge/style/module/_default.scss b/src/component/badge/style/module/_badge.scss → ...omponent/badge/style/module/_default.scss
@@ -1,13 +1,13 @@
 ////
-/// Badge Module - badge
+/// Badge Module : default
 /// @group badge
 ////
 
 @include build-badge();
 
 #{ns(badge)} {
   @include nest-badge(md, left, null, null, false);
-  @include icon-style(before, null);
+  @include icon-style(before);
   @include font-weight(bold);
   @include max-width(100%);
   text-transform: uppercase;
@@ -20,23 +20,31 @@
   &,
   &--sm {
     &#{ns(badge)}--info {
-      @include icon-content(info-fill, before, false, '');
+      @include icon-image(info-fill, before);
     }
 
     &#{ns(badge)}--success {
-      @include icon-content(success-fill, before, false, '');
+      @include icon-image(success-fill, before);
     }
 
     &#{ns(badge)}--error {
-      @include icon-content(error-fill, before, false, '');
+      @include icon-image(error-fill, before);
     }
 
     &#{ns(badge)}--warning {
-      @include icon-content(warning-fill, before, false, '');
+      @include icon-image(warning-fill, before);
     }
 
     &#{ns(badge)}--new {
-      @include icon-content(flashlight-fill, before, false, '');
+      @include icon-image(flashlight-fill, before);
+    }
+
+    &--info,
+    &--success,
+    &--error,
+    &--warning,
+    &--new {
+      @include icon-content;
     }
 
     &#{ns(badge)}--no-icon {

diff --git a/src/component/badge/style/module/_group.scss b/src/component/badge/style/module/_group.scss
@@ -7,6 +7,7 @@
   @include disable-list-style;
   display: flex;
   flex-wrap: wrap;
+  @include margin-x(-1v);
   @include margin-bottom(0);
 
   > li {
@@ -15,8 +16,7 @@
   }
 
   #{ns(badge)} {
-    @include margin-right(2v);
-    @include margin-bottom(2v);
+    @include margin(0 1v 2v 1v);
   }
 
   &--sm {

diff --git a/src/component/breadcrumb/example/sample/breadcrumb.ejs b/src/component/breadcrumb/example/sample/breadcrumb.ejs
@@ -2,13 +2,13 @@
   id: uniqueId('breadcrumb'),
   segments: [
     { path: '', label: 'Accueil' },
-    { path: 'segment-1', label: 'Segment 1' },
-    { path: 'segment-2', label: 'Segment 2' },
-    { path: 'segment-3', label: 'Segment 3' },
-    { path: 'segment-4', label: 'Segment 4' },
-    { path: 'segment-5', label: 'Segment 5' },
-    { path: 'segment-6', label: 'Segment 6' },
-    { path: 'segment-7', label: 'Segment 7' },
+    { path: 'segment-1', label: 'Segment 1 : lorem ipsum' },
+    { path: 'segment-2', label: 'Segment 2 : lorem ipsum' },
+    { path: 'segment-3', label: 'Segment 3 : lorem ipsum' },
+    { path: 'segment-4', label: 'Segment 4 : lorem ipsum dolor sit amet' },
+    { path: 'segment-5', label: 'Segment 5 : lorem ipsum' },
+    { path: 'segment-6', label: 'Segment 6 : lorem ipsum' },
+    { path: 'segment-7', label: 'Segment 7 : lorem ipsum' },
     { label: 'Page Actuelle' }
   ]
 }

diff --git a/src/component/breadcrumb/style/_module.scss b/src/component/breadcrumb/style/_module.scss
@@ -47,34 +47,35 @@ un padding de 4px et une marge négative en compensation sont mis en place afin
 
   @include list() {
     @include disable-list-style;
-    @include display-flex(row, null, null, wrap, true);
     transform: translateY(4px);
 
     @include respond-from(md) {
       transform: none;
     }
+
+    li {
+      display: inline;
+      line-height: space(7v);
+
+      /**
+      * flèche séparatrice en font-icon
+      */
+      &:not(:first-child) {
+        @include icon(arrow-right-s-line, sm, before) {
+          @include margin-x(1v);
+          vertical-align: calc((1.05rem - var(--icon-size)) * 0.5);
+        }
+      }
+    }
   }
 
   /**
    * margin-bottom de 2v pour créer cet espace entre chaque ligne
    */
   &__link {
+    vertical-align: top;
     position: relative;
-    display: inline-flex;
     @include text-style(xs);
-    @include margin-bottom(2v);
-
-    /**
-     * flèche séparatrice en font-icon
-     */
-    &:not([aria-current]) {
-      @include margin-right(6v);
-      @include icon(arrow-right-s-line, sm, after);
-      @include after {
-        @include absolute(0.5v, -5v);
-        pointer-events: none;
-      }
-    }
 
     &[aria-current] {
       &:not([href]) {
@@ -84,5 +85,3 @@ un padding de 4px et une marge négative en compensation sont mis en place afin
     }
   }
 }
-
-@import 'scheme';
diff --git a/src/component/button/style/_module.scss b/src/component/button/style/_module.scss
@@ -3,7 +3,7 @@
 /// @group button
 ////
 
-@import 'module/button';
-@import 'module/buttons-group.scss';
+@import 'module/default';
+@import 'module/group.scss';
 @import 'module/close';
 @import 'module/display';