fix(telekom-header): use mobile flyout canvas (#1525)

packages/components/package.json

@@ -25,7 +25,7 @@
   "scripts": {
     "build": "stencil build --docs-readme",
     "build:whitelabel": "WHITELABEL=1 stencil build --docs-readme",
-    "build:watch": "stencil build --watch",
+    "build:watch": "stencil build --watch --serve --config stencil-dev.config.ts",
     "build:staging": "stencil build --config stencil-staging.config.ts",
     "start": "stencil build --dev --watch --serve --config stencil-dev.config.ts",
     "dev": "yarn start",

packages/components/src/components/divider/readme.md

@@ -21,19 +21,6 @@
 | `"rule-vertical"`   |             |
 
 
-## Dependencies
-
-### Used by
-
- - [scale-telekom-mobile-menu-item](../telekom/telekom-mobile-menu-item)
-
-### Graph
-```mermaid
-graph TD;
-  scale-telekom-mobile-menu-item --> scale-divider
-  style scale-divider fill:#f9f,stroke:#333,stroke-width:4px
-```
-
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

packages/components/src/components/telekom/telekom-mobile-flyout-canvas/readme.md

@@ -10,6 +10,8 @@
 | Property           | Attribute            | Description | Type     | Default     |
 | ------------------ | -------------------- | ----------- | -------- | ----------- |
 | `appName`          | `app-name`           |             | `string` | `undefined` |
+| `appNameClick`     | `app-name-click`     |             | `any`    | `undefined` |
+| `appNameLink`      | `app-name-link`      |             | `string` | `undefined` |
 | `closeButtonLabel` | `close-button-label` |             | `string` | `'Close'`   |
 | `closeButtonTitle` | `close-button-title` |             | `string` | `null`      |
 

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

@@ -16,11 +16,19 @@
   height: 100%;
   overflow-y: auto;
 
+  --max-width: 572px;
   --spacing: var(--telekom-spacing-unit-x6) var(--telekom-spacing-unit-x4);
+
+  background: var(--telekom-color-background-canvas);
 }
 
 [part='base'] {
   padding: var(--spacing);
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  margin: 0 auto;
+  max-width: var(--max-width);
 }
 
 [part~='header'] {

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

@@ -25,6 +25,8 @@ export class TelekomMobileFlyoutCanvas {
   @Element() hostElement: HTMLStencilElement;
 
   @Prop() appName?: string;
+  @Prop() appNameLink?: string;
+  @Prop() appNameClick?: any;
   @Prop() closeButtonLabel?: string = 'Close';
   @Prop() closeButtonTitle?: string | null = null;
 
@@ -56,9 +58,7 @@ export class TelekomMobileFlyoutCanvas {
           <div part="body">
             <slot name="row">
               <slot name="mobile-before-main-nav"></slot>
-              <slot name="mobile-main-nav">
-                {/* 🥭 <telekom-mobile-menu> goes here */}
-              </slot>
+              <slot name="mobile-main-nav"></slot>
               <slot name="mobile-after-main-nav"></slot>
               <div part="meta">
                 <div>

packages/components/src/components/telekom/telekom-mobile-menu-item/readme.md

@@ -36,13 +36,11 @@
 ### Depends on
 
 - [scale-icon-navigation-right](../../icons/navigation-right)
-- [scale-divider](../../divider)
 
 ### Graph
 ```mermaid
 graph TD;
   scale-telekom-mobile-menu-item --> scale-icon-navigation-right
-  scale-telekom-mobile-menu-item --> scale-divider
   style scale-telekom-mobile-menu-item fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

packages/components/src/components/telekom/telekom-mobile-menu-item/telekom-mobile-menu-item.css

@@ -5,18 +5,19 @@
   --font-thin: var(--telekom-text-style-lead-text);
   --color: var(--telekom-color-text-and-icon-standard);
   --color-active: var(--telekom-color-primary-standard);
-  --border-color: var(--telekom-color-ui-border-standard);
+  --border-color: var(--telekom-color-ui-faint);
 
   --_spacing-level: 0px;
   --_font: var(--font-bold);
   --_color: var(--color);
+  position: relative;
 }
 
 :host::part(level-0) {
   --_spacing-level: 0px;
 }
 :host::part(level-0 active) {
-  --_spacing-level: 12px;
+  --_spacing-level: 0px;
 }
 :host::part(level-0 open) {
   --_spacing-level: 36px;
@@ -44,7 +45,7 @@
   display: flex;
   align-items: center;
   height: var(--height);
-  width: calc(100% - calc(32px + var(--_spacing-level)));
+  width: calc(100% - var(--_spacing-level));
   max-width: 572px;
   padding-left: var(--_spacing-level);
   color: var(--_color);
@@ -57,6 +58,9 @@
   width: 100%;
   align-items: center;
   justify-content: flex-end;
+  border-style: solid;
+  border-width: 0 0 1px 0;
+  border-color: var(--border-color);
 }
 
 :host::part(hidden) {
@@ -67,7 +71,3 @@
   display: flex;
   align-items: center;
 }
-
-scale-divider {
-  --spacing: 0;
-}

packages/components/src/components/telekom/telekom-mobile-menu-item/telekom-mobile-menu-item.tsx

@@ -107,7 +107,6 @@ export class TelekomMobileMenuItem {
           </div>
           {<slot name="children"></slot>}
         </nav>
-        <scale-divider></scale-divider>
       </Host>
     );
   }

packages/components/src/components/telekom/telekom-mobile-menu/readme.md

@@ -25,27 +25,22 @@
 
 ## Shadow Parts
 
-| Part             | Description |
-| ---------------- | ----------- |
-| `"app-name"`     |             |
-| `"back-button"`  |             |
-| `"base"`         |             |
-| `"close-button"` |             |
-| `"links-top"`    |             |
-| `"nav"`          |             |
+| Part            | Description |
+| --------------- | ----------- |
+| `"back-button"` |             |
+| `"base"`        |             |
+| `"nav"`         |             |
 
 
 ## Dependencies
 
 ### Depends on
 
-- [scale-icon-action-close](../../icons/action-close)
 - [scale-icon-navigation-left](../../icons/navigation-left)
 
 ### Graph
 ```mermaid
 graph TD;
-  scale-telekom-mobile-menu --> scale-icon-action-close
   scale-telekom-mobile-menu --> scale-icon-navigation-left
   style scale-telekom-mobile-menu fill:#f9f,stroke:#333,stroke-width:4px
 ```

packages/components/src/components/telekom/telekom-mobile-menu/telekom-mobile-menu.css

@@ -16,19 +16,13 @@
 
 :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(app-name) {
-  padding: var(--spacing) 0;
-}
-
 :host::part(back-button) {
   display: flex;
   align-items: center;
@@ -38,6 +32,7 @@
   font: var(--telekom-text-style-lead-text);
   width: 100%;
   height: 72px;
+  padding: 0;
 }
 
 scale-icon-navigation-left {
@@ -50,43 +45,6 @@ scale-icon-navigation-left {
   width: 100%;
 }
 
-:host::part(close-button) {
-  position: absolute;
-  top: 22px;
-  right: 10px;
-  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;
-  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;
-  color: var(--telekom-color-text-and-icon-standard);
-}
-
-:host::part(close-button):focus {
-  box-shadow: var(--box-shadow-close-button-focus);
-}
-
-:host::part(close-button):hover {
-  color: var(--color-hover);
-}
-
-:host::part(close-button):active {
-  color: var(--color-active);
-}
-
 :host::part(links-top) {
   display: flex;
 }

packages/components/src/components/telekom/telekom-mobile-menu/telekom-mobile-menu.tsx

@@ -20,7 +20,6 @@ import {
   Event,
 } from '@stencil/core';
 import { HTMLStencilElement } from '@stencil/core/internal';
-import { emitEvent } from '../../../utils/utils';
 
 function elementDepth(el) {
   let depth = 0;
@@ -118,33 +117,7 @@ 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">
-          <div part="app-name">
-            {this.appNameLink ? (
-              <a onClick={this.appNameClick} href={this.appNameLink}>
-                {this.appName}
-              </a>
-            ) : (
-              <span>{this.appName}</span>
-            )}
-          </div>
-
-          <div part="links-top">
-            <slot name="top-left"></slot>
-            <slot name="top-right"></slot>
-          </div>
           <nav
             part="nav"
             onClick={() => {
@@ -159,7 +132,6 @@ export class TelekomMobileMenu {
             ) : null}
             <slot></slot>
           </nav>
-          <slot name="bottom"></slot>
         </div>
       </Host>
     );