Skip to content

Commit

Permalink
Merge pull request #18 from thelia/feat/breadcrumb-group
Browse files Browse the repository at this point in the history
feat: breadcrumb group
  • Loading branch information
manonbecle authored Apr 29, 2024
2 parents caa8c78 + edb09e6 commit 36e83e5
Show file tree
Hide file tree
Showing 4 changed files with 105 additions and 38 deletions.
16 changes: 16 additions & 0 deletions components/Molecules/Breadcrumb/Breadcrumb.js
Original file line number Diff line number Diff line change
@@ -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;
30 changes: 23 additions & 7 deletions components/Molecules/Breadcrumb/Breadcrumb.stories.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import Breadcrumb from './Breadcrumb.twig';
import breadcrumbFunction from './Breadcrumb.js';

export default {
title: 'Design System/Molecules/Breadcrumb'
Expand All @@ -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' }
]

}
};
43 changes: 29 additions & 14 deletions components/Molecules/Breadcrumb/Breadcrumb.twig
Original file line number Diff line number Diff line change
@@ -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>




54 changes: 37 additions & 17 deletions components/Molecules/Breadcrumb/breadcrumb.css
Original file line number Diff line number Diff line change
@@ -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);
Expand All @@ -37,4 +53,8 @@
background-color: var(--theme-lightest);
}
}

.hide {
display: none;
}
}

0 comments on commit 36e83e5

Please sign in to comment.