From 5bcbc5e2482e480ba274959e437a81d2ad30255b Mon Sep 17 00:00:00 2001 From: Keryan SANIE Date: Mon, 25 Mar 2024 16:03:29 +0100 Subject: [PATCH 1/9] fix(navigation): passage de la bordure active en background --- .../navigation/style/module/_default.scss | 24 +++++-------------- .../navigation/style/scheme/_default.scss | 4 +--- 2 files changed, 7 insertions(+), 21 deletions(-) diff --git a/src/component/navigation/style/module/_default.scss b/src/component/navigation/style/module/_default.scss index 3fcd91f06..85c81a89f 100644 --- a/src/component/navigation/style/module/_default.scss +++ b/src/component/navigation/style/module/_default.scss @@ -50,15 +50,9 @@ // @include z-index(auto); @include selector.current { - @include before { - @include absolute(auto, null, 0, 0, 100%, 2px); - @include margin-top(0); - - @include preference.forced-colors { - background-color: highlight; - @include height(1v); - } - } + background-repeat: no-repeat; + background-position: 0 100%; + background-size: #{spacing.space(100% 0.5v)}; } } } @@ -108,15 +102,9 @@ @include selector.current { position: relative; - @include before('', block) { - @include absolute(50%, null, null, 0, 2px, 6v); - @include margin-top(-3v); - - @include preference.forced-colors { - background-color: highlight; - @include width(1v); - } - } + background-repeat: no-repeat; + background-position: #{spacing.space(0 3v)}; + background-size: #{spacing.space(2px calc(100% - 6v))}; } } diff --git a/src/component/navigation/style/scheme/_default.scss b/src/component/navigation/style/scheme/_default.scss index 13fe9c0e0..243f7d16d 100644 --- a/src/component/navigation/style/scheme/_default.scss +++ b/src/component/navigation/style/scheme/_default.scss @@ -14,9 +14,7 @@ @include selector.current { @include color.text(active blue-france, (legacy: $legacy)); - @include before { - @include color.background(active blue-france, (legacy: $legacy)); - } + @include color.background-image(active blue-france, (legacy:$legacy)); } } From 6e327101ca174de22bf9a3443daefd210496387b Mon Sep 17 00:00:00 2001 From: Keryan SANIE Date: Mon, 25 Mar 2024 17:30:37 +0100 Subject: [PATCH 2/9] fix(navigation): icon left par defaut --- src/component/navigation/index.scss | 1 + .../navigation/style/module/_default.scss | 20 +++++++++---------- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/src/component/navigation/index.scss b/src/component/navigation/index.scss index c80ea3754..32b9f75cd 100644 --- a/src/component/navigation/index.scss +++ b/src/component/navigation/index.scss @@ -4,5 +4,6 @@ //// @import '../link/index'; +@import '../button/index'; @import '../../core/index'; diff --git a/src/component/navigation/style/module/_default.scss b/src/component/navigation/style/module/_default.scss index 85c81a89f..720b76608 100644 --- a/src/component/navigation/style/module/_default.scss +++ b/src/component/navigation/style/module/_default.scss @@ -76,6 +76,14 @@ @include min-height(auto, lg); } + #{ns(nav__btn)} { + @include icon(arrow-down-s-line, sm, after) { + @include margin-left(2v); + @include margin-right(0); + transition: transform 0.3s; + } + } + @include respond-from(lg) { position: initial; @include before(none); @@ -89,6 +97,7 @@ &__link, &__btn { + @include nest-btn(sm, left, null, null, false); @include size(100%); @include padding(3v 4v); @include text-style(md); @@ -124,17 +133,6 @@ flex-direction: row; @include padding(4v 3v 4v 4v, lg); - @include icon(arrow-down-s-line, sm, after) { - @include margin-left(2v); - @include margin-right(0); - transition: transform 0.3s; - - @include preference.reduce-motion { - transition: none; - } - } - @include icon-forced-color(buttontext, true, after); - @include respond-from(lg) { justify-content: flex-start; } From 2d4c4b93ad2cb7ca664f779b6433f52d40f7d4a3 Mon Sep 17 00:00:00 2001 From: zellerbaptiste Date: Mon, 23 Sep 2024 15:58:47 +0200 Subject: [PATCH 3/9] feat(navigation): ajoute exemple de liens avec icones --- .../navigation/example/sample/navigation.ejs | 31 +++++++++++-------- .../navigation/template/ejs/link.ejs | 27 +++++++++++++++- 2 files changed, 44 insertions(+), 14 deletions(-) diff --git a/src/component/navigation/example/sample/navigation.ejs b/src/component/navigation/example/sample/navigation.ejs index a29c382dd..daedf55ad 100755 --- a/src/component/navigation/example/sample/navigation.ejs +++ b/src/component/navigation/example/sample/navigation.ejs @@ -2,35 +2,38 @@ let navigation = locals.navigation || {}; const href = navigation.href || '#' -const getLink = () => { +const getLink = (icon, iconPlace) => { const id = uniqueId('nav'); return { type: 'link', label: `accès direct ${id}`, id: id, - href: href + href: href, + icon: icon, + iconPlace: iconPlace }; - } -const getSubLink = (active = false) => { +const getSubLink = (active = false, icon, iconPlace) => { const id = uniqueId('nav'); return { label: `Lien de navigation ${id}`, id: id, href: href, - active: active + active: active, + icon: icon, + iconPlace: iconPlace } } const getItems = (active = false) => { return [ getSubLink(), - getSubLink(), + getSubLink(false, 'arrow-right-line', 'right'), getSubLink(active), getSubLink(), getSubLink(), - getSubLink(), + getSubLink(false, 'arrow-left-line'), getSubLink(), getSubLink() ]; @@ -47,12 +50,14 @@ const getMenu = (active = false) => { } } -const getCategory = (active = false) => { +const getCategory = (active = false, icon, iconPlace) => { return { id: uniqueId('category'), label: 'Nom de catégorie', href: href, - items: getItems(active) + items: getItems(active), + icon: icon, + iconPlace: iconPlace }; } @@ -76,9 +81,9 @@ const getMega = (active = false, leader = false) => { }}), categories: [ getCategory(), - getCategory(), + getCategory(false, 'arrow-left-line'), getCategory(true), - getCategory() + getCategory(false,'arrow-right-line', 'right') ] } } @@ -90,10 +95,10 @@ let data = { [ getMenu(), getMega(), - getLink(), + getLink('arrow-left-line'), getMenu(true), getMega(false, true), - getLink(), + getLink('arrow-right-line', 'right'), getMega(true, false), getMenu() ] diff --git a/src/component/navigation/template/ejs/link.ejs b/src/component/navigation/template/ejs/link.ejs index 6a05c67fd..d4c7d4fda 100644 --- a/src/component/navigation/template/ejs/link.ejs +++ b/src/component/navigation/template/ejs/link.ejs @@ -7,6 +7,14 @@ * link.href (string, required) : url du lien +* link.icon (string, optional) : icone du lien + +* link.iconPlace (string, optional) : emplacement de l'icone + si non défini alors que le paramètre icon est défini, bouton avec icone seule, sans libellé + valeurs : + * left : icone à gauche du libellé + * right : icone à droite du libellé + * link.blank (boolean, optional) [default: false] : si true, target '_blank' * link.active (boolean, optional) : si true l'élément est actif @@ -17,6 +25,23 @@ <% let link = locals.link || {}; +const classes = link.classes || []; +classes.push(prefix + '-nav__link'); + +if (link.icon !== undefined) classes.push(`${prefix}-icon-${link.icon}`); + +if (link.iconPlace !== undefined) { + switch (link.iconPlace) { + case 'left': + classes.push(`${prefix}-link--icon-left`); + break; + + case 'right': + classes.push(`${prefix}-link--icon-right`); + break; + } +} + let attrs = { href: link.href, id: link.id @@ -26,4 +51,4 @@ if (link.blank) attrs = {...targetBlankData(), ...attrs}; if (link.active) attrs['aria-current'] = link.isPage ? 'page' : 'true'; %> - ><%- link.label %> + <%- includeAttrs(attrs); %> ><%- link.label %> From 137774b6d950102fe9d096f6dfaf21fb876e1944 Mon Sep 17 00:00:00 2001 From: Keryan SANIE Date: Fri, 25 Oct 2024 15:57:46 +0200 Subject: [PATCH 4/9] =?UTF-8?q?fix(navigation):=20theme=20contrast=C3=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../navigation/example/sample/navigation.ejs | 4 ++-- src/component/navigation/style/module/_default.scss | 12 ++++++++++++ 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/src/component/navigation/example/sample/navigation.ejs b/src/component/navigation/example/sample/navigation.ejs index daedf55ad..d9a32e043 100755 --- a/src/component/navigation/example/sample/navigation.ejs +++ b/src/component/navigation/example/sample/navigation.ejs @@ -14,7 +14,7 @@ const getLink = (icon, iconPlace) => { }; } -const getSubLink = (active = false, icon, iconPlace) => { +const getSubLink = (active = false, icon = undefined, iconPlace = 'left') => { const id = uniqueId('nav'); return { label: `Lien de navigation ${id}`, @@ -50,7 +50,7 @@ const getMenu = (active = false) => { } } -const getCategory = (active = false, icon, iconPlace) => { +const getCategory = (active = false, icon = undefined, iconPlace = 'left') => { return { id: uniqueId('category'), label: 'Nom de catégorie', diff --git a/src/component/navigation/style/module/_default.scss b/src/component/navigation/style/module/_default.scss index 720b76608..4447202b8 100644 --- a/src/component/navigation/style/module/_default.scss +++ b/src/component/navigation/style/module/_default.scss @@ -53,6 +53,10 @@ background-repeat: no-repeat; background-position: 0 100%; background-size: #{spacing.space(100% 0.5v)}; + + @include forced-color { + background-image: linear-gradient(0deg, highlight, highlight); + } } } } @@ -81,6 +85,10 @@ @include margin-left(2v); @include margin-right(0); transition: transform 0.3s; + + @include preference.forced-colors { + color: buttontext; + } } } @@ -114,6 +122,10 @@ background-repeat: no-repeat; background-position: #{spacing.space(0 3v)}; background-size: #{spacing.space(2px calc(100% - 6v))}; + + @include forced-color { + background-image: linear-gradient(0deg, highlight, highlight); + } } } From b62a556896788948ea6d2ef83782ceb661f8c862 Mon Sep 17 00:00:00 2001 From: Keryan SANIE Date: Fri, 25 Oct 2024 15:59:46 +0200 Subject: [PATCH 5/9] =?UTF-8?q?fix(navigation):=20theme=20contrast=C3=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/navigation/style/module/_default.scss | 4 ++-- src/component/navigation/style/module/_mega-menu.scss | 4 ++++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/component/navigation/style/module/_default.scss b/src/component/navigation/style/module/_default.scss index 4447202b8..c23aed529 100644 --- a/src/component/navigation/style/module/_default.scss +++ b/src/component/navigation/style/module/_default.scss @@ -54,7 +54,7 @@ background-position: 0 100%; background-size: #{spacing.space(100% 0.5v)}; - @include forced-color { + @include forced-colors { background-image: linear-gradient(0deg, highlight, highlight); } } @@ -123,7 +123,7 @@ background-position: #{spacing.space(0 3v)}; background-size: #{spacing.space(2px calc(100% - 6v))}; - @include forced-color { + @include forced-colors { background-image: linear-gradient(0deg, highlight, highlight); } } diff --git a/src/component/navigation/style/module/_mega-menu.scss b/src/component/navigation/style/module/_mega-menu.scss index f51f508c0..31ac6e0cd 100644 --- a/src/component/navigation/style/module/_mega-menu.scss +++ b/src/component/navigation/style/module/_mega-menu.scss @@ -64,6 +64,10 @@ &__category { @include font-weight(bold); + + @include forced-colors { + border-bottom: 1px solid; + } } &__list { From 8bb02173a4189f6b3f61cfec7d06a0e32d4ec4d0 Mon Sep 17 00:00:00 2001 From: Keryan SANIE Date: Fri, 25 Oct 2024 16:26:56 +0200 Subject: [PATCH 6/9] fix(navigation): fix build --- src/component/navigation/style/module/_default.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/component/navigation/style/module/_default.scss b/src/component/navigation/style/module/_default.scss index c23aed529..f099487e0 100644 --- a/src/component/navigation/style/module/_default.scss +++ b/src/component/navigation/style/module/_default.scss @@ -54,7 +54,7 @@ background-position: 0 100%; background-size: #{spacing.space(100% 0.5v)}; - @include forced-colors { + @include preference.forced-colors { background-image: linear-gradient(0deg, highlight, highlight); } } @@ -123,7 +123,7 @@ background-position: #{spacing.space(0 3v)}; background-size: #{spacing.space(2px calc(100% - 6v))}; - @include forced-colors { + @include preference.forced-colors { background-image: linear-gradient(0deg, highlight, highlight); } } From fd530538390b751f0fa095f1c65eff28f5803593 Mon Sep 17 00:00:00 2001 From: Keryan SANIE Date: Fri, 25 Oct 2024 16:40:14 +0200 Subject: [PATCH 7/9] fix(navigation): build --- src/component/navigation/style/module/_mega-menu.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/component/navigation/style/module/_mega-menu.scss b/src/component/navigation/style/module/_mega-menu.scss index 31ac6e0cd..6c8671057 100644 --- a/src/component/navigation/style/module/_mega-menu.scss +++ b/src/component/navigation/style/module/_mega-menu.scss @@ -65,7 +65,7 @@ &__category { @include font-weight(bold); - @include forced-colors { + @include preference.forced-colors { border-bottom: 1px solid; } } From 0ab4bbfaaf92e790604fddf0cc83600ea8aa82ba Mon Sep 17 00:00:00 2001 From: Keryan SANIE Date: Fri, 25 Oct 2024 17:14:06 +0200 Subject: [PATCH 8/9] fix(navigation): active color --- .../navigation/style/module/_default.scss | 20 ++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/src/component/navigation/style/module/_default.scss b/src/component/navigation/style/module/_default.scss index f099487e0..f68a2646b 100644 --- a/src/component/navigation/style/module/_default.scss +++ b/src/component/navigation/style/module/_default.scss @@ -47,8 +47,6 @@ min-height: spacing.space(14v); font-weight: normal; - // @include z-index(auto); - @include selector.current { background-repeat: no-repeat; background-position: 0 100%; @@ -56,10 +54,19 @@ @include preference.forced-colors { background-image: linear-gradient(0deg, highlight, highlight); + background-size: #{spacing.space(100% 1v)}; + forced-color-adjust: none; + color: buttontext; + + &a[href] { + color: linktext; + } } } } } + + } } @@ -87,7 +94,7 @@ transition: transform 0.3s; @include preference.forced-colors { - color: buttontext; + background-color: buttontext; } } } @@ -125,6 +132,13 @@ @include preference.forced-colors { background-image: linear-gradient(0deg, highlight, highlight); + background-size: #{spacing.space(1v calc(100% - 6v))}; + forced-color-adjust: none; + color: buttontext; + + &a[href] { + color: linktext; + } } } } From 94eb0de205255f50a7b9060c684b9a6d7def3040 Mon Sep 17 00:00:00 2001 From: Keryan SANIE Date: Fri, 25 Oct 2024 17:42:18 +0200 Subject: [PATCH 9/9] fix: build --- .../navigation/style/module/_default.scss | 22 +++++++++---------- 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/src/component/navigation/style/module/_default.scss b/src/component/navigation/style/module/_default.scss index f68a2646b..1e9bbfd31 100644 --- a/src/component/navigation/style/module/_default.scss +++ b/src/component/navigation/style/module/_default.scss @@ -56,17 +56,10 @@ background-image: linear-gradient(0deg, highlight, highlight); background-size: #{spacing.space(100% 1v)}; forced-color-adjust: none; - color: buttontext; - - &a[href] { - color: linktext; - } } } } } - - } } @@ -134,11 +127,6 @@ background-image: linear-gradient(0deg, highlight, highlight); background-size: #{spacing.space(1v calc(100% - 6v))}; forced-color-adjust: none; - color: buttontext; - - &a[href] { - color: linktext; - } } } } @@ -152,6 +140,12 @@ cursor: default; } } + + @include preference.forced-colors { + &[href] { + color: linktext; + } + } } &__btn { @@ -159,6 +153,10 @@ flex-direction: row; @include padding(4v 3v 4v 4v, lg); + @include preference.forced-colors { + color: buttontext; + } + @include respond-from(lg) { justify-content: flex-start; }