feat(telekom-mobile-menu): add new component (#1398)

telekom · Dec 27, 2022 · f32c55a · f32c55a
1 parent 2815b78
commit f32c55a
Show file tree

Hide file tree

Showing 7 changed files with 463 additions and 0 deletions.
diff --git a/packages/components/src/components/telekom/telekom-mobile-menu-item/readme.md b/packages/components/src/components/telekom/telekom-mobile-menu-item/readme.md
@@ -0,0 +1,49 @@
+# scale-telekom-mobile-menu-item
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property     | Attribute     | Description | Type      | Default |
+| ------------ | ------------- | ----------- | --------- | ------- |
+| `active`     | `active`      |             | `boolean` | `false` |
+| `hideHeader` | `hide-header` |             | `boolean` | `false` |
+| `level`      | `level`       |             | `string`  | `'0'`   |
+| `open`       | `open`        |             | `boolean` | `false` |
+
+
+## Events
+
+| Event                   | Description | Type               |
+| ----------------------- | ----------- | ------------------ |
+| `scale-click-menu-item` |             | `CustomEvent<any>` |
+
+
+## Shadow Parts
+
+| Part                     | Description |
+| ------------------------ | ----------- |
+| `"icon-right-container"` |             |
+
+
+## Dependencies
+
+### Depends on
+
+- [scale-icon-navigation-left](../../icons/navigation-left)
+- [scale-icon-navigation-right](../../icons/navigation-right)
+
+### Graph
+```mermaid
+graph TD;
+  scale-telekom-mobile-menu-item --> scale-icon-navigation-left
+  scale-telekom-mobile-menu-item --> scale-icon-navigation-right
+  style scale-telekom-mobile-menu-item fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/...s/components/src/components/telekom/telekom-mobile-menu-item/telekom-mobile-menu-item.css b/...s/components/src/components/telekom/telekom-mobile-menu-item/telekom-mobile-menu-item.css
@@ -0,0 +1,80 @@
+:host {
+  --height: 72px;
+  --max-width: 572px;
+  --font-bold: var(--telekom-text-style-heading-5);
+  --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);
+
+  --_box-shadow-active: none;
+  --_spacing-level: 0px;
+  --_font: var(--font-bold);
+  --_color: var(--color);
+}
+
+:host::part(level-0) {
+  --_spacing-level: 0px;
+}
+:host::part(level-1) {
+  --_spacing-level: 36px;
+}
+:host::part(level-2) {
+  --_spacing-level: 36px;
+  --_font: var(--font-thin);
+}
+:host::part(level-0 open) {
+  --_spacing-level: 36px;
+}
+:host::part(level-0 active) {
+  --_spacing-level: 12px;
+}
+:host::part(active) {
+  --_color: var(--color-active);
+  --_box-shadow-active: 2px 0px 0px 0px var(--color-active) inset;
+}
+
+:host::part(base) {
+  font: var(--_font);
+  color: var(--_color);
+  max-width: var(--max-width);
+}
+
+::slotted(a) {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  height: var(--height);
+  width: calc(100% - calc(32px + var(--_spacing-level)));
+  max-width: 572px;
+  padding-left: var(--_spacing-level);
+  color: var(--_color);
+  text-decoration: none;
+}
+
+:host::part(header) {
+  height: var(--height);
+  border-style: solid;
+  border-width: 0 0 1px 0;
+  border-color: var(--border-color);
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+}
+
+:host::part(header hidden) {
+  display: none;
+}
+
+:host::part(icon-left-container) {
+  box-shadow: var(--_box-shadow-active);
+  min-height: 28px;
+  min-width: 2px;
+}
+
+:host::part(icon-left-container),
+:host::part(icon-right-container) {
+  display: flex;
+  align-items: center;
+}
diff --git a/...s/components/src/components/telekom/telekom-mobile-menu-item/telekom-mobile-menu-item.tsx b/...s/components/src/components/telekom/telekom-mobile-menu-item/telekom-mobile-menu-item.tsx
@@ -0,0 +1,75 @@
+/**
+ * @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, h, Host, Element, Prop, State, Event } from '@stencil/core';
+import { HTMLStencilElement } from '@stencil/core/internal';
+import cx from 'classnames';
+import { emitEvent } from '../../../utils/utils';
+
+@Component({
+  tag: 'scale-telekom-mobile-menu-item',
+  styleUrl: 'telekom-mobile-menu-item.css',
+  shadow: true,
+})
+export class TelekomMobileMenuItem {
+  @Element() hostElement: HTMLStencilElement;
+
+  @Prop() open?: boolean = false;
+  @Prop() hideHeader?: boolean = false;
+  @Prop() active?: boolean = false;
+  @Prop() level?: string = '0';
+
+  @State() hasChildren?: boolean = false;
+
+  @Event({ eventName: 'scale-click-menu-item' }) scaleClickMenuItem;
+
+  componentWillRender() {
+    this.hasChildren = !!this.hostElement.querySelector('[slot="children"]');
+  }
+
+  render() {
+    return (
+      <Host
+        onClick={(e) => {
+          e.stopImmediatePropagation();
+          emitEvent(this, 'scaleClickMenuItem', e.detail);
+        }}
+      >
+        <nav
+          part={cx('base', `level-${this.level}`, {
+            open: this.open,
+            active: !this.open && this.active,
+          })}
+        >
+          <div
+            part={cx('header', {
+              hidden: this.hideHeader,
+            })}
+          >
+            <div part={cx('icon-left-container', {})}>
+              {this.open && (
+                <scale-icon-navigation-left></scale-icon-navigation-left>
+              )}
+            </div>
+
+            <slot></slot>
+            <div part="icon-right-container">
+              {this.hasChildren && !this.open && (
+                <scale-icon-navigation-right></scale-icon-navigation-right>
+              )}
+            </div>
+          </div>
+          {<slot name="children"></slot>}
+        </nav>
+      </Host>
+    );
+  }
+}
diff --git a/packages/components/src/components/telekom/telekom-mobile-menu/readme.md b/packages/components/src/components/telekom/telekom-mobile-menu/readme.md
@@ -0,0 +1,25 @@
+# scale-telekom-mobile-menu
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property        | Attribute         | Description | Type     | Default     |
+| --------------- | ----------------- | ----------- | -------- | ----------- |
+| `activeRouteId` | `active-route-id` |             | `string` | `undefined` |
+
+
+## Shadow Parts
+
+| Part        | Description |
+| ----------- | ----------- |
+| `"base"`    |             |
+| `"content"` |             |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
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
@@ -0,0 +1,17 @@
+:host {
+  --spacing: 16px;
+  --background: var(--telekom-color-background-canvas);
+  --max-width: 572px;
+}
+
+:host::part(base) {
+  padding: var(--spacing);
+  background: var(--background);
+  display: flex;
+  justify-content: center;
+}
+
+:host::part(content) {
+  max-width: var(--max-width);
+  width: 100%;
+}