Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(patterns/breadcrumb): add breadcrumb pattern
- Loading branch information
Showing
14 changed files
with
477 additions
and
0 deletions.
There are no files selected for viewing
Binary file added
BIN
+111 KB
packages/designer-kit/sketch-libraries/leroy-merlin/[BB]Breadcrumb.sketch
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,144 @@ | ||
.mc-breadcrumb { | ||
$parent: &; | ||
|
||
@include set-font-face(); | ||
@include set-font-scale('04', 'm'); | ||
|
||
color: $color-font-darker; | ||
padding: magic-unit-rem(0.875, 'true') 0 $mu100 magic-unit-rem(1.125, 'true'); | ||
|
||
@include set-from-screen('s-large') { | ||
padding-left: $mu125; | ||
} | ||
|
||
@include set-from-screen('s-xlarge') { | ||
padding-left: magic-unit-rem(1.375, 'true'); | ||
} | ||
|
||
@include set-from-screen('m') { | ||
padding-left: $mu200; | ||
} | ||
|
||
@include set-from-screen('m-medium') { | ||
padding-left: magic-unit-rem(2.125, 'true'); | ||
} | ||
|
||
@include set-from-screen('l') { | ||
padding-left: $mu300; | ||
} | ||
|
||
@include set-from-screen('xl') { | ||
padding-left: $mu200; | ||
} | ||
|
||
@include set-from-screen('xl-medium') { | ||
padding-left: $mu700; | ||
} | ||
|
||
@include set-from-screen('xl-large') { | ||
padding-left: $mu200; | ||
} | ||
|
||
@include set-from-screen('xxl') { | ||
padding-left: $mu250; | ||
} | ||
|
||
&__container { | ||
@include unstyle-list(); | ||
|
||
display: flex; | ||
margin-bottom: 0; | ||
margin-top: 0; | ||
} | ||
|
||
&__item { | ||
padding-right: $mu050; | ||
background-position: left bottom; | ||
background-repeat: no-repeat; | ||
background-size: $mu100; | ||
|
||
&:only-child, | ||
&:not(:first-child) { | ||
padding-left: $mu150; | ||
} | ||
|
||
&:not(:first-child) { | ||
@include set-from-screen('m') { | ||
background-image: url(inline-icons('arrow-right-16', $color-grey-800)); | ||
} | ||
} | ||
|
||
&.is-active, | ||
&:only-child { | ||
@media screen and (max-width: 679px) { | ||
background-image: url(inline-icons('arrow-left-16', $color-grey-800)); | ||
} | ||
} | ||
} | ||
|
||
&__current { | ||
text-decoration: none; | ||
|
||
@include set-from-screen('m') { | ||
cursor: default; | ||
} | ||
|
||
&, | ||
&:active, | ||
&:focus, | ||
&:hover, | ||
&:visited { | ||
color: currentColor; | ||
} | ||
} | ||
|
||
&--dark { | ||
background-color: $color-grey-700; | ||
color: $color-font-lightest; | ||
|
||
#{$parent} { | ||
&__item { | ||
&:not(:first-child) { | ||
background-image: | ||
url( | ||
inline-icons( | ||
'arrow-right-16', | ||
$color-grey-000 | ||
)); | ||
} | ||
|
||
&.is-active, | ||
&:only-child { | ||
@media screen and (max-width: 679px) { | ||
background-image: | ||
url( | ||
inline-icons( | ||
'arrow-left-16', | ||
$color-grey-000 | ||
)); | ||
} | ||
} | ||
} | ||
} | ||
} | ||
|
||
&--responsive { | ||
#{$parent} { | ||
&__item { | ||
&:not(.is-active) { | ||
@media screen and (max-width: 679px) { | ||
@include set-hidden-input(); | ||
} | ||
} | ||
|
||
&.is-active { | ||
.mc-link__icon { | ||
@media screen and (max-width: 679px) { | ||
transform: rotate(180deg) translateY(-15%); | ||
} | ||
} | ||
} | ||
} | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,141 @@ | ||
--- | ||
title: 'Code' | ||
order: 2 | ||
--- | ||
|
||
## Basic implementation | ||
|
||
### Import | ||
|
||
Import **the settings**, **the link** and **the breadcrumb** scss files. | ||
|
||
```scss | ||
@import 'settings-tools/_all-settings'; | ||
|
||
@include import-font-families(); | ||
|
||
@import 'components/_c.links'; | ||
|
||
@import 'components/_c.breadcrumb'; | ||
``` | ||
|
||
### Usage | ||
|
||
You can create breadcrumbs in the following way: | ||
|
||
- Use the `mc-breadcrumb` class on an HTML element `<nav>` as a wrapper | ||
- Apply the `mc-breadcrumb__container` class to the `<ul>` container of your breadcrumb | ||
- The `<li>` elements must have the class `mc-breadcrumb__item` | ||
- Each link must have the class `mc-link` | ||
- In addition to the `mc-link` class, add the class `mc-breadcrumb__current` on the last level link | ||
|
||
```html | ||
<nav class="mc-breadcrumb" aria-label="Breadcrumb"> | ||
<ul class="mc-breadcrumb__container"> | ||
<li class="mc-breadcrumb__item"> | ||
<a href="#" class="mc-link"> | ||
Level 00 | ||
</a> | ||
</li> | ||
<li class="mc-breadcrumb__item"> | ||
<span class="mc-link mc-breadcrumb__current"> | ||
Level 01 | ||
</span> | ||
</li> | ||
</ul> | ||
</nav> | ||
``` | ||
|
||
> Note that for all behaviors related to breadcrumb links, please refer to the [Links pattern documentation](/Components/Links/code/). | ||
<Preview path="default" /> | ||
|
||
## Variations | ||
|
||
### Color themes | ||
|
||
The breadcrumb is available in two colour variations. | ||
|
||
You can use these variations by applying the following modifiers: | ||
|
||
- **Light mode**: this is the default variation so you don't need to add a modifier | ||
- **Dark mode**: use the `mc-breadcrumb--dark` modifier | ||
|
||
#### About the dark mode | ||
|
||
In addition to the `mc-breadcrumb--dark` modifier to use on the wrapper, you must also use the `mc-link--light` modifier on the links. | ||
|
||
> You can learn more about how this works in the [Links pattern documentation](/Components/Links/code/). | ||
<Preview path="dark-mode" /> | ||
|
||
## Behaviours | ||
|
||
### Smaller breakpoints | ||
|
||
As explained on [the main page](/Components/Breadcrumb/#smaller-breakpoints), the breadcrumb can't be displayed entirely on lower resolutions. | ||
|
||
That's why you must make sure to display **only** the current page item on these resolutions. | ||
|
||
```html | ||
<nav class="mc-breadcrumb" aria-label="Breadcrumb"> | ||
<ul class="mc-breadcrumb__container"> | ||
<li class="mc-breadcrumb__item"> | ||
<a href="#" class="mc-link mc-breadcrumb__current"> | ||
Level | ||
</a> | ||
</li> | ||
</ul> | ||
</nav> | ||
``` | ||
|
||
If you don't have the possibility to perform tests allowing you to display only the current element, we provide you with a way to achieve the desired functioning in pure HTML & CSS: | ||
|
||
- Add the `mc-breadcrumb--responsive` modifier to the wrapper | ||
- Add the `is-active` class on the last `<li>` level | ||
|
||
```html | ||
<nav class="mc-breadcrumb mc-breadcrumb--responsive" aria-label="Breadcrumb"> | ||
<ul class="mc-breadcrumb__container"> | ||
<li class="mc-breadcrumb__item"> | ||
<a href="#" class="mc-link"> | ||
Level 00 | ||
</a> | ||
</li> | ||
<li class="mc-breadcrumb__item"> | ||
<a href="#" class="mc-link"> | ||
Level 01 | ||
</a> | ||
</li> | ||
<li class="mc-breadcrumb__item is-active"> | ||
<span class="mc-link mc-breadcrumb__current"> | ||
Level 02 | ||
</span> | ||
</li> | ||
</ul> | ||
</nav> | ||
``` | ||
|
||
<Preview path="responsive" /> | ||
|
||
## Semantic | ||
|
||
<HintItem> | ||
The breadcrumb being a navigation element, we recommend you use a{' '} | ||
<strong>nav</strong> tag as its global wrapper. | ||
</HintItem> | ||
<HintItem> | ||
An HTML structure with <strong>ul</strong> and <strong>li</strong> elements is | ||
recommended inside your global wrapper. | ||
</HintItem> | ||
|
||
## Accessibility | ||
|
||
<HintItem> | ||
The global wrapper <strong>.mc-breadcrumb</strong> must have the{' '} | ||
<strong>aria-label="Breadcrumb "</strong> attribute. | ||
</HintItem> | ||
<HintItem> | ||
The HTML element referring to the current page must have the{' '} | ||
<strong>aria-current="page "</strong> attribute. | ||
</HintItem> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
--- | ||
title: 'Breadcrumb' | ||
order: 1 | ||
description: 'Breadcrumb is a secondary navigation allowing the user to understand where the current page is located in the website architecture and to go back to previous steps or levels when needed.' | ||
status: | ||
sketch: 'bêta' | ||
scss: 'bêta' | ||
--- | ||
|
||
> Breadcrumb is a secondary navigation allowing the user to understand where the current page is located in the website architecture and to go back to previous steps or levels when needed. | ||
# Variations | ||
|
||
## Color themes | ||
|
||
Every breadcrumb size variation is available both in light and dark version. This allows you to adapt the breadcrumb to the background of your designs. | ||
|
||
### Light mode | ||
|
||
<Preview path="default" nude /> | ||
|
||
### Dark mode | ||
|
||
<Preview path="dark-mode" nude /> | ||
|
||
## Breakpoint behaviours | ||
|
||
### Smaller breakpoints | ||
|
||
Breadcrumb can't be fully displayed on smaller breakpoints, that is why this version allows you to go back on the previous level only. | ||
|
||
![preferences](breadcrumb-preview--small.png) | ||
|
||
### Medium and larger breakpoints | ||
|
||
For medium and larger breakpoints, you can display the whole path of the current page. We used some links to inform the user that the breadcrumb is clickable. | ||
|
||
<Preview path="default" nude /> | ||
|
||
## Do & dont's | ||
|
||
<HintItem> | ||
Always place the breadcrumb at the top of the page under the header. | ||
</HintItem> | ||
<HintItem>Use breadcrumb for three or more architecture levels.</HintItem> | ||
<HintItem dont> | ||
Don't use breadcrumb on a website that has two architecture levels only. | ||
</HintItem> |
26 changes: 26 additions & 0 deletions
26
src/docs/Components/Breadcrumb/previews/dark-mode.preview.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
<div class="example"> | ||
<nav class="mc-breadcrumb mc-breadcrumb--dark" aria-label="Breadcrumb"> | ||
<ul class="mc-breadcrumb__container"> | ||
<li class="mc-breadcrumb__item"> | ||
<a href="#" class="mc-link mc-link--light"> | ||
Level 00 | ||
</a> | ||
</li> | ||
<li class="mc-breadcrumb__item"> | ||
<a href="#" class="mc-link mc-link--light"> | ||
Level 01 | ||
</a> | ||
</li> | ||
<li class="mc-breadcrumb__item"> | ||
<a href="#" class="mc-link mc-link--light"> | ||
Level 02 | ||
</a> | ||
</li> | ||
<li class="mc-breadcrumb__item"> | ||
<span class="mc-link mc-link--light mc-breadcrumb__current"> | ||
Level 03 | ||
</span> | ||
</li> | ||
</ul> | ||
</nav> | ||
</div> |
13 changes: 13 additions & 0 deletions
13
src/docs/Components/Breadcrumb/previews/dark-mode.preview.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
@import 'settings-tools/_all-settings'; | ||
|
||
@include import-font-families(); | ||
|
||
@import 'components/_c.links'; | ||
@import 'components/_c.breadcrumb'; | ||
|
||
.example { | ||
@include set-font-face(); | ||
|
||
display: block; | ||
padding: $mu150; | ||
} |
Oops, something went wrong.