@lunit/design-system 1.0.0-a.2 → 1.0.0-a.4

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

@@ -6,199 +6,206 @@ export interface TokenCoreColorValue {
 
 export const tokenCoreColor: TokenCoreColorValue = {
   bg_01: {
-    light1: "--grey-0",
-    light2: "--grey-10",
-    dark1: "--grey-90",
-    dark2: "--grey-85",
-    dark3: "--grey-80",
-    dark4: "--grey-70",
+    light1: "--grey_0",
+    light2: "--grey_10",
+    dark1: "--grey_90",
+    dark2: "--grey_85",
+    dark3: "--grey_80",
+    dark4: "--grey_70",
   },
   bg_02: {
-    light1: "--grey-0",
-    light2: "--grey-0",
-    dark1: "--grey-70",
-    dark2: "--grey-70",
-    dark3: "--grey-70",
-    dark4: "--grey-70",
+    light1: "--grey_0",
+    light2: "--grey_0",
+    dark1: "--grey_70",
+    dark2: "--grey_70",
+    dark3: "--grey_70",
+    dark4: "--grey_70",
   },
   bg_03: {
-    light1: "--grey-0",
-    light2: "--grey-0",
-    dark1: "--grey-85",
-    dark2: "--grey-85",
-    dark3: "--grey-85",
-    dark4: "--grey-85",
+    light1: "--grey_0",
+    light2: "--grey_0",
+    dark1: "--grey_85",
+    dark2: "--grey_85",
+    dark3: "--grey_85",
+    dark4: "--grey_85",
   },
   text_primary: {
-    light1: "--lunitTeal-50",
-    light2: "--lunitTeal-50",
-    dark1: "--lunitTeal-40",
-    dark2: "--lunitTeal-40",
-    dark3: "--lunitTeal-40",
-    dark4: "--lunitTeal-40",
+    light1: "--lunit_teal_50",
+    light2: "--lunit_teal_50",
+    dark1: "--lunit_teal_40",
+    dark2: "--lunit_teal_40",
+    dark3: "--lunit_teal_40",
+    dark4: "--lunit_teal_40",
   },
   text_normal: {
-    light1: "--grey-95",
-    light2: "--grey-95",
-    dark1: "--grey-5",
-    dark2: "--grey-5",
-    dark3: "--grey-5",
-    dark4: "--grey-5",
+    light1: "--grey_95",
+    light2: "--grey_95",
+    dark1: "--grey_5",
+    dark2: "--grey_5",
+    dark3: "--grey_5",
+    dark4: "--grey_5",
   },
   text_medium: {
-    light1: "--grey-60",
-    light2: "--grey-60",
-    dark1: "--grey-40",
-    dark2: "--grey-40",
-    dark3: "--grey-40",
-    dark4: "--grey-30",
+    light1: "--grey_60",
+    light2: "--grey_60",
+    dark1: "--grey_40",
+    dark2: "--grey_40",
+    dark3: "--grey_40",
+    dark4: "--grey_30",
   },
   text_light: {
-    light1: "--grey-40",
-    light2: "--grey-40",
-    dark1: "--grey-50",
-    dark2: "--grey-50",
-    dark3: "--grey-50",
-    dark4: "--grey-40",
+    light1: "--grey_40",
+    light2: "--grey_40",
+    dark1: "--grey_50",
+    dark2: "--grey_50",
+    dark3: "--grey_50",
+    dark4: "--grey_40",
   },
   text_error: {
-    light1: "--red-40",
-    light2: "--red-40",
-    dark1: "--red-40",
-    dark2: "--red-40",
-    dark3: "--red-30",
-    dark4: "--red-30",
+    light1: "--red_40",
+    light2: "--red_40",
+    dark1: "--red_40",
+    dark2: "--red_40",
+    dark3: "--red_30",
+    dark4: "--red_30",
   },
   text_success: {
     // TODO: sucess -> success 로 바뀌었으니 코드 내 사용되는 부분 확인해서 업데이트. 개발자들에게도 공지할것.
-    light1: "--green-40",
-    light2: "--green-40",
-    dark1: "--green-40",
-    dark2: "--green-40",
-    dark3: "--green-30",
-    dark4: "--green-30",
+    light1: "--green_40",
+    light2: "--green_40",
+    dark1: "--green_40",
+    dark2: "--green_40",
+    dark3: "--green_30",
+    dark4: "--green_30",
   },
   text_warning: {
-    light1: "--orange-40",
-    light2: "--orange-40",
-    dark1: "--orange-40",
-    dark2: "--orange-40",
-    dark3: "--orange-30",
-    dark4: "--orange-30",
+    light1: "--orange_40",
+    light2: "--orange_40",
+    dark1: "--orange_40",
+    dark2: "--orange_40",
+    dark3: "--orange_30",
+    dark4: "--orange_30",
   },
   text_info: {
-    light1: "--blue-40",
-    light2: "--blue-40",
-    dark1: "--blue-40",
-    dark2: "--blue-40",
-    dark3: "--blue-30",
-    dark4: "--blue-30",
+    light1: "--blue_40",
+    light2: "--blue_40",
+    dark1: "--blue_40",
+    dark2: "--blue_40",
+    dark3: "--blue_30",
+    dark4: "--blue_30",
   },
   link_primary: {
-    light1: "--blue-40",
-    light2: "--blue-40",
-    dark1: "--blue-40",
-    dark2: "--blue-40",
-    dark3: "--blue-30",
-    dark4: "--blue-30",
+    light1: "--blue_40",
+    light2: "--blue_40",
+    dark1: "--blue_40",
+    dark2: "--blue_40",
+    dark3: "--blue_30",
+    dark4: "--blue_30",
   },
   link_hover: {
-    light1: "--blue-50",
-    light2: "--blue-50",
-    dark1: "--blue-50",
-    dark2: "--blue-50",
-    dark3: "--blue-40",
-    dark4: "--blue-40",
+    light1: "--blue_50",
+    light2: "--blue_50",
+    dark1: "--blue_50",
+    dark2: "--blue_50",
+    dark3: "--blue_40",
+    dark4: "--blue_40",
   },
   link_visited: {
-    light1: "--purple-50",
-    light2: "--purple-50",
-    dark1: "--purple-50",
-    dark2: "--purple-50",
-    dark3: "--purple-40",
-    dark4: "--purple-40",
+    light1: "--purple_50",
+    light2: "--purple_50",
+    dark1: "--purple_50",
+    dark2: "--purple_50",
+    dark3: "--purple_40",
+    dark4: "--purple_40",
   },
   icon_error_02: {
-    light1: "--red-40",
-    light2: "--red-40",
-    dark1: "--red-30",
-    dark2: "--red-30",
-    dark3: "--red-30",
-    dark4: "--red-30",
+    light1: "--red_40",
+    light2: "--red_40",
+    dark1: "--red_30",
+    dark2: "--red_30",
+    dark3: "--red_30",
+    dark4: "--red_30",
   },
   icon_success_02: {
     // TODO: sucess -> success 로 바뀌었으니 코드 내 사용되는 부분 확인해서 업데이트. 개발자들에게도 공지할것.
-    // TODO: 피그마에 오타 수정 요청한 상태. 확인되면 todo 지우기
-    light1: "--green-40",
-    light2: "--green-40",
-    dark1: "--green-30",
-    dark2: "--green-30",
-    dark3: "--green-30",
-    dark4: "--green-30",
+    light1: "--green_40",
+    light2: "--green_40",
+    dark1: "--green_30",
+    dark2: "--green_30",
+    dark3: "--green_30",
+    dark4: "--green_30",
   },
   icon_warning_02: {
-    light1: "--orange-40",
-    light2: "--orange-40",
-    dark1: "--orange-30",
-    dark2: "--orange-30",
-    dark3: "--orange-30",
-    dark4: "--orange-30",
+    light1: "--orange_40",
+    light2: "--orange_40",
+    dark1: "--orange_30",
+    dark2: "--orange_30",
+    dark3: "--orange_30",
+    dark4: "--orange_30",
   },
   icon_info_02: {
-    light1: "--blue-40",
-    light2: "--blue-40",
-    dark1: "--blue-30",
-    dark2: "--blue-30",
-    dark3: "--blue-30",
-    dark4: "--blue-30",
+    light1: "--blue_40",
+    light2: "--blue_40",
+    dark1: "--blue_30",
+    dark2: "--blue_30",
+    dark3: "--blue_30",
+    dark4: "--blue_30",
   },
   hover: {
     // TODO: 알파값 적용 코드는 일단 하드코딩. 나중에 수정할것
-    light1: "rgba(0, 0, 0, 0.06)", // grey_100 6% // TODO: 10%로 수정 예정이라고 하니 다시 확인하기
-    light2: "rgba(0, 0, 0, 0.06)", // grey_100 6%
-    dark1: "rgba(255, 255, 255, 0.06)", // grey_00 6%
-    dark2: "rgba(255, 255, 255, 0.06)", // grey_00 6%
-    dark3: "rgba(255, 255, 255, 0.06)", // grey_00 6%
-    dark4: "rgba(255, 255, 255, 0.06)", // grey_00 6%
+    light1: "rgba(0, 0, 0, 0.1)", // grey_100 10%
+    light2: "rgba(0, 0, 0, 0.1)", // grey_100 10%
+    dark1: "rgba(0, 0, 0, 0.1)", // grey_100 10%
+    dark2: "rgba(0, 0, 0, 0.1)", // grey_100 10%
+    dark3: "rgba(0, 0, 0, 0.1)", // grey_100 10%
+    dark4: "rgba(0, 0, 0, 0.1)", // grey_100 10%
   },
   focused: {
-    light1: "--lunitTeal-40",
-    light2: "--lunitTeal-40",
-    dark1: "--lunitTeal-40",
-    dark2: "--lunitTeal-40",
-    dark3: "--lunitTeal-40",
-    dark4: "--lunitTeal-40",
+    light1: "--lunit_teal_40",
+    light2: "--lunit_teal_40",
+    dark1: "--lunit_teal_40",
+    dark2: "--lunit_teal_40",
+    dark3: "--lunit_teal_40",
+    dark4: "--lunit_teal_40",
+  },
+  selected: {
+    light1: "--lunit_teal_10",
+    light2: "--lunit_teal_10",
+    dark1: "--lunit_teal_80",
+    dark2: "--lunit_teal_80",
+    dark3: "--lunit_teal_80",
+    dark4: "--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%",
-    dark4: "rgba(0, 0, 0, 0.32)", // "--grey-100 32%",
-    dark3: "rgba(0, 0, 0, 0.32)", // "--grey-100 32%",
-    dark2: "rgba(0, 0, 0, 0.32)", // "--grey-100 32%",
-    dark1: "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%",
+    dark4: "rgba(0, 0, 0, 0.32)", // "--grey_100 32%",
+    dark3: "rgba(0, 0, 0, 0.32)", // "--grey_100 32%",
+    dark2: "rgba(0, 0, 0, 0.32)", // "--grey_100 32%",
+    dark1: "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%",
-    dark4: "rgba(0, 0, 0, 0.4)", // "--grey-100 40%",
-    dark3: "rgba(0, 0, 0, 0.4)", // "--grey-100 40%",
-    dark2: "rgba(0, 0, 0, 0.4)", // "--grey-100 40%",
-    dark1: "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%",
+    dark4: "rgba(0, 0, 0, 0.4)", // "--grey_100 40%",
+    dark3: "rgba(0, 0, 0, 0.4)", // "--grey_100 40%",
+    dark2: "rgba(0, 0, 0, 0.4)", // "--grey_100 40%",
+    dark1: "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%",
-    dark4: "rgba(0, 0, 0, 0.36)", // "--grey-100 36%",
-    dark3: "rgba(0, 0, 0, 0.36)", // "--grey-100 36%",
-    dark2: "rgba(0, 0, 0, 0.36)", // "--grey-100 36%",
-    dark1: "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%",
+    dark4: "rgba(0, 0, 0, 0.36)", // "--grey_100 36%",
+    dark3: "rgba(0, 0, 0, 0.36)", // "--grey_100 36%",
+    dark2: "rgba(0, 0, 0, 0.36)", // "--grey_100 36%",
+    dark1: "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%",
-    dark4: "rgba(0, 0, 0, 0.48)", // "--grey-100 48%",
-    dark3: "rgba(0, 0, 0, 0.48)", // "--grey-100 48%",
-    dark2: "rgba(0, 0, 0, 0.48)", // "--grey-100 48%",
-    dark1: "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%",
+    dark4: "rgba(0, 0, 0, 0.48)", // "--grey_100 48%",
+    dark3: "rgba(0, 0, 0, 0.48)", // "--grey_100 48%",
+    dark2: "rgba(0, 0, 0, 0.48)", // "--grey_100 48%",
+    dark1: "rgba(0, 0, 0, 0.48)", // "--grey_100 48%",
   },
 };

package/src/foundation/colors/types.ts

@@ -22,6 +22,7 @@ export interface ColorToken {
     icon_info_02: CSSPropertyColor;
     hover: CSSPropertyColor;
     focused: CSSPropertyColor;
+    selected: CSSPropertyColor;
     shadow_01: CSSPropertyColor;
     shadow_02: CSSPropertyColor;
     shadow_03: CSSPropertyColor;
@@ -49,10 +50,7 @@ export interface ColorToken {
     selectcontrol_handler_shadow: CSSPropertyColor;
     textfield_bg: CSSPropertyColor;
     textfield_border_error: CSSPropertyColor;
-    dropdown_option_selected: CSSPropertyColor;
     dropdown_divider_border: CSSPropertyColor;
-    dropdown_option_activatied: CSSPropertyColor;
-    datatable_cell_selected: CSSPropertyColor;
     datatable_border_01: CSSPropertyColor;
     datatable_border_02: CSSPropertyColor;
     datatable_zebra: CSSPropertyColor;

package/src/index.ts

@@ -1,4 +1,5 @@
 export { default as theme } from "./theme";
+export { base as baseColors } from "./foundation/colors";
 
 export { default as Alert } from "./components/Alert";
 export { default as Button } from "./components/Button";

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

@@ -1,13 +1,157 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Box, Typography } from "@mui/material";
+import { StoryFn, Meta } from "@storybook/react";
 
 import Alert from "@/components/Alert";
+import Button from "@/components/Button";
+import theme from "@/theme";
+import { action } from "@storybook/addon-actions";
 
 export default {
   title: "Components/Alert",
   component: Alert,
-} as ComponentMeta<typeof Alert>;
+  argTypes: {
+    title: {
+      control: "text",
+      description: "Used to represent the title of the alert.",
+    },
+    severity: {
+      control: "radio",
+      table: {
+        defaultValue: { summary: "success" },
+      },
+      options: ["success", "info", "warning", "error", undefined],
+      description: `\`success\`, \`info\`, \`warning\`, \`error\`, \`undefined\``,
+    },
+    onClose: {
+      control: "function",
+      description: `Callback fired when the component requests to be closed.
+        When provided, a close icon button is displayed that triggers the callback when clicked.`,
+    },
+  },
+  parameters: {
+    controls: {
+      include: ["title", "severity", "onClose"],
+    },
+    docs: {
+      description: {
+        component: `An alert displays a short, important message in a way that attracts the
+        user's attention without interrupting the user's task.
+        see [Material-UI Alert](https://mui.com/components/alert/)`,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          padding: "3em",
+          gap: "1em",
+        }}
+      >
+        {Story()}
+      </Box>
+    ),
+  ],
+} as Meta<typeof Alert>;
 
-const Template: ComponentStory<typeof Alert> = () => <Alert />;
+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.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>
+  );
+};
 
-export const LunitAlert = Template.bind({});
+const AlertChildrenContentShort = () => {
+  return (
+    <Typography variant="body2_14_regular">
+      Lorem ipsum dolor sit amet, consectetur adipiscin
+    </Typography>
+  );
+};
+
+const AlertBottomAction = () => {
+  return (
+    <Box sx={{ display: "flex", columnGap: "8px" }}>
+      <Button color="primary" kind="contained">
+        Button
+      </Button>
+      <Button color="secondary" kind="ghost">
+        Button
+      </Button>
+    </Box>
+  );
+};
+
+const Template: StoryFn<typeof Alert> = (args) => (
+  <Alert sx={{ width: "620px" }} {...args}>
+    <AlertChildrenContentLong />
+  </Alert>
+);
+
+const Template2: StoryFn<typeof Alert> = (args) => (
+  <>
+    <Alert sx={{ width: "504px" }} {...args}>
+      <AlertChildrenContentLong />
+    </Alert>
+    <Alert sx={{ width: "620px" }} severity={args.severity} onClose={() => {}}>
+      <AlertChildrenContentLong />
+    </Alert>
+    <Alert sx={{ width: "620px" }} severity={args.severity} onClose={() => {}}>
+      <AlertChildrenContentShort />
+    </Alert>
+    <Alert sx={{ width: "620px" }} severity={args.severity}>
+      <AlertChildrenContentShort />
+    </Alert>
+  </>
+);
+const Template3: StoryFn<typeof Alert> = (args) => (
+  <>
+    <Alert
+      sx={{ width: "504px" }}
+      bottomAction={<AlertBottomAction />}
+      {...args}
+    >
+      <AlertChildrenContentLong />
+    </Alert>
+  </>
+);
+
+export const AlertBase = {
+  render: Template,
+
+  args: {
+    title: "Alert title",
+    severity: "success",
+    onClose: action("Close Button is clicked"),
+  },
+};
+
+export const AlertVariant = {
+  render: Template2,
+
+  args: {
+    title: "Alert title",
+    severity: "success",
+    onClose: action("Close Button is clicked"),
+  },
+};
+
+export const AlertWithBottomAction = {
+  render: Template3,
+
+  args: {
+    title: "Alert title",
+    severity: "success",
+    onClose: action("Close Button is clicked"),
+  },
+};

package/src/stories/components/Button/BasicButton.stories.tsx

@@ -7,11 +7,11 @@ import {
   TableBody,
   TableCell,
 } from "@mui/material";
-import { Bell } from "@lunit/design-system-icons";
+import Bell from "@lunit/design-system-icons/Bell";
 
 import Button from "@/components/Button";
 
-import type { ComponentStory, ComponentMeta } from "@storybook/react";
+import type { StoryObj, StoryFn, Meta } from "@storybook/react";
 import type { ButtonProps } from "@/components/Button/Button.types";
 
 type Size = Pick<ButtonProps, "size">;
@@ -21,31 +21,26 @@ const sizeList: SizeValues[] = ["small", "medium", "large"];
 export default {
   title: "Components/Button",
   component: Button,
+  args: {
+    kind: "contained",
+    children: "Text",
+    color: "primary",
+    disabled: false,
+    size: "small",
+    onClick: action("onClick"),
+  },
   argTypes: {
     icon: {
       control: false,
       description: `Use this prop when you want to add icon.
-        \n It is added to the left of the text criteria,
-        \n and only Icon can be checked when used with hasIconOnly.`,
+        \n It is added to the left of the text criteria`,
       table: {
         defaultValue: { summary: "undefined" },
         type: { summary: "React.ReactNode" },
       },
     },
-    hasIconOnly: {
-      control: {
-        type: "boolean",
-      },
-      description: `Option to handle so that only icons can be inserted
-          \n If set to false, you can add Text.`,
-      defaultValue: false,
-      table: {
-        defaultValue: { summary: "false" },
-      },
-    },
     children: {
       type: "string",
-      defaultValue: "Text",
     },
     kind: {
       control: {
@@ -53,7 +48,6 @@ export default {
       },
       options: ["contained", "outlined", "ghost"],
       description: "Button has three Kinds Contained, Outlined, Ghost",
-      defaultValue: "contained",
       table: {
         defaultValue: { summary: "contained" },
       },
@@ -63,7 +57,6 @@ export default {
         type: "radio",
       },
       options: ["primary", "secondary", "error"],
-      defaultValue: "primary",
       table: {
         defaultValue: { summary: "primary" },
       },
@@ -72,7 +65,6 @@ export default {
       control: {
         type: "boolean",
       },
-      defaultValue: false,
       table: {
         defaultValue: { summary: "false" },
       },
@@ -82,7 +74,6 @@ export default {
         type: "radio",
       },
       options: ["small", "medium", "large"],
-      defaultValue: "small",
       table: {
         defaultValue: { summary: "small" },
       },
@@ -97,7 +88,6 @@ export default {
         function: action("onClick"),
         undefined: undefined,
       },
-      defaultValue: "function",
       description:
         "It is a callback function that is called when the button is clicked.",
     },
@@ -112,7 +102,6 @@ export default {
         "kind",
         "color",
         "icon",
-        "hasIconOnly",
       ],
     },
     docs: {
@@ -122,13 +111,13 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof Button>;
+} as Meta<typeof Button>;
 
-export const BasicButton: ComponentStory<typeof Button> = (args) => (
-  <Button {...args}>{args.children}</Button>
-);
+export const BasicButton: StoryObj<typeof Button> = {
+  render: (args) => <Button {...args}>{args.children}</Button>,
+};
 
-const SizeButtonTemplate: ComponentStory<typeof Button> = (args) => {
+const SizeButtonTemplate: StoryFn<typeof Button> = (args) => {
   return (
     <Table sx={{ width: 900 }}>
       <TableHead>
@@ -174,4 +163,6 @@ const SizeButtonTemplate: ComponentStory<typeof Button> = (args) => {
   );
 };
 
-export const Size = SizeButtonTemplate.bind({});
+export const Size = {
+  render: SizeButtonTemplate,
+};