Merge pull request #63 from thelia/feat/breadcrumb

feat(breadcrumb): add component

components/Molecules/Breadcrumb/Breadcrumb.stories.js

@@ -0,0 +1,33 @@
+import { breadcrumb } from './breadcrumb.js';
+import Breadcrumb from './Breadcrumb.twig';
+
+export default {
+  title: 'Design System/Molecules/Breadcrumb'
+};
+
+export const Base = {
+  render: (args) => Breadcrumb(args),
+  args: {
+    items: [
+      { label: 'Page parante', href: '#' },
+      { label: 'Page mère', href: '#' },
+      { label: 'Page actuelle' }
+    ]
+  }
+};
+
+export const Lengthy = {
+  render: (args) => Breadcrumb(args),
+  play: () => {
+    breadcrumb();
+  },
+  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

@@ -0,0 +1,28 @@
+{% set classes = classes|default('') %}
+{% set items = items|default([]) %}
+
+<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 paragraph-3{% 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.js

@@ -0,0 +1,14 @@
+export const breadcrumb = () => {
+  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');
+    });
+  }
+};

components/Molecules/Breadcrumb/paragraph.css

@@ -0,0 +1,58 @@
+.Breadcrumb {
+  &-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: rem-convert(8px);
+    align-items: center;
+  }
+
+  &-item {
+    color: var(--black);
+    display: flex;
+    gap: rem-convert(8px);
+
+    &--isLink {
+      &::after {
+        content: '/';
+        font-size: rem-convert(10px);
+      }
+    }
+
+    &-link {
+      outline: none;
+      text-decoration: underline;
+
+      a&:hover {
+        color: var(--grey);
+      }
+
+      &:focus-visible {
+        background-color: var(--vermillon-light);
+      }
+    }
+  }
+
+  &-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: rem-convert(2px);
+
+    &:focus-visible {
+      background-color: var(--grey-lightest);
+      border: solid 1px var(--vermillon-medium);
+    }
+
+    &:hover {
+      background-color: var(--vermillon-lightest);
+    }
+  }
+
+  .hide {
+    display: none;
+  }
+}