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

package/src/components/Alert/Alert.styled.ts

@@ -0,0 +1,63 @@
+import {
+  Alert as MuiAlert,
+  AlertTitle as MuiAlertTitle,
+  styled,
+} from "@mui/material";
+import type { AlertProps } from "./Alert.types";
+import {
+  getBorderColor,
+  getBackgroundColor,
+  getIconColor,
+} from "./Alert.utils";
+
+export const StyledAlert = styled(MuiAlert)<AlertProps>(
+  ({ severity, theme }) => ({
+    "&.MuiAlert-root": {
+      display: "flex",
+      padding: "12px",
+      borderRadius: "8px",
+      border: `1px solid ${getBorderColor(theme, severity)}`,
+      backgroundColor: getBackgroundColor(theme, severity),
+      boxShadow: "none",
+    },
+    "& .MuiAlert-icon": {
+      padding: "4px",
+      marginRight: "0",
+      fontSize: "20px",
+      color: `${getIconColor(theme, severity)} !important`,
+    },
+    "& .MuiAlert-message": {
+      width: "100%",
+      minHeight: "28px",
+      padding: "4px 0 0",
+      margin: "0 8px 0 8px",
+    },
+    "& .MuiAlert-action": {
+      margin: 0,
+      padding: 0,
+    },
+    "& .MuiSvgIcon-root": {
+      height: "20px",
+      width: "20px",
+    },
+  })
+);
+
+export const StyledAlertTitle = styled(MuiAlertTitle)(({ theme }) => ({
+  "&.MuiAlertTitle-root": {
+    marginTop: 0,
+    marginBottom: 8,
+    fontWeight: 700,
+    fontSize: "14px",
+    lineHeight: "20px",
+    color: theme.palette.token.core.text_normal,
+  },
+}));
+
+export const StyledAlertChildren = styled("div")(({ theme }) => ({
+  color: theme.palette.token.core.text_normal,
+}));
+
+export const StyledBottomAction = styled("div")({
+  marginTop: "12px",
+});

package/src/components/Alert/Alert.tsx

@@ -1,9 +1,51 @@
-import React from "react";
+import Success from "@lunit/design-system-icons/Success16";
+import Error from "@lunit/design-system-icons/Error16";
+import Warning from "@lunit/design-system-icons/Warning16";
+import Information from "@lunit/design-system-icons/Information16";
+import Close from "@lunit/design-system-icons/Close";
+import React, { forwardRef } from "react";
+import {
+  StyledAlert,
+  StyledAlertTitle,
+  StyledAlertChildren,
+  StyledBottomAction,
+} from "./Alert.styled";
+import { AlertProps } from "./Alert.types";
+import Button from "../Button";
 
-import { Box } from "@mui/material";
-
-const Alert = () => {
-  return <Box>Alert</Box>;
+const MAPPED_ICON = {
+  success: <Success variant="filled" />,
+  info: <Information variant="filled" />,
+  warning: <Warning variant="filled" />,
+  error: <Error variant="filled" />,
 };
 
+const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
+  const { title, severity, children, bottomAction, onClose, ...rest } = props;
+  return (
+    <StyledAlert
+      ref={ref}
+      severity={severity}
+      iconMapping={MAPPED_ICON}
+      slots={{
+        closeButton: () => (
+          <Button
+            kind="ghost"
+            size="small"
+            color="secondary"
+            icon={<Close />}
+            onClick={onClose}
+          />
+        ),
+      }}
+      onClose={onClose}
+      {...rest}
+    >
+      {title && <StyledAlertTitle>{title}</StyledAlertTitle>}
+      <StyledAlertChildren>{children}</StyledAlertChildren>
+      {bottomAction && <StyledBottomAction>{bottomAction}</StyledBottomAction>}
+    </StyledAlert>
+  );
+});
+
 export default Alert;

package/src/components/Alert/Alert.types.ts

@@ -0,0 +1,10 @@
+import { AlertProps as MuiAlertProps } from "@mui/material";
+import { ReactNode } from "react";
+
+export interface AlertProps extends MuiAlertProps {
+  title?: string;
+  action?: ReactNode;
+  children: ReactNode;
+  bottomAction?: ReactNode;
+  onClose?: () => void;
+}

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

@@ -0,0 +1,49 @@
+import { AlertColor, Theme } from "@mui/material";
+
+export const getBackgroundColor = (
+  theme: Theme,
+  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 = (
+  theme: Theme,
+  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 = (
+  theme: Theme,
+  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;
 
 /**