@lunit/design-system 2.1.0 → 2.2.3

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

@@ -1,29 +1,26 @@
-import { styled } from "@mui/material/styles";
-import { Button as MuiButton } from "@mui/material";
+import { styled } from '@mui/material/styles';
+import { Button as MuiButton } from '@mui/material';
 
-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 { 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";
-import type { Typography } from "@mui/material/styles/createTypography";
+import type { ButtonProps } from './Button.types';
+import type { ToggleButtonProps } from '../ToggleButton/ToggleButton.types';
+import type { TypographyVariants } from '@mui/material/styles';
 
-type KindStyleParams = Pick<ButtonProps, "kind" | "color"> & {
+type KindStyleParams = Pick<ButtonProps, 'kind' | 'color'> & {
   lunit_token: ColorToken;
 };
 
 type CustomButtonProps = ButtonProps & { hasIconOnly: boolean };
 
-type sizeStyleParams = Pick<
-  CustomButtonProps,
-  "size" | "hasIconOnly" | "kind"
-> &
-  Pick<ToggleButtonProps, "selected"> & { typography: Typography };
+type sizeStyleParams = Pick<CustomButtonProps, 'size' | 'hasIconOnly' | 'kind'> &
+  Pick<ToggleButtonProps, 'selected'> & { typography: TypographyVariants };
 
-const borderRadius = "8px";
+const borderRadius = '8px';
 
 export const sizeStyle = ({
   size,
@@ -32,145 +29,145 @@ export const sizeStyle = ({
   typography,
   selected = false,
 }: sizeStyleParams) => ({
-  ...(size === "small" && {
+  ...(size === 'small' && {
     ...typography.button2,
     padding: `${
       hasIconOnly
         ? getIconButtonPaddingBySizeAndKind({ kind, size, selected })
         : getButtonPaddingBySizeAndKind({ kind, size, selected })
     }`,
-    minWidth: "28px",
-    height: "28px",
+    minWidth: '28px',
+    height: '28px',
   }),
-  ...(size === "medium" && {
+  ...(size === 'medium' && {
     ...typography.button2,
     padding: `${
       hasIconOnly
         ? getIconButtonPaddingBySizeAndKind({ kind, size, selected })
         : getButtonPaddingBySizeAndKind({ kind, size, selected })
     }`,
-    minWidth: "36px",
-    height: "36px",
+    minWidth: '36px',
+    height: '36px',
   }),
-  ...(size === "large" && {
+  ...(size === 'large' && {
     ...typography.button1,
     padding: `${
       hasIconOnly
         ? getIconButtonPaddingBySizeAndKind({ kind, size, selected })
         : getButtonPaddingBySizeAndKind({ kind, size, selected })
     }`,
-    minWidth: "44px",
-    height: "44px",
+    minWidth: '44px',
+    height: '44px',
   }),
 });
 
 export const kindStyle = ({ kind, color, lunit_token }: KindStyleParams) => ({
   // kind: container
-  ...(kind === "contained" &&
-    color === "primary" && {
+  ...(kind === 'contained' &&
+    color === 'primary' && {
       color: lunit_token.component.btn_primary_text_2,
       backgroundColor: lunit_token.component.btn_primary_bg,
-      "&:hover": getHoverStyle(lunit_token.component.btn_primary_bg),
-      "&.Mui-disabled": {
+      '&:hover': getHoverStyle(lunit_token.component.btn_primary_bg),
+      '&.Mui-disabled': {
         opacity: 0.38,
-        border: "none",
+        border: 'none',
         color: lunit_token.component.btn_primary_text_2,
       },
     }),
-  ...(kind === "contained" &&
-    color === "secondary" && {
+  ...(kind === 'contained' &&
+    color === 'secondary' && {
       color: lunit_token.component.btn_secondary_text,
       backgroundColor: lunit_token.component.btn_secondary_bg,
-      "&:hover": getHoverStyle(lunit_token.component.btn_secondary_bg),
-      "&.Mui-disabled": {
+      '&:hover': getHoverStyle(lunit_token.component.btn_secondary_bg),
+      '&.Mui-disabled': {
         opacity: 0.38,
-        border: "none",
+        border: 'none',
         color: lunit_token.component.btn_secondary_text,
       },
     }),
-  ...(kind === "contained" &&
-    color === "error" && {
+  ...(kind === 'contained' &&
+    color === 'error' && {
       color: lunit_token.component.btn_primary_text_2,
       backgroundColor: lunit_token.component.btn_error_bg,
-      "&:hover": getHoverStyle(lunit_token.component.btn_error_bg),
-      "&.Mui-disabled": {
+      '&:hover': getHoverStyle(lunit_token.component.btn_error_bg),
+      '&.Mui-disabled': {
         opacity: 0.38,
-        border: "none",
+        border: 'none',
         color: lunit_token.component.btn_primary_text_2,
       },
     }),
   // kind: ghost
-  ...(kind === "ghost" &&
-    color === "primary" && {
+  ...(kind === 'ghost' &&
+    color === 'primary' && {
       color: lunit_token.component.btn_primary_text_1,
-      border: "none",
-      "&:hover": getHoverStyle("none"),
-      "&.Mui-disabled": {
+      border: 'none',
+      '&:hover': getHoverStyle('none'),
+      '&.Mui-disabled': {
         opacity: 0.38,
-        border: "none",
+        border: 'none',
         color: lunit_token.component.btn_primary_text_1,
       },
     }),
-  ...(kind === "ghost" &&
-    color === "secondary" && {
+  ...(kind === 'ghost' &&
+    color === 'secondary' && {
       color: lunit_token.component.btn_secondary_text,
-      border: "none",
-      "&:hover": getHoverStyle("none"),
-      "&.Mui-disabled": {
+      border: 'none',
+      '&:hover': getHoverStyle('none'),
+      '&.Mui-disabled': {
         opacity: 0.38,
-        border: "none",
+        border: 'none',
         color: lunit_token.component.btn_secondary_text,
       },
     }),
-  ...(kind === "ghost" &&
-    color === "error" && {
+  ...(kind === 'ghost' &&
+    color === 'error' && {
       color: lunit_token.component.btn_error_text,
-      "&:hover": getHoverStyle("none"),
-      "&.Mui-disabled": {
+      '&:hover': getHoverStyle('none'),
+      '&.Mui-disabled': {
         opacity: 0.38,
-        border: "none",
+        border: 'none',
         color: lunit_token.component.btn_error_text,
       },
     }),
   // kind: outlined
-  ...(kind === "outlined" &&
-    color === "primary" && {
+  ...(kind === 'outlined' &&
+    color === 'primary' && {
       color: lunit_token.component.btn_primary_text_1,
       border: `${OUTLINED_BORDER_WIDTH}px solid ${lunit_token.component.btn_primary_border}`,
-      "&:hover": getHoverStyle("none"),
-      "&:hover:before": {
+      '&:hover': getHoverStyle('none'),
+      '&:hover:before': {
         content: "''",
-        position: "absolute",
-        left: "-1px",
-        top: "-1px",
-        width: "calc(100% + 2px)",
-        height: "calc(100% + 2px)",
+        position: 'absolute',
+        left: '-1px',
+        top: '-1px',
+        width: 'calc(100% + 2px)',
+        height: 'calc(100% + 2px)',
         zIndex: -1,
-        backgroundColor: lunit_token.core.hover,
+        backgroundColor: lunit_token.core.status_hover,
         borderRadius,
       },
-      "&.Mui-disabled": {
+      '&.Mui-disabled': {
         opacity: 0.38,
         color: lunit_token.component.btn_primary_text_1,
       },
     }),
-  ...(kind === "outlined" &&
-    color === "secondary" && {
+  ...(kind === 'outlined' &&
+    color === 'secondary' && {
       color: lunit_token.component.btn_secondary_text,
       border: `${OUTLINED_BORDER_WIDTH}px solid ${lunit_token.core.border_medium}`,
-      "&:hover": getHoverStyle("none"),
-      "&:hover:before": {
+      '&:hover': getHoverStyle('none'),
+      '&:hover:before': {
         content: "''",
-        position: "absolute",
-        left: "-1px",
-        top: "-1px",
-        width: "calc(100% + 2px)",
-        height: "calc(100% + 2px)",
+        position: 'absolute',
+        left: '-1px',
+        top: '-1px',
+        width: 'calc(100% + 2px)',
+        height: 'calc(100% + 2px)',
         zIndex: -1,
-        backgroundColor: lunit_token.core.hover,
+        backgroundColor: lunit_token.core.status_hover,
         borderRadius,
       },
-      "&.Mui-disabled": {
+      '&.Mui-disabled': {
         opacity: 0.38,
         color: lunit_token.component.btn_secondary_text,
       },
@@ -179,50 +176,50 @@ export const kindStyle = ({ kind, color, lunit_token }: KindStyleParams) => ({
 
 export const commonStyle = ({ lunit_token }: { lunit_token: ColorToken }) =>
   ({
-    fontWeight: "500",
+    fontWeight: '500',
     borderRadius,
-    textTransform: "initial",
-    "&.Mui-focusVisible": {
-      "&::after": {
-        position: "absolute",
+    textTransform: 'initial',
+    '&.Mui-focusVisible': {
+      '&::after': {
+        position: 'absolute',
         width: `calc(100% + ${PADDING_OF_FOCUS}px)`,
         height: `calc(100% + ${PADDING_OF_FOCUS}px)`,
         content: '""',
-        borderRadius: "11px",
-        border: `1px solid ${lunit_token.core.focused}`,
-        boxSizing: "border-box",
+        borderRadius: '11px',
+        border: `1px solid ${lunit_token.core.status_focused}`,
+        boxSizing: 'border-box',
       },
     },
-    "&:hover:before": {
+    '&:hover:before': {
       content: "''",
-      position: "absolute",
+      position: 'absolute',
       left: 0,
       top: 0,
-      width: "100%",
-      height: "100%",
+      width: '100%',
+      height: '100%',
       zIndex: -1,
-      backgroundColor: lunit_token.core.hover,
+      backgroundColor: lunit_token.core.status_hover,
       borderRadius,
     },
-  } as const);
+  }) as const;
 
 export const iconStyle = ({
   size,
   hasIconOnly,
-}: Pick<CustomButtonProps, "size" | "hasIconOnly">) => ({
-  "& .MuiButton-startIcon": {
+}: Pick<CustomButtonProps, 'size' | 'hasIconOnly'>) => ({
+  '& .MuiButton-startIcon': {
     margin: 0,
-    marginRight: hasIconOnly ? "0px" : size === "large" ? "8px" : "4px",
+    marginRight: hasIconOnly ? '0px' : size === 'large' ? '8px' : '4px',
 
-    "*:nth-of-type(1)": {
-      fontSize: "20px",
+    '*:nth-of-type(1)': {
+      fontSize: '20px',
     },
   },
 });
 
 export const CustomButton = styled(MuiButton, {
   shouldForwardProp: (prop: string) => {
-    return !["kind", "hasIconOnly", "variant"].includes(prop);
+    return !['kind', 'hasIconOnly', 'variant'].includes(prop);
   },
 })<CustomButtonProps>(
   ({
@@ -239,5 +236,5 @@ export const CustomButton = styled(MuiButton, {
     ...iconStyle({ size, hasIconOnly }),
     ...sizeStyle({ size, kind, hasIconOnly, typography }),
     ...kindStyle({ kind, color, lunit_token }),
-  })
+  }),
 );

package/src/components/Button/Button.tsx

@@ -1,6 +1,6 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef } from 'react';
 
-import { CustomButton } from "./Button.styled";
+import { CustomButton } from './Button.styled';
 
 import type {
   ButtonType,
@@ -8,49 +8,52 @@ import type {
   GhostButtonProps,
   OutlinedButtonProps,
   ContainedButtonProps,
-} from "./Button.types";
+} from './Button.types';
 
-const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
-  const { kind, variant, icon, children, startIcon } = props;
-  const hasIconOnly = Boolean((startIcon || icon) && !children);
-
-  if (kind === "outlined" || variant === "outlined") {
-    return <OutlinedButton {...props} ref={ref} hasIconOnly={hasIconOnly} />;
-  }
+const GhostButton = forwardRef<HTMLButtonElement, GhostButtonProps & { hasIconOnly: boolean }>(
+  (props, ref) => {
+    const {
+      size = 'small',
+      icon,
+      className,
+      children,
+      startIcon,
+      hasIconOnly,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+      variant: _variant,
+      ...restProps
+    } = props;
 
-  if (kind === "ghost" || variant === "text" || variant === "ghost") {
-    return <GhostButton {...props} ref={ref} hasIconOnly={hasIconOnly} />;
-  }
+    return (
+      <CustomButton
+        {...restProps}
+        ref={ref}
+        className={`ghost ${className ? className : ''}`}
+        kind="ghost"
+        color={props.color ?? 'primary'}
+        size={size}
+        startIcon={startIcon || icon}
+        hasIconOnly={hasIconOnly}
+      >
+        {!hasIconOnly && <>{children}</>}
+      </CustomButton>
+    );
+  },
+);
 
-  return (
-    <ContainedButton
-      {...props}
-      kind="contained"
-      variant="contained"
-      ref={ref}
-      hasIconOnly={hasIconOnly}
-    />
-  );
-
-  /**
-   * There is an issue between React 18, Mui's OverridableComponent type and the
-   * type coercion to temporarily fix it.
-   * https://github.com/lunit-io/design-system/pull/143#issuecomment-1831127232
-   */
-}) as ButtonType;
-
-const GhostButton = forwardRef<
+const OutlinedButton = forwardRef<
   HTMLButtonElement,
-  GhostButtonProps & { hasIconOnly: boolean }
+  OutlinedButtonProps & { hasIconOnly: boolean }
 >((props, ref) => {
   const {
-    size = "small",
+    size = 'small',
     icon,
     className,
     children,
     startIcon,
     hasIconOnly,
-    variant,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+    variant: _variant,
     ...restProps
   } = props;
 
@@ -58,9 +61,9 @@ const GhostButton = forwardRef<
     <CustomButton
       {...restProps}
       ref={ref}
-      className={`ghost ${className ? className : ""}`}
-      kind="ghost"
-      color={props.color ?? "primary"}
+      className={`outlined ${className ? className : ''}`}
+      kind="outlined"
+      color={props.color ?? 'primary'}
       size={size}
       startIcon={startIcon || icon}
       hasIconOnly={hasIconOnly}
@@ -70,18 +73,19 @@ const GhostButton = forwardRef<
   );
 });
 
-const OutlinedButton = forwardRef<
+const ContainedButton = forwardRef<
   HTMLButtonElement,
-  OutlinedButtonProps & { hasIconOnly: boolean }
+  ContainedButtonProps & { hasIconOnly: boolean }
 >((props, ref) => {
   const {
-    size = "small",
+    size = 'small',
     icon,
     className,
     children,
     startIcon,
     hasIconOnly,
-    variant,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+    variant: _variant,
     ...restProps
   } = props;
 
@@ -89,9 +93,9 @@ const OutlinedButton = forwardRef<
     <CustomButton
       {...restProps}
       ref={ref}
-      className={`outlined ${className ? className : ""}`}
-      kind="outlined"
-      color={props.color ?? "primary"}
+      className={`${props.kind ?? 'contained'} ${className ? className : ''}`}
+      kind={props.kind ?? 'contained'}
+      color={props.color ?? 'primary'}
       size={size}
       startIcon={startIcon || icon}
       hasIconOnly={hasIconOnly}
@@ -101,35 +105,33 @@ const OutlinedButton = forwardRef<
   );
 });
 
-const ContainedButton = forwardRef<
-  HTMLButtonElement,
-  ContainedButtonProps & { hasIconOnly: boolean }
->((props, ref) => {
-  const {
-    size = "small",
-    icon,
-    className,
-    children,
-    startIcon,
-    hasIconOnly,
-    variant,
-    ...restProps
-  } = props;
+const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+  const { kind, variant, icon, children, startIcon } = props;
+  const hasIconOnly = Boolean((startIcon || icon) && !children);
+
+  if (kind === 'outlined' || variant === 'outlined') {
+    return <OutlinedButton {...props} ref={ref} hasIconOnly={hasIconOnly} />;
+  }
+
+  if (kind === 'ghost' || variant === 'text' || variant === 'ghost') {
+    return <GhostButton {...props} ref={ref} hasIconOnly={hasIconOnly} />;
+  }
 
   return (
-    <CustomButton
-      {...restProps}
+    <ContainedButton
+      {...props}
+      kind="contained"
+      variant="contained"
       ref={ref}
-      className={`${props.kind ?? "contained"} ${className ? className : ""}`}
-      kind={props.kind ?? "contained"}
-      color={props.color ?? "primary"}
-      size={size}
-      startIcon={startIcon || icon}
       hasIconOnly={hasIconOnly}
-    >
-      {!hasIconOnly && <>{children}</>}
-    </CustomButton>
+    />
   );
-});
+
+  /**
+   * There is an issue between React 18, Mui's OverridableComponent type and the
+   * type coercion to temporarily fix it.
+   * https://github.com/lunit-io/design-system/pull/143#issuecomment-1831127232
+   */
+}) as ButtonType;
 
 export default Button;

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

@@ -1,47 +1,45 @@
+import type React from 'react';
 import type {
   ButtonProps as MuiButtonProps,
   ButtonTypeMap as MuiButtonTypeMap,
-} from "@mui/material";
-import type { OverridableComponent } from "@mui/material/OverridableComponent";
+} from '@mui/material';
+import type { OverridableComponent } from '@mui/material/OverridableComponent';
 
 /**
  * TODO: Omit 을 사용할 경우 component prop 타입 추론이 안되는 이슈 발생
  * https://github.com/lunit-io/design-system/pull/133#discussion_r1354277785
  * */
-export interface BaseButtonProps extends Omit<MuiButtonProps, "variant"> {
+export interface BaseButtonProps extends Omit<MuiButtonProps, 'variant'> {
   icon?: React.ReactNode;
-  variant?: "contained" | "outlined" | "text" | "ghost";
+  variant?: 'contained' | 'outlined' | 'text' | 'ghost';
 }
 
 export interface ContainedButtonProps extends BaseButtonProps {
-  kind?: "contained";
-  variant?: "contained";
-  color?: "primary" | "secondary" | "error";
+  kind?: 'contained';
+  variant?: 'contained';
+  color?: 'primary' | 'secondary' | 'error';
 }
 
 export interface GhostButtonProps extends BaseButtonProps {
-  kind?: "ghost";
-  variant?: "text" | "ghost";
-  color?: "primary" | "secondary" | "error";
+  kind?: 'ghost';
+  variant?: 'text' | 'ghost';
+  color?: 'primary' | 'secondary' | 'error';
 }
 
 export interface OutlinedButtonProps extends BaseButtonProps {
-  kind?: "outlined";
-  variant?: "outlined";
-  color?: "primary" | "secondary";
+  kind?: 'outlined';
+  variant?: 'outlined';
+  color?: 'primary' | 'secondary';
 }
 
-export type ButtonProps =
-  | ContainedButtonProps
-  | GhostButtonProps
-  | OutlinedButtonProps;
+export type ButtonProps = ContainedButtonProps | GhostButtonProps | OutlinedButtonProps;
 
-export type ButtonTypeMap<
+export interface ButtonTypeMap<
   P = {},
-  D extends React.ElementType = MuiButtonTypeMap["defaultComponent"]
-> = {
+  D extends React.ElementType = MuiButtonTypeMap['defaultComponent'],
+> {
   props: P & ButtonProps;
   defaultComponent: D;
-};
+}
 
 export type ButtonType = OverridableComponent<ButtonTypeMap>;

package/src/components/Button/index.ts

@@ -1 +1 @@
-export { default } from "./Button";
+export { default } from './Button';

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

@@ -1,10 +1,10 @@
-import { OUTLINED_BORDER_WIDTH } from "../const";
+import { OUTLINED_BORDER_WIDTH } from '../const';
 
-import type { ButtonProps } from "../Button.types";
-import { ToggleButtonProps } from "@/components/ToggleButton/ToggleButton.types";
+import type { ButtonProps } from '../Button.types';
+import { ToggleButtonProps } from '@/components/ToggleButton/ToggleButton.types';
 
-type GetButtonPaddingBySizeAndKindParams = Pick<ButtonProps, "kind" | "size"> &
-  Pick<ToggleButtonProps, "selected">;
+type GetButtonPaddingBySizeAndKindParams = Pick<ButtonProps, 'kind' | 'size'> &
+  Pick<ToggleButtonProps, 'selected'>;
 
 /**
  * When kind is outlined,
@@ -16,20 +16,20 @@ export const getButtonPaddingBySizeAndKind = ({
   size,
   selected = false,
 }: GetButtonPaddingBySizeAndKindParams) => {
-  if (size === "small") {
-    return kind === "outlined" && !selected
+  if (size === 'small') {
+    return kind === 'outlined' && !selected
       ? `${4 - OUTLINED_BORDER_WIDTH}px ${8 - OUTLINED_BORDER_WIDTH}px`
-      : "4px 8px";
+      : '4px 8px';
   }
 
-  if (size === "medium") {
-    return kind === "outlined" && !selected
+  if (size === 'medium') {
+    return kind === 'outlined' && !selected
       ? `${8 - OUTLINED_BORDER_WIDTH}px ${12 - OUTLINED_BORDER_WIDTH}px`
-      : "8px 12px";
+      : '8px 12px';
   }
 
   // size === "large"
-  return kind === "outlined" && !selected
+  return kind === 'outlined' && !selected
     ? `${10 - OUTLINED_BORDER_WIDTH}px ${12 - OUTLINED_BORDER_WIDTH}px`
-    : "10px 12px";
+    : '10px 12px';
 };

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

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