diff --git a/packages/wow-ui/src/components/Toast/Toast.stories.tsx b/packages/wow-ui/src/components/Toast/Toast.stories.tsx index ca21bb0e..e3871b41 100644 --- a/packages/wow-ui/src/components/Toast/Toast.stories.tsx +++ b/packages/wow-ui/src/components/Toast/Toast.stories.tsx @@ -2,6 +2,8 @@ import type { Meta } from "@storybook/react"; import { useEffect } from "react"; import { Warn } from "wowds-icons"; +import Button from "@/components/Button"; + import Toast from "."; import ToastProvider from "./ToastProvider"; import useToast from "./useToast"; @@ -78,6 +80,16 @@ export const Default = () => { }, []); }; +export const WithTrigger = () => { + const { toast } = useToast(); + + return ( + + ); +}; + export const Close = () => { const { toast } = useToast(); useEffect(() => { @@ -137,8 +149,8 @@ export const Slow = () => { const { toast } = useToast(); useEffect(() => { toast({ - text: "TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText", - icon: , + text: "Text", + subText: "subtext", toastDuration: 5000, }); }, []); diff --git a/packages/wow-ui/src/components/Toast/ToastProvider.tsx b/packages/wow-ui/src/components/Toast/ToastProvider.tsx index f66885ab..91b96332 100644 --- a/packages/wow-ui/src/components/Toast/ToastProvider.tsx +++ b/packages/wow-ui/src/components/Toast/ToastProvider.tsx @@ -27,21 +27,23 @@ const ToastProvider = ({ children }: { children: ReactNode }) => { return ( - - {toasts?.map((toast: ToastProps) => ( - - ))} - + {toasts.length > 0 && ( + + {toasts?.map((toast: ToastProps) => ( + + ))} + + )} {children} );