@lunit/design-system 1.0.0-b.3 → 1.0.0-b.4

package/src/components/Button/Button.tsx

@@ -1,19 +1,20 @@
-import React from "react";
+import React, { forwardRef } from "react";
 
 import { CustomButton } from "./Button.styled";
 
 import type { ButtonType, ButtonProps } from "./Button.types";
 
-const Button: ButtonType = (props: ButtonProps) => {
+const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const {
     size = "small",
     color = "primary",
     icon,
     className,
     children,
+    startIcon,
     ...buttonProps
   } = props;
-  const hasIconOnly = Boolean(icon && !children);
+  const hasIconOnly = Boolean((startIcon || icon) && !children);
 
   return (
     <>
@@ -21,11 +22,12 @@ const Button: ButtonType = (props: ButtonProps) => {
       {props.kind === "outlined" ? (
         <CustomButton
           {...buttonProps}
+          ref={ref}
           className={`outlined ${className ? className : ""}`}
           kind="outlined"
           color={props.color ?? "primary"}
           size={size}
-          startIcon={icon}
+          startIcon={startIcon || icon}
           hasIconOnly={hasIconOnly}
         >
           {!hasIconOnly && <>{children}</>}
@@ -33,13 +35,14 @@ const Button: ButtonType = (props: ButtonProps) => {
       ) : (
         <CustomButton
           {...buttonProps}
+          ref={ref}
           className={`${props.kind ?? "contained"} ${
             className ? className : ""
           }`}
           kind={props.kind ?? "contained"}
           color={props.color ?? "primary"}
           size={size}
-          startIcon={icon}
+          startIcon={startIcon || icon}
           hasIconOnly={hasIconOnly}
         >
           {!hasIconOnly && <>{children}</>}
@@ -47,6 +50,11 @@ const Button: ButtonType = (props: ButtonProps) => {
       )}
     </>
   );
-};
+  /**
+   * 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/Toggle/Toggle.styled.ts

@@ -1,10 +1,10 @@
 import { styled, Switch as MuiSwitch, SwitchProps } from "@mui/material";
 interface ToggleProps extends SwitchProps {
-  toggleSize: "medium" | "large";
+  toggleSize: "small" | "large";
 }
 
 const toggleStyles = {
-  medium: {
+  small: {
     root: {
       width: 28,
       height: 18,
@@ -65,7 +65,7 @@ const indeterminateStyles = {
       borderRadius: 2,
     },
   },
-  medium: {
+  small: {
     switchChecked: {
       top: 6,
       left: -4,
@@ -94,7 +94,7 @@ export const CommonToggle = styled(MuiSwitch, {
 
   return {
     ...toggleStyle.root,
-    display: "flex",
+
     padding: 0,
     overflow: "visible",
     backgroundColor: "transparent",

package/src/components/Toggle/Toggle.tsx

@@ -1,18 +1,37 @@
-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 = "medium", 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 toggleSize={size} checked focusRipple={false} disableRipple={disableRipple} {...restProps} />
+    return (
+      <CommonIndeterminateToggle
+        toggleSize={size}
+        checked
+        focusRipple={false}
+        disableRipple={disableRipple}
+        {...restProps}
+      />
+    );
   }
 
-  return  <CommonToggle toggleSize={size} focusRipple={false} disableRipple={disableRipple} {...switchProps}/>
-}
+  return (
+    <CommonToggle
+      toggleSize={size}
+      focusRipple={false}
+      disableRipple={disableRipple}
+      {...switchProps}
+    />
+  );
+};
 
-export default Toggle
+export default Toggle;

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

@@ -1,14 +1,14 @@
-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 medium
+   * @default small
    */
-  size?: 'medium' | 'large'
+  size?: "small" | "large";
   /**
-  * If `true`, the component has consistent 'checked' value and change shape.
-  * @default false
-  */
-  indeterminate?: boolean
+   * If `true`, the component has consistent 'checked' value and change shape.
+   * @default false
+   */
+  indeterminate?: boolean;
 }

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

@@ -2,12 +2,7 @@ import { styled } from "@mui/material/styles";
 import { ToggleButton as MuiToggleButton } from "@mui/material";
 
 import type { ToggleButtonProps } from "../ToggleButton/ToggleButton.types";
-import {
-  commonStyle,
-  sizeStyle,
-  kindStyle,
-  iconStyle,
-} from "../Button/Button.styled";
+import { commonStyle, sizeStyle, kindStyle } from "../Button/Button.styled";
 
 type CustomToggleButtonProps = ToggleButtonProps & { hasIconOnly: boolean };
 
@@ -31,7 +26,6 @@ export const CustomToggleButton = styled(MuiToggleButton, {
     return {
       border: "none",
       ...commonStyle({ lunit_token }),
-      ...iconStyle({ size, hasIconOnly }),
       ...sizeStyle({ size, kind, hasIconOnly, selected, typography }),
       ...kindStyle({ kind, color, lunit_token }),
       ...(selectedColor === "primary" && {
@@ -56,3 +50,17 @@ export const IconAndChildrenWrapper = styled("div")({
   display: "flex",
   alignItems: "center",
 });
+
+export const IconWrapper = styled("div")<{
+  hasIconOnly: boolean;
+  size: string;
+}>(({ hasIconOnly, size }) => ({
+  width: "20px",
+  height: "20px",
+  padding: "1px",
+  marginRight: hasIconOnly ? "0px" : size === "large" ? "8px" : "4px",
+
+  "*:nth-of-type(1)": {
+    fontSize: "18px",
+  },
+}));

package/src/components/ToggleButton/ToggleButton.tsx

@@ -1,89 +1,102 @@
-import React from "react";
+import React, { forwardRef } from "react";
 import {
+  IconWrapper,
   CustomToggleButton,
   IconAndChildrenWrapper,
 } from "./ToggleButton.styled";
 import type { ToggleButtonProps } from "./ToggleButton.types";
 
-const ToggleButton = (props: ToggleButtonProps) => {
-  const {
-    kind = "contained",
-    size = "small",
-    color = "primary",
-    selectedColor = "primary",
-    className = "",
-    icon,
-    selected,
-    children,
-    ...buttonProps
-  } = props;
+const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(
+  (props, ref) => {
+    const {
+      kind = "contained",
+      size = "small",
+      color = "primary",
+      selectedColor = "primary",
+      className = "",
+      icon,
+      selected,
+      children,
+      ...buttonProps
+    } = props;
 
-  const hasIconOnly = Boolean(icon && !children);
-  const excludeToggleGroupClass = className
-    .replace("MuiToggleButtonGroup-grouped", "")
-    .replace("MuiToggleButtonGroup-groupedHorizontal", "");
+    const hasIconOnly = Boolean(icon && !children);
+    const excludeToggleGroupClass = className
+      .replace("MuiToggleButtonGroup-grouped", "")
+      .replace("MuiToggleButtonGroup-groupedHorizontal", "");
 
-  return (
-    <>
-      {kind === "contained" || kind === "ghost" ? (
-        <CustomToggleButton
-          className={`${kind} ${excludeToggleGroupClass}`}
-          selected={selected}
-          kind={kind}
-          color={color}
-          size={size}
-          hasIconOnly={hasIconOnly}
-          selectedColor={selectedColor}
-          disableRipple
-          disableFocusRipple
-          {...buttonProps}
-        >
-          {!hasIconOnly ? (
-            <>
-              {icon ? (
-                <IconAndChildrenWrapper>
-                  {icon}
-                  {children}
-                </IconAndChildrenWrapper>
-              ) : (
-                children
-              )}
-            </>
-          ) : (
-            icon
-          )}
-        </CustomToggleButton>
-      ) : (
-        <CustomToggleButton
-          className={`outlined ${excludeToggleGroupClass}`}
-          selected={selected}
-          kind="outlined"
-          color="primary"
-          size={size}
-          hasIconOnly={hasIconOnly}
-          selectedColor={selectedColor}
-          disableRipple
-          disableFocusRipple
-          {...buttonProps}
-        >
-          {!hasIconOnly ? (
-            <>
-              {icon ? (
-                <IconAndChildrenWrapper>
-                  {icon}
-                  {children}
-                </IconAndChildrenWrapper>
-              ) : (
-                children
-              )}
-            </>
-          ) : (
-            icon
-          )}
-        </CustomToggleButton>
-      )}
-    </>
-  );
-};
+    return (
+      <>
+        {kind === "contained" || kind === "ghost" ? (
+          <CustomToggleButton
+            ref={ref}
+            className={`${kind} ${excludeToggleGroupClass}`}
+            selected={selected}
+            kind={kind}
+            color={color}
+            size={size}
+            hasIconOnly={hasIconOnly}
+            selectedColor={selectedColor}
+            disableRipple
+            disableFocusRipple
+            {...buttonProps}
+          >
+            {!hasIconOnly ? (
+              <>
+                {icon ? (
+                  <IconAndChildrenWrapper>
+                    <IconWrapper size={size} hasIconOnly={hasIconOnly}>
+                      {icon}
+                    </IconWrapper>
+                    {children}
+                  </IconAndChildrenWrapper>
+                ) : (
+                  children
+                )}
+              </>
+            ) : (
+              <IconWrapper size={size} hasIconOnly={hasIconOnly}>
+                {icon}
+              </IconWrapper>
+            )}
+          </CustomToggleButton>
+        ) : (
+          <CustomToggleButton
+            ref={ref}
+            className={`outlined ${excludeToggleGroupClass}`}
+            selected={selected}
+            kind="outlined"
+            color="primary"
+            size={size}
+            hasIconOnly={hasIconOnly}
+            selectedColor={selectedColor}
+            disableRipple
+            disableFocusRipple
+            {...buttonProps}
+          >
+            {!hasIconOnly ? (
+              <>
+                {icon ? (
+                  <IconAndChildrenWrapper>
+                    <IconWrapper size={size} hasIconOnly={hasIconOnly}>
+                      {icon}
+                    </IconWrapper>
+                    {children}
+                  </IconAndChildrenWrapper>
+                ) : (
+                  children
+                )}
+              </>
+            ) : (
+              <IconWrapper size={size} hasIconOnly={hasIconOnly}>
+                {icon}
+              </IconWrapper>
+            )}
+          </CustomToggleButton>
+        )}
+      </>
+    );
+  }
+);
 
 export default ToggleButton;

package/src/components/ToggleButton/ToggleButton.types.ts

@@ -1,20 +1,21 @@
 import type { ToggleButtonProps as MuiToggleButtonProps } from "@mui/material";
 
-interface ToggleButtonBaseProps extends Omit<MuiToggleButtonProps, "variant"> {
+export interface ToggleButtonBaseProps
+  extends Omit<MuiToggleButtonProps, "variant"> {
   selectedColor?: "primary" | "secondary";
   icon?: React.ReactNode;
 }
-interface ContainedToggleButtonProps extends ToggleButtonBaseProps {
+export interface ContainedToggleButtonProps extends ToggleButtonBaseProps {
   kind?: "contained";
   color?: "primary" | "secondary";
 }
 
-interface GhostToggleButtonProps extends ToggleButtonBaseProps {
+export interface GhostToggleButtonProps extends ToggleButtonBaseProps {
   kind?: "ghost";
   color?: "primary" | "secondary";
 }
 
-interface OutlinedToggleButtonProps extends ToggleButtonBaseProps {
+export interface OutlinedToggleButtonProps extends ToggleButtonBaseProps {
   kind?: "outlined";
   color?: "primary";
 }

package/src/foundation/Typography/index.ts

@@ -79,8 +79,8 @@ export const typographyDefaultProps = {
 
 export const createTypographyCssBaseline = () => {
   return {
-    html: {
-      fontFamily,
+    "*, *:before, *:after": {
+      // @font-face: font-feature-settings로 대체 가능하나, 브라우저 지원이 부족함 https://caniuse.com/mdn-css_at-rules_font-face_font-feature-settings
       fontFeatureSettings: `'tnum', 'ss01', 'ss02', 'ss08'`,
     },
     ":root": {

package/src/foundation/Typography/tokens.ts

@@ -13,10 +13,10 @@ const headline = {
   "--headline1-line-height": "68px",
   "--headline2-font-weight": "var(--font-weight-bold)",
   "--headline2-font-size": "38px",
-  "--headline2-line-height": "48px",
+  "--headline2-line-height": "65px",
   "--headline3-font-weight": "var(--font-weight-semibold)",
   "--headline3-font-size": "24px",
-  "--headline3-line-height": "36px",
+  "--headline3-line-height": "57px",
   "--headline4-font-weight": "var(--font-weight-semibold)",
   "--headline4-font-size": "20px",
   "--headline4-line-height": "28px",
@@ -69,61 +69,73 @@ const fontVariants: Record<string, TypographyStyleOptions> = {
     fontWeight: "var(--headline1-font-weight)",
     fontSize: "var(--headline1-font-size)",
     lineHeight: "var(--headline1-line-height)",
+    color: "var(--text_normal)",
   },
   headline2: {
     fontWeight: "var(--headline2-font-weight)",
     fontSize: "var(--headline2-font-size)",
     lineHeight: "var(--headline2-line-height)",
+    color: "var(--text_normal)",
   },
   headline3: {
     fontWeight: "var(--headline3-font-weight)",
     fontSize: "var(--headline3-font-size)",
     lineHeight: "var(--headline3-line-height)",
+    color: "var(--text_normal)",
   },
   headline4: {
     fontWeight: "var(--headline4-font-weight)",
     fontSize: "var(--headline4-font-size)",
     lineHeight: "var(--headline4-line-height)",
+    color: "var(--text_normal)",
   },
   headline5: {
     fontWeight: "var(--headline5-font-weight)",
     fontSize: "var(--headline5-font-size)",
     lineHeight: "var(--headline5-line-height)",
+    color: "var(--text_normal)",
   },
   body1_16_semibold: {
     fontWeight: "var(--body1-16-semibold-font-weight)",
     fontSize: "var(--body1-16-semibold-font-size)",
     lineHeight: "var(--body1-16-semibold-line-height)",
+    color: "var(--text_normal)",
   },
   body1_16_regular: {
     fontWeight: "var(--body1-16-regular-font-weight)",
     fontSize: "var(--body1-16-regular-font-size)",
     lineHeight: "var(--body1-16-regular-line-height)",
+    color: "var(--text_normal)",
   },
   body2_14_bold: {
     fontWeight: "var(--body2-14-bold-font-weight)",
     fontSize: "var(--body2-14-bold-font-size)",
     lineHeight: "var(--body2-14-bold-line-height)",
+    color: "var(--text_normal)",
   },
   body2_14_medium: {
     fontWeight: "var(--body2-14-medium-font-weight)",
     fontSize: "var(--body2-14-medium-font-size)",
     lineHeight: "var(--body2-14-medium-line-height)",
+    color: "var(--text_normal)",
   },
   body2_14_regular: {
     fontWeight: "var(--body2-14-regular-font-weight)",
     fontSize: "var(--body2-14-regular-font-size)",
     lineHeight: "var(--body2-14-regular-line-height)",
+    color: "var(--text_normal)",
   },
   body3_12_semibold: {
     fontWeight: "var(--body3-12-semibold-font-weight)",
     fontSize: "var(--body3-12-semibold-font-size)",
     lineHeight: "var(--body3-12-semibold-line-height)",
+    color: "var(--text_normal)",
   },
   body3_12_regular: {
     fontWeight: "var(--body3-12-regular-font-weight)",
     fontSize: "var(--body3-12-regular-font-size)",
     lineHeight: "var(--body3-12-regular-line-height)",
+    color: "var(--text_normal)",
   },
   overline: {
     fontWeight: "var(--overline-font-weight)",
@@ -131,12 +143,14 @@ const fontVariants: Record<string, TypographyStyleOptions> = {
     lineHeight: "var(--overline-line-height)",
     letterSpacing: "1px",
     textTransform: "uppercase",
+    color: "var(--text_normal)",
   },
   button1: {
     fontWeight: "var(--button1-font-weight)",
     fontSize: "var(--button1-font-size)",
     lineHeight: "var(--button1-line-height)",
     textTransform: "capitalize",
+    color: "var(--text_normal)",
   },
   button2: {
     fontWeight: "var(--button2-font-weight)",
@@ -144,11 +158,13 @@ const fontVariants: Record<string, TypographyStyleOptions> = {
     lineHeight: "var(--button2-line-height)",
     letterSpacing: "0.2px",
     textTransform: "capitalize",
+    color: "var(--text_normal)",
   },
   caption: {
     fontWeight: "var(--caption-font-weight)",
     fontSize: "var(--caption-font-size)",
     lineHeight: "var(--caption-line-height)",
+    color: "var(--text_normal)",
   },
 };
 

package/src/foundation/colors/token/core.ts

@@ -70,7 +70,6 @@ export const tokenCoreColor: TokenCoreColorValue = {
     dark4: "--red_30",
   },
   text_success: {
-    // TODO: sucess -> success 로 바뀌었으니 코드 내 사용되는 부분 확인해서 업데이트. 개발자들에게도 공지할것.
     light1: "--green_40",
     light2: "--green_40",
     dark1: "--green_40",
@@ -127,7 +126,6 @@ export const tokenCoreColor: TokenCoreColorValue = {
     dark4: "--red_30",
   },
   icon_success_02: {
-    // TODO: sucess -> success 로 바뀌었으니 코드 내 사용되는 부분 확인해서 업데이트. 개발자들에게도 공지할것.
     light1: "--green_40",
     light2: "--green_40",
     dark1: "--green_30",

package/src/stories/components/SelectControl/Toggle.stories.tsx

@@ -45,7 +45,7 @@ export default {
     },
   },
   args: {
-    size: "medium",
+    size: "small",
     indeterminate: false,
     disabled: false,
   },
@@ -103,7 +103,7 @@ const Template: StoryFn<typeof Toggle> = (args) => (
     </TableHead>
     <TableBody>
       <TableRow>
-        <TableCell>MEDIUM DEFAULT</TableCell>
+        <TableCell>SMALL DEFAULT</TableCell>
         <TableCell>
           <Toggle {...args} checked />
         </TableCell>
@@ -115,7 +115,7 @@ const Template: StoryFn<typeof Toggle> = (args) => (
         </TableCell>
       </TableRow>
       <TableRow>
-        <TableCell>MEDIUM FOCUS</TableCell>
+        <TableCell>SMALL FOCUS</TableCell>
         <TableCell>
           <Toggle {...args} className="focus-test" checked />
         </TableCell>
@@ -166,15 +166,15 @@ const DisabledTemplate: StoryFn<typeof Toggle> = (args) => (
     </TableHead>
     <TableBody>
       <TableRow>
-        <TableCell>MEDIUM DEFAULT</TableCell>
+        <TableCell>SMALL DEFAULT</TableCell>
         <TableCell>
-          <Toggle {...args} checked />
+          <Toggle {...args} size="small" checked />
         </TableCell>
         <TableCell>
-          <Toggle {...args} indeterminate />
+          <Toggle {...args} size="small" indeterminate />
         </TableCell>
         <TableCell>
-          <Toggle {...args} />
+          <Toggle {...args} size="small" />
         </TableCell>
       </TableRow>
       <TableRow>
@@ -205,7 +205,7 @@ const TemplateWithLabel: StoryFn<typeof Toggle> = (args) => (
     </TableHead>
     <TableBody>
       <TableRow>
-        <TableCell>MEDIUM DEFAULT</TableCell>
+        <TableCell>SMALL DEFAULT</TableCell>
         <TableCell>
           <FormLabel label="Label 1" control={<Toggle {...args} checked />} />
         </TableCell>
@@ -223,7 +223,7 @@ const TemplateWithLabel: StoryFn<typeof Toggle> = (args) => (
         </TableCell>
       </TableRow>
       <TableRow>
-        <TableCell>MEDIUM FOCUS</TableCell>
+        <TableCell>SMALL FOCUS</TableCell>
         <TableCell>
           <FormLabel
             className="focus-test"
@@ -319,7 +319,7 @@ const IndeterminateTemplate: StoryFn<typeof Toggle> = (args) => {
     <Table>
       <TableHead>
         <TableRow>
-          <TableCell>MEDIUM</TableCell>
+          <TableCell>SMALL</TableCell>
           <TableCell>LARGE</TableCell>
         </TableRow>
       </TableHead>