🐛 fix(breadcrumb): ajoute une page exemple alternative [DS-3254]

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>

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>

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

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); %>
+
+

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

src/component/breadcrumb/style/_module.scss

@@ -72,22 +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 link-underline;
  @include disable-tint;
  @include text-style(xs);
- @include padding(0);
  @include hover-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;
  }
  }
 }

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,26 @@ 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.href) {
- attrs['href'] = segment.href;
+ if (segment.id) segmentAttrs.id = segment.id;
+ if (i === breadcrumb.segments.length - 1) {
+ segmentAttrs['aria-current'] = 'page';
  } else {
- if (i === breadcrumb.segments.length - 1) attrs['aria-current'] = 'page';
- else if (path !== '') attrs['href'] = path;
+ if (markup == 'a') {
+ if (segment.href) {
+ segmentAttrs['href'] = segment.href;
+ } 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>