@lunit/design-system 2.0.2 → 2.1.0

package/src/stories/components/Dropdown/DropdownItem.stories.tsx

@@ -0,0 +1,360 @@
+import React, { useState } from "react";
+import { StoryFn, Meta, StoryObj } from "@storybook/react";
+
+import Dropdown, {
+  DropdownDivider,
+  DropdownItem,
+  DropdownSubtitle,
+} from "@/components/Dropdown";
+import {
+  Box,
+  SelectChangeEvent,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+} from "@mui/material";
+import Demo from "@lunit/design-system-icons/Demo";
+import ViewfinderT1 from "@lunit/design-system-icons/ViewfinderT1";
+import RulerT2 from "@lunit/design-system-icons/RulerT2";
+
+export default {
+  title: "Components/Dropdown",
+  component: DropdownItem,
+  argTypes: {
+    leftIcon: {
+      control: false,
+      description: `Use this prop when you want to add icon.
+        \n It is added to the left of the text criteria`,
+      table: {
+        defaultValue: { summary: "undefined" },
+        type: { summary: "JSX.Element" },
+      },
+    },
+    rightText: {
+      description: "Use this prop when you want to add text.",
+      table: {
+        defaultValue: { summary: "undefined" },
+      },
+    },
+    isFilledStyle: {
+      control: {
+        type: "radio",
+      },
+      options: [true, false],
+      description: "Only for GNB or few situations of single select type.",
+      table: {
+        defaultValue: { summary: "false" },
+      },
+    },
+    disabled: {
+      control: {
+        type: "radio",
+      },
+      options: [true, false],
+      description: "If true, the component will be disabled.",
+      table: {
+        defaultValue: { summary: "false" },
+      },
+    },
+  },
+  parameters: {
+    controls: {
+      include: ["leftIcon", "rightText", "isFilledStyle", "disabled"],
+    },
+  },
+} as Meta<typeof DropdownItem>;
+
+const BasicDropdownItemTemplate: StoryFn<typeof DropdownItem> = (
+  args,
+  context
+) => {
+  const classNameFromGlobal = context.globals.theme;
+
+  const [selectedValue, setSelectedValue] = useState<string>("test1");
+  const handleSelectedValueChange = (event: SelectChangeEvent<unknown>) => {
+    const {
+      target: { value },
+    } = event;
+    setSelectedValue(value as string);
+  };
+
+  return (
+    <Box>
+      <Dropdown
+        className={classNameFromGlobal}
+        value={selectedValue}
+        onChange={handleSelectedValueChange}
+        sx={{ width: "150px" }}
+        open={true}
+      >
+        <DropdownItem value={"test1"} {...args}>
+          Conquer cancer through AI
+        </DropdownItem>
+        <DropdownItem value={"test2"} {...args}>
+          test item 2
+        </DropdownItem>
+        <DropdownItem value={"test3"} {...args}>
+          test item 3
+        </DropdownItem>
+      </Dropdown>
+    </Box>
+  );
+};
+
+export const BasicDropdownItem: StoryObj<typeof DropdownItem> = {
+  render: BasicDropdownItemTemplate,
+  name: "Basic DropdownItem",
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+};
+
+const DropdownItemSelectStyleTemplate: StoryFn<typeof DropdownItem> = (
+  args,
+  context
+) => {
+  const classNameFromGlobal = context.globals.theme;
+
+  const [selectedValue, setSelectedValue] = useState<string>("test1");
+  const handleSelectedValueChange = (event: SelectChangeEvent<unknown>) => {
+    const {
+      target: { value },
+    } = event;
+    setSelectedValue(value as string);
+  };
+  const [selectedValue2, setSelectedValue2] = useState<string[]>(["test1"]);
+  const handleSelectedValueChange2 = (event: SelectChangeEvent<unknown>) => {
+    const {
+      target: { value },
+    } = event;
+    setSelectedValue2(
+      // On autofill we get a stringified value.
+      typeof value === "string" ? value.split(",") : (value as string[])
+    );
+  };
+
+  return (
+    <Table sx={{ maxWidth: "1200px" }}>
+      <TableHead>
+        <TableRow>
+          <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+            Single select
+          </TableCell>
+          <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+            Single select(Filled Style)
+          </TableCell>
+          <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+            Multiple select
+          </TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow>
+          <TableCell>
+            <Dropdown
+              className={classNameFromGlobal}
+              value={selectedValue}
+              onChange={handleSelectedValueChange}
+              sx={{ width: "150px" }}
+            >
+              <DropdownItem value={"test1"} {...args}>
+                Conquer cancer through AI
+              </DropdownItem>
+              <DropdownItem value={"test2"} {...args}>
+                test item 2
+              </DropdownItem>
+              <DropdownItem value={"test3"} {...args}>
+                test item 3
+              </DropdownItem>
+            </Dropdown>
+          </TableCell>
+          <TableCell>
+            <Dropdown
+              className={classNameFromGlobal}
+              value={selectedValue}
+              onChange={handleSelectedValueChange}
+              sx={{ width: "150px" }}
+            >
+              <DropdownItem value={"test1"} isFilledStyle {...args}>
+                Conquer cancer through AI
+              </DropdownItem>
+              <DropdownItem value={"test2"} isFilledStyle {...args}>
+                test item 2
+              </DropdownItem>
+              <DropdownItem value={"test3"} isFilledStyle {...args}>
+                test item 3
+              </DropdownItem>
+            </Dropdown>
+          </TableCell>
+          <TableCell>
+            <Dropdown
+              className={classNameFromGlobal}
+              select="multiple"
+              value={selectedValue2}
+              onChange={handleSelectedValueChange2}
+              sx={{ width: "230px" }}
+            >
+              <DropdownItem value={"test1"} {...args}>
+                test item1
+              </DropdownItem>
+              <DropdownItem value={"test2"} {...args}>
+                test item 2
+              </DropdownItem>
+              <DropdownItem value={"test3"} {...args}>
+                test item 3
+              </DropdownItem>
+            </Dropdown>
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+};
+
+export const DropdownItemSelectStyle: StoryObj<typeof DropdownItem> = {
+  render: DropdownItemSelectStyleTemplate,
+  name: "DropdownItem : Style by Select Type",
+  parameters: {
+    controls: {
+      include: [],
+    },
+    chromatic: { disableSnapshot: true },
+  },
+};
+
+const DropdownItemWithIconTextTemplate: StoryFn<typeof DropdownItem> = (
+  args,
+  context
+) => {
+  const classNameFromGlobal = context.globals.theme;
+
+  const [selectedValue, setSelectedValue] = useState<string>("test1");
+  const handleSelectedValueChange = (event: SelectChangeEvent<unknown>) => {
+    const {
+      target: { value },
+    } = event;
+    setSelectedValue(value as string);
+  };
+
+  return (
+    <Box>
+      <Dropdown
+        className={classNameFromGlobal}
+        value={selectedValue}
+        onChange={handleSelectedValueChange}
+        sx={{ width: "150px" }}
+        open={true}
+      >
+        <DropdownItem
+          value={"test1"}
+          leftIcon={<Demo fontSize="small" />}
+          rightText="lunit"
+          {...args}
+        >
+          Conquer cancer through AI
+        </DropdownItem>
+        <DropdownItem
+          value={"test2"}
+          leftIcon={<RulerT2 fontSize="small" />}
+          rightText="design"
+          {...args}
+        >
+          test item 2
+        </DropdownItem>
+        <DropdownItem
+          value={"test3"}
+          leftIcon={<ViewfinderT1 fontSize="small" />}
+          rightText="system"
+          {...args}
+        >
+          test item 3
+        </DropdownItem>
+      </Dropdown>
+    </Box>
+  );
+};
+
+export const DropdownItemWithIconText: StoryObj<typeof DropdownItem> = {
+  render: DropdownItemWithIconTextTemplate,
+  name: "DropdownItem : With Left Icon, Right Text",
+  parameters: {
+    controls: {
+      include: [],
+    },
+    chromatic: { disableSnapshot: true },
+  },
+};
+
+const DropdownItemDividerSubtitleTemplate: StoryFn<typeof DropdownItem> = (
+  args,
+  context
+) => {
+  const classNameFromGlobal = context.globals.theme;
+
+  const [selectedValue, setSelectedValue] = useState<string>("test1");
+  const handleSelectedValueChange = (event: SelectChangeEvent<unknown>) => {
+    const {
+      target: { value },
+    } = event;
+    setSelectedValue(value as string);
+  };
+
+  return (
+    <Box>
+      <Dropdown
+        className={classNameFromGlobal}
+        value={selectedValue}
+        onChange={handleSelectedValueChange}
+        sx={{ width: "150px" }}
+        open={true}
+      >
+        <DropdownSubtitle title="Subtitle 1" />
+        <DropdownItem
+          value={"test1"}
+          leftIcon={<Demo fontSize="small" />}
+          {...args}
+        >
+          Conquer cancer through AI
+        </DropdownItem>
+        <DropdownItem
+          value={"test2"}
+          leftIcon={<RulerT2 fontSize="small" />}
+          {...args}
+        >
+          test item 2
+        </DropdownItem>
+        <DropdownItem
+          value={"test3"}
+          leftIcon={<ViewfinderT1 fontSize="small" />}
+          {...args}
+        >
+          test item 3
+        </DropdownItem>
+        <DropdownDivider />
+        <DropdownSubtitle title="Subtitle 2" />
+        <DropdownItem value={"test4"} {...args}>
+          Example 1
+        </DropdownItem>
+        <DropdownItem value={"test5"} {...args}>
+          Example 2
+        </DropdownItem>
+        <DropdownItem value={"test6"} {...args}>
+          Example 3
+        </DropdownItem>
+      </Dropdown>
+    </Box>
+  );
+};
+
+export const DropdownItemDividerSubtitle: StoryObj<typeof DropdownItem> = {
+  render: DropdownItemDividerSubtitleTemplate,
+  name: "DropdownItem : Divider, Subtitle",
+  parameters: {
+    controls: {
+      include: [],
+    },
+    chromatic: { disableSnapshot: true },
+  },
+};

package/src/stories/components/TextField/BasicTextField.stories.tsx

@@ -140,6 +140,34 @@ export const Disabled: StoryObj<typeof TextField> = {
   },
 };
 
+const ReadOnlyTemplate: StoryFn<typeof TextField> = (args) => {
+  return (
+    <Box sx={{ display: "flex", gap: 2 }}>
+      <TextField
+        {...args}
+        inputProps={{ readOnly: true }}
+        defaultValue="Conquer Cancer through AI."
+      />
+      <TextField
+        {...args}
+        multiline={true}
+        inputProps={{ readOnly: true }}
+        defaultValue="Conquer Cancer through AI. We develop AI that detects early-stage cancer and optimizes cancer treatment."
+      />
+    </Box>
+  );
+};
+
+export const ReadOnly: StoryObj<typeof TextField> = {
+  render: ReadOnlyTemplate,
+  parameters: {
+    controls: {
+      include: ["size", "helperText", "error", "disabled"],
+    },
+    chromatic: { disableSnapshot: true },
+  },
+};
+
 const ErrorTemplate: StoryFn<typeof TextField> = (args) => {
   return (
     <Box sx={{ display: "flex", gap: 2 }}>

package/src/stories/components/TextField/TextFieldDocs.mdx

@@ -78,6 +78,18 @@ Default disabled is `false`.
 <TextField multiline disabled />
 ```
 
+### ReadOnly
+
+The read-only textField can be applied with inputProps's the readOnly property.<br />
+You can save the text value you want to show in defaultValue property.
+
+<Canvas of={TextFieldStories.ReadOnly} sourceState="none" />
+
+```tsx
+<TextField inputProps={{ readOnly: true }} defaultValue="Conquer Cancer through AI." />
+<TextField multiline inputProps={{ readOnly: true }} defaultValue="Conquer Cancer through AI. We develop AI that detects early-stage cancer and optimizes cancer treatment."/>
+```
+
 ### Error
 
 The error prop toggles the error state.<br />

package/src/stories/foundation/Typography/Typography.stories.tsx

@@ -29,6 +29,19 @@ export const AllVariants = () => (
       }
       variants={variants.body}
     />
+    <TypographyGroup
+      heading="Small Body Variation"
+      dummy={
+        <>
+          AI will be the new standard of care. 123456789
+          <br />
+          By Lunit. With AI, we aim to make data-driven medicine
+          <br />
+          the new standard of care.
+        </>
+      }
+      variants={variants.smallBody}
+    />
     <TypographyGroup
       heading="etc"
       dummy="NEWS & UPDATE 71456"

package/src/stories/foundation/Typography/const.ts

@@ -13,13 +13,18 @@ const body = [
   "body2_14_regular",
   "body3_12_semibold",
   "body3_12_regular",
+  "body_m2",
+  "body_reg6",
+  "body_reg8",
 ] as const;
+const smallBody = ["small_body_sb1", "small_body_m2"] as const;
 const etc = ["button1", "button2", "caption", "overline"] as const;
 
 export const variants = {
   headline,
   body,
+  smallBody,
   etc,
 };
 
-export const variantArray = [...headline, ...body, ...etc];
+export const variantArray = [...headline, ...body, ...smallBody, ...etc];

package/src/stories/foundation/colors/TokenPaletteTable.tsx

@@ -78,6 +78,16 @@ const TokenPaletteTable = ({ kind }: TokenPaletteTableProps) => {
     );
   };
 
+  const deprecatedTokenList = [
+    "btn_secondary_border",
+    "btn_selected_secondary_bg",
+    "datatable_border_01",
+    "datatable_border_02",
+    "hover",
+    "focused",
+    "selected",
+  ];
+
   return (
     <TableContainer>
       <Table stickyHeader>
@@ -100,7 +110,15 @@ const TokenPaletteTable = ({ kind }: TokenPaletteTableProps) => {
             <TableRow key={paletteKey}>
               <TableCell sx={{ height: "72px" }}>
                 <StyledTypography>
-                  {kind}.{paletteKey}
+                  {kind}.{paletteKey}{" "}
+                  {deprecatedTokenList.includes(paletteKey) && (
+                    <Box
+                      component="span"
+                      sx={{ color: "red", fontWeight: "bold" }}
+                    >
+                      (Deprecated)
+                    </Box>
+                  )}
                 </StyledTypography>
               </TableCell>
               <TokenPaletteCell

package/dist/cjs/components/Modal/index.js

@@ -1,2 +0,0 @@
-(()=>{"use strict";var e={d:(r,t)=>{for(var o in t)e.o(t,o)&&!e.o(r,o)&&Object.defineProperty(r,o,{enumerable:!0,get:t[o]})},o:(e,r)=>Object.prototype.hasOwnProperty.call(e,r),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},r={};e.r(r),e.d(r,{default:()=>l});const t=require("react/jsx-runtime"),o=require("@mui/material"),l=()=>(0,t.jsx)(o.Box,{children:"Modal"});module.exports=r})();
-//# sourceMappingURL=index.js.map

package/dist/cjs/components/Modal/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"components/Modal/index.js","mappings":"mBACA,IAAIA,EAAsB,CCA1BA,EAAwB,CAACC,EAASC,KACjC,IAAI,IAAIC,KAAOD,EACXF,EAAoBI,EAAEF,EAAYC,KAASH,EAAoBI,EAAEH,EAASE,IAC5EE,OAAOC,eAAeL,EAASE,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,IAE1E,ECNDH,EAAwB,CAACS,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,GCClFV,EAAyBC,IACH,oBAAXa,QAA0BA,OAAOC,aAC1CV,OAAOC,eAAeL,EAASa,OAAOC,YAAa,CAAEC,MAAO,WAE7DX,OAAOC,eAAeL,EAAS,aAAc,CAAEe,OAAO,GAAO,G,mCCL9D,MAAM,EAA+BC,QAAQ,qBCAvC,EAA+BA,QAAQ,iBCO7C,EAJc,KACL,SAAC,EAAAC,IAAG,oB","sources":["webpack://@lunit/design-system/webpack/bootstrap","webpack://@lunit/design-system/webpack/runtime/define property getters","webpack://@lunit/design-system/webpack/runtime/hasOwnProperty shorthand","webpack://@lunit/design-system/webpack/runtime/make namespace object","webpack://@lunit/design-system/external commonjs \"react/jsx-runtime\"","webpack://@lunit/design-system/external commonjs \"@mui/material\"","webpack://@lunit/design-system/./src/components/Modal/Modal.tsx"],"sourcesContent":["// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"react/jsx-runtime\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@mui/material\");","import React from \"react\";\nimport { Box } from \"@mui/material\";\n\nconst Modal = () => {\n  return <Box>Modal</Box>;\n};\n\nexport default Modal;\n"],"names":["__webpack_require__","exports","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","require","Box"],"sourceRoot":""}

package/dist/components/Modal/Modal.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from "@mui/material";
-const Modal = () => {
-    return _jsx(Box, { children: "Modal" });
-};
-export default Modal;
-//# sourceMappingURL=Modal.js.map

package/dist/components/Modal/Modal.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAEpC,MAAM,KAAK,GAAG,GAAG,EAAE;IACjB,OAAO,KAAC,GAAG,wBAAY,CAAC;AAC1B,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/Modal/index.js

@@ -1,2 +0,0 @@
-export { default } from "./Modal";
-//# sourceMappingURL=index.js.map

package/dist/components/Modal/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC"}

package/dist/types/components/Modal/Modal.d.ts

@@ -1,2 +0,0 @@
-declare const Modal: () => import("react/jsx-runtime").JSX.Element;
-export default Modal;

package/dist/types/components/Modal/index.d.ts

@@ -1 +0,0 @@
-export { default } from "./Modal";