feat(navigation): add styling customizations especially for mobile

Note: removed "transparent" property. Transparency can now be defined with a "--navigation-background" css variable.

src/components.d.ts

@@ -147,10 +147,6 @@ export namespace Components {
         "active": boolean;
     }
     interface GdsNavigation {
-        /**
-          * Does the navigation appear as transparent.
-         */
-        "transparent": boolean;
     }
     interface GdsParagraph {
         /**
@@ -450,10 +446,6 @@ declare namespace LocalJSX {
         "active"?: boolean;
     }
     interface GdsNavigation {
-        /**
-          * Does the navigation appear as transparent.
-         */
-        "transparent"?: boolean;
     }
     interface GdsParagraph {
         /**

src/components/gds-navigation/gds-navigation.scss

@@ -4,11 +4,7 @@ $grid-item-desktop-size: 263px;
 $grid-item-mobile-size: 180px;
 
 header.gds-navigation-header {
-  background-color: var(--navigation-background-color);
-}
-header.gds-navigation-transparent {
-  background-color: transparent;
-  --navigation-color: var(--navigation-color-transparent, white);
+  background: var(--navigation-background, transparent);
 }
 
 .gds-navigation-container {
@@ -35,15 +31,19 @@ header.gds-navigation-transparent {
 
 .gds-navigation-content {
   display: flex;
+  flex-grow: 1;
+  justify-content: center;
+  background: var(--navigation-content-background, transparent);
 
   @include mobileAndTablet {
     display: none;
     position: absolute;
     background-color: white;
-    top: var(--navigation-mobile-height);
+    padding-top: var(--navigation-mobile-height);
+    top: 0;
     left: 0;
     right: 0;
-    border-top: 2px solid var(--body-background-color);
+    // border-top: 2px solid var(--body-background-color);
     z-index: 100;
   }
 }
@@ -76,25 +76,53 @@ nav.gds-navigation-nav {
   --text-button-l-font-size: 30px;
   --text-button-l-padding: var(--spacing-s);
 
-  [slot='hamburger-icon'] {
-    padding-right: var(--spacing-s);
-  }
+  z-index: 101;
+  position: relative;
 
   @include desktopOnly {
     display: none;
   }
 }
 
+[slot='menu-icon'],
+[slot='close-menu-icon'] {
+  padding-right: var(--spacing-s);
+}
+
+.close {
+  [slot='menu-icon'] {
+    display: block;
+  }
+  [slot='close-menu-icon'] {
+    display: none;
+  }
+}
+
+.open {
+  z-index: 1000;
+  position: relative;
+
+  [slot='menu-icon'] {
+    display: none;
+  }
+  [slot='close-menu-icon'] {
+    display: block;
+  }
+}
+
 .gds-navigation-logo {
   display: flex;
   align-items: center;
   padding-left: var(--spacing-s);
-
+  z-index: 101;
+  position: relative;
   height: var(--navigation-mobile-height);
   & img {
     height: 32px;
   }
+
   @include desktopOnly {
+    flex-grow: 0;
     padding-left: var(--spacing-l);
     height: var(--navigation-desktop-height);
     & img {

src/components/gds-navigation/gds-navigation.stories.js

@@ -83,8 +83,49 @@ export const Navigation = () => html`
         --icon-font-size: 44px;
       }
     </style>
-    <gds-icon name="hamburger" slot="hamburger-icon" />
+    <gds-icon name="hamburger" slot="menu-icon"></gds-icon>
+    <gds-icon name="times" light slot="close-menu-icon"></gds-icon>
   </gds-navigation>
 
   <gds-paragraph>Mobile navigation can have custom hamburger icon.</gds-paragraph>
+
+  <style>
+    .custom-menu-background .open {
+      --navigation-color: var(--color-white);
+      --icon-color: var(--navigation-color);
+      --icon-color-hover: var(--navigation-color);
+      --navigation-content-background: repeating-linear-gradient(to right, #166e3b, #166e3b 10px, #146635 10px, #146635 20px);
+      --menu-item-background-color-active: transparent;
+      --menu-item-underline-display: block;
+      --label-text-transform: none;
+    }
+    .custom-menu-background gds-icon {
+      --icon-color: var(--navigation-color);
+    }
+  </style>
+  <gds-navigation class="custom-menu-background">
+    <a slot="logo" href="/">
+      <img src="images/genero-logo.png" />
+    </a>
+    <div slot="menu">
+      <gds-menu key="123">
+        <a slot="item" href="#first">
+          <gds-menu-item>First item</gds-menu-item>
+        </a>
+        <a slot="item" href="#2">
+          <gds-menu-item active>Second item</gds-menu-item>
+        </a>
+        <a slot="item" href="#short">
+          <gds-menu-item>Short</gds-menu-item>
+        </a>
+        <a slot="item" href="#4">
+          <gds-menu-item>And with ÖÄÅ</gds-menu-item>
+        </a>
+      </gds-menu>
+    </div>
+    <gds-icon name="hamburger" slot="menu-icon"></gds-icon>
+    <gds-icon name="times" light slot="close-menu-icon"></gds-icon>
+  </gds-navigation>
+
+  <gds-paragraph>Mobile navigation can have custom styles for opened mobile menu.</gds-paragraph>
 `

src/components/gds-navigation/gds-navigation.tsx

@@ -1,4 +1,4 @@
-import { Component, h, Host, State, Prop, Element } from '@stencil/core'
+import { Component, h, Host, State, Element } from '@stencil/core'
 import { HTMLStencilElement } from '@stencil/core/internal'
 
 /**
@@ -15,17 +15,13 @@ import { HTMLStencilElement } from '@stencil/core/internal'
 })
 export class GdsNavigation {
   /**
-   * Does the navigation appear as transparent.
-   */
-  @Prop() transparent: boolean
-  /**
-   * Mobile menu icon.
+   * Mobile menu icon. Can be overridden by slots (menu-icon, close-menu-icon).
    */
   @State() menuIcon: string = '☰'
   /**
-   *
+   * True if the mobile menu is open.
    */
-  @State() open: boolean
+  @State() open: boolean = false
   /**
    * Content element that get's hidden in mobile menu.
    */
@@ -37,10 +33,14 @@ export class GdsNavigation {
    */
   @Element() hostElement: HTMLStencilElement
 
-  hasHamburgerIconSlot: boolean
+  hasMenuIconSlot: boolean
+  hasMobileExtensionsSlot: boolean
+  hasDesktopExtensionsSlot: boolean
 
   componentWillRender() {
-    this.hasHamburgerIconSlot = !!this.hostElement.querySelector('[slot="hamburger-icon"]')
+    this.hasMenuIconSlot = !!this.hostElement.querySelector('[slot="menu-icon"]')
+    this.hasMobileExtensionsSlot = !!this.hostElement.querySelector('[slot="mobile-extensions"]')
+    this.hasDesktopExtensionsSlot = !!this.hostElement.querySelector('[slot="desktop-extensions"]')
   }
 
   render() {
@@ -63,7 +63,8 @@ export class GdsNavigation {
         <header
           class={{
             'gds-navigation-header': true,
-            'gds-navigation-transparent': this.transparent,
+            open: this.open,
+            close: !this.open,
           }}>
           <div class="gds-navigation-container">
             <div class="gds-navigation-logo">
@@ -75,19 +76,24 @@ export class GdsNavigation {
                 <slot name="menu"></slot>
               </nav>
 
-              <div class="gds-navigation-mobile-extensions">
-                <slot name="mobile-extensions"></slot>
-              </div>
+              {this.hasMobileExtensionsSlot && (
+                <div class="gds-navigation-mobile-extensions">
+                  <slot name="mobile-extensions"></slot>
+                </div>
+              )}
             </div>
 
-            <div class="gds-navigation-desktop-extensions">
-              <slot name="desktop-extensions"></slot>
-            </div>
+            {this.hasDesktopExtensionsSlot && (
+              <div class="gds-navigation-desktop-extensions">
+                <slot name="desktop-extensions"></slot>
+              </div>
+            )}
 
             <div class="gds-navigation-hamburger" onClick={onHamburgerClick}>
-              <slot name="hamburger-icon"></slot>
+              <slot name="menu-icon"></slot>
+              <slot name="close-menu-icon"></slot>
 
-              {!this.hasHamburgerIconSlot && <gds-text-button size="l">{this.menuIcon}</gds-text-button>}
+              {!this.hasMenuIconSlot && <gds-text-button size="l">{this.menuIcon}</gds-text-button>}
             </div>
           </div>
         </header>

src/components/gds-navigation/readme.md

@@ -3,13 +3,6 @@
 <!-- Auto Generated Below -->
 
 
-## Properties
-
-| Property      | Attribute     | Description                                | Type      | Default     |
-| ------------- | ------------- | ------------------------------------------ | --------- | ----------- |
-| `transparent` | `transparent` | Does the navigation appear as transparent. | `boolean` | `undefined` |
-
-
 ## Dependencies
 
 ### Depends on

src/styles/index.scss

@@ -176,8 +176,7 @@
 
   /* Navigation */
   --navigation-color: var(--color-black);
-  --navigation-color-transparent: var(--color-white);
-  --navigation-background-color: var(--color-white);
+  --navigation-background: var(--color-white);
   --navigation-desktop-height: 100px;
   --navigation-mobile-height: 70px;