feat(patterns/breadcrumb): add breadcrumb pattern

adeo · Jul 23, 2020 · 2fa3c91 · 2fa3c91
1 parent 2051eb3
commit 2fa3c91
Show file tree

Hide file tree

Showing 14 changed files with 477 additions and 0 deletions.
diff --git a/packages/designer-kit/sketch-libraries/leroy-merlin/[BB]Breadcrumb.sketch b/packages/designer-kit/sketch-libraries/leroy-merlin/[BB]Breadcrumb.sketch
diff --git a/packages/styles/components/_c.breadcrumb.scss b/packages/styles/components/_c.breadcrumb.scss
@@ -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%);
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/styles/settings-tools/_s.inline-icons.scss b/packages/styles/settings-tools/_s.inline-icons.scss
@@ -15,6 +15,14 @@
     @return '<svg xmlns="http://www.w3.org/2000/svg" height="1rem" width="1rem" fill="#{$fill}" viewBox="0 0 16 16"><path d="M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z"/></svg>';
   }
 
+  @if $icon == 'arrow-left-16' {
+    @return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#{$fill}"><path d="M10.5 14a1 1 0 01-.71-.29l-5-5a1 1 0 010-1.42l5-5a1 1 0 111.42 1.42L6.91 8l4.3 4.29a1 1 0 010 1.42 1 1 0 01-.71.29z"/></svg>';
+  }
+
+  @if $icon == 'arrow-right-16' {
+    @return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#{$fill}"><path d="M5.5 14a1 1 0 01-.71-.29 1 1 0 010-1.42L9.09 8l-4.3-4.29a1 1 0 011.42-1.42l5 5a1 1 0 010 1.42l-5 5a1 1 0 01-.71.29z"/></svg>';
+  }
+
   @if $icon == 'arrow-down-16' {
     @return '<svg xmlns="http://www.w3.org/2000/svg" height="1rem" width="1rem" fill="#{$fill}" viewBox="0 0 16 16"><path d="M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z"/></svg>';
   }

diff --git a/src/docs/Components/Breadcrumb/breadcrumb-preview--small.png b/src/docs/Components/Breadcrumb/breadcrumb-preview--small.png
diff --git a/src/docs/Components/Breadcrumb/code.mdx b/src/docs/Components/Breadcrumb/code.mdx
@@ -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 link documentation.
+
+<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>
diff --git a/src/docs/Components/Breadcrumb/index.mdx b/src/docs/Components/Breadcrumb/index.mdx
@@ -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>
diff --git a/src/docs/Components/Breadcrumb/previews/dark-mode.preview.html b/src/docs/Components/Breadcrumb/previews/dark-mode.preview.html
@@ -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>
diff --git a/src/docs/Components/Breadcrumb/previews/dark-mode.preview.scss b/src/docs/Components/Breadcrumb/previews/dark-mode.preview.scss
@@ -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;
+}