feat: breadcrumb group

components/Molecules/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,16 @@
+const breadcrumbFunction = () => {
+  const btnCompressed = document.querySelector('.Breadcrumb-compressed');
+  const liCompressed = document.getElementById('Breadcrumb-compressed');
+  const items = document.querySelectorAll(".Breadcrumb-item");
+
+  if (btnCompressed) {
+    btnCompressed.addEventListener('click', function () {
+      items.forEach(function (item) {
+        item.classList.remove("hide")
+      });
+      liCompressed.classList.add("hide")
+    })
+  };
+}
+
+export default breadcrumbFunction;

components/Molecules/Breadcrumb/Breadcrumb.stories.js

@@ -1,4 +1,5 @@
 import Breadcrumb from './Breadcrumb.twig';
+import breadcrumbFunction from './Breadcrumb.js';
 
 export default {
   title: 'Design System/Molecules/Breadcrumb'
@@ -7,12 +8,27 @@ export default {
 export const Base = {
   render: (args) => Breadcrumb(args),
   args: {
-    customText: 'Homepage',
-    href: ''
-  },
-  argTypes: {
-    compressed: {
-      control: { type: 'boolean' }
-    }
+    items: [
+      { label: 'Page parante', href: '#' },
+      { label: 'Page mère', href: '#' },
+      { label: 'Page actuelle' }
+    ]
+  }
+};
+
+export const Lengthy = {
+  render: (args) => Breadcrumb(args),
+  play: () => {
+    breadcrumbFunction()
   },
+  args: {
+    items: [
+      { label: 'Non visible', href: '#' },
+      { label: 'Non visible', href: '#' },
+      { label: 'Page parante', href: '#' },
+      { label: 'Page mère', href: '#' },
+      { label: 'Page actuelle' }
+    ]
+
+  }
 };

components/Molecules/Breadcrumb/Breadcrumb.twig

@@ -1,14 +1,29 @@
-{% set classes = '' %}
-{% if compressed %}
-   {% set classes = classes ~ ' Breadcrumb--compressed' %}
-{% endif %}
-
-{% if href %}
-  <a class="Breadcrumb{{ classes }}" href="{{ href }}">
-    {{ compressed ? '...' : customText }}
-  </a>
-{% else %}
-  <span class="Breadcrumb{{ classes }}">
-    {{ compressed ? '...' : customText }}
-  </span>
-{% endif %}
+<nav class="Breadcrumb{{ classes }}" aria-label="Fil d'Ariane">
+  <ol class="Breadcrumb-list" itemscope itemtype="https://schema.org/BreadcrumbList">
+    {% if items.length > 3 %}
+      <li id="Breadcrumb-compressed" class="Breadcrumb-item Breadcrumb-item--isLink">
+        <button class="Breadcrumb-item-link Breadcrumb-compressed">...</button>
+      </li>
+    {% endif %}
+
+    {% for item in items %}
+      <li class="Breadcrumb-item{% if item.href %} Breadcrumb-item--isLink{% endif %}{% if loop.index <= (items.length - 3) %} hide{% endif %}" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
+        {% if item.href %}
+          <a class="Breadcrumb-item-link" href="{{ item.href }}" itemprop="item">
+            <span itemprop="name">{{ item.label }}</span>
+          </a>
+          <meta itemprop="position" content="{{ loop.index + 1 }}" />
+        {% else %}
+          <span itemProp="name" aria-current="page">
+            {{ item.label }}
+          </span>
+          <meta itemprop="position" content="{{ loop.index + 1 }}" />
+        {% endif %}
+      </li>
+    {% endfor %}
+  </ol>
+</nav>
+
+
+
+

components/Molecules/Breadcrumb/breadcrumb.css

@@ -1,32 +1,48 @@
 .Breadcrumb {
-  color: var(--grey);
-  font-size: var(--font-size-paragraph-4);
-  line-height: var(--line-height-paragraph-4);
-  font-family: var(--font-family-paragraph-4);
-  text-decoration: none;
-  outline: none;
-
-  &:active,
-  a&:hover {
-    color: var(--black);
-    text-decoration: underline;
+  &-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
   }
 
-  &:active&:hover {
-    color: var(--grey-dark);
-  }
+  &-item {
+    color: var(--black);
+    font-size: var(--font-size-paragraph-4);
+    line-height: var(--line-height-paragraph-4);
+    font-family: var(--font-family-paragraph-4);
+    display: flex;
+    gap: 8px;
+
+    &--isLink {
+      &::after {
+        content: '/';
+        font-size: rem-convert(10px);
+      }
+    }
 
-  &:focus {
-    background-color: var(--theme-light);
+    &-link {
+      outline: none;
+
+      a&:hover {
+        color: var(--grey);
+      }
+
+      &:focus {
+        background-color: var(--theme-light);
+      }
+    }
   }
 
-  &--compressed {
+  &-compressed {
     background-color: var(--grey-lightest);
     width: rem-convert(16px);
     height: rem-convert(16px);
     display: inline-flex;
     justify-content: center;
     line-height: rem-convert(8px);
+    text-decoration: none;
+    margin-top: 2px;
 
     &:focus {
       background-color: var(--grey-lightest);
@@ -37,4 +53,8 @@
       background-color: var(--theme-lightest);
     }
   }
+
+  .hide {
+    display: none;
+  }
 }