Merge branch 'main' into release

telekom · Sep 22, 2023 · 1f3a7f9 · 1f3a7f9
2 parents 0cb7e4e + 8001a87
commit 1f3a7f9
Show file tree

Hide file tree

Showing 723 changed files with 857 additions and 940 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,22 @@
 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.141](https://github.com/telekom/scale/compare/v3.0.0-beta.140...v3.0.0-beta.141) (2023-09-22)
+
+
+### Bug Fixes
+
+* add font-display strategy for performance ([#2135](https://github.com/telekom/scale/issues/2135)) ([ae354cf](https://github.com/telekom/scale/commit/ae354cf0600f9e9329fb9e79fb7969d59b25d185))
+* allow setting href on footer logo ([#2132](https://github.com/telekom/scale/issues/2132)) ([502f9ae](https://github.com/telekom/scale/commit/502f9ae7eb69ef7e1a049d34fb9d95da2f739f24))
+* nav-item positioning ([#2141](https://github.com/telekom/scale/issues/2141)) ([0640ebc](https://github.com/telekom/scale/commit/0640ebcfdab8597ca846838678b57d39a2221bb4))
+* remove default language from logo to avoid deprecation warning ([#2139](https://github.com/telekom/scale/issues/2139)) ([c1589e8](https://github.com/telekom/scale/commit/c1589e8d080ce3c2b0f74c39ea5ba1fb9ec79e1f))
+* set scrolled attribute only when offset is larger than the header ([#2133](https://github.com/telekom/scale/issues/2133)) ([df45405](https://github.com/telekom/scale/commit/df454054bea2d2fb3da259d786cf112b9718433c))
+* **radio-button:** polish click handling and hover/active states ([#2131](https://github.com/telekom/scale/issues/2131)) ([9ea4c6a](https://github.com/telekom/scale/commit/9ea4c6a96d4e0a0b5f8824fc144049baf548988d))
+
+
+
+
+
 # [3.0.0-beta.140](https://github.com/telekom/scale/compare/v3.0.0-beta.139...v3.0.0-beta.140) (2023-09-13)
 
 

diff --git a/lerna.json b/lerna.json
@@ -7,7 +7,7 @@
     "--pure-lockfile"
   ],
   "useWorkspaces": true,
-  "version": "3.0.0-beta.140",
+  "version": "3.0.0-beta.141",
   "command": {
     "version": {
       "allowBranch": "main"

diff --git a/packages/components-angular/CHANGELOG.md b/packages/components-angular/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.141](https://github.com/telekom/scale/compare/v3.0.0-beta.140...v3.0.0-beta.141) (2023-09-22)
+
+**Note:** Version bump only for package @telekom/scale-components-angular
+
+
+
+
+
 # [3.0.0-beta.140](https://github.com/telekom/scale/compare/v3.0.0-beta.139...v3.0.0-beta.140) (2023-09-13)
 
 **Note:** Version bump only for package @telekom/scale-components-angular

diff --git a/packages/components-angular/package.json b/packages/components-angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@telekom/scale-components-angular",
-  "version": "3.0.0-beta.140",
+  "version": "3.0.0-beta.141",
   "description": "Angular specific wrapper for @telekom/scale-components",
   "license": "MPL-2.0",
   "homepage": "https://github.com/telekom/scale",

diff --git a/packages/components-react/CHANGELOG.md b/packages/components-react/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.141](https://github.com/telekom/scale/compare/v3.0.0-beta.140...v3.0.0-beta.141) (2023-09-22)
+
+**Note:** Version bump only for package @telekom/scale-components-react
+
+
+
+
+
 # [3.0.0-beta.140](https://github.com/telekom/scale/compare/v3.0.0-beta.139...v3.0.0-beta.140) (2023-09-13)
 
 **Note:** Version bump only for package @telekom/scale-components-react

diff --git a/packages/components-react/package.json b/packages/components-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@telekom/scale-components-react",
   "sideEffects": false,
-  "version": "3.0.0-beta.140",
+  "version": "3.0.0-beta.141",
   "description": "React proxy for @telekom/scale-components",
   "license": "MPL-2.0",
   "homepage": "https://github.com/telekom/scale",

diff --git a/packages/components-vue/CHANGELOG.md b/packages/components-vue/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.141](https://github.com/telekom/scale/compare/v3.0.0-beta.140...v3.0.0-beta.141) (2023-09-22)
+
+**Note:** Version bump only for package @telekom/scale-components-vue
+
+
+
+
+
 # [3.0.0-beta.140](https://github.com/telekom/scale/compare/v3.0.0-beta.139...v3.0.0-beta.140) (2023-09-13)
 
 **Note:** Version bump only for package @telekom/scale-components-vue

diff --git a/packages/components-vue/package.json b/packages/components-vue/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@telekom/scale-components-vue",
   "sideEffects": false,
-  "version": "3.0.0-beta.140",
+  "version": "3.0.0-beta.141",
   "description": "Vue specific wrapper for @telekom/scale-components",
   "license": "MPL-2.0",
   "homepage": "https://github.com/telekom/scale",

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -3,6 +3,22 @@
 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.141](https://github.com/telekom/scale/compare/v3.0.0-beta.140...v3.0.0-beta.141) (2023-09-22)
+
+
+### Bug Fixes
+
+* add font-display strategy for performance ([#2135](https://github.com/telekom/scale/issues/2135)) ([ae354cf](https://github.com/telekom/scale/commit/ae354cf0600f9e9329fb9e79fb7969d59b25d185))
+* allow setting href on footer logo ([#2132](https://github.com/telekom/scale/issues/2132)) ([502f9ae](https://github.com/telekom/scale/commit/502f9ae7eb69ef7e1a049d34fb9d95da2f739f24))
+* nav-item positioning ([#2141](https://github.com/telekom/scale/issues/2141)) ([0640ebc](https://github.com/telekom/scale/commit/0640ebcfdab8597ca846838678b57d39a2221bb4))
+* remove default language from logo to avoid deprecation warning ([#2139](https://github.com/telekom/scale/issues/2139)) ([c1589e8](https://github.com/telekom/scale/commit/c1589e8d080ce3c2b0f74c39ea5ba1fb9ec79e1f))
+* set scrolled attribute only when offset is larger than the header ([#2133](https://github.com/telekom/scale/issues/2133)) ([df45405](https://github.com/telekom/scale/commit/df454054bea2d2fb3da259d786cf112b9718433c))
+* **radio-button:** polish click handling and hover/active states ([#2131](https://github.com/telekom/scale/issues/2131)) ([9ea4c6a](https://github.com/telekom/scale/commit/9ea4c6a96d4e0a0b5f8824fc144049baf548988d))
+
+
+
+
+
 # [3.0.0-beta.140](https://github.com/telekom/scale/compare/v3.0.0-beta.139...v3.0.0-beta.140) (2023-09-13)
 
 

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@telekom/scale-components",
-  "version": "3.0.0-beta.140",
+  "version": "3.0.0-beta.141",
   "description": "Scale is the digital design system for Telekom products and experiences.",
   "homepage": "https://github.com/telekom/scale",
   "repository": {
@@ -72,7 +72,7 @@
     "@floating-ui/dom": "^0.5.4",
     "@stencil/core": "^2.17.0",
     "@telekom/design-tokens": "1.0.0-beta.8",
-    "@telekom/scale-design-tokens": "^3.0.0-beta.140",
+    "@telekom/scale-design-tokens": "^3.0.0-beta.141",
     "classnames": "^2.2.6",
     "stencil-inline-svg": "^1.0.1"
   }

diff --git a/packages/components/scripts/generate-icons.js b/packages/components/scripts/generate-icons.js
@@ -31,7 +31,7 @@ const { parse } = require('svg-parser');
 // const toHTML = require('hast-util-to-html');
 
 const svgo = new SVGO({
-  plugins: [{ removeViewBox: false }, { removeXMLNS: true }],
+  plugins: [{ removeViewBox: false }, { removeXMLNS: true }, {cleanupIDs: false}],
 });
 
 const INPUT_GLOB = process.env.WHITELABEL

diff --git a/packages/components/src/components/radio-button/radio-button.css b/packages/components/src/components/radio-button/radio-button.css
@@ -74,7 +74,6 @@ scale-radio-button {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  cursor: pointer;
   width: fit-content;
 }
 
@@ -128,15 +127,15 @@ scale-icon-alert-error {
   cursor: pointer;
 }
 
-.radio-button:hover input:not(:checked):not([disabled]) {
+.radio-button input:not(:checked):not([disabled]):hover {
   box-shadow: none;
   border-color: var(--telekom-color-ui-border-hovered);
   background-color: var(--telekom-color-ui-state-fill-hovered);
 }
-.radio-button:hover input:not(:checked):not([disabled]) ~ label {
+.radio-button input:not(:checked):not([disabled]):hover ~ label {
   color: var(--color-primary-hover);
 }
-.radio-button:active input:not(:checked):not([disabled]) {
+.radio-button input:not(:checked):not([disabled]):active {
   border-color: var(--telekom-color-ui-border-pressed);
   background-color: var(--telekom-color-ui-state-fill-pressed);
 }

diff --git a/packages/components/src/components/radio-button/radio-button.tsx b/packages/components/src/components/radio-button/radio-button.tsx
@@ -93,15 +93,6 @@ export class RadioButton {
     }
   };
 
-  // Prevent click event being fired twice when the target is the label.
-  handleClick = (event: any) => {
-    event.stopPropagation();
-    if (!this.disabled) {
-      this.checked = true;
-      this.uncheckSiblings();
-    }
-  };
-
   // We manually set `checked` to false on sibling <scale-radio-button> elements,
   // otherwise they stayed `checked` after being clicked once, forever.
   uncheckSiblings() {
@@ -137,7 +128,7 @@ export class RadioButton {
 
     return (
       <Host>
-        <div class={this.getCssClassMap()} onClick={this.handleClick}>
+        <div class={this.getCssClassMap()}>
           <input
             type="radio"
             name={this.name}
@@ -149,9 +140,7 @@ export class RadioButton {
             {...ariaInvalidAttr}
             {...(this.helperText ? ariaDescribedByAttr : {})}
           />
-          <label htmlFor={this.inputId} onClick={this.handleClick}>
-            {this.label}
-          </label>
+          <label htmlFor={this.inputId}>{this.label}</label>
           {!!this.helperText && (
             <div
               class="radio-button__meta"

diff --git a/packages/components/src/components/telekom/app-header/app-header.tsx b/packages/components/src/components/telekom/app-header/app-header.tsx
@@ -467,7 +467,6 @@ export class Header {
                   ) : (
                     <scale-logo
                       transparent
-                      language={this.claimLang}
                       href={this.logoHref}
                       logoTitle={this.logoTitle}
                       logoHideTitle={this.logoHideTitle}

diff --git a/packages/components/src/components/telekom/logo/logo.tsx b/packages/components/src/components/telekom/logo/logo.tsx
@@ -25,7 +25,7 @@ export class Logo {
   /** (optional) Set transparent background */
   @Prop() transparent: boolean = false;
   /** @deprecated; (optional) Language of the logo text/ claimOff showes just the T Logo */
-  @Prop() language:
+  @Prop() language?:
     | 'de'
     | 'en'
     | 'cz'
@@ -36,7 +36,7 @@ export class Logo {
     | 'mk_kyr'
     | 'ro'
     | 'sk'
-    | string = 'en';
+    | string;
   /** (optional) The height in pixels */
   @Prop() size?: number = 38;
   /** (optional) Set a link */
@@ -93,7 +93,7 @@ export class Logo {
               window.scrollTo({ top: 0 });
             }
           }}
-          title={this.logoHideTitle ? '' : this.logoTitle}
+          title={this.logoHideTitle ? undefined : this.logoTitle}
           aria-describedby={this.logoAriaDescribedBy}
           aria-hidden={this.logoAriaHidden}
           tabindex={this.logoAriaHidden ? -1 : 0}

diff --git a/packages/components/src/components/telekom/telekom-footer/readme.md b/packages/components/src/components/telekom/telekom-footer/readme.md
@@ -5,6 +5,15 @@
 <!-- Auto Generated Below -->
 
 
+## Properties
+
+| Property        | Attribute         | Description                        | Type      | Default                 |
+| --------------- | ----------------- | ---------------------------------- | --------- | ----------------------- |
+| `logoHideTitle` | `logo-hide-title` | (optional) set logo specific title | `boolean` | `false`                 |
+| `logoHref`      | `logo-href`       | (optional) Logo link               | `string`  | `'javascript:void(0);'` |
+| `logoTitle`     | `logo-title`      | (optional) set logo specific title | `string`  | `'Telekom Logo'`        |
+
+
 ## Shadow Parts
 
 | Part           | Description |

diff --git a/packages/components/src/components/telekom/telekom-footer/telekom-footer-content.tsx b/packages/components/src/components/telekom/telekom-footer/telekom-footer-content.tsx
@@ -9,14 +9,21 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Component, h, Host } from '@stencil/core';
+import { Component, h, Host, Prop } from '@stencil/core';
 
 @Component({
   tag: 'scale-telekom-footer-content',
   styleUrl: 'telekom-footer-content.css',
   shadow: true,
 })
 export class TelekomFooterContent {
+  /** (optional) Logo link */
+  @Prop() logoHref?: string = 'javascript:void(0);';
+  /** (optional) set logo specific title */
+  @Prop() logoTitle?: string = 'Telekom Logo';
+  /** (optional) set logo specific title */
+  @Prop() logoHideTitle?: boolean = false;
+
   render() {
     return (
       <Host>
@@ -32,6 +39,9 @@ export class TelekomFooterContent {
                     'var(--telekom-line-weight-highlight) solid var(--telekom-color-functional-focus-on-dark-background)',
                 }}
                 transparent
+                href={this.logoHref}
+                logoHideTitle={this.logoHideTitle}
+                logoTitle={this.logoHideTitle ? undefined : this.logoTitle}
               ></scale-logo>
             </div>
             <div part="body">

diff --git a/packages/components/src/components/telekom/telekom-header/telekom-header.tsx b/packages/components/src/components/telekom/telekom-header/telekom-header.tsx
@@ -47,7 +47,9 @@ export class TelekomHeader {
 
   @Listen('scroll', { target: 'document' })
   onScroll() {
-    this.scrolled = window.pageYOffset > 2;
+    // 48px is the height of the header, set scrolled when the user scrolls past it
+    // todo: calculate this value dynamically (for slim header, smaller viewports, etc)
+    this.scrolled = window.pageYOffset > 48;
     this.scrolledBack =
       this.pageYOffset !== window.pageYOffset && window.pageYOffset <= 0;
     this.pageYOffset = pageYOffset;

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
@@ -67,7 +67,7 @@
 }
 
 ::slotted(a) {
-  position: absolute;
+  position: relative;
   display: flex;
   align-items: center;
   height: var(--height);