🐛 fix(header): mise à jour des exemples [DS-3367, DS-3544] (#727)

- ajout exemple utilisateur connecté - ajoute des exemples avec un seul raccourcis (sans liste) - ajoute les modifier de bouton account briefcase et team
GouvernementFR · Nov 6, 2023 · 8ce08e1 · 8ce08e1
1 parent 35b04fd
commit 8ce08e1
Show file tree

Hide file tree

Showing 11 changed files with 96 additions and 39 deletions.
diff --git a/src/component/button/style/_module.scss b/src/component/button/style/_module.scss
@@ -9,3 +9,6 @@
 @import 'module/tooltip';
 @import 'module/fullscreen';
 @import 'module/display';
+@import 'module/account';
+@import 'module/team';
+@import 'module/briefcase';
diff --git a/src/component/button/style/_scheme.scss b/src/component/button/style/_scheme.scss
@@ -19,7 +19,8 @@
     }
 
     // Grey outline variant
-    &--tertiary {
+    &--tertiary,
+    &--account {
       @include btn-kind-scheme(3, $legacy);
     }
 
@@ -28,7 +29,9 @@
     &--close,
     &--display,
     &--fullscreen,
-    &--tooltip {
+    &--tooltip,
+    &--briefcase,
+    &--team {
       @include btn-kind-scheme(4, $legacy);
     }
   }

diff --git a/src/component/button/style/module/_account.scss b/src/component/button/style/module/_account.scss
@@ -0,0 +1,8 @@
+////
+/// Button Module - Account
+/// @group button
+////
+
+#{ns(btn--account)} {
+  @include nest-btn(sm, left, account-circle-fill, null, false);
+}
diff --git a/src/component/button/style/module/_briefcase.scss b/src/component/button/style/module/_briefcase.scss
@@ -0,0 +1,8 @@
+////
+/// Button Module - Briefcase
+/// @group button
+////
+
+#{ns(btn--briefcase)} {
+  @include nest-btn(sm, left, briefcase-fill, null, false);
+}
diff --git a/src/component/button/style/module/_team.scss b/src/component/button/style/module/_team.scss
@@ -0,0 +1,8 @@
+////
+/// Button Module - Team
+/// @group button
+////
+
+#{ns(btn--team)} {
+  @include nest-btn(sm, left, team-line, null, false);
+}
diff --git a/src/component/header/example/index.ejs b/src/component/header/example/index.ejs
@@ -8,15 +8,19 @@
     }
 </style>
 
-<%- sample('Header avec Navigation complète', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br>officiel'}, service:true, links:true, search: true, navigation: true }}, true, './layout');  %>
-
 <%- sample('Header minimal', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br>officiel'}, navigation: 'min' }}, true, './layout');  %>
 
 <%- sample('Header sans navigation', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br>officiel'}, service: true }}, true, './layout');  %>
 
-<%- sample('Header sans navigation avec raccourcis', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br>officiel'}, links:true, service: true}}, true, './layout');  %>
+<%- sample('Header sans navigation avec un seul raccourci', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br>officiel'}, links: { buttons: [{ url: '#', label: 'Espace particulier', markup: 'a', classes: [`${prefix}-btn--account`]}] }, service: true}}, true, './layout');  %>
+
+<%- sample('Header sans navigation avec une liste de raccourcis', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br>officiel'}, links:true, service: true}}, true, './layout');  %>
+
+<%- sample('Header avec Navigation complète', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br>officiel'}, service:true, links:true, search: true, navigation: true }}, true, './layout');  %>
+
+<%- sample('Header avec selecteur de langues', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br>officiel'}, links:{ buttons: []}, navigation: true, translate: true, service: true}}, true, './layout');  %>
 
-<%- sample('Header avec selecteur de langues', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br>officiel'}, links:true, navigation: true, translate: true, service: true}}, true, './layout');  %>
+<%- sample('Header avec selecteur de langues et raccourcis', './sample/header.ejs', {header: { logo:{ title: 'Intitulé<br>officiel'}, links:true, navigation: true, translate: true, service: true}}, true, './layout');  %>
 
 <%- sample('Header avec nom de service, lien d’accès', './sample/header.ejs', {header: { logo:{ title: 'Ministère<br>de l’europe<br>et des affaires<br>étrangères'}, service: true, links: true, navigation: 'min' }}, true, './layout');  %>
 

diff --git a/src/component/header/example/sample/header.ejs b/src/component/header/example/sample/header.ejs
@@ -13,35 +13,28 @@ if (header.links !== undefined || header.search) {
   const tools = {};
   data.body.tools = tools;
 
-  if (header.translate !== undefined) {
-    tools.translate = {
-      collapseId: header.translate.collapseId || uniqueId('translate'),
-      button: header.translate.button || {kind: 3},
-      languages: header.translate.languages || eval(include('../../../translate/example/sample/get-translations'))(6)
-    }
-  }
-
   if (header.links === true) {
     hasMenu = true;
     tools.links = {
       buttons: [
         {
-          icon: 'add-circle-line',
           url: '#',
-          label: 'Créer un espace',
-          markup: 'a'
+          label: 'Contact',
+          markup: 'a',
+          classes: [`${prefix}-btn--team`]
         },
         {
-          icon: 'lock-line',
           url: '#',
-          label: 'Se connecter',
-          markup: 'a'
+          label: 'Espace recruteur',
+          markup: 'a',
+          classes: [`${prefix}-btn--briefcase`]
+          
         },
         {
-          icon: 'account-line',
           url: '#',
-          label: 'S’enregistrer',
-          markup: 'a'
+          label: 'Espace particulier',
+          markup: 'a',
+          classes: [`${prefix}-btn--account`]
         }
       ]
     };
@@ -51,6 +44,15 @@ if (header.links !== undefined || header.search) {
     tools.links = header.links;
   }
 
+  if (header.translate !== undefined) {
+    hasMenu = true;
+    tools.translate = {
+      collapseId: header.translate.collapseId || uniqueId('translate'),
+      button: header.translate.button,
+      languages: header.translate.languages || eval(include('../../../translate/example/sample/get-translations'))(6)
+    }
+  }
+
   if (header.search) {
     tools.search = header.search === true ?
     {

diff --git a/src/component/header/style/_scheme.scss b/src/component/header/style/_scheme.scss
@@ -44,6 +44,12 @@
       #{ns(btn)} {
         @include btn-kind-scheme(4, $legacy);
       }
+
+      > #{ns(translate)}:first-child:last-child {
+        #{ns(btn)} {
+          @include btn-kind-scheme(3, $legacy);
+        }
+      }
     }
 
     &__navbar {

diff --git a/src/component/header/style/module/_links.scss b/src/component/header/style/module/_links.scss
@@ -8,8 +8,15 @@
     &:not(#{ns-group(btns)}--sm):not(#{ns-group(btns)}--lg) {
       @include class-not-start-with(#{ns(btns-group--icon-, '')}) {
         #{ns(btn)} {
-          @include nest-btn(sm, left, null, null, false);
           justify-content: flex-start;
+
+          @include has-icon {
+            @include nest-btn(sm, left, null, null, false);
+          }
+
+          @include has-not-icon {
+            @include nest-btn(sm, left, null, null, false);
+          }
         }
       }
     }
@@ -21,14 +28,23 @@
     @include respond-from(lg) {
       @include display-flex(row, null, flex-end);
       gap: space(2v);
-      @include margin-bottom(-4v);
+    }
+
+    > #{ns(btn)} {
+      @include has-icon {
+        @include nest-btn(sm, left, null, null, false);
+      }
+
+      @include has-not-icon {
+        @include nest-btn(sm, left, null, null, false);
+      }
     }
 
     #{ns-group(btns)} {
       @include respond-from(lg) {
         @include horizontal-btns-group;
         justify-content: flex-end;
-        @include margin(0 -1v);
+        @include margin(0 -1v -4v);
 
         & > li {
           align-items: flex-start;

diff --git a/src/component/header/template/ejs/tools.ejs b/src/component/header/template/ejs/tools.ejs
@@ -15,16 +15,19 @@
 <div class="<%= prefix %>-header__tools">
   <% if (tools.links !== undefined || tools.translate !== undefined) { %>
     <div class="<%= prefix %>-header__tools-links">
-      <ul class="<%= prefix %>-btns-group">
-        <% if (tools.links.buttons) { %>
-          <% for (let i = 0; i < tools.links.buttons.length; i++) { %>
-          <li>
-            <%- include('../../../button/template/ejs/button', {button:tools.links.buttons[i]}); %>
-          </li>
-          <% } %>
+      <% if (tools.links.buttons.length) { %>
+        <% if (tools.links.buttons.length > 1) { %>
+          <ul class="<%= prefix %>-btns-group">
+            <% for (let i = 0; i < tools.links.buttons.length; i++) { %>
+              <li>
+                <%- include('../../../button/template/ejs/button', {button:tools.links.buttons[i]}); %>
+              </li>
+            <% } %>
+          </ul>
+        <% } else { %>
+          <%- include('../../../button/template/ejs/button', {button:tools.links.buttons[0]}); %>
         <% } %>
-      </ul>
-
+      <% } %>
       <% if (tools.translate !== undefined) { %>
         <%- include('../../../translate/template/ejs/translate.ejs', { translate: tools.translate }); %>
       <% } %>

diff --git a/src/component/translate/style/_module.scss b/src/component/translate/style/_module.scss
@@ -16,7 +16,6 @@
     @include min-height(auto, lg);
     @include width(100%);
     @include width(auto, lg);
-    @include margin-bottom(4v, lg);
     @include animate.caret();
 
     @include icon(arrow-down-s-line, sm, after) {
@@ -47,9 +46,6 @@
   &__menu {
     @include margin(0);
     @include margin(-1v -4v 0, lg);
-    @include respond-from(lg) {
-      @include top(calc(100% - 4v));
-    }
   }
 
   #{ns(nav)} {