@lunit/design-system 2.2.0 → 2.2.3

package/src/foundation/colors/token/core.ts

@@ -1,4 +1,4 @@
-import { ColorTokenValueBySurface } from "./types";
+import { ColorTokenValueBySurface } from './types';
 
 export interface TokenCoreColorValue {
   [token: string]: ColorTokenValueBySurface;
@@ -6,193 +6,172 @@ export interface TokenCoreColorValue {
 
 export const tokenCoreColor: TokenCoreColorValue = {
   bg_01: {
-    light1: "--grey_0",
-    light2: "--grey_10",
-    dark1: "--grey_90",
-    dark2: "--grey_75",
+    light1: '--grey_0',
+    light2: '--grey_10',
+    dark1: '--grey_90',
+    dark2: '--grey_75',
   },
   bg_02: {
-    light1: "--grey_0",
-    light2: "--grey_0",
-    dark1: "--grey_70",
-    dark2: "--grey_70",
+    light1: '--grey_0',
+    light2: '--grey_0',
+    dark1: '--grey_70',
+    dark2: '--grey_70',
   },
   bg_03: {
-    light1: "--grey_0",
-    light2: "--grey_0",
-    dark1: "--grey_85",
-    dark2: "--grey_85",
+    light1: '--grey_0',
+    light2: '--grey_0',
+    dark1: '--grey_85',
+    dark2: '--grey_85',
   },
   layer_01: {
-    light1: "--grey_5",
-    light2: "--grey_5",
-    dark1: "--grey_80",
-    dark2: "--grey_80",
+    light1: '--grey_5',
+    light2: '--grey_5',
+    dark1: '--grey_80',
+    dark2: '--grey_80',
   },
   text_primary: {
-    light1: "--lunit_teal_50",
-    light2: "--lunit_teal_50",
-    dark1: "--lunit_teal_40",
-    dark2: "--lunit_teal_40",
+    light1: '--lunit_teal_50',
+    light2: '--lunit_teal_50',
+    dark1: '--lunit_teal_40',
+    dark2: '--lunit_teal_40',
   },
   text_normal: {
-    light1: "--grey_95",
-    light2: "--grey_95",
-    dark1: "--grey_5",
-    dark2: "--grey_5",
+    light1: '--grey_95',
+    light2: '--grey_95',
+    dark1: '--grey_5',
+    dark2: '--grey_5',
   },
   text_medium: {
-    light1: "--grey_60",
-    light2: "--grey_60",
-    dark1: "--grey_30",
-    dark2: "--grey_30",
+    light1: '--grey_60',
+    light2: '--grey_60',
+    dark1: '--grey_30',
+    dark2: '--grey_30',
   },
   text_light: {
-    light1: "--grey_40",
-    light2: "--grey_40",
-    dark1: "--grey_50",
-    dark2: "--grey_50",
+    light1: '--grey_40',
+    light2: '--grey_40',
+    dark1: '--grey_50',
+    dark2: '--grey_50',
   },
   text_error: {
-    light1: "--red_40",
-    light2: "--red_40",
-    dark1: "--red_40",
-    dark2: "--red_30",
+    light1: '--red_40',
+    light2: '--red_40',
+    dark1: '--red_40',
+    dark2: '--red_30',
   },
   text_success: {
-    light1: "--green_40",
-    light2: "--green_40",
-    dark1: "--green_40",
-    dark2: "--green_30",
+    light1: '--green_40',
+    light2: '--green_40',
+    dark1: '--green_40',
+    dark2: '--green_30',
   },
   text_warning: {
-    light1: "--orange_40",
-    light2: "--orange_40",
-    dark1: "--orange_40",
-    dark2: "--orange_30",
+    light1: '--orange_40',
+    light2: '--orange_40',
+    dark1: '--orange_40',
+    dark2: '--orange_30',
   },
   text_info: {
-    light1: "--blue_40",
-    light2: "--blue_40",
-    dark1: "--blue_40",
-    dark2: "--blue_30",
+    light1: '--blue_40',
+    light2: '--blue_40',
+    dark1: '--blue_40',
+    dark2: '--blue_30',
   },
   link_primary: {
-    light1: "--blue_40",
-    light2: "--blue_40",
-    dark1: "--blue_30",
-    dark2: "--blue_30",
+    light1: '--blue_40',
+    light2: '--blue_40',
+    dark1: '--blue_30',
+    dark2: '--blue_30',
   },
   link_hover: {
-    light1: "--blue_50",
-    light2: "--blue_50",
-    dark1: "--blue_40",
-    dark2: "--blue_40",
+    light1: '--blue_50',
+    light2: '--blue_50',
+    dark1: '--blue_40',
+    dark2: '--blue_40',
   },
   link_visited: {
-    light1: "--purple_50",
-    light2: "--purple_50",
-    dark1: "--purple_40",
-    dark2: "--purple_40",
+    light1: '--purple_50',
+    light2: '--purple_50',
+    dark1: '--purple_40',
+    dark2: '--purple_40',
   },
   icon_error_02: {
-    light1: "--red_40",
-    light2: "--red_40",
-    dark1: "--red_30",
-    dark2: "--red_30",
+    light1: '--red_40',
+    light2: '--red_40',
+    dark1: '--red_30',
+    dark2: '--red_30',
   },
   icon_success_02: {
-    light1: "--green_40",
-    light2: "--green_40",
-    dark1: "--green_30",
-    dark2: "--green_30",
+    light1: '--green_40',
+    light2: '--green_40',
+    dark1: '--green_30',
+    dark2: '--green_30',
   },
   icon_warning_02: {
-    light1: "--orange_40",
-    light2: "--orange_40",
-    dark1: "--orange_30",
-    dark2: "--orange_30",
+    light1: '--orange_40',
+    light2: '--orange_40',
+    dark1: '--orange_30',
+    dark2: '--orange_30',
   },
   icon_info_02: {
-    light1: "--blue_40",
-    light2: "--blue_40",
-    dark1: "--blue_30",
-    dark2: "--blue_30",
-  },
-  hover: {
-    // Deprecated. Please use core.status_hover instead.
-    light1: "rgba(0, 0, 0, 0.12)", // "--grey_100 12%",
-    light2: "rgba(0, 0, 0, 0.12)", // "--grey_100 12%",
-    dark1: "rgba(255, 255, 255, 0.12)", // "--grey_0 12%",
-    dark2: "rgba(255, 255, 255, 0.12)", // "--grey_0 12%",
+    light1: '--blue_40',
+    light2: '--blue_40',
+    dark1: '--blue_30',
+    dark2: '--blue_30',
   },
   status_hover: {
     // TODO: 알파값 적용 코드는 일단 하드코딩. 나중에 수정할것
-    light1: "rgba(0, 0, 0, 0.12)", // "--grey_100 12%",
-    light2: "rgba(0, 0, 0, 0.12)", // "--grey_100 12%",
-    dark1: "rgba(255, 255, 255, 0.12)", // "--grey_0 12%",
-    dark2: "rgba(255, 255, 255, 0.12)", // "--grey_0 12%",
-  },
-  focused: {
-    // Deprecated. Please use core.status_focused instead.
-    light1: "--lunit_teal_40",
-    light2: "--lunit_teal_40",
-    dark1: "--lunit_teal_40",
-    dark2: "--lunit_teal_40",
+    light1: 'rgba(0, 0, 0, 0.12)', // "--grey_100 12%",
+    light2: 'rgba(0, 0, 0, 0.12)', // "--grey_100 12%",
+    dark1: 'rgba(255, 255, 255, 0.12)', // "--grey_0 12%",
+    dark2: 'rgba(255, 255, 255, 0.12)', // "--grey_0 12%",
   },
   status_focused: {
-    light1: "--lunit_teal_40",
-    light2: "--lunit_teal_40",
-    dark1: "--lunit_teal_40",
-    dark2: "--lunit_teal_40",
-  },
-  selected: {
-    // Deprecated. Please use core.status_selected instead.
-    light1: "--lunit_teal_10",
-    light2: "--lunit_teal_10",
-    dark1: "--lunit_teal_80",
-    dark2: "--lunit_teal_80",
+    light1: '--lunit_teal_40',
+    light2: '--lunit_teal_40',
+    dark1: '--lunit_teal_40',
+    dark2: '--lunit_teal_40',
   },
   status_selected: {
-    light1: "--lunit_teal_10",
-    light2: "--lunit_teal_10",
-    dark1: "--lunit_teal_80",
-    dark2: "--lunit_teal_80",
+    light1: '--lunit_teal_10',
+    light2: '--lunit_teal_10',
+    dark1: '--lunit_teal_80',
+    dark2: '--lunit_teal_80',
   },
   shadow_01: {
-    light1: "rgba(0, 0, 0, 0.12)", // "--grey_100 12%",
-    light2: "rgba(0, 0, 0, 0.12)", // "--grey_100 12%",
-    dark1: "rgba(0, 0, 0, 0.32)", // "--grey_100 32%",
-    dark2: "rgba(0, 0, 0, 0.32)", // "--grey_100 32%",
+    light1: 'rgba(0, 0, 0, 0.12)', // "--grey_100 12%",
+    light2: 'rgba(0, 0, 0, 0.12)', // "--grey_100 12%",
+    dark1: 'rgba(0, 0, 0, 0.32)', // "--grey_100 32%",
+    dark2: 'rgba(0, 0, 0, 0.32)', // "--grey_100 32%",
   },
   shadow_02: {
-    light1: "rgba(0, 0, 0, 0.18)", // "--grey_100 18%",
-    light2: "rgba(0, 0, 0, 0.18)", // "--grey_100 18%",
-    dark1: "rgba(0, 0, 0, 0.4)", // "--grey_100 40%",
-    dark2: "rgba(0, 0, 0, 0.4)", // "--grey_100 40%",
+    light1: 'rgba(0, 0, 0, 0.18)', // "--grey_100 18%",
+    light2: 'rgba(0, 0, 0, 0.18)', // "--grey_100 18%",
+    dark1: 'rgba(0, 0, 0, 0.4)', // "--grey_100 40%",
+    dark2: 'rgba(0, 0, 0, 0.4)', // "--grey_100 40%",
   },
   shadow_03: {
-    light1: "rgba(0, 0, 0, 0.12)", // "--grey_100 12%",
-    light2: "rgba(0, 0, 0, 0.12)", // "--grey_100 12%",
-    dark1: "rgba(0, 0, 0, 0.36)", // "--grey_100 36%",
-    dark2: "rgba(0, 0, 0, 0.36)", // "--grey_100 36%",
+    light1: 'rgba(0, 0, 0, 0.12)', // "--grey_100 12%",
+    light2: 'rgba(0, 0, 0, 0.12)', // "--grey_100 12%",
+    dark1: 'rgba(0, 0, 0, 0.36)', // "--grey_100 36%",
+    dark2: 'rgba(0, 0, 0, 0.36)', // "--grey_100 36%",
   },
   shadow_04: {
-    light1: "rgba(0, 0, 0, 0.18)", // "--grey_100 18%",
-    light2: "rgba(0, 0, 0, 0.18)", // "--grey_100 18%",
-    dark1: "rgba(0, 0, 0, 0.48)", // "--grey_100 48%",
-    dark2: "rgba(0, 0, 0, 0.48)", // "--grey_100 48%",
+    light1: 'rgba(0, 0, 0, 0.18)', // "--grey_100 18%",
+    light2: 'rgba(0, 0, 0, 0.18)', // "--grey_100 18%",
+    dark1: 'rgba(0, 0, 0, 0.48)', // "--grey_100 48%",
+    dark2: 'rgba(0, 0, 0, 0.48)', // "--grey_100 48%",
   },
   border_light: {
-    light1: "rgba(0, 0, 0, 0.12)", // "--grey_100 12%",
-    light2: "rgba(0, 0, 0, 0.12)", // "--grey_100 12%",
-    dark1: "rgba(255, 255, 255, 0.12)", // "--grey_0 12%",
-    dark2: "rgba(255, 255, 255, 0.12)", // "--grey_0 12%",
+    light1: 'rgba(0, 0, 0, 0.12)', // "--grey_100 12%",
+    light2: 'rgba(0, 0, 0, 0.12)', // "--grey_100 12%",
+    dark1: 'rgba(255, 255, 255, 0.12)', // "--grey_0 12%",
+    dark2: 'rgba(255, 255, 255, 0.12)', // "--grey_0 12%",
   },
   border_medium: {
-    light1: "rgba(0, 0, 0, 0.24)", // "--grey_100 24%",
-    light2: "rgba(0, 0, 0, 0.24)", // "--grey_100 24%",
-    dark1: "rgba(255, 255, 255, 0.24)", // "--grey_0 24%",
-    dark2: "rgba(255, 255, 255, 0.24)", // "--grey_0 24%",
+    light1: 'rgba(0, 0, 0, 0.24)', // "--grey_100 24%",
+    light2: 'rgba(0, 0, 0, 0.24)', // "--grey_100 24%",
+    dark1: 'rgba(255, 255, 255, 0.24)', // "--grey_0 24%",
+    dark2: 'rgba(255, 255, 255, 0.24)', // "--grey_0 24%",
   },
 };

package/src/foundation/colors/token/index.ts

@@ -1,2 +1,2 @@
-export * from "./component";
-export * from "./core";
+export * from './component';
+export * from './core';

package/src/foundation/colors/types.ts

@@ -19,11 +19,8 @@ export interface ColorToken {
     icon_success_02: string;
     icon_warning_02: string;
     icon_info_02: string;
-    hover: string;
     status_hover: string;
-    focused: string;
     status_focused: string;
-    selected: string;
     status_selected: string;
     shadow_01: string;
     shadow_02: string;
@@ -37,14 +34,12 @@ export interface ColorToken {
     btn_secondary_bg: string;
     btn_error_bg: string;
     btn_primary_border: string;
-    btn_secondary_border: string;
     btn_primary_text_1: string;
     btn_primary_text_2: string;
     btn_secondary_text: string;
     btn_error_text: string;
     btn_selected_primary_bg: string;
     btn_selected_primary_text: string;
-    btn_selected_secondary_bg: string;
     btn_selected_secondary_text: string;
     btn_selected_tertiary_bg: string;
     btn_selected_tertiary_text: string;
@@ -55,8 +50,6 @@ export interface ColorToken {
     textfield_bg: string;
     textfield_border_error: string;
     dropdown_divider_border: string;
-    datatable_border_01: string;
-    datatable_border_02: string;
     datatable_zebra: string;
     scrollbars_bg: string;
     scrollbars_hover: string;

package/src/foundation/index.ts

@@ -1,16 +1,16 @@
-import { Components, Theme } from "@mui/material";
-import { deepmerge } from "@mui/utils";
-import paletteOptions, { createColorCssBaseline } from "./colors";
+import { Components, Theme } from '@mui/material';
+import { deepmerge } from '@mui/utils';
+import paletteOptions, { createColorCssBaseline } from './colors';
 import typographyOptions, {
   createTypographyCssBaseline,
   typographyDefaultProps,
-} from "./Typography";
-import { createElevationCssBaseline, elevationOptions } from "./Elevation";
+} from './Typography';
+import { createElevationCssBaseline, elevationOptions } from './Elevation';
 
-export const foundationCssBaseline: Components<Theme>["MuiCssBaseline"] = {
+export const foundationCssBaseline: Components<Theme>['MuiCssBaseline'] = {
   styleOverrides: deepmerge(
     deepmerge(createColorCssBaseline(), createTypographyCssBaseline()),
-    createElevationCssBaseline()
+    createElevationCssBaseline(),
   ),
 };
 
@@ -22,4 +22,4 @@ export const palette = paletteOptions;
 
 export const elevation = elevationOptions;
 
-export { spacing } from "./spacing";
+export { spacing } from './spacing';

package/src/foundation/spacing.ts

@@ -1,3 +1,3 @@
-import { SpacingOptions } from "@mui/system";
+import { SpacingOptions } from '@mui/system';
 
 export const spacing: SpacingOptions = 4;

package/src/index.ts

@@ -1,26 +1,26 @@
-export { default as theme, themeOptions } from "./theme";
-export { base as baseColors } from "./foundation/colors";
+export { default as theme, themeOptions } from './theme';
+export { base as baseColors } from './foundation/colors';
 
-export { default as Alert } from "./components/Alert";
-export { default as Button } from "./components/Button";
-export { default as Chip } from "./components/Chip";
-export { default as Checkbox } from "./components/Checkbox";
-export { default as Dialog } from "./components/Dialog";
-export { default as DataTable } from "./components/DataTable";
-export { default as DatePicker } from "./components/DatePicker";
+export { default as Alert } from './components/Alert';
+export { default as Button } from './components/Button';
+export { default as Chip } from './components/Chip';
+export { default as Checkbox } from './components/Checkbox';
+export { default as Dialog } from './components/Dialog';
+export { default as DataTable } from './components/DataTable';
+export { default as DatePicker } from './components/DatePicker';
 export {
   default as Dropdown,
   DropdownItem,
   DropdownDivider,
   DropdownSubtitle,
-} from "./components/Dropdown";
-export { default as FormLabel } from "./components/FormLabel";
-export { default as Radio } from "./components/Radio";
-export { default as RadioGroup } from "./components/RadioGroup";
-export { default as TextField } from "./components/TextField";
-export { default as Toast } from "./components/Toast";
-export { default as Toggle } from "./components/Toggle";
-export { default as ToggleButton } from "./components/ToggleButton";
-export { default as ToggleButtonGroup } from "./components/ToggleButtonGroup";
-export { default as Tooltip } from "./components/Tooltip";
-export { default as Typography } from "./components/Typography";
+} from './components/Dropdown';
+export { default as FormLabel } from './components/FormLabel';
+export { default as Radio } from './components/Radio';
+export { default as RadioGroup } from './components/RadioGroup';
+export { default as TextField } from './components/TextField';
+export { default as Toast } from './components/Toast';
+export { default as Toggle } from './components/Toggle';
+export { default as ToggleButton } from './components/ToggleButton';
+export { default as ToggleButtonGroup } from './components/ToggleButtonGroup';
+export { default as Tooltip } from './components/Tooltip';
+export { default as Typography } from './components/Typography';

package/src/stories/GettingStarted.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/addon-docs/blocks";
+import { Meta } from '@storybook/addon-docs/blocks';
 
 <Meta title="Getting Started/Overview" />
 
@@ -30,9 +30,9 @@ Material UI is peer dependency of Lunit Design System Library. You need to insta
 This library is based on Material UI's themes feature, so it imports themes and puts them into the provider. We also recommend using the `CssBaseline` component.
 
 ```tsx
-import { createTheme, ThemeProvider } from "@mui/material/styles";
-import CssBaseline from "@mui/material/CssBaseline";
-import { themeOptions } from "@lunit/design-system";
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import { themeOptions } from '@lunit/design-system';
 
 const theme = createTheme(themeOptions);
 
@@ -58,9 +58,9 @@ This library uses the `Pretendard` font-family by default. The [Pretendard font]
 const theme = createTheme(
   deepmerge(themeOptions, {
     typography: {
-      fontFamily: ["Pretendard Variable", "sans-serif"],
+      fontFamily: ['Pretendard Variable', 'sans-serif'],
     },
-  })
+  }),
 );
 ```
 

package/src/stories/components/Alert/Alert.stories.tsx

@@ -1,26 +1,26 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import { StoryFn, Meta } from "@storybook/react-webpack5";
+import React from 'react';
+import { Box, Typography } from '@mui/material';
+import { StoryFn, Meta } from '@storybook/react-webpack5';
 
-import Alert from "@/components/Alert";
-import Button from "@/components/Button";
-import theme from "@/theme";
-import { action } from "storybook/actions";
+import Alert from '@/components/Alert';
+import Button from '@/components/Button';
+import theme from '@/theme';
+import { action } from 'storybook/actions';
 
 export default {
-  title: "Components/Alert",
+  title: 'Components/Alert',
   component: Alert,
   argTypes: {
     title: {
-      control: "text",
-      description: "Used to represent the title of the alert.",
+      control: 'text',
+      description: 'Used to represent the title of the alert.',
     },
     severity: {
-      control: "radio",
+      control: 'radio',
       table: {
-        defaultValue: { summary: "success" },
+        defaultValue: { summary: 'success' },
       },
-      options: ["success", "info", "warning", "error", undefined],
+      options: ['success', 'info', 'warning', 'error', undefined],
       description: `\`success\`, \`info\`, \`warning\`, \`error\`, \`undefined\``,
     },
     onClose: {
@@ -31,7 +31,7 @@ export default {
   },
   parameters: {
     controls: {
-      include: ["title", "severity", "onClose"],
+      include: ['title', 'severity', 'onClose'],
     },
     docs: {
       description: {
@@ -45,10 +45,10 @@ export default {
     (Story) => (
       <Box
         sx={{
-          display: "flex",
-          flexDirection: "column",
-          padding: "3em",
-          gap: "1em",
+          display: 'flex',
+          flexDirection: 'column',
+          padding: '3em',
+          gap: '1em',
         }}
       >
         {Story()}
@@ -60,13 +60,10 @@ export default {
 const AlertChildrenContentLong = () => {
   return (
     <Typography variant="body2_14_regular">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-      tempor incididunt ut{" "}
-      <u style={{ color: theme.palette.lunit_token.core.link_primary }}>
-        labore et dolore
-      </u>{" "}
-      magna aliqua. A diam sollicitudin tempor id eu nisl nunc mi. Auctor augue
-      mauris augue neque gravida in fermentum.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut{' '}
+      <u style={{ color: theme.palette.lunit_token.core.link_primary }}>labore et dolore</u> magna
+      aliqua. A diam sollicitudin tempor id eu nisl nunc mi. Auctor augue mauris augue neque gravida
+      in fermentum.
     </Typography>
   );
 };
@@ -81,7 +78,7 @@ const AlertChildrenContentShort = () => {
 
 const AlertBottomAction = () => {
   return (
-    <Box sx={{ display: "flex", columnGap: "8px" }}>
+    <Box sx={{ display: 'flex', columnGap: '8px' }}>
       <Button color="primary" kind="contained">
         Button
       </Button>
@@ -93,34 +90,30 @@ const AlertBottomAction = () => {
 };
 
 const Template: StoryFn<typeof Alert> = (args) => (
-  <Alert sx={{ width: "620px" }} {...args}>
+  <Alert sx={{ width: '620px' }} {...args}>
     <AlertChildrenContentLong />
   </Alert>
 );
 
 const Template2: StoryFn<typeof Alert> = (args) => (
   <>
-    <Alert sx={{ width: "504px" }} {...args}>
+    <Alert sx={{ width: '504px' }} {...args}>
       <AlertChildrenContentLong />
     </Alert>
-    <Alert sx={{ width: "620px" }} severity={args.severity} onClose={() => {}}>
+    <Alert sx={{ width: '620px' }} severity={args.severity} onClose={() => {}}>
       <AlertChildrenContentLong />
     </Alert>
-    <Alert sx={{ width: "620px" }} severity={args.severity} onClose={() => {}}>
+    <Alert sx={{ width: '620px' }} severity={args.severity} onClose={() => {}}>
       <AlertChildrenContentShort />
     </Alert>
-    <Alert sx={{ width: "620px" }} severity={args.severity}>
+    <Alert sx={{ width: '620px' }} severity={args.severity}>
       <AlertChildrenContentShort />
     </Alert>
   </>
 );
 const Template3: StoryFn<typeof Alert> = (args) => (
   <>
-    <Alert
-      sx={{ width: "504px" }}
-      bottomAction={<AlertBottomAction />}
-      {...args}
-    >
+    <Alert sx={{ width: '504px' }} bottomAction={<AlertBottomAction />} {...args}>
       <AlertChildrenContentLong />
     </Alert>
   </>
@@ -130,9 +123,9 @@ export const AlertBase = {
   render: Template,
 
   args: {
-    title: "Alert title",
-    severity: "success",
-    onClose: action("Close Button is clicked"),
+    title: 'Alert title',
+    severity: 'success',
+    onClose: action('Close Button is clicked'),
   },
 };
 
@@ -140,9 +133,9 @@ export const AlertVariant = {
   render: Template2,
 
   args: {
-    title: "Alert title",
-    severity: "success",
-    onClose: action("Close Button is clicked"),
+    title: 'Alert title',
+    severity: 'success',
+    onClose: action('Close Button is clicked'),
   },
 };
 
@@ -150,8 +143,8 @@ export const AlertWithBottomAction = {
   render: Template3,
 
   args: {
-    title: "Alert title",
-    severity: "success",
-    onClose: action("Close Button is clicked"),
+    title: 'Alert title',
+    severity: 'success',
+    onClose: action('Close Button is clicked'),
   },
 };