@lunit/design-system 2.1.0 → 2.2.3

package/src/stories/components/Toast/Toast.stories.tsx

@@ -1,25 +1,28 @@
-import React from "react";
-import { StoryFn, Meta } from "@storybook/react";
-import { Box } from "@mui/material";
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react-webpack5';
+import { Box } from '@mui/material';
 
-import Toast from "@/components/Toast";
-import { action } from "@storybook/addon-actions";
-import Button from "@/components/Button";
+import Toast from '@/components/Toast';
+import { action } from 'storybook/actions';
+import Button from '@/components/Button';
 
 export default {
-  title: "Components/Toast",
+  title: 'Components/Toast',
   component: Toast,
+  args: {
+    onClose: action('onClose'),
+  },
   argTypes: {
     severity: {
-      control: "radio",
-      options: ["success", "info", "warning", "error", undefined],
+      control: 'radio',
+      options: ['success', 'info', 'warning', 'error', undefined],
       description: `\`success\`, \`info\`, \`warning\`, \`error\`, \`undefined\``,
     },
     action: {
       control: {
-        type: "select",
+        type: 'select',
       },
-      options: ["Button", undefined],
+      options: ['Button', undefined],
       mapping: {
         Button: <Button kind="ghost">Button</Button>,
         undefined: undefined,
@@ -28,19 +31,21 @@ export default {
     },
     onClose: {
       control: {
-        type: "select",
+        type: 'select',
+      },
+      table: {
+        defaultValue: { summary: 'function' },
       },
-      defaultValue: "function",
-      options: ["function", undefined],
+      options: ['function', undefined],
       mapping: {
-        function: action("onClose"),
+        function: action('onClose'),
         undefined: undefined,
       },
     },
   },
   parameters: {
     controls: {
-      include: ["severity", "action", "onClose"],
+      include: ['severity', 'action', 'onClose'],
     },
     docs: {
       description: {
@@ -48,31 +53,18 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <Box
-        className="base10"
-        bgcolor={"lunit.grey.00.main"}
-        sx={{
-          padding: 8,
-        }}
-      >
-        {Story()}
-      </Box>
-    ),
-  ],
 } as Meta<typeof Toast>;
 
 const Template: StoryFn<typeof Toast> = (args) => <Toast {...args}>Test</Toast>;
 
 const Template2: StoryFn<typeof Toast> = () => (
-  <Box sx={{ display: "grid", gap: "40px" }}>
+  <Box sx={{ display: 'grid', gap: '40px' }}>
     <Toast
       severity="normal"
       sx={{
-        width: "212px",
-        "& .Toast-message": {
-          width: "180px",
+        width: '212px',
+        '& .Toast-message': {
+          width: '180px',
         },
       }}
     >
@@ -82,9 +74,9 @@ const Template2: StoryFn<typeof Toast> = () => (
     <Toast
       severity="normal"
       sx={{
-        width: "317px",
-        "& .Toast-message": {
-          width: "165px",
+        width: '317px',
+        '& .Toast-message': {
+          width: '165px',
         },
       }}
       onClose={() => {}}
@@ -96,47 +88,45 @@ const Template2: StoryFn<typeof Toast> = () => (
       severity="normal"
       onClose={() => {}}
       sx={{
-        width: "484px",
+        width: '484px',
       }}
     >
-      Lorem ipsum dolor sit amet consectetur. Velit urna donec tortor egestas
-      donec laoreet porttitor phasellus imperdiet. Egestas leo pretium tempus
-      purus laoreet egestas habitant scelerisque non imperdiet.
+      Lorem ipsum dolor sit amet consectetur. Velit urna donec tortor egestas donec laoreet
+      porttitor phasellus imperdiet. Egestas leo pretium tempus purus laoreet egestas habitant
+      scelerisque non imperdiet.
     </Toast>
     <Toast
       severity="success"
       sx={{
-        width: "464px",
+        width: '464px',
       }}
     >
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Augue lorem in
-      dictum vitae ut massa.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Augue lorem in dictum vitae ut massa.
     </Toast>
 
     <Toast
       severity="info"
       action={
-        <Button size="medium" kind="outlined" sx={{ width: "64px" }}>
+        <Button size="medium" kind="outlined" sx={{ width: '64px' }}>
           Button
         </Button>
       }
       sx={{
-        width: "548px",
+        width: '548px',
       }}
     >
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Augue lorem in
-      dictum vitae ut massa.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Augue lorem in dictum vitae ut massa.
     </Toast>
     <Toast
       severity="error"
       action={
-        <Button size="medium" kind="ghost" color="error" sx={{ width: "64px" }}>
+        <Button size="medium" kind="ghost" color="error" sx={{ width: '64px' }}>
           Button
         </Button>
       }
       onClose={() => {}}
       sx={{
-        width: "584px",
+        width: '584px',
       }}
     >
       Lorem ipsum dolor sit amet consectetur. Velit urna donec tortor.