This is a custom info toast
+ ), + }, + 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() + }, +} diff --git a/packages/design-system/lib/components/Toasts/Toast.tsx b/packages/design-system/lib/components/Toasts/Toast.tsx new file mode 100644 index 000000000..d6385bab1 --- /dev/null +++ b/packages/design-system/lib/components/Toasts/Toast.tsx @@ -0,0 +1,84 @@ +import type { VariantProps } from 'class-variance-authority' + +import { toastVariants } from './variants' +import { MaterialIcon, MaterialIconSetIconProps } from '../Icons/MaterialIcon' + +import styles from './toasts.module.css' +import { Typography } from '../Typography' +import { useIntl } from 'react-intl' +import { IconButton } from '../IconButton' + +export type ToastsProps = VariantProps{message}
+