@gouvfr/dsfr 1.4.0 → 1.4.1

package/src/component/connect/example/index.ejs

@@ -6,8 +6,8 @@
 
 <%- //sample('Bouton AgentConnect', './sample/connect-default', {connect: {type: 'agent'}}, true); %>
 
-<%- sample('Bouton FranceConnect en Anglais', './sample/connect-default', {connect: {lang: 'en'}}, true); %>
+<%- //sample('Bouton FranceConnect en Anglais', './sample/connect-default', {connect: {lang: 'en'}}, true); %>
 
-<%- sample('Bouton FranceConnect en Allemand', './sample/connect-default', {connect: {lang: 'de'}}, true); %>
+<%- //sample('Bouton FranceConnect en Allemand', './sample/connect-default', {connect: {lang: 'de'}}, true); %>
 
-<%- sample('Bouton FranceConnect en Espagnol', './sample/connect-default', {connect: {lang: 'es'}}, true); %>
+<%- //sample('Bouton FranceConnect en Espagnol', './sample/connect-default', {connect: {lang: 'es'}}, true); %>

package/src/component/connect/example/sample/connect-default.ejs

@@ -2,9 +2,8 @@
 const connect = locals.connect || {}
 const data = {
   ...locals.connect,
-  desc: connect.desc || 'FranceConnect est la solution proposée par l\’État pour sécuriser et simplifier la connexion à vos services en ligne.',
   link: connect.link || {
-    label: 'Qu’est ce que France Connect ?',
+    label: 'Qu’est ce que FranceConnect ?',
     href: 'https://franceconnect.gouv.fr/'
   },
 }

package/src/component/connect/example/sample/connect-plus.ejs

@@ -3,9 +3,8 @@ const connect = locals.connect || {}
 const data = {
   ...locals.connect,
   type: 'plus',
-  desc: connect.desc || 'FranceConnect+ est la solution proposée par l’État pour vous connecter à vos démarches les plus sensibles.',
   link: connect.link || {
-    label: 'Qu’est ce que France Connect+ ?',
+    label: 'Qu’est ce que FranceConnect+ ?',
     href: 'https://franceconnect.gouv.fr/france-connect-plus'
   },
 }

package/src/component/connect/template/ejs/connect.ejs

@@ -43,6 +43,11 @@ switch(connect.type) {
   break;
 }
 
+const linkAttributes = connect.link.attributes || {};
+
+linkAttributes.target = '_blank';
+linkAttributes.title = `${connect.link.label} - nouvelle fenêtre`;
+
 if (!locals.standalone) {
 %>
 <div class="<%= prefix %>-connect-group">
@@ -58,7 +63,7 @@ if (connect.disabled === true) connectAttrs.disabled = '';
 
 <% if (connect.link) { %>
   <p>
-    <a href="<%= connect.link.href %>" <%- includeAttrs(connect.link.attributes); %>><%= connect.link.label %></a>
+    <a href="<%= connect.link.href %>" <%- includeAttrs(linkAttributes); %>><%= connect.link.label %></a>
   </p>
 <% } %>
 

package/src/component/follow/deprecated/style/_module.scss

@@ -21,7 +21,13 @@
       display: inline-flex;
       @include margin-right(4v);
       @include margin-bottom(4v);
-      @include nest-btn();
+      @include nest-btn(md, only, null, null, false);
+    }
+
+    #{ns(links-group--lg)} {
+      #{ns(link)} {
+        @include nest-btn(lg, only, null, null, false);
+      }
     }
   }
 

package/src/component/follow/deprecated/style/_tool.scss

@@ -4,13 +4,9 @@
 ////
 
 @mixin social-deprecated-icon ($modifier, $icon) {
-  #{ns('link--' + $modifier)} {
-    @include nest-btn(md, only, $icon, null, false);
-  }
-
-  #{ns(links-group--lg)} {
-    #{ns('link--' + $modifier)} {
-      @include nest-btn(lg, only, $icon, null, false);
+  #{ns(link--)}#{$modifier} {
+    @include before {
+      @include icon-content($icon);
     }
   }
 }

package/src/component/tag/style/_scheme.scss

@@ -7,6 +7,16 @@
   #{ns(tag)} {
     @include scheme-element-text-color(label grey, (legacy: $legacy));
     @include scheme-element-bg-color(contrast grey, (legacy: $legacy));
+
+    @include pressed-selector(false) {
+      @include scheme-element-text-color(action-high blue-france, (legacy: $legacy));
+      @include scheme-element-bg-color(action-low blue-france, (legacy: $legacy));
+    }
+
+    &#{ns(tag)}--dismiss {
+      @include scheme-element-text-color(inverted grey, (legacy: $legacy));
+      @include scheme-element-bg-color(action-high blue-france, (legacy: $legacy));
+    }
   }
 
   @include clickable-selector {
@@ -19,24 +29,10 @@
         @include scheme-element-bg-color(action-low accent, (legacy: $legacy));
       }
 
-      @include pressed-selector(false) {
-        @include scheme-element-text-color(action-high blue-france, (legacy: $legacy));
-        @include scheme-element-bg-color(action-low blue-france, (legacy: $legacy));
-      }
-
       @include pressed-selector(true) {
         @include scheme-element-text-color(inverted grey, (legacy: $legacy));
         @include scheme-element-bg-transparent((legacy:$legacy));
-
-        @include tag-punched-background(background action-high blue-france, $legacy);
-
-        &:hover {
-          @include tag-punched-background(background action-high blue-france, $legacy, (hover: true));
-        }
-
-        &:active {
-          @include tag-punched-background(background action-high blue-france, $legacy, (active: true));
-        }
+        @include tag-punched-background-states(background action-high blue-france, md, $legacy);
 
         @include disabled {
           background-image: none;
@@ -47,15 +43,10 @@
         }
 
         &#{ns(tag)}--sm {
-          @include scheme-element-bg-image-color(action-high blue-france, (legacy: $legacy), (radial-gradient(circle at 100% space(0.75v), transparent space(1.79v), var(--hsla) space(2v)), radial-gradient(circle at 100% space(0.75v), transparent space(1.79v), $COLOR space(2v)) ));
+          @include tag-punched-background-states(background action-high blue-france, sm, $legacy);
         }
       }
 
-      &#{ns(tag)}--dismiss {
-        @include scheme-element-text-color(inverted grey, (legacy: $legacy));
-        @include scheme-element-bg-color(action-high blue-france, (legacy: $legacy));
-      }
-
       @include disabled((legacy: $legacy, can-be-link: true, text: true, background: true));
     }
   }
@@ -65,7 +56,7 @@
       @include clickable-selector {
         &#{ns(tag)} {
           @include pressed-selector(true) {
-            @include scheme-element-bg-image-color(action-high blue-france, (legacy: $legacy), (radial-gradient(circle at 100% space(0.75v), transparent space(1.79v), var(--hsla) space(2v)), radial-gradient(circle at 100% space(0.75v), transparent space(1.79v), $COLOR space(2v)) ));
+            @include tag-punched-background-states(background action-high blue-france, sm, $legacy);
           }
         }
       }

package/src/component/tag/style/_tool.scss

@@ -24,7 +24,23 @@
   }
 }
 
-@mixin tag-punched-background ($token, $legacy, $options: ()) {
+@mixin tag-punched-background-states ($token, $size: md, $legacy: false, $hover:true, $active: true) {
+  @include tag-punched-background($token, $size, $legacy);
+
+  @if $hover {
+    &:hover {
+      @include tag-punched-background($token, $size, $legacy, (hover: true));
+    }
+  }
+
+  @if $active {
+    &:active {
+      @include tag-punched-background($token, $size, $legacy, (active: true));
+    }
+  }
+}
+
+@mixin tag-punched-background ($token, $size: md, $legacy: false, $options: ()) {
   $legacy-target: ie11;
   $type: hex;
   @if not $legacy {
@@ -34,8 +50,17 @@
   }
 
   $result: get-color($token, $type, $options);
+  $top: 1v;
+  $stop-1: 2.3125v;
+  $stop-2: 2.5v;
+
+  @if $size == sm {
+    $top: 0.75v;
+    $stop-1: 1.79v;
+    $stop-2: 2v;
+  }
 
   @include legacy($legacy-target) {
-    background-image: radial-gradient(circle at 100% #{space(1v)}, transparent #{space(2.3125v)}, #{$result} #{space(2.5v)});
+    background-image: radial-gradient(circle at 100% #{space($top)}, transparent #{space($stop-1)}, #{$result} #{space($stop-2)});
   }
 }