feat(orange navbar): change minimizing behavior (#1830)

Co-authored-by: Julien Déramond <[email protected]>
Orange-OpenSource · Jul 27, 2023 · efee64e · efee64e
1 parent 985a226
commit efee64e
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 54 deletions.
diff --git a/js/src/orange-navbar.js b/js/src/orange-navbar.js
@@ -35,17 +35,10 @@ class OrangeNavbar extends BaseComponent {
   // Static
   static enableMinimizing(el) {
     // The minimized behavior works only if your header has .sticky-top (fixed-top will be sticky without minimizing)
-    const scroll = window.scrollY
-    const headerChildren = [...el.children]
-    const globalHeaderChild = headerChildren.find(element => !element.classList.contains('supra'))
-
-    if (globalHeaderChild) {
-      if (scroll > 0) {
-        // Consider first element not having .supra in array is the first header
-        globalHeaderChild.classList.add('header-minimized')
-      } else {
-        globalHeaderChild.classList.remove('header-minimized')
-      }
+    if (window.scrollY > 0) {
+      el.classList.add('header-minimized')
+    } else {
+      el.classList.remove('header-minimized')
     }
   }
 

diff --git a/js/tests/unit/orange-navbar.spec.js b/js/tests/unit/orange-navbar.spec.js
@@ -122,64 +122,27 @@ describe('OrangeNavbar', () => {
 
   it('should add .header-minimized to the global header non-supra first <nav> when enableMinimizing is called not at the top of the page', () => {
     fixtureEl.innerHTML = [
-      '<header class="sticky-top" style="height: 20000px;">',
-      '  <nav id="notTargeted" class="supra"></nav>',
-      '  <nav id="target"></nav>',
-      '  <nav id="notTargeted2"></nav>',
-      '</header>'
+      '<header class="sticky-top" style="height: 20000px;"></header>'
     ].join('')
 
-    const targetEl = fixtureEl.querySelector('#target')
-    const notTargetedEl = fixtureEl.querySelector('#notTargeted')
-    const notTargeted2El = fixtureEl.querySelector('#notTargeted2')
+    const targetEl = fixtureEl.querySelector('header')
     window.scrollY = 1
 
     OrangeNavbar.enableMinimizing(fixtureEl.querySelector('header.sticky-top'))
 
     expect(targetEl).toHaveClass('header-minimized')
-    expect(notTargetedEl).not.toHaveClass('header-minimized')
-    expect(notTargeted2El).not.toHaveClass('header-minimized')
   })
 
   it('should remove .header-minimized to the global header non-supra first <nav> when enableMinimizing is called at the top of the page', () => {
     fixtureEl.innerHTML = [
-      '<header class="sticky-top" style="height: 20000px;">',
-      '  <nav id="notTargeted" class="supra"></nav>',
-      '  <nav id="target" class="header-minimized"></nav>',
-      '  <nav id="notTargeted2"></nav>',
-      '</header>'
+      '<header class="sticky-top" style="height: 20000px;"></header>'
     ].join('')
 
-    const targetEl = fixtureEl.querySelector('#target')
-    const notTargetedEl = fixtureEl.querySelector('#notTargeted')
-    const notTargeted2El = fixtureEl.querySelector('#notTargeted2')
+    const targetEl = fixtureEl.querySelector('header')
     window.scrollY = 0
 
     OrangeNavbar.enableMinimizing(fixtureEl.querySelector('header.sticky-top'))
 
     expect(targetEl).not.toHaveClass('header-minimized')
-    expect(notTargetedEl).not.toHaveClass('header-minimized')
-    expect(notTargeted2El).not.toHaveClass('header-minimized')
-  })
-
-  it('should not add .header-minimized to the global header non-supra first <nav> when the header only has .supra <nav>', () => {
-    fixtureEl.innerHTML = [
-      '<header class="sticky-top" style="height: 20000px;">',
-      '  <nav id="target0" class="supra"></nav>',
-      '  <nav id="target1" class="supra"></nav>',
-      '  <nav id="target2" class="supra"></nav>',
-      '</header>'
-    ].join('')
-
-    const target0El = fixtureEl.querySelector('#target0')
-    const target1El = fixtureEl.querySelector('#target1')
-    const target2El = fixtureEl.querySelector('#target2')
-    window.scrollY = 1
-
-    OrangeNavbar.enableMinimizing(fixtureEl.querySelector('header.sticky-top'))
-
-    expect(target0El).not.toHaveClass('header-minimized')
-    expect(target1El).not.toHaveClass('header-minimized')
-    expect(target2El).not.toHaveClass('header-minimized')
   })
 })
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
@@ -438,7 +438,8 @@
           display: flex;
         }
 
-        &.header-minimized {
+        .header-minimized &:first-child:not(.supra),
+        .header-minimized .supra + &.navbar {
           --#{$prefix}navbar-nav-link-padding-y: .75rem;
         }
 

diff --git a/scss/_orange-navbar.scss b/scss/_orange-navbar.scss
@@ -25,7 +25,8 @@
   }
 }
 
-.header-minimized {
+.header-minimized :first-child:not(.supra),
+.header-minimized .supra + .navbar {
   // scss-docs-start minimized-navbar-css-vars
   @include media-breakpoint-up(md){
     --#{$prefix}navbar-padding-y: 0px;

diff --git a/site/assets/scss/_scrolling.scss b/site/assets/scss/_scrolling.scss
@@ -9,5 +9,17 @@ main {
   [tabindex="0"] {
     scroll-margin-top: 80px;
     scroll-margin-bottom: 100px;
+
+    @include media-breakpoint-up(md) {
+      .header-minimized ~ .bd-gutter & {
+        scroll-margin-top: 8.5rem;
+      }
+    }
+
+    @include media-breakpoint-up(lg) {
+      .header-minimized ~ .bd-gutter & {
+        scroll-margin-top: 5.5rem;
+      }
+    }
   }
 }
diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md
@@ -9,6 +9,19 @@ aliases:
 toc: true
 ---
 
+## v5.3.2
+
+<hr class="mb-4">
+
+Boosted v5.3.2 has landed also including specific Boosted content as usual.
+
+If you need more details about the changes, please refer to the [v5.3.2 release](https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/releases/tag/v5.3.2).
+
+### Components
+
+- **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.
+
 ## v5.3.1
 
 <hr class="mb-4">