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

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';

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);
  }
  }

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);
+}

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);
+}

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);
+}

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'); %>
 

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 ?
  {

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 {

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;

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 }); %>
  <% } %>

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)} {