@lunit/design-system 2.2.0 → 2.2.3

package/src/components/Toast/Toast.styled.ts

@@ -1,47 +1,47 @@
-import { Alert, styled } from "@mui/material";
-import { getIconColor } from "./Toast.utils";
+import { Alert, styled } from '@mui/material';
+import { getIconColor } from './Toast.utils';
 
 export const StyledToast = styled(Alert)(({ theme, severity }) => {
   return {
     'div[class*="MuiAlert"]': {
-      display: "flex",
-      alignItems: "center",
+      display: 'flex',
+      alignItems: 'center',
     },
-    "&.MuiAlert-root": {
-      padding: "8px 16px 8px 16px",
+    '&.MuiAlert-root': {
+      padding: '8px 16px 8px 16px',
       margin: 0,
       color: theme.palette.lunit_token.core.text_normal,
       backgroundColor: theme.palette.lunit_token.core.bg_03,
-      borderRadius: "8px",
+      borderRadius: '8px',
     },
-    "& .MuiAlert-icon": {
-      height: "36px",
-      marginRight: "16px",
+    '& .MuiAlert-icon': {
+      height: '36px',
+      marginRight: '16px',
       fontSize: 20,
       color: `${getIconColor(theme, severity)}`,
-      "& .MuiSvgIcon-root": {
-        height: "16px",
-        width: "16px",
+      '& .MuiSvgIcon-root': {
+        height: '16px',
+        width: '16px',
       },
     },
-    "& .MuiAlert-message": {
+    '& .MuiAlert-message': {
       // max length of toast message is 400px
-      maxWidth: "400px",
-      minHeight: "28px",
-      padding: "8px 0 8px 0",
+      maxWidth: '400px',
+      minHeight: '28px',
+      padding: '8px 0 8px 0',
       fontWeight: 400,
-      fontSize: "14px",
-      lineHeight: "20px",
-      "& .Toast-message": {
-        display: "block",
+      fontSize: '14px',
+      lineHeight: '20px',
+      '& .Toast-message': {
+        display: 'block',
       },
     },
-    "& .MuiAlert-action": {
-      alignSelf: "flex-start",
-      minHeight: "36px",
-      marginRight: "0px",
+    '& .MuiAlert-action': {
+      alignSelf: 'flex-start',
+      minHeight: '36px',
+      marginRight: '0px',
       padding: 0,
-      "& .MuiSvgIcon-root": {
+      '& .MuiSvgIcon-root': {
         color: theme.palette.lunit_token.core.text_normal,
       },
     },

package/src/components/Toast/Toast.tsx

@@ -1,15 +1,15 @@
-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 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 { Typography } from "@mui/material";
-import React, { forwardRef } from "react";
+import { Typography } from '@mui/material';
+import React, { forwardRef } from 'react';
 
-import Button from "../Button";
-import { StyledToast } from "./Toast.styled";
-import type { ToastProps } from "./Toast.types";
+import Button from '../Button';
+import { StyledToast } from './Toast.styled';
+import type { ToastProps } from './Toast.types';
 
 const MAPPED_ICON = {
   success: <Success variant="filled" />,
@@ -20,15 +20,8 @@ const MAPPED_ICON = {
 
 // this forwardRef is required for using with Snackbar component
 const Toast = forwardRef<HTMLDivElement, ToastProps>((props, ref) => {
-  const {
-    severity = "normal",
-    icon,
-    children,
-    action,
-    onClose,
-    ...rest
-  } = props;
-  const iconConfig = severity === "normal" ? { icon: false } : { severity };
+  const { severity = 'normal', children, action, onClose, ...rest } = props;
+  const iconConfig = severity === 'normal' ? { icon: false } : { severity };
 
   return (
     <StyledToast
@@ -37,14 +30,7 @@ const Toast = forwardRef<HTMLDivElement, ToastProps>((props, ref) => {
       action={
         <>
           {action}
-          {onClose && (
-            <Button
-              icon={<Close />}
-              kind="ghost"
-              size="medium"
-              onClick={onClose}
-            />
-          )}
+          {onClose && <Button icon={<Close />} kind="ghost" size="medium" onClick={onClose} />}
         </>
       }
       {...iconConfig}
@@ -54,7 +40,7 @@ const Toast = forwardRef<HTMLDivElement, ToastProps>((props, ref) => {
         className="Toast-message"
         variant="body2_14_regular"
         sx={{
-          whiteSpace: "pre-line",
+          whiteSpace: 'pre-line',
         }}
       >
         {children}

package/src/components/Toast/Toast.types.ts

@@ -1,14 +1,9 @@
-import { AlertProps as BaseAlertProps } from "@mui/material";
+import { AlertProps as BaseAlertProps } from '@mui/material';
 
 export interface ToastProps
   extends Omit<
     BaseAlertProps,
-    | "variant"
-    | "slots"
-    | "slotProps"
-    | "components"
-    | "componentsProps"
-    | "severity"
+    'variant' | 'slots' | 'slotProps' | 'components' | 'componentsProps' | 'severity'
   > {
-  severity?: "success" | "info" | "warning" | "error" | "normal";
+  severity?: 'success' | 'info' | 'warning' | 'error' | 'normal';
 }

package/src/components/Toast/Toast.utils.ts

@@ -1,15 +1,12 @@
-import type { AlertColor, Theme } from "@mui/material";
+import type { AlertColor, Theme } from '@mui/material';
 
-export const getIconColor = (
-  theme: Theme,
-  severity: AlertColor | undefined
-) => {
+export const getIconColor = (theme: Theme, severity: AlertColor | undefined) => {
   switch (severity) {
-    case "info":
+    case 'info':
       return theme.palette.lunit_token.core.icon_info_02;
-    case "warning":
+    case 'warning':
       return theme.palette.lunit_token.core.icon_warning_02;
-    case "error":
+    case 'error':
       return theme.palette.lunit_token.core.icon_error_02;
     default:
       return theme.palette.lunit_token.core.icon_success_02;

package/src/components/Toast/index.tsx

@@ -1,2 +1,2 @@
-export { default } from "./Toast";
-export type { ToastProps } from "./Toast.types";
+export { default } from './Toast';
+export type { ToastProps } from './Toast.types';

package/src/components/Toggle/Toggle.styled.ts

@@ -1,6 +1,6 @@
-import { styled, Switch as MuiSwitch, SwitchProps } from "@mui/material";
+import { styled, Switch as MuiSwitch, SwitchProps } from '@mui/material';
 interface ToggleProps extends SwitchProps {
-  toggleSize: "small" | "large";
+  toggleSize: 'small' | 'large';
 }
 
 const toggleStyles = {
@@ -16,10 +16,10 @@ const toggleStyles = {
       borderRadius: 12,
     },
     switch: {
-      transition: "all 100ms ease-in-out",
+      transition: 'all 100ms ease-in-out',
     },
     switchChecked: {
-      transform: "translateX(10px)",
+      transform: 'translateX(10px)',
     },
     thumb: {
       width: 14,
@@ -38,10 +38,10 @@ const toggleStyles = {
       borderRadius: 14,
     },
     switch: {
-      transition: "all 150ms ease-in-out",
+      transition: 'all 150ms ease-in-out',
     },
     switchChecked: {
-      transform: "translateX(20px)",
+      transform: 'translateX(20px)',
     },
     thumb: {
       width: 20,
@@ -82,12 +82,11 @@ const indeterminateStyles = {
 };
 
 export const CommonToggle = styled(MuiSwitch, {
-  shouldForwardProp: (props) => props !== "toggleSize",
+  shouldForwardProp: (props) => props !== 'toggleSize',
 })<ToggleProps>(({ theme, toggleSize, disabled }) => {
   const checkedColor = theme.palette.lunit_token.component.selectcontrol_on;
   const uncheckedColor = theme.palette.lunit_token.component.selectcontrol_off;
-  const handlerColor =
-    theme.palette.lunit_token.component.selectcontrol_handler;
+  const handlerColor = theme.palette.lunit_token.component.selectcontrol_handler;
 
   const toggleStyle = toggleStyles[toggleSize];
   const toggleOpacity = disabled ? 0.38 : 1;
@@ -96,70 +95,70 @@ export const CommonToggle = styled(MuiSwitch, {
     ...toggleStyle.root,
 
     padding: 0,
-    overflow: "visible",
-    backgroundColor: "transparent",
+    overflow: 'visible',
+    backgroundColor: 'transparent',
     opacity: toggleOpacity,
-    "& .Mui-focusVisible": {
+    '& .Mui-focusVisible': {
       // clear default focus style
-      boxShadow: "none",
-      background: "transparent",
-      borderColor: "transparent",
-      outline: "none",
-      "& + .MuiSwitch-track::after": {
+      boxShadow: 'none',
+      background: 'transparent',
+      borderColor: 'transparent',
+      outline: 'none',
+      '& + .MuiSwitch-track::after': {
         ...toggleStyle.focus,
         content: '""',
-        position: "absolute",
+        position: 'absolute',
         border: `1px solid ${checkedColor}`,
-        boxSizing: "border-box",
+        boxSizing: 'border-box',
         top: -3, // border 1px + offset 2px
         left: -3, // border 1px + offset 2px
       },
     },
-    "& .MuiSwitch-track": {
+    '& .MuiSwitch-track': {
       opacity: 1,
       borderRadius: 12,
       backgroundColor: uncheckedColor,
     },
-    "& .MuiSwitch-thumb": {
+    '& .MuiSwitch-thumb': {
       ...toggleStyle.thumb,
-      boxShadow: "0px 0px 1px rgba(0, 0, 0, 0.4)",
+      boxShadow: '0px 0px 1px rgba(0, 0, 0, 0.4)',
     },
-    "& .MuiSwitch-switchBase": {
+    '& .MuiSwitch-switchBase': {
       ...toggleStyle.switch,
       padding: 2,
       opacity: 1,
-      "&.Mui-checked": {
+      '&.Mui-checked': {
         ...toggleStyle.switchChecked,
         color: handlerColor,
-        "& + .MuiSwitch-track": {
+        '& + .MuiSwitch-track': {
           opacity: 1,
           backgroundColor: checkedColor,
         },
       },
     },
-    "& .Mui-disabled + .MuiSwitch-track": {
+    '& .Mui-disabled + .MuiSwitch-track': {
       opacity: 1,
     },
   };
 });
 
 export const CommonIndeterminateToggle = styled(CommonToggle, {
-  shouldForwardProp: (props) => props !== "toggleSize",
+  shouldForwardProp: (props) => props !== 'toggleSize',
 })(({ toggleSize }) => {
   const indeterminateStyle = indeterminateStyles[toggleSize];
 
   return {
     padding: 0,
-    cursor: "pointer",
-    "& .MuiSwitch-switchBase.Mui-checked": {
+    cursor: 'pointer',
+    '& .MuiSwitch-switchBase.Mui-checked': {
       ...indeterminateStyle.switchChecked,
-      "& + .MuiSwitch-track": {
+      '& + .MuiSwitch-track': {
         ...indeterminateStyle.track,
       },
     },
-    "& .MuiSwitch-thumb": {
+    '& .MuiSwitch-thumb': {
       ...indeterminateStyle.thumb,
-      boxShadow: "none",
+      boxShadow: 'none',
     },
   };
 });

package/src/components/Toggle/Toggle.tsx

@@ -1,17 +1,11 @@
-import React from "react";
-import { CommonToggle, CommonIndeterminateToggle } from "./Toggle.styled";
-import type { ToggleProps } from "./Toggle.types";
+import React from 'react';
+import { CommonToggle, CommonIndeterminateToggle } from './Toggle.styled';
+import type { ToggleProps } from './Toggle.types';
 
 const Toggle = (props: ToggleProps) => {
-  const {
-    size = "small",
-    indeterminate = false,
-    disableRipple,
-    ...switchProps
-  } = props;
+  const { size = 'small', indeterminate = false, disableRipple, ...switchProps } = props;
 
   if (indeterminate) {
-    const { checked: _, ...restProps } = switchProps;
     // can't use checked props with indeterminate
     return (
       <CommonIndeterminateToggle
@@ -19,7 +13,7 @@ const Toggle = (props: ToggleProps) => {
         checked
         focusRipple={false}
         disableRipple={disableRipple}
-        {...restProps}
+        {...switchProps}
       />
     );
   }

package/src/components/Toggle/Toggle.types.ts

@@ -1,11 +1,11 @@
-import type { SwitchProps } from "@mui/material";
+import type { SwitchProps } from '@mui/material';
 
-export interface ToggleProps extends Omit<SwitchProps, "size"> {
+export interface ToggleProps extends Omit<SwitchProps, 'size'> {
   /**
    * The size of the component.
    * @default small
    */
-  size?: "small" | "large";
+  size?: 'small' | 'large';
   /**
    * If `true`, the component has consistent 'checked' value and change shape.
    * @default false

package/src/components/Toggle/index.ts

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

package/src/components/ToggleButton/ToggleButton.styled.ts

@@ -1,65 +1,63 @@
-import { styled } from "@mui/material/styles";
-import { ToggleButton as MuiToggleButton } from "@mui/material";
+import { styled } from '@mui/material/styles';
+import { ToggleButton as MuiToggleButton } from '@mui/material';
 
-import type { ToggleButtonProps } from "../ToggleButton/ToggleButton.types";
-import { commonStyle, sizeStyle, kindStyle } from "../Button/Button.styled";
+import type { ToggleButtonProps } from '../ToggleButton/ToggleButton.types';
+import { commonStyle, sizeStyle, kindStyle } from '../Button/Button.styled';
 
 type CustomToggleButtonProps = ToggleButtonProps & { hasIconOnly: boolean };
 
 export const CustomToggleButton = styled(MuiToggleButton, {
   shouldForwardProp: (prop: string) => {
-    return !["icon", "kind", "selectedColor", "hasIconOnly"].includes(prop);
+    return !['icon', 'kind', 'selectedColor', 'hasIconOnly'].includes(prop);
   },
-})<CustomToggleButtonProps>(
-  ({
-    theme: {
-      typography,
-      palette: { lunit_token },
-    },
-    kind,
-    size,
-    color,
-    selectedColor,
-    hasIconOnly,
-    selected,
-  }) => {
-    return {
-      border: "none",
-      ...commonStyle({ lunit_token }),
-      ...sizeStyle({ size, kind, hasIconOnly, selected, typography }),
-      ...kindStyle({ kind, color, lunit_token }),
-      ...(selectedColor === "primary" && {
-        "&.Mui-selected, &.Mui-selected:hover": {
-          border: "none",
-          backgroundColor: lunit_token.component.btn_selected_primary_bg,
-          color: lunit_token.component.btn_selected_primary_text,
-        },
-      }),
-      ...(selectedColor === "secondary" && {
-        "&.Mui-selected, &.Mui-selected:hover": {
-          border: "none",
-          backgroundColor: lunit_token.component.btn_secondary_bg,
-          color: lunit_token.component.btn_selected_secondary_text,
-        },
-      }),
-    };
-  }
-);
+})<CustomToggleButtonProps>(({
+  theme: {
+    typography,
+    palette: { lunit_token },
+  },
+  kind,
+  size,
+  color,
+  selectedColor,
+  hasIconOnly,
+  selected,
+}) => {
+  return {
+    border: 'none',
+    ...commonStyle({ lunit_token }),
+    ...sizeStyle({ size, kind, hasIconOnly, selected, typography }),
+    ...kindStyle({ kind, color, lunit_token }),
+    ...(selectedColor === 'primary' && {
+      '&.Mui-selected, &.Mui-selected:hover': {
+        border: 'none',
+        backgroundColor: lunit_token.component.btn_selected_primary_bg,
+        color: lunit_token.component.btn_selected_primary_text,
+      },
+    }),
+    ...(selectedColor === 'secondary' && {
+      '&.Mui-selected, &.Mui-selected:hover': {
+        border: 'none',
+        backgroundColor: lunit_token.component.btn_secondary_bg,
+        color: lunit_token.component.btn_selected_secondary_text,
+      },
+    }),
+  };
+});
 
-export const IconAndChildrenWrapper = styled("div")({
-  display: "flex",
-  alignItems: "center",
+export const IconAndChildrenWrapper = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
 });
 
-export const IconWrapper = styled("div")<{
+export const IconWrapper = styled('div')<{
   hasIconOnly: boolean;
   size: string;
 }>(({ hasIconOnly, size }) => ({
-  width: "20px",
-  height: "20px",
-  marginRight: hasIconOnly ? "0px" : size === "large" ? "8px" : "4px",
+  width: '20px',
+  height: '20px',
+  marginRight: hasIconOnly ? '0px' : size === 'large' ? '8px' : '4px',
 
-  "*:nth-of-type(1)": {
-    fontSize: "20px",
+  '*:nth-of-type(1)': {
+    fontSize: '20px',
   },
 }));