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

package/src/components/Alert/Alert.utils..ts

@@ -0,0 +1,41 @@
+import theme from "@/theme";
+import { AlertColor } from "@mui/material";
+
+export const getBackgroundColor = (severity: AlertColor | undefined) => {
+  switch (severity) {
+    case "info":
+      return theme.palette.token.component.alert_info_bg;
+    case "warning":
+      return theme.palette.token.component.alert_warning_bg;
+    case "error":
+      return theme.palette.token.component.alert_error_bg;
+    default:
+      return theme.palette.token.component.alert_success_bg;
+  }
+};
+
+export const getBorderColor = (severity: AlertColor | undefined) => {
+  switch (severity) {
+    case "info":
+      return theme.palette.token.component.alert_info_border;
+    case "warning":
+      return theme.palette.token.component.alert_warning_border;
+    case "error":
+      return theme.palette.token.component.alert_error_border;
+    default:
+      return theme.palette.token.component.alert_success_border;
+  }
+};
+
+export const getIconColor = (severity: AlertColor | undefined) => {
+  switch (severity) {
+    case "info":
+      return theme.palette.token.core.icon_info_02;
+    case "warning":
+      return theme.palette.token.core.icon_warning_02;
+    case "error":
+      return theme.palette.token.core.icon_error_02;
+    default:
+      return theme.palette.token.core.icon_success_02;
+  }
+};

package/src/components/Button/Button.styled.ts

@@ -5,6 +5,7 @@ import { ColorToken } from "@/foundation/colors/types";
 import { PADDING_OF_FOCUS, OUTLINED_BORDER_WIDTH } from "./const";
 import { getButtonPaddingBySizeAndKind } from "./utils/getButtonPaddingBySizeAndKind";
 import { getIconButtonPaddingBySizeAndKind } from "./utils/getIconButtonPaddingBySizeAndKind";
+import getHoverStyle from "./utils/getHoverStyle";
 
 import type { ButtonProps } from "./Button.types";
 import type { ToggleButtonProps } from "../ToggleButton/ToggleButton.types";
@@ -22,6 +23,8 @@ type sizeStyleParams = Pick<
 > &
   Pick<ToggleButtonProps, "selected"> & { typography: Typography };
 
+const borderRadius = "8px";
+
 export const sizeStyle = ({
   size,
   kind,
@@ -67,9 +70,7 @@ export const kindStyle = ({ kind, color, token }: KindStyleParams) => ({
     color === "primary" && {
       color: token.component.btn_contained_primary_text,
       backgroundColor: token.component.btn_contained_primary_bg,
-      "&:hover": {
-        backgroundColor: token.component.btn_contained_primary_bg,
-      },
+      "&:hover": getHoverStyle(token.component.btn_contained_primary_bg),
       "&.Mui-disabled": {
         opacity: 0.38,
         border: "none",
@@ -79,10 +80,9 @@ export const kindStyle = ({ kind, color, token }: KindStyleParams) => ({
   ...(kind === "contained" &&
     color === "secondary" && {
       color: token.component.btn_contained_secondary_text,
+
       backgroundColor: token.component.btn_contained_secondary_bg,
-      "&:hover": {
-        backgroundColor: token.component.btn_contained_secondary_bg,
-      },
+      "&:hover": getHoverStyle(token.component.btn_contained_secondary_bg),
       "&.Mui-disabled": {
         opacity: 0.38,
         border: "none",
@@ -93,9 +93,7 @@ export const kindStyle = ({ kind, color, token }: KindStyleParams) => ({
     color === "error" && {
       color: token.component.btn_contained_error_text,
       backgroundColor: token.component.btn_contained_error_bg,
-      "&:hover": {
-        backgroundColor: token.component.btn_contained_error_bg,
-      },
+      "&:hover": getHoverStyle(token.component.btn_contained_error_bg),
       "&.Mui-disabled": {
         opacity: 0.38,
         border: "none",
@@ -107,9 +105,7 @@ export const kindStyle = ({ kind, color, token }: KindStyleParams) => ({
     color === "primary" && {
       color: token.component.btn_ghost_primary_text,
       border: "none",
-      "&:hover": {
-        backgroundColor: "rgba(0, 0, 0, 0.06)",
-      },
+      "&:hover": getHoverStyle("none"),
       "&.Mui-disabled": {
         opacity: 0.38,
         border: "none",
@@ -120,9 +116,7 @@ export const kindStyle = ({ kind, color, token }: KindStyleParams) => ({
     color === "secondary" && {
       color: token.component.btn_ghost_secondary_text,
       border: "none",
-      "&:hover": {
-        backgroundColor: "rgba(0, 0, 0, 0.06)",
-      },
+      "&:hover": getHoverStyle("none"),
       "&.Mui-disabled": {
         opacity: 0.38,
         border: "none",
@@ -132,9 +126,7 @@ export const kindStyle = ({ kind, color, token }: KindStyleParams) => ({
   ...(kind === "ghost" &&
     color === "error" && {
       color: token.component.btn_ghost_error_text,
-      "&:hover": {
-        backgroundColor: "rgba(0, 0, 0, 0.06)",
-      },
+      "&:hover": getHoverStyle("none"),
       "&.Mui-disabled": {
         opacity: 0.38,
         border: "none",
@@ -146,8 +138,17 @@ export const kindStyle = ({ kind, color, token }: KindStyleParams) => ({
     color === "primary" && {
       color: token.component.btn_outlined_primary_text,
       border: `${OUTLINED_BORDER_WIDTH}px solid ${token.component.btn_outlined_primary_border}`,
-      "&:hover": {
-        backgroundColor: "rgba(0, 0, 0, 0.06)", // TODO: color util function 추가 후 변경
+      "&:hover": getHoverStyle("none"),
+      "&:hover:before": {
+        content: "''",
+        position: "absolute",
+        left: "-1px",
+        top: "-1px",
+        width: "calc(100% + 2px)",
+        height: "calc(100% + 2px)",
+        zIndex: -1,
+        backgroundColor: token.core.hover,
+        borderRadius,
       },
       "&.Mui-disabled": {
         opacity: 0.38,
@@ -159,7 +160,7 @@ export const kindStyle = ({ kind, color, token }: KindStyleParams) => ({
 export const commonStyle = ({ token }: { token: ColorToken }) =>
   ({
     fontWeight: "500",
-    borderRadius: "8px",
+    borderRadius,
     textTransform: "initial",
     "&.Mui-focusVisible": {
       "&::after": {
@@ -172,6 +173,17 @@ export const commonStyle = ({ token }: { token: ColorToken }) =>
         boxSizing: "border-box",
       },
     },
+    "&:hover:before": {
+      content: "''",
+      position: "absolute",
+      left: 0,
+      top: 0,
+      width: "100%",
+      height: "100%",
+      zIndex: -1,
+      backgroundColor: token.core.hover,
+      borderRadius,
+    },
   } as const);
 
 export const iconStyle = ({

package/src/components/Button/Button.tsx

@@ -4,7 +4,7 @@ import { CustomButton } from "./Button.styled";
 
 import type { ButtonProps } from "./Button.types";
 
-const Button = (props: Omit<ButtonProps, "hasIconOnly">) => {
+const Button = (props: ButtonProps) => {
   const {
     kind = "contained",
     size = "small",
@@ -26,8 +26,6 @@ const Button = (props: Omit<ButtonProps, "hasIconOnly">) => {
           size={size}
           startIcon={icon}
           hasIconOnly={hasIconOnly}
-          disableRipple
-          disableFocusRipple
           {...buttonProps}
         >
           {!hasIconOnly && <>{children}</>}
@@ -40,8 +38,6 @@ const Button = (props: Omit<ButtonProps, "hasIconOnly">) => {
           size={size}
           startIcon={icon}
           hasIconOnly={hasIconOnly}
-          disableRipple
-          disableFocusRipple
           {...buttonProps}
         >
           {!hasIconOnly && <>{children}</>}

package/src/components/Button/Button.types.ts

@@ -1,20 +1,20 @@
 import type { ButtonProps as MuiButtonProps } from "@mui/material";
 
-interface BaseButtonProps extends MuiButtonProps {
+interface BaseButtonProps extends Omit<MuiButtonProps, "variant"> {
   icon?: React.ReactNode;
 }
 
-interface ContainedButtonProps extends Omit<BaseButtonProps, "variant"> {
+interface ContainedButtonProps extends BaseButtonProps {
   kind?: "contained";
   color?: "primary" | "secondary" | "error";
 }
 
-interface GhostButtonProps extends Omit<BaseButtonProps, "variant"> {
+interface GhostButtonProps extends BaseButtonProps {
   kind?: "ghost";
   color?: "primary" | "secondary" | "error";
 }
 
-interface OutlinedButtonProps extends Omit<BaseButtonProps, "variant"> {
+interface OutlinedButtonProps extends BaseButtonProps {
   kind?: "outlined";
   color?: "primary";
 }

package/src/components/Button/utils/getHoverStyle.ts

@@ -0,0 +1,7 @@
+const getHoverStyle = (backgroundColor: React.CSSProperties["color"]) => ({
+  position: "relative",
+  zIndex: 0,
+  backgroundColor,
+});
+
+export default getHoverStyle;

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

@@ -6,6 +6,7 @@ import type {
   ChipColor,
   OutlinedChipProps,
   BaseContainedChipProps,
+  EnableContainedChipProps,
 } from "./Chip.types";
 
 const COMMON_STYLES = {
@@ -13,6 +14,7 @@ const COMMON_STYLES = {
     height: "22px",
     width: "auto",
     minWidth: "22px",
+    boxShadow: "none",
   },
   "&.Mui-disabled": {
     opacity: 1,
@@ -110,7 +112,7 @@ export const StyledContainedChipBase = styled(MuiChip, {
 
 export const StyledContainedChipEnable = styled(StyledContainedChipBase, {
   shouldForwardProp: (prop) => !["color"].includes(prop.toString()),
-})<BaseContainedChipProps>(() => ({ theme, color }) => ({
+})<EnableContainedChipProps>(() => ({ theme, color }) => ({
   /**
    * 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.
@@ -137,9 +139,9 @@ export const StyledContainedChipEnable = styled(StyledContainedChipBase, {
   },
 }));
 
-export const StyledContainedChipDeletable = styled(StyledContainedChipBase, {
-  shouldForwardProp: (prop) => !["color"].includes(prop.toString()),
-})<BaseContainedChipProps>(() => ({ theme, color }) => ({
+export const StyledContainedChipDeletable = styled(
+  StyledContainedChipBase
+)<BaseContainedChipProps>(() => ({ theme }) => ({
   "& .MuiChip-deleteIcon": {
     marginLeft: "4px",
     marginRight: "3px",

package/src/components/Chip/Chip.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Avatar } from "@mui/material";
-import { Close16 } from "@lunit/design-system-icons";
+import Close16 from "@lunit/design-system-icons/Close16";
 import {
   StyledOutlinedChip,
   StyledContainedChipBase,

package/src/components/Chip/Chip.types.ts

@@ -1,9 +1,9 @@
 import { CHIP_COLORS } from "./consts";
 
-import type { ChipProps as MuiChipProps, SxProps } from "@mui/material";
+import type { ChipProps as MuiChipProps } from "@mui/material";
 
 type ColorKeys = keyof typeof CHIP_COLORS;
-export type ChipColor = typeof CHIP_COLORS[ColorKeys];
+export type ChipColor = (typeof CHIP_COLORS)[ColorKeys];
 export type ChipThumbnail = string | JSX.Element;
 
 /**

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

@@ -0,0 +1,316 @@
+import MuiTextField from "@mui/material/TextField";
+import { styled } from "@mui/material/styles";
+
+import type { ColorToken } from "@/foundation/colors/types";
+import type { Typography } from "@mui/material/styles/createTypography";
+import type { TextFieldProps, TextFieldSize } from "./TextField.types";
+
+type BaseTextFieldProps = Omit<TextFieldProps, "size"> & {
+  textFieldSize: TextFieldSize;
+  hasLeftIcon?: boolean;
+  hasRightIcon?: boolean;
+};
+
+interface GetTextFieldPaddingBySizeParams {
+  multiline?: boolean;
+  size: TextFieldSize;
+  hasLeftIcon?: boolean;
+  hasRightIcon?: boolean;
+}
+
+const getSinglelineTextFieldPaddingByIconAndSize = ({
+  size,
+  hasLeftIcon,
+  hasRightIcon,
+}: Pick<
+  GetTextFieldPaddingBySizeParams,
+  "size" | "hasLeftIcon" | "hasRightIcon"
+>) => {
+  switch (size) {
+    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"
+      }}`;
+  }
+};
+
+const getMultilineTextFieldPaddingByIconAndSize = ({
+  size,
+}: Pick<GetTextFieldPaddingBySizeParams, "size">) => {
+  switch (size) {
+    case "small":
+      return "4px 4px 4px 12px";
+    case "medium":
+      return "8px 4px 8px 16px";
+    case "large":
+      return "10px 4px 10px 16px";
+  }
+};
+
+const getTextFieldPaddingBySize = ({
+  size,
+  multiline,
+  hasLeftIcon,
+  hasRightIcon,
+}: GetTextFieldPaddingBySizeParams) => {
+  return multiline
+    ? getMultilineTextFieldPaddingByIconAndSize({ size })
+    : getSinglelineTextFieldPaddingByIconAndSize({
+        size,
+        hasLeftIcon,
+        hasRightIcon,
+      });
+};
+
+const commonStyle = ({ token }: { token: ColorToken }) => ({
+  "& .MuiOutlinedInput-root": {
+    borderRadius: "8px",
+    width: "100%",
+
+    "& fieldset": {
+      border: "none",
+    },
+    "&.Mui-error fieldset": {
+      border: `1px solid ${token.component.textfield_border_error}`,
+    },
+    "&.Mui-focused fieldset": {
+      border: `1px solid ${token.core.focused}`,
+    },
+    "&.Mui-disabled": {
+      opacity: 0.38,
+      "&:hover::before": {
+        backgroundColor: token.component.textfield_bg,
+      },
+    },
+    "& input, textarea": {
+      padding: 0,
+      textOverflow: "ellipsis",
+      "&::placeholder": {
+        color: token.core.text_medium,
+        opacity: 1,
+        WebkitTextFillColor: token.core.text_medium,
+      },
+    },
+    "& textarea": {
+      height: "100% !important",
+      overflowY: "scroll !important",
+      "&::-webkit-scrollbar": {
+        width: "6px",
+      },
+      "&::-webkit-scrollbar-thumb": {
+        borderRadius: "6px",
+        backgroundColor: token.component.scrollbars_bg,
+      },
+    },
+    background: token.component.textfield_bg,
+    overflow: "hidden",
+    color: token.core.text_normal,
+    "&:hover": {
+      position: "relative",
+      zIndex: 0,
+      backgroundColor: token.component.textfield_bg,
+    },
+    "&:hover::before": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      zIndex: -1,
+      backgroundColor: token.core.hover,
+    },
+    "&.Mui-focused": {
+      "&:hover::before": {
+        backgroundColor: token.component.textfield_bg,
+      },
+    },
+  },
+  "& .MuiFormHelperText-root": {
+    "&.Mui-disabled": {
+      opacity: 0.38,
+    },
+    "&.Mui-error": {
+      color: token.core.text_error,
+    },
+  },
+});
+
+const sizeStyle = ({
+  token,
+  textFieldSize,
+  hasLeftIcon,
+  hasRightIcon,
+  typography,
+  multiline,
+}: Pick<
+  BaseTextFieldProps,
+  "textFieldSize" | "hasLeftIcon" | "hasRightIcon" | "multiline"
+> & { token: ColorToken; typography: Typography }) => ({
+  ...(textFieldSize === "small" && {
+    "& .MuiInputBase-root": {
+      padding: getTextFieldPaddingBySize({
+        size: textFieldSize,
+        hasLeftIcon,
+        hasRightIcon,
+        multiline,
+      }),
+      "& input, textarea": {
+        ...typography.body2_14_regular,
+      },
+      "& input": {
+        height: "20px",
+      },
+      "& textarea": {
+        minHeight: "92px",
+        paddingRight: "2px",
+      },
+    },
+    "& .MuiFormHelperText-root": {
+      ...typography.body2_14_regular,
+      color: token.core.text_medium,
+      margin: 0,
+      marginTop: "4px",
+      paddingLeft: "4px",
+
+      "&.Mui-disabled": {
+        color: token.core.text_medium,
+        opacity: 0.38,
+      },
+      "&.Mui-error": {
+        color: token.core.text_error,
+      },
+    },
+  }),
+  ...(textFieldSize === "medium" && {
+    "& .MuiInputBase-root": {
+      padding: getTextFieldPaddingBySize({
+        size: textFieldSize,
+        hasLeftIcon,
+        hasRightIcon,
+        multiline,
+      }),
+      "& input, textarea": {
+        ...typography.body2_14_regular,
+      },
+      "& input": {
+        height: "20px",
+      },
+      "& textarea": {
+        minHeight: "84px",
+        paddingRight: "6px",
+      },
+    },
+    "& .MuiFormHelperText-root": {
+      ...typography.body2_14_regular,
+      color: token.core.text_medium,
+      margin: 0,
+      marginTop: "4px",
+      paddingLeft: "4px",
+
+      "&.Mui-disabled": {
+        color: token.core.text_medium,
+        opacity: 0.38,
+      },
+      "&.Mui-error": {
+        color: token.core.text_error,
+      },
+    },
+  }),
+  ...(textFieldSize === "large" && {
+    "& .MuiInputBase-root": {
+      padding: getTextFieldPaddingBySize({
+        size: textFieldSize,
+        hasLeftIcon,
+        hasRightIcon,
+        multiline,
+      }),
+      "& input, textarea": {
+        ...typography.body1_16_regular,
+      },
+      "& input": {
+        height: "24px",
+      },
+      "& textarea": {
+        minHeight: "80px",
+        paddingRight: "6px",
+      },
+    },
+    "& .MuiFormHelperText-root": {
+      ...typography.body1_16_regular,
+      color: token.core.text_medium,
+      margin: 0,
+      marginTop: "4px",
+      paddingLeft: "4px",
+
+      "&.Mui-disabled": {
+        color: token.core.text_medium,
+        opacity: 0.38,
+      },
+      "&.Mui-error": {
+        color: token.core.text_error,
+      },
+    },
+  }),
+});
+
+const BaseTextField = styled(MuiTextField, {
+  shouldForwardProp: (prop: string) =>
+    ![
+      "leftIconSx",
+      "rightIconSx",
+      "leftIcon",
+      "rightIcon",
+      "textFieldSize",
+      "hasLeftIcon",
+      "hasRightIcon",
+      "onLeftIconClick",
+      "onRightIconClick",
+    ].includes(prop),
+})<BaseTextFieldProps>(
+  ({
+    theme: {
+      typography,
+      palette: { token },
+    },
+    multiline,
+    textFieldSize,
+    hasLeftIcon,
+    hasRightIcon,
+  }) => ({
+    ...commonStyle({ token }),
+    ...sizeStyle({
+      token,
+      textFieldSize,
+      hasLeftIcon,
+      hasRightIcon,
+      typography,
+      multiline,
+    }),
+  })
+);
+
+const IconWrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  minWidth: "28px",
+  minHeight: "28px",
+  margin: "-4px 0",
+
+  "& svg": {
+    width: "20px",
+    height: "20px",
+    color: theme.palette.token.core.text_normal,
+  },
+}));
+
+export { BaseTextField, IconWrapper };

package/src/components/TextField/TextField.tsx

@@ -1,8 +1,80 @@
 import React from "react";
-import { Box } from "@mui/material";
 
-const TextField = () => {
-  return <Box>TextField</Box>;
+import TextFieldIcon from "./TextFieldIcon";
+import { BaseTextField } from "./TextField.style";
+
+import type {
+  TextFieldProps,
+  MultiTextFieldProps,
+  SingleTextFieldProps,
+} from "./TextField.types";
+
+const SingleTextField = (props: SingleTextFieldProps) => {
+  const {
+    size,
+    leftIcon,
+    rightIcon,
+    leftIconSx,
+    rightIconSx,
+    onLeftIconClick,
+    onRightIconClick,
+    ...restProps
+  } = props;
+
+  return (
+    <BaseTextField
+      {...restProps}
+      textFieldSize={size}
+      hasLeftIcon={Boolean(leftIcon)}
+      hasRightIcon={Boolean(rightIcon)}
+      InputProps={{
+        startAdornment: leftIcon && (
+          <TextFieldIcon
+            sx={{ marginRight: "4px", ...leftIconSx }}
+            icon={leftIcon}
+            onIconClick={onLeftIconClick}
+          />
+        ),
+        endAdornment: rightIcon && (
+          <TextFieldIcon
+            sx={{ marginLeft: "4px", ...rightIconSx }}
+            icon={rightIcon}
+            onIconClick={onRightIconClick}
+          />
+        ),
+      }}
+    />
+  );
+};
+
+const MultiTextField = ({
+  size,
+  onChange,
+  ...restProps
+}: MultiTextFieldProps) => {
+  return <BaseTextField {...restProps} textFieldSize={size} multiline />;
+};
+
+const TextField = (props: TextFieldProps) => {
+  const {
+    rows,
+    size = "small",
+    multiline = false,
+    variant = "outlined",
+    ...restProps
+  } = props;
+
+  return multiline ? (
+    <MultiTextField
+      {...restProps}
+      maxRows={Infinity}
+      size={size}
+      variant={variant}
+      rows={rows}
+    />
+  ) : (
+    <SingleTextField {...restProps} size={size} variant={variant} />
+  );
 };
 
 export default TextField;