From 490f7c6d89db8d28350b4c5b2e42581df456a42c Mon Sep 17 00:00:00 2001 From: Daniel Beck Date: Tue, 10 Jan 2023 10:17:58 +0100 Subject: [PATCH] feat(telekom-header): icon navigation (#1439) --- .../components/src/components/badge/badge.css | 71 +++++++++++ .../components/src/components/badge/badge.tsx | 59 +++++++++ .../components/src/components/badge/readme.md | 27 ++++ .../telekom/telekom-app-name/readme.md | 2 + .../telekom/telekom-mobile-menu/readme.md | 43 +++++-- .../telekom-mobile-menu.css | 67 +++++++++- .../telekom-mobile-menu.tsx | 40 +++++- .../telekom-nav-flyout/telekom-nav-flyout.tsx | 5 + .../telekom-nav-item/telekom-nav-item.css | 5 +- .../telekom-nav-list/telekom-nav-list.css | 2 + .../components/src/html/telekom-header.html | 118 +++++++++++++++--- 11 files changed, 412 insertions(+), 27 deletions(-) create mode 100644 packages/components/src/components/badge/badge.css create mode 100644 packages/components/src/components/badge/badge.tsx create mode 100644 packages/components/src/components/badge/readme.md diff --git a/packages/components/src/components/badge/badge.css b/packages/components/src/components/badge/badge.css new file mode 100644 index 0000000000..bc617c5e7f --- /dev/null +++ b/packages/components/src/components/badge/badge.css @@ -0,0 +1,71 @@ +/** + * @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/. + */ + +:host { + --background-color-circle: var(--telekom-color-primary-standard); + --color-circle: var(--telekom-color-text-and-icon-inverted-standard); + --font-size-circle: var(--telekom-typography-font-size-footnote); + --font-weight-circle: bold; + --border-radius-circle: var(--telekom-radius-circle); + display: flex; +} + +:host::part(base) { + display: inline-flex; + position: relative; + align-items: center; +} + +:host::part(circle) { + display: flex; + position: absolute; + align-items: center; + justify-content: center; + font-size: var(--font-size-circle); + font-weight: var(--font-weight-circle); + border-radius: var(--border-radius-circle); + background-color: var(--background-color-circle); + color: var(--color-circle); +} + +:host::part(circle has-count) { + padding: 0 2px; + top: -8px; + right: -5px; + height: 14px; + min-width: 10px; +} + +:host::part(circle no-count) { + top: -4px; + right: -2px; + height: 8px; + min-width: 8px; +} + +:host::part(label) { + margin-left: 4px; + font-weight: 400; + font-size: 12px; + color: black; + display: flex; + align-items: center; +} + +:host::part(visually-hidden) { + clip-path: inset(100%); + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} diff --git a/packages/components/src/components/badge/badge.tsx b/packages/components/src/components/badge/badge.tsx new file mode 100644 index 0000000000..a01f200219 --- /dev/null +++ b/packages/components/src/components/badge/badge.tsx @@ -0,0 +1,59 @@ +/** + * @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/. + */ + +import { Component, Element, h, Host, Prop } from '@stencil/core'; +import cx from 'classnames'; +import statusNote from '../../utils/status-note'; + +@Component({ + tag: 'scale-badge', + styleUrl: './badge.css', + shadow: true, +}) +export class Badge { + @Element() hostElement: HTMLElement; + @Prop() count: number; + @Prop() label: string; + @Prop() labelVisuallyHidden: boolean; + formatter = new Intl.NumberFormat('en', { + // @ts-ignore + notation: 'compact', + }); + connectedCallback() { + statusNote({ source: this.hostElement, tag: 'beta' }); + } + + render() { + return ( + + + + + + + + + ); + } +} diff --git a/packages/components/src/components/badge/readme.md b/packages/components/src/components/badge/readme.md new file mode 100644 index 0000000000..b42d50a2e3 --- /dev/null +++ b/packages/components/src/components/badge/readme.md @@ -0,0 +1,27 @@ +# scale-badge + + + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| --------------------- | ----------------------- | ----------- | --------- | ----------- | +| `count` | `count` | | `number` | `undefined` | +| `label` | `label` | | `string` | `undefined` | +| `labelVisuallyHidden` | `label-visually-hidden` | | `boolean` | `undefined` | + + +## Shadow Parts + +| Part | Description | +| ------------------- | ----------- | +| `"base"` | | +| `"visually-hidden"` | | + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/components/src/components/telekom/telekom-app-name/readme.md b/packages/components/src/components/telekom/telekom-app-name/readme.md index 63dcd98caf..90da35c854 100644 --- a/packages/components/src/components/telekom/telekom-app-name/readme.md +++ b/packages/components/src/components/telekom/telekom-app-name/readme.md @@ -10,11 +10,13 @@ ### Used by - [scale-telekom-header](../telekom-header) + - [scale-telekom-mobile-menu](../telekom-mobile-menu) ### Graph ```mermaid graph TD; scale-telekom-header --> scale-telekom-app-name + scale-telekom-mobile-menu --> scale-telekom-app-name style scale-telekom-app-name fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/components/src/components/telekom/telekom-mobile-menu/readme.md b/packages/components/src/components/telekom/telekom-mobile-menu/readme.md index 822d63bd72..222da760de 100644 --- a/packages/components/src/components/telekom/telekom-mobile-menu/readme.md +++ b/packages/components/src/components/telekom/telekom-mobile-menu/readme.md @@ -7,18 +7,47 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| --------------- | ----------------- | ----------- | -------- | ----------- | -| `activeRouteId` | `active-route-id` | | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------------ | -------------------- | ----------- | -------- | ----------- | +| `activeRouteId` | `active-route-id` | | `string` | `undefined` | +| `appName` | `app-name` | | `string` | `undefined` | +| `appNameClick` | `app-name-click` | | `any` | `undefined` | +| `appNameLink` | `app-name-link` | | `string` | `undefined` | +| `closeButtonTitle` | `close-button-title` | | `string` | `'Close'` | + + +## Events + +| Event | Description | Type | +| ------------------------ | ----------- | ------------------ | +| `scale-close-nav-flyout` | | `CustomEvent` | ## Shadow Parts -| Part | Description | -| ----------- | ----------- | -| `"base"` | | -| `"content"` | | +| Part | Description | +| ---------------- | ----------- | +| `"app-name"` | | +| `"base"` | | +| `"close-button"` | | +| `"links-top"` | | +| `"nav"` | | + + +## Dependencies + +### Depends on + +- [scale-icon-action-close](../../icons/action-close) +- [scale-telekom-app-name](../telekom-app-name) +### Graph +```mermaid +graph TD; + scale-telekom-mobile-menu --> scale-icon-action-close + scale-telekom-mobile-menu --> scale-telekom-app-name + style scale-telekom-mobile-menu fill:#f9f,stroke:#333,stroke-width:4px +``` ---------------------------------------------- diff --git a/packages/components/src/components/telekom/telekom-mobile-menu/telekom-mobile-menu.css b/packages/components/src/components/telekom/telekom-mobile-menu/telekom-mobile-menu.css index c011ecbd63..008307c23c 100644 --- a/packages/components/src/components/telekom/telekom-mobile-menu/telekom-mobile-menu.css +++ b/packages/components/src/components/telekom/telekom-mobile-menu/telekom-mobile-menu.css @@ -1,17 +1,80 @@ :host { - --spacing: 16px; + --spacing: var(--telekom-spacing-unit-x4); --background: var(--telekom-color-background-canvas); --max-width: 572px; + + --spacing-close-button: var(--telekom-spacing-unit-x2); + --radius-close-button: var(--telekom-radius-standard); + --transition-close-button: all var(--telekom-motion-duration-transition) + var(--telekom-motion-easing-standard); + --box-shadow-close-button-focus: 0 0 0 var(--telekom-line-weight-highlight) + var(--telekom-color-functional-focus); + --color-close-button: var(--telekom-color-text-and-icon-standard); + --color-close-button-hover: var(--telekom-color-primary-hovered); + --color-close-button-active: var(--telekom-color-primary-pressed); } :host::part(base) { + margin: 0 auto; padding: var(--spacing); + padding-top: calc(var(--spacing) - 6px); background: var(--background); display: flex; justify-content: center; + flex-direction: column; + max-width: var(--max-width); } -:host::part(content) { +:host::part(app-name) { + padding: var(--spacing) 0; +} + +:host::part(close-button) { + position: absolute; + top: 22px; + right: calc(var(--spacing) - var(--spacing-close-button) + 2px); +} + +:host::part(nav) { + padding: var(--spacing) 0; max-width: var(--max-width); width: 100%; } + +:host::part(close-button) { + box-sizing: border-box; + display: inline-flex; + align-items: center; + justify-content: center; + padding: var(--spacing-close-button); + margin-bottom: calc(-2 * var(--spacing-close-button)); + border: 0; + border-radius: var(--radius-close-button); + outline: none; + color: var(--color-close-button); + background: transparent; + transition: var(--transition-close-button); + transform: translate( + var(--spacing-close-button), + calc(-1 * var(--spacing-close-button)) + ); + appearance: none; + cursor: pointer; + user-select: none; +} + +:host::part(close-button):focus { + box-shadow: var(--box-shadow-close-button-focus); +} + +:host::part(close-button):hover { + color: var(--color-close-button-hover); +} + +:host::part(close-button):active { + color: var(--color-close-button-active); +} + +:host::part(links-top) { + display: flex; +} diff --git a/packages/components/src/components/telekom/telekom-mobile-menu/telekom-mobile-menu.tsx b/packages/components/src/components/telekom/telekom-mobile-menu/telekom-mobile-menu.tsx index c9caf3b888..d02bb2ca3e 100644 --- a/packages/components/src/components/telekom/telekom-mobile-menu/telekom-mobile-menu.tsx +++ b/packages/components/src/components/telekom/telekom-mobile-menu/telekom-mobile-menu.tsx @@ -17,8 +17,10 @@ import { Prop, Listen, State, + Event, } from '@stencil/core'; import { HTMLStencilElement } from '@stencil/core/internal'; +import { emitEvent } from '../../../utils/utils'; function elementDepth(el) { let depth = 0; @@ -38,9 +40,16 @@ export class TelekomMobileMenu { @Element() hostElement: HTMLStencilElement; @Prop() activeRouteId: string; + @Prop() closeButtonTitle: string = 'Close'; + + @Prop() appName?: string; + @Prop() appNameLink?: string; + @Prop() appNameClick?: any; @State() currentLevel: number = 0; + @Event({ eventName: 'scale-close-nav-flyout' }) scaleCloseNavFlyout; + @Listen('scale-click-menu-item') handleClickMenuItem(e) { const hasChildren = !!e.target.querySelector('[slot="children"]'); @@ -158,10 +167,39 @@ export class TelekomMobileMenu { render() { return ( + +
-
); diff --git a/packages/components/src/components/telekom/telekom-nav-flyout/telekom-nav-flyout.tsx b/packages/components/src/components/telekom/telekom-nav-flyout/telekom-nav-flyout.tsx index 205334fde3..9b1aa658db 100644 --- a/packages/components/src/components/telekom/telekom-nav-flyout/telekom-nav-flyout.tsx +++ b/packages/components/src/components/telekom/telekom-nav-flyout/telekom-nav-flyout.tsx @@ -73,6 +73,11 @@ export class TelekomNavItem { // } // } + @Listen('scale-close-nav-flyout') + handleScaleCloseNavFlyout() { + this.expanded = false; + } + @Listen('click', { target: 'document' }) handleDocumentClick(event) { if (!this.isExpanded) { 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 index aa1cc819b3..28cbfc0089 100644 --- 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 @@ -14,7 +14,7 @@ :host { --spacing-x: 0; - --_spacing-t-slotted-meta: var(--telekom-spacing-unit-x3); + --_spacing-t-slotted-meta: var(--telekom-spacing-unit-x5); --_spacing-b-slotted-main: var(--telekom-spacing-unit-x5); } @@ -25,6 +25,7 @@ } @media screen and (--lg) { :host { + --_spacing-t-slotted-meta: var(--telekom-spacing-unit-x3); --_spacing-b-slotted-main: var(--telekom-spacing-unit-x4); } :host-context([scrolled]) { @@ -33,11 +34,13 @@ } @media screen and (--xl) { :host { + --_spacing-t-slotted-meta: var(--telekom-spacing-unit-x3); --_spacing-b-slotted-main: var(--telekom-spacing-unit-x6); } } @media screen and (--2xl) { :host { + --_spacing-t-slotted-meta: var(--telekom-spacing-unit-x3); --_spacing-b-slotted-main: var(--telekom-spacing-unit-x8); } } 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 index 17a01f1b18..7310ec947e 100644 --- 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 @@ -22,6 +22,7 @@ --width: 100%; --height: 100%; --spacing-x-start: 0; + --flex-direction: row; --_spacing-x-slotted: var(--_spacing-x-slotted-main, 24px); --_spacing-x-slotted-main: var(--telekom-spacing-unit-x8); @@ -31,6 +32,7 @@ display: flex; align-items: stretch; + flex-direction: var(--flex-direction); width: var(--width); height: var(--height); margin-inline-start: var(--spacing-x-start); diff --git a/packages/components/src/html/telekom-header.html b/packages/components/src/html/telekom-header.html index 4649609176..4c3674c97c 100644 --- a/packages/components/src/html/telekom-header.html +++ b/packages/components/src/html/telekom-header.html @@ -117,7 +117,7 @@

Hello, this is the same flyout

alignment="left" > - Metalink ext 1 + Metalink ext 1 Metalink ext 2 @@ -145,39 +145,125 @@

Hello, this is the same flyout

alignment="right" > - ๐ŸŽ„ + + + + + - ๐Ÿงก + + + + + + - ๐Ÿ‘‘ + + + - - - + + + + -
-

Hey!

-
+ + + + Metalink ext 1 + + + Metalink ext 2 + + + + + + MK + + + SO + + + DE + + + + + Category 1 + + 2. Level Category 1 + + + + Category 2 + + 2. Level Category 2.1 + + 3. Level Category 2.1.1 + + + 3. Level Category 2.1.2 + + + + 2. Level Category 2.2 + + + + + + Metalink ext 1 + + + Metalink ext 2 + + + + +