diff --git a/packages/components-sketch/views/badge.hbs b/packages/components-sketch/views/badge.hbs new file mode 100644 index 0000000000..102ea8749a --- /dev/null +++ b/packages/components-sketch/views/badge.hbs @@ -0,0 +1,352 @@ + +
+

Overview

+ +

Badge Eyecatcher

+
+
+

Primary - Large

+ +
+
+ Für nur +
+
+ 15 € +
+
+ +
+
+

White - Large

+ +
+
+ Für nur +
+
+ 15 € +
+
+ +
+
+

Black - Large

+ +
+
+ Für nur +
+
+ 15 € +
+
+ +
+
+

Colored - Large

+ +
+
+ Für nur +
+
+ 15 € +
+
+ +
+
+ +

+
+
+

Primary - Small

+ +
+
+ Für nur +
+
+ 15 € +
+
+ +
+
+

White - small

+ +
+
+ Für nur +
+
+ 15 € +
+
+ +
+
+

Black - Small

+ +
+
+ Für nur +
+
+ 15 € +
+
+ +
+
+

Colored - small

+ +
+
+ Für nur +
+
+ 15 € +
+
+ +
+
+ +

+
+
+

Rotation 0˚ Default

+ +
+
Für nur +
+
15 € +
+
+ +
+
+

Rotation 30˚

+ +
+
Für nur +
+
15 € +
+
+ +
+
+

Rotation 90˚

+ +
+
Für nur +
+
+ 15 € +
+
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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/.

Scale Components

Accordion

Button

+

Badge

Breadcrumb

Card

Checkbox

diff --git a/packages/components/src/components/badge/badge.css b/packages/components/src/components/badge/badge.css new file mode 100644 index 0000000000..a5d85305eb --- /dev/null +++ b/packages/components/src/components/badge/badge.css @@ -0,0 +1,63 @@ +:host { + --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); + --font-content: var(--scl-font-family-sans); +} + +.badge { + display: flex; + justify-content: center; + align-items: center; + border-radius: 100%; + background: var(--color-badge); + font-family: var(--font-content); +} + +.badge.badge--color-primary { + background: var(--primary-badge); +} +.badge.badge--color-white { + background: var(--white-badge); +} +.badge.badge--color-blue { + background: var(--blue-badge); +} +.badge.badge--color-black { + background: var(--black-badge); +} + +.badge.badge--size-large { + width: var(--width-large); + height: var(--height-large); +} + +.badge.badge--size-small { + width: var(--width-small); + height: var(--height-small); +} + +.badge.badge--size-large .badge--inner { + width: var(--inner-width-large); + height: var(--inner-height-large); +} + +.badge.badge--size-small .badge--inner { + width: var(--inner-width-small); + height: var(--inner-height-small); +} + +.badge--inner { + transform: rotateZ(var(--badge-rotation)); + overflow: hidden; +} 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..047865845d --- /dev/null +++ b/packages/components/src/components/badge/badge.spec.ts @@ -0,0 +1,32 @@ +import { newSpecPage } from '@stencil/core/testing'; +import { Badge } from './badge'; + +it('should reflect attributes/props', async () => { + const page = await newSpecPage({ + components: [Badge], + html: ` + `, + }); + + expect(page.rootInstance.size).toBe('large'); + expect(page.rootInstance.color).toBe('primary'); + expect(page.rootInstance.rotation).toBe(15); +}); + +it('checks another color, other than prop', async () => { + const page = await newSpecPage({ + components: [Badge], + html: ` + `, + }); + + 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/badge.tsx b/packages/components/src/components/badge/badge.tsx new file mode 100644 index 0000000000..4a7bf4e6e1 --- /dev/null +++ b/packages/components/src/components/badge/badge.tsx @@ -0,0 +1,60 @@ +import { Component, h, Host, Prop, Element } from '@stencil/core'; +import classNames from 'classnames'; +import statusNote from '../../utils/status-note'; + +@Component({ + tag: 'scale-badge', + styleUrl: 'badge.css', + 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 */ + @Prop({ mutable: true }) color: 'primary' | 'white' | 'black' | 'blue'; + /** (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; + }`; + } + + render() { + return ( + + +
+
+ +
+
+ + ); + } + + getBasePartMap() { + return this.getCssOrBasePartMap('basePart'); + } + + getCssClassMap() { + return this.getCssOrBasePartMap('css'); + } + + getCssOrBasePartMap(mode: 'basePart' | 'css') { + const name = 'badge'; + const prefix = mode === 'basePart' ? '' : `${name}--`; + + return classNames( + name, + this.color && `${prefix}color-${this.color}`, + this.size && `${prefix}size-${this.size}` + ); + } +} diff --git a/packages/components/src/components/badge/readme.md b/packages/components/src/components/badge/readme.md new file mode 100644 index 0000000000..711983b8f6 --- /dev/null +++ b/packages/components/src/components/badge/readme.md @@ -0,0 +1,26 @@ +# scale-badge + + + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| ---------- | ---------- | ----------------------------------------------- | ------------------------------------------- | ----------- | +| `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 | `"large" \| "small"` | `'large'` | + + +## Shadow Parts + +| Part | Description | +| --------- | ----------- | +| `"inner"` | | + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* 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..bde5cbbcef --- /dev/null +++ b/packages/storybook-vue/stories/3_components/badge/Badge.stories.mdx @@ -0,0 +1,258 @@ +import { + Meta, + Story, + ArgsTable, + Canvas, + Description, +} from '@storybook/addon-docs/blocks'; +import ScaleBadge from './ScaleBadge.vue'; + + + +export const Template = (args, { argTypes }) => ({ + components: { ScaleBadge }, + props: ScaleBadge.props, + template: ` + +
+
+ Für nur +
+
+ + 15 € + +
+
+ + `, +}); + +export const Template2 = (args, { argTypes }) => ({ + components: { ScaleBadge }, + props: ScaleBadge.props, + template: ` + +
+
+ Für nur +
+
+ + 15 € + +
+
+ + `, +}); + +export const Template3 = (args, { argTypes }) => ({ + components: { ScaleBadge }, + props: ScaleBadge.props, + template: ` + +
+
+ ab +
+
+ + 19,95 € + + * +
+
+ + `, +}); + +## Standard +### All default values + + + {Template.bind({})} + + + + + +```html + +
+
+ Für nur +
+
+ 15 € +
+
+ +``` + +### Scoped CSS variables +```css + :host { + --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 +There are two sizes: +Large / small. Large has the size 160x160 and small 120x120. In the example below, the badge is small + + + + {Template2.bind({})} + + + +```html + +
+
+ Für nur +
+
+ 15 € +
+
+ +``` + +## Rotation + + + {Template2.bind({})} + + + +```html + +
+
+ Für nur +
+
+ 15 € +
+
+ +``` + +## Color Choosing +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. + + + + {Template2.bind({})} + + + +```html + +
+
+ Für nur +
+
+ + 15 € + +
+
+ +``` + +## Asterisk + + + {Template3.bind({})} + + + +```html + +
+
+ ab +
+
+ + 19,95 € + + * +
+
+ +``` \ 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..0bae523517 --- /dev/null +++ b/packages/storybook-vue/stories/3_components/badge/ScaleBadge.vue @@ -0,0 +1,20 @@ + + + + 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..8b35a3ed41 --- /dev/null +++ b/packages/storybook-vue/stories/3_components/badge/badge.md @@ -0,0 +1,8 @@ +
+

Badge

+ Beta Component +
+ +## 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 new file mode 100644 index 0000000000..be43ee376c --- /dev/null +++ b/packages/storybook-vue/stories/3_components/badge/badge_de.md @@ -0,0 +1,8 @@ +
+

Badge

+ Beta Component +
+ +## 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.