Feat(web): Introduce UNSTABLE Header component #DS-1523

packages/web/src/scss/components/UNSTABLE_Header/README.md

@@ -0,0 +1,121 @@
+# UNSTABLE Header
+
+⚠️ This component is UNSTABLE. It may significantly change at any point in the future.
+Please use it with caution.
+
+The `UNSTABLE_Header` component is planned to replace the `Header` component in the future.
+
+The `UNSTABLE_Header` is a composition of several subcomponents:
+
+- [UNSTABLE_Header](#unstable-header)
+- [UNSTABLE_HeaderLogo](#unstable-headerlogo)
+
+## UNSTABLE Header
+
+The `UNSTABLE_Header` component is a main wrapper which provides mainly the visual for the Header.
+
+```html
+<header class="UNSTABLE_Header">
+  <!-- content -->
+</header>
+```
+
+It also sets CSS variable for the Header height which can be used by nested components.
+
+## UNSTABLE HeaderLogo
+
+The `UNSTABLE_HeaderLogo` component is a container for the logo.
+
+```html
+<a href="#" class="UNSTABLE_HeaderLogo">
+  <!-- content -->
+</a>
+```
+
+It inherits the `UNSTABLE_Header` height and sets the logo wrapper height to the same value.
+
+You can use the `ProductLogo` component inside the `UNSTABLE_HeaderLogo` component.
+
+```html
+<a href="#" class="UNSTABLE_HeaderLogo">
+  <div class="ProductLogo">
+    <!-- content -->
+  </div>
+</a>
+```
+
+## Component Composition
+
+Use [`Container`][web-container] and [`Flex`][web-flex] components to create a layout for the Header content.
+
+```html
+<header class="UNSTABLE_Header">
+  <div class="Container">
+    <div class="Flex Flex--row Flex--noWrap Flex--alignmentXLeft Flex--alignmentYCenter">
+      <a href="#" class="UNSTABLE_HeaderLogo">
+        <div class="ProductLogo">
+          <!-- content -->
+        </div>
+      </a>
+      <!-- Navigation -->
+      <!-- Another Navigation -->
+    </div>
+  </div>
+</header>
+```
+
+This way you can easily modify the layout of the Header content.
+
+For example you can make the content centered by setting the `Flex` alignment classes to center.
+
+```html
+<header class="UNSTABLE_Header">
+  <div class="Flex Flex--row Flex--noWrap Flex--alignmentXCenter Flex--alignmentYCenter">
+    <a href="#" class="UNSTABLE_HeaderLogo">
+      <div class="ProductLogo">
+        <!-- content -->
+      </div>
+    </a>
+  </div>
+</header>
+```
+
+Or you can modify the gaps between the content by setting the `Flex` `spacing` property.
+
+```html
+<header class="UNSTABLE_Header">
+  <div class="Container">
+    <div
+      class="Flex Flex--row Flex--noWrap Flex--alignmentXLeft Flex--alignmentYCenter"
+      style="--flex-spacing: var(--spirit-space-500);"
+    >
+      <a href="#" class="UNSTABLE_HeaderLogo">
+        <div class="ProductLogo">
+          <!-- content -->
+        </div>
+      </a>
+      <!-- Navigation -->
+      <!-- Another Navigation -->
+    </div>
+  </div>
+</header>
+```
+
+If you need the whole Header fluid you can do it by adding the `Container--fluid` class to the `Container`.
+
+```html
+<header class="UNSTABLE_Header">
+  <div class="Container Container--fluid">
+    <div class="Flex Flex--row Flex--noWrap Flex--alignmentXLeft Flex--alignmentYCenter">
+      <a href="#" class="UNSTABLE_HeaderLogo">
+        <div class="ProductLogo">
+          <!-- content -->
+        </div>
+      </a>
+    </div>
+  </div>
+</header>
+```
+
+[web-container]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Container/README.md
+[web-flex]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Flex/README.md

packages/web/src/scss/components/UNSTABLE_Header/_UNSTABLE_Header.scss

@@ -0,0 +1,21 @@
+// 1. In order to have the border be outside of the height of the header, we need to use `content-box`
+//    for the box-sizing. The box-sizing is inherited by the children, so we need to reset it to `border-box`.
+
+@use '@tokens' as tokens;
+@use 'theme';
+
+.UNSTABLE_Header {
+    --#{tokens.$css-variable-prefix}header-height: #{theme.$height};
+    --#{tokens.$css-variable-prefix}navigation-height: var(--#{tokens.$css-variable-prefix}header-height);
+
+    flex: none;
+    box-sizing: content-box; // 1.
+    height: var(--#{tokens.$css-variable-prefix}header-height);
+    border-bottom: theme.$border-width theme.$border-style theme.$border-color;
+    background-color: theme.$background-color;
+}
+
+// stylelint-disable-next-line selector-max-universal -- 1.
+.UNSTABLE_Header > * {
+    box-sizing: border-box;
+}

packages/web/src/scss/components/UNSTABLE_Header/_UNSTABLE_HeaderLogo.scss

@@ -0,0 +1,8 @@
+@use '@tokens' as tokens;
+@use 'theme';
+
+.UNSTABLE_HeaderLogo {
+    display: flex;
+    align-items: center;
+    height: var(--#{tokens.$css-variable-prefix}header-height);
+}

packages/web/src/scss/components/UNSTABLE_Header/_theme.scss

@@ -0,0 +1,7 @@
+@use '@tokens' as tokens;
+
+$height: 72px;
+$border-width: tokens.$border-width-100;
+$border-style: solid;
+$border-color: tokens.$border-basic;
+$background-color: tokens.$component-header-background;

packages/web/src/scss/components/UNSTABLE_Header/index.html

@@ -0,0 +1,70 @@
+{{#> web/layout/default title="Header" parentPageName="Components" isUnstable=true }}
+
+<section class="UNSTABLE_Section">
+
+  <div class="Container">
+    <h2 class="docs-Heading">Minimal Header</h2>
+  </div>
+
+  <div class="docs-Stack docs-Stack--stretch">
+
+    <header class="UNSTABLE_Header">
+      <div class="Flex Flex--row Flex--noWrap Flex--alignmentXCenter Flex--alignmentYCenter">
+        <a href="#" aria-label="JobBoard homepage" class="UNSTABLE_HeaderLogo">
+          <div class="ProductLogo">
+            {{> web/assets/jobBoardLogo }}
+          </div>
+        </a>
+      </div>
+    </header>
+
+  </div>
+</section>
+
+<section class="UNSTABLE_Section">
+
+  <div class="Container">
+    <h2 class="docs-Heading">Full Header</h2>
+  </div>
+
+  <div class="docs-Stack docs-Stack--stretch">
+
+    <header class="UNSTABLE_Header">
+      <div class="Container">
+        <div class="Flex Flex--row Flex--noWrap Flex--alignmentXLeft Flex--alignmentYCenter">
+          <a href="#" aria-label="JobBoard homepage" class="UNSTABLE_HeaderLogo">
+            <div class="ProductLogo">
+              {{> web/assets/jobBoardLogo }}
+            </div>
+          </a>
+        </div>
+      </div>
+    </header>
+
+  </div>
+</section>
+
+<section class="UNSTABLE_Section">
+
+  <div class="Container">
+    <h2 class="docs-Heading">Fluid Header</h2>
+  </div>
+
+  <div class="docs-Stack docs-Stack--stretch">
+
+    <header class="UNSTABLE_Header">
+      <div class="Container Container--fluid">
+        <div class="Flex Flex--row Flex--noWrap Flex--alignmentXLeft Flex--alignmentYCenter">
+          <a href="#" aria-label="JobBoard homepage" class="UNSTABLE_HeaderLogo">
+            <div class="ProductLogo">
+              {{> web/assets/jobBoardLogo }}
+            </div>
+          </a>
+        </div>
+      </div>
+    </header>
+
+  </div>
+</section>
+
+{{/web/layout/default }}

packages/web/src/scss/components/UNSTABLE_Header/index.scss

@@ -0,0 +1,2 @@
+@forward 'UNSTABLE_Header';
+@forward 'UNSTABLE_HeaderLogo';

packages/web/src/scss/components/index.scss

@@ -32,6 +32,7 @@
 @forward 'UNSTABLE_ActionLayout';
 @forward 'UNSTABLE_Avatar';
 @forward 'UNSTABLE_EmptyState';
+@forward 'UNSTABLE_Header';
 @forward 'UNSTABLE_Section';
 @forward 'UNSTABLE_Slider';
 @forward 'UNSTABLE_Toggle';