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

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()
  },
}