From 1aa5df42bbeaeddc0b842c304dad0b7f6c89fd5c Mon Sep 17 00:00:00 2001 From: Denis Kutlovci <Denis.kutlovci@telekom.de> Date: Fri, 28 May 2021 13:05:56 +0200 Subject: [PATCH 01/19] feat: init badge --- .../components/src/components/badge/badge.css | 39 ++++++++++++ .../src/components/badge/badge.spec.ts | 52 ++++++++++++++++ .../components/src/components/badge/badge.tsx | 61 +++++++++++++++++++ 3 files changed, 152 insertions(+) create mode 100644 packages/components/src/components/badge/badge.css create mode 100644 packages/components/src/components/badge/badge.spec.ts create mode 100644 packages/components/src/components/badge/badge.tsx diff --git a/packages/components/src/components/badge/badge.css b/packages/components/src/components/badge/badge.css new file mode 100644 index 0000000000..b5f17cab5f --- /dev/null +++ b/packages/components/src/components/badge/badge.css @@ -0,0 +1,39 @@ +.badge { + display: flex; + justify-content: center; + align-items: center; + width: var(--badge-size); + height: var(--badge-size); + border-radius: 100%; + background: var(--badge-color); + } + + .badge--inner { + width: var(--badge-text-width); + height: var(--badge-text-height); + transform: rotateZ(var(--badge-rotation)); + overflow: hidden; + } + + .badge--color-magenta { + background-color: var(--scl-color-primary); + } + + .badge--color-black { + background-color: var(--scl-color-black); + } + + .badge--color-white { + background-color: var(--scl-color-white); + } + + .badge-size-big { + width: 160px; + height: 160px; + } + + .badge-size-small { + width: 120px; + height: 120px; + } + \ No newline at end of file diff --git a/packages/components/src/components/badge/badge.spec.ts b/packages/components/src/components/badge/badge.spec.ts new file mode 100644 index 0000000000..78b0cc6e83 --- /dev/null +++ b/packages/components/src/components/badge/badge.spec.ts @@ -0,0 +1,52 @@ +import { newSpecPage } from '@stencil/core/testing'; +import { Badge } from './badge'; + +it('should reflect attributes/props', async () => { + const page = await newSpecPage({ + components: [Badge], + html: `<scale-badge + size ="big" + color ="magenta" + rotation ="15"> + </scale-badge>`, + }); + + expect(page.rootInstance.size).toBe('big'); + expect(page.rootInstance.color).toBe('magenta'); + expect(page.rootInstance.rotation).toBe(15); +}); + +it('check style --badge-text-width is ${width} for size="big"', async () => { + const widthBig = '126.5px'; + const page = await newSpecPage({ + components: [Badge], + html: `<scale-badge size="big"></scale-badge>`, + }); + const styles = page.rootInstance.displayStyle(); + expect(styles.includes(`--badge-text-width:${widthBig}`)).toBe(true); +}); + +it('check style --badge-text-width is ${width} for size="small"', async () => { + const widthSmall = '86px'; + const page = await newSpecPage({ + components: [Badge], + html: `<scale-badge size="small"></scale-badge>`, + }); + const styles = page.rootInstance.displayStyle(); + expect(styles.includes(`--badge-text-width:${widthSmall}`)).toBe(true); +}); + +it('checks another color, other than prop', async () => { + const page = await newSpecPage({ + components: [Badge], + html: `<scale-badge + size ="big" + color ="red" + rotation ="15"> + </scale-badge>`, + }); + + expect(page.rootInstance.size).toBe('big'); + expect(page.rootInstance.color).toBe('red'); + expect(page.rootInstance.rotation).toBe(15); +}); diff --git a/packages/components/src/components/badge/badge.tsx b/packages/components/src/components/badge/badge.tsx new file mode 100644 index 0000000000..9616bcede4 --- /dev/null +++ b/packages/components/src/components/badge/badge.tsx @@ -0,0 +1,61 @@ +import { Component, h, Host, Prop } from '@stencil/core'; +import classNames from 'classnames'; + +const bigTextBox = { + width: 126.5, + height: 96, +}; + +const smallTextBox = { + width: 86, + height: 88, +}; + +@Component({ + tag: 'scale-badge', + styleUrl: 'badge.css', + shadow: true, +}) +export class Badge { + /** (optional) Variant size of the badge itself */ + @Prop({ mutable: true }) size: 'big' | 'small' = 'big'; + /** (optional) Variant color/filling of the badge */ + @Prop({ mutable: true }) color: 'magenta' | 'white' | 'black' | string = + 'magenta'; + /** (optional) Variant rotation of the badge/circle */ + @Prop({ mutable: true }) rotation: number = 0; + + displayStyle() { + return `:host { + --badge-rotation: ${this.rotation}deg; + --badge-text-width:${ + this.size === 'big' ? bigTextBox.width : smallTextBox.width + }px; + --badge-text-height:${ + this.size === 'big' ? bigTextBox.height : smallTextBox.height + }px; + }`; + } + + render() { + return ( + <Host> + <style>{this.displayStyle()}</style> + <div class={this.getCssClassMap()}> + <div class="badge--inner"> + <slot></slot> + </div> + </div> + ‚ + </Host> + ); + } + + getCssClassMap() { + return classNames( + 'badge', + this.color && `badge--color-${this.color}`, + this.size && `badge-size-${this.size}` + ); + } +} From a77a160104fa139581dca293c3e02003bdaa84dd Mon Sep 17 00:00:00 2001 From: marvinLaubenstein <marvin.laubenstein@telekom.de> Date: Fri, 28 May 2021 14:02:35 +0200 Subject: [PATCH 02/19] refactor: everything --- .../components/src/components/badge/badge.css | 81 ++++++++++--------- .../components/src/components/badge/badge.tsx | 55 +++++++------ 2 files changed, 75 insertions(+), 61 deletions(-) diff --git a/packages/components/src/components/badge/badge.css b/packages/components/src/components/badge/badge.css index b5f17cab5f..685fd3e18c 100644 --- a/packages/components/src/components/badge/badge.css +++ b/packages/components/src/components/badge/badge.css @@ -1,39 +1,44 @@ +:host { + --big-badge-height: 160px; + --big-badge-width: 160px; + --small-badge-height: 120px; + --small-badge-width: 120px; + --big-inner-height: 96px; + --big-inner-width: 126.5px; + --small-inner-height: 88px; + --small-inner-width: 86px; +} + .badge { - display: flex; - justify-content: center; - align-items: center; - width: var(--badge-size); - height: var(--badge-size); - border-radius: 100%; - background: var(--badge-color); - } - - .badge--inner { - width: var(--badge-text-width); - height: var(--badge-text-height); - transform: rotateZ(var(--badge-rotation)); - overflow: hidden; - } - - .badge--color-magenta { - background-color: var(--scl-color-primary); - } - - .badge--color-black { - background-color: var(--scl-color-black); - } - - .badge--color-white { - background-color: var(--scl-color-white); - } - - .badge-size-big { - width: 160px; - height: 160px; - } - - .badge-size-small { - width: 120px; - height: 120px; - } - \ No newline at end of file + display: flex; + justify-content: center; + align-items: center; + border-radius: 100%; + background: var(--badge-color); + border-style: solid; +} + +.badge.badge--size-big { + width: var(--big-badge-width); + height: var(--big-badge-height); +} + +.badge.badge--size-small { + width: var(--small-badge-width); + height: var(--small-badge-height); +} + +.badge.badge--size-big .badge--inner { + width: var(--big-inner-width); + height: var(--big-inner-height); +} + +.badge.badge--size-small .badge--inner { + width: var(--small-inner-width); + height: var(--small-inner-height); +} + +.badge--inner { + transform: rotateZ(var(--badge-rotation)); + overflow: hidden; +} diff --git a/packages/components/src/components/badge/badge.tsx b/packages/components/src/components/badge/badge.tsx index 9616bcede4..c5f4d31df9 100644 --- a/packages/components/src/components/badge/badge.tsx +++ b/packages/components/src/components/badge/badge.tsx @@ -1,15 +1,12 @@ -import { Component, h, Host, Prop } from '@stencil/core'; -import classNames from 'classnames'; - -const bigTextBox = { - width: 126.5, - height: 96, +const color = { + magenta: '#E20074', + white: '#FFFFFF', + black: '#191919', + blue: '#00739F', }; -const smallTextBox = { - width: 86, - height: 88, -}; +import { Component, h, Host, Prop } from '@stencil/core'; +import classNames from 'classnames'; @Component({ tag: 'scale-badge', @@ -27,13 +24,15 @@ export class Badge { displayStyle() { return `:host { - --badge-rotation: ${this.rotation}deg; - --badge-text-width:${ - this.size === 'big' ? bigTextBox.width : smallTextBox.width - }px; - --badge-text-height:${ - this.size === 'big' ? bigTextBox.height : smallTextBox.height - }px; + --badge-rotation: ${this.rotation}deg; + --badge-color: ${ + this.color === 'magenta' || + this.color === 'black' || + this.color === 'white' || + this.color === 'blue' + ? color[this.color] + : this.color + }; }`; } @@ -41,21 +40,31 @@ export class Badge { return ( <Host> <style>{this.displayStyle()}</style> - <div class={this.getCssClassMap()}> - <div class="badge--inner"> + <div part={this.getBasePartMap()} class={this.getCssClassMap()}> + <div part="inner" class="badge--inner"> <slot></slot> </div> </div> - ‚ </Host> ); } + getBasePartMap() { + return this.getCssOrBasePartMap('basePart'); + } + getCssClassMap() { + return this.getCssOrBasePartMap('css'); + } + + getCssOrBasePartMap(mode: 'basePart' | 'css') { + const name = 'badge'; + const prefix = mode === 'basePart' ? '' : `${name}--`; + return classNames( - 'badge', - this.color && `badge--color-${this.color}`, - this.size && `badge-size-${this.size}` + name, + this.color && `${prefix}color-${this.color}`, + this.size && `${prefix}size-${this.size}` ); } } From 4663efd0c65d530154272deb822f85ba9f69b1bc Mon Sep 17 00:00:00 2001 From: marvinLaubenstein <marvin.laubenstein@telekom.de> Date: Fri, 28 May 2021 14:15:40 +0200 Subject: [PATCH 03/19] feat: init hbs --- packages/components-sketch/views/badge.hbs | 51 +++++++++++++++++++ packages/components-sketch/views/index.hbs | 1 + .../components/src/components/badge/readme.md | 26 ++++++++++ 3 files changed, 78 insertions(+) create mode 100644 packages/components-sketch/views/badge.hbs create mode 100644 packages/components/src/components/badge/readme.md diff --git a/packages/components-sketch/views/badge.hbs b/packages/components-sketch/views/badge.hbs new file mode 100644 index 0000000000..35a61e5cfd --- /dev/null +++ b/packages/components-sketch/views/badge.hbs @@ -0,0 +1,51 @@ + + +<div data-sketch-artboard="Badge" class="artboard"> + <h1 class="title--artboard">Badge</h1> + + <h2 class="title--artboard-section">Badge</h2> + <div class="agent-states--grid" data-category="Not Visited"> + <div class="agent-states--item"> + <p class="agent-states--label">Big Magenta</p> + <scale-badge size="big" style="--badge-color: magenta" rotation="0"> + <div> + <div + style=" + text-align: center; + font-size: 20px; + font-family: TeleNeo; + color: white; + font-weight: 400; + " + > + Für nur + </div> + <div + style=" + text-align: center; + font-size: 60px; + font-family: TeleNeo; + color: white; + font-weight: 700; + " + > + <span> 15 € </span> + </div> + </div> + </scale-badge> + </div> + </div> +</div> + +<script src="/symbol_names.js"></script> +<script> + Array.from(document.querySelectorAll('scale-link')).forEach((btn, i) => { + btn.dataset.sketchSymbol = `Link / ${order( + 1, + getCategoryName(btn) + )} / ${order( + 2, + btn.dataset.hasIcon ? 'With Icon' : 'Without Icon' + )} / ${order(4, getStateName(btn))}`; + }); +</script> diff --git a/packages/components-sketch/views/index.hbs b/packages/components-sketch/views/index.hbs index e082993c41..b5ef5e177c 100644 --- a/packages/components-sketch/views/index.hbs +++ b/packages/components-sketch/views/index.hbs @@ -12,6 +12,7 @@ file, You can obtain one at https://mozilla.org/MPL/2.0/. <h1 class="title--artboard">Scale Components</h1> <p><a href="/accordion">Accordion</a></p> <p><a href="/button">Button</a></p> + <p><a href="/badge">Badge</a></p> <p><a href="/breadcrumb">Breadcrumb</a></p> <p><a href="/card">Card</a></p> <p><a href="/checkbox">Checkbox</a></p> diff --git a/packages/components/src/components/badge/readme.md b/packages/components/src/components/badge/readme.md new file mode 100644 index 0000000000..27a1794873 --- /dev/null +++ b/packages/components/src/components/badge/readme.md @@ -0,0 +1,26 @@ +# scale-badge + + + +<!-- Auto Generated Below --> + + +## Properties + +| Property | Attribute | Description | Type | Default | +| ---------- | ---------- | ----------------------------------------------- | ------------------ | ----------- | +| `color` | `color` | (optional) Variant color/filling of the badge | `string` | `'magenta'` | +| `rotation` | `rotation` | (optional) Variant rotation of the badge/circle | `number` | `0` | +| `size` | `size` | (optional) Variant size of the badge itself | `"big" \| "small"` | `'big'` | + + +## Shadow Parts + +| Part | Description | +| --------- | ----------- | +| `"inner"` | | + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* From 87677391027a808d967055ff6e97014731bedb1d Mon Sep 17 00:00:00 2001 From: marvinLaubenstein <marvin.laubenstein@telekom.de> Date: Fri, 28 May 2021 14:34:09 +0200 Subject: [PATCH 04/19] refactor: inline style to css class mapping --- packages/components/src/components/badge/badge.css | 14 ++++++++++++++ packages/components/src/components/badge/badge.tsx | 11 +---------- 2 files changed, 15 insertions(+), 10 deletions(-) diff --git a/packages/components/src/components/badge/badge.css b/packages/components/src/components/badge/badge.css index 685fd3e18c..bd175c816d 100644 --- a/packages/components/src/components/badge/badge.css +++ b/packages/components/src/components/badge/badge.css @@ -7,6 +7,7 @@ --big-inner-width: 126.5px; --small-inner-height: 88px; --small-inner-width: 86px; + --badge-color: #e20074; } .badge { @@ -18,6 +19,19 @@ border-style: solid; } +.badge.badge--color-magenta { + background: #e20074; +} +.badge.badge--color-white { + background: #ffffff; +} +.badge.badge--color-blue { + background: #00739f; +} +.badge.badge--color-black { + background: #191919; +} + .badge.badge--size-big { width: var(--big-badge-width); height: var(--big-badge-height); diff --git a/packages/components/src/components/badge/badge.tsx b/packages/components/src/components/badge/badge.tsx index c5f4d31df9..1c58caf840 100644 --- a/packages/components/src/components/badge/badge.tsx +++ b/packages/components/src/components/badge/badge.tsx @@ -17,22 +17,13 @@ export class Badge { /** (optional) Variant size of the badge itself */ @Prop({ mutable: true }) size: 'big' | 'small' = 'big'; /** (optional) Variant color/filling of the badge */ - @Prop({ mutable: true }) color: 'magenta' | 'white' | 'black' | string = - 'magenta'; + @Prop({ mutable: true }) color: 'magenta' | 'white' | 'black' | 'blue'; /** (optional) Variant rotation of the badge/circle */ @Prop({ mutable: true }) rotation: number = 0; displayStyle() { return `:host { --badge-rotation: ${this.rotation}deg; - --badge-color: ${ - this.color === 'magenta' || - this.color === 'black' || - this.color === 'white' || - this.color === 'blue' - ? color[this.color] - : this.color - }; }`; } From bc2ef70528daa9b365b9791b4a19e5d1ebcebda0 Mon Sep 17 00:00:00 2001 From: marvinLaubenstein <marvin.laubenstein@telekom.de> Date: Fri, 28 May 2021 14:36:54 +0200 Subject: [PATCH 05/19] refactor: deleting global variables --- packages/components/src/components/badge/badge.tsx | 7 ------- 1 file changed, 7 deletions(-) diff --git a/packages/components/src/components/badge/badge.tsx b/packages/components/src/components/badge/badge.tsx index 1c58caf840..82a0c70474 100644 --- a/packages/components/src/components/badge/badge.tsx +++ b/packages/components/src/components/badge/badge.tsx @@ -1,10 +1,3 @@ -const color = { - magenta: '#E20074', - white: '#FFFFFF', - black: '#191919', - blue: '#00739F', -}; - import { Component, h, Host, Prop } from '@stencil/core'; import classNames from 'classnames'; From 624cd1642c930381c9b2cac4fa0a606100409f7d Mon Sep 17 00:00:00 2001 From: marvinLaubenstein <marvin.laubenstein@telekom.de> Date: Fri, 28 May 2021 14:58:55 +0200 Subject: [PATCH 06/19] refactor: removing border --- packages/components/src/components/badge/badge.css | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/src/components/badge/badge.css b/packages/components/src/components/badge/badge.css index bd175c816d..8a0e9fc789 100644 --- a/packages/components/src/components/badge/badge.css +++ b/packages/components/src/components/badge/badge.css @@ -16,7 +16,6 @@ align-items: center; border-radius: 100%; background: var(--badge-color); - border-style: solid; } .badge.badge--color-magenta { From c36e864f11801fcc0b7b82be6605ff2ada1da08f Mon Sep 17 00:00:00 2001 From: marvinLaubenstein <marvin.laubenstein@telekom.de> Date: Fri, 28 May 2021 15:00:04 +0200 Subject: [PATCH 07/19] refactor: deleting old test cases --- .../src/components/badge/badge.spec.ts | 20 ------------------- 1 file changed, 20 deletions(-) diff --git a/packages/components/src/components/badge/badge.spec.ts b/packages/components/src/components/badge/badge.spec.ts index 78b0cc6e83..2617757656 100644 --- a/packages/components/src/components/badge/badge.spec.ts +++ b/packages/components/src/components/badge/badge.spec.ts @@ -16,26 +16,6 @@ it('should reflect attributes/props', async () => { expect(page.rootInstance.rotation).toBe(15); }); -it('check style --badge-text-width is ${width} for size="big"', async () => { - const widthBig = '126.5px'; - const page = await newSpecPage({ - components: [Badge], - html: `<scale-badge size="big"></scale-badge>`, - }); - const styles = page.rootInstance.displayStyle(); - expect(styles.includes(`--badge-text-width:${widthBig}`)).toBe(true); -}); - -it('check style --badge-text-width is ${width} for size="small"', async () => { - const widthSmall = '86px'; - const page = await newSpecPage({ - components: [Badge], - html: `<scale-badge size="small"></scale-badge>`, - }); - const styles = page.rootInstance.displayStyle(); - expect(styles.includes(`--badge-text-width:${widthSmall}`)).toBe(true); -}); - it('checks another color, other than prop', async () => { const page = await newSpecPage({ components: [Badge], From ed4339b6f93205e26ff9568ff7496d25ae747d74 Mon Sep 17 00:00:00 2001 From: Denis Kutlovci <Denis.kutlovci@telekom.de> Date: Tue, 8 Jun 2021 15:06:01 +0200 Subject: [PATCH 08/19] added storybook --- packages/components-sketch/views/badge.hbs | 4 +- .../components/src/components/badge/readme.md | 10 +- packages/components/src/html/index.html | 86 ++++++- .../.storybook/usage-addon/usage.js | 4 + .../3_components/badge/Badge.stories.mdx | 234 ++++++++++++++++++ .../stories/3_components/badge/ScaleBadge.vue | 20 ++ .../stories/3_components/badge/badge.md | 77 ++++++ .../stories/3_components/badge/badge_de.md | 13 + 8 files changed, 439 insertions(+), 9 deletions(-) create mode 100644 packages/storybook-vue/stories/3_components/badge/Badge.stories.mdx create mode 100644 packages/storybook-vue/stories/3_components/badge/ScaleBadge.vue create mode 100644 packages/storybook-vue/stories/3_components/badge/badge.md create mode 100644 packages/storybook-vue/stories/3_components/badge/badge_de.md diff --git a/packages/components-sketch/views/badge.hbs b/packages/components-sketch/views/badge.hbs index 35a61e5cfd..4a8e68fa33 100644 --- a/packages/components-sketch/views/badge.hbs +++ b/packages/components-sketch/views/badge.hbs @@ -39,8 +39,8 @@ <script src="/symbol_names.js"></script> <script> - Array.from(document.querySelectorAll('scale-link')).forEach((btn, i) => { - btn.dataset.sketchSymbol = `Link / ${order( + Array.from(document.querySelectorAll('scale-badge')).forEach((btn, i) => { + btn.dataset.sketchSymbol = `Badge / ${order( 1, getCategoryName(btn) )} / ${order( diff --git a/packages/components/src/components/badge/readme.md b/packages/components/src/components/badge/readme.md index 27a1794873..21af80c291 100644 --- a/packages/components/src/components/badge/readme.md +++ b/packages/components/src/components/badge/readme.md @@ -7,11 +7,11 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ---------- | ---------- | ----------------------------------------------- | ------------------ | ----------- | -| `color` | `color` | (optional) Variant color/filling of the badge | `string` | `'magenta'` | -| `rotation` | `rotation` | (optional) Variant rotation of the badge/circle | `number` | `0` | -| `size` | `size` | (optional) Variant size of the badge itself | `"big" \| "small"` | `'big'` | +| Property | Attribute | Description | Type | Default | +| ---------- | ---------- | ----------------------------------------------- | ------------------------------------------- | ----------- | +| `color` | `color` | (optional) Variant color/filling of the badge | `"black" \| "blue" \| "magenta" \| "white"` | `undefined` | +| `rotation` | `rotation` | (optional) Variant rotation of the badge/circle | `number` | `0` | +| `size` | `size` | (optional) Variant size of the badge itself | `"big" \| "small"` | `'big'` | ## Shadow Parts diff --git a/packages/components/src/html/index.html b/packages/components/src/html/index.html index 9f59b0024d..e622c3bbdf 100644 --- a/packages/components/src/html/index.html +++ b/packages/components/src/html/index.html @@ -36,8 +36,90 @@ <body> <h1>Components</h1> - <h3>Alert</h3> - <scale-alert headline="Alert Headline">Some alert content</scale-alert> + + <h3>BADGE COMPONENT </h3> + <h1>Badge 1 Orange/big</h1> + <scale-badge size="big" style="--badge-color:blue" rotation="0"> + <div> + <div style="text-align:center; font-size:20px; font-family:TeleNeo; color:white; font-weight:400;"> + Für nur + </div> + <div style="text-align:center; font-size: 60px; font-family: TeleNeo; color: white; font-weight: 700;"> + <span> + 15 € + </span> + </div> + </div> + </scale-badge> + <h1>Badge 2: White/small/rotation</h1> + <scale-badge size="small" color="white" rotation="30"> + <div> + <div style="text-align: center; font-size: 15px; font-family: TeleNeo; color: black; font-weight: 400; margin-bottom: 10px;"> + Für nur + </div> + <div style="text-align: center; font-size: 40px; font-family: TeleNeo; color: black; font-weight: 700;"> + <span> + 15 € + </span> + </div> + </div> + </scale-badge> + <h1>Badge 3: Black/rotation/big</h1> + <scale-badge size="big" color="black" rotation="50"> + <div> + <div style="text-align:center; font-size:20px; font-family:TeleNeo; color:white; font-weight:400;"> + Für nur + </div> + <div style="text-align:center; font-size: 60px; font-family: TeleNeo; color: white; font-weight: 700;"> + <span> + 15 € + </span> + </div> + </div> + </scale-badge> + <h1>Badge 4: Any color chosen</h1> + <scale-badge size="small" color="orange" rotation="0"> + <div> + <div style="text-align: center; font-size: 15px; font-family: TeleNeo; color: black; font-weight: 400; margin-bottom: 10px;"> + Für nur + </div> + <div style="text-align: center; font-size: 40px; font-family: TeleNeo; color: black; font-weight: 700;"> + <span>15 €</span> + </div> + </div> + </scale-badge> + <h1>Badge 5 Datum: Black/rotation/big</h1> + <scale-badge size="big" color="skyblue"> + <div> + <div style=" text-align: center; font-size: 25px; font-family: TeleNeo; color: white; font-weight: 400; margin-bottom: 10px;"> + BIS + </div> + <div style="text-align: center; font-size: 25px; font-family: TeleNeo; color: white; font-weight: 400; margin-bottom: 10px;"> + <span> + 31.01.2021 + </span> + </div> + </div> + </scale-badge> + <h1>Badge 6: Star Hover Info</h1> + <scale-badge size="big" color="magenta" rotation="0"> + <div> + <div style="text-align: center; font-size: 25px; font-family: TeleNeo; color: black; font-weight: 400; margin-bottom: 10px;"> + ab + </div> + <div style="text-align: center; font-size: 35px; font-family: TeleNeo; color: black; font-weight: 700;"> + <span> + 19,95 € + </span> + <sup title="This offer is only valid for a limited time. Free shipping on all orders." style="font-size: 30px; color: black; cursor: help;">*</sup> + </div> + </div> + </scale-badge> + + + + + <h3>Rating Stars</h3> <h4>rating = 1</h4> diff --git a/packages/storybook-vue/.storybook/usage-addon/usage.js b/packages/storybook-vue/.storybook/usage-addon/usage.js index 1de07fe69a..7d347efd14 100644 --- a/packages/storybook-vue/.storybook/usage-addon/usage.js +++ b/packages/storybook-vue/.storybook/usage-addon/usage.js @@ -73,6 +73,8 @@ import textField_en from 'raw-loader!../../stories/3_components/text-field/text- import textField_de from 'raw-loader!../../stories/3_components/text-field/text-field_de.md'; import footer_en from 'raw-loader!../../stories/3_components/footer/footer.md'; import footer_de from 'raw-loader!../../stories/3_components/footer/footer_de.md'; +import badge_de from 'raw-loader!../../stories/3_components/badge/badge_de.md'; +import badge_en from 'raw-loader!../../stories/3_components/badge/badge.md'; const NOT_A_COMPONENT_MD = '`Browse to any component to see usage.`'; const COMPONENT_NOT_MAPPED_MD = @@ -109,6 +111,8 @@ const Usage = (props) => { checkbox_de, divider_en, divider_de, + badge_en, + badge_de, 'data-grid_en': datagrid_en, 'data-grid_de': datagrid_de, 'date-picker_en': date_picker_en, diff --git a/packages/storybook-vue/stories/3_components/badge/Badge.stories.mdx b/packages/storybook-vue/stories/3_components/badge/Badge.stories.mdx new file mode 100644 index 0000000000..0db48e9951 --- /dev/null +++ b/packages/storybook-vue/stories/3_components/badge/Badge.stories.mdx @@ -0,0 +1,234 @@ +import { + Meta, + Story, + ArgsTable, + Canvas, + Description, +} from '@storybook/addon-docs/blocks'; +import ScaleBadge from './ScaleBadge.vue'; + +<Meta title="Beta Components/Badge" component={ScaleBadge} argTypes={{}} /> + +export const Template = (args, { argTypes }) => ({ + components: { ScaleBadge }, + props: { + label: String, + ...ScaleBadge.props, + }, + template: ` + <scale-badge :size="size" :color="color" :rotation="rotation"> + <div> + <div style="text-align:center; font-size:20px; font-family:TeleNeo; color:white; font-weight:400;"> + Für nur + </div> + <div style="text-align:center; font-size: 60px; font-family: TeleNeo; color: white; font-weight: 700;"> + <span> + 15 € + </span> + </div> + </div> + </scale-badge> + `, +}); + +export const Template2 = (args, { argTypes }) => ({ + components: { ScaleBadge }, + props: { + label: String, + ...ScaleBadge.props, + }, + template: ` + <scale-badge :size="size" :color="color" :rotation="rotation"> + <div> + <div style="text-align: center; font-size: 15px; font-family: TeleNeo; color: white; font-weight: 400; margin-bottom: 10px;"> + Für nur + </div> + <div style="text-align: center; font-size: 40px; font-family: TeleNeo; color: white; font-weight: 700;"> + <span> + 15 € + </span> + </div> + </div> + </scale-badge> + `, +}); + +export const Template3 = (args, { argTypes }) => ({ + components: { ScaleBadge }, + props: { + label: String, + ...ScaleBadge.props, + }, + template: ` + <scale-badge :size="size" :color="color" :rotation="rotation"> + <div> + <div style="text-align: center; font-size: 25px; font-family: TeleNeo; color: white; font-weight: 400; margin-bottom: 10px;"> + ab + </div> + <div style="text-align: center; font-size: 35px; font-family: TeleNeo; color: white; font-weight: 700;"> + <span> + 19,95 € + </span> + <sup title="This offer is only valid for a limited time. Free shipping on all orders." style="font-size: 30px; color: white; cursor: help;">*</sup> + </div> + </div> + </scale-badge> + `, +}); + + +## Standard +### All default values + +<Canvas withSource="none"> + <Story + name="Standard" + args={{ + }} + > + {Template.bind({})} + </Story> +</Canvas> + +<ArgsTable story="Standard" /> + +```html +<scale-badge> + <div> + <div + style="text-align:center; font-size:20px; font-family:TeleNeo; color:white; font-weight:400;" + > + Für nur + </div> + <div + style="text-align:center; font-size: 60px; font-family: TeleNeo; color: white; font-weight: 700;" + > + <span> 15 € </span> + </div> + </div> +</scale-badge> +``` + + +## Size +There are two sizes: +big / small. Big has the size 160x160 and small 120x120. In the example below, the badge is small + +<Canvas withSource="none"> + <Story + name="Sizes" + args={{ + size: "small", + color: "black", + }} + > + {Template2.bind({})} + </Story> +</Canvas> + +```html +<scale-badge style="--badge-color:blue" size:"small" > + <div> + <div + style="text-align:center; font-size:20px; font-family:TeleNeo; color:blwhiteack; font-weight:400;" + > + Für nur + </div> + <div + style="text-align:center; font-size: 60px; font-family: TeleNeo; color: white; font-weight: 700;" + > + <span> 15 € </span> + </div> + </div> +</scale-badge> +``` + +## Rotation + +<Canvas withSource="none"> + <Story + name="Rotation" + args={{ + size: "small", + color: "blue", + rotation: 33, + }} + > + {Template2.bind({})} + </Story> +</Canvas> + +```html +<scale-badge color:"blue" size:"small" rotation:"33" > + <div> + <div + style="text-align:center; font-size:20px; font-family:TeleNeo; color:blwhiteack; font-weight:400;" + > + Für nur + </div> + <div + style="text-align:center; font-size: 60px; font-family: TeleNeo; color: white; font-weight: 700;" + > + <span> 15 € </span> + </div> + </div> +</scale-badge> +``` + +## Color Choosing +There are 4 standard colors (Magenta - default, black, white, blue). The user also has the possibilty to determine another color by accessing the specific css class. + +<Canvas withSource="none"> + <Story + name="Color Choosing" + args={{ + size: "small", + }} + > + {Template2.bind({})} + </Story> +</Canvas> + +```html +<scale-badge size="big" style="--badge-color:blue" rotation="0"> + <div> + <div style="text-align:center; font-size:20px; font-family:TeleNeo; color:white; font-weight:400;"> + Für nur + </div> + <div style="text-align:center; font-size: 60px; font-family: TeleNeo; color: white; font-weight: 700;"> + <span> + 15 € + </span> + </div> + </div> + </scale-badge> +``` + +## Asterisk + +<Canvas withSource="none"> + <Story + name="Asterisk" + args={{ + size: "big", + }} + > + {Template3.bind({})} + </Story> +</Canvas> + +```html +<scale-badge size="big" color="magenta" rotation="0"> + <div> + <div style="text-align: center; font-size: 25px; font-family: TeleNeo; color: white; font-weight: 400; margin-bottom: 10px;"> + ab + </div> + <div style="text-align: center; font-size: 35px; font-family: TeleNeo; color: white; font-weight: 700;"> + <span> + 19,95 € + </span> + <sup title="This offer is only valid for a limited time. Free shipping on all orders." style="font-size: 30px; color: white; cursor: help;">*</sup> + </div> + </div> + </scale-badge> +``` \ No newline at end of file diff --git a/packages/storybook-vue/stories/3_components/badge/ScaleBadge.vue b/packages/storybook-vue/stories/3_components/badge/ScaleBadge.vue new file mode 100644 index 0000000000..3b6e78850a --- /dev/null +++ b/packages/storybook-vue/stories/3_components/badge/ScaleBadge.vue @@ -0,0 +1,20 @@ +<template> + <scale-badge + :size="size" + :color="color" + :rotation="rotation" + > + <slot></slot> + </scale-badge> +</template> + +<script> +export default { + props: { + size: { type: String, default: "big" }, + color: {type: String, default: "magenta"}, + rotation:{type: Number, default: 0}, + }, +}; +</script> + diff --git a/packages/storybook-vue/stories/3_components/badge/badge.md b/packages/storybook-vue/stories/3_components/badge/badge.md new file mode 100644 index 0000000000..fb228167fc --- /dev/null +++ b/packages/storybook-vue/stories/3_components/badge/badge.md @@ -0,0 +1,77 @@ +<div style="display: inline-flex; align-items: center; justify-content: space-between; width: 100%;"> + <h1>Badge</h1> + <img src="assets/aa.png" alt="Accessible AA" /> +</div> + +Use the Badge Component to draw attention to another interface element or to display a notification. It enhances the component to which it is attached with additional information, disclosed to the user upon interacting with it. + +## General + +The Badge can carry different types of content such as a letters,numbers or icons. + +IMAGE EXAMPLES + +### When to use + +Use a badge in the following cases: + +- When items need to be differentiated or become an eyecatcher. + +### When not to use + +Don't use cards: + +- If lables are too long + +## Variants +## Color + +### Magenta / White / Black / Colored + +Magenta is the default color but the user also has the possibility to determine any other color as well. +IMAGE EXAMPLES + + +## Sizes +There is two types: large & small + +### Large Badge + +The large badge is the defualt size. It has a size of 160x160 and the content area a size of 96x126.5 + +IMAGE + +### Small Badge + +The small badge has a size of 120x120 and the content area a size of 88x86. + +IMAGE + + +## Rotation + +The standard is a 0 degrees rotation but it the user has the possibility to determine. +For example a 30 degrees rotation: + +IMAGE + +### Best practice + +## Content +- if possible, try not to use more than three words. +- Only the first word of the label should be capitalized. + +## Background +- The background color can be used to emphasize a status, to inform or to associate information. + +## Behavior +- The badge component has no interaction. It is not clickable or removable. + +## Design on your own +- Choose the right size. +- Choose the right color. +- Choose a rotation if needed. +- Write your content (watch out for "When not to use"). + + + diff --git a/packages/storybook-vue/stories/3_components/badge/badge_de.md b/packages/storybook-vue/stories/3_components/badge/badge_de.md new file mode 100644 index 0000000000..abcef07137 --- /dev/null +++ b/packages/storybook-vue/stories/3_components/badge/badge_de.md @@ -0,0 +1,13 @@ +<div style="display: inline-flex; align-items: center; justify-content: space-between; width: 100%;"> + <h1>Badge</h1> + <img src="assets/aa.png" alt="Accessible AA" /> +</div> + + + + +Statische Rating Stars können eine Bewertung abbilden. Interaktive Rating Stars ermöglichen es Nutzer\*innen, eine eigene Bewertung abzugeben. + +## Beta-Komponente + +Diese Komponente befindet sich noch im Beta-Stadium. Wenn du sie testest, bedenke, dass sie möglicherweise noch nicht alle Qualitätskontrollmaßnahmen durchlaufen hat und noch keine WCAG-Zertifizierung zur Barrierefreiheit vorliegt. In Zukunft kann es zu Änderungen an dieser Komponente kommen. From da728f731b2471428aab1efbbfb894ef84afc327 Mon Sep 17 00:00:00 2001 From: Denis Kutlovci <Denis.kutlovci@telekom.de> Date: Wed, 9 Jun 2021 14:00:05 +0200 Subject: [PATCH 09/19] Storybook & Handlebar done --- packages/components-sketch/views/badge.hbs | 349 +++++++++++++++++- .../components/src/components/badge/badge.css | 40 +- packages/components/src/html/index.html | 4 +- .../3_components/badge/Badge.stories.mdx | 59 ++- 4 files changed, 424 insertions(+), 28 deletions(-) diff --git a/packages/components-sketch/views/badge.hbs b/packages/components-sketch/views/badge.hbs index 4a8e68fa33..d36b7c0af5 100644 --- a/packages/components-sketch/views/badge.hbs +++ b/packages/components-sketch/views/badge.hbs @@ -1,13 +1,99 @@ - <div data-sketch-artboard="Badge" class="artboard"> - <h1 class="title--artboard">Badge</h1> + <h1 class="title--artboard">Overview</h1> - <h2 class="title--artboard-section">Badge</h2> - <div class="agent-states--grid" data-category="Not Visited"> + <h2 class="title--artboard-section">Badge Eyecatcher</h2> + <div class="agent-states--grid" data-category="Text only"> + <div class="agent-states--item"> + <p class="agent-states--label">Magenta - Large</p> + <scale-badge size="big" color="magenta" rotation="0"> + <div> + <div + style=" + text-align: center; + font-size: 20px; + font-family: TeleNeo; + color: white; + font-weight: 400; + " + > + Für nur + </div> + <div + style=" + text-align: center; + font-size: 60px; + font-family: TeleNeo; + color: white; + font-weight: 700; + " + > + <span> 15 € </span> + </div> + </div> + </scale-badge> + </div> + <div class="agent-states--item"> + <p class="agent-states--label">White - Large</p> + <scale-badge size="big" color="white" rotation="0"> + <div> + <div + style=" + text-align: center; + font-size: 20px; + font-family: TeleNeo; + color: black; + font-weight: 400; + " + > + Für nur + </div> + <div + style=" + text-align: center; + font-size: 60px; + font-family: TeleNeo; + color: black; + font-weight: 700; + " + > + <span> 15 € </span> + </div> + </div> + </scale-badge> + </div> + <div class="agent-states--item"> + <p class="agent-states--label">Black - Large</p> + <scale-badge size="big" color="black" rotation="0"> + <div> + <div + style=" + text-align: center; + font-size: 20px; + font-family: TeleNeo; + color: white; + font-weight: 400; + " + > + Für nur + </div> + <div + style=" + text-align: center; + font-size: 60px; + font-family: TeleNeo; + color: white; + font-weight: 700; + " + > + <span> 15 € </span> + </div> + </div> + </scale-badge> + </div> <div class="agent-states--item"> - <p class="agent-states--label">Big Magenta</p> - <scale-badge size="big" style="--badge-color: magenta" rotation="0"> + <p class="agent-states--label">Colored - Large</p> + <scale-badge size="big" color="blue" rotation="0"> <div> <div style=" @@ -35,6 +121,227 @@ </scale-badge> </div> </div> + + + + + + + + + + + + + + + + <h2 class="title--artboard-section"></h2> + <div class="agent-states--grid" data-category="Text only"> + <div class="agent-states--item"> + <p class="agent-states--label">Magenta - Small</p> + <scale-badge size="small" color="magenta" rotation="0"> + <div> + <div + style=" + text-align: center; + font-size: 20px; + font-family: TeleNeo; + color: white; + font-weight: 400; + " + > + Für nur + </div> + <div + style=" + text-align: center; + font-size: 60px; + font-family: TeleNeo; + color: white; + font-weight: 700; + " + > + <span> 15 € </span> + </div> + </div> + </scale-badge> + </div> + <div class="agent-states--item"> + <p class="agent-states--label">White - small</p> + <scale-badge size="small" color="white" rotation="0"> + <div> + <div + style=" + text-align: center; + font-size: 20px; + font-family: TeleNeo; + color: black; + font-weight: 400; + " + > + Für nur + </div> + <div + style=" + text-align: center; + font-size: 60px; + font-family: TeleNeo; + color: black; + font-weight: 700; + " + > + <span> 15 € </span> + </div> + </div> + </scale-badge> + </div> + <div class="agent-states--item"> + <p class="agent-states--label">Black - Small</p> + <scale-badge size="small" color="black" rotation="0"> + <div> + <div + style=" + text-align: center; + font-size: 20px; + font-family: TeleNeo; + color: white; + font-weight: 400; + " + > + Für nur + </div> + <div + style=" + text-align: center; + font-size: 60px; + font-family: TeleNeo; + color: white; + font-weight: 700; + " + > + <span> 15 € </span> + </div> + </div> + </scale-badge> + </div> + <div class="agent-states--item"> + <p class="agent-states--label">Colored - small</p> + <scale-badge size="small" color="blue" rotation="0"> + <div> + <div + style=" + text-align: center; + font-size: 20px; + font-family: TeleNeo; + color: white; + font-weight: 400; + " + > + Für nur + </div> + <div + style=" + text-align: center; + font-size: 60px; + font-family: TeleNeo; + color: white; + font-weight: 700; + " + > + <span> 15 € </span> + </div> + </div> + </scale-badge> + </div> + </div> + + <h2 class="title--artboard-section"></h2> + <div class="agent-states--grid" data-category="Text only"> + <div class="agent-states--item"> + <p class="agent-states--label">Rotation 0˚ Default</p> + <scale-badge size="big" color="magenta" rotation="0"> + <div> + <div + style=" + text-align: center; + font-size: 20px; + font-family: TeleNeo; + color: white; + font-weight: 400; + " + > Für nur + </div> + <div + style=" + text-align: center; + font-size: 60px; + font-family: TeleNeo; + color: white; + font-weight: 700; + " + > <span> 15 € </span> + </div> + </div> + </scale-badge> + </div> + <div class="agent-states--item"> + <p class="agent-states--label">Rotation 30˚ </p> + <scale-badge size="big" color="blue" rotation="30"> + <div> + <div + style=" + text-align: center; + font-size: 20px; + font-family: TeleNeo; + color: black; + font-weight: 400; + " + > Für nur + </div> + <div + style=" + text-align: center; + font-size: 60px; + font-family: TeleNeo; + color: black; + font-weight: 700; + " + > <span> 15 € </span> + </div> + </div> + </scale-badge> + </div> + <div class="agent-states--item"> + <p class="agent-states--label">Rotation 90˚ </p> + <scale-badge size="big" color="black" rotation="90"> + <div> + <div + style=" + text-align: center; + font-size: 20px; + font-family: TeleNeo; + color: white; + font-weight: 400; + " + > Für nur + </div> + <div + style=" + text-align: center; + font-size: 60px; + font-family: TeleNeo; + color: white; + font-weight: 700; + " + > + <span> 15 € </span> + </div> + </div> + </scale-badge> + </div> + </div> + </div> </div> <script src="/symbol_names.js"></script> @@ -49,3 +356,33 @@ )} / ${order(4, getStateName(btn))}`; }); </script> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/components/src/components/badge/badge.css b/packages/components/src/components/badge/badge.css index 8a0e9fc789..049783ebde 100644 --- a/packages/components/src/components/badge/badge.css +++ b/packages/components/src/components/badge/badge.css @@ -1,13 +1,13 @@ :host { - --big-badge-height: 160px; - --big-badge-width: 160px; - --small-badge-height: 120px; - --small-badge-width: 120px; - --big-inner-height: 96px; - --big-inner-width: 126.5px; - --small-inner-height: 88px; - --small-inner-width: 86px; - --badge-color: #e20074; + --color-badge:#e20074; + --inner-width-small: 86px; + --inner-height-small: 88px; + --inner-width-big: 126.5px; + --inner-height-big: 96px; + --width-small: 120px; + --height-small: 120px; + --height-big: 160px; + --width-big: 160px; } .badge { @@ -15,7 +15,7 @@ justify-content: center; align-items: center; border-radius: 100%; - background: var(--badge-color); + background: var(--color-badge); } .badge.badge--color-magenta { @@ -32,23 +32,27 @@ } .badge.badge--size-big { - width: var(--big-badge-width); - height: var(--big-badge-height); + width: var(--width-big); + height: var(--height-big); + } .badge.badge--size-small { - width: var(--small-badge-width); - height: var(--small-badge-height); + width: var(--width-small); + height: var(--height-small); + } .badge.badge--size-big .badge--inner { - width: var(--big-inner-width); - height: var(--big-inner-height); + width: var(--inner-width-big); + height: var(--inner-height-big); + } .badge.badge--size-small .badge--inner { - width: var(--small-inner-width); - height: var(--small-inner-height); + width: var(--inner-width-small); + height: var(--inner-height-small); + } .badge--inner { diff --git a/packages/components/src/html/index.html b/packages/components/src/html/index.html index e622c3bbdf..403fbf7184 100644 --- a/packages/components/src/html/index.html +++ b/packages/components/src/html/index.html @@ -39,7 +39,7 @@ <h1>Components</h1> <h3>BADGE COMPONENT </h3> <h1>Badge 1 Orange/big</h1> - <scale-badge size="big" style="--badge-color:blue" rotation="0"> + <scale-badge size="big" style="--color-badge:orange" rotation="0"> <div> <div style="text-align:center; font-size:20px; font-family:TeleNeo; color:white; font-weight:400;"> Für nur @@ -52,7 +52,7 @@ <h1>Badge 1 Orange/big</h1> </div> </scale-badge> <h1>Badge 2: White/small/rotation</h1> - <scale-badge size="small" color="white" rotation="30"> + <scale-badge size="small" color="magenta" rotation="30"> <div> <div style="text-align: center; font-size: 15px; font-family: TeleNeo; color: black; font-weight: 400; margin-bottom: 10px;"> Für nur diff --git a/packages/storybook-vue/stories/3_components/badge/Badge.stories.mdx b/packages/storybook-vue/stories/3_components/badge/Badge.stories.mdx index 0db48e9951..7c42add7c0 100644 --- a/packages/storybook-vue/stories/3_components/badge/Badge.stories.mdx +++ b/packages/storybook-vue/stories/3_components/badge/Badge.stories.mdx @@ -7,13 +7,45 @@ import { } from '@storybook/addon-docs/blocks'; import ScaleBadge from './ScaleBadge.vue'; -<Meta title="Beta Components/Badge" component={ScaleBadge} argTypes={{}} /> +<Meta + title="Beta Components/Badge" + component={ScaleBadge} + argTypes={{ + color: { + defaultValue: 'magenta', + options: ['magenta', 'white', 'black', 'blue'], + control: { + type: 'select', + }, + }, + size: { + defaultValue: 'big', + options: ['small', 'big'], + control: { + type: 'select', + }, + }, + }} +/> export const Template = (args, { argTypes }) => ({ components: { ScaleBadge }, props: { - label: String, ...ScaleBadge.props, + color: { + defaultValue: 'magenta', + control: { + type: 'select', + options: ['magenta', 'white', 'black', 'blue'], + }, + }, + size: { + defaultValue: 'big', + control: { + type: 'select', + options: ['small', 'big'], + }, + }, }, template: ` <scale-badge :size="size" :color="color" :rotation="rotation"> @@ -110,6 +142,29 @@ export const Template3 = (args, { argTypes }) => ({ ``` + +### Scoped CSS variables + +```css + :host { + --color-badge:#e20074; + --inner-width-small: 86px; + --inner-height-small: 88px; + --inner-width-big: 126.5px; + --inner-height-big: 96px; + --width-small: 120px; + --height-small: 120px; + --height-big: 160px; + --width-big: 160px; +} +``` + + + + + + + ## Size There are two sizes: big / small. Big has the size 160x160 and small 120x120. In the example below, the badge is small From 9703be407b095e61eca23cccd42acee7dbc62b60 Mon Sep 17 00:00:00 2001 From: Denis Kutlovci <Denis.kutlovci@telekom.de> Date: Wed, 9 Jun 2021 14:26:59 +0200 Subject: [PATCH 10/19] copied and added the index.html from main branch --- packages/components/src/html/index.html | 117 ++++-------------------- 1 file changed, 16 insertions(+), 101 deletions(-) diff --git a/packages/components/src/html/index.html b/packages/components/src/html/index.html index 403fbf7184..75e8bff622 100644 --- a/packages/components/src/html/index.html +++ b/packages/components/src/html/index.html @@ -36,90 +36,8 @@ <body> <h1>Components</h1> - - <h3>BADGE COMPONENT </h3> - <h1>Badge 1 Orange/big</h1> - <scale-badge size="big" style="--color-badge:orange" rotation="0"> - <div> - <div style="text-align:center; font-size:20px; font-family:TeleNeo; color:white; font-weight:400;"> - Für nur - </div> - <div style="text-align:center; font-size: 60px; font-family: TeleNeo; color: white; font-weight: 700;"> - <span> - 15 € - </span> - </div> - </div> - </scale-badge> - <h1>Badge 2: White/small/rotation</h1> - <scale-badge size="small" color="magenta" rotation="30"> - <div> - <div style="text-align: center; font-size: 15px; font-family: TeleNeo; color: black; font-weight: 400; margin-bottom: 10px;"> - Für nur - </div> - <div style="text-align: center; font-size: 40px; font-family: TeleNeo; color: black; font-weight: 700;"> - <span> - 15 € - </span> - </div> - </div> - </scale-badge> - <h1>Badge 3: Black/rotation/big</h1> - <scale-badge size="big" color="black" rotation="50"> - <div> - <div style="text-align:center; font-size:20px; font-family:TeleNeo; color:white; font-weight:400;"> - Für nur - </div> - <div style="text-align:center; font-size: 60px; font-family: TeleNeo; color: white; font-weight: 700;"> - <span> - 15 € - </span> - </div> - </div> - </scale-badge> - <h1>Badge 4: Any color chosen</h1> - <scale-badge size="small" color="orange" rotation="0"> - <div> - <div style="text-align: center; font-size: 15px; font-family: TeleNeo; color: black; font-weight: 400; margin-bottom: 10px;"> - Für nur - </div> - <div style="text-align: center; font-size: 40px; font-family: TeleNeo; color: black; font-weight: 700;"> - <span>15 €</span> - </div> - </div> - </scale-badge> - <h1>Badge 5 Datum: Black/rotation/big</h1> - <scale-badge size="big" color="skyblue"> - <div> - <div style=" text-align: center; font-size: 25px; font-family: TeleNeo; color: white; font-weight: 400; margin-bottom: 10px;"> - BIS - </div> - <div style="text-align: center; font-size: 25px; font-family: TeleNeo; color: white; font-weight: 400; margin-bottom: 10px;"> - <span> - 31.01.2021 - </span> - </div> - </div> - </scale-badge> - <h1>Badge 6: Star Hover Info</h1> - <scale-badge size="big" color="magenta" rotation="0"> - <div> - <div style="text-align: center; font-size: 25px; font-family: TeleNeo; color: black; font-weight: 400; margin-bottom: 10px;"> - ab - </div> - <div style="text-align: center; font-size: 35px; font-family: TeleNeo; color: black; font-weight: 700;"> - <span> - 19,95 € - </span> - <sup title="This offer is only valid for a limited time. Free shipping on all orders." style="font-size: 30px; color: black; cursor: help;">*</sup> - </div> - </div> - </scale-badge> - - - - - + <h3>Alert</h3> + <scale-alert headline="Alert Headline">Some alert content</scale-alert> <h3>Rating Stars</h3> <h4>rating = 1</h4> @@ -653,28 +571,25 @@ <h3>Button Default</h3> <scale-button>Hello</scale-button> <h3>Button variants</h3> - <scale-button - variant="primary" - icon-before="M10 2a8 8 0 016.472 12.703l4.912 4.913.06.065a1.25 1.25 0 01-1.726 1.794l-.102-.091-4.913-4.912A8 8 0 1110 2zm0 1.5A6.508 6.508 0 003.5 10c0 3.584 2.916 6.5 6.5 6.5s6.5-2.916 6.5-6.5-2.916-6.5-6.5-6.5z" - >Hello</scale-button - > - <scale-button - variant="secondary" - icon-before="M10 2a8 8 0 016.472 12.703l4.912 4.913.06.065a1.25 1.25 0 01-1.726 1.794l-.102-.091-4.913-4.912A8 8 0 1110 2zm0 1.5A6.508 6.508 0 003.5 10c0 3.584 2.916 6.5 6.5 6.5s6.5-2.916 6.5-6.5-2.916-6.5-6.5-6.5z" - >Hello</scale-button - > + <scale-button variant="primary">Hello</scale-button> + <scale-button variant="secondary">Hello</scale-button> <h3>Button icon Before</h3> - <scale-button - icon-before="M10 2a8 8 0 016.472 12.703l4.912 4.913.06.065a1.25 1.25 0 01-1.726 1.794l-.102-.091-4.913-4.912A8 8 0 1110 2zm0 1.5A6.508 6.508 0 003.5 10c0 3.584 2.916 6.5 6.5 6.5s6.5-2.916 6.5-6.5-2.916-6.5-6.5-6.5z" - > - Hello + <scale-button> + <scale-icon-action-search></scale-icon-action-search> Label + </scale-button> + + <h3>Button icon After</h3> + <scale-button icon-position="after"> + Label <scale-icon-navigation-right></scale-icon-navigation-right> </scale-button> <h3>Button icon only</h3> - <scale-button - icon="M10 2a8 8 0 016.472 12.703l4.912 4.913.06.065a1.25 1.25 0 01-1.726 1.794l-.102-.091-4.913-4.912A8 8 0 1110 2zm0 1.5A6.508 6.508 0 003.5 10c0 3.584 2.916 6.5 6.5 6.5s6.5-2.916 6.5-6.5-2.916-6.5-6.5-6.5z" - ></scale-button> + <scale-button icon-only="true"> + <scale-icon-navigation-external-link + accessibility-title="External link, opens in new tab" + ></scale-icon-navigation-external-link> + </scale-button> <h3>Button Link</h3> <scale-button href="http://google.com" target="_blank"> From 444551e71ef1991f1715d2c6c6c7e41e4fd45f97 Mon Sep 17 00:00:00 2001 From: Denis Kutlovci <Denis.kutlovci@telekom.de> Date: Wed, 9 Jun 2021 14:45:08 +0200 Subject: [PATCH 11/19] prettier & lint --- packages/components/src/components/badge/badge.css | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/components/src/components/badge/badge.css b/packages/components/src/components/badge/badge.css index 049783ebde..78a373ab46 100644 --- a/packages/components/src/components/badge/badge.css +++ b/packages/components/src/components/badge/badge.css @@ -1,5 +1,5 @@ :host { - --color-badge:#e20074; + --color-badge: #e20074; --inner-width-small: 86px; --inner-height-small: 88px; --inner-width-big: 126.5px; @@ -34,25 +34,21 @@ .badge.badge--size-big { width: var(--width-big); height: var(--height-big); - } .badge.badge--size-small { width: var(--width-small); height: var(--height-small); - } .badge.badge--size-big .badge--inner { width: var(--inner-width-big); height: var(--inner-height-big); - } .badge.badge--size-small .badge--inner { width: var(--inner-width-small); height: var(--inner-height-small); - } .badge--inner { From f3efbd69a016a677c5beb87beb64ee42ddcbb487 Mon Sep 17 00:00:00 2001 From: Denis Kutlovci <Denis.kutlovci@telekom.de> Date: Fri, 11 Jun 2021 10:40:26 +0200 Subject: [PATCH 12/19] fixed errors according to Daniel check, after merge request 1 --- packages/components-sketch/views/badge.hbs | 24 ++-------- .../components/src/components/badge/badge.css | 8 ++-- .../components/src/components/badge/badge.tsx | 4 +- .../3_components/badge/Badge.stories.mdx | 46 ++++--------------- .../stories/3_components/badge/ScaleBadge.vue | 2 +- .../stories/3_components/badge/badge.md | 4 +- 6 files changed, 22 insertions(+), 66 deletions(-) diff --git a/packages/components-sketch/views/badge.hbs b/packages/components-sketch/views/badge.hbs index d36b7c0af5..cbffdf333f 100644 --- a/packages/components-sketch/views/badge.hbs +++ b/packages/components-sketch/views/badge.hbs @@ -5,8 +5,8 @@ <h2 class="title--artboard-section">Badge Eyecatcher</h2> <div class="agent-states--grid" data-category="Text only"> <div class="agent-states--item"> - <p class="agent-states--label">Magenta - Large</p> - <scale-badge size="big" color="magenta" rotation="0"> + <p class="agent-states--label">Primary - Large</p> + <scale-badge size="big" color="primary" rotation="0"> <div> <div style=" @@ -122,25 +122,11 @@ </div> </div> - - - - - - - - - - - - - - <h2 class="title--artboard-section"></h2> <div class="agent-states--grid" data-category="Text only"> <div class="agent-states--item"> - <p class="agent-states--label">Magenta - Small</p> - <scale-badge size="small" color="magenta" rotation="0"> + <p class="agent-states--label">Primary - Small</p> + <scale-badge size="small" color="primary" rotation="0"> <div> <div style=" @@ -260,7 +246,7 @@ <div class="agent-states--grid" data-category="Text only"> <div class="agent-states--item"> <p class="agent-states--label">Rotation 0˚ Default</p> - <scale-badge size="big" color="magenta" rotation="0"> + <scale-badge size="big" color="primary" rotation="0"> <div> <div style=" diff --git a/packages/components/src/components/badge/badge.css b/packages/components/src/components/badge/badge.css index 78a373ab46..8b8364363e 100644 --- a/packages/components/src/components/badge/badge.css +++ b/packages/components/src/components/badge/badge.css @@ -18,8 +18,8 @@ background: var(--color-badge); } -.badge.badge--color-magenta { - background: #e20074; +.badge.badge--color-primary { + background: var(--scl-color-primary, #e20074); } .badge.badge--color-white { background: #ffffff; @@ -31,7 +31,7 @@ background: #191919; } -.badge.badge--size-big { +.badge.badge--size-large { width: var(--width-big); height: var(--height-big); } @@ -41,7 +41,7 @@ height: var(--height-small); } -.badge.badge--size-big .badge--inner { +.badge.badge--size-large .badge--inner { width: var(--inner-width-big); height: var(--inner-height-big); } diff --git a/packages/components/src/components/badge/badge.tsx b/packages/components/src/components/badge/badge.tsx index 82a0c70474..e3ed8a9e84 100644 --- a/packages/components/src/components/badge/badge.tsx +++ b/packages/components/src/components/badge/badge.tsx @@ -8,9 +8,9 @@ import classNames from 'classnames'; }) export class Badge { /** (optional) Variant size of the badge itself */ - @Prop({ mutable: true }) size: 'big' | 'small' = 'big'; + @Prop({ mutable: true }) size: 'large' | 'small' = 'large'; /** (optional) Variant color/filling of the badge */ - @Prop({ mutable: true }) color: 'magenta' | 'white' | 'black' | 'blue'; + @Prop({ mutable: true }) color: 'primary' | 'white' | 'black' | 'blue'; /** (optional) Variant rotation of the badge/circle */ @Prop({ mutable: true }) rotation: number = 0; diff --git a/packages/storybook-vue/stories/3_components/badge/Badge.stories.mdx b/packages/storybook-vue/stories/3_components/badge/Badge.stories.mdx index 7c42add7c0..a58b965dd0 100644 --- a/packages/storybook-vue/stories/3_components/badge/Badge.stories.mdx +++ b/packages/storybook-vue/stories/3_components/badge/Badge.stories.mdx @@ -12,8 +12,8 @@ import ScaleBadge from './ScaleBadge.vue'; component={ScaleBadge} argTypes={{ color: { - defaultValue: 'magenta', - options: ['magenta', 'white', 'black', 'blue'], + defaultValue: 'primary', + options: ['primary', 'white', 'black', 'blue'], control: { type: 'select', }, @@ -32,20 +32,6 @@ export const Template = (args, { argTypes }) => ({ components: { ScaleBadge }, props: { ...ScaleBadge.props, - color: { - defaultValue: 'magenta', - control: { - type: 'select', - options: ['magenta', 'white', 'black', 'blue'], - }, - }, - size: { - defaultValue: 'big', - control: { - type: 'select', - options: ['small', 'big'], - }, - }, }, template: ` <scale-badge :size="size" :color="color" :rotation="rotation"> @@ -66,7 +52,6 @@ export const Template = (args, { argTypes }) => ({ export const Template2 = (args, { argTypes }) => ({ components: { ScaleBadge }, props: { - label: String, ...ScaleBadge.props, }, template: ` @@ -88,7 +73,6 @@ export const Template2 = (args, { argTypes }) => ({ export const Template3 = (args, { argTypes }) => ({ components: { ScaleBadge }, props: { - label: String, ...ScaleBadge.props, }, template: ` @@ -108,10 +92,8 @@ export const Template3 = (args, { argTypes }) => ({ `, }); - ## Standard ### All default values - <Canvas withSource="none"> <Story name="Standard" @@ -141,10 +123,7 @@ export const Template3 = (args, { argTypes }) => ({ </scale-badge> ``` - - ### Scoped CSS variables - ```css :host { --color-badge:#e20074; @@ -158,13 +137,6 @@ export const Template3 = (args, { argTypes }) => ({ --width-big: 160px; } ``` - - - - - - - ## Size There are two sizes: big / small. Big has the size 160x160 and small 120x120. In the example below, the badge is small @@ -174,7 +146,7 @@ big / small. Big has the size 160x160 and small 120x120. In the example below, t name="Sizes" args={{ size: "small", - color: "black", + color: "blue", }} > {Template2.bind({})} @@ -182,7 +154,7 @@ big / small. Big has the size 160x160 and small 120x120. In the example below, t </Canvas> ```html -<scale-badge style="--badge-color:blue" size:"small" > +<scale-badge color="blue" size:"small" > <div> <div style="text-align:center; font-size:20px; font-family:TeleNeo; color:blwhiteack; font-weight:400;" @@ -199,7 +171,6 @@ big / small. Big has the size 160x160 and small 120x120. In the example below, t ``` ## Rotation - <Canvas withSource="none"> <Story name="Rotation" @@ -231,7 +202,7 @@ big / small. Big has the size 160x160 and small 120x120. In the example below, t ``` ## Color Choosing -There are 4 standard colors (Magenta - default, black, white, blue). The user also has the possibilty to determine another color by accessing the specific css class. +There are 4 standard colors (Primary - default, black, white, blue). The user also has the possibilty to determine another color by accessing the specific css class. <Canvas withSource="none"> <Story @@ -256,11 +227,10 @@ There are 4 standard colors (Magenta - default, black, white, blue). The user al </span> </div> </div> - </scale-badge> +</scale-badge> ``` ## Asterisk - <Canvas withSource="none"> <Story name="Asterisk" @@ -273,7 +243,7 @@ There are 4 standard colors (Magenta - default, black, white, blue). The user al </Canvas> ```html -<scale-badge size="big" color="magenta" rotation="0"> +<scale-badge size="big" color="primary" rotation="0"> <div> <div style="text-align: center; font-size: 25px; font-family: TeleNeo; color: white; font-weight: 400; margin-bottom: 10px;"> ab @@ -285,5 +255,5 @@ There are 4 standard colors (Magenta - default, black, white, blue). The user al <sup title="This offer is only valid for a limited time. Free shipping on all orders." style="font-size: 30px; color: white; cursor: help;">*</sup> </div> </div> - </scale-badge> +</scale-badge> ``` \ No newline at end of file diff --git a/packages/storybook-vue/stories/3_components/badge/ScaleBadge.vue b/packages/storybook-vue/stories/3_components/badge/ScaleBadge.vue index 3b6e78850a..58baccf605 100644 --- a/packages/storybook-vue/stories/3_components/badge/ScaleBadge.vue +++ b/packages/storybook-vue/stories/3_components/badge/ScaleBadge.vue @@ -12,7 +12,7 @@ export default { props: { size: { type: String, default: "big" }, - color: {type: String, default: "magenta"}, + color: {type: String, default: "primary"}, rotation:{type: Number, default: 0}, }, }; diff --git a/packages/storybook-vue/stories/3_components/badge/badge.md b/packages/storybook-vue/stories/3_components/badge/badge.md index fb228167fc..4b1885e9a5 100644 --- a/packages/storybook-vue/stories/3_components/badge/badge.md +++ b/packages/storybook-vue/stories/3_components/badge/badge.md @@ -26,9 +26,9 @@ Don't use cards: ## Variants ## Color -### Magenta / White / Black / Colored +### Primary / White / Black / Colored -Magenta is the default color but the user also has the possibility to determine any other color as well. +Primary is the default color but the user also has the possibility to determine any other color as well. IMAGE EXAMPLES From 46bba73c6663ed8799ebead1694587184dc68d05 Mon Sep 17 00:00:00 2001 From: Denis Kutlovci <Denis.kutlovci@telekom.de> Date: Fri, 11 Jun 2021 10:48:09 +0200 Subject: [PATCH 13/19] format and lint --- .../stories/3_components/badge/badge.md | 17 +++++++++-------- .../stories/3_components/badge/badge_de.md | 3 --- 2 files changed, 9 insertions(+), 11 deletions(-) diff --git a/packages/storybook-vue/stories/3_components/badge/badge.md b/packages/storybook-vue/stories/3_components/badge/badge.md index 4b1885e9a5..b6a6c867db 100644 --- a/packages/storybook-vue/stories/3_components/badge/badge.md +++ b/packages/storybook-vue/stories/3_components/badge/badge.md @@ -3,7 +3,7 @@ <img src="assets/aa.png" alt="Accessible AA" /> </div> -Use the Badge Component to draw attention to another interface element or to display a notification. It enhances the component to which it is attached with additional information, disclosed to the user upon interacting with it. +Use the Badge Component to draw attention to another interface element or to display a notification. It enhances the component to which it is attached with additional information, disclosed to the user upon interacting with it. ## General @@ -24,6 +24,7 @@ Don't use cards: - If lables are too long ## Variants + ## Color ### Primary / White / Black / Colored @@ -31,8 +32,8 @@ Don't use cards: Primary is the default color but the user also has the possibility to determine any other color as well. IMAGE EXAMPLES - ## Sizes + There is two types: large & small ### Large Badge @@ -47,7 +48,6 @@ The small badge has a size of 120x120 and the content area a size of 88x86. IMAGE - ## Rotation The standard is a 0 degrees rotation but it the user has the possibility to determine. @@ -55,23 +55,24 @@ For example a 30 degrees rotation: IMAGE -### Best practice +### Best practice ## Content + - if possible, try not to use more than three words. - Only the first word of the label should be capitalized. ## Background + - The background color can be used to emphasize a status, to inform or to associate information. ## Behavior -- The badge component has no interaction. It is not clickable or removable. + +- The badge component has no interaction. It is not clickable or removable. ## Design on your own + - Choose the right size. - Choose the right color. - Choose a rotation if needed. - Write your content (watch out for "When not to use"). - - - diff --git a/packages/storybook-vue/stories/3_components/badge/badge_de.md b/packages/storybook-vue/stories/3_components/badge/badge_de.md index abcef07137..832c07a9ec 100644 --- a/packages/storybook-vue/stories/3_components/badge/badge_de.md +++ b/packages/storybook-vue/stories/3_components/badge/badge_de.md @@ -3,9 +3,6 @@ <img src="assets/aa.png" alt="Accessible AA" /> </div> - - - Statische Rating Stars können eine Bewertung abbilden. Interaktive Rating Stars ermöglichen es Nutzer\*innen, eine eigene Bewertung abzugeben. ## Beta-Komponente From cb0f56b73dd81744342540f451992bb4957c9f74 Mon Sep 17 00:00:00 2001 From: Denis Kutlovci <Denis.kutlovci@telekom.de> Date: Mon, 28 Jun 2021 11:48:09 +0200 Subject: [PATCH 14/19] changes commited according to Daniels check from first MR --- .../components/src/components/badge/badge.tsx | 8 +- .../3_components/badge/Badge.stories.mdx | 2 +- .../stories/3_components/badge/badge.md | 78 +------------------ .../stories/3_components/badge/badge_de.md | 1 - 4 files changed, 12 insertions(+), 77 deletions(-) diff --git a/packages/components/src/components/badge/badge.tsx b/packages/components/src/components/badge/badge.tsx index e3ed8a9e84..4a7bf4e6e1 100644 --- a/packages/components/src/components/badge/badge.tsx +++ b/packages/components/src/components/badge/badge.tsx @@ -1,5 +1,6 @@ -import { Component, h, Host, Prop } from '@stencil/core'; +import { Component, h, Host, Prop, Element } from '@stencil/core'; import classNames from 'classnames'; +import statusNote from '../../utils/status-note'; @Component({ tag: 'scale-badge', @@ -7,6 +8,7 @@ import classNames from 'classnames'; shadow: true, }) export class Badge { + @Element() hostElement: HTMLElement; /** (optional) Variant size of the badge itself */ @Prop({ mutable: true }) size: 'large' | 'small' = 'large'; /** (optional) Variant color/filling of the badge */ @@ -14,6 +16,10 @@ export class Badge { /** (optional) Variant rotation of the badge/circle */ @Prop({ mutable: true }) rotation: number = 0; + connectedCallback() { + statusNote({ source: this.hostElement, tag: 'beta' }); + } + displayStyle() { return `:host { --badge-rotation: ${this.rotation}deg; diff --git a/packages/storybook-vue/stories/3_components/badge/Badge.stories.mdx b/packages/storybook-vue/stories/3_components/badge/Badge.stories.mdx index a58b965dd0..6aa72bf96b 100644 --- a/packages/storybook-vue/stories/3_components/badge/Badge.stories.mdx +++ b/packages/storybook-vue/stories/3_components/badge/Badge.stories.mdx @@ -216,7 +216,7 @@ There are 4 standard colors (Primary - default, black, white, blue). The user al </Canvas> ```html -<scale-badge size="big" style="--badge-color:blue" rotation="0"> +<scale-badge size="big" rotation="0"> <div> <div style="text-align:center; font-size:20px; font-family:TeleNeo; color:white; font-weight:400;"> Für nur diff --git a/packages/storybook-vue/stories/3_components/badge/badge.md b/packages/storybook-vue/stories/3_components/badge/badge.md index b6a6c867db..02b2a07749 100644 --- a/packages/storybook-vue/stories/3_components/badge/badge.md +++ b/packages/storybook-vue/stories/3_components/badge/badge.md @@ -1,78 +1,8 @@ <div style="display: inline-flex; align-items: center; justify-content: space-between; width: 100%;"> - <h1>Badge</h1> - <img src="assets/aa.png" alt="Accessible AA" /> + <h1>Rating Stars</h1> + <img src="assets/beta.png" alt="Beta Component" /> </div> -Use the Badge Component to draw attention to another interface element or to display a notification. It enhances the component to which it is attached with additional information, disclosed to the user upon interacting with it. +## Beta components -## General - -The Badge can carry different types of content such as a letters,numbers or icons. - -IMAGE EXAMPLES - -### When to use - -Use a badge in the following cases: - -- When items need to be differentiated or become an eyecatcher. - -### When not to use - -Don't use cards: - -- If lables are too long - -## Variants - -## Color - -### Primary / White / Black / Colored - -Primary is the default color but the user also has the possibility to determine any other color as well. -IMAGE EXAMPLES - -## Sizes - -There is two types: large & small - -### Large Badge - -The large badge is the defualt size. It has a size of 160x160 and the content area a size of 96x126.5 - -IMAGE - -### Small Badge - -The small badge has a size of 120x120 and the content area a size of 88x86. - -IMAGE - -## Rotation - -The standard is a 0 degrees rotation but it the user has the possibility to determine. -For example a 30 degrees rotation: - -IMAGE - -### Best practice - -## Content - -- if possible, try not to use more than three words. -- Only the first word of the label should be capitalized. - -## Background - -- The background color can be used to emphasize a status, to inform or to associate information. - -## Behavior - -- The badge component has no interaction. It is not clickable or removable. - -## Design on your own - -- Choose the right size. -- Choose the right color. -- Choose a rotation if needed. -- Write your content (watch out for "When not to use"). +This component is still in the beta phase. When testing it, keep in mind that it may not have gone through all quality control measures, and it may not yet have WCAG accessibility certification. There may be changes to this component in the future. diff --git a/packages/storybook-vue/stories/3_components/badge/badge_de.md b/packages/storybook-vue/stories/3_components/badge/badge_de.md index 832c07a9ec..3048222f59 100644 --- a/packages/storybook-vue/stories/3_components/badge/badge_de.md +++ b/packages/storybook-vue/stories/3_components/badge/badge_de.md @@ -3,7 +3,6 @@ <img src="assets/aa.png" alt="Accessible AA" /> </div> -Statische Rating Stars können eine Bewertung abbilden. Interaktive Rating Stars ermöglichen es Nutzer\*innen, eine eigene Bewertung abzugeben. ## Beta-Komponente From abc32935974cdcfd75bdb4d48fd81713bde3a95a Mon Sep 17 00:00:00 2001 From: Denis Kutlovci <Denis.kutlovci@telekom.de> Date: Tue, 29 Jun 2021 12:57:57 +0200 Subject: [PATCH 15/19] applied change according to Daniel, from merge request 2. --- packages/components-sketch/views/badge.hbs | 14 +++---- .../components/src/components/badge/badge.css | 16 ++++---- .../src/components/badge/badge.spec.ts | 12 +++--- .../components/src/components/badge/readme.md | 4 +- .../3_components/badge/Badge.stories.mdx | 38 ++++++++----------- .../stories/3_components/badge/ScaleBadge.vue | 2 +- .../stories/3_components/badge/badge.md | 4 +- .../stories/3_components/badge/badge_de.md | 3 +- 8 files changed, 43 insertions(+), 50 deletions(-) diff --git a/packages/components-sketch/views/badge.hbs b/packages/components-sketch/views/badge.hbs index cbffdf333f..c7e9f53c03 100644 --- a/packages/components-sketch/views/badge.hbs +++ b/packages/components-sketch/views/badge.hbs @@ -6,7 +6,7 @@ <div class="agent-states--grid" data-category="Text only"> <div class="agent-states--item"> <p class="agent-states--label">Primary - Large</p> - <scale-badge size="big" color="primary" rotation="0"> + <scale-badge size="large" color="primary" rotation="0"> <div> <div style=" @@ -35,7 +35,7 @@ </div> <div class="agent-states--item"> <p class="agent-states--label">White - Large</p> - <scale-badge size="big" color="white" rotation="0"> + <scale-badge size="large" color="white" rotation="0"> <div> <div style=" @@ -64,7 +64,7 @@ </div> <div class="agent-states--item"> <p class="agent-states--label">Black - Large</p> - <scale-badge size="big" color="black" rotation="0"> + <scale-badge size="large" color="black" rotation="0"> <div> <div style=" @@ -93,7 +93,7 @@ </div> <div class="agent-states--item"> <p class="agent-states--label">Colored - Large</p> - <scale-badge size="big" color="blue" rotation="0"> + <scale-badge size="large" color="blue" rotation="0"> <div> <div style=" @@ -246,7 +246,7 @@ <div class="agent-states--grid" data-category="Text only"> <div class="agent-states--item"> <p class="agent-states--label">Rotation 0˚ Default</p> - <scale-badge size="big" color="primary" rotation="0"> + <scale-badge size="large" color="primary" rotation="0"> <div> <div style=" @@ -273,7 +273,7 @@ </div> <div class="agent-states--item"> <p class="agent-states--label">Rotation 30˚ </p> - <scale-badge size="big" color="blue" rotation="30"> + <scale-badge size="large" color="blue" rotation="30"> <div> <div style=" @@ -300,7 +300,7 @@ </div> <div class="agent-states--item"> <p class="agent-states--label">Rotation 90˚ </p> - <scale-badge size="big" color="black" rotation="90"> + <scale-badge size="large" color="black" rotation="90"> <div> <div style=" diff --git a/packages/components/src/components/badge/badge.css b/packages/components/src/components/badge/badge.css index 8b8364363e..97dce37779 100644 --- a/packages/components/src/components/badge/badge.css +++ b/packages/components/src/components/badge/badge.css @@ -2,12 +2,12 @@ --color-badge: #e20074; --inner-width-small: 86px; --inner-height-small: 88px; - --inner-width-big: 126.5px; - --inner-height-big: 96px; + --inner-width-large: 126.5px; + --inner-height-large: 96px; --width-small: 120px; --height-small: 120px; - --height-big: 160px; - --width-big: 160px; + --height-large: 160px; + --width-large: 160px; } .badge { @@ -32,8 +32,8 @@ } .badge.badge--size-large { - width: var(--width-big); - height: var(--height-big); + width: var(--width-large); + height: var(--height-large); } .badge.badge--size-small { @@ -42,8 +42,8 @@ } .badge.badge--size-large .badge--inner { - width: var(--inner-width-big); - height: var(--inner-height-big); + width: var(--inner-width-large); + height: var(--inner-height-large); } .badge.badge--size-small .badge--inner { diff --git a/packages/components/src/components/badge/badge.spec.ts b/packages/components/src/components/badge/badge.spec.ts index 2617757656..047865845d 100644 --- a/packages/components/src/components/badge/badge.spec.ts +++ b/packages/components/src/components/badge/badge.spec.ts @@ -5,14 +5,14 @@ it('should reflect attributes/props', async () => { const page = await newSpecPage({ components: [Badge], html: `<scale-badge - size ="big" - color ="magenta" + size ="large" + color ="primary" rotation ="15"> </scale-badge>`, }); - expect(page.rootInstance.size).toBe('big'); - expect(page.rootInstance.color).toBe('magenta'); + expect(page.rootInstance.size).toBe('large'); + expect(page.rootInstance.color).toBe('primary'); expect(page.rootInstance.rotation).toBe(15); }); @@ -20,13 +20,13 @@ it('checks another color, other than prop', async () => { const page = await newSpecPage({ components: [Badge], html: `<scale-badge - size ="big" + size ="large" color ="red" rotation ="15"> </scale-badge>`, }); - expect(page.rootInstance.size).toBe('big'); + expect(page.rootInstance.size).toBe('large'); expect(page.rootInstance.color).toBe('red'); expect(page.rootInstance.rotation).toBe(15); }); diff --git a/packages/components/src/components/badge/readme.md b/packages/components/src/components/badge/readme.md index 21af80c291..711983b8f6 100644 --- a/packages/components/src/components/badge/readme.md +++ b/packages/components/src/components/badge/readme.md @@ -9,9 +9,9 @@ | Property | Attribute | Description | Type | Default | | ---------- | ---------- | ----------------------------------------------- | ------------------------------------------- | ----------- | -| `color` | `color` | (optional) Variant color/filling of the badge | `"black" \| "blue" \| "magenta" \| "white"` | `undefined` | +| `color` | `color` | (optional) Variant color/filling of the badge | `"black" \| "blue" \| "primary" \| "white"` | `undefined` | | `rotation` | `rotation` | (optional) Variant rotation of the badge/circle | `number` | `0` | -| `size` | `size` | (optional) Variant size of the badge itself | `"big" \| "small"` | `'big'` | +| `size` | `size` | (optional) Variant size of the badge itself | `"large" \| "small"` | `'large'` | ## Shadow Parts diff --git a/packages/storybook-vue/stories/3_components/badge/Badge.stories.mdx b/packages/storybook-vue/stories/3_components/badge/Badge.stories.mdx index 6aa72bf96b..1dee0ce58b 100644 --- a/packages/storybook-vue/stories/3_components/badge/Badge.stories.mdx +++ b/packages/storybook-vue/stories/3_components/badge/Badge.stories.mdx @@ -19,8 +19,8 @@ import ScaleBadge from './ScaleBadge.vue'; }, }, size: { - defaultValue: 'big', - options: ['small', 'big'], + defaultValue: 'large', + options: ['small', 'large'], control: { type: 'select', }, @@ -30,9 +30,7 @@ import ScaleBadge from './ScaleBadge.vue'; export const Template = (args, { argTypes }) => ({ components: { ScaleBadge }, - props: { - ...ScaleBadge.props, - }, + props: ScaleBadge.props, template: ` <scale-badge :size="size" :color="color" :rotation="rotation"> <div> @@ -51,9 +49,7 @@ export const Template = (args, { argTypes }) => ({ export const Template2 = (args, { argTypes }) => ({ components: { ScaleBadge }, - props: { - ...ScaleBadge.props, - }, + props: ScaleBadge.props, template: ` <scale-badge :size="size" :color="color" :rotation="rotation"> <div> @@ -72,9 +68,7 @@ export const Template2 = (args, { argTypes }) => ({ export const Template3 = (args, { argTypes }) => ({ components: { ScaleBadge }, - props: { - ...ScaleBadge.props, - }, + props: ScaleBadge.props, template: ` <scale-badge :size="size" :color="color" :rotation="rotation"> <div> @@ -129,17 +123,17 @@ export const Template3 = (args, { argTypes }) => ({ --color-badge:#e20074; --inner-width-small: 86px; --inner-height-small: 88px; - --inner-width-big: 126.5px; - --inner-height-big: 96px; + --inner-width-large: 126.5px; + --inner-height-large: 96px; --width-small: 120px; --height-small: 120px; - --height-big: 160px; - --width-big: 160px; + --height-large: 160px; + --width-large: 160px; } ``` ## Size There are two sizes: -big / small. Big has the size 160x160 and small 120x120. In the example below, the badge is small +Large / small. Large has the size 160x160 and small 120x120. In the example below, the badge is small <Canvas withSource="none"> <Story @@ -154,7 +148,7 @@ big / small. Big has the size 160x160 and small 120x120. In the example below, t </Canvas> ```html -<scale-badge color="blue" size:"small" > +<scale-badge color="blue" size="small" > <div> <div style="text-align:center; font-size:20px; font-family:TeleNeo; color:blwhiteack; font-weight:400;" @@ -185,10 +179,10 @@ big / small. Big has the size 160x160 and small 120x120. In the example below, t </Canvas> ```html -<scale-badge color:"blue" size:"small" rotation:"33" > +<scale-badge color="blue" size="small" rotation="33" > <div> <div - style="text-align:center; font-size:20px; font-family:TeleNeo; color:blwhiteack; font-weight:400;" + style="text-align:center; font-size:20px; font-family:TeleNeo; color:blue; font-weight:400;" > Für nur </div> @@ -216,7 +210,7 @@ There are 4 standard colors (Primary - default, black, white, blue). The user al </Canvas> ```html -<scale-badge size="big" rotation="0"> +<scale-badge size="lare" rotation="0"> <div> <div style="text-align:center; font-size:20px; font-family:TeleNeo; color:white; font-weight:400;"> Für nur @@ -235,7 +229,7 @@ There are 4 standard colors (Primary - default, black, white, blue). The user al <Story name="Asterisk" args={{ - size: "big", + size: "large", }} > {Template3.bind({})} @@ -243,7 +237,7 @@ There are 4 standard colors (Primary - default, black, white, blue). The user al </Canvas> ```html -<scale-badge size="big" color="primary" rotation="0"> +<scale-badge size="large" color="primary" rotation="0"> <div> <div style="text-align: center; font-size: 25px; font-family: TeleNeo; color: white; font-weight: 400; margin-bottom: 10px;"> ab diff --git a/packages/storybook-vue/stories/3_components/badge/ScaleBadge.vue b/packages/storybook-vue/stories/3_components/badge/ScaleBadge.vue index 58baccf605..0bae523517 100644 --- a/packages/storybook-vue/stories/3_components/badge/ScaleBadge.vue +++ b/packages/storybook-vue/stories/3_components/badge/ScaleBadge.vue @@ -11,7 +11,7 @@ <script> export default { props: { - size: { type: String, default: "big" }, + size: { type: String, default: "large" }, color: {type: String, default: "primary"}, rotation:{type: Number, default: 0}, }, diff --git a/packages/storybook-vue/stories/3_components/badge/badge.md b/packages/storybook-vue/stories/3_components/badge/badge.md index 02b2a07749..8b35a3ed41 100644 --- a/packages/storybook-vue/stories/3_components/badge/badge.md +++ b/packages/storybook-vue/stories/3_components/badge/badge.md @@ -1,8 +1,8 @@ <div style="display: inline-flex; align-items: center; justify-content: space-between; width: 100%;"> - <h1>Rating Stars</h1> + <h1>Badge</h1> <img src="assets/beta.png" alt="Beta Component" /> </div> -## Beta components +## Beta Component This component is still in the beta phase. When testing it, keep in mind that it may not have gone through all quality control measures, and it may not yet have WCAG accessibility certification. There may be changes to this component in the future. diff --git a/packages/storybook-vue/stories/3_components/badge/badge_de.md b/packages/storybook-vue/stories/3_components/badge/badge_de.md index 3048222f59..be43ee376c 100644 --- a/packages/storybook-vue/stories/3_components/badge/badge_de.md +++ b/packages/storybook-vue/stories/3_components/badge/badge_de.md @@ -1,9 +1,8 @@ <div style="display: inline-flex; align-items: center; justify-content: space-between; width: 100%;"> <h1>Badge</h1> - <img src="assets/aa.png" alt="Accessible AA" /> + <img src="assets/beta.png" alt="Beta Component" /> </div> - ## Beta-Komponente Diese Komponente befindet sich noch im Beta-Stadium. Wenn du sie testest, bedenke, dass sie möglicherweise noch nicht alle Qualitätskontrollmaßnahmen durchlaufen hat und noch keine WCAG-Zertifizierung zur Barrierefreiheit vorliegt. In Zukunft kann es zu Änderungen an dieser Komponente kommen. From e0c9d8eb7ab740ce0c51a1be3a9be6da23ed9638 Mon Sep 17 00:00:00 2001 From: Denis Kutlovci <Denis.kutlovci@telekom.de> Date: Thu, 1 Jul 2021 11:03:18 +0200 Subject: [PATCH 16/19] design tokens added --- .../components/src/components/badge/badge.css | 18 +++++++++++------- .../3_components/badge/Badge.stories.mdx | 11 ++++++++--- 2 files changed, 19 insertions(+), 10 deletions(-) diff --git a/packages/components/src/components/badge/badge.css b/packages/components/src/components/badge/badge.css index 97dce37779..4108e04a35 100644 --- a/packages/components/src/components/badge/badge.css +++ b/packages/components/src/components/badge/badge.css @@ -1,13 +1,17 @@ :host { - --color-badge: #e20074; - --inner-width-small: 86px; - --inner-height-small: 88px; + --color-badge: var(--scl-color-primary); + --inner-width-small: var(--scl-spacing-80); + --inner-height-small: var(--scl-spacing-80); --inner-width-large: 126.5px; --inner-height-large: 96px; --width-small: 120px; --height-small: 120px; --height-large: 160px; --width-large: 160px; + --blue-badge: var(--scl-color-blue-60); + --white-badge: var(--scl-color-white); + --black-badge: var(--scl-color-black); + --primary-badge: var(--scl-color-primary); } .badge { @@ -19,16 +23,16 @@ } .badge.badge--color-primary { - background: var(--scl-color-primary, #e20074); + background: var(--primary-badge); } .badge.badge--color-white { - background: #ffffff; + background: var(--white-badge); } .badge.badge--color-blue { - background: #00739f; + background: var(--blue-badge); } .badge.badge--color-black { - background: #191919; + background: var(--black-badge); } .badge.badge--size-large { diff --git a/packages/storybook-vue/stories/3_components/badge/Badge.stories.mdx b/packages/storybook-vue/stories/3_components/badge/Badge.stories.mdx index 1dee0ce58b..c0707308f6 100644 --- a/packages/storybook-vue/stories/3_components/badge/Badge.stories.mdx +++ b/packages/storybook-vue/stories/3_components/badge/Badge.stories.mdx @@ -120,15 +120,20 @@ export const Template3 = (args, { argTypes }) => ({ ### Scoped CSS variables ```css :host { - --color-badge:#e20074; - --inner-width-small: 86px; - --inner-height-small: 88px; + --color-badge: var(--scl-color-primary); + --inner-width-small: var(--scl-spacing-80); + --inner-height-small: var(--scl-spacing-80); --inner-width-large: 126.5px; --inner-height-large: 96px; --width-small: 120px; --height-small: 120px; --height-large: 160px; --width-large: 160px; + --blue-badge: var(--scl-color-blue-60); + --white-badge: var(--scl-color-white); + --black-badge: var(--scl-color-black); + --primary-badge: var(--scl-color-primary); +} } ``` ## Size From 20be4ed9cb4a2fd772f29c8831a31a108e14a3a5 Mon Sep 17 00:00:00 2001 From: Denis Kutlovci <Denis.kutlovci@telekom.de> Date: Thu, 1 Jul 2021 15:38:12 +0200 Subject: [PATCH 17/19] Font-Family fixed --- packages/components-sketch/views/badge.hbs | 22 ------------------- .../components/src/components/badge/badge.css | 2 ++ 2 files changed, 2 insertions(+), 22 deletions(-) diff --git a/packages/components-sketch/views/badge.hbs b/packages/components-sketch/views/badge.hbs index c7e9f53c03..102ea8749a 100644 --- a/packages/components-sketch/views/badge.hbs +++ b/packages/components-sketch/views/badge.hbs @@ -12,7 +12,6 @@ style=" text-align: center; font-size: 20px; - font-family: TeleNeo; color: white; font-weight: 400; " @@ -23,7 +22,6 @@ style=" text-align: center; font-size: 60px; - font-family: TeleNeo; color: white; font-weight: 700; " @@ -41,7 +39,6 @@ style=" text-align: center; font-size: 20px; - font-family: TeleNeo; color: black; font-weight: 400; " @@ -52,7 +49,6 @@ style=" text-align: center; font-size: 60px; - font-family: TeleNeo; color: black; font-weight: 700; " @@ -70,7 +66,6 @@ style=" text-align: center; font-size: 20px; - font-family: TeleNeo; color: white; font-weight: 400; " @@ -81,7 +76,6 @@ style=" text-align: center; font-size: 60px; - font-family: TeleNeo; color: white; font-weight: 700; " @@ -99,7 +93,6 @@ style=" text-align: center; font-size: 20px; - font-family: TeleNeo; color: white; font-weight: 400; " @@ -110,7 +103,6 @@ style=" text-align: center; font-size: 60px; - font-family: TeleNeo; color: white; font-weight: 700; " @@ -132,7 +124,6 @@ style=" text-align: center; font-size: 20px; - font-family: TeleNeo; color: white; font-weight: 400; " @@ -143,7 +134,6 @@ style=" text-align: center; font-size: 60px; - font-family: TeleNeo; color: white; font-weight: 700; " @@ -161,7 +151,6 @@ style=" text-align: center; font-size: 20px; - font-family: TeleNeo; color: black; font-weight: 400; " @@ -172,7 +161,6 @@ style=" text-align: center; font-size: 60px; - font-family: TeleNeo; color: black; font-weight: 700; " @@ -190,7 +178,6 @@ style=" text-align: center; font-size: 20px; - font-family: TeleNeo; color: white; font-weight: 400; " @@ -201,7 +188,6 @@ style=" text-align: center; font-size: 60px; - font-family: TeleNeo; color: white; font-weight: 700; " @@ -219,7 +205,6 @@ style=" text-align: center; font-size: 20px; - font-family: TeleNeo; color: white; font-weight: 400; " @@ -230,7 +215,6 @@ style=" text-align: center; font-size: 60px; - font-family: TeleNeo; color: white; font-weight: 700; " @@ -252,7 +236,6 @@ style=" text-align: center; font-size: 20px; - font-family: TeleNeo; color: white; font-weight: 400; " @@ -262,7 +245,6 @@ style=" text-align: center; font-size: 60px; - font-family: TeleNeo; color: white; font-weight: 700; " @@ -279,7 +261,6 @@ style=" text-align: center; font-size: 20px; - font-family: TeleNeo; color: black; font-weight: 400; " @@ -289,7 +270,6 @@ style=" text-align: center; font-size: 60px; - font-family: TeleNeo; color: black; font-weight: 700; " @@ -306,7 +286,6 @@ style=" text-align: center; font-size: 20px; - font-family: TeleNeo; color: white; font-weight: 400; " @@ -316,7 +295,6 @@ style=" text-align: center; font-size: 60px; - font-family: TeleNeo; color: white; font-weight: 700; " diff --git a/packages/components/src/components/badge/badge.css b/packages/components/src/components/badge/badge.css index 4108e04a35..8a2d2c92cf 100644 --- a/packages/components/src/components/badge/badge.css +++ b/packages/components/src/components/badge/badge.css @@ -12,6 +12,7 @@ --white-badge: var(--scl-color-white); --black-badge: var(--scl-color-black); --primary-badge: var(--scl-color-primary); + --font-content: var('TeleNeoWeb', 'TeleNeo', sans-serif); } .badge { @@ -20,6 +21,7 @@ align-items: center; border-radius: 100%; background: var(--color-badge); + font-family: var(--font-content); } .badge.badge--color-primary { From 860b45da533cd4ad15385bb2b4589e1dd529bd81 Mon Sep 17 00:00:00 2001 From: Denis Kutlovci <Denis.kutlovci@telekom.de> Date: Thu, 1 Jul 2021 15:46:12 +0200 Subject: [PATCH 18/19] added design token for font-family --- packages/components/src/components/badge/badge.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/components/badge/badge.css b/packages/components/src/components/badge/badge.css index 8a2d2c92cf..a5d85305eb 100644 --- a/packages/components/src/components/badge/badge.css +++ b/packages/components/src/components/badge/badge.css @@ -12,7 +12,7 @@ --white-badge: var(--scl-color-white); --black-badge: var(--scl-color-black); --primary-badge: var(--scl-color-primary); - --font-content: var('TeleNeoWeb', 'TeleNeo', sans-serif); + --font-content: var(--scl-font-family-sans); } .badge { From 6e80953b6134ff5a6733625867b01cae33223fa7 Mon Sep 17 00:00:00 2001 From: Denis Kutlovci <Denis.kutlovci@telekom.de> Date: Thu, 1 Jul 2021 16:05:56 +0200 Subject: [PATCH 19/19] Edited storybook - Font --- .../3_components/badge/Badge.stories.mdx | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/packages/storybook-vue/stories/3_components/badge/Badge.stories.mdx b/packages/storybook-vue/stories/3_components/badge/Badge.stories.mdx index c0707308f6..bde5cbbcef 100644 --- a/packages/storybook-vue/stories/3_components/badge/Badge.stories.mdx +++ b/packages/storybook-vue/stories/3_components/badge/Badge.stories.mdx @@ -34,10 +34,10 @@ export const Template = (args, { argTypes }) => ({ template: ` <scale-badge :size="size" :color="color" :rotation="rotation"> <div> - <div style="text-align:center; font-size:20px; font-family:TeleNeo; color:white; font-weight:400;"> + <div style="text-align:center; font-size:20px; color:white; font-weight:400;"> Für nur </div> - <div style="text-align:center; font-size: 60px; font-family: TeleNeo; color: white; font-weight: 700;"> + <div style="text-align:center; font-size: 60px; color: white; font-weight: 700;"> <span> 15 € </span> @@ -53,10 +53,10 @@ export const Template2 = (args, { argTypes }) => ({ template: ` <scale-badge :size="size" :color="color" :rotation="rotation"> <div> - <div style="text-align: center; font-size: 15px; font-family: TeleNeo; color: white; font-weight: 400; margin-bottom: 10px;"> + <div style="text-align: center; font-size: 15px; color: white; font-weight: 400; margin-bottom: 10px;"> Für nur </div> - <div style="text-align: center; font-size: 40px; font-family: TeleNeo; color: white; font-weight: 700;"> + <div style="text-align: center; font-size: 40px; color: white; font-weight: 700;"> <span> 15 € </span> @@ -72,10 +72,10 @@ export const Template3 = (args, { argTypes }) => ({ template: ` <scale-badge :size="size" :color="color" :rotation="rotation"> <div> - <div style="text-align: center; font-size: 25px; font-family: TeleNeo; color: white; font-weight: 400; margin-bottom: 10px;"> + <div style="text-align: center; font-size: 25px; color: white; font-weight: 400; margin-bottom: 10px;"> ab </div> - <div style="text-align: center; font-size: 35px; font-family: TeleNeo; color: white; font-weight: 700;"> + <div style="text-align: center; font-size: 35px; color: white; font-weight: 700;"> <span> 19,95 € </span> @@ -104,12 +104,12 @@ export const Template3 = (args, { argTypes }) => ({ <scale-badge> <div> <div - style="text-align:center; font-size:20px; font-family:TeleNeo; color:white; font-weight:400;" + style="text-align:center; font-size:20px; color:white; font-weight:400;" > Für nur </div> <div - style="text-align:center; font-size: 60px; font-family: TeleNeo; color: white; font-weight: 700;" + style="text-align:center; font-size: 60px; color: white; font-weight: 700;" > <span> 15 € </span> </div> @@ -156,12 +156,12 @@ Large / small. Large has the size 160x160 and small 120x120. In the example belo <scale-badge color="blue" size="small" > <div> <div - style="text-align:center; font-size:20px; font-family:TeleNeo; color:blwhiteack; font-weight:400;" + style="text-align:center; font-size:20px; color:blwhiteack; font-weight:400;" > Für nur </div> <div - style="text-align:center; font-size: 60px; font-family: TeleNeo; color: white; font-weight: 700;" + style="text-align:center; font-size: 60px; color: white; font-weight: 700;" > <span> 15 € </span> </div> @@ -187,12 +187,12 @@ Large / small. Large has the size 160x160 and small 120x120. In the example belo <scale-badge color="blue" size="small" rotation="33" > <div> <div - style="text-align:center; font-size:20px; font-family:TeleNeo; color:blue; font-weight:400;" + style="text-align:center; font-size:20px; color:blue; font-weight:400;" > Für nur </div> <div - style="text-align:center; font-size: 60px; font-family: TeleNeo; color: white; font-weight: 700;" + style="text-align:center; font-size: 60px; color: white; font-weight: 700;" > <span> 15 € </span> </div> @@ -217,10 +217,10 @@ There are 4 standard colors (Primary - default, black, white, blue). The user al ```html <scale-badge size="lare" rotation="0"> <div> - <div style="text-align:center; font-size:20px; font-family:TeleNeo; color:white; font-weight:400;"> + <div style="text-align:center; font-size:20px; color:white; font-weight:400;"> Für nur </div> - <div style="text-align:center; font-size: 60px; font-family: TeleNeo; color: white; font-weight: 700;"> + <div style="text-align:center; font-size: 60px; color: white; font-weight: 700;"> <span> 15 € </span> @@ -244,10 +244,10 @@ There are 4 standard colors (Primary - default, black, white, blue). The user al ```html <scale-badge size="large" color="primary" rotation="0"> <div> - <div style="text-align: center; font-size: 25px; font-family: TeleNeo; color: white; font-weight: 400; margin-bottom: 10px;"> + <div style="text-align: center; font-size: 25px; TeleNeo; color: white; font-weight: 400; margin-bottom: 10px;"> ab </div> - <div style="text-align: center; font-size: 35px; font-family: TeleNeo; color: white; font-weight: 700;"> + <div style="text-align: center; font-size: 35px; TeleNeo; color: white; font-weight: 700;"> <span> 19,95 € </span>