feat(telekom-header): icon navigation (#1439)

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;
+}

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 (
+      <Host>
+        <span part="base" aria-labelledby="raw-count label">
+          <slot />
+          <span
+            aria-hidden="true"
+            part={cx(`circle`, this.count ? `has-count` : 'no-count')}
+          >
+            {!this.count ? '' : this.formatter.format(this.count)}
+          </span>
+          <span aria-hidden="true" id="raw-count" part="visually-hidden">
+            {this.count}
+          </span>
+        </span>
+        <span
+          id="label"
+          part={cx('label', this.labelVisuallyHidden && 'visually-hidden')}
+          aria-hidden="true"
+        >
+          {this.label}
+        </span>
+      </Host>
+    );
+  }
+}

packages/components/src/components/badge/readme.md

@@ -0,0 +1,27 @@
+# scale-badge
+
+
+
+<!-- Auto Generated Below -->
+
+
+## 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/)*

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
 ```
 

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<any>` |
 
 
 ## 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
+```
 
 ----------------------------------------------
 

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;
+}

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 (
       <Host>
+        <button
+          part="close-button"
+          onClick={(e) => {
+            emitEvent(this, 'scaleCloseNavFlyout', e);
+          }}
+        >
+          <scale-icon-action-close
+            size={24}
+            accessibility-title={this.closeButtonTitle}
+          ></scale-icon-action-close>
+        </button>
+
         <div part="base">
-          <nav part="content">
+          <div part="app-name">
+            <scale-telekom-app-name>
+              {this.appNameLink ? (
+                <a onClick={this.appNameClick} href={this.appNameLink}>
+                  {this.appName}
+                </a>
+              ) : (
+                <span>{this.appName}</span>
+              )}
+            </scale-telekom-app-name>
+          </div>
+
+          <div part="links-top">
+            <slot name="top-left"></slot>
+            <slot name="top-right"></slot>
+          </div>
+          <nav part="nav">
             <slot></slot>
           </nav>
+          <slot name="bottom"></slot>
         </div>
       </Host>
     );

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) {