HTMLElement` | `undefined` |
+| Property | Attribute | Description | Type | Default |
+| --------------------- | ----------------------- | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ---------------- |
+| `active` | `active` | | `boolean` | `false` |
+| `brandHeaderDropdown` | `brand-header-dropdown` | (optional) set to true when using in telekom-brand-header | `boolean` | `false` |
+| `closeOnSelect` | `close-on-select` | (optional) Determines whether the flyout should close when a menu item is selected | `boolean` | `true` |
+| `direction` | `direction` | (optional) Set preference for where the menu appears, space permitting | `"bottom-left" \| "bottom-right" \| "left" \| "right" \| "top-left" \| "top-right"` | `'bottom-right'` |
+| `opened` | `opened` | | `boolean` | `false` |
+| `preventFlipVertical` | `prevent-flip-vertical` | (optional) set to true to prevent flipping orientation when off the screen vertically | `boolean` | `false` |
+| `styles` | `styles` | (optional) Injected styles | `string` | `undefined` |
+| `trigger` | -- | | `() => HTMLElement` | `undefined` |
## Events
@@ -75,6 +76,7 @@ Type: `Promise`
- [scale-app-header](../telekom/app-header)
- [scale-data-grid](../data-grid)
- [scale-telekom-header-data-back-compat](../telekom/telekom-header-data-back-compat)
+ - [scale-telekom-profile-menu](../telekom/telekom-profile-menu)
### Graph
```mermaid
@@ -82,6 +84,7 @@ graph TD;
scale-app-header --> scale-menu-flyout-list
scale-data-grid --> scale-menu-flyout-list
scale-telekom-header-data-back-compat --> scale-menu-flyout-list
+ scale-telekom-profile-menu --> scale-menu-flyout-list
style scale-menu-flyout-list fill:#f9f,stroke:#333,stroke-width:4px
```
diff --git a/packages/components/src/components/menu-flyout/menu-flyout.tsx b/packages/components/src/components/menu-flyout/menu-flyout.tsx
index 88b7e332a3..ebefecb2b2 100644
--- a/packages/components/src/components/menu-flyout/menu-flyout.tsx
+++ b/packages/components/src/components/menu-flyout/menu-flyout.tsx
@@ -12,7 +12,7 @@
import { Component, Prop, h, Host, Element, Listen } from '@stencil/core';
import { isClickOutside } from '../../utils/utils';
-const MENU_SELECTOR = '[role="menu"]';
+const MENU_SELECTOR = '.scale-menu-flyout-list';
const isButtonOrLink = (el: HTMLElement) => {
if (
@@ -34,6 +34,8 @@ export class MenuFlyout {
/** (optional) Determines whether the flyout should close when a menu item is selected */
@Prop() closeOnSelect = true;
+ /** (optional) Determines whether the flyout trigger should get the aria-haspopup attribute */
+ @Prop() triggerHasPopup = true;
/** (optional) Set preference for where the menu appears, space permitting */
@Prop() direction:
| 'bottom-right'
@@ -152,7 +154,10 @@ export class MenuFlyout {
.concat([isButtonOrLink(this.trigger)])
.filter((x) => x != null);
triggers.forEach((el) => {
- el.setAttribute('aria-haspopup', 'true');
+ if (this.triggerHasPopup) {
+ el.setAttribute('aria-haspopup', 'true');
+ }
+ el.classList.add('scale-menu-trigger');
el.setAttribute('aria-expanded', 'false');
});
}
diff --git a/packages/components/src/components/menu-flyout/readme.md b/packages/components/src/components/menu-flyout/readme.md
index 568ac48ef4..4446644c89 100644
--- a/packages/components/src/components/menu-flyout/readme.md
+++ b/packages/components/src/components/menu-flyout/readme.md
@@ -7,11 +7,12 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| --------------- | ----------------- | ---------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ---------------- |
-| `closeOnSelect` | `close-on-select` | (optional) Determines whether the flyout should close when a menu item is selected | `boolean` | `true` |
-| `direction` | `direction` | (optional) Set preference for where the menu appears, space permitting | `"bottom-left" \| "bottom-right" \| "left" \| "right" \| "top-left" \| "top-right"` | `'bottom-right'` |
-| `styles` | `styles` | (optional) Injected styles | `string` | `undefined` |
+| Property | Attribute | Description | Type | Default |
+| ----------------- | ------------------- | --------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ---------------- |
+| `closeOnSelect` | `close-on-select` | (optional) Determines whether the flyout should close when a menu item is selected | `boolean` | `true` |
+| `direction` | `direction` | (optional) Set preference for where the menu appears, space permitting | `"bottom-left" \| "bottom-right" \| "left" \| "right" \| "top-left" \| "top-right"` | `'bottom-right'` |
+| `styles` | `styles` | (optional) Injected styles | `string` | `undefined` |
+| `triggerHasPopup` | `trigger-has-popup` | (optional) Determines whether the flyout trigger should get the aria-haspopup attribute | `boolean` | `true` |
## Shadow Parts
@@ -28,6 +29,7 @@
- [scale-app-header](../telekom/app-header)
- [scale-data-grid](../data-grid)
- [scale-telekom-header-data-back-compat](../telekom/telekom-header-data-back-compat)
+ - [scale-telekom-profile-menu](../telekom/telekom-profile-menu)
### Graph
```mermaid
@@ -35,6 +37,7 @@ graph TD;
scale-app-header --> scale-menu-flyout
scale-data-grid --> scale-menu-flyout
scale-telekom-header-data-back-compat --> scale-menu-flyout
+ scale-telekom-profile-menu --> scale-menu-flyout
style scale-menu-flyout fill:#f9f,stroke:#333,stroke-width:4px
```
diff --git a/packages/components/src/components/telekom/app-navigation-user-menu/app-navigation-user-menu.tsx b/packages/components/src/components/telekom/app-navigation-user-menu/app-navigation-user-menu.tsx
index dd4b7c0f99..d46c24ff23 100644
--- a/packages/components/src/components/telekom/app-navigation-user-menu/app-navigation-user-menu.tsx
+++ b/packages/components/src/components/telekom/app-navigation-user-menu/app-navigation-user-menu.tsx
@@ -29,6 +29,7 @@ export class AppNavigationUserMenu {
@Element() hostElement: HTMLElement;
@Prop() hide: () => void;
@Prop() navigation: any;
+ @Prop() styles: string;
@Event({
eventName: 'closeMenu',
composed: true,
@@ -40,7 +41,10 @@ export class AppNavigationUserMenu {
render() {
return (
+ {this.styles && }
+
+
@@ -71,6 +78,7 @@ export class AppNavigationUserMenu {
target={item.target || '_self'}
tabindex={0}
class="app-navigation-user-menu__item"
+ part="item"
onClick={(e) => {
e.stopImmediatePropagation();
if (item.onClick) {
@@ -117,6 +125,7 @@ export class AppNavigationUserMenu {
return (
{
if (item.onClick) {
item.onClick(e);
diff --git a/packages/components/src/components/telekom/app-navigation-user-menu/readme.md b/packages/components/src/components/telekom/app-navigation-user-menu/readme.md
index 634670b43e..4b1c724ffd 100644
--- a/packages/components/src/components/telekom/app-navigation-user-menu/readme.md
+++ b/packages/components/src/components/telekom/app-navigation-user-menu/readme.md
@@ -11,6 +11,7 @@
| ------------ | ------------ | ----------- | ------------ | ----------- |
| `hide` | -- | | `() => void` | `undefined` |
| `navigation` | `navigation` | | `any` | `undefined` |
+| `styles` | `styles` | | `string` | `undefined` |
## Events
@@ -24,7 +25,10 @@
| Part | Description |
| ------------------- | ----------- |
+| `"button"` | |
+| `"item"` | |
| `"rule-horizontal"` | |
+| `"userinfo"` | |
## Dependencies
@@ -33,6 +37,7 @@
- [scale-app-header](../app-header)
- [scale-telekom-header-data-back-compat](../telekom-header-data-back-compat)
+ - [scale-telekom-profile-menu](../telekom-profile-menu)
### Depends on
@@ -46,6 +51,7 @@ graph TD;
app-navigation-user-menu --> scale-icon
scale-app-header --> app-navigation-user-menu
scale-telekom-header-data-back-compat --> app-navigation-user-menu
+ scale-telekom-profile-menu --> app-navigation-user-menu
style app-navigation-user-menu fill:#f9f,stroke:#333,stroke-width:4px
```
diff --git a/packages/components/src/components/telekom/telekom-header/telekom-header.css b/packages/components/src/components/telekom/telekom-header/telekom-header.css
index 5aee66076c..ac4e17224b 100644
--- a/packages/components/src/components/telekom/telekom-header/telekom-header.css
+++ b/packages/components/src/components/telekom/telekom-header/telekom-header.css
@@ -262,7 +262,7 @@ slot[name='logo'] {
display: var(--_display-meta-nav-external);
flex: 1;
}
-[part~='meta-nav-external'] {
+[part~='meta-nav'] {
display: var(--_display-meta-nav);
/* TODO inline margin */
}
@@ -301,6 +301,10 @@ slot[name='functions'] {
slot[name='functions'] {
padding-top: var(--telekom-spacing-composition-space-10);
}
+ :host([scrolled]) slot[name='functions'],
+ :host([scrolled]) slot[name='main-nav'] {
+ padding-top: var(--telekom-spacing-composition-space-02);
+ }
}
[part~='base'] {
diff --git a/packages/components/src/components/telekom/telekom-mobile-flyout-canvas/readme.md b/packages/components/src/components/telekom/telekom-mobile-flyout-canvas/readme.md
index 43e2f57edb..c847f85840 100644
--- a/packages/components/src/components/telekom/telekom-mobile-flyout-canvas/readme.md
+++ b/packages/components/src/components/telekom/telekom-mobile-flyout-canvas/readme.md
@@ -40,6 +40,7 @@
### Used by
- [scale-telekom-header-data-back-compat](../telekom-header-data-back-compat)
+ - [scale-telekom-profile-menu](../telekom-profile-menu)
### Depends on
@@ -50,6 +51,7 @@
graph TD;
scale-telekom-mobile-flyout-canvas --> scale-icon-action-close
scale-telekom-header-data-back-compat --> scale-telekom-mobile-flyout-canvas
+ scale-telekom-profile-menu --> scale-telekom-mobile-flyout-canvas
style scale-telekom-mobile-flyout-canvas fill:#f9f,stroke:#333,stroke-width:4px
```
diff --git a/packages/components/src/components/telekom/telekom-nav-flyout/readme.md b/packages/components/src/components/telekom/telekom-nav-flyout/readme.md
index 22b5782a81..fce9ca6d10 100644
--- a/packages/components/src/components/telekom/telekom-nav-flyout/readme.md
+++ b/packages/components/src/components/telekom/telekom-nav-flyout/readme.md
@@ -50,11 +50,13 @@ Type: `Promise`
### Used by
- [scale-telekom-header-data-back-compat](../telekom-header-data-back-compat)
+ - [scale-telekom-profile-menu](../telekom-profile-menu)
### Graph
```mermaid
graph TD;
scale-telekom-header-data-back-compat --> scale-telekom-nav-flyout
+ scale-telekom-profile-menu --> scale-telekom-nav-flyout
style scale-telekom-nav-flyout fill:#f9f,stroke:#333,stroke-width:4px
```
diff --git a/packages/components/src/components/telekom/telekom-nav-item/readme.md b/packages/components/src/components/telekom/telekom-nav-item/readme.md
index b988756be2..36e7419079 100644
--- a/packages/components/src/components/telekom/telekom-nav-item/readme.md
+++ b/packages/components/src/components/telekom/telekom-nav-item/readme.md
@@ -21,11 +21,13 @@
### Used by
- [scale-telekom-header-data-back-compat](../telekom-header-data-back-compat)
+ - [scale-telekom-profile-menu](../telekom-profile-menu)
### Graph
```mermaid
graph TD;
scale-telekom-header-data-back-compat --> scale-telekom-nav-item
+ scale-telekom-profile-menu --> scale-telekom-nav-item
style scale-telekom-nav-item fill:#f9f,stroke:#333,stroke-width:4px
```
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 9f401a3bc4..ab7246040f 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
@@ -12,14 +12,14 @@
@import url('../../../global/custom-media.css');
/*
- Spacing is handled only vertically.
- Horizontal spacing is handled by `scale-nav-list`.
-*/
+ Spacing is handled only vertically.
+ Horizontal spacing is handled by `scale-nav-list`.
+ */
/*
- TODO this is experimental (mostly the name)
- it should be put in global.css since it's already global haha
-*/
+ TODO this is experimental (mostly the name)
+ it should be put in global.css since it's already global haha
+ */
@media screen and (--not-lg) {
.scl-hide-on-mobile {
display: none;
@@ -237,7 +237,6 @@
> .scale-telekom-nav-item
> :where(a, button):active:after {
content: '';
- width: 100%;
height: var(--telekom-spacing-composition-space-02);
background: var(--telekom-color-text-and-icon-primary-pressed);
display: block;
@@ -356,6 +355,11 @@
width: 20px;
}
+.scale-telekom-nav-list[variant='functions'] [slot='dot'] .scale-icon {
+ height: 12px;
+ width: 12px;
+}
+
@media screen and (--2xl) {
.scale-telekom-nav-list[variant='functions'] .scale-icon {
height: 24px;
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
index 004410b0b9..abf898fc15 100644
--- 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
@@ -70,7 +70,7 @@ export class TelekomNavItem {
const child = Array.from(this.hostElement.children).find((el) =>
el.matches('a, button')
);
- const parentRole = this.hostElement.parentElement.getAttribute('role');
+ const parentRole = this.hostElement.parentElement?.getAttribute('role');
if (parentRole === 'menu') {
child.setAttribute('role', 'menuitem');
}
diff --git a/packages/components/src/components/telekom/telekom-profile-menu/readme.md b/packages/components/src/components/telekom/telekom-profile-menu/readme.md
new file mode 100644
index 0000000000..09d31538a8
--- /dev/null
+++ b/packages/components/src/components/telekom/telekom-profile-menu/readme.md
@@ -0,0 +1,73 @@
+# scale-telekom-profile-menu
+
+
+
+
+
+
+## Properties
+
+| Property | Attribute | Description | Type | Default |
+| ----------------------------- | -------------------------------- | ----------- | --------- | ----------- |
+| `accessibilityLabel` | `accessibility-label` | | `string` | `undefined` |
+| `appName` | `app-name` | | `string` | `undefined` |
+| `closeMenuAccessibilityLabel` | `close-menu-accessibility-label` | | `string` | `undefined` |
+| `hideLoginSettings` | `hide-login-settings` | | `boolean` | `undefined` |
+| `label` | `label` | | `string` | `undefined` |
+| `loggedIn` | `logged-in` | | `boolean` | `undefined` |
+| `loginHelpLabel` | `login-help-label` | | `string` | `undefined` |
+| `loginHelpUrl` | `login-help-url` | | `string` | `undefined` |
+| `loginLabel` | `login-label` | | `string` | `undefined` |
+| `loginSettingsLabel` | `login-settings-label` | | `string` | `undefined` |
+| `loginSettingsUrl` | `login-settings-url` | | `string` | `undefined` |
+| `loginUrl` | `login-url` | | `string` | `undefined` |
+| `logoutLabel` | `logout-label` | | `string` | `undefined` |
+| `logoutUrl` | `logout-url` | | `string` | `undefined` |
+| `registerHeadline` | `register-headline` | | `string` | `undefined` |
+| `registerLabel` | `register-label` | | `string` | `undefined` |
+| `registerUrl` | `register-url` | | `string` | `undefined` |
+| `serviceDescription` | `service-description` | | `string` | `undefined` |
+| `serviceLinks` | `service-links` | | `any` | `undefined` |
+| `serviceName` | `service-name` | | `string` | `undefined` |
+| `userInfo` | `user-info` | | `any` | `undefined` |
+
+
+## Dependencies
+
+### Depends on
+
+- [scale-button](../../button)
+- [scale-link](../../link)
+- [scale-icon-user-file-user](../../icons/user-file-user)
+- [scale-badge](../../badge)
+- [scale-icon-action-checkmark](../../icons/action-checkmark)
+- [scale-telekom-nav-item](../telekom-nav-item)
+- [scale-menu-flyout](../../menu-flyout)
+- [scale-menu-flyout-list](../../menu-flyout-list)
+- [app-navigation-user-menu](../app-navigation-user-menu)
+- [scale-telekom-nav-flyout](../telekom-nav-flyout)
+- [scale-telekom-mobile-flyout-canvas](../telekom-mobile-flyout-canvas)
+
+### Graph
+```mermaid
+graph TD;
+ scale-telekom-profile-menu --> scale-button
+ scale-telekom-profile-menu --> scale-link
+ scale-telekom-profile-menu --> scale-icon-user-file-user
+ scale-telekom-profile-menu --> scale-badge
+ scale-telekom-profile-menu --> scale-icon-action-checkmark
+ scale-telekom-profile-menu --> scale-telekom-nav-item
+ scale-telekom-profile-menu --> scale-menu-flyout
+ scale-telekom-profile-menu --> scale-menu-flyout-list
+ scale-telekom-profile-menu --> app-navigation-user-menu
+ scale-telekom-profile-menu --> scale-telekom-nav-flyout
+ scale-telekom-profile-menu --> scale-telekom-mobile-flyout-canvas
+ app-navigation-user-menu --> scale-button
+ app-navigation-user-menu --> scale-icon
+ scale-telekom-mobile-flyout-canvas --> scale-icon-action-close
+ style scale-telekom-profile-menu fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/telekom/telekom-profile-menu/telekom-profile-menu.css b/packages/components/src/components/telekom/telekom-profile-menu/telekom-profile-menu.css
new file mode 100644
index 0000000000..880e05a2a8
--- /dev/null
+++ b/packages/components/src/components/telekom/telekom-profile-menu/telekom-profile-menu.css
@@ -0,0 +1,267 @@
+/**
+ * @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 url('../../../global/custom-media.css');
+scale-telekom-profile-menu scale-menu-flyout {
+ display: flex;
+ height: 100%;
+
+ > a {
+ box-sizing: border-box;
+ display: flex;
+ align-items: flex-end;
+ height: 100%;
+ position: relative;
+ font: inherit;
+ color: inherit;
+ background: none;
+ appearance: none;
+ padding: 0 0 var(--_spacing-bottom-slotted-bottom) 0;
+ border: none;
+ text-decoration: none;
+ cursor: pointer;
+ transition: padding-bottom var(--telekom-motion-duration-immediate)
+ var(--telekom-motion-easing-standard);
+
+ line-height: var(--telekom-typography-line-spacing-loose);
+ font-weight: var(--telekom-typography-font-weight-extra-bold);
+
+ > .flyout-label {
+ font-size: var(--scl-font-size-12);
+ font-weight: var(--telekom-typography-font-weight-regular);
+ margin-left: var(--scl-spacing-8);
+ }
+ }
+
+ > a:hover,
+ > a:hover svg {
+ color: var(--telekom-color-text-and-icon-primary-hovered);
+ }
+
+ > a[aria-expanded='true'],
+ > a[aria-expanded='true'] svg {
+ color: var(--telekom-color-text-and-icon-primary-standard);
+ }
+
+ > a[aria-expanded='true'] .flyout-label {
+ color: var(--telekom-color-text-and-icon-standard);
+ }
+}
+
+.user-menu-mobile {
+ display: flex;
+ height: 100%;
+}
+.user-menu-mobile .flyout-label [aria-hidden='true'] {
+ display: none;
+}
+.user-menu-mobile .mydot .scale-icon {
+ width: 12px;
+ height: 12px;
+}
+
+.scale-telekom-nav-item > button {
+ padding-bottom: var(--_spacing-bottom-slotted-bottom);
+}
+
+.user-menu-desktop {
+ display: none;
+}
+
+.user-menu-desktop scale-menu-flyout {
+ display: flex;
+}
+
+.user-menu-trigger {
+ position: relative;
+ left: 24px;
+}
+
+@media screen and (--md) {
+ .user-menu-trigger {
+ top: calc(var(--_spacing-bottom-slotted-bottom) + 8px);
+ }
+}
+
+@media screen and (--lg) {
+ .user-menu-mobile {
+ display: none;
+ }
+
+ .user-menu-desktop {
+ display: flex;
+ height: 100%;
+ }
+
+ scale-telekom-profile-menu scale-menu-flyout-list::part(base) {
+ top: calc(100% + var(--telekom-spacing-composition-space-03) - 16px);
+ }
+}
+
+@media screen and (--xl) {
+ scale-telekom-header-data-back-compat .user-menu-trigger {
+ top: calc(var(--_spacing-bottom-slotted-bottom) + 12px);
+ }
+}
+
+.profile-menu-login {
+ min-width: 15em;
+ padding-right: var(--telekom-spacing-composition-space-06);
+
+ > scale-button {
+ display: block;
+ --width: 100%;
+ margin: 1.5em 0;
+ }
+}
+
+.profile-menu-login > strong {
+ display: flex;
+ font: var(--telekom-text-style-heading-5);
+ padding: var(--telekom-spacing-composition-space-04) 0;
+}
+@media screen and (--md) {
+ .profile-menu-login > strong {
+ padding-top: var(--telekom-spacing-composition-space-10);
+ }
+ .profile-menu-login .footer {
+ padding-top: var(--telekom-spacing-composition-space-04);
+ }
+}
+@media screen and (--lg) {
+ .profile-menu-login {
+ padding: 12px 24px 4px 24px;
+ }
+ .profile-menu-login > strong {
+ padding-top: 0;
+ }
+ .profile-menu-login > scale-button {
+ margin: 16px 0;
+ }
+ .profile-menu-login .footer {
+ padding-top: 0;
+ }
+}
+
+.profile-menu-login p {
+ line-height: 1.4em;
+ color: var(--telekom-color-text-and-icon-additional);
+ margin: 0;
+}
+.profile-menu-login #signUp {
+ margin-top: var(--telekom-spacing-composition-space-04);
+}
+.profile-menu-login #signUp p {
+ margin: 0;
+}
+
+.scale-telekom-nav-list[variant='functions']::part(circle) .scale-icon {
+ height: 12px;
+ width: 12px;
+}
+
+.mydot {
+ background: var(--telekom-color-functional-success-standard);
+ border: 2px solid #fff;
+ border-radius: 50%;
+ color: #fff;
+ display: flex;
+ height: 12px;
+ width: 12px;
+ position: absolute;
+ top: -4px;
+ right: -6px;
+}
+scale-telekom-profile-menu scale-menu-flyout a .mydot .scale-icon {
+ color: #fff !important;
+ height: 12px;
+ width: 12px;
+}
+
+app-navigation-user-menu {
+ --color-divider: transparent;
+}
+
+app-navigation-user-menu::part(userInfo) {
+ margin: 0;
+}
+app-navigation-user-menu::part(userInfo)
+ .app-navigation-user-menu__user-info--name {
+ margin-bottom: 0;
+}
+
+app-navigation-user-menu::part(rule-horizontal) {
+ visibility: hidden;
+ margin: var(--telekom-spacing-composition-space-05) 0;
+}
+
+@media screen and (--md) {
+ app-navigation-user-menu::part(userInfo) {
+ padding-top: var(--telekom-spacing-composition-space-08);
+ }
+ app-navigation-user-menu::part(rule-horizontal) {
+ margin: var(--telekom-spacing-composition-space-08) 0
+ var(--telekom-spacing-composition-space-06) 0;
+ }
+}
+
+app-navigation-user-menu::part(item) {
+ margin-top: var(--telekom-spacing-composition-space-05);
+ margin-bottom: var(--telekom-spacing-composition-space-05);
+ padding: 0;
+ border-top: 1px solid transparent;
+ border-bottom: 1px solid transparent;
+}
+
+app-navigation-user-menu::part(button) {
+ padding-top: 0;
+ padding-left: 0;
+}
+@media screen and (--md) {
+ app-navigation-user-menu::part(button) {
+ margin-top: -10px;
+ }
+}
+
+@media screen and (--lg) {
+ app-navigation-user-menu::part(item) {
+ line-height: 200%;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ padding-top: 0;
+ padding-bottom: 0;
+ border: 0;
+ }
+
+ app-navigation-user-menu::part(userInfo) {
+ padding-top: 0;
+ }
+ app-navigation-user-menu::part(rule-horizontal) {
+ padding-top: 16px;
+ padding-bottom: 6px;
+ margin: 0;
+ }
+ app-navigation-user-menu::part(button) {
+ margin-top: 7px;
+ padding-bottom: 0;
+ }
+}
+
+.visually-hidden {
+ /* see https://www.a11yproject.com/posts/how-to-hide-content/ */
+ clip: rect(0 0 0 0);
+ clip-path: inset(50%);
+ height: 1px;
+ overflow: hidden;
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
+}
diff --git a/packages/components/src/components/telekom/telekom-profile-menu/telekom-profile-menu.tsx b/packages/components/src/components/telekom/telekom-profile-menu/telekom-profile-menu.tsx
new file mode 100644
index 0000000000..99b72b80ba
--- /dev/null
+++ b/packages/components/src/components/telekom/telekom-profile-menu/telekom-profile-menu.tsx
@@ -0,0 +1,343 @@
+/**
+ * @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,
+ Prop,
+ h,
+ Host,
+ Element,
+ State,
+ Listen,
+} from '@stencil/core';
+
+const LOGIN_DEFAULT = 'https://www.telekom.de';
+const LOGIN_HELP_DEFAULT = 'https://www.telekom.de';
+const REGISTER_DEFAULT = 'https://www.telekom.de';
+
+const LOGIN_SETTINGS_DEFAULT =
+ 'https://account.idm.telekom.com/account-manager/';
+const LOGOUT_DEFAULT =
+ 'https://accounts.login.idm.telekom.com/sessionmessage/logout';
+
+const readData = (data) => {
+ let parsedData;
+
+ try {
+ parsedData = JSON.parse(data);
+ } catch (error) {
+ // console.error("Error parsing data! error: " + error);
+ // console.error("data: " + data);
+ parsedData = data;
+ }
+
+ return parsedData;
+};
+
+@Component({
+ tag: 'scale-telekom-profile-menu',
+ styleUrl: 'telekom-profile-menu.css',
+ shadow: false,
+})
+export class TelekomProfileMenu {
+ @Element() hostElement: HTMLElement;
+
+ userMenuDesktopTrigger?: HTMLSpanElement;
+
+ @Prop() label: string;
+ @Prop() accessibilityLabel?: string;
+
+ @Prop() closeMenuAccessibilityLabel: string;
+
+ @Prop() appName: string;
+ @Prop() serviceName: string;
+ @Prop() serviceDescription: string;
+ @Prop() loggedIn: boolean;
+
+ @Prop() loginUrl?: string;
+ @Prop() loginLabel: string;
+
+ @Prop() loginHelpUrl?: string;
+ @Prop() loginHelpLabel: string;
+
+ @Prop() registerHeadline: string;
+ @Prop() registerUrl?: string;
+ @Prop() registerLabel: string;
+
+ @Prop() userInfo: any;
+ @Prop() serviceLinks: any;
+
+ @Prop() loginSettingsLabel?: string;
+ @Prop() loginSettingsUrl?: string;
+ @Prop() hideLoginSettings: boolean;
+
+ @Prop() logoutLabel: string;
+ @Prop() logoutUrl?: string;
+
+ @State()
+ menuOpen = false;
+
+ @Listen('keydown')
+ onKeydown(event: KeyboardEvent) {
+ if (this.menuOpen && 'Escape' === event.key) {
+ this.userMenuDesktopTrigger.click();
+ }
+ }
+
+ openMenu(event: any) {
+ if (event.target.id === 'user-menu-desktop') {
+ this.menuOpen = true;
+ }
+ }
+
+ closeMenu(event: any) {
+ if (event.target.id === 'user-menu-desktop') {
+ this.menuOpen = false;
+ }
+ }
+
+ printSignInMenu() {
+ return (
+
+ );
+ }
+
+ printProfileTrigger() {
+ if (!this.loggedIn) {
+ return (
+
+
+ );
+ }
+
+ buildUserNavigation() {
+ const divider = [{ type: 'divider' }];
+
+ const userInfo = readData(this.userInfo);
+ if (!userInfo) {
+ // console.error("userInfo missing");
+ }
+ userInfo.type = 'userInfo';
+
+ let serviceLinks = readData(this.serviceLinks);
+ if (!serviceLinks) {
+ // console.error("serviceLinks missing");
+ serviceLinks = [];
+ }
+
+ for (const el of serviceLinks) {
+ el.type = 'item';
+ }
+
+ const loginSettings = {
+ type: 'item',
+ name: this.loginSettingsLabel || 'Login-Settings',
+ href: this.loginSettingsUrl || LOGIN_SETTINGS_DEFAULT,
+ icon: 'service-settings',
+ };
+
+ const logout = {
+ type: 'button',
+ name: this.logoutLabel,
+ href: this.logoutUrl || LOGOUT_DEFAULT,
+ variant: 'secondary',
+ };
+
+ let menu = [];
+
+ menu = menu.concat(userInfo);
+
+ if (!this.serviceLinksEmpty()) {
+ menu = menu.concat(divider);
+ }
+
+ menu = menu.concat(serviceLinks);
+
+ if (!this.hideLoginSettings) {
+ menu = menu.concat(loginSettings);
+ }
+ if (!this.serviceLinksEmpty()) {
+ menu = menu.concat(divider);
+ }
+
+ menu = menu.concat(logout);
+
+ return menu;
+ }
+
+ serviceLinksEmpty() {
+ return (this.hideLoginSettings && this.serviceLinks.length < 1) === true;
+ }
+
+ buildDesktopMenuStyles() {
+ let style =
+ '.app-navigation-user-menu { padding: 12px 24px 4px 24px; box-sizing: border-box; }';
+ style +=
+ '.scale-icon { width: 20px; height: 20px; display: flex; align-self: center; }';
+
+ if (this.serviceLinksEmpty()) {
+ style += 'scale-button { margin-top: 32px !important; }';
+ }
+
+ return style;
+ }
+
+ buildMobileMenuStyles() {
+ let style =
+ '.app-navigation-user-menu__user-info--name { margin-bottom: 0 !important; }';
+ style += '.scale-icon { width: 20px; height: 20px; }';
+
+ if (this.serviceLinksEmpty()) {
+ style += 'scale-button { margin-top: 32px !important; }';
+ }
+
+ return style;
+ }
+
+ printLabel() {
+ if (!this.accessibilityLabel) {
+ return {this.label};
+ }
+
+ return (
+
+
+ this.openMenu(event)}
+ onScale-close={(event: any) => this.closeMenu(event)}
+ triggerHasPopup={false}
+ >
+
+ {this.printProfileTrigger()}
+ {this.printLabel()}
+
+
+
+ {this.loggedIn && [
+ {
+ this.userMenuDesktopTrigger.click();
+ }}
+ navigation={this.buildUserNavigation()}
+ styles={this.buildDesktopMenuStyles()}
+ > ,
+ ]}
+
+ {!this.loggedIn && [
+
+ {this.printSignInMenu()}
+ ,
+ ]}
+
+
+
+
+
+
+
+
+
+
+ {this.loggedIn && [
+
+ {this.printSignInMenu()}
+ ,
+ ]}
+
+
+
+
+ );
+ }
+}
diff --git a/packages/components/src/global/legacy-scale-design-tokens.css b/packages/components/src/global/legacy-scale-design-tokens.css
new file mode 100644
index 0000000000..36fec4ef50
--- /dev/null
+++ b/packages/components/src/global/legacy-scale-design-tokens.css
@@ -0,0 +1,407 @@
+:root {
+ /* SPACING */
+ --scl-spacing-1: 0.0625rem;
+ --scl-spacing-2: 0.125rem;
+ --scl-spacing-4: 0.25rem;
+ --scl-spacing-8: 0.5rem;
+ --scl-spacing-12: 0.75rem;
+ --scl-spacing-16: 1rem;
+ --scl-spacing-24: 1.5rem;
+ --scl-spacing-32: 2rem;
+ --scl-spacing-40: 2.5rem;
+ --scl-spacing-48: 3rem;
+ --scl-spacing-64: 4rem;
+ --scl-spacing-80: 5rem;
+ /* FONT */
+ --scl-font-family-sans: TeleNeoWeb, sans-serif;
+ --scl-font-family-mono: monospace;
+ --scl-font-size-10: 0.625rem;
+ --scl-font-size-12: 0.75rem;
+ --scl-font-size-14: 0.875rem;
+ --scl-font-size-16: 1rem;
+ --scl-font-size-20: 1.25rem;
+ --scl-font-size-24: 1.5rem;
+ --scl-font-size-32: 2rem;
+ --scl-font-size-40: 2.5rem;
+ --scl-font-size-56: 3.5rem;
+ --scl-font-weight-thin: 200;
+ --scl-font-weight-regular: 400;
+ --scl-font-weight-medium: 500;
+ --scl-font-weight-bold: 700;
+ --scl-font-weight-extrabold: 800;
+ --scl-font-line-height-114: 114%;
+ --scl-font-line-height-120: 120%;
+ --scl-font-line-height-125: 125%;
+ --scl-font-line-height-133: 133%;
+ --scl-font-line-height-150: 150%;
+ --scl-font-line-height-160: 160%;
+ /* FONT-VARIANT */
+ --scl-font-variant-body-family: TeleNeoWeb, sans-serif;
+ --scl-font-variant-body-size: 1rem;
+ --scl-font-variant-body-weight: 500;
+ --scl-font-variant-body-line-height: 150%;
+ --scl-font-variant-body-letter-spacing: normal;
+ --scl-font-variant-body-short-family: TeleNeoWeb, sans-serif;
+ --scl-font-variant-body-short-size: 1rem;
+ --scl-font-variant-body-short-weight: 500;
+ --scl-font-variant-body-short-line-height: 125%;
+ --scl-font-variant-body-short-letter-spacing: normal;
+ --scl-font-variant-body-large-family: TeleNeoWeb, sans-serif;
+ --scl-font-variant-body-large-size: 1.25rem;
+ --scl-font-variant-body-large-weight: 500;
+ --scl-font-variant-body-large-line-height: 160%;
+ --scl-font-variant-body-large-letter-spacing: normal;
+ --scl-font-variant-smaller-family: TeleNeoWeb, sans-serif;
+ --scl-font-variant-smaller-size: 0.75rem;
+ --scl-font-variant-smaller-weight: 500;
+ --scl-font-variant-smaller-line-height: 125%;
+ --scl-font-variant-smaller-letter-spacing: normal;
+ --scl-font-variant-label-family: TeleNeoWeb, sans-serif;
+ --scl-font-variant-label-size: 0.75rem;
+ --scl-font-variant-label-weight: 500;
+ --scl-font-variant-label-line-height: 120%;
+ --scl-font-variant-label-letter-spacing: normal;
+ --scl-font-variant-caption-family: TeleNeoWeb, sans-serif;
+ --scl-font-variant-caption-size: 0.75rem;
+ --scl-font-variant-caption-weight: 500;
+ --scl-font-variant-caption-line-height: 133%;
+ --scl-font-variant-caption-letter-spacing: normal;
+ --scl-font-variant-heading-6-family: TeleNeoWeb, sans-serif;
+ --scl-font-variant-heading-6-size: 1rem;
+ --scl-font-variant-heading-6-weight: 700;
+ --scl-font-variant-heading-6-line-height: 150%;
+ --scl-font-variant-heading-6-letter-spacing: normal;
+ --scl-font-variant-heading-5-family: TeleNeoWeb, sans-serif;
+ --scl-font-variant-heading-5-size: 1.25rem;
+ --scl-font-variant-heading-5-weight: 800;
+ --scl-font-variant-heading-5-line-height: 125%;
+ --scl-font-variant-heading-5-letter-spacing: normal;
+ --scl-font-variant-heading-4-family: TeleNeoWeb, sans-serif;
+ --scl-font-variant-heading-4-size: 1.5rem;
+ --scl-font-variant-heading-4-weight: 800;
+ --scl-font-variant-heading-4-line-height: 133%;
+ --scl-font-variant-heading-4-letter-spacing: normal;
+ --scl-font-variant-heading-3-family: TeleNeoWeb, sans-serif;
+ --scl-font-variant-heading-3-size: 2rem;
+ --scl-font-variant-heading-3-weight: 800;
+ --scl-font-variant-heading-3-line-height: 125%;
+ --scl-font-variant-heading-3-letter-spacing: normal;
+ --scl-font-variant-heading-2-family: TeleNeoWeb, sans-serif;
+ --scl-font-variant-heading-2-size: 2.5rem;
+ --scl-font-variant-heading-2-weight: 800;
+ --scl-font-variant-heading-2-line-height: 120%;
+ --scl-font-variant-heading-2-letter-spacing: normal;
+ --scl-font-variant-heading-1-family: TeleNeoWeb, sans-serif;
+ --scl-font-variant-heading-1-size: 3.5rem;
+ --scl-font-variant-heading-1-weight: 800;
+ --scl-font-variant-heading-1-line-height: 114%;
+ --scl-font-variant-heading-1-letter-spacing: normal;
+ /* COLOR */
+ --scl-color-primary: hsl(329.20000000000005, 100%, 44.3%);
+ --scl-color-black: hsl(0, 0%, 0%);
+ --scl-color-white: hsl(0, 0%, 100%);
+ --scl-color-grey-0: hsl(0, 0%, 94.9%);
+ --scl-color-grey-10: hsl(0, 0%, 89.8%);
+ --scl-color-grey-20: hsl(0, 0%, 80%);
+ --scl-color-grey-30: hsl(0, 0%, 69.8%);
+ --scl-color-grey-40: hsl(0, 0%, 60%);
+ --scl-color-grey-50: hsl(0, 0%, 49.8%);
+ --scl-color-grey-60: hsl(0, 0%, 40%);
+ --scl-color-grey-70: hsl(0, 0%, 29.8%);
+ --scl-color-grey-80: hsl(0, 0%, 20%);
+ --scl-color-grey-90: hsl(0, 0%, 9.8%);
+ --scl-color-grey-100: hsl(0, 0%, 0%);
+ --scl-color-orange-0: hsl(54.39999999999998, 100%, 93.7%);
+ --scl-color-orange-10: hsl(48.39999999999998, 100%, 88.8%);
+ --scl-color-orange-20: hsl(43.69999999999999, 100%, 84.1%);
+ --scl-color-orange-30: hsl(38.69999999999999, 100%, 79.6%);
+ --scl-color-orange-40: hsl(33.5, 100%, 75.1%);
+ --scl-color-orange-50: hsl(29, 100%, 70.8%);
+ --scl-color-orange-60: hsl(24.80000000000001, 96.5%, 66.1%);
+ --scl-color-orange-70: hsl(17.30000000000001, 71.4%, 56.1%);
+ --scl-color-orange-80: hsl(17.30000000000001, 72.3%, 39.6%);
+ --scl-color-orange-90: hsl(17.30000000000001, 88.8%, 31.4%);
+ --scl-color-orange-100: hsl(11.399999999999977, 86.6%, 26.3%);
+ --scl-color-red-0: hsl(353.79999999999995, 100%, 88.6%);
+ --scl-color-red-10: hsl(351.5, 100%, 83.3%);
+ --scl-color-red-20: hsl(350.4, 98.1%, 78.8%);
+ --scl-color-red-30: hsl(350.6, 91%, 73.9%);
+ --scl-color-red-40: hsl(350.4, 85.1%, 68.4%);
+ --scl-color-red-50: hsl(350.29999999999995, 82.8%, 63.5%);
+ --scl-color-red-60: hsl(351.20000000000005, 82.6%, 59.4%);
+ --scl-color-red-70: hsl(349.70000000000005, 69%, 50.6%);
+ --scl-color-red-80: hsl(348.9, 74.9%, 43.7%);
+ --scl-color-red-90: hsl(347.1, 84%, 36.9%);
+ --scl-color-red-100: hsl(345.9, 100%, 30%);
+ --scl-color-blue-0: hsl(190.20000000000005, 100%, 92%);
+ --scl-color-blue-10: hsl(196.20000000000005, 100%, 85.5%);
+ --scl-color-blue-20: hsl(200.89999999999998, 100%, 79.2%);
+ --scl-color-blue-30: hsl(206, 100%, 73.3%);
+ --scl-color-blue-40: hsl(210.70000000000005, 100%, 67.5%);
+ --scl-color-blue-50: hsl(215.60000000000002, 100%, 62%);
+ --scl-color-blue-60: hsl(220, 100%, 56.5%);
+ --scl-color-blue-70: hsl(227.39999999999998, 89%, 46.3%);
+ --scl-color-blue-80: hsl(236.5, 100%, 37.5%);
+ --scl-color-blue-90: hsl(241.10000000000002, 100%, 31.2%);
+ --scl-color-blue-100: hsl(249.39999999999998, 100%, 25.1%);
+ --scl-color-teal-0: hsl(176.10000000000002, 63.3%, 90.4%);
+ --scl-color-teal-10: hsl(178.89999999999998, 60%, 82.4%);
+ --scl-color-teal-20: hsl(180, 58.5%, 74.5%);
+ --scl-color-teal-30: hsl(181.20000000000005, 57.6%, 66.7%);
+ --scl-color-teal-40: hsl(182.10000000000002, 55.2%, 58.8%);
+ --scl-color-teal-50: hsl(183.60000000000002, 53.8%, 50.8%);
+ --scl-color-teal-60: hsl(184.79999999999995, 68.9%, 42.9%);
+ --scl-color-teal-70: hsl(182.89999999999998, 80.1%, 35.5%);
+ --scl-color-teal-80: hsl(180.5, 91.5%, 27.8%);
+ --scl-color-teal-90: hsl(178.89999999999998, 100%, 20.6%);
+ --scl-color-teal-100: hsl(176.5, 100%, 16.9%);
+ --scl-color-green-0: hsl(78.30000000000001, 59%, 92.4%);
+ --scl-color-green-10: hsl(82.5, 55.6%, 85.9%);
+ --scl-color-green-20: hsl(86.30000000000001, 55.3%, 79.8%);
+ --scl-color-green-30: hsl(90.39999999999998, 52.6%, 73.5%);
+ --scl-color-green-40: hsl(95.30000000000001, 50.9%, 67.3%);
+ --scl-color-green-50: hsl(98.80000000000001, 49.7%, 61%);
+ --scl-color-green-60: hsl(103.19999999999999, 48.1%, 54.7%);
+ --scl-color-green-70: hsl(111.5, 46.1%, 48%);
+ --scl-color-green-80: hsl(120, 52.4%, 41.2%);
+ --scl-color-green-90: hsl(127.60000000000002, 58.9%, 34.3%);
+ --scl-color-green-100: hsl(136.3, 65.7%, 27.5%);
+ --scl-color-clay-0: hsl(15.800000000000011, 42.2%, 91.2%);
+ --scl-color-clay-10: hsl(19.399999999999977, 46.3%, 86.9%);
+ --scl-color-clay-20: hsl(20.899999999999977, 49.4%, 82.9%);
+ --scl-color-clay-30: hsl(21.899999999999977, 48.1%, 78.8%);
+ --scl-color-clay-40: hsl(22.30000000000001, 48.4%, 74.9%);
+ --scl-color-clay-50: hsl(22.80000000000001, 48.3%, 71.2%);
+ --scl-color-clay-60: hsl(25.100000000000023, 46.7%, 66.9%);
+ --scl-color-clay-70: hsl(22.899999999999977, 35.8%, 58.4%);
+ --scl-color-clay-80: hsl(21.399999999999977, 27.6%, 50.2%);
+ --scl-color-clay-90: hsl(18.899999999999977, 26.8%, 41.8%);
+ --scl-color-clay-100: hsl(18.600000000000023, 24.7%, 33.3%);
+ --scl-color-rose-0: hsl(338.79999999999995, 48.6%, 93.1%);
+ --scl-color-rose-10: hsl(341.4, 46%, 87.6%);
+ --scl-color-rose-20: hsl(341.4, 45.7%, 82%);
+ --scl-color-rose-30: hsl(341.9, 43.8%, 76.3%);
+ --scl-color-rose-40: hsl(343.79999999999995, 42.3%, 70.8%);
+ --scl-color-rose-50: hsl(346, 41.2%, 65.3%);
+ --scl-color-rose-60: hsl(346.79999999999995, 39.8%, 59.6%);
+ --scl-color-rose-70: hsl(344.79999999999995, 31.5%, 49.2%);
+ --scl-color-rose-80: hsl(342.9, 35.4%, 38.8%);
+ --scl-color-rose-90: hsl(340.29999999999995, 40.3%, 28.2%);
+ --scl-color-rose-100: hsl(338.4, 44.6%, 22%);
+ --scl-color-lilac-0: hsl(307.5, 33.3%, 95.3%);
+ --scl-color-lilac-10: hsl(310, 27.3%, 91.4%);
+ --scl-color-lilac-20: hsl(310.6, 28.8%, 88.4%);
+ --scl-color-lilac-30: hsl(310, 30.8%, 84.7%);
+ --scl-color-lilac-40: hsl(300, 28.2%, 77.1%);
+ --scl-color-lilac-50: hsl(293.6, 30.7%, 70%);
+ --scl-color-lilac-60: hsl(292.9, 30.9%, 62.5%);
+ --scl-color-lilac-70: hsl(292.79999999999995, 24.4%, 53.3%);
+ --scl-color-lilac-80: hsl(293.20000000000005, 23.8%, 43.7%);
+ --scl-color-lilac-90: hsl(291.79999999999995, 29.1%, 34.3%);
+ --scl-color-lilac-100: hsl(291.1, 37%, 24.9%);
+ --scl-color-pigeon-0: hsl(226.20000000000005, 41.9%, 93.9%);
+ --scl-color-pigeon-10: hsl(227.5, 42.9%, 89%);
+ --scl-color-pigeon-20: hsl(227.60000000000002, 41.5%, 83.9%);
+ --scl-color-pigeon-30: hsl(228.60000000000002, 38.9%, 78.8%);
+ --scl-color-pigeon-40: hsl(230.60000000000002, 38.3%, 73.9%);
+ --scl-color-pigeon-50: hsl(230.79999999999995, 37.1%, 68.8%);
+ --scl-color-pigeon-60: hsl(232.70000000000005, 35.9%, 63.9%);
+ --scl-color-pigeon-70: hsl(239.10000000000002, 29.8%, 55.9%);
+ --scl-color-pigeon-80: hsl(244.60000000000002, 26.5%, 48%);
+ --scl-color-pigeon-90: hsl(251.60000000000002, 30.4%, 40%);
+ --scl-color-pigeon-100: hsl(257.5, 33.7%, 32%);
+ --scl-color-neptune-0: hsl(176, 29.4%, 90%);
+ --scl-color-neptune-10: hsl(180, 31.6%, 85.1%);
+ --scl-color-neptune-20: hsl(178.29999999999995, 34.7%, 80.2%);
+ --scl-color-neptune-30: hsl(180, 34.4%, 74.9%);
+ --scl-color-neptune-40: hsl(182.29999999999995, 34.6%, 70%);
+ --scl-color-neptune-50: hsl(184, 33.7%, 65.1%);
+ --scl-color-neptune-60: hsl(184.39999999999998, 33.3%, 60%);
+ --scl-color-neptune-70: hsl(182.70000000000005, 27.5%, 52.9%);
+ --scl-color-neptune-80: hsl(180, 25.3%, 45.7%);
+ --scl-color-neptune-90: hsl(178.79999999999995, 24.9%, 38.6%);
+ --scl-color-neptune-100: hsl(178.20000000000005, 21.2%, 31.4%);
+ --scl-color-olive-0: hsl(95, 33.3%, 92.9%);
+ --scl-color-olive-10: hsl(96, 30.3%, 87.1%);
+ --scl-color-olive-20: hsl(98.60000000000002, 29.8%, 81.6%);
+ --scl-color-olive-30: hsl(100, 29%, 75.7%);
+ --scl-color-olive-40: hsl(101.89999999999998, 28.1%, 70%);
+ --scl-color-olive-50: hsl(103.19999999999999, 27.5%, 64.3%);
+ --scl-color-olive-60: hsl(103.89999999999998, 26.4%, 58.4%);
+ --scl-color-olive-70: hsl(102.19999999999999, 22%, 48.2%);
+ --scl-color-olive-80: hsl(100, 24.7%, 38%);
+ --scl-color-olive-90: hsl(97.5, 28.2%, 27.8%);
+ --scl-color-olive-100: hsl(97.69999999999999, 32.7%, 21%);
+ --scl-color-primary-hover: hsl(329.29999999999995, 95.2%, 50.6%);
+ --scl-color-primary-active: hsl(329.29999999999995, 100%, 39.8%);
+ --scl-color-focus: hsl(215.60000000000002, 100%, 62%);
+ --scl-color-text-standard: hsl(0, 0%, 9.8%);
+ --scl-color-text-additional: hsl(0, 0%, 40%);
+ --scl-color-text-link: hsl(227.39999999999998, 89%, 46.3%);
+ --scl-color-text-link-hover: hsl(236.5, 100%, 37.5%);
+ --scl-color-text-link-active: hsl(220, 100%, 56.5%);
+ --scl-color-text-link-visited: hsl(227.39999999999998, 89%, 46.3%);
+ --scl-color-text-info: hsl(227.39999999999998, 89%, 46.3%);
+ --scl-color-text-disabled: hsl(0, 0%, 49.8%);
+ --scl-color-text-success: hsl(136.3, 65.7%, 27.5%);
+ --scl-color-text-error: hsl(349.70000000000005, 69%, 50.6%);
+ --scl-color-background-standard: hsl(0, 0%, 100%);
+ --scl-color-background-light: hsl(0, 0%, 94.9%);
+ --scl-color-background-darker: hsl(0, 0%, 80%);
+ --scl-color-background-overlay: hsla(0, 0%, 42.4%, 0.7);
+ --scl-color-background-disabled: hsl(0, 0%, 80%);
+ --scl-color-background-success: hsl(136.3, 65.7%, 27.5%);
+ --scl-color-background-error: hsl(349.70000000000005, 69%, 50.6%);
+ --scl-color-functional-red: hsl(349.70000000000005, 69%, 50.6%);
+ --scl-color-functional-green: hsl(136.3, 65.7%, 27.5%);
+ --scl-color-functional-blue: hsl(227.39999999999998, 89%, 46.3%);
+ /* SHADOW */
+ --scl-shadow-level-0: 0px 2px 8px 0px hsla(0, 0%, 0%, 0.1),
+ 0px 1px 2px 0px hsla(0, 0%, 0%, 0.1);
+ --scl-shadow-level-1: 0px 4px 16px 0px hsla(0, 0%, 0%, 0.1),
+ 0px 2px 4px 0px hsla(0, 0%, 0%, 0.1);
+ --scl-shadow-level-2: 0px 8px 32px 0px hsla(0, 0%, 0%, 0.1),
+ 0px 4px 8px 0px hsla(0, 0%, 0%, 0.1);
+ --scl-shadow-level-3: 0px 12px 48px 0px hsla(0, 0%, 0%, 0.1),
+ 0px 6px 12px 0px hsla(0, 0%, 0%, 0.1);
+ --scl-shadow-level-4: 0px 16px 64px 0px hsla(0, 0%, 0%, 0.1),
+ 0px 8px 16px 0px hsla(0, 0%, 0%, 0.1);
+ --scl-shadow-level-5: 0px 20px 80px 0px hsla(0, 0%, 0%, 0.1),
+ 0px 10px 20px 0px hsla(0, 0%, 0%, 0.1);
+ --scl-shadow-level-1-hover: 0px 6px 24px 0px hsla(0, 0%, 0%, 0.1),
+ 0px 3px 6px 0px hsla(0, 0%, 0%, 0.1);
+ --scl-shadow-level-1-active: 0px 2px 8px 0px hsla(0, 0%, 0%, 0.1),
+ 0px 1px 2px 0px hsla(0, 0%, 0%, 0.1);
+ --scl-shadow-level-2-hover: 0px 10px 40px 0px hsla(0, 0%, 0%, 0.1),
+ 0px 5px 10px 0px hsla(0, 0%, 0%, 0.1);
+ --scl-shadow-level-2-active: 0px 6px 24px 0px hsla(0, 0%, 0%, 0.1),
+ 0px 3px 6px 0px hsla(0, 0%, 0%, 0.1);
+ --scl-shadow-level-3-hover: 0px 14px 56px 0px hsla(0, 0%, 0%, 0.1),
+ 0px 7px 14px 0px hsla(0, 0%, 0%, 0.1);
+ --scl-shadow-level-3-active: 0px 10px 40px 0px hsla(0, 0%, 0%, 0.1),
+ 0px 5px 10px 0px hsla(0, 0%, 0%, 0.1);
+ --scl-shadow-level-4-hover: 0px 18px 72px 0px hsla(0, 0%, 0%, 0.1),
+ 0px 9px 18px 0px hsla(0, 0%, 0%, 0.1);
+ --scl-shadow-level-4-active: 0px 14px 56px 0px hsla(0, 0%, 0%, 0.1),
+ 0px 7px 14px 0px hsla(0, 0%, 0%, 0.1);
+ --scl-shadow-level-5-hover: 0px 22px 88px 0px hsla(0, 0%, 0%, 0.1),
+ 0px 11px 22px 0px hsla(0, 0%, 0%, 0.1);
+ --scl-shadow-level-5-active: 0px 18px 72px 0px hsla(0, 0%, 0%, 0.1),
+ 0px 9px 18px 0px hsla(0, 0%, 0%, 0.1);
+ /* RADIUS */
+ --scl-radius-1: 1px;
+ --scl-radius-2: 2px;
+ --scl-radius-4: 4px;
+ --scl-radius-8: 8px;
+ --scl-radius-12: 12px;
+ /* OPACITY */
+ --scl-opacity-50: 0.5;
+ /* MOTION */
+ --scl-motion-duration-immediate: 100ms;
+ --scl-motion-duration-fast: 200ms;
+ --scl-motion-duration-slower: 600ms;
+ --scl-motion-duration-deliberate: 800ms;
+ --scl-motion-easing-standard: cubic-bezier(0.42, 0, 0.58, 1);
+ --scl-motion-easing-enter: cubic-bezier(0.39, 0.575, 0.565, 1);
+ /* Z-INDEX */
+ --scl-z-index-10: 10;
+ --scl-z-index-20: 20;
+ --scl-z-index-30: 30;
+ --scl-z-index-40: 40;
+ --scl-z-index-50: 50;
+ --scl-z-index-60: 60;
+ --scl-z-index-70: 70;
+}
+/* FONT VARIANT CLASSES */
+.scl-font-variant-body {
+ font-family: var(--scl-font-variant-body-family, TeleNeoWeb, sans-serif);
+ font-size: var(--scl-font-variant-body-size, 1rem);
+ font-weight: var(--scl-font-variant-body-weight, 500);
+ line-height: var(--scl-font-variant-body-line-height, 150%);
+ letter-spacing: var(--scl-font-variant-body-letter-spacing, normal);
+}
+.scl-font-variant-body-short {
+ font-family: var(
+ --scl-font-variant-body-short-family,
+ TeleNeoWeb,
+ sans-serif
+ );
+ font-size: var(--scl-font-variant-body-short-size, 1rem);
+ font-weight: var(--scl-font-variant-body-short-weight, 500);
+ line-height: var(--scl-font-variant-body-short-line-height, 125%);
+ letter-spacing: var(--scl-font-variant-body-short-letter-spacing, normal);
+}
+.scl-font-variant-body-large {
+ font-family: var(
+ --scl-font-variant-body-large-family,
+ TeleNeoWeb,
+ sans-serif
+ );
+ font-size: var(--scl-font-variant-body-large-size, 1.25rem);
+ font-weight: var(--scl-font-variant-body-large-weight, 500);
+ line-height: var(--scl-font-variant-body-large-line-height, 160%);
+ letter-spacing: var(--scl-font-variant-body-large-letter-spacing, normal);
+}
+.scl-font-variant-smaller {
+ font-family: var(--scl-font-variant-smaller-family, TeleNeoWeb, sans-serif);
+ font-size: var(--scl-font-variant-smaller-size, 0.75rem);
+ font-weight: var(--scl-font-variant-smaller-weight, 500);
+ line-height: var(--scl-font-variant-smaller-line-height, 125%);
+ letter-spacing: var(--scl-font-variant-smaller-letter-spacing, normal);
+}
+.scl-font-variant-label {
+ font-family: var(--scl-font-variant-label-family, TeleNeoWeb, sans-serif);
+ font-size: var(--scl-font-variant-label-size, 0.75rem);
+ font-weight: var(--scl-font-variant-label-weight, 500);
+ line-height: var(--scl-font-variant-label-line-height, 120%);
+ letter-spacing: var(--scl-font-variant-label-letter-spacing, normal);
+}
+.scl-font-variant-caption {
+ font-family: var(--scl-font-variant-caption-family, TeleNeoWeb, sans-serif);
+ font-size: var(--scl-font-variant-caption-size, 0.75rem);
+ font-weight: var(--scl-font-variant-caption-weight, 500);
+ line-height: var(--scl-font-variant-caption-line-height, 133%);
+ letter-spacing: var(--scl-font-variant-caption-letter-spacing, normal);
+}
+.scl-font-variant-heading-6 {
+ font-family: var(--scl-font-variant-heading-6-family, TeleNeoWeb, sans-serif);
+ font-size: var(--scl-font-variant-heading-6-size, 1rem);
+ font-weight: var(--scl-font-variant-heading-6-weight, 700);
+ line-height: var(--scl-font-variant-heading-6-line-height, 150%);
+ letter-spacing: var(--scl-font-variant-heading-6-letter-spacing, normal);
+}
+.scl-font-variant-heading-5 {
+ font-family: var(--scl-font-variant-heading-5-family, TeleNeoWeb, sans-serif);
+ font-size: var(--scl-font-variant-heading-5-size, 1.25rem);
+ font-weight: var(--scl-font-variant-heading-5-weight, 800);
+ line-height: var(--scl-font-variant-heading-5-line-height, 125%);
+ letter-spacing: var(--scl-font-variant-heading-5-letter-spacing, normal);
+}
+.scl-font-variant-heading-4 {
+ font-family: var(--scl-font-variant-heading-4-family, TeleNeoWeb, sans-serif);
+ font-size: var(--scl-font-variant-heading-4-size, 1.5rem);
+ font-weight: var(--scl-font-variant-heading-4-weight, 800);
+ line-height: var(--scl-font-variant-heading-4-line-height, 133%);
+ letter-spacing: var(--scl-font-variant-heading-4-letter-spacing, normal);
+}
+.scl-font-variant-heading-3 {
+ font-family: var(--scl-font-variant-heading-3-family, TeleNeoWeb, sans-serif);
+ font-size: var(--scl-font-variant-heading-3-size, 2rem);
+ font-weight: var(--scl-font-variant-heading-3-weight, 800);
+ line-height: var(--scl-font-variant-heading-3-line-height, 125%);
+ letter-spacing: var(--scl-font-variant-heading-3-letter-spacing, normal);
+}
+.scl-font-variant-heading-2 {
+ font-family: var(--scl-font-variant-heading-2-family, TeleNeoWeb, sans-serif);
+ font-size: var(--scl-font-variant-heading-2-size, 2.5rem);
+ font-weight: var(--scl-font-variant-heading-2-weight, 800);
+ line-height: var(--scl-font-variant-heading-2-line-height, 120%);
+ letter-spacing: var(--scl-font-variant-heading-2-letter-spacing, normal);
+}
+.scl-font-variant-heading-1 {
+ font-family: var(--scl-font-variant-heading-1-family, TeleNeoWeb, sans-serif);
+ font-size: var(--scl-font-variant-heading-1-size, 3.5rem);
+ font-weight: var(--scl-font-variant-heading-1-weight, 800);
+ line-height: var(--scl-font-variant-heading-1-line-height, 114%);
+ letter-spacing: var(--scl-font-variant-heading-1-letter-spacing, normal);
+}
diff --git a/packages/components/src/global/scale.css b/packages/components/src/global/scale.css
index cf26a3e703..751462390c 100644
--- a/packages/components/src/global/scale.css
+++ b/packages/components/src/global/scale.css
@@ -23,7 +23,7 @@
* Include --scl tokens from legacy @telekom/scale-design-tokens package for backward-compat.
* @deprecated in v3
*/
-@import '~@telekom/scale-design-tokens/dist/design-tokens-telekom.css';
+@import './legacy-scale-design-tokens.css';
/**
* Include --telekom tokens (including dark mode).
diff --git a/packages/components/src/global/whitelabel.css b/packages/components/src/global/whitelabel.css
index 2e6ab4a06f..be62a074be 100644
--- a/packages/components/src/global/whitelabel.css
+++ b/packages/components/src/global/whitelabel.css
@@ -9,7 +9,7 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
-@import '~@telekom/scale-design-tokens/dist/design-tokens.css';
+@import './legacy-scale-design-tokens.css';
@import '~@telekom/design-tokens/dist/css/design-tokens.all.css';
@import './grid.css';
diff --git a/packages/design-tokens/CHANGELOG.md b/packages/design-tokens/CHANGELOG.md
index 2db8b8243f..a09b9f7cdf 100644
--- a/packages/design-tokens/CHANGELOG.md
+++ b/packages/design-tokens/CHANGELOG.md
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [3.0.0-beta.149](https://github.com/telekom/scale/compare/v3.0.0-beta.148...v3.0.0-beta.149) (2024-02-23)
+
+**Note:** Version bump only for package @telekom/scale-design-tokens
+
+
+
+
+
# [3.0.0-beta.148](https://github.com/telekom/scale/compare/v3.0.0-beta.147...v3.0.0-beta.148) (2024-02-15)
**Note:** Version bump only for package @telekom/scale-design-tokens
diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json
index 60bb6e05a8..7f5d9784aa 100644
--- a/packages/design-tokens/package.json
+++ b/packages/design-tokens/package.json
@@ -1,6 +1,6 @@
{
"name": "@telekom/scale-design-tokens",
- "version": "3.0.0-beta.148",
+ "version": "3.0.0-beta.149",
"type": "module",
"description": "Design Tokens for the Scale Design System",
"homepage": "https://github.com/telekom/scale",
@@ -8,9 +8,7 @@
"type": "git",
"url": "https://github.com/telekom/scale.git"
},
- "publishConfig": {
- "access": "public"
- },
+ "private": true,
"files": [
"dist/",
"src/"
diff --git a/packages/storybook-vue/.storybook/color-mode-switch-addon/register.js b/packages/storybook-vue/.storybook/color-mode-switch-addon/register.js
index d12ca09703..9ca7f1d476 100644
--- a/packages/storybook-vue/.storybook/color-mode-switch-addon/register.js
+++ b/packages/storybook-vue/.storybook/color-mode-switch-addon/register.js
@@ -20,6 +20,12 @@ const inactiveBtnClassName = 'css-am1h1h';
const separatorClassName = 'css-14kbt3m';
function switchMode(mode) {
+ const currentURL = window.location.href;
+ // avoid changing the mode for following pages (we use a scale component there and it's not working properly with dark mode)
+ if (currentURL.includes('/new-release-sketch-library-update') || currentURL.includes('setup-info-getting-started-for-designers')) {
+ mode = 'light';
+ }
+
try {
const previewIframe = document.querySelector('#storybook-preview-iframe');
previewIframe.contentWindow.document.body.dataset.mode = mode;
diff --git a/packages/storybook-vue/CHANGELOG.md b/packages/storybook-vue/CHANGELOG.md
index 678dba84a4..9cae68c2ef 100644
--- a/packages/storybook-vue/CHANGELOG.md
+++ b/packages/storybook-vue/CHANGELOG.md
@@ -3,6 +3,17 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [3.0.0-beta.149](https://github.com/telekom/scale/compare/v3.0.0-beta.148...v3.0.0-beta.149) (2024-02-23)
+
+
+### Bug Fixes
+
+* **telekom-profile-menu:** stories and flyout menu fixes ([#2273](https://github.com/telekom/scale/issues/2273)) ([aa0e237](https://github.com/telekom/scale/commit/aa0e2371305515f0e37fd06acc5d3c9c381d47ac))
+
+
+
+
+
# [3.0.0-beta.148](https://github.com/telekom/scale/compare/v3.0.0-beta.147...v3.0.0-beta.148) (2024-02-15)
diff --git a/packages/storybook-vue/package.json b/packages/storybook-vue/package.json
index 6e29884d96..9f201d83be 100644
--- a/packages/storybook-vue/package.json
+++ b/packages/storybook-vue/package.json
@@ -2,7 +2,7 @@
"homepage": "https://telekom.github.io/scale",
"name": "@telekom/scale-storybook-vue",
"private": true,
- "version": "3.0.0-beta.148",
+ "version": "3.0.0-beta.149",
"main": "index.js",
"license": "MPL-2.0",
"devDependencies": {
@@ -32,8 +32,8 @@
"dependencies": {
"@storybook/addon-viewport": "^6.4.22",
"@telekom/design-tokens": "^1.0.0-beta.2",
- "@telekom/scale-components": "^3.0.0-beta.148",
- "@telekom/scale-components-vue": "^3.0.0-beta.148"
+ "@telekom/scale-components": "^3.0.0-beta.149",
+ "@telekom/scale-components-vue": "^3.0.0-beta.149"
},
"scripts": {
"prestart": "rm -rf node_modules/.cache/ && yes | cp -a ../components/dist/scale-components/fonts/* public/fonts/ && yes | cp -a ../components/dist/scale-components/scale-components.css public/",
diff --git a/packages/storybook-vue/public/assets/3_components/brand-header/4_brandheader_brandbar_elements.jpg b/packages/storybook-vue/public/assets/3_components/brand-header/4_brandheader_brandbar_elements.jpg
new file mode 100644
index 0000000000..e894aff8df
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/brand-header/4_brandheader_brandbar_elements.jpg differ
diff --git a/packages/storybook-vue/public/assets/3_components/brand-header/BrandHeader-LoggedIn.png b/packages/storybook-vue/public/assets/3_components/brand-header/BrandHeader-LoggedIn.png
new file mode 100644
index 0000000000..b307800150
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/brand-header/BrandHeader-LoggedIn.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/brand-header/BrandHeader-LoggedOut.png b/packages/storybook-vue/public/assets/3_components/brand-header/BrandHeader-LoggedOut.png
new file mode 100644
index 0000000000..7da1d830d0
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/brand-header/BrandHeader-LoggedOut.png differ
diff --git a/packages/storybook-vue/public/fonts/scale-fonts-storybook.css b/packages/storybook-vue/public/fonts/scale-fonts-storybook.css
index c9e067d558..fb7e30569a 100644
--- a/packages/storybook-vue/public/fonts/scale-fonts-storybook.css
+++ b/packages/storybook-vue/public/fonts/scale-fonts-storybook.css
@@ -96,3 +96,7 @@
.sbdocs-ol[type='a'] {
list-style-type: lower-alpha;
}
+
+.magenta {
+ color: var(--telekom-color-text-and-icon-primary-standard) !important;
+}
\ No newline at end of file
diff --git a/packages/storybook-vue/stories/Index.stories.mdx b/packages/storybook-vue/stories/Index.stories.mdx
index b6c89263b6..fb653a5c84 100644
--- a/packages/storybook-vue/stories/Index.stories.mdx
+++ b/packages/storybook-vue/stories/Index.stories.mdx
@@ -15,7 +15,7 @@ import text_de from './Index_de.md';
: 'Wilkommen beim Scale Design System';
return (
- 
+
{locale && (
-### Scale ist das digitale Design System der Telekom +
+
+
+ +### Wir, das Team, das das Scale Design System entwickelt hat, möchten einige spannende Neuigkeiten mit Euch teilen. + +Nach vielen Jahren, in denen Scale von einem sehr kleinen Team aufgebaut wurde, **haben wir nun die Möglichkeit, einen großen Schritt vorwärts zu machen.** + +Gemeinsam mit unserer internen Design-System-Community haben wir bestehende Lösungen mit führenden Design Systemen verglichen und Verbesserungsmöglichkeiten identifiziert, die wir mit diesem nächsten Schritt angehen werden. Nochmals herzlichen Dank an alle, die bisher daran beteiligt waren. + +**Wir freuen uns sehr, verkünden zu können, dass wir bereits mit der Arbeit an der nächsten Evolutionsstufe des Telekom Design Systems begonnen haben. Es ist darauf ausgerichtet, alle wichtigen kundenbezogenen Produkte der DT Gruppe in Europa zu unterstützen.** + +Ja, das ist ambitioniert, aber wir sind als Team gewachsen und glauben fest daran, dass wir es schaffen können. + +Mit diesem neuen Fokus müssen wir auch die Weiterentwicklung des Scale Design Systems denen überlassen, die bereits dazu beigetragen haben, es zu entwickeln: der Open-Source-Community. Obwohl wir leider nicht mehr unterstützen und keine neuen Komponenten mehr erstellen werden: Scale existiert weiter. Veröffentliche gerne Fixes und verbessere das solide Fundament, das wir gemeinsam geschaffen haben. + +Für Interessierte, die bisher mit Scale gearbeitet haben, werden wir den Übergang zur nächsten Evolutionsstufe des Design Systems so einfach wie möglich zu machen. + +Haben wir dein Interesse geweckt? -Scale ist Teil von Brand & Design. Alle Komponenten sind markenkonform und helfen, ein kohärentes Markenerlebnis zu schaffen. +Perfekt. -### Code und Design für konsistente Produkte +Weitere Details folgen. -Das auf unserer Markenidentität basierende Designsystem hilft dir, konsistente Produkte zu entwickeln. So stärkst du die Marke Telekom. +
+ +### Was sich jetzt ändert: + +Wir werden die Scale Design-Libraries in unseren Telekom Enterprise Workspace migrieren. Danach werden deine Produktdateien von der Library getrennt sein. Alle extern gespeicherten Telekomprojekte müssen ebenfalls in den Telekom Workspace migrieren. Sobald du dies getan hast, werden die Komponenten in den Produktdateien automatisch mit der Library verknüpft sein. + +Wenn du die Libraries in deinem Draft-Ordner sichtbar haben möchtest: Klicke unter Settings auf den Link "enable libraries for all files in your drafts". Aktiviere die benötigten Libraries und du findest sie in deinem Draft-Ordner. + +
-### Barrierefreiheit „out of the box“ +### Zugang zu den Scale Figma Libraries -Die Komponenten von Scale erfüllen die technischen Anforderungen für das Level AA der Barrierefreiheit. Sie sind ebenso für kundenbezogene Produkte wie für interne Anwendungen geeignet. +**Telekom Mitarbeiter** -### Kompatibel mit den relevanten Frameworks und Design Tools +Schritt 1:
+Richte dir ein Telekom Figma Enterprise Konto ein. [So geht’s](https://seu30.gdc-dmst01.t-systems.com/confluence/display/SETOOLSBETRIEB/Figma@DT+How+to+add+User). -Die UI Libraries gibt es im Figma- und Sketchformat. Die Code Komponenten kannst du als reine Web-Komponenten oder in den Frameworks Vue, React und Angular verwenden. +Schritt 2:
+Migriere deine Arbeitsdateien von einem externen Konto in unser Telekom Figma Konto, um die Bibliothek zu nutzen und die Komponenten wieder zu verbinden. Benötigst du Hilfe, wende dich an den Telekom Figma Admin oder sende ein Ticket an den [Figma Support](https://help.figma.com/hc/en-us/requests/new?ticket_form_id=360001731233). + +Schritt 3:
+Nach der Migration der Dateien sind die enthaltenen Komponenten automatisch wieder mit der Scale Library in unserem Figma Workspace verbunden. Du kannst die Library auch wieder über das Library Panel aktivieren. + +Schritt 4:
+Lade externe Nutzer*innen zu den Dateien ein, indem du die Freigabefunktion in Figma nutzt. Externe Nutzer*innen benötigen Bearbeitungsrechte im Telekom Figma Workspace, um auf die Dateien zuzugreifen. Alle damit verbundenen Kosten werden der Projektkostenstelle in Rechnung gestellt. + +Hinweis:
+Alle internen Nutzer mit einer Telekom Figma Enterprise Lizenz können nach der Migration von Scale über den bestehenden Link auf die Datei zugreifen. + +
-### Für die beste User Experience +**Externe Nutzer\*innen** -Mit Scale sparst du Zeit – und zwar im gesamten Design- und Entwicklungsprozess: bei der Gestaltung von User Interfaces, beim Prototyping, der Design-Übergabe, der Frontend-Entwicklung und im Freigabeprozess mit Brand & Design. So bleibt mehr Zeit für spezifische Funktionen und Lösungen. +Externe Nutzer\*innen können die Scale Libraries ausschließlich mit einem Telekom Figma Enterprise Account nutzen. -### Flexibilität und Skalierbarkeit durch Design Tokens +Schritt 1:
+Migriere deine Arbeitsdateien von einem externen Konto in unser Telekom Figma Konto, um die Bibliothek zu nutzen und die Komponenten wieder zu verbinden. Benötigst du Hilfe, wende dich an den Telekom Figma Admin oder sende ein Ticket an den [Figma Support](https://help.figma.com/hc/en-us/requests/new?ticket_form_id=360001731233). -Durch die Verwendung von Design Tokens ist Scale besonders anpassungsfähig. Änderungen und Erweiterungen lassen sich schnell umsetzen. Auch weitere Themes für bspw. Drittmarken sind schnell erstellt. +Schritt 2:
+Nach der Migration deines Projektes solltest du dem Telekom Enterprise Account automatisch als Gast hinzugefügt werden. Sollte das nicht geschehen, kontaktiere deine Telekom internen Ansprechpartner im Projekt, um eine Einladung zu erhalten. Gib bitte unbedingt das Projekt an, an dem du arbeitest, und nenne den Namen eines internen Ansprechpartners. -### Für bessere Kollaboration +Schritt 3:
+Nach der Migration der Dateien sind die enthaltenen Komponenten automatisch wieder mit der Scale Library in unserem Figma Workspace verbunden. Du kannst die Library auch wieder über das Library Panel aktivieren. -Ein Designsytsem fördert die Zusammenarbeit zwischen Teams und Stakeholdern. Es schafft eine gemeinsame Grundlage, auf die alle Beteiligten gemeinsam aufbauen können. Als Designer*in oder Entwickler*in kannst du dazu beitragen, Scale zu verbessern. Schicke uns deine neuen oder verbesserten Komponenten, um sie mit deinen Kolleg\*innen in Scale zu teilen. +Hinweis:
+Alle externen Nutzer\*innen verlieren nach der Migration den Zugriff auf die Scale Libraries. Wenn du weiterhin Zugriff benötigst, kontaktiere uns , um eine Einladung zu erhalten. Gib bitte unbedingt das Projekt an, an dem du arbeitest, und nenne den Namen eines internen Ansprechpartners. diff --git a/packages/storybook-vue/stories/Index_en.md b/packages/storybook-vue/stories/Index_en.md index 921334807b..8a01213163 100644 --- a/packages/storybook-vue/stories/Index_en.md +++ b/packages/storybook-vue/stories/Index_en.md @@ -1,29 +1,73 @@
-### Scale is the Telekom Digital Design System +
+
+
+ +### We, the team, that build the Scale Design System, want to share some exciting updates with you. + +After many years, where Scale has been built by a very small team, enabling others to build their products and prototypes, **we were given the opportunity to make a huge leap on the matter.** + +In collaboration with our internal design system community, we have assessed current solutions against leading design systems, identifying areas for improvement that we aim to address with this next step. Thanks again to everyone involved so far. + +**We could not be happier to announce that we already started working on the next evolution of the Telekom Design System, planned to support all major customer related products of DT Group in Europe.** + +Yes, this is ambitious, but we grew as a team and firmly believe we can do it. Bear with us. + +**With this new focus, we also must leave the Scale Design System evolution to those who already helped to grow it: The Open-Source Community.** + +While sadly, we are not able to provide support anymore and will not build new components, keep in mind Scale is alive and all well +and can be used as is. Feel free to publish fixes and improve the solid foundation, we built. Even better, for those interested, since we are now working on a larger scale than ever before, we will try to enable an update path to the next evolution of the Design System. + +We made you curious? -Scale is a part of Brand & Design. All components are brand compliant and help create a coherent brand experience. +Perfect. -### Code and design for consistent products +Stay tuned, more details to follow. -Based on our brand identity, the Scale design system helps you develop consistent products. This is how you contribute to strengthening the Telekom brand. +
+ +### What is changing now: + +We’ll migrate the scale Figma libraries in our Telekom enterprise workspace. Afterward, your product files will be disconnected from the library. All Telekom projects stored externally have to migrate to the Telekom account as well. Once that’s done, the components will automatically link to the library. + +If you want to have the libraries visible in your draft folder: Click on the link “enable libraries for all files in your drafts” under settings. Activate the libraries you need and you will find them in your personal draft. + +
-### Accessibility out of the box +### Access to Figma libraries -Scale components meet the technical requirements for the accessibility level AA. They are just as suitable for customer-focused products as they are for internal use cases. +**Telekom employees** -### Compatible with the relevant framework and design tools +Step 1:
+Get a Telekom Enterprise account [by following these instructions](https://seu30.gdc-dmst01.t-systems.com/confluence/display/SETOOLSBETRIEB/Figma@DT+How+to+add+User). -The UI libraries are available in Figma and Sketch. You can use the code components as pure web components or in the framework for Vue, React, and Angular. +Step 2:
+Migrate your working files from an external account into our Telekom Figma account in order to utilize the library and reconnect the components. Reach out to the Telekom Figma Admin for assistance, or submit a ticket to [Figma Support](https://help.figma.com/hc/en-us/requests/new?ticket_form_id=360001731233). + +Step 3:
+After migrating the files, the components will automatically reconnect to the Scale library hosted in the Telekom Figma space. You have the option to enable the library in your files directly from the library panel. + +Step 4:
Invite external collaborators to the files using the share feature in Figma. External collaborators will require edit rights in the Telekom Figma Account to collaborate, and any associated costs will be charged to the project cost center. + +Note:
+Scale Figma link: All internal employee with a Telekom Figma Enterprise License can access the file through the existing link after Scale migration. + +
-### For the best user experience +**Externals** -Scale saves you time throughout the entire design and development process: for the design of user interfaces, prototyping, design handover, front-end development, and in the approval process with Brand & Design. This leaves more time to create specific features and functionality. +Externals can utilize the Scale library exclusively with a Telekom Figma Enterprise Account. -### Flexibility and scalability through design tokens +Step 1:
+Migrate your working files to your Telekom Figma account to utilize the library and reconnect the components. If you need assistance, contact your Telekom Figma Admin or submit a ticket to [Figma Support](https://help.figma.com/hc/en-us/requests/new?ticket_form_id=360001731233). -By including design tokens, Scale is particularly adaptable. Changes and additions can be implemented quickly. Other themes for third-party brands can also be created quickly. +Step 2:
+Obtain a guest account with the Telekom Figma Enterprise Account. Typically, after migrating your project, all collaborators in the files are automatically added as guests to Telekom. If you do not yet have access to Telekom Figma, please contact your Telekom internal project contacts to get an invitation. Be sure to mention the project you are working on and provide the name of an internal contact person you are collaborating with. -### For better collaboration +Step 3:
+After migrating the files, the components will automatically reconnect to the Scale library hosted in the Telekom Figma space. You have the option to enable the library in your files directly from the library panel. -A design system encourages collaboration between teams and stakeholders. It creates a common foundation on which everyone can build together. As a designer or developer, you can help improve Scale. Send us your new or improved components to share with your colleagues in Scale. +Note:
+Scale Figma Link: All external collaborators will not be able to access the Scale Figma library file via the existing link after migration. If you require access to the file, please get in touch with us to be invited. Please ensure to specify the project you are involved in and provide the name of an internal contact person you are collaborating with. diff --git a/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx b/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx index 5611b86cf9..908bad6fbd 100644 --- a/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx +++ b/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx @@ -1,6 +1,7 @@ import { Meta, ArgsTable, Story, Canvas } from '@storybook/addon-docs'; import TelekomHeader from './TelekomHeader.vue'; import TelekomHeaderDataBackCompat from './TelekomHeaderDataBackCompat.vue'; +import TelekomProfileMenu from "./TelekomProfileMenu.vue"; import TelekomHeaderTemplate from './TelekomHeaderTemplate.vue'; import { mainNavigation, @@ -69,7 +70,7 @@ export const Template = (args, { argTypes }) => ({ :logo-href="logoHref" :logo-title="logoTitle" :logo-hide-title="logoHideTitle" - :meta-nav-aria-label="metaNavAriaLabel" + :meta-nav-aria-label="metaNavAriaLabel" :meta-nav-external-aria-label="metaNavExternalAriaLabel" :lang-switcher-aria-label="langSwitcherAriaLabel" :main-nav-aria-label="mainNavAriaLabel" @@ -77,6 +78,44 @@ export const Template = (args, { argTypes }) => ({ `, }); +export const TemplateProfileMenu = (args, { argTypes }) => ({ + components: { TelekomProfileMenu }, + props: TelekomProfileMenu.props, + template: ` +
+
+
+
+ {this.accessibilityLabel}
+
+ );
+ }
+
+ render() {
+ return (
+
+
{locale && (
-### Scale ist das digitale Design System der Telekom +
Wichtige Informationen für alle Nutzer*innen von Scale!
++
+
+ +### Wir, das Team, das das Scale Design System entwickelt hat, möchten einige spannende Neuigkeiten mit Euch teilen. + +Nach vielen Jahren, in denen Scale von einem sehr kleinen Team aufgebaut wurde, **haben wir nun die Möglichkeit, einen großen Schritt vorwärts zu machen.** + +Gemeinsam mit unserer internen Design-System-Community haben wir bestehende Lösungen mit führenden Design Systemen verglichen und Verbesserungsmöglichkeiten identifiziert, die wir mit diesem nächsten Schritt angehen werden. Nochmals herzlichen Dank an alle, die bisher daran beteiligt waren. + +**Wir freuen uns sehr, verkünden zu können, dass wir bereits mit der Arbeit an der nächsten Evolutionsstufe des Telekom Design Systems begonnen haben. Es ist darauf ausgerichtet, alle wichtigen kundenbezogenen Produkte der DT Gruppe in Europa zu unterstützen.** + +Ja, das ist ambitioniert, aber wir sind als Team gewachsen und glauben fest daran, dass wir es schaffen können. + +Mit diesem neuen Fokus müssen wir auch die Weiterentwicklung des Scale Design Systems denen überlassen, die bereits dazu beigetragen haben, es zu entwickeln: der Open-Source-Community. Obwohl wir leider nicht mehr unterstützen und keine neuen Komponenten mehr erstellen werden: Scale existiert weiter. Veröffentliche gerne Fixes und verbessere das solide Fundament, das wir gemeinsam geschaffen haben. + +Für Interessierte, die bisher mit Scale gearbeitet haben, werden wir den Übergang zur nächsten Evolutionsstufe des Design Systems so einfach wie möglich zu machen. + +Haben wir dein Interesse geweckt? -Scale ist Teil von Brand & Design. Alle Komponenten sind markenkonform und helfen, ein kohärentes Markenerlebnis zu schaffen. +Perfekt. -### Code und Design für konsistente Produkte +Weitere Details folgen. -Das auf unserer Markenidentität basierende Designsystem hilft dir, konsistente Produkte zu entwickeln. So stärkst du die Marke Telekom. +
+ +### Was sich jetzt ändert: + +Wir werden die Scale Design-Libraries in unseren Telekom Enterprise Workspace migrieren. Danach werden deine Produktdateien von der Library getrennt sein. Alle extern gespeicherten Telekomprojekte müssen ebenfalls in den Telekom Workspace migrieren. Sobald du dies getan hast, werden die Komponenten in den Produktdateien automatisch mit der Library verknüpft sein. + +Wenn du die Libraries in deinem Draft-Ordner sichtbar haben möchtest: Klicke unter Settings auf den Link "enable libraries for all files in your drafts". Aktiviere die benötigten Libraries und du findest sie in deinem Draft-Ordner. + +
-### Barrierefreiheit „out of the box“ +### Zugang zu den Scale Figma Libraries -Die Komponenten von Scale erfüllen die technischen Anforderungen für das Level AA der Barrierefreiheit. Sie sind ebenso für kundenbezogene Produkte wie für interne Anwendungen geeignet. +**Telekom Mitarbeiter** -### Kompatibel mit den relevanten Frameworks und Design Tools +Schritt 1:
+Richte dir ein Telekom Figma Enterprise Konto ein. [So geht’s](https://seu30.gdc-dmst01.t-systems.com/confluence/display/SETOOLSBETRIEB/Figma@DT+How+to+add+User). -Die UI Libraries gibt es im Figma- und Sketchformat. Die Code Komponenten kannst du als reine Web-Komponenten oder in den Frameworks Vue, React und Angular verwenden. +Schritt 2:
+Migriere deine Arbeitsdateien von einem externen Konto in unser Telekom Figma Konto, um die Bibliothek zu nutzen und die Komponenten wieder zu verbinden. Benötigst du Hilfe, wende dich an den Telekom Figma Admin oder sende ein Ticket an den [Figma Support](https://help.figma.com/hc/en-us/requests/new?ticket_form_id=360001731233). + +Schritt 3:
+Nach der Migration der Dateien sind die enthaltenen Komponenten automatisch wieder mit der Scale Library in unserem Figma Workspace verbunden. Du kannst die Library auch wieder über das Library Panel aktivieren. + +Schritt 4:
+Lade externe Nutzer*innen zu den Dateien ein, indem du die Freigabefunktion in Figma nutzt. Externe Nutzer*innen benötigen Bearbeitungsrechte im Telekom Figma Workspace, um auf die Dateien zuzugreifen. Alle damit verbundenen Kosten werden der Projektkostenstelle in Rechnung gestellt. + +Hinweis:
+Alle internen Nutzer mit einer Telekom Figma Enterprise Lizenz können nach der Migration von Scale über den bestehenden Link auf die Datei zugreifen. + +
-### Für die beste User Experience +**Externe Nutzer\*innen** -Mit Scale sparst du Zeit – und zwar im gesamten Design- und Entwicklungsprozess: bei der Gestaltung von User Interfaces, beim Prototyping, der Design-Übergabe, der Frontend-Entwicklung und im Freigabeprozess mit Brand & Design. So bleibt mehr Zeit für spezifische Funktionen und Lösungen. +Externe Nutzer\*innen können die Scale Libraries ausschließlich mit einem Telekom Figma Enterprise Account nutzen. -### Flexibilität und Skalierbarkeit durch Design Tokens +Schritt 1:
+Migriere deine Arbeitsdateien von einem externen Konto in unser Telekom Figma Konto, um die Bibliothek zu nutzen und die Komponenten wieder zu verbinden. Benötigst du Hilfe, wende dich an den Telekom Figma Admin oder sende ein Ticket an den [Figma Support](https://help.figma.com/hc/en-us/requests/new?ticket_form_id=360001731233). -Durch die Verwendung von Design Tokens ist Scale besonders anpassungsfähig. Änderungen und Erweiterungen lassen sich schnell umsetzen. Auch weitere Themes für bspw. Drittmarken sind schnell erstellt. +Schritt 2:
+Nach der Migration deines Projektes solltest du dem Telekom Enterprise Account automatisch als Gast hinzugefügt werden. Sollte das nicht geschehen, kontaktiere deine Telekom internen Ansprechpartner im Projekt, um eine Einladung zu erhalten. Gib bitte unbedingt das Projekt an, an dem du arbeitest, und nenne den Namen eines internen Ansprechpartners. -### Für bessere Kollaboration +Schritt 3:
+Nach der Migration der Dateien sind die enthaltenen Komponenten automatisch wieder mit der Scale Library in unserem Figma Workspace verbunden. Du kannst die Library auch wieder über das Library Panel aktivieren. -Ein Designsytsem fördert die Zusammenarbeit zwischen Teams und Stakeholdern. Es schafft eine gemeinsame Grundlage, auf die alle Beteiligten gemeinsam aufbauen können. Als Designer*in oder Entwickler*in kannst du dazu beitragen, Scale zu verbessern. Schicke uns deine neuen oder verbesserten Komponenten, um sie mit deinen Kolleg\*innen in Scale zu teilen. +Hinweis:
+Alle externen Nutzer\*innen verlieren nach der Migration den Zugriff auf die Scale Libraries. Wenn du weiterhin Zugriff benötigst, kontaktiere uns , um eine Einladung zu erhalten. Gib bitte unbedingt das Projekt an, an dem du arbeitest, und nenne den Namen eines internen Ansprechpartners. diff --git a/packages/storybook-vue/stories/Index_en.md b/packages/storybook-vue/stories/Index_en.md index 921334807b..8a01213163 100644 --- a/packages/storybook-vue/stories/Index_en.md +++ b/packages/storybook-vue/stories/Index_en.md @@ -1,29 +1,73 @@
-### Scale is the Telekom Digital Design System +
Important Information for all Users of Scale!
++
+
+ +### We, the team, that build the Scale Design System, want to share some exciting updates with you. + +After many years, where Scale has been built by a very small team, enabling others to build their products and prototypes, **we were given the opportunity to make a huge leap on the matter.** + +In collaboration with our internal design system community, we have assessed current solutions against leading design systems, identifying areas for improvement that we aim to address with this next step. Thanks again to everyone involved so far. + +**We could not be happier to announce that we already started working on the next evolution of the Telekom Design System, planned to support all major customer related products of DT Group in Europe.** + +Yes, this is ambitious, but we grew as a team and firmly believe we can do it. Bear with us. + +**With this new focus, we also must leave the Scale Design System evolution to those who already helped to grow it: The Open-Source Community.** + +While sadly, we are not able to provide support anymore and will not build new components, keep in mind Scale is alive and all well +and can be used as is. Feel free to publish fixes and improve the solid foundation, we built. Even better, for those interested, since we are now working on a larger scale than ever before, we will try to enable an update path to the next evolution of the Design System. + +We made you curious? -Scale is a part of Brand & Design. All components are brand compliant and help create a coherent brand experience. +Perfect. -### Code and design for consistent products +Stay tuned, more details to follow. -Based on our brand identity, the Scale design system helps you develop consistent products. This is how you contribute to strengthening the Telekom brand. +
+ +### What is changing now: + +We’ll migrate the scale Figma libraries in our Telekom enterprise workspace. Afterward, your product files will be disconnected from the library. All Telekom projects stored externally have to migrate to the Telekom account as well. Once that’s done, the components will automatically link to the library. + +If you want to have the libraries visible in your draft folder: Click on the link “enable libraries for all files in your drafts” under settings. Activate the libraries you need and you will find them in your personal draft. + +
-### Accessibility out of the box +### Access to Figma libraries -Scale components meet the technical requirements for the accessibility level AA. They are just as suitable for customer-focused products as they are for internal use cases. +**Telekom employees** -### Compatible with the relevant framework and design tools +Step 1:
+Get a Telekom Enterprise account [by following these instructions](https://seu30.gdc-dmst01.t-systems.com/confluence/display/SETOOLSBETRIEB/Figma@DT+How+to+add+User). -The UI libraries are available in Figma and Sketch. You can use the code components as pure web components or in the framework for Vue, React, and Angular. +Step 2:
+Migrate your working files from an external account into our Telekom Figma account in order to utilize the library and reconnect the components. Reach out to the Telekom Figma Admin for assistance, or submit a ticket to [Figma Support](https://help.figma.com/hc/en-us/requests/new?ticket_form_id=360001731233). + +Step 3:
+After migrating the files, the components will automatically reconnect to the Scale library hosted in the Telekom Figma space. You have the option to enable the library in your files directly from the library panel. + +Step 4:
Invite external collaborators to the files using the share feature in Figma. External collaborators will require edit rights in the Telekom Figma Account to collaborate, and any associated costs will be charged to the project cost center. + +Note:
+Scale Figma link: All internal employee with a Telekom Figma Enterprise License can access the file through the existing link after Scale migration. + +
-### For the best user experience +**Externals** -Scale saves you time throughout the entire design and development process: for the design of user interfaces, prototyping, design handover, front-end development, and in the approval process with Brand & Design. This leaves more time to create specific features and functionality. +Externals can utilize the Scale library exclusively with a Telekom Figma Enterprise Account. -### Flexibility and scalability through design tokens +Step 1:
+Migrate your working files to your Telekom Figma account to utilize the library and reconnect the components. If you need assistance, contact your Telekom Figma Admin or submit a ticket to [Figma Support](https://help.figma.com/hc/en-us/requests/new?ticket_form_id=360001731233). -By including design tokens, Scale is particularly adaptable. Changes and additions can be implemented quickly. Other themes for third-party brands can also be created quickly. +Step 2:
+Obtain a guest account with the Telekom Figma Enterprise Account. Typically, after migrating your project, all collaborators in the files are automatically added as guests to Telekom. If you do not yet have access to Telekom Figma, please contact your Telekom internal project contacts to get an invitation. Be sure to mention the project you are working on and provide the name of an internal contact person you are collaborating with. -### For better collaboration +Step 3:
+After migrating the files, the components will automatically reconnect to the Scale library hosted in the Telekom Figma space. You have the option to enable the library in your files directly from the library panel. -A design system encourages collaboration between teams and stakeholders. It creates a common foundation on which everyone can build together. As a designer or developer, you can help improve Scale. Send us your new or improved components to share with your colleagues in Scale. +Note:
+Scale Figma Link: All external collaborators will not be able to access the Scale Figma library file via the existing link after migration. If you require access to the file, please get in touch with us to be invited. Please ensure to specify the project you are involved in and provide the name of an internal contact person you are collaborating with. diff --git a/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx b/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx index 5611b86cf9..908bad6fbd 100644 --- a/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx +++ b/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx @@ -1,6 +1,7 @@ import { Meta, ArgsTable, Story, Canvas } from '@storybook/addon-docs'; import TelekomHeader from './TelekomHeader.vue'; import TelekomHeaderDataBackCompat from './TelekomHeaderDataBackCompat.vue'; +import TelekomProfileMenu from "./TelekomProfileMenu.vue"; import TelekomHeaderTemplate from './TelekomHeaderTemplate.vue'; import { mainNavigation, @@ -69,7 +70,7 @@ export const Template = (args, { argTypes }) => ({ :logo-href="logoHref" :logo-title="logoTitle" :logo-hide-title="logoHideTitle" - :meta-nav-aria-label="metaNavAriaLabel" + :meta-nav-aria-label="metaNavAriaLabel" :meta-nav-external-aria-label="metaNavExternalAriaLabel" :lang-switcher-aria-label="langSwitcherAriaLabel" :main-nav-aria-label="mainNavAriaLabel" @@ -77,6 +78,44 @@ export const Template = (args, { argTypes }) => ({ `, }); +export const TemplateProfileMenu = (args, { argTypes }) => ({ + components: { TelekomProfileMenu }, + props: TelekomProfileMenu.props, + template: ` +
+
+
+
+
+
+
+
+ `,
+});
+
## Standard Header