Merged in SW-3317-move-toast-to-design-system (pull request #2716)

SW-3317 move toast to design system

* chore: Move toast to design-system and add interaction tests

* Move toast to design-system and add storybook tests

* Merge branch 'master' of bitbucket.org:scandic-swap/web into SW-3317-move-toast-to-design-system

* merge

* move sonner dependency to @scandic-hotels/design-system


Approved-by: Anton Gunnarsson

packages/design-system/lib/components/Toasts/Toast.stories.tsx

@@ -0,0 +1,93 @@
+import { Toast } from './Toast'
+
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { expect } from 'storybook/test'
+
+import { config } from './variants.ts'
+
+const meta: Meta<typeof Toast> = {
+  title: 'Components/Toasts/Toast',
+  component: Toast,
+  argTypes: {
+    variant: {
+      control: 'select',
+      type: 'string',
+      options: Object.keys(config.variants.variant),
+      table: {
+        defaultValue: { summary: 'info' },
+      },
+    },
+    message: {
+      control: 'text',
+      type: 'string',
+      table: {
+        defaultValue: { summary: 'Toast message' },
+      },
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Toast>
+
+export const Default: Story = {
+  args: {
+    variant: 'info',
+    message: 'This is a toast',
+  },
+  play: async ({ canvas }) => {
+    const toast = await canvas.findByRole('status')
+    expect(toast).toBeVisible()
+  },
+}
+
+export const DefaultWithCustomContent: Story = {
+  args: {
+    variant: 'info',
+    children: (
+      <p style={{ fontStyle: 'italic' }}>This is a custom info toast</p>
+    ),
+  },
+  play: async ({ canvas }) => {
+    const toast = await canvas.findByRole('status')
+    expect(toast).toBeVisible()
+    expect(canvas.getByText('This is a custom info toast')).toBeVisible()
+  },
+}
+
+export const Success: Story = {
+  args: {
+    variant: 'success',
+    message: 'This is a success toast',
+  },
+  play: async ({ canvas, args }) => {
+    const toast = await canvas.findByRole('status')
+    expect(toast).toBeVisible()
+    expect(canvas.getByText(args.message as string)).toBeVisible()
+  },
+}
+
+export const Error: Story = {
+  args: {
+    variant: 'error',
+    message: 'This is an error toast',
+  },
+  play: async ({ canvas, args }) => {
+    const toast = await canvas.findByRole('alert')
+    expect(toast).toBeVisible()
+    expect(canvas.getByText(args.message as string)).toBeVisible()
+  },
+}
+
+export const Warning: Story = {
+  args: {
+    variant: 'warning',
+    message: 'This is a warning toast',
+  },
+  play: async ({ canvas, args }) => {
+    const toast = await canvas.findByRole('alert')
+    expect(toast).toBeVisible()
+    expect(canvas.getByText(args.message as string)).toBeVisible()
+  },
+}