@lunit/design-system 1.0.0 → 2.0.1

package/src/components/Dialog/Dialog.tsx

@@ -0,0 +1,189 @@
+import React, { useEffect } from "react";
+import { createPortal } from "react-dom";
+import { Close } from "@lunit/design-system-icons";
+
+import { DialogAction } from "./components/DialogAction";
+import {
+  StyledBackdrop,
+  StyledDialog,
+  StyledDialogContent,
+  StyledDialogTitle,
+  StyledDialogTitleIconWrapper,
+} from "./Dialog.styled";
+import Button from "../Button";
+import Typography from "../Typography";
+
+import type { SxProps } from "@mui/material/styles";
+import type { TypographyProps } from "@mui/material";
+
+export interface DialogBase {
+  isOpen: boolean;
+  onClose(): void;
+  type?: "passive" | "action"; // default passive
+  nonModal?: boolean; // default false
+  title: string;
+  titleIcon?: React.ReactNode;
+  titleVariant?: TypographyProps["variant"];
+  children: React.ReactNode;
+  actions?: React.ReactNode;
+  enableBackButtonClose?: boolean; // only for passive dialog
+  enableBackdropClose?: boolean;
+  size?: "small" | "medium"; // default "small"
+  sx?: SxProps;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+export interface PassiveDialogType extends DialogBase {
+  type: "passive";
+  actions?: undefined;
+  enableBackButtonClose?: true;
+  enableBackdropClose?: true;
+}
+export interface ActionDialogType extends DialogBase {
+  type: "action";
+  actions: React.ReactNode;
+  enableBackButtonClose?: false;
+  enableBackdropClose?: boolean;
+}
+
+export interface PassiveModalProps extends PassiveDialogType {
+  nonModal?: false;
+}
+export interface ActionModalProps extends ActionDialogType {
+  nonModal?: false;
+}
+export type ModalProps = PassiveModalProps | ActionModalProps;
+
+export interface PassiveNonModalProps extends PassiveDialogType {
+  nonModal?: true;
+}
+export interface ActionNonModalProps extends ActionDialogType {
+  nonModal?: true;
+  enableBackdropClose?: false;
+}
+export type NonModalProps = PassiveNonModalProps | ActionNonModalProps;
+
+export type DialogProps = ModalProps | NonModalProps;
+
+function Dialog(props: DialogProps) {
+  const { isOpen, type, nonModal = false, onClose } = props;
+
+  const isActionModal = type === "action" && !nonModal;
+  const isPassiveModal = type === "passive" && !nonModal;
+
+  function handleBackdropClose(e: React.MouseEvent<HTMLDivElement>) {
+    const isClosable =
+      isPassiveModal || (isActionModal && props.enableBackdropClose);
+
+    if (!isClosable) return;
+    if (e.target !== e.currentTarget) return;
+
+    onClose();
+  }
+
+  useEffect(() => {
+    const isClosable = isOpen && isPassiveModal;
+    if (!isClosable) return;
+
+    function handleEscClose(event: KeyboardEvent) {
+      if (event.key === "Escape") onClose();
+    }
+    function handleBackButtonClose(event: KeyboardEvent) {
+      if (event.key === "Backspace") onClose();
+    }
+
+    document.addEventListener("keydown", handleEscClose);
+    document.addEventListener("keydown", handleBackButtonClose);
+
+    return () => {
+      document.removeEventListener("keydown", handleEscClose);
+      document.removeEventListener("keydown", handleBackButtonClose);
+    };
+  }, [isOpen, isPassiveModal, onClose]);
+
+  if (!isOpen) return null;
+  return createPortal(
+    nonModal ? (
+      <DialogBase dialogProps={{ ...props }} />
+    ) : (
+      <StyledBackdrop
+        onClick={handleBackdropClose}
+        data-testid="dialog-backdrop"
+      >
+        <DialogBase dialogProps={{ ...props }} />
+      </StyledBackdrop>
+    ),
+
+    document.body
+  );
+}
+
+function DialogBase({ dialogProps }: { dialogProps: DialogBase }) {
+  const {
+    nonModal = false,
+    onClose,
+    title,
+    titleIcon,
+    titleVariant = "headline5",
+    children,
+    actions,
+    type,
+    size = "small",
+    sx,
+    style,
+    className,
+  } = dialogProps;
+
+  return (
+    <StyledDialog
+      role="dialog"
+      aria-labelledby="dialog-title"
+      size={size}
+      nonModal={nonModal}
+      type={type}
+      sx={{
+        ...sx,
+      }}
+      style={style}
+      className={`dialog elevation2 ${className ?? ""}`}
+    >
+      <StyledDialogTitle id="dialog-title" className="dialog-title-wrapper">
+        {titleIcon && (
+          <StyledDialogTitleIconWrapper className="dialog-title-icon">
+            {titleIcon}
+          </StyledDialogTitleIconWrapper>
+        )}
+        <Typography
+          component="h2"
+          id="dialog-title-text"
+          variant={titleVariant}
+        >
+          {title}
+        </Typography>
+        {type === "passive" && (
+          <Button
+            id="dialog-title-close-button"
+            data-testid="dialog-title-close-button"
+            kind="ghost"
+            color="secondary"
+            icon={<Close />}
+            onClick={onClose}
+            sx={{
+              marginRight: 0,
+              marginLeft: "auto",
+            }}
+          />
+        )}
+      </StyledDialogTitle>
+      <StyledDialogContent id="dialog-content">{children}</StyledDialogContent>
+      {type === "action" && actions !== null ? (
+        // `actions !== null` is used to not render DialogAction when actions is undefined
+        // There was a case when actions is undefined, but DialogAction is rendered with null children
+        <DialogAction>{actions}</DialogAction>
+      ) : null}
+    </StyledDialog>
+  );
+}
+
+export default Dialog;

package/src/components/Dialog/components/DialogAction.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { styled } from "@mui/material/styles";
+
+interface DialogActionProps {
+  children: React.ReactNode;
+  justifyContent?: React.CSSProperties["justifyContent"];
+  sx?: React.CSSProperties;
+}
+
+const StyledDialogActions = styled("div")({
+  display: "flex",
+  flex: "0 0 auto",
+  alignItems: "center",
+  justifyContent: "flex-end",
+  gap: 12,
+});
+
+export function DialogAction(props: DialogActionProps) {
+  const { children, justifyContent, sx } = props;
+
+  return (
+    <StyledDialogActions
+      id="dialog-action"
+      data-testid="dialog-action"
+      className="dialog-action"
+      sx={{
+        justifyContent,
+        ...sx,
+      }}
+    >
+      {children}
+    </StyledDialogActions>
+  );
+}
+
+export default DialogAction;

package/src/components/Dialog/index.ts

@@ -0,0 +1,14 @@
+export { default } from "./Dialog";
+
+export type {
+  DialogBase,
+  PassiveDialogType,
+  ActionDialogType,
+  PassiveModalProps,
+  ActionModalProps,
+  PassiveNonModalProps,
+  ActionNonModalProps,
+  ModalProps,
+  NonModalProps,
+  DialogProps,
+} from "./Dialog";

package/src/components/Radio/Radio.tsx

@@ -13,36 +13,48 @@ const CustomRadio = styled(MuiRadio)(({ theme }) => ({
     display: "block",
     width: 24,
     height: 24,
-    backgroundColor: theme.palette.lunit_token.core.focused,
-    maskImage:
-      "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath" +
-      " fill-rule='evenodd' clip-rule='evenodd' d='M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 " +
-      "5.37258 0 12C0 18.6274 5.37258 24 12 24Z' /%3E%3C/svg%3E\")",
+    borderRadius: "50%",
+    border: `1px solid ${theme.palette.lunit_token.core.focused}`,
   },
 }));
 
-const iconSize = {
-  width: 20,
-  height: 20,
+const DefaultIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5ZM10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1C5.02944 1 1 5.02944 1 10C1 14.9706 5.02944 19 10 19Z"
+        fill="#99999B"
+      />
+    </svg>
+  );
 };
 
-const DefaultIcon = styled("span")(({ theme }) => ({
-  ...iconSize,
-  backgroundColor: theme.palette.lunit_token.component.selectcontrol_off,
-  maskImage:
-    "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath" +
-    " fill-rule='evenodd' clip-rule='evenodd' d='M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 " +
-    "10 17.5ZM10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1C5.02944 1 1 5.02944 1 10C1 14.9706 5.02944 19 10 19Z' /%3E%3C/svg%3E\")",
-}));
-
-const CheckedIcon = styled("span")(({ theme }) => ({
-  ...iconSize,
-  backgroundColor: theme.palette.lunit_token.component.selectcontrol_on,
-  maskImage:
-    "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath" +
-    " fill-rule='evenodd' clip-rule='evenodd' d='M10 15C12.7614 15 15 12.7614 15 10C15 7.23858 12.7614 5 10 5C7.23858 5 5" +
-    " 7.23858 5 10C5 12.7614 7.23858 15 10 15ZM10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1C5.02944 1 1 5.02944 1 10C1 14.9706 5.02944 19 10 19Z' /%3E%3C/svg%3E\")",
-}));
+const CheckedIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M10 15C12.7614 15 15 12.7614 15 10C15 7.23858 12.7614 5 10 5C7.23858 5 5 7.23858 5 10C5 12.7614 7.23858 15 10 15ZM10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1C5.02944 1 1 5.02944 1 10C1 14.9706 5.02944 19 10 19Z"
+        fill="#00C9EA"
+      />
+    </svg>
+  );
+};
 
 const Radio = (props: RadioProps) => {
   return (

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

@@ -38,7 +38,7 @@ export const CustomToggleButton = styled(MuiToggleButton, {
       ...(selectedColor === "secondary" && {
         "&.Mui-selected, &.Mui-selected:hover": {
           border: "none",
-          backgroundColor: lunit_token.component.btn_selected_secondary_bg,
+          backgroundColor: lunit_token.component.btn_secondary_bg,
           color: lunit_token.component.btn_selected_secondary_text,
         },
       }),

package/src/foundation/Elevation/index.ts

@@ -24,7 +24,7 @@ export const elevationOptions = {
 export const createElevationCssBaseline = () => {
   return {
     // :root에 모든 theme이 정의되어 있지 않으므로 surface*에서 찾아야 함
-    ".light1, .light2, .dark1, .dark2, .dark3, .dark4": {
+    ".light1, .light2, .dark1, .dark2": {
       ...createCSSVars(shadows),
       ...createCSSVars(elevations),
       // `--elevation-shadow`가 정의되지 않아도 `box-shadow: var(--elevation-shadow)` 구문을 해석하려면 필요함

package/src/foundation/Typography/index.ts

@@ -98,12 +98,6 @@ export const createTypographyCssBaseline = () => {
     ".dark2": {
       color: "var(--text_normal)",
     },
-    ".dark3": {
-      color: "var(--text_normal)",
-    },
-    ".dark4": {
-      color: "var(--text_normal)",
-    },
   };
 };
 

package/src/foundation/Typography/tokens.ts

@@ -16,7 +16,7 @@ const headline = {
   "--headline2-line-height": "65px",
   "--headline3-font-weight": "var(--font-weight-semibold)",
   "--headline3-font-size": "24px",
-  "--headline3-line-height": "57px",
+  "--headline3-line-height": "29px",
   "--headline4-font-weight": "var(--font-weight-semibold)",
   "--headline4-font-size": "20px",
   "--headline4-line-height": "28px",

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

@@ -3,7 +3,8 @@ export const grey = {
   5: "#FAFAFB",
   10: "#F1F1F4",
   15: "#DFDFE2",
-  20: "#C6C6C8",
+  20: "#CFCFD1",
+  25: "#C0C0C2",
   30: "#AFAFB1",
   40: "#99999B",
   50: "#747477",
@@ -23,6 +24,7 @@ export const greyText = {
   10: grey[95],
   15: grey[95],
   20: grey[95],
+  25: grey[95],
   30: grey[95],
   40: grey[95],
   50: grey[5],

package/src/foundation/colors/index.ts

@@ -115,12 +115,6 @@ export const createColorCssBaseline = () => {
     ".dark2": {
       ...createTokenColorVariables("dark2"),
     },
-    ".dark3": {
-      ...createTokenColorVariables("dark3"),
-    },
-    ".dark4": {
-      ...createTokenColorVariables("dark4"),
-    },
   };
 };
 
@@ -182,6 +176,7 @@ const paletteOptions = {
       bg_01: "var(--bg_01)",
       bg_02: "var(--bg_02)",
       bg_03: "var(--bg_03)",
+      layer_01: "var(--layer_01)",
       text_primary: "var(--text_primary)",
       text_normal: "var(--text_normal)",
       text_medium: "var(--text_medium)",
@@ -204,6 +199,8 @@ const paletteOptions = {
       shadow_02: "var(--shadow_02)",
       shadow_03: "var(--shadow_03)",
       shadow_04: "var(--shadow_04)",
+      border_light: "var(--border_light)",
+      border_medium: "var(--border_medium)",
     },
     component: {
       btn_primary_bg: "var(--btn_primary_bg)",
@@ -219,6 +216,8 @@ const paletteOptions = {
       btn_selected_primary_text: "var(--btn_selected_primary_text)",
       btn_selected_secondary_bg: "var(--btn_selected_secondary_bg)",
       btn_selected_secondary_text: "var(--btn_selected_secondary_text)",
+      btn_selected_tertiary_bg: "var(--btn_selected_tertiary_bg)",
+      btn_selected_tertiary_text: "var(--btn_selected_tertiary_text)",
       selectcontrol_on: "var(--selectcontrol_on)",
       selectcontrol_off: "var(--selectcontrol_off)",
       selectcontrol_handler: "var(--selectcontrol_handler)",