From 7059540f22c435fe96f94132bb447c972597f868 Mon Sep 17 00:00:00 2001
From: zellerbaptiste <zellerbaptiste@gmail.com>
Date: Wed, 3 May 2023 17:10:41 +0200
Subject: [PATCH 1/5] fix(breadcrumb): add example with span tag instead of
 link without href

---
 src/component/breadcrumb/example/index.ejs      |  4 +++-
 .../sample/{breadcrumb.ejs => sample-a.ejs}     |  0
 .../breadcrumb/example/sample/sample-span.ejs   | 14 ++++++++++++++
 src/component/breadcrumb/style/_module.scss     |  7 +++++--
 .../breadcrumb/template/ejs/breadcrumb.ejs      | 17 ++++++++++-------
 5 files changed, 32 insertions(+), 10 deletions(-)
 rename src/component/breadcrumb/example/sample/{breadcrumb.ejs => sample-a.ejs} (100%)
 create mode 100755 src/component/breadcrumb/example/sample/sample-span.ejs

diff --git a/src/component/breadcrumb/example/index.ejs b/src/component/breadcrumb/example/index.ejs
index c6bbf61bf..9e133df85 100755
--- 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/src/component/breadcrumb/example/sample/breadcrumb.ejs b/src/component/breadcrumb/example/sample/sample-a.ejs
similarity index 100%
rename from src/component/breadcrumb/example/sample/breadcrumb.ejs
rename to src/component/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
new file mode 100755
index 000000000..30bb3ed40
--- /dev/null
+++ 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-3', 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
index 7ac49cd6e..e5be6c63f 100644
--- 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
index 85c837079..da73d9510 100644
--- 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 :">
@@ -26,20 +25,24 @@ const markup = breadcrumb.markup || 'a';
     <ol class="<%= prefix %>-breadcrumb__list">
       <%
         let path = '';
-        const attrs = {};
         for (let i = 0; i < breadcrumb.segments.length; i++) {
+            const segmentAttrs = {};
             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.id) segmentAttrs.id = segment.id;
             if (segment.href) {
-              attrs['href'] = segment.href;
+              segmentAttrs['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) {
+                segmentAttrs['aria-current'] = 'page';
+              } else {
+                segmentAttrs['href'] = path;
+              }
             }
         %>
       <li>
-        <<%= markup %> class="<%= prefix %>-breadcrumb__link" <%- includeAttrs(attrs);%>><%= segment.label %></<%= markup %>>
+        <<%= markup %> class="<%= prefix %>-breadcrumb__link" <%- includeAttrs(segmentAttrs);%>><%= segment.label %></<%= markup %>>
       </li>
       <% } %>
     </ol>

From cd61465c5b764885597402a0497c36bc42eb4936 Mon Sep 17 00:00:00 2001
From: zellerbaptiste <zellerbaptiste@gmail.com>
Date: Tue, 9 May 2023 18:12:23 +0200
Subject: [PATCH 2/5] feat(breadcrumb): ajoute une page exemple alternative

---
 .../breadcrumb/breadcrumb-button/index.ejs    | 20 +------------------
 .../example/component/breadcrumb/index.ejs    | 17 +---------------
 .../breadcrumb/example/alternative/index.ejs  | 15 ++++++++++++++
 src/component/breadcrumb/example/index.ejs    |  2 +-
 .../breadcrumb/example/sample/sample-span.ejs | 14 -------------
 src/component/breadcrumb/i18n/fr.yml          |  6 ++++++
 src/component/breadcrumb/style/_module.scss   | 16 +++++----------
 .../breadcrumb/template/ejs/breadcrumb.ejs    | 14 +++++++------
 8 files changed, 37 insertions(+), 67 deletions(-)
 create mode 100755 src/component/breadcrumb/example/alternative/index.ejs
 delete mode 100755 src/component/breadcrumb/example/sample/sample-span.ejs
 create mode 100644 src/component/breadcrumb/i18n/fr.yml

diff --git a/src/analytics/example/component/breadcrumb/breadcrumb-button/index.ejs b/src/analytics/example/component/breadcrumb/breadcrumb-button/index.ejs
index 4c4b84730..c5f58400f 100644
--- a/src/analytics/example/component/breadcrumb/breadcrumb-button/index.ejs
+++ b/src/analytics/example/component/breadcrumb/breadcrumb-button/index.ejs
@@ -1,23 +1,5 @@
 <% const sample = getSample(include); %>
 
-<% const getData = (data = {}) => {
-  return {
-    id: uniqueId('breadcrumb'),
-    segments: [
-      { label: 'Accueil', id: uniqueId('breadcrumb') },
-      { label: 'Segment 1 : lorem ipsum', id: uniqueId('breadcrumb') },
-      { label: 'Segment 2 : lorem ipsum', id: uniqueId('breadcrumb') },
-      { label: 'Segment 3 : lorem ipsum', id: uniqueId('breadcrumb') },
-      { label: 'Page Actuelle' }
-    ],
-    ...data
-  }
-};
-%>
-
 <div class="<%= prefix %>-container" >
-
-  <%- section('Étiquette d’élément BUTTON' , null, 0) %>
-  <%- include('../../../../../component/breadcrumb/template/ejs/breadcrumb.ejs', { breadcrumb: getData({ markup: 'button' }) }); %>
-
+  <%- include('../../../../../component/breadcrumb/example/alternative/index.ejs', { }); %>
 </div>
diff --git a/src/analytics/example/component/breadcrumb/index.ejs b/src/analytics/example/component/breadcrumb/index.ejs
index d282e9f93..f13a8fac6 100644
--- a/src/analytics/example/component/breadcrumb/index.ejs
+++ b/src/analytics/example/component/breadcrumb/index.ejs
@@ -1,23 +1,8 @@
 <% const sample = getSample(include); %>
 
-<% const getData = (data = {}) => {
-  return {
-    id: uniqueId('breadcrumb'),
-    segments: [
-      { path: '', label: 'Accueil', id: uniqueId('breadcrumb') },
-      { path: 'segment-1', label: 'Segment 1 : lorem ipsum', id: uniqueId('breadcrumb') },
-      { path: 'segment-2', label: 'Segment 2 : lorem ipsum', id: uniqueId('breadcrumb') },
-      { path: 'segment-3', label: 'Segment 3 : lorem ipsum', id: uniqueId('breadcrumb') },
-      { label: 'Page Actuelle' }
-    ],
-    ...data
-  }
-};
-%>
-
 <div class="<%= prefix %>-container" >
 
   <%- section('Étiquette d’élément A' , null, 0) %>
-  <%- include('../../../../component/breadcrumb/template/ejs/breadcrumb.ejs', { breadcrumb: getData() }); %>
+  <%- include('../../../../component/breadcrumb/example/sample/sample-a.ejs', {}); %>
 
 </div>
diff --git a/src/component/breadcrumb/example/alternative/index.ejs b/src/component/breadcrumb/example/alternative/index.ejs
new file mode 100755
index 000000000..cdf556dfc
--- /dev/null
+++ b/src/component/breadcrumb/example/alternative/index.ejs
@@ -0,0 +1,15 @@
+<% const data = {
+  id: uniqueId('breadcrumb'),
+  segments: [
+    { markup: 'button', path: undefined, label: 'Accueil' },
+    { markup: 'button', path: undefined, label: 'Segment 1 : lorem ipsum' },
+    { markup: 'button', path: undefined, label: 'Segment 2 : lorem ipsum' },
+    { markup: 'button', path: undefined, label: 'Segment 3 : lorem ipsum dolor sit amet' },
+    { markup: 'span', path: undefined, label: 'Page Actuelle' }
+  ],
+  ...locals.breadcrumb
+}
+%>
+
+<%- section('Étiquette d’élément BUTTON' , null, 0) %>
+<%- include('../../template/ejs/breadcrumb.ejs', {breadcrumb: data}); %>
diff --git a/src/component/breadcrumb/example/index.ejs b/src/component/breadcrumb/example/index.ejs
index 9e133df85..b2b7c3dcf 100755
--- a/src/component/breadcrumb/example/index.ejs
+++ b/src/component/breadcrumb/example/index.ejs
@@ -2,4 +2,4 @@
 
 <%- 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/src/component/breadcrumb/example/sample/sample-span.ejs b/src/component/breadcrumb/example/sample/sample-span.ejs
deleted file mode 100755
index 30bb3ed40..000000000
--- a/src/component/breadcrumb/example/sample/sample-span.ejs
+++ /dev/null
@@ -1,14 +0,0 @@
-<% 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-3', 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/i18n/fr.yml b/src/component/breadcrumb/i18n/fr.yml
new file mode 100644
index 000000000..3b80f3d7f
--- /dev/null
+++ b/src/component/breadcrumb/i18n/fr.yml
@@ -0,0 +1,6 @@
+title: Fil d'Ariane
+description: Le fil d’Ariane est un système de navigation secondaire qui permet à l’utilisateur de se situer sur le site qu’il consulte.
+doc: https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/fil-d-ariane
+subdir:
+  title: Mises en situation
+  alternative: Alternatives
diff --git a/src/component/breadcrumb/style/_module.scss b/src/component/breadcrumb/style/_module.scss
index e5be6c63f..cd09da879 100644
--- a/src/component/breadcrumb/style/_module.scss
+++ b/src/component/breadcrumb/style/_module.scss
@@ -72,25 +72,19 @@ un padding de 4px et une marge négative en compensation sont mis en place afin
       }
     }
   }
-
+  
   &__link {
     vertical-align: top;
     position: relative;
     @include disable-tint;
     @include text-style(xs);
-    @include padding(0);
     @include hover-underline;
-    
-    &:not(:last-child) {
-      @include link-underline;
-    }
+    @include padding(0);
     
     &[aria-current] {
-      &:not(button):not([href]) {
-        pointer-events: none;
-        cursor: default;
-        @include disable-underline;
-      }
+      pointer-events: none;
+      cursor: default;
+      @include disable-underline;
     }
   }
 }
diff --git a/src/component/breadcrumb/template/ejs/breadcrumb.ejs b/src/component/breadcrumb/template/ejs/breadcrumb.ejs
index da73d9510..85568bd8d 100644
--- a/src/component/breadcrumb/template/ejs/breadcrumb.ejs
+++ b/src/component/breadcrumb/template/ejs/breadcrumb.ejs
@@ -31,13 +31,15 @@ if (breadcrumb.button === undefined) breadcrumb.button = 'Voir le fil d’Ariane
             const markup = segment.markup || 'a';
             if (segment.path != undefined) path += segment.path + '/';
             if (segment.id) segmentAttrs.id = segment.id;
-            if (segment.href) {
-              segmentAttrs['href'] = segment.href;
+            if (i === breadcrumb.segments.length - 1) {
+              segmentAttrs['aria-current'] = 'page';
             } else {
-              if (i === breadcrumb.segments.length - 1) {
-                segmentAttrs['aria-current'] = 'page';
-              } else {
-                segmentAttrs['href'] = path;
+              if (markup == 'a') {
+                if (segment.href) {
+                  segmentAttrs['href'] = segment.href;
+                } else {
+                  segmentAttrs['href'] = path;
+                }
               }
             }
         %>

From 62f3628a1fab00f535876f520442a6df7a911ac6 Mon Sep 17 00:00:00 2001
From: lab9 <lab9.fr@gmail.com>
Date: Wed, 17 May 2023 19:51:00 +0200
Subject: [PATCH 3/5] Update src/component/breadcrumb/style/_module.scss

---
 src/component/breadcrumb/style/_module.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/component/breadcrumb/style/_module.scss b/src/component/breadcrumb/style/_module.scss
index cd09da879..3f4b56345 100644
--- a/src/component/breadcrumb/style/_module.scss
+++ b/src/component/breadcrumb/style/_module.scss
@@ -76,6 +76,7 @@ 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 hover-underline;

From 454339b739b46a450fe831ed2c144c246d8cfbe1 Mon Sep 17 00:00:00 2001
From: lab9 <lab9.fr@gmail.com>
Date: Wed, 17 May 2023 20:11:42 +0200
Subject: [PATCH 4/5] fix(breadcrumb): sample

---
 .../breadcrumb/breadcrumb-button/index.ejs       |  4 +++-
 .../breadcrumb/example/alternative/index.ejs     | 16 ++--------------
 .../breadcrumb/example/sample/sample-button.ejs  | 14 ++++++++++++++
 3 files changed, 19 insertions(+), 15 deletions(-)
 create mode 100644 src/component/breadcrumb/example/sample/sample-button.ejs

diff --git a/src/analytics/example/component/breadcrumb/breadcrumb-button/index.ejs b/src/analytics/example/component/breadcrumb/breadcrumb-button/index.ejs
index c5f58400f..71d8f0e58 100644
--- a/src/analytics/example/component/breadcrumb/breadcrumb-button/index.ejs
+++ b/src/analytics/example/component/breadcrumb/breadcrumb-button/index.ejs
@@ -1,5 +1,7 @@
 <% const sample = getSample(include); %>
 
 <div class="<%= prefix %>-container" >
-  <%- include('../../../../../component/breadcrumb/example/alternative/index.ejs', { }); %>
+
+  <%- section('Étiquette d’élément button' , null, 0) %>
+  <%- include('../../../../../component/breadcrumb/example/sample/sample-button', { }); %>
 </div>
diff --git a/src/component/breadcrumb/example/alternative/index.ejs b/src/component/breadcrumb/example/alternative/index.ejs
index cdf556dfc..210a9b548 100755
--- a/src/component/breadcrumb/example/alternative/index.ejs
+++ b/src/component/breadcrumb/example/alternative/index.ejs
@@ -1,15 +1,3 @@
-<% const data = {
-  id: uniqueId('breadcrumb'),
-  segments: [
-    { markup: 'button', path: undefined, label: 'Accueil' },
-    { markup: 'button', path: undefined, label: 'Segment 1 : lorem ipsum' },
-    { markup: 'button', path: undefined, label: 'Segment 2 : lorem ipsum' },
-    { markup: 'button', path: undefined, label: 'Segment 3 : lorem ipsum dolor sit amet' },
-    { markup: 'span', path: undefined, label: 'Page Actuelle' }
-  ],
-  ...locals.breadcrumb
-}
-%>
+<% const sample = getSample(include); %>
 
-<%- section('Étiquette d’élément BUTTON' , null, 0) %>
-<%- include('../../template/ejs/breadcrumb.ejs', {breadcrumb: data}); %>
+<%- sample('Fil d’Ariane avec boutons', '../sample/sample-button', { }, true); %>
diff --git a/src/component/breadcrumb/example/sample/sample-button.ejs b/src/component/breadcrumb/example/sample/sample-button.ejs
new file mode 100644
index 000000000..1458756b1
--- /dev/null
+++ b/src/component/breadcrumb/example/sample/sample-button.ejs
@@ -0,0 +1,14 @@
+<% const data = {
+  id: uniqueId('breadcrumb'),
+  segments: [
+    { markup: 'button', path: undefined, label: 'Accueil' },
+    { markup: 'button', path: undefined, label: 'Segment 1 : lorem ipsum' },
+    { markup: 'button', path: undefined, label: 'Segment 2 : lorem ipsum' },
+    { markup: 'button', path: undefined, label: 'Segment 3 : lorem ipsum dolor sit amet' },
+    { markup: 'span', path: undefined, label: 'Page Actuelle' }
+  ],
+  ...locals.breadcrumb
+}
+%>
+
+<%- include('../../template/ejs/breadcrumb.ejs', {breadcrumb: data}); %>

From 09c022fbc047964c5199d9c9324954386fb48cba Mon Sep 17 00:00:00 2001
From: lab9 <lab9.fr@gmail.com>
Date: Wed, 17 May 2023 20:17:28 +0200
Subject: [PATCH 5/5] fix(breadcrumb): sample

---
 .../component/breadcrumb/breadcrumb-button/index.ejs       | 6 ++----
 src/analytics/example/component/breadcrumb/index.ejs       | 7 ++-----
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/analytics/example/component/breadcrumb/breadcrumb-button/index.ejs b/src/analytics/example/component/breadcrumb/breadcrumb-button/index.ejs
index 71d8f0e58..4482127cf 100644
--- a/src/analytics/example/component/breadcrumb/breadcrumb-button/index.ejs
+++ b/src/analytics/example/component/breadcrumb/breadcrumb-button/index.ejs
@@ -1,7 +1,5 @@
 <% const sample = getSample(include); %>
 
-<div class="<%= prefix %>-container" >
-
-  <%- section('Étiquette d’élément button' , null, 0) %>
-  <%- include('../../../../../component/breadcrumb/example/sample/sample-button', { }); %>
+<div class="<%= prefix %>-container">
+  <%- sample('Étiquette d’élément button', '../../../../../component/breadcrumb/example/sample/sample-button'); %>
 </div>
diff --git a/src/analytics/example/component/breadcrumb/index.ejs b/src/analytics/example/component/breadcrumb/index.ejs
index f13a8fac6..a2f585f17 100644
--- a/src/analytics/example/component/breadcrumb/index.ejs
+++ b/src/analytics/example/component/breadcrumb/index.ejs
@@ -1,8 +1,5 @@
 <% const sample = getSample(include); %>
 
-<div class="<%= prefix %>-container" >
-
-  <%- section('Étiquette d’élément A' , null, 0) %>
-  <%- include('../../../../component/breadcrumb/example/sample/sample-a.ejs', {}); %>
-
+<div class="<%= prefix %>-container">
+  <%- sample('Étiquette d’élément a', '../../../../component/breadcrumb/example/sample/sample-a'); %>
 </div>