Orange-OpenSource · julien-deramond · Aug 30, 2023 · Aug 19, 2022 · Aug 19, 2022 · Dec 22, 2022
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
@@ -26,11 +26,11 @@
  },
  {
  "path": "./dist/css/boosted.css",
- "maxSize": "43.0 kB"
+ "maxSize": "43.5 kB"
  },
  {
  "path": "./dist/css/boosted.min.css",
- "maxSize": "40.0 kB"
+ "maxSize": "40.25 kB"
  },
  {
  "path": "./dist/js/boosted.bundle.js",

diff --git a/.cspell.json b/.cspell.json
@@ -78,6 +78,7 @@
  "mouseleave",
  "myproject",
  "navbars",
+ "navigations",
  "navs",
  "Neue",
  "noindex",

diff --git a/scss/_local-navigation.scss b/scss/_local-navigation.scss
@@ -0,0 +1,131 @@
+.local-nav {
+ // scss-docs-start local-nav-css-vars
+ --#{$prefix}local-nav-padding-y: #{$local-nav-padding-y};
+ --#{$prefix}local-nav-color: #{$local-nav-color};
+ --#{$prefix}local-nav-bg: #{$local-nav-bg};
+ --#{$prefix}local-nav-hover-color: #{$local-nav-hover-color};
+ --#{$prefix}local-nav-hover-bg: #{$local-nav-hover-bg};
+ --#{$prefix}local-nav-active-color: #{$local-nav-active-color};
+ --#{$prefix}local-nav-active-bg: #{$local-nav-active-bg};
+ --#{$prefix}local-nav-active-marker-width: #{$local-nav-active-marker-width};
+ --#{$prefix}local-nav-border-color: #{$local-nav-border-color};
+ --#{$prefix}local-nav-border-width: #{$local-nav-border-width};
+ // scss-docs-end local-nav-css-vars
+
+ background-color: var(--#{$prefix}local-nav-bg);
+ border-bottom: var(--#{$prefix}local-nav-border-color) solid var(--#{$prefix}local-nav-border-width);
+
+ .local-nav-button {
+ display: block;
+ width: 100%;
+ padding: subtract(var(--#{$prefix}local-nav-padding-y), var(--#{$prefix}local-nav-border-width)) 0 var(--#{$prefix}local-nav-padding-y);
+ font-weight: $font-weight-bold;
+ color: var(--#{$prefix}local-nav-hover-color);
+ background-color: transparent;
+ border: 0;
+
+ > [class*="container"] {
+ display: flex;
+ @include caret($accordion: true);
+
+ &::after {
+ margin-right: 0;
+ color: var(--#{$prefix}local-nav-color);
+ }
+ }
+
+ &:not(.collapsed) {
+ border-bottom: var(--#{$prefix}local-nav-border-color) solid var(--#{$prefix}local-nav-border-width);
+
+ > [class*="container"] {
+ @include caret(up, $accordion: true);
+
+ &::after {
+ margin-right: 0;
+ }
+ }
+ }
+ }
+
+ > .local-nav-collapse {
+ @include media-breakpoint-down(lg) {
+ max-width: unset;
+ }
+
+ @include media-breakpoint-up(lg) {
+ .container-xxl {
+ padding: 0;
+ }
+ }
+ }
+
+ .navbar {
+ --bs-navbar-padding-y: 0px;
+ --bs-navbar-border-color: transparent;
+
+ .nav-item {
+ border-top: 0;
+ }
+
+ .nav-link {
+ --bs-navbar-padding-y: 1px;
+
+ &:hover {
+ color: var(--#{$prefix}local-nav-hover-color);
+
+ &::before {
+ color: var(--#{$prefix}local-nav-active-color);
+ }
+ }
+
+ @include media-breakpoint-down(lg) {
+ --bs-nav-link-padding-x: 0;
+ --bs-navbar-border-width: 0px;
+
+ &:hover {
+ color: var(--#{$prefix}local-nav-color);
+ background-color: var(--#{$prefix}local-nav-hover-bg);
+ }
+ }
+ }
+
+ .nav-link.active {
+ color: var(--#{$prefix}local-nav-color);
+
+ @include media-breakpoint-up(lg) {
+ color: var(--#{$prefix}local-nav-hover-color);
+ }
+
+ &::before {
+ bottom: calc(-1 * var(--#{$prefix}local-nav-border-width)); // stylelint-disable-line function-disallowed-list
+ color: var(--#{$prefix}local-nav-active-color);
+ }
+
+ @include media-breakpoint-down(lg) {
+ background-color: var(--#{$prefix}local-nav-active-bg);
+
+ &::before {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ width: var(--#{$prefix}local-nav-active-marker-width);
+ content: "";
+ background-color: var(--#{$prefix}local-nav-active-color);
+ }
+ }
+ }
+ }
+}
+
+.local-nav-dark {
+ // scss-docs-start local-nav-dark-css-vars
+ --#{$prefix}local-nav-color: #{$local-nav-dark-color};
+ --#{$prefix}local-nav-bg: #{$local-nav-dark-bg};
+ --#{$prefix}local-nav-hover-color: #{$local-nav-dark-hover-color};
+ --#{$prefix}local-nav-hover-bg: #{$local-nav-dark-hover-bg};
+ --#{$prefix}local-nav-active-color: #{$local-nav-dark-active-color};
+ --#{$prefix}local-nav-active-bg: #{$local-nav-dark-active-bg};
+ --#{$prefix}local-nav-border-color: #{$local-nav-dark-border-color};
+ // scss-docs-end local-nav-dark-css-vars
+}
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
@@ -187,7 +187,7 @@
  .nav-link {
  position: relative;
  padding-top: subtract(var(--#{$prefix}navbar-nav-link-padding-y), var(--#{$prefix}navbar-border-width));
- margin-left: calc(-1 * var(--#{$prefix}navbar-nav-link-padding-x)); // stylelint-disable-line function-disallowed-list
+ margin: 0 calc(-1 * var(--#{$prefix}navbar-nav-link-padding-x)); // stylelint-disable-line function-disallowed-list
  word-break: break-all;
 
  &:hover {
@@ -384,7 +384,7 @@
 
  // Boosted mod
  .nav-link {
- margin-left: 0;
+ margin: 0;
 
  &.active::before {
  position: absolute;

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1505,15 +1505,15 @@ $navbar-badge-margin-top: .375rem !default;
 // End mod
 
 // scss-docs-start navbar-dark-variables
-$navbar-dark-border-color: $gray-700 !default;
-$navbar-dark-color: $white !default;
-$navbar-dark-hover-color: $primary !default;
-$navbar-dark-active-color: $primary !default;
-$navbar-dark-disabled-color: $gray-400 !default;
-$navbar-dark-toggler-border-color: transparent !default;
-// Boosted mod: np $navbar-dark-icon-color
+$navbar-dark-border-color: $gray-700 !default; // Boosted mod
+$navbar-dark-color: $white !default; // Boosted mod: instead of `rgba($white, .55)`
+$navbar-dark-hover-color: $primary !default; // Boosted mod: instead of `rgba($white, .75)`
+$navbar-dark-active-color: $primary !default; // Boosted mod: instead of `$white`
+$navbar-dark-disabled-color: $gray-700 !default; // Boosted mod: instead of `rgba($white, .25)`
+// Boosted mod: no $navbar-dark-icon-color
 // Boosted mod: no $navbar-dark-toggler-icon-bg since dark toggler are handled with filter
-$navbar-dark-brand-color: inherit !default;
+$navbar-dark-toggler-border-color: transparent !default; // Boosted mod: instead of `rgba($white, .1)`
+$navbar-dark-brand-color: inherit !default; // Boosted mod: instead of `$navbar-dark-active-color`
 $navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
 // scss-docs-end navbar-dark-variables
 
@@ -2383,7 +2383,7 @@ $footer-terms-padding-y-md: $spacer * 1.1 !default;
 $footer-gap: $spacer * .75 !default;
 $footer-gap-xl: $spacer * 1.7 !default;
 // scss-docs-end footer
-// End mod
+
 
 // Tags
 
@@ -2424,3 +2424,30 @@ $tag-disabled-color-dark: $gray-700 !default;
 $tag-border-color-dark: $gray-700 !default;
 $tag-active-decoration-color-dark: $white !default;
 // scss-docs-end tag-dark-variables
+
+
+// Local navigation
+
+// scss-docs-start local-nav-variables
+$local-nav-padding-y: $navbar-nav-link-padding-y !default;
+$local-nav-color: var(--#{$prefix}body-color) !default;
+$local-nav-bg: var(--#{$prefix}body-bg) !default;
+$local-nav-hover-color: $local-nav-color !default;
+$local-nav-hover-bg: $gray-300 !default;
+$local-nav-active-color: $accessible-orange !default;
+$local-nav-active-bg: $gray-400 !default;
+$local-nav-active-marker-width: $spacer * .2 !default;
+$local-nav-border-color: $gray-500 !default;
+$local-nav-border-width: 1px !default;
+// scss-docs-end local-nav-variables
+
+// scss-docs-start local-nav-dark-variables
+$local-nav-dark-color: $white !default;
+$local-nav-dark-bg: $black !default;
+$local-nav-dark-hover-color: $brand-orange !default;
+$local-nav-dark-hover-bg: $gray-900 !default;
+$local-nav-dark-active-color: $local-nav-dark-hover-color !default;
+$local-nav-dark-active-bg: $gray-700 !default;
+$local-nav-dark-border-color: $gray-700 !default;
+// scss-docs-end local-nav-dark-variables
+// End mod
diff --git a/scss/boosted.scss b/scss/boosted.scss
@@ -48,6 +48,7 @@
 // Boosted
 @import "back-to-top";
 @import "footer";
+@import "local-navigation";
 @import "orange-navbar";
 @import "stepped-process";
 @import "sticker";

diff --git a/site/content/docs/5.3/about/overview.md b/site/content/docs/5.3/about/overview.md
@@ -26,6 +26,7 @@ Boosted ships with custom accessible components to suit specific needs:
 
 - [Back to top]({{< docsref "/components/back-to-top" >}})
 - [Footer]({{< docsref "/components/footer" >}})
+- [Local navigation]({{< docsref "/components/local-navigation" >}})
 - [Orange navbar]({{< docsref "/components/orange-navbar" >}})
 - [Quantity selector]({{< docsref "/forms/quantity-selector" >}})
 - [Star rating]({{< docsref "/forms/checks-radios#star-rating" >}})

diff --git a/site/content/docs/5.3/components/local-navigation.md b/site/content/docs/5.3/components/local-navigation.md
@@ -0,0 +1,80 @@
+---
+layout: docs
+title: Local navigation
+description: Use local navigation to add a navigation that will nicely wrap on small viewports.
+group: components
+aliases:
+ - "/docs/components/local-navigation/"
+toc: true
+added: "5.3"
+---
+
+## Example
+
+Resize your browser to see the behavior of this component.
+
+{{< callout info >}}
+Since the component is supposed to be rendered on a full-size page, there are some slight rendering issues in the mobile viewport in the context of this documentation page.
+{{< /callout >}}
+
+{{< example >}}
+<nav class="local-nav" aria-label="Basic local navigation">
+ <button class="local-nav-button collapsed d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLocalNav" aria-expanded="false" aria-controls="collapseLocalNav">
+ <span class="container-xxl">Shop</span>
+ </button>
+ <div id="collapseLocalNav" class="container-xxl local-nav-collapse d-lg-block collapse">
+ <div class="navbar navbar-expand-lg">
+ <ul class="navbar-nav w-100">
+ <li class="nav-item"><a class="nav-link" href="#"><div class="container-xxl">Discover</div></a></li>
+ <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><div class="container-xxl">Shop</div></a></li>
+ <li class="nav-item"><a class="nav-link" href="#"><div class="container-xxl">Services</div></a></li>
+ <li class="nav-item"><a class="nav-link disabled" aria-disabled="true"><div class="container-xxl">Contact</div></a></li>
+ </ul>
+ </div>
+ </div>
+</nav>
+{{< /example >}}
+
+## Dark variant
+
+Add `.local-nav-dark` to the `.local-nav` for a dark variant. Don't forget to add `.navbar-dark` to the navbar.
+
+{{< example class="bg-dark" >}}
+<nav class="local-nav local-nav-dark" aria-label="Local navigation on dark">
+ <button class="local-nav-button collapsed d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLocalNavDark" aria-expanded="false" aria-controls="collapseLocalNavDark">
+ <span class="container-xxl">Shop</span>
+ </button>
+ <div id="collapseLocalNavDark" class="container-xxl local-nav-collapse d-lg-block collapse">
+ <div class="navbar navbar-dark navbar-expand-lg">
+ <ul class="navbar-nav w-100">
+ <li class="nav-item"><a class="nav-link" href="#"><div class="container-xxl">Discover</div></a></li>
+ <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><div class="container-xxl">Shop</div></a></li>
+ <li class="nav-item"><a class="nav-link" href="#"><div class="container-xxl">Services</div></a></li>
+ <li class="nav-item"><a class="nav-link disabled" aria-disabled="true"><div class="container-xxl">Contact</div></a></li>
+ </ul>
+ </div>
+ </div>
+</nav>
+{{< /example >}}
+
+## CSS
+
+### Variables
+
+Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="local-nav-css-vars" file="scss/_local-navigation.scss" >}}
+
+Customization through CSS variables can be seen on the `.local-nav-dark` class where we override specific values without adding duplicate CSS selectors.
+
+{{< scss-docs name="local-nav-dark-css-vars" file="scss/_local-navigation.scss" >}}
+
+### Sass variables
+
+Variables for all local navigations:
+
+{{< scss-docs name="local-nav-variables" file="scss/_variables.scss" >}}
+
+Variables for the [dark local navigation](#dark-variant):
+
+{{< scss-docs name="local-nav-dark-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.3/components/navs-tabs.md b/site/content/docs/5.3/components/navs-tabs.md
@@ -180,6 +180,10 @@ This variant should not be used because it is a button component in the Orange D
 
 Take that same HTML, but use `.nav-underline` instead:
 
+{{< callout warning >}}
+If you want it to wrap nicely on lower breakpoints, consider using [our local navigation component]({{< docsref "/components/local-navigation" >}}).
+{{< /callout >}}
+
 {{< example >}}
 <ul class="nav nav-underline">
  <li class="nav-item">

diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md
@@ -22,6 +22,9 @@ If you need more details about the changes, please refer to the [v5.3.2 release]
 - **Accordion**
  - <span class="badge bg-warning">Warning</span> Accordion rendering has been improved for better accessibility. Although it is transparent for basic usage, you might want to check the rendering of your custom components if they are composed of an accordion.
 
+- **Local navigation**
+ - <span class="badge bg-success">New</span> Added Local Navigation as a new component.
+
 - **Orange navbar**
  - <span class="badge bg-warning">Warning</span> The minimizing behavior with `.header-minimized` is applied to the `<header>` instead of one of its children directly.
 
@@ -36,6 +39,16 @@ If you need more details about the changes, please refer to the [v5.3.2 release]
  <summary><span class="badge bg-success">New</span> CSS variables:</summary>
  <ul>
  <li><code>--bs-accordion-btn-hover-bg</code></li>
+ <li><code>--bs-local-nav-active-bg</code></li>
+ <li><code>--bs-local-nav-active-color</code></li>
+ <li><code>--bs-local-nav-active-marker-width</code></li>
+ <li><code>--bs-local-nav-bg</code></li>
+ <li><code>--bs-local-nav-border-color</code></li>
+ <li><code>--bs-local-nav-border-width</code></li>
+ <li><code>--bs-local-nav-color</code></li>
+ <li><code>--bs-local-nav-hover-bg</code></li>
+ <li><code>--bs-local-nav-hover-color</code></li>
+ <li><code>--bs-local-nav-padding-y</code></li>
  </ul>
  </details>
 
@@ -46,6 +59,23 @@ If you need more details about the changes, please refer to the [v5.3.2 release]
  <li><code>$accordion-dark-button-hover-bg</code></li>
  <li><code>$footer-accordion-active-color</code></li>
  <li><code>$footer-accordion-btn-hover-bg</code></li>
+ <li><code>$local-nav-active-bg</code></li>
+ <li><code>$local-nav-active-color</code></li>
+ <li><code>$local-nav-active-marker-width</code></li>
+ <li><code>$local-nav-bg</code></li>
+ <li><code>$local-nav-border-color</code></li>
+ <li><code>$local-nav-border-width</code></li>
+ <li><code>$local-nav-color</code></li>
+ <li><code>$local-nav-dark-bg</code></li>
+ <li><code>$local-nav-dark-color</code></li>
+ <li><code>$local-nav-dark-hover-bg</code></li>
+ <li><code>$local-nav-dark-hover-color</code></li>
+ <li><code>$local-nav-dark-active-bg</code></li>
+ <li><code>$local-nav-dark-active-color</code></li>
+ <li><code>$local-nav-dark-border-color</code></li>
+ <li><code>$local-nav-hover-bg</code></li>
+ <li><code>$local-nav-hover-color</code></li>
+ <li><code>$local-nav-padding-y</code></li>
  </ul>
  </details>