feat(orange navbar): supra bar (#795)

* Supra bar standard — WEB-GLH-SUB-001 * Supra bar with language options — WEB-GLH-SUB-002 * Supra bar with actions — WEB-GLH-SUB-003
Orange-OpenSource · Dec 1, 2021 · 4b4666c · 4b4666c
1 parent 3fbe7c1
commit 4b4666c
Show file tree

Hide file tree

Showing 13 changed files with 255 additions and 6 deletions.
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
@@ -26,11 +26,11 @@
     },
     {
       "path": "./dist/css/boosted.css",
-      "maxSize": "27.6 kB"
+      "maxSize": "27.8 kB"
     },
     {
       "path": "./dist/css/boosted.min.css",
-      "maxSize": "25.3 kB"
+      "maxSize": "25.4 kB"
     },
     {
       "path": "./dist/js/boosted.bundle.js",

diff --git a/.cspell.json b/.cspell.json
@@ -46,6 +46,7 @@
     "favicons",
     "fieldsets",
     "flexbox",
+    "française",
     "fullscreen",
     "fusv",
     "getbootstrap",

diff --git a/scss/_orange-navbar.scss b/scss/_orange-navbar.scss
@@ -0,0 +1,63 @@
+// Contents
+//
+// Supra bar
+
+
+// Supra bar
+//
+// Brand exclusive thin navbar that can be used with orange navbar
+.supra {
+  display: none;
+  padding-top: 0;
+  padding-bottom: 0;
+  border-bottom: $navbar-orange-supra-border-bottom-width solid $gray-700;
+
+  .container {
+    padding-right: $navbar-orange-supra-padding-x;
+    padding-left: $navbar-orange-supra-padding-x;
+  }
+
+  @include media-breakpoint-up(md) {
+    display: flex;
+  }
+
+  .navbar-nav .nav-link {
+    padding: $navbar-orange-supra-link-padding-top $navbar-orange-supra-link-padding-x $navbar-orange-supra-link-padding-bottom;
+    font-size: $font-size-sm;
+    line-height: $line-height-sm;
+
+    &.active::before {
+      right: $navbar-orange-supra-link-padding-x;
+      bottom: -$navbar-orange-supra-border-bottom-width;
+      left: $navbar-orange-supra-link-padding-x;
+    }
+
+    &.nav-icon {
+      padding: $navbar-orange-supra-icon-padding-top $navbar-orange-supra-icon-padding-x $navbar-orange-supra-icon-padding-bottom;
+
+      svg,
+      img {
+        width: $navbar-orange-supra-icon-size;
+        height: $navbar-orange-supra-icon-size;
+      }
+    }
+
+    .badge {
+      @extend .position-absolute;
+      @extend .top-0;
+      @extend .bg-info;
+      @extend .text-white;
+      @extend .translate-middle;
+      @extend .rounded-pill;
+      padding: $navbar-orange-supra-badge-padding-y $navbar-orange-supra-badge-padding-x;
+      margin-top: $navbar-orange-supra-badge-margin-top;
+      font-size: $font-size-base;
+    }
+  }
+
+  .nav-item:last-of-type {
+    .nav-icon {
+      padding-right: $navbar-orange-supra-link-padding-x;
+    }
+  }
+}
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1190,11 +1190,8 @@ $navbar-nav-link-padding-x:         $nav-link-padding-x * .5 !default;
 
 // Boosted mod: Orange master logo & minimizing behavior
 $navbar-icon-size:                     $spacer * 1.5 !default;
-//$navbar-height:                        6.25rem !default;
 $navbar-brand-logo-height:             add($spacer * 1.5, $spacer) !default;
 $navbar-brand-logo-minimized-height:   $spacer * 1.5 !default;
-//$navbar-supra-padding-y:               $navbar-brand-logo-height / 10 !default;
-//$navbar-supra-padding-x:               $spacer * .25 * 1.5 !default;
 $navbar-transition-duration:           $transition-duration !default;
 $navbar-transition-timing-function:    $transition-timing !default;
 $navbar-transition:                    padding-top $navbar-transition-duration $navbar-transition-timing-function, padding-bottom $navbar-transition-duration $navbar-transition-timing-function, $transition-focus !default;
@@ -1203,6 +1200,26 @@ $navbar-brand-logo-transition:         width $navbar-transition-duration $navbar
 $navbar-active-transition:             bottom $navbar-transition-duration $navbar-transition-timing-function !default;
 // End mod
 
+// Boosted mod: Orange navbar
+// scss-docs-start orange-navbar-variables
+$navbar-orange-supra-padding-x:               .125rem !default;
+$navbar-orange-supra-border-bottom-width:     1px !default;
+
+$navbar-orange-supra-badge-padding-y:         .125rem !default;
+$navbar-orange-supra-badge-padding-x:         .375rem !default;
+$navbar-orange-supra-badge-margin-top:        map-get($spacers, 4) * .1 !default;
+
+$navbar-orange-supra-icon-padding-top:        divide($spacer, 2) !default;
+$navbar-orange-supra-icon-padding-x:          .9375rem !default;
+$navbar-orange-supra-icon-padding-bottom:     .25rem !default;
+$navbar-orange-supra-icon-size:               1.5625rem !default;
+
+$navbar-orange-supra-link-padding-top:        .75rem !default;
+$navbar-orange-supra-link-padding-x:          map-get($spacers, 1) * 1.5 !default;
+$navbar-orange-supra-link-padding-bottom:     .6875rem !default;
+// scss-docs-end orange-navbar-variables
+// End mod
+
 $navbar-brand-font-size:            $font-size-base !default;
 // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
 $navbar-brand-padding-y:            null !default;

diff --git a/scss/boosted.scss b/scss/boosted.scss
@@ -55,6 +55,7 @@
 // Boosted
 @import "back-to-top";
 @import "stepped-process";
+@import "orange-navbar";
 
 // Helpers
 @import "helpers";

diff --git a/site/content/docs/5.1/about/overview.md b/site/content/docs/5.1/about/overview.md
@@ -23,6 +23,7 @@ Boosted can be used for all **responsive web projects** for Orange group —&nbs
 Boosted ships with custom accessible components to suit specific needs:
 
 - [Back to top]({{< docsref "/components/back-to-top" >}})
+- [Orange Navbars]({{< docsref "/components/orange-navbar" >}})
 - [Stepped process]({{< docsref "/components/stepped-process" >}})
 
 

diff --git a/site/content/docs/5.1/components/orange-navbar.md b/site/content/docs/5.1/components/orange-navbar.md
@@ -0,0 +1,79 @@
+---
+layout: docs
+title: Orange Navbar
+description: Documentation and examples for Boosted's exclusive Brand responsive navbars.
+group: components
+toc: true
+---
+
+## How it works
+
+Orange navbar is based on the [navbar]({{<docsref "/components/navbar">}}) component. It adds some display management and introduces the supra bar component.
+You may refer to its documentation in order to properly create and use navbars.
+
+## Example
+
+### Supra bar
+
+A simple navigation can be added on top of Orange navbar, it is called supra bar. Simply add the `.supra` class in your navbar declaration.
+
+{{< callout warning >}}
+This navbar is visible only on desktop view. 
+{{< /callout >}}
+
+{{< example >}}
+{{< orange-supra >}}
+    <ul class="navbar-nav ml-auto">
+      <li class="nav-item"><a class="nav-link active" href="#" aria-label="English version">EN</a></li>
+      <li class="nav-item"><a class="nav-link" href="#" aria-label="Version française" lang="fr" hreflang="fr">FR</a></li>
+      <li class="nav-item"><a class="nav-link" href="#" aria-label="Version en español" lang="es" hreflang="es">ES</a></li>
+    </ul>
+{{< /orange-supra >}}
+{{< /example >}}
+
+You can also use icons as navigation items as followed:
+
+{{< example >}}
+{{< orange-supra >}}
+<ul class="navbar-nav ml-auto">
+  <li class="nav-item">
+    <a href="#" class="nav-link nav-icon">
+      <svg fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
+        <use xlink:href="/docs/5.1/assets/img/boosted-sprite.svg#search"/>
+      </svg>
+      <span class="visually-hidden">Search</span>
+    </a>
+  </li>
+  <li class="nav-item">
+    <a href="#" class="nav-link nav-icon">
+      <svg fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
+        <use xlink:href="/docs/5.1/assets/img/boosted-sprite.svg#buy"/>
+      </svg>
+      <span class="visually-hidden">Basket</span>
+      <span class="position-relative">
+        <span class="badge">
+          1
+          <span class="visually-hidden">shopping basket items</span>
+        </span>
+      </span>
+    </a>
+  </li>
+  <li class="nav-item">
+    <a href="#" class="nav-link nav-icon">
+      <img src="/docs/5.1/assets/img/navbar-contact.png" role="img" alt="User" loading="lazy" aria-hidden="true">
+      <span class="visually-hidden">My account</span>
+    </a>
+  </li>
+</ul>
+{{< /orange-supra >}}
+{{< /example >}}
+
+You can have a complete overview of how to use supra bars in the dedicated [Design Guidelines page]({{<docsref "/guidelines/global-headers">}})
+
+## Sass
+
+### Variables
+
+For more details, please have a look at the exhaustive list of available variables:
+
+{{< scss-docs name="orange-navbar-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.1/guidelines/global-headers.md b/site/content/docs/5.1/guidelines/global-headers.md
@@ -7,6 +7,70 @@ subgroup: Modules
 toc: true
 ---
 
+## Supra bars
 {{< callout info >}}
-The feature will be delivered with [#525]({{< param repo >}}/issues/525).
+<strong>Supra bars are hidden on tablet and mobile devices.</strong><br>
+Based on viewport size, supra bar is hidden under <var>768px</var>.
 {{< /callout >}}
+
+### Supra bar standard
+
+{{< anchor web-glh-sub-001 >}}
+
+{{< example show_markup="true" class="p-0">}}
+{{< orange-supra >}}
+{{< /orange-supra >}}
+{{< /example >}}
+
+### Supra bar with language options
+
+{{< anchor web-glh-sub-002 >}}
+
+{{< example show_markup="true" class="p-0">}}
+{{< orange-supra >}}
+<ul class="navbar-nav ml-auto">
+  <li class="nav-item"><a class="nav-link active" href="#" aria-label="English version">EN</a></li>
+  <li class="nav-item"><a class="nav-link" href="#" aria-label="Version française" lang="fr" hreflang="fr">FR</a></li>
+  <li class="nav-item"><a class="nav-link" href="#" aria-label="Version en español" lang="es" hreflang="es">ES</a></li>
+</ul>
+{{< /orange-supra >}}
+{{< /example >}}
+
+### Supra bar with actions
+
+{{< anchor web-glh-sub-003 >}}
+
+{{< example show_markup="true" class="p-0">}}
+{{< orange-supra >}}
+<ul class="navbar-nav ml-auto">
+  <li class="nav-item">
+    <a href="#" class="nav-link nav-icon">
+      <svg fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
+        <use xlink:href="/docs/5.1/assets/img/boosted-sprite.svg#search"/>
+      </svg>
+      <span class="visually-hidden">Search</span>
+    </a>
+  </li>
+  <li class="nav-item">
+    <a href="#" class="nav-link nav-icon">
+      <svg fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
+        <use xlink:href="/docs/5.1/assets/img/boosted-sprite.svg#buy"/>
+      </svg>
+      <span class="visually-hidden">Basket</span>
+      <span class="position-relative">
+        <span class="badge">
+          1
+          <span class="visually-hidden">shopping basket items</span>
+        </span>
+      </span>
+    </a>
+  </li>
+  <li class="nav-item">
+    <a href="#" class="nav-link nav-icon">
+      <img src="/docs/5.1/assets/img/navbar-contact.png" role="img" alt="User" loading="lazy" aria-hidden="true">
+      <span class="visually-hidden">My account</span>
+    </a>
+  </li>
+</ul>
+{{< /orange-supra >}}
+{{< /example >}}
diff --git a/site/content/docs/5.1/migration.md b/site/content/docs/5.1/migration.md
@@ -333,6 +333,10 @@ Your custom Boosted CSS builds should now look something like this with a separa
 
 - Added the new [offcanvas component]({{< docsref "/components/offcanvas" >}}).
 
+### Orange navbar
+
+- <span class="badge bg-danger">Breaking</span> Supra bars now require a `.bg-dark` class.
+
 ### Pagination
 
 - Pagination links now have customizable `margin-left` that are dynamically rounded on all corners when separated from one another.

diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml
@@ -74,6 +74,7 @@
     - title: Navs & tabs
     - title: Navbar
     - title: Offcanvas
+    - title: Orange navbar
     - title: Pagination
     - title: Placeholders
     - title: Popovers

diff --git a/site/layouts/shortcodes/orange-supra.html b/site/layouts/shortcodes/orange-supra.html
@@ -0,0 +1,15 @@
+{{- /*
+  Usage: `orange-supra`
+*/ -}}
+
+{{- $input := .Inner -}}
+
+<nav class="navbar navbar-dark navbar-expand bg-dark supra">
+  <div class="container">
+    <ul class="navbar-nav">
+      <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Personal</a></li>
+      <li class="nav-item"><a href="#" class="nav-link">Business</a></li>
+    </ul>
+    {{- $input -}}
+  </div>
+</nav>
diff --git a/site/static/docs/5.1/assets/img/boosted-sprite.svg b/site/static/docs/5.1/assets/img/boosted-sprite.svg
diff --git a/site/static/docs/5.1/assets/img/navbar-contact.png b/site/static/docs/5.1/assets/img/navbar-contact.png