Merge branch 'main' into docs/storybook-internalize-legal-pages

telekom · Jan 14, 2022 · 95c8d09 · 95c8d09
2 parents ba6a565 + e87cc07
commit 95c8d09
Show file tree

Hide file tree

Showing 75 changed files with 363 additions and 190 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,21 @@
 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.42](https://github.com/telekom/scale/compare/v3.0.0-beta.41...v3.0.0-beta.42) (2022-01-14)
+
+
+### Bug Fixes
+
+* **checkbox:** spacing problem ([#783](https://github.com/telekom/scale/issues/783)) ([3507aa2](https://github.com/telekom/scale/commit/3507aa24d37bcdf6c2ea5781e5669c517e358072))
+* **dropdown:** set default background color ([#787](https://github.com/telekom/scale/issues/787)) ([b381940](https://github.com/telekom/scale/commit/b381940f135619e1945db00876b8de30973c7d3f))
+* **notification-message:** add lifecycle method for slots ([#793](https://github.com/telekom/scale/issues/793)) ([026fbd3](https://github.com/telekom/scale/commit/026fbd355fd891944583079373c417e2e37203ee))
+* **spinner:** centering problems ([#791](https://github.com/telekom/scale/issues/791)) ([8f84642](https://github.com/telekom/scale/commit/8f84642c1f3cb0991ca4e3c9b713973b7d32599e))
+* **toggle-button:** left side border is missing when there is only one button in the group ([#782](https://github.com/telekom/scale/issues/782)) ([71469b1](https://github.com/telekom/scale/commit/71469b19f6a02651b690f22dcff78b1826dabc34))
+
+
+
+
+
 # [3.0.0-beta.41](https://github.com/telekom/scale/compare/v3.0.0-beta.40...v3.0.0-beta.41) (2022-01-11)
 
 

diff --git a/lerna.json b/lerna.json
@@ -7,7 +7,7 @@
     "--pure-lockfile"
   ],
   "useWorkspaces": true,
-  "version": "3.0.0-beta.41",
+  "version": "3.0.0-beta.42",
   "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.42](https://github.com/telekom/scale/compare/v3.0.0-beta.41...v3.0.0-beta.42) (2022-01-14)
+
+**Note:** Version bump only for package @telekom/scale-components-angular
+
+
+
+
+
 # [3.0.0-beta.41](https://github.com/telekom/scale/compare/v3.0.0-beta.40...v3.0.0-beta.41) (2022-01-11)
 
 **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.41",
+  "version": "3.0.0-beta.42",
   "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.42](https://github.com/telekom/scale/compare/v3.0.0-beta.41...v3.0.0-beta.42) (2022-01-14)
+
+**Note:** Version bump only for package @telekom/scale-components-react
+
+
+
+
+
 # [3.0.0-beta.41](https://github.com/telekom/scale/compare/v3.0.0-beta.40...v3.0.0-beta.41) (2022-01-11)
 
 **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.41",
+  "version": "3.0.0-beta.42",
   "description": "React proxy for @telekom/scale-components",
   "license": "MPL-2.0",
   "homepage": "https://github.com/telekom/scale",

diff --git a/packages/components-sketch/CHANGELOG.md b/packages/components-sketch/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.42](https://github.com/telekom/scale/compare/v3.0.0-beta.41...v3.0.0-beta.42) (2022-01-14)
+
+**Note:** Version bump only for package @telekom/scale-components-sketch-telekom
+
+
+
+
+
 # [3.0.0-beta.41](https://github.com/telekom/scale/compare/v3.0.0-beta.40...v3.0.0-beta.41) (2022-01-11)
 
 **Note:** Version bump only for package @telekom/scale-components-sketch-telekom

diff --git a/packages/components-sketch/package.json b/packages/components-sketch/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@telekom/scale-components-sketch-telekom",
   "private": true,
-  "version": "3.0.0-beta.41",
+  "version": "3.0.0-beta.42",
   "description": "",
   "license": "MPL-2.0",
   "scripts": {

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.42](https://github.com/telekom/scale/compare/v3.0.0-beta.41...v3.0.0-beta.42) (2022-01-14)
+
+**Note:** Version bump only for package @telekom/scale-components-vue
+
+
+
+
+
 # [3.0.0-beta.41](https://github.com/telekom/scale/compare/v3.0.0-beta.40...v3.0.0-beta.41) (2022-01-11)
 
 **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.41",
+  "version": "3.0.0-beta.42",
   "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,21 @@
 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.42](https://github.com/telekom/scale/compare/v3.0.0-beta.41...v3.0.0-beta.42) (2022-01-14)
+
+
+### Bug Fixes
+
+* **checkbox:** spacing problem ([#783](https://github.com/telekom/scale/issues/783)) ([3507aa2](https://github.com/telekom/scale/commit/3507aa24d37bcdf6c2ea5781e5669c517e358072))
+* **dropdown:** set default background color ([#787](https://github.com/telekom/scale/issues/787)) ([b381940](https://github.com/telekom/scale/commit/b381940f135619e1945db00876b8de30973c7d3f))
+* **notification-message:** add lifecycle method for slots ([#793](https://github.com/telekom/scale/issues/793)) ([026fbd3](https://github.com/telekom/scale/commit/026fbd355fd891944583079373c417e2e37203ee))
+* **spinner:** centering problems ([#791](https://github.com/telekom/scale/issues/791)) ([8f84642](https://github.com/telekom/scale/commit/8f84642c1f3cb0991ca4e3c9b713973b7d32599e))
+* **toggle-button:** left side border is missing when there is only one button in the group ([#782](https://github.com/telekom/scale/issues/782)) ([71469b1](https://github.com/telekom/scale/commit/71469b19f6a02651b690f22dcff78b1826dabc34))
+
+
+
+
+
 # [3.0.0-beta.41](https://github.com/telekom/scale/compare/v3.0.0-beta.40...v3.0.0-beta.41) (2022-01-11)
 
 

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.41",
+  "version": "3.0.0-beta.42",
   "description": "Scale is the digital design system for Telekom products and experiences.",
   "homepage": "https://github.com/telekom/scale",
   "repository": {
@@ -70,7 +70,7 @@
     "@popperjs/core": "2.6.0",
     "@proyecto26/animatable-component": "^1.1.8",
     "@stencil/core": "^2.7.1",
-    "@telekom/scale-design-tokens": "^3.0.0-beta.41",
+    "@telekom/scale-design-tokens": "^3.0.0-beta.42",
     "classnames": "^2.2.6",
     "stencil-inline-svg": "^1.0.1",
     "web-animations-js": "^2.3.2"

diff --git a/packages/components/src/components/checkbox/checkbox.css b/packages/components/src/components/checkbox/checkbox.css
@@ -56,6 +56,8 @@ scale-checkbox {
 :host,
 scale-checkbox {
   display: flex;
+  width: fit-content;
+  padding: 0 2px 0 2px;
   flex-direction: column;
   color: var(--color-text);
 }

diff --git a/packages/components/src/components/dropdown/dropdown.css b/packages/components/src/components/dropdown/dropdown.css
@@ -85,6 +85,7 @@ scale-dropdown {
   text-overflow: ellipsis;
   appearance: none;
   -webkit-appearance: none;
+  background-color: var(--scl-color-background-standard);
 }
 
 @-moz-document url-prefix() {

diff --git a/...ages/components/src/components/loading-spinner/__snapshots__/loading-spinner.spec.ts.snap b/...ages/components/src/components/loading-spinner/__snapshots__/loading-spinner.spec.ts.snap
@@ -15,7 +15,7 @@ exports[`LoadingSpinner should match snapshot 1`] = `
       <div aria-live="polite" class="sr-only" id="spinner-label-1">
         Loading
       </div>
-      <div aria-hidden="true" class="spinner__text" part="text"></div>
+      <div></div>
     </div>
   </mock:shadow-root>
 </scale-loading-spinner>

diff --git a/packages/components/src/components/loading-spinner/loading-spinner.css b/packages/components/src/components/loading-spinner/loading-spinner.css
@@ -11,8 +11,6 @@
   --font-weight: var(--scl-font-weight-bold);
   --font-size: var(--scl-font-size-16);
 
-  --spacing: var(--scl-spacing-8);
-
   --color-circle-primary: var(--scl-color-primary);
   --color-circle-primary-inner: var(--scl-color-grey-20);
   --color-text-primary: var(--scl-color-grey-60);
@@ -55,35 +53,41 @@
 
 .spinner.spinner--alignment-horizontal.spinner--size-small .spinner__text {
   line-height: var(--line-height-size-small);
+  padding-left: 12px;
 }
 
 .spinner.spinner--alignment-horizontal.spinner--size-large .spinner__text {
   line-height: var(--line-height-size-large);
   margin-top: 5px;
+  padding-left: 12px;
 }
 
 .spinner.spinner--alignment-vertical .spinner__text {
   margin-top: var(--spacing);
 }
 
 .spinner.spinner--alignment-vertical.spinner--size-small .spinner__container {
-  height: 24px;
-  padding-bottom: 5px;
+  height: 28px;
+  width: 28px;
+  padding-bottom: 4px;
 }
 
 .spinner.spinner--alignment-vertical.spinner--size-large .spinner__container {
-  height: 48px;
-  padding-bottom: 5px;
+  height: 56px;
+  width: 56px;
+  padding-bottom: 4px;
 }
 
 .spinner.spinner--alignment-horizontal.spinner--size-small .spinner__container {
-  height: 24px;
-  padding-right: 30px;
+  height: 28px;
+  width: 28px;
+  text-align: left;
 }
 
 .spinner.spinner--alignment-horizontal.spinner--size-large .spinner__container {
-  height: 48px;
-  padding-right: 60px;
+  height: 56px;
+  width: 56px;
+  text-align: left;
 }
 
 .spinner .spinner__container .spinner__circle {
@@ -101,35 +105,11 @@
   height: var(--size-outer-small);
 }
 
-.spinner.spinner.spinner--alignment-vertical
-  .spinner__container
-  .spinner__circle-background {
-  margin-left: -15px;
-}
-
 .spinner.spinner--size-large .spinner__container .spinner__circle-background {
   width: var(--size-outer-large);
   height: var(--size-outer-large);
 }
 
-.spinner.spinner--alignment-vertical.spinner--size-large
-  .spinner__container
-  .spinner__circle-background {
-  margin-left: -30px;
-}
-
-.spinner.spinner.spinner--alignment-vertical
-  .spinner__container
-  .spinner__circle {
-  margin-left: -15px;
-}
-
-.spinner.spinner--alignment-vertical.spinner--size-large
-  .spinner__container
-  .spinner__circle {
-  margin-left: -30px;
-}
-
 .spinner.spinner--size-large .spinner__container .spinner__circle {
   width: var(--size-inner-large);
   height: var(--size-inner-large);

diff --git a/packages/components/src/components/loading-spinner/loading-spinner.tsx b/packages/components/src/components/loading-spinner/loading-spinner.tsx
@@ -51,9 +51,13 @@ export class LoadingSpinner {
           <div class="sr-only" aria-live="polite" id={`spinner-label-${i}`}>
             {this.text || 'Loading'}
           </div>
-          <div part="text" class="spinner__text" aria-hidden="true">
-            {this.text}
-          </div>
+          {this.text ? (
+            <div part="text" class="spinner__text" aria-hidden="true">
+              {this.text}
+            </div>
+          ) : (
+            <div></div>
+          )}
         </div>
       </Host>
     );

diff --git a/packages/components/src/components/notification-banner/notification-banner.tsx b/packages/components/src/components/notification-banner/notification-banner.tsx
@@ -9,15 +9,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import {
-  Component,
-  h,
-  Host,
-  Prop,
-  Element,
-  Method,
-  State,
-} from '@stencil/core';
+import { Component, h, Host, Prop, Element, Method } from '@stencil/core';
 import classNames from 'classnames';
 import statusNote from '../../utils/status-note';
 
@@ -37,16 +29,17 @@ export class NotificationBanner {
   @Prop() autoHideDuration?: number = 3000;
   @Prop() href: string;
 
-  @State() hasText?: boolean;
-  @State() hasLink?: boolean;
+  hasSlotText?: boolean;
+  hasSlotLink?: boolean;
 
   componentWillLoad() {
-    if (this.hostElement.querySelectorAll('[slot=text]').length !== 0) {
-      this.hasText = true;
-    }
-    if (this.hostElement.querySelectorAll('[slot=link]').length !== 0) {
-      this.hasLink = true;
-    }
+    this.hasSlotText = !!this.hostElement.querySelector('[slot=text]');
+    this.hasSlotLink = !!this.hostElement.querySelector('[slot=link]');
+  }
+
+  componentDidUpdate() {
+    this.hasSlotText = !!this.hostElement.querySelector('[slot=text]');
+    this.hasSlotLink = !!this.hostElement.querySelector('[slot=link]');
   }
 
   connectedCallback() {
@@ -133,17 +126,17 @@ export class NotificationBanner {
                   <scale-icon-action-circle-close accessibility-title="close" />
                 </button>
               )}
-              {this.hasText ? (
+              {this.hasSlotText && (
                 <div part="text" class="notification-banner__text">
                   <slot name="text" />
                 </div>
-              ) : null}
+              )}
 
-              {this.hasLink ? (
+              {this.hasSlotLink && (
                 <scale-link href={this.href} class="notification-banner__link">
                   <slot name="link" />
                 </scale-link>
-              ) : null}
+              )}
             </div>
           </div>
         </div>
@@ -166,8 +159,8 @@ export class NotificationBanner {
     return classNames(
       name,
       this.variant && `${prefix}variant-${this.variant}`,
-      this.hasText && `${prefix}has-text`,
-      !this.hasText && `${prefix}has-no-text`
+      this.hasSlotText && `${prefix}has-text`,
+      !this.hasSlotText && `${prefix}has-no-text`
     );
   }
 }