feat(header): add slim and subtle types (#1640)

packages/components/src/components/badge/badge.css

@@ -16,6 +16,11 @@
   --font-weight-circle: bold;
   --border-radius-circle: var(--telekom-radius-circle);
   display: flex;
+  --_display-circle: flex;
+}
+
+:host([no-dot]) {
+  --_display-circle: none;
 }
 
 :host::part(base) {
@@ -25,7 +30,7 @@
 }
 
 :host::part(circle) {
-  display: flex;
+  display: var(--_display-circle);
   position: absolute;
   align-items: center;
   justify-content: center;
@@ -52,7 +57,7 @@
 }
 
 :host::part(label) {
-  margin-left: 4px;
+  margin-left: 8px;
   font-weight: 400;
   font-size: 12px;
   color: black;

packages/components/src/components/telekom/telekom-app-shell/telekom-app-shell.css

@@ -10,7 +10,6 @@
  */
 
 :host {
-  --background: var(--telekom-color-background-canvas, #fff);
   --spacing-x: 0;
   --min-height: 100vh;
 }
@@ -25,7 +24,6 @@
   box-sizing: border-box;
   align-self: center;
   width: 100%;
-  background: var(--background);
   padding-left: var(--spacing-x);
   padding-right: var(--spacing-x);
   flex: 1;

packages/components/src/components/telekom/telekom-header/readme.md

@@ -12,6 +12,7 @@
 | `appName`      | `app-name`       |             | `string` | `undefined` |
 | `appNameClick` | `app-name-click` |             | `any`    | `undefined` |
 | `appNameLink`  | `app-name-link`  |             | `string` | `undefined` |
+| `type`         | `type`           |             | `string` | `'default'` |
 
 
 ## Shadow Parts

packages/components/src/components/telekom/telekom-header/telekom-header.css

@@ -19,8 +19,8 @@
   --background-logo: var(--telekom-color-primary-standard);
   --transition-common-scrolled: height var(--telekom-motion-duration-immediate)
       var(--telekom-motion-easing-standard),
-    width var(--telekom-motion-duration-immediate)
-      var(--telekom-motion-easing-standard);
+    width var(--telekom-motion-duration-immediate),
+    margin var(--telekom-motion-duration-immediate);
   --font-size-app-name: var(--telekom-typography-font-size-body);
   --line-height-app-name: var(--telekom-typography-line-spacing-tight);
   --font-weight-app-name: var(--telekom-typography-font-weight-extra-bold);
@@ -51,14 +51,16 @@
 
   --_justify-content-bottom-body: end;
 
+  --_animation-name: toggle;
+
   /* TODO make sure we want to "expose" variables this way */
   --scl-telekom-header-height: var(--_height);
 }
 
 @media screen and (--md) {
   :host {
     --_display-bottom-app-name: block;
-    --_spacing-left-body: 92px;
+    --_spacing-left-body: 74px;
   }
 }
 
@@ -86,6 +88,12 @@
 
     --scl-telekom-header-height: var(--_height);
   }
+
+  :host([type='slim']) {
+    --_animation-name: none;
+  }
+
+  :host([type='slim']),
   :host([scrolled]) {
     --_height: 72px;
     --_height-logo-svg: 40px;
@@ -100,6 +108,7 @@
 
     --scl-telekom-header-height: var(--_height);
   }
+  :host([type='slim']),
   :host([scrolled][app-name]) {
     --_grid-column-body: 2 / span 15;
   }
@@ -115,6 +124,23 @@
 
     --scl-telekom-header-height: var(--_height);
   }
+
+  :host([type='slim']) {
+    --_height: 84px;
+    --_height-logo-svg: 44px;
+    --_height-top-bar: 0;
+    --_height-bottom-bar: 84px;
+    --_spacing-right-bottom-app-name: 56px;
+    --_spacing-left-body: 4px;
+  }
+  :host([type='slim'][scrolled]) {
+    --_height: 72px;
+    --_height-logo-svg: 40px;
+    --_height-top-bar: 0;
+    --_height-bottom-bar: 72px;
+    --_spacing-right-bottom-app-name: 56px;
+    --_spacing-left-body: 0;
+  }
 }
 
 @media screen and (--2xl) {
@@ -129,6 +155,45 @@
 
     --scl-telekom-header-height: var(--_height);
   }
+
+  :host([type='slim']) {
+    --_height: 96px;
+    --_height-logo-svg: 48px;
+    --_height-top-bar: 0;
+    --_height-bottom-bar: 96px;
+
+    --_display-meta-nav: none;
+    --_display-meta-nav-external: none;
+    --_display-lang-switcher: none;
+    --_display-top-app-name: none;
+    --_display-bottom-app-name: block;
+
+    --_spacing-left-body: 24px;
+    --_spacing-right-bottom-app-name: 56px;
+
+    --scl-telekom-header-height: var(--_height);
+    --scl-telekom-header-bottom-spacing: 36px;
+  }
+
+  :host([type='slim'][scrolled]) {
+    --_height: 72px;
+    --_height-logo-svg: 40px;
+    --_height-top-bar: 0;
+    --_height-bottom-bar: 72px;
+
+    --_display-meta-nav: none;
+    --_display-meta-nav-external: none;
+    --_display-lang-switcher: none;
+    --_display-top-app-name: none;
+    --_display-bottom-app-name: block;
+
+    --scl-telekom-header-height: var(--_height);
+  }
+}
+
+:host([type='subtle']) {
+  --shadow: none;
+  --background: transparent;
 }
 
 /* TODO not sure if we're actually gonna need this */
@@ -276,12 +341,12 @@ slot[name='functions'] {
 
 @media screen and (--lg) {
   :host([scrolled]) [part~='bottom-app-name'] {
-    animation-name: toggle;
+    animation-name: var(--_animation-name);
     animation-timing-function: var(--telekom-motion-easing-enter);
   }
 
   :host([scrolled-back]) [part~=' bottom-app-name'] {
-    animation-name: toggle;
+    animation-name: var(--_animation-name);
     animation-direction: reverse;
     animation-timing-function: var(--telekom-motion-easing-exit);
   }

packages/components/src/components/telekom/telekom-header/telekom-header.tsx

@@ -32,6 +32,7 @@ export class TelekomHeader {
   @Prop({ reflect: true }) appName?: string;
   @Prop() appNameLink?: string;
   @Prop() appNameClick?: any;
+  @Prop() type: string = 'default';
 
   @State() scrolled: boolean;
   @State() scrolledBack: boolean = false;
@@ -47,11 +48,14 @@ export class TelekomHeader {
 
   render() {
     return (
-      <Host scrolled={this.scrolled} scrolled-back={this.scrolledBack}>
+      <Host
+        scrolled={this.type !== 'subtle' && this.scrolled}
+        scrolled-back={this.type !== 'subtle' && this.scrolledBack}
+      >
         <header
-          part={cx('base', {
-            scrolled: this.scrolled,
-            'scrolled-back': this.scrolledBack,
+          part={cx('base', this.type, {
+            scrolled: this.type !== 'subtle' && this.scrolled,
+            'scrolled-back': this.type !== 'subtle' && this.scrolledBack,
           })}
         >
           <div part="fixed-wrapper">

packages/components/src/components/telekom/telekom-mobile-flyout-canvas/telekom-mobile-flyout-canvas.css

@@ -58,3 +58,10 @@
 slot[name='row']::slotted(*) {
   margin-top: var(--telekom-spacing-unit-x6);
 }
+
+:host([type='subtle']) [part~='body'] {
+  margin-top: var(--telekom-spacing-unit-x4);
+}
+:host([type='subtle']) [part~='meta'] {
+  margin-top: var(--telekom-spacing-unit-x3);
+}

packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.css

@@ -35,19 +35,35 @@
   [scrolled] .scale-telekom-nav-item {
     --_spacing-bottom-slotted-bottom: var(--telekom-spacing-unit-x6);
   }
+  [type='slim'] .scale-telekom-nav-item,
+  [type='slim'][scrolled] .scale-telekom-nav-item {
+    --_spacing-bottom-slotted-bottom: var(--telekom-spacing-unit-x6);
+  }
 }
 @media screen and (--xl) {
   .scale-telekom-nav-item {
     --_spacing-top-slotted-top: var(--telekom-spacing-unit-x3);
     --_spacing-bottom-slotted-bottom: var(--telekom-spacing-unit-x6);
   }
+  [type='slim'] .scale-telekom-nav-item {
+    --_spacing-bottom-slotted-bottom: calc(
+      var(--telekom-spacing-unit-x8) - 2px
+    );
+  }
 }
 @media screen and (--2xl) {
   .scale-telekom-nav-item {
     --_spacing-top-slotted-top: var(--telekom-spacing-unit-x3);
     --_spacing-bottom-slotted-bottom: var(--telekom-spacing-unit-x8);
     --_font-size-main-nav: var(--telekom-typography-font-size-callout);
   }
+  [type='slim'] .scale-telekom-nav-item,
+  [type='slim'][scrolled-back] .scale-telekom-nav-item {
+    --_spacing-bottom-slotted-bottom: calc(var(--telekom-spacing-unit-x9));
+  }
+  [type='slim'][scrolled] .scale-telekom-nav-item {
+    --_spacing-bottom-slotted-bottom: calc(var(--telekom-spacing-unit-x5));
+  }
 }
 
 .scale-telekom-nav-item[debug] {
@@ -68,6 +84,8 @@
   border: none;
   text-decoration: none;
   cursor: pointer;
+  transition: padding-bottom var(--telekom-motion-duration-immediate)
+    var(--telekom-motion-easing-standard);
 }
 
 .scale-telekom-nav-item > :where(a, button):hover,
@@ -123,6 +141,21 @@
   left: 0;
 }
 
+.scale-telekom-nav-list[variant='main-nav']
+  > .scale-telekom-nav-item
+  > :where(a, button):has(scale-badge[label]):hover:after,
+.scale-telekom-nav-list[variant='main-nav']
+  > .scale-telekom-nav-item
+  > :where(button[aria-expanded='true']):has(scale-badge[label]):after,
+.scale-telekom-nav-list[variant='functions']
+  > .scale-telekom-nav-item
+  > :where(a, button):has(scale-badge[label]):hover:after,
+.scale-telekom-nav-list[variant='functions']
+  > .scale-telekom-nav-item
+  > :where(button[aria-expanded='true']):has(scale-badge[label]):after {
+  width: 24px;
+}
+
 .scale-telekom-nav-list[variant='main-nav']
   > .scale-telekom-nav-item
   > :where(a, button):active:after,
@@ -210,7 +243,7 @@
 
 @media screen and (--lg) {
   .scale-telekom-nav-list[variant='meta-nav'] {
-    margin-right: var(--telekom-spacing-unit-x6);
+    margin-right: var(--telekom-spacing-unit-x8);
   }
 
   .scale-telekom-nav-list[variant='lang-switcher']

packages/components/src/components/telekom/telekom-nav-list/telekom-nav-list.css

@@ -27,8 +27,8 @@
 
   --_spacing-x-slotted: var(--_spacing-x-slotted-main-nav, 24px);
 
-  --_spacing-x-slotted-meta-nav-external: var(--telekom-spacing-unit-x4);
-  --_spacing-x-slotted-meta-nav: var(--telekom-spacing-unit-x8);
+  --_spacing-x-slotted-meta-nav-external: var(--telekom-spacing-unit-x5);
+  --_spacing-x-slotted-meta-nav: var(--telekom-spacing-unit-x5);
   --_spacing-x-slotted-lang-switcher: var(--telekom-spacing-unit-x2);
   --_spacing-x-slotted-main-nav: var(--telekom-spacing-unit-x8);
   --_spacing-x-slotted-functions: var(--telekom-spacing-unit-x6);

packages/storybook-vue/stories/components/beta-brand-header-navigation/BrandHeader.stories.mdx

@@ -213,6 +213,50 @@ scale-telekom-nav-flyout {
 </scale-telekom-mega-menu>
 ```
 
+## Slim Header
+
+<Canvas withSource="none">
+  <Story
+    name="Slim Header"
+    args={{ storyName: 'StorySlim', appName: 'Application Name' }}
+    inline={false}
+    height={500}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+```html
+<scale-telekom-header
+  app-name="Application Name"
+  app-name-link="https://example.com"
+>
+  <!-- … -->
+</scale-telekom-header>
+```
+
+## Subtle Header
+
+<Canvas withSource="none">
+  <Story
+    name="Subtle Header"
+    args={{ storyName: 'StorySubtle', appName: 'Application Name' }}
+    inline={false}
+    height={500}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+```html
+<scale-telekom-header
+  app-name="Application Name"
+  app-name-link="https://example.com"
+>
+  <!-- … -->
+</scale-telekom-header>
+```
+
 ## Data API (Backward compatibility)
 
 > This scale-telekom-header-data-back-compat component is only meant to make it easier to migrate from a [previous version of the Brand Header](?path=/usage/components-brand-header-navigation--standard). If you do not need to migrate, please avoid it. Learn more about the [expected data shape](https://github.com/telekom/scale/blob/main/packages/storybook-vue/stories/components/brand-header-navigation/fixtures.js).