OPHJOD-296: Add toast variants

Opetushallitus · Apr 9, 2024 · 675665a · 675665a
1 parent 87f7078
commit 675665a
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 8 deletions.
diff --git a/lib/components/Toast/Toast.stories.ts b/lib/components/Toast/Toast.stories.ts
@@ -12,25 +12,69 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Icon: Story = {
+const url = 'https://www.figma.com/file/6M2LrpSCcB0thlFDaQAI2J/cx_jod_client?node-id=542%3A8376';
+const text = 'Lorem ipsum dolor';
+
+export const Success: Story = {
   parameters: {
     design: {
       type: 'figma',
-      url: 'https://www.figma.com/file/6M2LrpSCcB0thlFDaQAI2J/cx_jod_client?node-id=542%3A8376',
+      url,
     },
     docs: {
       description: {
-        story: 'This is a toast component for displaying a text.',
+        story: 'This is a success toast component for displaying a text.',
       },
     },
   },
   args: {
-    text: 'Lorem ipsum dolor',
+    text,
     icon: 'check_circle',
     iconAriaLabel: 'Check Circle',
   },
 };
 
+export const Warning: Story = {
+  parameters: {
+    design: {
+      type: 'figma',
+      url,
+    },
+    docs: {
+      description: {
+        story: 'This is a warning toast component for displaying a text.',
+      },
+    },
+  },
+  args: {
+    text,
+    icon: 'warning',
+    iconAriaLabel: 'Warning',
+    variant: 'warning',
+  },
+};
+
+export const ErrorStory: Story = {
+  name: 'Error',
+  parameters: {
+    design: {
+      type: 'figma',
+      url,
+    },
+    docs: {
+      description: {
+        story: 'This is an error toast component for displaying a text.',
+      },
+    },
+  },
+  args: {
+    text,
+    icon: 'error',
+    iconAriaLabel: 'Error',
+    variant: 'error',
+  },
+};
+
 export const Iconless: Story = {
   parameters: {
     design: {

diff --git a/lib/components/Toast/Toast.tsx b/lib/components/Toast/Toast.tsx
@@ -5,17 +5,26 @@ export interface ToastProps {
   icon?: string;
   /** Aria label for the icon */
   iconAriaLabel?: string;
+  /** Variant of the toast */
+  variant?: 'success' | 'warning' | 'error';
 }
 
 /**
  * Toast component for displaying a text.
  */
-export const Toast = ({ text, icon, iconAriaLabel }: ToastProps) => (
+export const Toast = ({ text, icon, iconAriaLabel, variant = 'success' }: ToastProps) => (
   <div
     role="alert"
     aria-live="assertive"
     aria-atomic="true"
-    className={`inline-flex h-8 items-center gap-3 rounded-[4px] bg-success pl-5 text-body-sm ${icon ? 'pr-7' : 'pr-5'} text-white`}
+    className={`
+        ${variant === 'success' ? 'bg-success text-white' : ''}
+        ${variant === 'warning' ? 'bg-warning text-black' : ''}
+        ${variant === 'error' ? 'bg-alert text-white' : ''}
+        inline-flex h-8 items-center gap-3 rounded-[4px] pl-5
+        text-body-sm ${icon ? 'pr-7' : 'pr-5'}`
+      .replace(/\s+/g, ' ')
+      .trim()}
   >
     {icon && (
       <span className="material-symbols-outlined size-24 select-none" role="img" aria-label={iconAriaLabel}>

diff --git a/lib/components/Toast/__snapshots__/Toast.test.tsx.snap b/lib/components/Toast/__snapshots__/Toast.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Toast > renders the toast component with icon 1`] = `
 <div
   aria-atomic="true"
   aria-live="assertive"
-  class="inline-flex h-8 items-center gap-3 rounded-[4px] bg-success pl-5 text-body-sm pr-7 text-white"
+  class="bg-success text-white inline-flex h-8 items-center gap-3 rounded-[4px] pl-5 text-body-sm pr-7"
   role="alert"
 >
   <span
@@ -22,7 +22,7 @@ exports[`Toast > renders the toast component with text 1`] = `
 <div
   aria-atomic="true"
   aria-live="assertive"
-  class="inline-flex h-8 items-center gap-3 rounded-[4px] bg-success pl-5 text-body-sm pr-5 text-white"
+  class="bg-success text-white inline-flex h-8 items-center gap-3 rounded-[4px] pl-5 text-body-sm pr-5"
   role="alert"
 >
   This is a toast message