fix(telekom-header): more feedback (#1531)

telekom · Jan 27, 2023 · 5c942ad · 5c942ad
1 parent 8a314c7
commit 5c942ad
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 26 deletions.
diff --git a/packages/components/src/components/telekom/telekom-header/telekom-header.css b/packages/components/src/components/telekom/telekom-header/telekom-header.css
@@ -98,11 +98,11 @@
     --_display-top-app-name: none;
     --_display-bottom-app-name: block;
 
-    --_grid-column-body: 2 / span 15;
-
     --scl-telekom-header-height: var(--_height);
   }
-
+  :host([scrolled][app-name]) {
+    --_grid-column-body: 2 / span 15;
+  }
   :host([scrolled-back]) {
     --_display-bottom-app-name: block;
   }

diff --git a/packages/components/src/components/telekom/telekom-header/telekom-header.tsx b/packages/components/src/components/telekom/telekom-header/telekom-header.tsx
@@ -30,7 +30,7 @@ export class TelekomHeader {
   @Element() hostElement: HTMLStencilElement;
 
   @Prop() mainNavigation: any;
-  @Prop() appName?: string;
+  @Prop({ reflect: true }) appName?: string;
   @Prop() appNameLink?: string;
   @Prop() appNameClick?: any;
 

diff --git a/...ents/src/components/telekom/telekom-mobile-flyout-canvas/telekom-mobile-flyout-canvas.css b/...ents/src/components/telekom/telekom-mobile-flyout-canvas/telekom-mobile-flyout-canvas.css
@@ -47,11 +47,11 @@
   text-decoration: none;
 }
 
-/* temporary */
 [part~='close-button'] {
   position: absolute;
-  top: 6px;
-  right: 10px;
+  top: var(--telekom-spacing-unit-x2);
+  right: var(--telekom-spacing-unit-x4);
+  --color-ghost: var(--telekom-color-text-and-icon-standard);
 }
 
 [part~='body'],

diff --git a/packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.css b/packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.css
@@ -101,22 +101,6 @@
   color: var(--telekom-color-text-and-icon-primary-standard);
 }
 
-.scale-telekom-nav-list[variant='main-nav']
-  > .scale-telekom-nav-item[active]
-  > :where(a, button):after,
-.scale-telekom-nav-list[variant='functions']
-  > .scale-telekom-nav-item[active]
-  > :where(a, button):after {
-  content: '';
-  width: 100%;
-  height: var(--telekom-spacing-unit-x1);
-  background: var(--telekom-color-primary-standard);
-  display: block;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-}
-
 .scale-telekom-nav-list[variant='main-nav']
   > .scale-telekom-nav-item
   > :where(a, button):hover:after,
@@ -139,6 +123,22 @@
   left: 0;
 }
 
+.scale-telekom-nav-list[variant='main-nav']
+  > .scale-telekom-nav-item[active]
+  > :where(a, button):after,
+.scale-telekom-nav-list[variant='functions']
+  > .scale-telekom-nav-item[active]
+  > :where(a, button):after {
+  content: '';
+  width: 100%;
+  height: var(--telekom-spacing-unit-x1);
+  background: var(--telekom-color-primary-standard);
+  display: block;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
 /* variants: meta-nav-external, meta-nav, lang-switcher (top bar) */
 
 .scale-telekom-nav-list[variant='meta-nav-external']

diff --git a/...ook-vue/stories/components/beta-brand-header-navigation/BrandHeader.stories.mdx b/...ook-vue/stories/components/beta-brand-header-navigation/BrandHeader.stories.mdx
@@ -339,7 +339,7 @@ const mobileMenu = `<scale-telekom-nav-flyout
 ## Standard
 
 <Canvas withSource="none">
-  <Story name="Standard" args={{}} inline={false}>
+  <Story name="Standard" args={{}} inline={false} height={500}>
     {() => ({
       template: `
         <div class="brand-header-spacing" style="min-height: 120vh; background: var(--telekom-color-background-surface-subtle);">
@@ -456,7 +456,7 @@ const mobileMenu = `<scale-telekom-nav-flyout
 ## Application Name
 
 <Canvas withSource="none">
-  <Story name="Application Name" args={{}} inline={false}>
+  <Story name="Application Name" args={{}} inline={false} height={500}>
     {() => ({
       template: `
         <div class="brand-header-spacing" style="min-height: 120vh; background: var(--telekom-color-background-surface-subtle);">
@@ -575,7 +575,7 @@ const mobileMenu = `<scale-telekom-nav-flyout
 ## Flyout Navigation
 
 <Canvas withSource="none">
-  <Story name="Flyout Navigation" args={{}} inline={false}>
+  <Story name="Flyout Navigation" args={{}} inline={false} height={500}>
     {() => ({
       template: `
         <div class="brand-header-spacing" style="min-height: 120vh; background: var(--telekom-color-background-surface-subtle);">