fix(header): add logo-inverse slot (#1070)

telekom · May 24, 2022 · 37eff58 · 37eff58
1 parent 543e759
commit 37eff58
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 10 deletions.
diff --git a/packages/components/src/components/telekom/app-header/app-header.tsx b/packages/components/src/components/telekom/app-header/app-header.tsx
@@ -81,6 +81,7 @@ export class Header {
   hasSlotMenuAddon: boolean;
   hasSlotMenuMobile: boolean;
   hasSlotLogo: boolean;
+  hasSlotLogoInverse: boolean;
 
   @Watch('megaMenuVisible')
   megaMenuVisibleChange(isVisible) {
@@ -142,6 +143,9 @@ export class Header {
       '[slot="menu-mobile"]'
     );
     this.hasSlotLogo = !!this.hostElement.querySelector('[slot="logo"]');
+    this.hasSlotLogoInverse = !!this.hostElement.querySelector(
+      '[slot="logo-inverse"]'
+    );
   }
 
   componentDidUpdate() {
@@ -162,6 +166,9 @@ export class Header {
       '[slot="menu-mobile"]'
     );
     this.hasSlotLogo = !!this.hostElement.querySelector('[slot="logo"]');
+    this.hasSlotLogoInverse = !!this.hostElement.querySelector(
+      '[slot="logo-inverse"]'
+    );
   }
 
   componentWillRender() {
@@ -455,16 +462,20 @@ export class Header {
               <span class="header__nav-after"></span>
               <div class="header__nav-content">
                 <div class="header__nav-logo">
-                  <scale-logo
-                    transparent
-                    language=""
-                    href={this.logoHref}
-                    logoTitle={this.logoTitle}
-                    onClick={this.logoClick}
-                    focusable={this.scrolled || this.sticky}
-                    size={24}
-                    logoAriaDescribedBy={this.logoAriaDescribedBy}
-                  ></scale-logo>
+                  {this.hasSlotLogoInverse ? (
+                    <slot name="logo-inverse"></slot>
+                  ) : (
+                    <scale-logo
+                      transparent
+                      language=""
+                      href={this.logoHref}
+                      logoTitle={this.logoTitle}
+                      onClick={this.logoClick}
+                      focusable={this.scrolled || this.sticky}
+                      size={24}
+                      logoAriaDescribedBy={this.logoAriaDescribedBy}
+                    ></scale-logo>
+                  )}
                 </div>
                 <div class="header__nav-menu-wrapper">
                   <div class="header__nav-menu-main">{this.menuMain()}</div>

diff --git a/packages/components/src/html/telekom/header-custom.html b/packages/components/src/html/telekom/header-custom.html
@@ -41,11 +41,21 @@
       <scale-app-header slot="header" id="header">
         <div slot="logo">
           <scale-logo
+            transparent
+            variant="white"
             language="de"
             href="#custom"
             logo-title="Custom"
           ></scale-logo>
         </div>
+        <div slot="logo-inverse">
+          <scale-logo
+            transparent
+            language=""
+            href="#custom"
+            logo-title="Custom"
+          ></scale-logo>
+        </div>
         <div slot="menu-main">
           <scale-nav-main is-active name="Menu item #1"></scale-nav-main>
           <scale-nav-main name="Menu item #2" id="nav-main-with-mega-menu">

diff --git a/...torybook-vue/stories/components/brand-header-navigation/BrandHeader.stories.mdx b/...torybook-vue/stories/components/brand-header-navigation/BrandHeader.stories.mdx
@@ -668,6 +668,9 @@ You can find code examples where the Flyout Menu Beta component is implemented i
                 <div slot="logo">
                     <scale-logo transparent variant="white" language="en" href="#custom" logo-title="Custom" styles=":host { --logo-size: 36px;} @media (max-width: 1023px) { :host {--logo-size: 26px;} }"></scale-logo>
                 </div>
+                <div slot="logo-inverse">
+                    <scale-logo transparent language="en" href="#custom" logo-title="Custom" styles=":host { --logo-size: 36px;} @media (max-width: 1023px) { :host {--logo-size: 26px;} }"></scale-logo>
+                </div>
             </scale-app-header>
             <div style="height: 800px; padding: 48px 0;">Scroll to test header behavior</div>
             <div style="height: 800px; padding: 48px 0;">Scroll more to test header behavior</div>
@@ -692,6 +695,15 @@ You can find code examples where the Flyout Menu Beta component is implemented i
         styles=":host { --logo-size: 36px;} @media (max-width: 1023px) { :host {--logo-size: 26px;} }"
       ></scale-logo>
     </div>
+    <div slot="logo-inverse">
+        <scale-logo
+            transparent
+            language=""
+            href="#custom"
+            logo-title="Custom"
+            styles=":host { --logo-size: 36px;} @media (max-width: 1023px) { :host {--logo-size: 26px;} }"
+        ></scale-logo>
+    </div>
   </scale-app-header>
   <div style="height: 800px; padding: 48px 0;">
     Scroll to test header behavior