update toast

src/lib/components/toast/Toast.component.tsx

@@ -1,5 +1,5 @@
 import { motion } from 'framer-motion';
-import React, { useRef } from 'react';
+import React, { ReactNode, useRef } from 'react';
 import { useTheme } from 'styled-components';
 import { Box } from '../box/Box';
 import { Button } from '../buttonv2/Buttonv2.component';
@@ -14,16 +14,14 @@ export type ToastStatus = 'success' | 'error' | 'warning' | 'info';
 
 export type ToastProps = {
   open: boolean;
-  message: string;
+  message: ReactNode;
   onClose: () => void;
   status?: ToastStatus;
   position?: ToastPosition;
   autoDismiss?: boolean;
   duration?: number;
   icon?: React.ReactNode;
-  action?: React.ReactNode;
   width?: React.CSSProperties['width'];
-  exited?: boolean;
   withProgressBar?: boolean;
   style?: React.CSSProperties;
 };
@@ -110,9 +108,7 @@ function Toast({
   autoDismiss = true,
   duration = 5000,
   icon = <DefaultIcon status={status} />,
-  action,
   width = DEFAULT_WIDTH,
-  exited = true,
   withProgressBar = false,
   style,
 }: ToastProps) {
@@ -129,7 +125,7 @@ function Toast({
   const rgbBgColor = useGetRgbBackgroundColor(status);
   const theme = useTheme();
 
-  if (!open && exited) {
+  if (!open) {
     return null;
   }
 
@@ -162,11 +158,7 @@ function Toast({
       >
         <IconContainer bgColor={rgbBgColor}>{icon}</IconContainer>
         <ContentContainer>
-          <BasicText>
-            {message}
-            <br />
-            {action}
-          </BasicText>
+          <BasicText>{message}</BasicText>
         </ContentContainer>
         <Box display="flex" alignItems="center" alignSelf="stretch">
           <Button

src/lib/index.ts

@@ -70,4 +70,3 @@ export { FormattedDateTime } from './components/date/FormattedDateTime';
 export { IconHelp } from './components/IconHelper';
 export { Dropzone } from './components/dropzone/Dropzone';
 export { Toast } from './components/toast/Toast.component';
-export { Toasts } from './components/toast/Toasts.component';

stories/toast.stories.tsx

@@ -1,14 +1,12 @@
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
+import { BasicText } from '../src/lib';
+import { Button } from '../src/lib/components/buttonv2/Buttonv2.component';
+import { Icon } from '../src/lib/components/icon/Icon.component';
 import {
   Toast,
   ToastProps,
   useGetBackgroundColor,
 } from '../src/lib/components/toast/Toast.component';
-import { Toasts } from '../src/lib/components/toast/Toasts.component';
-import { Button } from '../src/lib/components/buttonv2/Buttonv2.component';
-import { Icon } from '../src/lib/components/icon/Icon.component';
-import { Link } from '../src/lib';
-import { ToastStatus } from '../src/lib/components/toast/Toast.component';
 
 export default {
   title: 'Components/Toast',
@@ -21,8 +19,10 @@ export default {
       },
     },
     message: {
-      control: 'text',
-      description: 'The message to display in the toast',
+      control: {
+        disable: true,
+        description: 'The message to display in the toast',
+      },
     },
     status: {
       control: 'radio',
@@ -55,23 +55,12 @@ export default {
         description: 'The icon to display in the toast',
       },
     },
-    action: {
-      control: {
-        disable: true,
-        description: 'The action to display in the toast',
-      },
-    },
     width: {
       control: {
         disable: true,
         description: 'The width of the toast',
       },
     },
-    exited: {
-      control: {
-        disable: true,
-      },
-    },
     withProgressBar: {
       control: 'boolean',
       description: 'Whether the toast should display a progress bar',
@@ -127,33 +116,9 @@ export const SimpleToast = ({}) => {
       {!open && <Button label={'Open simple toast'} onClick={handleClick} />}
       <Toast
         open={open}
-        message={"I'm a toast"}
-        onClose={() => setOpen(false)}
-        status="info"
-      />
-    </div>
-  );
-};
-
-export const ToastWithAction = ({}) => {
-  const [open, setOpen] = useState(false);
-
-  const handleClick = () => {
-    setOpen(true);
-  };
-
-  return (
-    <div>
-      {!open && (
-        <Button label={'Open toast with an action'} onClick={handleClick} />
-      )}
-
-      <Toast
-        open={open}
-        message={"I'm a toast with an action"}
+        message={<BasicText>{"I'm a toast"}</BasicText>}
         onClose={() => setOpen(false)}
         status="info"
-        action={<Link href="#">Click me</Link>}
       />
     </div>
   );
@@ -176,7 +141,7 @@ export const ToastWithProgressBar = ({}) => {
       )}
       <Toast
         open={open}
-        message={"I'm a toast with a progress bar"}
+        message={<BasicText>{"I'm a toast with a progress bar"}</BasicText>}
         onClose={() => setOpen(false)}
         status="info"
         withProgressBar
@@ -185,39 +150,10 @@ export const ToastWithProgressBar = ({}) => {
   );
 };
 
-export const MultipleToasts = ({}) => {
-  const [open, setOpen] = useState(false);
-  const toasts = useMemo(
-    () => [
-      {
-        message: "I'm a first toast",
-        status: 'info' as ToastStatus,
-        duration: 100,
-      },
-      {
-        message: "I'm a second toast",
-        status: 'success' as ToastStatus,
-      },
-    ],
-    [],
-  );
-
-  const handleClick = () => {
-    setOpen(true);
-  };
-
-  return (
-    <div>
-      {!open && <Button label={'Open multiple toasts'} onClick={handleClick} />}
-      <Toasts open={open} toasts={toasts} onToastClose={() => setOpen(false)} />
-    </div>
-  );
-};
-
 export const CustomToast: {
   args?: Omit<ToastProps, 'open' | 'onClose'>;
 } = Template.bind({});
 CustomToast.args = {
-  message: "I'm a custom toast",
+  message: <BasicText>{"I'm a custom toast"}</BasicText>,
   status: 'info',
 };