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

import { Toast } from "./Toast"

import type { Meta, StoryObj } from "@storybook/nextjs-vite"
import { expect, within } from "storybook/test"

import { config } from "./variants.ts"

const meta: Meta<typeof Toast> = {
  title: "Core Components/Toast/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(await canvas.findByText("This is a custom info toast")).toBeVisible()
  },
}

export const Success: Story = {
  args: {
    variant: "success",
    message: "This is a success toast",
  },
  play: async ({ canvasElement, args }) => {
    const canvas = within(canvasElement)
    const toast = await canvas.findByRole("status")
    expect(toast).toBeVisible()
    expect(await canvas.findByText(args.message as string)).toBeVisible()
  },
}

export const Error: Story = {
  args: {
    variant: "error",
    message: "This is an error toast",
  },
  play: async ({ canvasElement, args }) => {
    const canvas = within(canvasElement)
    const toast = await canvas.findByRole("alert")
    expect(toast).toBeVisible()
    expect(await canvas.findByText(args.message as string)).toBeVisible()
  },
}

export const Warning: Story = {
  args: {
    variant: "warning",
    message: "This is a warning toast",
  },
  play: async ({ args, canvasElement }) => {
    const canvas = within(canvasElement)
    const toast = await canvas.findByRole("alert")
    expect(toast).toBeVisible()
    expect(await canvas.findByText(args.message as string)).toBeVisible()
  },
}