@lunit/design-system 2.0.1 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lunit/design-system",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "Lunit Design System",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
@@ -102,4 +102,4 @@
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   }
-}
+}

package/src/components/Checkbox/Checkbox.tsx

@@ -41,8 +41,8 @@ const CheckedIcon = () => {
       fill="none"
     >
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M5 1C2.79086 1 1 2.79086 1 5V15C1 17.2091 2.79086 19 5 19H15C17.2091 19 19 17.2091 19 15V5C19 2.79086 17.2091 1 15 1H5ZM15.2516 8.14413C15.6074 7.72168 15.5533 7.09083 15.1309 6.73508C14.7084 6.37933 14.0776 6.43341 13.7218 6.85586L9.31824 12.0851L6.14993 9.37556C5.7302 9.01661 5.09895 9.06588 4.74 9.48561C4.38105 9.90533 4.43032 10.5366 4.85005 10.8955L8.78416 14.26C8.98672 14.4332 9.25006 14.5184 9.51571 14.4967C9.78135 14.4749 10.0273 14.348 10.199 14.1441L15.2516 8.14413Z"
         fill="#00C9EA"
       />
@@ -60,8 +60,8 @@ const IndeterminateIcon = () => {
       fill="none"
     >
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M5 1C2.79086 1 1 2.79086 1 5V15C1 17.2091 2.79086 19 5 19H15C17.2091 19 19 17.2091 19 15V5C19 2.79086 17.2091 1 15 1H5ZM5 9C4.44772 9 4 9.44771 4 10C4 10.5523 4.44771 11 5 11L15 11C15.5523 11 16 10.5523 16 10C16 9.44772 15.5523 9 15 9L5 9Z"
         fill="#00C9EA"
       />

package/src/components/Chip/Chip.styled.ts

@@ -10,19 +10,14 @@ import type {
 } from "./Chip.types";
 
 const COMMON_STYLES = {
-  "&.MuiChip-root": {
-    height: "22px",
-    width: "auto",
-    minWidth: "22px",
-    boxShadow: "none",
-  },
+  height: "22px",
+  width: "auto",
+  minWidth: "22px",
+  boxShadow: "none",
   "&.Mui-disabled": {
     opacity: 1,
   },
   "& .MuiChip-label": {
-    display: "flex",
-    alignItems: "center",
-    textAlign: "center",
     padding: 0,
     marginInline: "8px",
   },
@@ -117,16 +112,14 @@ export const StyledContainedChipEnable = styled(StyledContainedChipBase, {
    * Setting the z-index of the chip to 0 and the z-index of the pseudo element to -1
    * allows the pseudo element(hover layer) to be rendered between the chip and the chip's children.
    */
-  "&.MuiChip-root": {
-    position: "relative",
-    left: 0,
-    right: 0,
-    zIndex: 0,
-  },
+  position: "relative",
+  left: 0,
+  right: 0,
+  zIndex: 0,
   "&:hover": {
     backgroundColor: getColorToken("bg", theme, color),
   },
-  "&.MuiChip-root:hover::before": {
+  "&:hover::before": {
     position: "absolute",
     zIndex: -1,
     content: '""',

package/src/components/Dialog/Dialog.tsx

@@ -26,7 +26,6 @@ export interface DialogBase {
   titleVariant?: TypographyProps["variant"];
   children: React.ReactNode;
   actions?: React.ReactNode;
-  enableBackButtonClose?: boolean; // only for passive dialog
   enableBackdropClose?: boolean;
   size?: "small" | "medium"; // default "small"
   sx?: SxProps;
@@ -37,13 +36,11 @@ export interface DialogBase {
 export interface PassiveDialogType extends DialogBase {
   type: "passive";
   actions?: undefined;
-  enableBackButtonClose?: true;
   enableBackdropClose?: true;
 }
 export interface ActionDialogType extends DialogBase {
   type: "action";
   actions: React.ReactNode;
-  enableBackButtonClose?: false;
   enableBackdropClose?: boolean;
 }
 
@@ -89,16 +86,11 @@ function Dialog(props: DialogProps) {
     function handleEscClose(event: KeyboardEvent) {
       if (event.key === "Escape") onClose();
     }
-    function handleBackButtonClose(event: KeyboardEvent) {
-      if (event.key === "Backspace") onClose();
-    }
 
     document.addEventListener("keydown", handleEscClose);
-    document.addEventListener("keydown", handleBackButtonClose);
 
     return () => {
       document.removeEventListener("keydown", handleEscClose);
-      document.removeEventListener("keydown", handleBackButtonClose);
     };
   }, [isOpen, isPassiveModal, onClose]);
 

package/src/components/Dropdown/Dropdown.styled.tsx

@@ -0,0 +1,170 @@
+import { styled } from "@mui/material/styles";
+import Box from "@mui/material/Box";
+import Select from "@mui/material/Select";
+import MenuItem from "@mui/material/MenuItem";
+
+import { DropdownProps } from "./Dropdown.types";
+type StyledDropdownProps = Omit<DropdownProps, "size"> & {
+  selectSize: "small" | "medium" | "large";
+};
+
+const valuesBySize = {
+  small: {
+    height: "28px",
+    padding: "4px 12px",
+    iconTop: "4px",
+    iconRight: "12px",
+  },
+  medium: {
+    height: "36px",
+    padding: "8px 16px",
+    iconTop: "8px",
+    iconRight: "16px",
+  },
+  large: {
+    height: "44px",
+    padding: "10px 16px",
+    iconTop: "12px", // large 의 text line height 가 medium, small 보다 4px 크기 때문에 그의 반절인 2px + padding 값 10px => 12px
+    iconRight: "16px",
+  },
+};
+
+export const StyledSelect = styled(Select, {
+  shouldForwardProp: (prop: string) => {
+    return !["selectSize", "select"].includes(prop);
+  },
+})<StyledDropdownProps>(({ theme, selectSize }) => ({
+  ...(selectSize === "large"
+    ? { ...theme.typography.body1_16_regular }
+    : { ...theme.typography.body2_14_regular }),
+  height: valuesBySize[selectSize || "medium"].height,
+  padding: valuesBySize[selectSize || "medium"].padding,
+  backgroundColor: theme.palette.lunit_token.component.textfield_bg,
+  overflow: "hidden",
+  "& .MuiSelect-select": {
+    paddingTop: 0,
+    paddingBottom: 0,
+    paddingRight: "28px !important", // icon width 20px + 아이콘과 텍스트 사이의 gap 8px
+    color: theme.palette.lunit_token.core.text_normal,
+  },
+  "&.MuiInputBase-root": {
+    borderRadius: "8px",
+    border: "none",
+
+    "&:hover:not(.Mui-disabled, .Mui-error):before": {
+      border: "none",
+    },
+  },
+  "& .MuiInput-input": {
+    "&:focus": {
+      backgroundColor: "transparent",
+    },
+  },
+  "&::after": {
+    border: "none",
+  },
+  "&::before": {
+    border: "none",
+  },
+  "&:hover": {
+    position: "relative",
+    zIndex: 0,
+    backgroundColor: theme.palette.lunit_token.component.textfield_bg,
+    border: "none",
+  },
+  "&:hover::before": {
+    content: '""',
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    zIndex: -1,
+    backgroundColor: theme.palette.lunit_token.core.hover,
+    border: "none",
+  },
+  // .Mui-focused 컴포넌트에 바로 border를 적용하면 컴포넌트의 width, height 값이 border 값만큼 늘어나기 때문에 따로 엘리먼트를 만들어서 border 를 적용함.
+  // 다른 :before 들도 동일한 이유로 작성
+  "&.Mui-focused::before": {
+    border: `1px solid ${theme.palette.lunit_token.core.focused}`,
+    content: '""',
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    borderRadius: "8px",
+    transition: "none",
+  },
+  "&.Mui-disabled": {
+    opacity: 0.38,
+  },
+  "&.Mui-disabled:before": {
+    borderBottomStyle: "none",
+  },
+  "&.Mui-error::before": {
+    border: `1px solid ${theme.palette.lunit_token.component.textfield_border_error}`,
+    content: '""',
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    borderRadius: "8px",
+    transition: "none",
+  },
+  "& .MuiSvgIcon-root": {
+    width: "20px",
+    height: "20px",
+    top: valuesBySize[selectSize || "medium"].iconTop, // mui 에서 이 icon position 이 position: absolute 로 되어 있어서 padding 값에 맞춰 포지션 조절
+    right: valuesBySize[selectSize || "medium"].iconRight,
+    color: theme.palette.lunit_token.core.text_normal,
+    "&.Mui-disabled": {
+      color: theme.palette.lunit_token.core.text_normal,
+    },
+  },
+}));
+
+export const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
+  ...theme.typography.body2_14_regular,
+  padding: "8px",
+  borderRadius: "8px",
+  color: theme.palette.lunit_token.core.text_normal,
+  backgroundColor: "transparent",
+  display: "flex",
+  flexDirection: "row",
+  justifyContent: "space-between",
+  gap: "8px",
+  "&:hover": {
+    backgroundColor: theme.palette.lunit_token.core.hover,
+  },
+  "&.Mui-focusVisible": {
+    backgroundColor: "transparent",
+    "&:hover": {
+      backgroundColor: theme.palette.lunit_token.core.hover,
+    },
+  },
+  // TODO: 디자이너와 focus 디자인 확인 후 살리든 지우든 하기
+  // "&:focus::before": {
+  //   border: "1px solid",
+  //   borderColor: theme.palette.lunit_token.core.focused,
+  //   content: '""',
+  //   position: "absolute",
+  //   top: 0,
+  //   bottom: 0,
+  //   left: -8,
+  //   right: -8,
+  // },
+  "& .multipleChecked": {
+    display: "none",
+  },
+  "&.filledStyle": {
+    backgroundColor: theme.palette.lunit_token.core.selected,
+  },
+}));
+
+export const StyledIconWrapper = styled(Box)({
+  width: "20px",
+  height: "20px",
+  marginRight: "8px",
+});

package/src/components/Dropdown/Dropdown.tsx

@@ -1,11 +1,62 @@
-import React from 'react'
+import React, { forwardRef } from "react";
+import ArrowDownSm from "@lunit/design-system-icons/ArrowDownSm";
+import { DropdownProps } from "./Dropdown.types";
+import { StyledSelect } from "./Dropdown.styled";
 
-import { Box } from '@mui/material'
+const Dropdown = forwardRef((props: DropdownProps, ref) => {
+  const {
+    select = "single",
+    size = "medium",
+    className,
+    children,
+    sx,
+    ...restProps
+  } = props;
 
-const Dropdown = () => {
-    return (
-        <Box>Dropdown</Box>
-    )
-}
+  return (
+    <StyledSelect
+      className={className}
+      variant="standard" // variant standard 기준으로 스타일링 되어있음. 다른 variant 사용 시 스타일이 틀어질 수 있음
+      multiple={select === "multiple"}
+      IconComponent={(props) => <ArrowDownSm {...props} />}
+      MenuProps={{
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "left",
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "left",
+        },
+        PaperProps: {
+          sx: {
+            marginTop: "4px",
+            padding: "0px 8px",
+            borderRadius: "8px",
+            backgroundColor: (theme) => theme.palette.lunit_token.core.bg_02,
+          },
+          className: `elevation2 ${className || "light1"}`,
+        },
+        MenuListProps: {
+          // 추후 MUI 버전 업그레이드 시 MenuListProps 변경 필요. Deprecated－use the slotProps.list prop instead. https://mui.com/material-ui/api/menu/ 의 MenuListProps 참고
+          sx: {
+            "& .singleChecked": {
+              display: select === "single" ? "inherit" : "none",
+            },
+            "& .multipleChecked": {
+              display: select === "multiple" ? "inherit !important" : "none",
+            },
+          },
+        },
+      }}
+      sx={sx}
+      selectSize={size}
+      {...restProps}
+      ref={ref}
+    >
+      {children}
+    </StyledSelect>
+  );
+});
 
-export default Dropdown
+export default Dropdown;

package/src/components/Dropdown/Dropdown.types.ts

@@ -0,0 +1,15 @@
+import type { MenuItemProps, SelectProps } from "@mui/material";
+
+export interface DropdownProps
+  extends Omit<SelectProps, "size" | "variant" | "placeholder"> {
+  // mui variant 를 바꾸게 되면 스타일이 틀어질 수 있어서 variant 를 아예 사용하지 못하게 props 에서 제거
+  // mui select 에서는 placeholder 가 동작하지 않기 때문에 유저가 헷갈리지 않게 props 에서 제거
+  select?: "single" | "multiple";
+  size?: "small" | "medium" | "large";
+}
+
+export interface DropdownItemProps extends MenuItemProps {
+  leftIcon?: JSX.Element;
+  rightText?: string;
+  isFilledStyle?: boolean;
+}

package/src/components/Dropdown/DropdownItem.tsx

@@ -0,0 +1,107 @@
+import React from "react";
+import { Box, Divider, ListSubheader, SxProps } from "@mui/material";
+import Check from "@lunit/design-system-icons/Check";
+
+import Checkbox from "../Checkbox";
+import Typography from "../Typography";
+
+import { DropdownItemProps } from "./Dropdown.types";
+import { StyledIconWrapper, StyledMenuItem } from "./Dropdown.styled";
+
+export function DropdownItem(props: DropdownItemProps) {
+  const {
+    leftIcon,
+    rightText,
+    selected,
+    isFilledStyle, // 체크 아이콘이나 체크박스 대신 bg 색깔로 선택된 상태를 표현하기 위한 prop. 일부 상황에서만 사용되고 대부분은 체크 아이콘이나 체크박스 사용
+    children,
+    sx,
+    ...restProps
+  } = props;
+
+  return (
+    <StyledMenuItem
+      className={isFilledStyle && selected ? "filledStyle" : undefined}
+      sx={sx}
+      {...restProps}
+    >
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "flex-start",
+        }}
+      >
+        {!isFilledStyle && (
+          <>
+            <StyledIconWrapper className="singleChecked">
+              {selected && <Check fontSize="small" />}
+            </StyledIconWrapper>
+            <Checkbox
+              className="multipleChecked"
+              sx={{ mr: 2 }}
+              checked={selected}
+            />
+          </>
+        )}
+        {leftIcon && (
+          <StyledIconWrapper>
+            {leftIcon}
+            {/* <Demo fontSize="small" /> // TODO: icon fontSize 가 항상 small(width, height: 20px) 이어야함. 여기서 값을 고정시킬 방법은?
+             */}
+          </StyledIconWrapper>
+        )}
+        {children}
+      </Box>
+      <Box>
+        {rightText && (
+          <Typography
+            variant="body2_14_medium"
+            sx={{
+              color: (theme) => theme.palette.lunit_token.core.text_light,
+            }}
+          >
+            {rightText}
+          </Typography>
+        )}
+      </Box>
+    </StyledMenuItem>
+  );
+}
+
+export function DropdownDivider({ sx }: { sx?: SxProps }) {
+  return (
+    <Divider
+      sx={{
+        margin: "8px -8px",
+        borderColor: (theme) =>
+          theme.palette.lunit_token.component.dropdown_divider_border,
+        ...sx,
+      }}
+    />
+  );
+}
+
+export function DropdownSubtitle({
+  title,
+  sx,
+}: {
+  title: string;
+  sx?: SxProps;
+}) {
+  return (
+    <ListSubheader
+      sx={{
+        typography: "body3_12_semibold",
+        padding: "4px 8px",
+        color: (theme) => theme.palette.lunit_token.core.text_light,
+        backgroundColor: "transparent",
+        ...sx,
+      }}
+    >
+      {title}
+    </ListSubheader>
+  );
+}
+// 참조 : https://mui.com/material-ui/react-select/#grouping
+DropdownSubtitle.muiSkipListHighlight = true;

package/src/components/Dropdown/index.ts

@@ -1 +1,7 @@
 export { default } from "./Dropdown";
+export {
+  DropdownItem,
+  DropdownDivider,
+  DropdownSubtitle,
+} from "./DropdownItem";
+export type { DropdownProps, DropdownItemProps } from "./Dropdown.types";

package/src/components/Radio/Radio.tsx

@@ -28,8 +28,8 @@ const DefaultIcon = () => {
       fill="none"
     >
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5ZM10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1C5.02944 1 1 5.02944 1 10C1 14.9706 5.02944 19 10 19Z"
         fill="#99999B"
       />
@@ -47,8 +47,8 @@ const CheckedIcon = () => {
       fill="none"
     >
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M10 15C12.7614 15 15 12.7614 15 10C15 7.23858 12.7614 5 10 5C7.23858 5 5 7.23858 5 10C5 12.7614 7.23858 15 10 15ZM10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1C5.02944 1 1 5.02944 1 10C1 14.9706 5.02944 19 10 19Z"
         fill="#00C9EA"
       />

package/src/components/TextField/TextField.style.ts

@@ -30,15 +30,15 @@ const getSinglelineTextFieldPaddingByIconAndSize = ({
     case "small":
       return `4px ${hasRightIcon ? "8px" : "12px"} 4px ${
         hasLeftIcon ? "8px" : "12px"
-      }}`;
+      }`;
     case "medium":
       return `8px ${hasRightIcon ? "12px" : "16px"} 8px ${
         hasLeftIcon ? "12px" : "16px"
-      }}`;
+      }`;
     case "large":
       return `10px ${hasRightIcon ? "12px" : "16px"} 10px ${
         hasLeftIcon ? "12px" : "16px"
-      }}`;
+      }`;
   }
 };
 
@@ -144,6 +144,31 @@ const commonStyle = ({ lunit_token }: { lunit_token: ColorToken }) => ({
       color: lunit_token.core.text_error,
     },
   },
+  "& .MuiInputBase-input": {
+    "&:-webkit-autofill, &:-webkit-autofill:active, &:-webkit-autofill:focus, &:-webkit-autofill:hover, &:-webkit-autofill:focus-visible, &:-webkit-autofill:focus-within, &:-webkit-autofill:target, &:-webkit-autofill:first-line":
+      {
+        border: "none",
+        borderRadius: "0px",
+        backgroundColor: "transparent",
+        color: lunit_token.core.text_normal,
+        /**
+         * the background color and text color are not changed color, background css tag.
+         * so we need to use -webkit-text-fill-color to change the text color.
+         * and we need to use -webkit-box-shadow, -webkit-transition to change the background color.
+         *
+         * reference: https://css-tricks.com/almanac/pseudo-selectors/a/autofill/
+         */
+        WebkitTextFillColor: lunit_token.core.text_normal,
+        WebkitBoxShadow: "0 0 0px 1000px transparent inset",
+        WebkitTransition: "background-color 5000s ease-in-out 0s",
+        /**
+         * textfield flash cursor color
+         *
+         * docs: https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color
+         */
+        caretColor: lunit_token.core.text_normal,
+      },
+  },
 });
 
 const sizeStyle = ({

package/src/components/TextField/TextField.tsx

@@ -73,13 +73,7 @@ const TextField = forwardRef<HTMLDivElement, TextFieldProps>((props, ref) => {
   const { rows, size, multiline = false, variant, ...restProps } = props;
 
   return multiline ? (
-    <MultiTextField
-      {...restProps}
-      ref={ref}
-      maxRows={Infinity}
-      size={size}
-      rows={rows}
-    />
+    <MultiTextField {...restProps} ref={ref} size={size} rows={rows} />
   ) : (
     <SingleTextField {...restProps} ref={ref} size={size} />
   );

package/src/foundation/Typography/index.ts

@@ -14,6 +14,11 @@ type DSVariants =
   | "body2_14_regular"
   | "body3_12_semibold"
   | "body3_12_regular"
+  | "body_m2"
+  | "body_reg6"
+  | "body_reg8"
+  | "small_body_sb1"
+  | "small_body_m2"
   | "button1"
   | "button2";
 
@@ -74,6 +79,11 @@ export const typographyDefaultProps = {
     body2_14_regular: "p",
     body3_12_semibold: "p",
     body3_12_regular: "p",
+    body_m2: "p",
+    body_reg6: "p",
+    body_reg8: "p",
+    small_body_sb1: "p",
+    small_body_m2: "p",
   },
 };
 

package/src/foundation/Typography/tokens.ts

@@ -47,6 +47,24 @@ const body = {
   "--body3-12-regular-font-weight": "var(--font-weight-regular)",
   "--body3-12-regular-font-size": "12.4px",
   "--body3-12-regular-line-height": "16px",
+  "--body_m2-font-weight": "var(--font-weight-medium)",
+  "--body_m2-font-size": "13px",
+  "--body_m2-line-height": "18px",
+  "--body_reg6-font-weight": "var(--font-weight-regular)",
+  "--body_reg6-font-size": "13px",
+  "--body_reg6-line-height": "18px",
+  "--body_reg8-font-weight": "var(--font-weight-regular)",
+  "--body_reg8-font-size": "12px",
+  "--body_reg8-line-height": "16px",
+} as const;
+
+const smallBody = {
+  "--small_body_sb1-font-weight": "var(--font-weight-semibold)",
+  "--small_body_sb1-font-size": "12px",
+  "--small_body_sb1-line-height": "16px",
+  "--small_body_m2-font-weight": "var(--font-weight-medium)",
+  "--small_body_m2-font-size": "12px",
+  "--small_body_m2-line-height": "20px",
 } as const;
 
 const etc = {
@@ -125,6 +143,32 @@ const fontVariants: Record<string, TypographyStyleOptions> = {
     fontSize: "var(--body3-12-regular-font-size)",
     lineHeight: "var(--body3-12-regular-line-height)",
   },
+  body_m2: {
+    fontWeight: "var(--body_m2-font-weight)",
+    fontSize: "var(--body_m2-font-size)",
+    lineHeight: "var(--body_m2-line-height)",
+    letterSpacing: "0.2px",
+  },
+  body_reg6: {
+    fontWeight: "var(--body_reg6-font-weight)",
+    fontSize: "var(--body_reg6-font-size)",
+    lineHeight: "var(--body_reg6-line-height)",
+  },
+  body_reg8: {
+    fontWeight: "var(--body_reg8-font-weight)",
+    fontSize: "var(--body_reg8-font-size)",
+    lineHeight: "var(--body_reg8-line-height)",
+  },
+  small_body_sb1: {
+    fontWeight: "var(--small_body_sb1-font-weight)",
+    fontSize: "var(--small_body_sb1-font-size)",
+    lineHeight: "var(--small_body_sb1-line-height)",
+  },
+  small_body_m2: {
+    fontWeight: "var(--small_body_m2-font-weight)",
+    fontSize: "var(--small_body_m2-font-size)",
+    lineHeight: "var(--small_body_m2-line-height)",
+  },
   overline: {
     fontWeight: "var(--overline-font-weight)",
     fontSize: "var(--overline-font-size)",
@@ -156,6 +200,7 @@ export const cssVariables = {
   ...fontWeights,
   ...headline,
   ...body,
+  ...smallBody,
   ...etc,
 };