From 0b0fa78a404dc6a7930a4352fe819958e043987f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20=C4=8Curda?= <jakub.curda@almacareer.com>
Date: Fri, 29 Nov 2024 11:04:43 +0100
Subject: [PATCH] fixup! Feat(web): Introduce UNSTABLE Header

---
 .../UNSTABLE_Header/_UNSTABLE_Header.scss     |  10 +
 .../components/UNSTABLE_Header/index.html     | 230 ++++++++++--------
 2 files changed, 145 insertions(+), 95 deletions(-)

diff --git a/packages/web/src/scss/components/UNSTABLE_Header/_UNSTABLE_Header.scss b/packages/web/src/scss/components/UNSTABLE_Header/_UNSTABLE_Header.scss
index d88aa68b4f..990843d0e7 100644
--- a/packages/web/src/scss/components/UNSTABLE_Header/_UNSTABLE_Header.scss
+++ b/packages/web/src/scss/components/UNSTABLE_Header/_UNSTABLE_Header.scss
@@ -1,4 +1,5 @@
 @use '../../tools/breakpoint';
+@use '../Container';
 @use 'theme';
 
 .UNSTABLE_Header {
@@ -12,12 +13,21 @@
 }
 
 .UNSTABLE_Header__container {
+    @extend .Container;
+
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: theme.$height;
 }
 
+.UNSTABLE_Header--fluid .UNSTABLE_Header__container {
+    width: auto;
+    max-width: none;
+    padding-inline: 0;
+    margin-inline: 0;
+}
+
 .UNSTABLE_Header--simple .UNSTABLE_Header__container {
     justify-content: space-around;
 }
diff --git a/packages/web/src/scss/components/UNSTABLE_Header/index.html b/packages/web/src/scss/components/UNSTABLE_Header/index.html
index 9ab2236a3a..7417145cd7 100644
--- a/packages/web/src/scss/components/UNSTABLE_Header/index.html
+++ b/packages/web/src/scss/components/UNSTABLE_Header/index.html
@@ -8,14 +8,12 @@ <h2 class="docs-Heading">Minimal Header</h2>
   <div class="docs-Stack docs-Stack--stretch">
 
     <header class="UNSTABLE_Header UNSTABLE_Header--simple">
-      <div class="Container">
-        <div class="UNSTABLE_Header__container">
-          <a href="#" aria-label="JobBoard homepage">
-            <div class="ProductLogo">
-              {{> web/assets/jobBoardLogo }}
-            </div>
-          </a>
-        </div>
+      <div class="UNSTABLE_Header__container">
+        <a href="#" aria-label="JobBoard homepage">
+          <div class="ProductLogo">
+            {{> web/assets/jobBoardLogo }}
+          </div>
+        </a>
       </div>
     </header>
 
@@ -31,7 +29,7 @@ <h2 class="docs-Heading">Header</h2>
   <div class="docs-Stack docs-Stack--stretch">
 
     <header class="UNSTABLE_Header">
-      <div class="UNSTABLE_Header__container Container">
+      <div class="UNSTABLE_Header__container">
         <a href="#" aria-label="JobBoard homepage">
           <div class="ProductLogo">
             {{> web/assets/jobBoardLogo }}
@@ -81,24 +79,22 @@ <h2 class="docs-Heading">Header with only Main Navigation</h2>
   <div class="docs-Stack docs-Stack--stretch">
 
     <header class="UNSTABLE_Header">
-      <div class="Container">
-        <div class="UNSTABLE_Header__container">
-          <a href="#" aria-label="JobBoard homepage">
-            <div class="ProductLogo">
-              {{> web/assets/jobBoardLogo }}
-            </div>
-          </a>
-          <nav class="Navigation Navigation--start Navigation--main">
-            <ul>
-              <li class="NavigationItem NavigationItem--selected">
-                <a href="#" class="NavigationLink NavigationLink--selected" aria-current="page">Home</a>
-              </li>
-              <li>
-                <a href="#" class="NavigationLink">Not Home</a>
-              </li>
-            </ul>
-          </nav>
-        </div>
+      <div class="UNSTABLE_Header__container">
+        <a href="#" aria-label="JobBoard homepage">
+          <div class="ProductLogo">
+            {{> web/assets/jobBoardLogo }}
+          </div>
+        </a>
+        <nav class="Navigation Navigation--start Navigation--main">
+          <ul>
+            <li class="NavigationItem NavigationItem--selected">
+              <a href="#" class="NavigationLink NavigationLink--selected" aria-current="page">Home</a>
+            </li>
+            <li>
+              <a href="#" class="NavigationLink">Not Home</a>
+            </li>
+          </ul>
+        </nav>
       </div>
     </header>
 
@@ -113,31 +109,29 @@ <h2 class="docs-Heading">Header without Main Navigation</h2>
   <div class="docs-Stack docs-Stack--stretch">
 
     <header class="UNSTABLE_Header">
-      <div class="Container">
-        <div class="UNSTABLE_Header__container">
-          <a href="#" aria-label="JobBoard homepage">
-            <div class="ProductLogo">
-              {{> web/assets/jobBoardLogo }}
-            </div>
-          </a>
-          <nav class="Navigation">
-            <ul>
-              <li>
-                <button class="Button Button--tertiary Button--medium Button--symmetrical">
-                  <svg width="24" height="24" aria-hidden="true">
-                    <use xlink:href="/assets/icons/svg/sprite.svg#search" />
-                  </svg>
-                </button>
-              </li>
-              <li>
-                <button class="Button Button--secondary Button--medium">Sign up</button>
-              </li>
-              <li>
-                <button class="Button Button--primary Button--medium">Post a job</button>
-              </li>
-            </ul>
-          </nav>
-        </div>
+      <div class="UNSTABLE_Header__container">
+        <a href="#" aria-label="JobBoard homepage">
+          <div class="ProductLogo">
+            {{> web/assets/jobBoardLogo }}
+          </div>
+        </a>
+        <nav class="Navigation">
+          <ul>
+            <li>
+              <button class="Button Button--tertiary Button--medium Button--symmetrical">
+                <svg width="24" height="24" aria-hidden="true">
+                  <use xlink:href="/assets/icons/svg/sprite.svg#search" />
+                </svg>
+              </button>
+            </li>
+            <li>
+              <button class="Button Button--secondary Button--medium">Sign up</button>
+            </li>
+            <li>
+              <button class="Button Button--primary Button--medium">Post a job</button>
+            </li>
+          </ul>
+        </nav>
       </div>
     </header>
 
@@ -152,24 +146,22 @@ <h2 class="docs-Heading">Header with only Main Navigation on End</h2>
   <div class="docs-Stack docs-Stack--stretch">
 
     <header class="UNSTABLE_Header">
-      <div class="Container">
-        <div class="UNSTABLE_Header__container">
-          <a href="#" aria-label="JobBoard homepage">
-            <div class="ProductLogo">
-              {{> web/assets/jobBoardLogo }}
-            </div>
-          </a>
-          <nav class="Navigation Navigation--main Navigation--end">
-            <ul>
-              <li class="NavigationItem NavigationItem--selected">
-                <a href="#" class="NavigationLink NavigationLink--selected" aria-current="page">Home</a>
-              </li>
-              <li>
-                <a href="#" class="NavigationLink">Not Home</a>
-              </li>
-            </ul>
-          </nav>
-        </div>
+      <div class="UNSTABLE_Header__container">
+        <a href="#" aria-label="JobBoard homepage">
+          <div class="ProductLogo">
+            {{> web/assets/jobBoardLogo }}
+          </div>
+        </a>
+        <nav class="Navigation Navigation--main Navigation--end">
+          <ul>
+            <li class="NavigationItem NavigationItem--selected">
+              <a href="#" class="NavigationLink NavigationLink--selected" aria-current="page">Home</a>
+            </li>
+            <li>
+              <a href="#" class="NavigationLink">Not Home</a>
+            </li>
+          </ul>
+        </nav>
       </div>
     </header>
 
@@ -184,31 +176,79 @@ <h2 class="docs-Heading">Header without Main Navigation and on Start</h2>
   <div class="docs-Stack docs-Stack--stretch">
 
     <header class="UNSTABLE_Header">
-      <div class="Container">
-        <div class="UNSTABLE_Header__container">
-          <a href="#" aria-label="JobBoard homepage">
-            <div class="ProductLogo">
-              {{> web/assets/jobBoardLogo }}
-            </div>
-          </a>
-          <nav class="Navigation Navigation--start">
-            <ul>
-              <li>
-                <button class="Button Button--tertiary Button--medium Button--symmetrical">
-                  <svg width="24" height="24" aria-hidden="true">
-                    <use xlink:href="/assets/icons/svg/sprite.svg#search" />
-                  </svg>
-                </button>
-              </li>
-              <li>
-                <button class="Button Button--secondary Button--medium">Sign up</button>
-              </li>
-              <li>
-                <button class="Button Button--primary Button--medium">Post a job</button>
-              </li>
-            </ul>
-          </nav>
-        </div>
+      <div class="UNSTABLE_Header__container">
+        <a href="#" aria-label="JobBoard homepage">
+          <div class="ProductLogo">
+            {{> web/assets/jobBoardLogo }}
+          </div>
+        </a>
+        <nav class="Navigation Navigation--start">
+          <ul>
+            <li>
+              <button class="Button Button--tertiary Button--medium Button--symmetrical">
+                <svg width="24" height="24" aria-hidden="true">
+                  <use xlink:href="/assets/icons/svg/sprite.svg#search" />
+                </svg>
+              </button>
+            </li>
+            <li>
+              <button class="Button Button--secondary Button--medium">Sign up</button>
+            </li>
+            <li>
+              <button class="Button Button--primary Button--medium">Post a job</button>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+
+  </div>
+</section>
+
+<section class="UNSTABLE_Section">
+
+  <div class="Container">
+    <h2 class="docs-Heading">Header Fluid</h2>
+  </div>
+  <div class="docs-Stack docs-Stack--stretch">
+
+    <header class="UNSTABLE_Header UNSTABLE_Header--fluid">
+      <div class="UNSTABLE_Header__container">
+        <a href="#" aria-label="JobBoard homepage">
+          <div class="ProductLogo">
+            {{> web/assets/jobBoardLogo }}
+          </div>
+        </a>
+        <nav class="Navigation Navigation--start Navigation--main">
+          <ul>
+            <li>
+              <a href="#" class="NavigationLink NavigationLink--selected" aria-current="page">Home</a>
+            </li>
+            <li>
+              <a href="#" class="NavigationLink">Not Home</a>
+            </li>
+            <li>
+              <a href="#" class="NavigationLink NavigationLink--disabled">Home for Disabled</a>
+            </li>
+          </ul>
+        </nav>
+        <nav class="Navigation">
+          <ul>
+            <li>
+              <button class="Button Button--tertiary Button--medium Button--symmetrical">
+                <svg width="24" height="24" aria-hidden="true">
+                  <use xlink:href="/assets/icons/svg/sprite.svg#search" />
+                </svg>
+              </button>
+            </li>
+            <li>
+              <button class="Button Button--secondary Button--medium">Sign up</button>
+            </li>
+            <li>
+              <button class="Button Button--primary Button--medium">Post a job</button>
+            </li>
+          </ul>
+        </nav>
       </div>
     </header>