feat(sbb-status): add new types (#2939)

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
 <sbb-status type="info">...</sbb-status>
-
 <sbb-status type="success">...</sbb-status>
-
 <sbb-status type="warn">...</sbb-status>
-
 <sbb-status type="error">...</sbb-status>
+<sbb-status type="pending">...</sbb-status>
+<sbb-status type="incomplete">...</sbb-status>
+<sbb-status type="not-started">...</sbb-status>
+<sbb-status type="in-progress">...</sbb-status>
 ```
 
 ## Icon

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);

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!',
   },
 };
 

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. */

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'],
   };
 

tools/web-test-runner/preload-icons.ts

@@ -28,13 +28,17 @@ 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',
   'circle-information-small',
   'circle-minus-small',
   'circle-plus-medium',
   'circle-plus-small',
+  'circle-three-dots-small',
   'circle-tick-small',
   'clock-small',
   'coins-small',