adjust for stories

Author: nielslyngsoe

packages/uui-action-bar/lib/uui-action-bar.story.ts

@@ -21,7 +21,7 @@ const meta: Meta = {
     },
     color: {
       control: { type: 'select' },
-      options: ['default', 'positive', 'warning', 'danger'],
+      options: ['default', 'positive', 'warning', 'danger', 'invalid'],
     },
   },
   parameters: {
@@ -67,7 +67,7 @@ export const LooksAndColors: Story = {
   render: () => {
     const buttons = ['copy', 'remove', 'delete'];
     const looks = ['default', 'primary', 'secondary', 'outline', 'placeholder'];
-    const colors = ['default', 'positive', 'warning', 'danger'];
+    const colors = ['default', 'positive', 'warning', 'danger', 'invalid'];
 
     const uppercaseFirstLetter = (str: string) =>
       str.charAt(0).toUpperCase() + str.slice(1);

packages/uui-badge/lib/uui-badge.story.ts

@@ -16,7 +16,7 @@ const meta: Meta = {
       options: ['default', 'primary', 'secondary', 'outline', 'placeholder'],
     },
     color: {
-      options: ['default', 'positive', 'warning', 'danger'],
+      options: ['default', 'positive', 'warning', 'danger', 'invalid'],
     },
   },
 
@@ -63,7 +63,7 @@ export const Icon: Story = {
 export const LooksAndColors: Story = {
   render: () => {
     const looks = ['default', 'primary', 'secondary', 'outline', 'placeholder'];
-    const colors = ['default', 'positive', 'warning', 'danger'];
+    const colors = ['default', 'positive', 'warning', 'danger', 'invalid'];
 
     const uppercaseFirstLetter = (str: string) =>
       str.charAt(0).toUpperCase() + str.slice(1);

packages/uui-base/lib/types/InterfaceColor.ts

@@ -3,6 +3,7 @@ export const UUIInterfaceColorValues: Readonly<UUIInterfaceColor[]> = [
   'positive',
   'warning',
   'danger',
+  'invalid',
 ] as const;
 
 export type UUIInterfaceColor =

packages/uui-button/lib/uui-button.story.ts

@@ -20,7 +20,7 @@ const meta: Meta = {
       options: ['default', 'primary', 'secondary', 'outline', 'placeholder'],
     },
     color: {
-      options: ['default', 'positive', 'warning', 'danger'],
+      options: ['default', 'positive', 'warning', 'danger', 'invalid'],
     },
     type: {
       options: ['button', 'submit', 'reset'],
@@ -147,7 +147,13 @@ export const LooksAndColors: Story = {
       'outline',
       'placeholder',
     ] as const;
-    const colors = ['default', 'positive', 'warning', 'danger'] as const;
+    const colors = [
+      'default',
+      'positive',
+      'warning',
+      'danger',
+      'invalid',
+    ] as const;
 
     const uppercaseFirstLetter = (str: string) =>
       str.charAt(0).toUpperCase() + str.slice(1);

packages/uui-tag/lib/uui-tag.element.ts

@@ -80,6 +80,11 @@ export class UUITagElement extends LitElement {
         --color-contrast: var(--uui-color-warning-contrast);
       }
       :host([color='danger']) {
+        --color: var(--uui-color-danger);
+        --color-standalone: var(--uui-color-danger-standalone);
+        --color-contrast: var(--uui-color-danger-contrast);
+      }
+      :host([color='invalid']) {
         --color: var(--uui-color-invalid);
         --color-standalone: var(--uui-color-invalid-standalone);
         --color-contrast: var(--uui-color-invalid-contrast);

packages/uui-tag/lib/uui-tag.story.ts

@@ -39,7 +39,7 @@ export const Sizing: Story = {
 export const LooksAndColors: Story = {
   render: () => {
     const looks = ['default', 'primary', 'secondary', 'outline', 'placeholder'];
-    const colors = ['default', 'positive', 'warning', 'danger'];
+    const colors = ['default', 'positive', 'warning', 'danger', 'invalid'];
 
     function uppercaseFirstLetter(s: string) {
       return s.charAt(0).toUpperCase() + s.slice(1);

packages/uui-toast-notification/lib/uui-toast-notification.element.ts

@@ -6,6 +6,7 @@ import { css, html, LitElement } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 
 import { UUIToastNotificationEvent } from './UUIToastNotificationEvent';
+import { UUIInterfaceColor } from '@umbraco-ui/uui-base';
 
 /**
  *  @element uui-toast-notification
@@ -20,12 +21,12 @@ import { UUIToastNotificationEvent } from './UUIToastNotificationEvent';
 export class UUIToastNotificationElement extends LitElement {
   /**
    * Changes the color of the notification to one of the predefined, symbolic colors. Example: set this to danger to indicate errors.
-   * @type {'' | 'default' | 'positive' | 'warning' | 'danger'}
+   * @type {UUIInterfaceColor}
    * @attr
    * @default ""
    */
   @property({ reflect: true })
-  color: '' | 'default' | 'positive' | 'warning' | 'danger' = '';
+  color: UUIInterfaceColor = '';
 
   private _autoClose: number | null = null;
   /**

packages/uui-toast-notification/lib/uui-toast-notification.story.ts

@@ -15,7 +15,7 @@ const meta: Meta = {
   },
   argTypes: {
     color: {
-      options: ['', 'default', 'positive', 'warning', 'danger'],
+      options: ['', 'default', 'positive', 'warning', 'danger', 'invalid'],
     },
     headline: { control: { type: 'text' } },
   },
@@ -42,7 +42,7 @@ export const Default: Story = {
   },
 };
 
-export const ErrorStyle: Story = {
+export const DangerStyle: Story = {
   args: {
     headline: 'Document could not be published!',
     slot: html`An error occurred while attempting to contact the server. Please
@@ -54,6 +54,17 @@ export const ErrorStyle: Story = {
   },
 };
 
+export const ErrorStyle: Story = {
+  args: {
+    headline: 'Document could not be published!',
+    slot: html`The data is not valid. Please correct data corrdingly.
+      <uui-button slot="actions" look="primary" color="invalid"
+        >Retry</uui-button
+      >`,
+    color: 'invalid',
+  },
+};
+
 export const PositiveStyle: Story = {
   args: {
     headline: 'Document published!',