change toast story render

scality · Jun 4, 2024 · f0b139f · f0b139f
1 parent 3ceadc9
commit f0b139f
Showing 1 changed file with 33 additions and 32 deletions.
diff --git a/stories/toast.stories.tsx b/stories/toast.stories.tsx
@@ -78,30 +78,39 @@ export default {
   },
 };
 
-const Template = (args: Omit<ToastProps, 'open' | 'onClose'>) => {
-  const [open, setOpen] = useState(false);
-  const color = useGetBackgroundColor(args.status || 'info');
-  const iconName =
-    args.status === 'error'
-      ? 'Times-circle'
-      : args.status === 'warning'
-      ? 'Exclamation-circle'
-      : args.status === 'success'
-      ? 'Check-circle'
-      : 'Info-circle';
-  return (
-    <div style={{ height: '30vh' }}>
-      {!open && (
-        <Button label={'Open my custom toast'} onClick={() => setOpen(true)} />
-      )}
-      <Toast
-        open={open}
-        onClose={() => setOpen(false)}
-        icon={<Icon name={iconName} color={color} />}
-        {...args}
-      />
-    </div>
-  );
+export const CustomToast = {
+  render: (args) => {
+    const [open, setOpen] = useState(false);
+    const color = useGetBackgroundColor(args.status || 'info');
+    const iconName =
+      args.status === 'error'
+        ? 'Times-circle'
+        : args.status === 'warning'
+        ? 'Exclamation-circle'
+        : args.status === 'success'
+        ? 'Check-circle'
+        : 'Info-circle';
+    return (
+      <div style={{ height: '30vh' }}>
+        {!open && (
+          <Button
+            label={'Open my custom toast'}
+            onClick={() => setOpen(true)}
+          />
+        )}
+        <Toast
+          open={open}
+          onClose={() => setOpen(false)}
+          icon={<Icon name={iconName} color={color} />}
+          {...args}
+        />
+      </div>
+    );
+  },
+  args: {
+    message: <BasicText>{"I'm a custom toast"}</BasicText>,
+    status: 'info',
+  },
 };
 
 export const SimpleToast = {
@@ -134,11 +143,3 @@ export const ToastWithProgressBar = {
     withProgressBar: true,
   },
 };
-
-export const CustomToast: {
-  args?: Omit<ToastProps, 'open' | 'onClose'>;
-} = Template.bind({});
-CustomToast.args = {
-  message: <BasicText>{"I'm a custom toast"}</BasicText>,
-  status: 'info',
-};