@lunit/design-system 2.0.2 → 2.1.0

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/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,
 };
 

package/src/foundation/colors/base/blue.ts

@@ -1,21 +1,23 @@
 import { grey } from "./grey";
 
 export const blue = {
-  5: "#DAECFF",
-  10: "#D0E2FF",
-  20: "#9DCEFF",
-  30: "#78A9FF",
-  40: "#4589FF",
-  50: "#0F62FE",
-  60: "#0043CE",
-  70: "#0055AB",
-  80: "#001D6C",
-  90: "#002041",
+  5: "#EDF6FE",
+  10: "#D9E9FD",
+  15: "#BFD9FC",
+  20: "#A5C8FC",
+  30: "#71A9FA",
+  40: "#3D88FA",
+  50: "#0D68F2",
+  60: "#0E51BA",
+  70: "#0C3F8F",
+  80: "#032765",
+  90: "#03183F",
 };
 
 export const blueText = {
   5: grey[95],
   10: grey[95],
+  15: grey[95],
   20: grey[95],
   30: grey[95],
   40: grey[95],

package/src/foundation/colors/base/green.ts

@@ -1,21 +1,23 @@
 import { grey } from "./grey";
 
 export const green = {
-  5: "#EBFFF0",
-  10: "#B4EFC4",
+  5: "#E6FDEB",
+  10: "#C4F5D1",
+  15: "#A0E5B3",
   20: "#6FDC8C",
-  30: "#42BE65",
-  40: "#24A148",
-  50: "#198038",
-  60: "#0E6027",
-  70: "#044317",
-  80: "#022D0D",
-  90: "#071908",
+  30: "#44BE67",
+  40: "#1A9F3F",
+  50: "#138231",
+  60: "#0D6222",
+  70: "#0B4F1A",
+  80: "#01380F",
+  90: "#082209",
 };
 
 export const greenText = {
   5: grey[95],
   10: grey[95],
+  15: grey[95],
   20: grey[95],
   30: grey[95],
   40: grey[95],

package/src/foundation/colors/base/grey.ts

@@ -1,20 +1,27 @@
 export const grey = {
   0: "#FFFFFF",
-  5: "#FAFAFB",
-  10: "#F1F1F4",
-  15: "#DFDFE2",
-  20: "#CFCFD1",
-  25: "#C0C0C2",
-  30: "#AFAFB1",
-  40: "#99999B",
-  50: "#747477",
-  60: "#626264",
-  70: "#4E4E50",
-  75: "#404042",
-  80: "#333336",
-  85: "#2D2D2F",
-  90: "#1F1F21",
-  95: "#111113",
+  5: "#F5F5F6",
+  10: "#EAEAEC",
+  15: "#DFDFE1",
+  20: "#D5D5D7",
+  25: "#C8C8CA",
+  30: "#BCBCBE",
+  35: "#B1B1B4",
+  40: "#A4A4A8",
+  45: "#9A9A9D",
+  50: "#8D8D90",
+  55: "#808084",
+  60: "#747479",
+  65: "#68686C",
+  70: "#59595D",
+  75: "#4A4A4E",
+  80: "#3B3B3F",
+  82: "#343438",
+  85: "#2E2E32",
+  88: "#27272B",
+  90: "#1F1F23",
+  93: "#16161A",
+  95: "#0F0F12",
   100: "#000000",
 };
 
@@ -26,13 +33,21 @@ export const greyText = {
   20: grey[95],
   25: grey[95],
   30: grey[95],
+  35: grey[95],
   40: grey[95],
+  45: grey[95],
   50: grey[5],
+  55: grey[5],
   60: grey[5],
+  65: grey[5],
   70: grey[5],
+  75: grey[5],
   80: grey[5],
+  82: grey[5],
   85: grey[5],
+  88: grey[5],
   90: grey[5],
+  93: grey[5],
   95: grey[5],
   100: grey[5],
 };

package/src/foundation/colors/base/lunitTeal.ts

@@ -3,6 +3,7 @@ import { grey } from "./grey";
 export const lunit_teal = {
   5: "#EAFAFF",
   10: "#D1F7FF",
+  15: "#BDF4FF",
   20: "#96EDFF",
   30: "#30DFFC",
   40: "#00C9EA",
@@ -16,6 +17,7 @@ export const lunit_teal = {
 export const lunit_tealText = {
   5: lunit_teal[90],
   10: lunit_teal[90],
+  15: lunit_teal[90],
   20: grey[95],
   30: grey[95],
   40: grey[95],