diff --git a/src/component/button/style/_module.scss b/src/component/button/style/_module.scss
index aa0abeec7..8b5cca69c 100644
--- 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
index 8e78934ac..fc077e551 100644
--- 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
new file mode 100644
index 000000000..15f79b37c
--- /dev/null
+++ 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
new file mode 100644
index 000000000..4fe7138ef
--- /dev/null
+++ 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
new file mode 100644
index 000000000..0193b6eab
--- /dev/null
+++ 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
index 2df855463..0e6c278a7 100755
--- a/src/component/header/example/index.ejs
+++ b/src/component/header/example/index.ejs
@@ -8,15 +8,19 @@
}
-<%- sample('Header avec Navigation complète', './sample/header.ejs', {header: { logo:{ title: 'Intitulé
officiel'}, service:true, links:true, search: true, navigation: true }}, true, './layout'); %>
-
<%- sample('Header minimal', './sample/header.ejs', {header: { logo:{ title: 'Intitulé
officiel'}, navigation: 'min' }}, true, './layout'); %>
<%- sample('Header sans navigation', './sample/header.ejs', {header: { logo:{ title: 'Intitulé
officiel'}, service: true }}, true, './layout'); %>
-<%- sample('Header sans navigation avec raccourcis', './sample/header.ejs', {header: { logo:{ title: 'Intitulé
officiel'}, links:true, service: true}}, true, './layout'); %>
+<%- sample('Header sans navigation avec un seul raccourci', './sample/header.ejs', {header: { logo:{ title: 'Intitulé
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é
officiel'}, links:true, service: true}}, true, './layout'); %>
+
+<%- sample('Header avec Navigation complète', './sample/header.ejs', {header: { logo:{ title: 'Intitulé
officiel'}, service:true, links:true, search: true, navigation: true }}, true, './layout'); %>
+
+<%- sample('Header avec selecteur de langues', './sample/header.ejs', {header: { logo:{ title: 'Intitulé
officiel'}, links:{ buttons: []}, navigation: true, translate: true, service: true}}, true, './layout'); %>
-<%- sample('Header avec selecteur de langues', './sample/header.ejs', {header: { logo:{ title: 'Intitulé
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é
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
de l’europe
et des affaires
é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
index 45c8fcbde..abec8df62 100755
--- 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
index 35ce98816..b5d5475c8 100644
--- 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
index bf8bbcd05..f3b959eab 100644
--- 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
index 1699b25dd..6acf58ca6 100644
--- a/src/component/header/template/ejs/tools.ejs
+++ b/src/component/header/template/ejs/tools.ejs
@@ -15,16 +15,19 @@