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',