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 @@
<% if (tools.links !== undefined || tools.translate !== undefined) { %>