feat(telekon-header): improve styles for list and item (#1437)

* chore: use postcss custom-media * feat(telekom-nav-list): improve spacing * feat(telekom-nav-flyout): improve styles a bit * feat(telekom-nav-item): adjust spacing * feat(telekom-nav-list): further adjust spacing * feat(telekom-nav-flyout): add CSS vars for anim * chore: build * style: format * style: prettier Co-authored-by: Daniel Beck <[email protected]>
telekom · Dec 27, 2022 · cb64d01 · cb64d01
1 parent f32c55a
commit cb64d01
Show file tree

Hide file tree

Showing 16 changed files with 274 additions and 65 deletions.
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -58,6 +58,7 @@
     "hast-util-to-html": "^7.1.1",
     "jsx-dom": "^6.4.17",
     "lodash": "^4.17.15",
+    "postcss-custom-media": "^9.0.1",
     "rimraf": "^3.0.2",
     "svg-parser": "^2.0.4",
     "svgo": "^1.3.2",

diff --git a/packages/components/src/components/telekom/telekom-header/telekom-header.css b/packages/components/src/components/telekom/telekom-header/telekom-header.css
@@ -9,6 +9,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
+@import url('../../../global/custom-media.css');
+
 :host {
   --shadow: 0px 2px 9px rgba(0, 0, 0, 0.15);
   --background: var(--telekom-color-background-canvas);
@@ -40,15 +42,15 @@
   --_base-menu-justify-content: end;
 }
 
-@media screen and (min-width: 640px) {
+@media screen and (--md) {
   :host {
     --_display-app-name: block;
     --_spacing-x: 0 16px;
     --_spacing-left-horizontal-menus: 32px;
   }
 }
 
-@media screen and (min-width: 1040px) {
+@media screen and (--lg) {
   :host,
   :host::part(scrolled-back) {
     --_height: 84px;
@@ -97,7 +99,7 @@
   }
 }
 
-@media screen and (min-width: 1296px) {
+@media screen and (--xl) {
   :host,
   :host::part(scrolled-back) {
     --_height: 96px;
@@ -116,7 +118,7 @@
   }
 }
 
-@media screen and (min-width: 1552px) {
+@media screen and (--2xl) {
   :host,
   :host::part(scrolled-back) {
     --_height: 120px;
@@ -236,12 +238,11 @@ slot[name='functions'] {
   margin-left: var(--_spacing-left-horizontal-menus);
 }
 
-:host::part(extended-menu-left) {
-  display: inline-flex;
-}
-
+:host::part(extended-menu-left),
 :host::part(extended-menu-right) {
   display: inline-flex;
+  align-items: flex-start;
+  height: 100%;
 }
 
 :host::part(extended-menu) {

diff --git a/packages/components/src/components/telekom/telekom-header/telekom-header.tsx b/packages/components/src/components/telekom/telekom-header/telekom-header.tsx
@@ -48,7 +48,7 @@ export class TelekomHeader {
 
   render() {
     return (
-      <Host>
+      <Host scrolled={this.scrolled}>
         <header
           part={cx('base', {
             scrolled: this.scrolled,

diff --git a/packages/components/src/components/telekom/telekom-nav-flyout/telekom-nav-flyout.css b/packages/components/src/components/telekom/telekom-nav-flyout/telekom-nav-flyout.css
@@ -9,8 +9,6 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-/* WIP 🚧 */
-
 :host {
   --top: 100%;
   --left: 0;
@@ -20,7 +18,10 @@
   --background: var(--telekom-color-background-surface);
   --shadow: none;
 
-  /* TODO add vars for animation props, both in and out */
+  --duration: var(--telekom-motion-duration-transition);
+  --translate-x: 0;
+  --translate-y: var(--telekom-spacing-unit-x1);
+  --translate-z: 0;
 
   display: contents;
 }
@@ -36,9 +37,11 @@
   left: var(--left);
   width: var(--width);
   height: var(--height);
+  min-height: 25vh;
   background: var(--background);
   box-shadow: var(--shadow);
-  animation-duration: 440ms;
+  animation-duration: var(--duration);
+  border-top: 1px solid var(--telekom-color-ui-faint);
 }
 
 :host::part(base expanded) {
@@ -48,7 +51,11 @@
 @keyframes toggle {
   from {
     opacity: 0;
-    transform: translateY(-0.25em);
+    transform: translate3d(
+      var(--translate-x),
+      var(--translate-y),
+      var(--translate-z)
+    );
   }
 }
 

diff --git a/packages/components/src/components/telekom/telekom-nav-item/readme.md b/packages/components/src/components/telekom/telekom-nav-item/readme.md
@@ -7,9 +7,9 @@
 
 ## Properties
 
-| Property  | Attribute | Description | Type                                            | Default  |
-| --------- | --------- | ----------- | ----------------------------------------------- | -------- |
-| `variant` | `variant` |             | `"icon" \| "main" \| "meta" \| "meta-external"` | `'main'` |
+| Property  | Attribute | Description | Type               | Default  |
+| --------- | --------- | ----------- | ------------------ | -------- |
+| `variant` | `variant` |             | `"main" \| "meta"` | `'main'` |
 
 
 ----------------------------------------------

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
@@ -9,11 +9,37 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-/* WIP 🚧 */
+@import url('../../../global/custom-media.css');
 
 :host {
   --spacing-x: 0;
-  --color-active: var(--telekom-color-primary-standard);
+
+  --_spacing-t-slotted-meta: var(--telekom-spacing-unit-x3);
+  --_spacing-b-slotted-main: var(--telekom-spacing-unit-x5);
+}
+
+@media screen and (--md) {
+  :host {
+    --_spacing-b-slotted-main: var(--telekom-spacing-unit-x5);
+  }
+}
+@media screen and (--lg) {
+  :host {
+    --_spacing-b-slotted-main: var(--telekom-spacing-unit-x4);
+  }
+  :host-context([scrolled]) {
+    --_spacing-b-slotted-main: var(--telekom-spacing-unit-x6);
+  }
+}
+@media screen and (--xl) {
+  :host {
+    --_spacing-b-slotted-main: var(--telekom-spacing-unit-x6);
+  }
+}
+@media screen and (--2xl) {
+  :host {
+    --_spacing-b-slotted-main: var(--telekom-spacing-unit-x8);
+  }
 }
 
 :host([debug]) {
@@ -37,30 +63,43 @@
 }
 
 ::slotted(:where(a, button):hover) {
-  color: var(--color-active);
+  color: var(--telekom-color-text-and-icon-primary-hovered);
+}
+::slotted(:where(a, button):active) {
+  color: var(--telekom-color-text-and-icon-primary-pressed);
 }
 
 /* main */
 
 :host([variant='main']) ::slotted(:where(a, button)) {
-  font-size: 18px;
-  line-height: 24px;
-  font-weight: 800;
+  font-size: 1.125rem; /* 18px, no token 😢 */
+  line-height: var(--telekom-typography-line-spacing-tight);
+  font-weight: var(--telekom-typography-font-weight-extra-bold);
   padding-left: var(--spacing-x);
   padding-right: var(--spacing-x);
-  padding-bottom: var(--_spacing-bottom-header-nav-item-main);
-  color: var(--my-color);
+  padding-bottom: var(--_spacing-b-slotted-main);
 }
 :host([variant='main'][active]) ::slotted(:where(a, button)) {
-  color: var(--color-active);
+  color: var(--telekom-color-text-and-icon-primary-standard);
 }
 :host([variant='main'][active]) ::slotted(:where(a, button)):after {
   content: '';
   width: 100%;
   height: var(--telekom-spacing-unit-x1);
-  background: var(--color-active);
+  background: var(--telekom-color-primary-standard);
   display: block;
   position: absolute;
   bottom: 0;
   left: 0;
 }
+
+/* meta */
+
+:host([variant='meta']) ::slotted(:where(a, button)) {
+  font-size: var(--telekom-typography-font-size-small);
+  line-height: var(--telekom-typography-line-spacing-tight);
+  font-weight: var(--telekom-typography-font-weight-regular);
+  padding-left: var(--spacing-x);
+  padding-right: var(--spacing-x);
+  padding-top: var(--_spacing-t-slotted-meta);
+}
diff --git a/packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.tsx b/packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.tsx
@@ -20,8 +20,7 @@ import { HTMLStencilElement } from '@stencil/core/internal';
 export class TelekomNavItem {
   @Element() hostElement: HTMLStencilElement;
 
-  @Prop({ reflect: true }) variant: 'main' | 'meta' | 'meta-external' | 'icon' =
-    'main';
+  @Prop({ reflect: true }) variant: 'main' | 'meta' = 'main';
 
   render() {
     return (

diff --git a/packages/components/src/components/telekom/telekom-nav-list/readme.md b/packages/components/src/components/telekom/telekom-nav-list/readme.md
@@ -7,9 +7,10 @@
 
 ## Properties
 
-| Property    | Attribute   | Description | Type                            | Default  |
-| ----------- | ----------- | ----------- | ------------------------------- | -------- |
-| `alignment` | `alignment` |             | `"center" \| "left" \| "right"` | `'left'` |
+| Property    | Attribute   | Description | Type                                             | Default  |
+| ----------- | ----------- | ----------- | ------------------------------------------------ | -------- |
+| `alignment` | `alignment` |             | `"center" \| "left" \| "right"`                  | `'left'` |
+| `variant`   | `variant`   |             | `"function" \| "main" \| "meta" \| "meta-tight"` | `'main'` |
 
 
 ----------------------------------------------

diff --git a/packages/components/src/components/telekom/telekom-nav-list/telekom-nav-list.css b/packages/components/src/components/telekom/telekom-nav-list/telekom-nav-list.css
@@ -9,32 +9,72 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-/* WIP 🚧 */
+/*
+       sm,md,lg,xl,2xl
+  main --,--,32,48,56
+  meta --,--,32,32,32
+  func 24,24,24,24,24
+*/
+
+@import url('../../../global/custom-media.css');
 
 :host {
-  --spacing-inner-x: 58px;
+  --width: 100%;
   --height: 100%;
-  --spacing-x: 30px;
+  --spacing-x-start: 0;
 
-  /* TODO just for ref… */
-  /* --_spacing-bottom-header-nav-item-main: 16px;
-  --_spacing-inline-header-nav-item-main: 32px;
-  --_spacing-top-header-nav-item-secondary: 12px;
-  --_spacing-inline-header-nav-item-secondary: 32px;
-  --_spacing-bottom-header-nav-item-main-icon: 16px;
-  --_spacing-inline-header-nav-item-main-icon: 24px; */
+  --_spacing-x-slotted: var(--_spacing-x-slotted-main, 24px);
+  --_spacing-x-slotted-main: var(--telekom-spacing-unit-x8);
+  --_spacing-x-slotted-meta: var(--telekom-spacing-unit-x8);
+  --_spacing-x-slotted-meta-tight: var(--telekom-spacing-unit-x4);
+  --_spacing-x-slotted-function: var(--telekom-spacing-unit-x6);
 
   display: flex;
-  width: 100%;
   align-items: stretch;
+  width: var(--width);
   height: var(--height);
-  margin-inline-start: var(--spacing-x);
+  margin-inline-start: var(--spacing-x-start);
 }
 
 :host([debug]) {
   border: 1px dotted gold;
 }
 
+@media screen and (--xl) {
+  :host {
+    --_spacing-x-slotted-main: var(--telekom-spacing-unit-x12);
+    --_spacing-x-slotted-meta-tight: var(--telekom-spacing-unit-x5);
+  }
+
+  :host([debug]) {
+    border: 1px dotted cyan;
+  }
+}
+
+@media screen and (--2xl) {
+  :host {
+    --_spacing-x-slotted-main: var(--telekom-spacing-unit-x14);
+  }
+
+  :host([debug]) {
+    border: 1px dotted magenta;
+  }
+}
+
+/* TODO could this also be [slot="..."]? */
+:host([variant='main']) {
+  --_spacing-x-slotted: var(--_spacing-x-slotted-main);
+}
+:host([variant='meta']) {
+  --_spacing-x-slotted: var(--_spacing-x-slotted-meta);
+}
+:host([variant='meta-tight']) {
+  --_spacing-x-slotted: var(--_spacing-x-slotted-meta-tight);
+}
+:host([variant='function']) {
+  --_spacing-x-slotted: var(--_spacing-x-slotted-function);
+}
+
 :host([alignment='left']) {
   justify-content: flex-start;
 }
@@ -46,11 +86,11 @@
 }
 
 :host([alignment='left']) ::slotted(*:not(:last-child)) {
-  margin-inline-end: var(--spacing-inner-x);
+  margin-inline-end: var(--_spacing-x-slotted);
 }
 :host([alignment='right']) ::slotted(*:not(:first-child)) {
-  margin-inline-start: var(--spacing-inner-x);
+  margin-inline-start: var(--_spacing-x-slotted);
 }
 :host([alignment='center']) ::slotted(*) {
-  margin-inline: calc(0.5 * var(--spacing-inner-x));
+  margin-inline: calc(0.5 * var(--_spacing-x-slotted));
 }
diff --git a/packages/components/src/components/telekom/telekom-nav-list/telekom-nav-list.tsx b/packages/components/src/components/telekom/telekom-nav-list/telekom-nav-list.tsx
@@ -21,6 +21,11 @@ export class TelekomNavList {
   @Element() hostElement: HTMLStencilElement;
 
   @Prop({ reflect: true }) alignment: 'left' | 'center' | 'right' = 'left';
+  @Prop({ reflect: true }) variant:
+    | 'main'
+    | 'meta'
+    | 'meta-tight'
+    | 'function' = 'main';
 
   render() {
     return (

diff --git a/packages/components/src/global/custom-media.css b/packages/components/src/global/custom-media.css
@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Scale https://github.com/telekom/scale
+ *
+ * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+@custom-media --md (min-width: 640px);
+@custom-media --lg (min-width: 1040px);
+@custom-media --xl (min-width: 1296px);
+@custom-media --2xl (min-width: 1680px);