fix(breadcrumb): add example with span tag instead of link without href

GouvernementFR · May 3, 2023 · 34d6791 · 34d6791
1 parent c5a447a
commit 34d6791
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 6 deletions.
diff --git a/src/component/breadcrumb/example/index.ejs b/src/component/breadcrumb/example/index.ejs
@@ -1,3 +1,5 @@
 <% const sample = getSample(include); %>
 
-<%- sample('Fil d’Ariane', './sample/breadcrumb', { }, true); %>
+<%- sample('Fil d’Ariane avec liens', './sample/sample-a', { }, true); %>
+
+<%- sample('Fil d’Ariane avec <span> en dernier element', './sample/sample-span', { }, true); %>
diff --git a/.../breadcrumb/example/sample/breadcrumb.ejs → ...nt/breadcrumb/example/sample/sample-a.ejs b/.../breadcrumb/example/sample/breadcrumb.ejs → ...nt/breadcrumb/example/sample/sample-a.ejs
diff --git a/src/component/breadcrumb/example/sample/sample-span.ejs b/src/component/breadcrumb/example/sample/sample-span.ejs
@@ -0,0 +1,14 @@
+<% const data = {
+  id: uniqueId('breadcrumb'),
+  segments: [
+    { path: '', label: 'Accueil' },
+    { path: 'segment-1', label: 'Segment 1 : lorem ipsum' },
+    { path: 'segment-2', label: 'Segment 2 : lorem ipsum' },
+    { path: 'segment-4', label: 'Segment 3 : lorem ipsum dolor sit amet' },
+    { markup: 'span', label: 'Page Actuelle' }
+  ],
+  ...locals.breadcrumb
+}
+%>
+
+<%- include('../../template/ejs/breadcrumb.ejs', {breadcrumb: data}); %>
diff --git a/src/component/breadcrumb/style/_module.scss b/src/component/breadcrumb/style/_module.scss
@@ -76,12 +76,15 @@ un padding de 4px et une marge négative en compensation sont mis en place afin
   &__link {
     vertical-align: top;
     position: relative;
-    @include link-underline;
     @include disable-tint;
     @include text-style(xs);
     @include padding(0);
     @include hover-underline;
-
+
+    &:not(:last-child) {
+      @include link-underline;
+    }
+
     &[aria-current] {
       &:not(button):not([href]) {
         pointer-events: none;

diff --git a/src/component/breadcrumb/template/ejs/breadcrumb.ejs b/src/component/breadcrumb/template/ejs/breadcrumb.ejs
@@ -16,7 +16,6 @@
 <%
 let breadcrumb = locals.breadcrumb || {segments : []};
 if (breadcrumb.button === undefined) breadcrumb.button = 'Voir le fil d’Ariane';
-const markup = breadcrumb.markup || 'a';
 %>
 
 <nav role="navigation" class="<%= prefix %>-breadcrumb" aria-label="vous êtes ici :">
@@ -29,13 +28,16 @@ const markup = breadcrumb.markup || 'a';
         const attrs = {};
         for (let i = 0; i < breadcrumb.segments.length; i++) {
             const segment = breadcrumb.segments[i];
+            const markup = segment.markup || 'a';
             if (segment.path != undefined) path += segment.path + '/';
             if (segment.id) attrs.id = segment.id;
             if (segment.href) {
               attrs['href'] = segment.href;
             } else {
-              if (i === breadcrumb.segments.length - 1) attrs['aria-current'] = 'page';
-              else if (path !== '') attrs['href'] = path;
+              if (i === breadcrumb.segments.length - 1) {
+                attrs['aria-current'] = 'page';
+                delete attrs['href'];
+              } else if (path !== '') attrs['href'] = path;
             }
         %>
       <li>