diff --git a/src/elements/status/readme.md b/src/elements/status/readme.md index 01c2820745..12454da4b4 100644 --- a/src/elements/status/readme.md +++ b/src/elements/status/readme.md @@ -13,16 +13,26 @@ The `sbb-status` is structured in the following way: ## Variants -The `sbb-status` supports four types: `info` (default), `success`, `warn` and `error`, based on the type of the information displayed. +The `sbb-status` supports eight types, based on the type of the information displayed: + +- `info` (default) +- `success` +- `warn` +- `error` +- `pending` +- `incomplete` +- `not-started` +- `in-progress` ```html ... - ... - ... - ... +... +... +... +... ``` ## Icon diff --git a/src/elements/status/status.scss b/src/elements/status/status.scss index 9dc3914e25..b23ec9a17a 100644 --- a/src/elements/status/status.scss +++ b/src/elements/status/status.scss @@ -35,6 +35,39 @@ $has-title: ':is([data-slot-names~=title], [title-content])'; --sbb-status-text-color: var(--sbb-color-charcoal); } +:host([type='pending']) { + --sbb-status-text-color: var(--sbb-color-sky); +} + +:host(:is([type='pending'], [type='pending']#{$has-title})) { + --sbb-status-icon-color: var(--sbb-color-sky); +} + +:host([type='incomplete']) { + --sbb-status-text-color: var(--sbb-color-red125); +} + +:host(:is([type='incomplete'], [type='incomplete']#{$has-title})) { + --sbb-status-icon-color: var(--sbb-color-red125); +} + +:host([type='not-started']) { + --sbb-status-icon-color: var(--sbb-color-smoke); + --sbb-status-text-color: var(--sbb-color-charcoal); +} + +:host(:is([type='not-started'], [type='in-progress']#{$has-title})) { + --sbb-status-icon-color: var(--sbb-color-smoke); +} + +:host([type='in-progress']) { + --sbb-status-text-color: var(--sbb-color-pink); +} + +:host(:is([type='in-progress'], [type='in-progress']#{$has-title})) { + --sbb-status-icon-color: var(--sbb-color-pink); +} + :host(#{$has-title}) { --sbb-status-text-color: var(--sbb-color-granite); --sbb-status-icon-color: var(--sbb-color-charcoal); diff --git a/src/elements/status/status.stories.ts b/src/elements/status/status.stories.ts index 2a762c780a..bb1576e33c 100644 --- a/src/elements/status/status.stories.ts +++ b/src/elements/status/status.stories.ts @@ -14,7 +14,16 @@ const type: InputType = { control: { type: 'select', }, - options: ['info', 'success', 'warning', 'error'], + options: [ + 'info', + 'success', + 'warning', + 'error', + 'pending', + 'incomplete', + 'not-started', + 'in-progress', + ], }; const titleContent: InputType = { @@ -43,7 +52,7 @@ const defaultArgTypes: ArgTypes = { }; const defaultArgs: Args = { - type: 'info', + type: type.options![0], 'title-content': undefined, text: 'Status info text', 'icon-name': undefined, @@ -68,19 +77,43 @@ export const info: StoryObj = { export const success: StoryObj = { render: Template, argTypes: defaultArgTypes, - args: { ...defaultArgs, type: 'success' }, + args: { ...defaultArgs, type: type.options![1] }, }; export const warning: StoryObj = { render: Template, argTypes: defaultArgTypes, - args: { ...defaultArgs, type: 'warning' }, + args: { ...defaultArgs, type: type.options![2] }, }; export const error: StoryObj = { render: Template, argTypes: defaultArgTypes, - args: { ...defaultArgs, type: 'error' }, + args: { ...defaultArgs, type: type.options![3] }, +}; + +export const pending: StoryObj = { + render: Template, + argTypes: defaultArgTypes, + args: { ...defaultArgs, type: type.options![4] }, +}; + +export const incomplete: StoryObj = { + render: Template, + argTypes: defaultArgTypes, + args: { ...defaultArgs, type: type.options![5] }, +}; + +export const notStarted: StoryObj = { + render: Template, + argTypes: defaultArgTypes, + args: { ...defaultArgs, type: type.options![6] }, +}; + +export const inProgress: StoryObj = { + render: Template, + argTypes: defaultArgTypes, + args: { ...defaultArgs, type: type.options![7] }, }; export const infoWithTitle: StoryObj = { @@ -92,19 +125,43 @@ export const infoWithTitle: StoryObj = { export const successWithTitle: StoryObj = { render: Template, argTypes: defaultArgTypes, - args: { ...defaultArgs, type: 'success', 'title-content': 'Success!' }, + args: { ...defaultArgs, type: type.options![1], 'title-content': 'Success!' }, }; export const warningWithTitle: StoryObj = { render: Template, argTypes: defaultArgTypes, - args: { ...defaultArgs, type: 'warning', 'title-content': 'Warning!' }, + args: { ...defaultArgs, type: type.options![2], 'title-content': 'Warning!' }, }; export const errorWithTitle: StoryObj = { render: Template, argTypes: defaultArgTypes, - args: { ...defaultArgs, type: 'error', 'title-content': 'Error!' }, + args: { ...defaultArgs, type: type.options![3], 'title-content': 'Error!' }, +}; + +export const pendingWithTitle: StoryObj = { + render: Template, + argTypes: defaultArgTypes, + args: { ...defaultArgs, type: type.options![4], 'title-content': 'Pending...' }, +}; + +export const incompleteWithTitle: StoryObj = { + render: Template, + argTypes: defaultArgTypes, + args: { ...defaultArgs, type: type.options![5], 'title-content': 'Incomplete...' }, +}; + +export const notStartedWithTitle: StoryObj = { + render: Template, + argTypes: defaultArgTypes, + args: { ...defaultArgs, type: type.options![6], 'title-content': 'Not started...' }, +}; + +export const inProgressWithTitle: StoryObj = { + render: Template, + argTypes: defaultArgTypes, + args: { ...defaultArgs, type: type.options![7], 'title-content': 'In progress...' }, }; export const successWithCustomIcon: StoryObj = { @@ -114,7 +171,7 @@ export const successWithCustomIcon: StoryObj = { ...defaultArgs, type: 'success', 'icon-name': 'pen-small', - 'title-content': 'In progress', + 'title-content': 'Success!', }, }; diff --git a/src/elements/status/status.ts b/src/elements/status/status.ts index af4ee50c2d..cdf99c8461 100644 --- a/src/elements/status/status.ts +++ b/src/elements/status/status.ts @@ -10,7 +10,15 @@ import style from './status.scss?lit&inline'; import '../title.js'; -export type SbbStatusType = 'info' | 'success' | 'warning' | 'error'; +export type SbbStatusType = + | 'info' + | 'success' + | 'warning' + | 'error' + | 'pending' + | 'incomplete' + | 'not-started' + | 'in-progress'; /** * Displays a message to the user's attention. @@ -29,6 +37,10 @@ export class SbbStatusElement extends SbbIconNameMixin(LitElement) { ['success', 'circle-tick-small'], ['warning', 'circle-exclamation-point-small'], ['error', 'circle-cross-small'], + ['pending', 'circle-three-dots-small'], + ['incomplete', 'circle-dotted-part-x-small'], + ['not-started', 'circle-dotted-small'], + ['in-progress', 'circle-dotted-part-small'], ]); /** The type of the status. */ diff --git a/src/elements/status/status.visual.spec.ts b/src/elements/status/status.visual.spec.ts index e1f41c0144..475ff9ea0e 100644 --- a/src/elements/status/status.visual.spec.ts +++ b/src/elements/status/status.visual.spec.ts @@ -11,7 +11,16 @@ import './status.js'; describe(`sbb-status`, () => { const cases = { - type: ['info', 'success', 'warning', 'error'], + type: [ + 'info', + 'success', + 'warning', + 'error', + 'pending', + 'incomplete', + 'not-started', + 'in-progress', + ], titleContent: [undefined, 'Title'], }; diff --git a/tools/web-test-runner/preload-icons.ts b/tools/web-test-runner/preload-icons.ts index 2f22ec50c8..b5c349810c 100644 --- a/tools/web-test-runner/preload-icons.ts +++ b/tools/web-test-runner/preload-icons.ts @@ -28,6 +28,9 @@ const preloadIconList = [ 'chevron-small-right-small', 'chevron-small-up-small', 'circle-cross-small', + 'circle-dotted-small', + 'circle-dotted-part-small', + 'circle-dotted-part-x-small', 'circle-exclamation-point-small', 'circle-information-large', 'circle-information-medium', @@ -35,6 +38,7 @@ const preloadIconList = [ 'circle-minus-small', 'circle-plus-medium', 'circle-plus-small', + 'circle-three-dots-small', 'circle-tick-small', 'clock-small', 'coins-small',