diff --git a/packages/toast/package.json b/packages/toast/package.json index b1c601f0b72..c11017c8ffa 100644 --- a/packages/toast/package.json +++ b/packages/toast/package.json @@ -16,12 +16,13 @@ }, "dependencies": { "@heroicons/react": "^2.2.0", - "react-toastify": "^10.0.6" + "react-toastify": "^11.0.2" }, "devDependencies": { "@faker-js/faker": "^9.3.0", "@gc-digital-talent/eslint-config": "workspace:*", "@gc-digital-talent/storybook-helpers": "workspace:*", + "@gc-digital-talent/ui": "workspace:*", "@storybook/react": "^8.4.7", "@types/react": "^18.3.13", "eslint": "^8.57.0", diff --git a/packages/toast/src/components/Toast/Toast.stories.tsx b/packages/toast/src/components/Toast/Toast.stories.tsx index 9cc5baa5114..789ebff51a2 100644 --- a/packages/toast/src/components/Toast/Toast.stories.tsx +++ b/packages/toast/src/components/Toast/Toast.stories.tsx @@ -1,43 +1,68 @@ -import type { StoryFn, Meta } from "@storybook/react"; -import { faker } from "@faker-js/faker/locale/en"; +import { useEffect } from "react"; +import type { Meta, StoryObj } from "@storybook/react"; -import { OverlayOrDialogDecorator } from "@gc-digital-talent/storybook-helpers"; +import { + allModes, + OverlayOrDialogDecorator, +} from "@gc-digital-talent/storybook-helpers"; +import { Link } from "@gc-digital-talent/ui"; import toast from "../../toast"; import Toast from "./Toast"; import "./toast.css"; -interface StoryArgs { - text: string; - longText: string; -} - -faker.seed(0); - -export default { +const meta = { component: Toast, + argTypes: { + disableTransition: { control: "boolean" }, + autoClose: { control: "boolean" }, + }, args: { - text: "Toast text", - longText: faker.lorem.sentences(3), + disableTransition: true, + autoClose: false, }, decorators: [OverlayOrDialogDecorator], -} as Meta; + parameters: { + chromatic: { + modes: { + light: allModes.light, + dark: allModes.dark, + }, + delay: 1500, + }, + }, +} satisfies Meta; +export default meta; -const Template: StoryFn = (args) => { - const { text, longText } = args; +type Story = StoryObj; - toast.info(text); - toast.info(longText); - toast.success(text); - toast.warning(text); - toast.error(text); +const ToastWithLink = () => ( + <> + Toast info with{" "} + + link + + +); - // avoid animations with Chromatic snapshots - return ( -
- -
- ); +const Template = () => { + useEffect(() => { + setTimeout(() => { + toast.info("Toast info text", { autoClose: false }); + toast.info(, { + autoClose: false, + }); + toast.info( + "Toast info with three sentences. Text sentence two. Toast text sentence three.", + { autoClose: false }, + ); + toast.success("Toast success text", { autoClose: false }); + toast.warning("Toast warning text", { autoClose: false }); + }, 100); + }, []); + return ; }; -export const Default = Template.bind({}); +export const Default: Story = { + render: () =>