✨ feat(navigation): permet l'ajout d'icone sur les liens de navigation

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()
     ]

src/component/navigation/index.scss

@@ -4,5 +4,6 @@
 ////
 
 @import '../link/index';
+@import '../button/index';
 
 @import '../../core/index';

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)};
           }
         }
       }
@@ -82,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);
@@ -95,6 +97,7 @@
 
   &__link,
   &__btn {
+    @include nest-btn(sm, left, null, null, false);
     @include size(100%);
     @include padding(3v 4v);
     @include text-style(md);
@@ -108,15 +111,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))};
     }
   }
 
@@ -136,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;
     }

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

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';
 
 %>
-<a class="<%= prefix %>-nav__link" <%- includeAttrs(attrs); %> ><%- link.label %></a>
+<a <%- includeClasses(classes); %> <%- includeAttrs(attrs); %> ><%- link.label %></a>