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

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,16 @@ export const IconAndChildrenWrapper = styled("div")({
   display: "flex",
   alignItems: "center",
 });
+
+export const IconWrapper = styled("div")<{
+  hasIconOnly: boolean;
+  size: string;
+}>(({ hasIconOnly, size }) => ({
+  width: "20px",
+  height: "20px",
+  marginRight: hasIconOnly ? "0px" : size === "large" ? "8px" : "4px",
+
+  "*:nth-of-type(1)": {
+    fontSize: "20px",
+  },
+}));

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,13 +79,31 @@ 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": {
       ...cssVariables,
     },
+    ".light1": {
+      color: "var(--text_normal)",
+    },
+    ".light2": {
+      color: "var(--text_normal)",
+    },
+    ".dark1": {
+      color: "var(--text_normal)",
+    },
+    ".dark2": {
+      color: "var(--text_normal)",
+    },
+    ".dark3": {
+      color: "var(--text_normal)",
+    },
+    ".dark4": {
+      color: "var(--text_normal)",
+    },
   };
 };
 

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",

package/src/foundation/colors/index.ts

@@ -172,6 +172,10 @@ const paletteOptions = {
     main: base.green[40], // core.text_success.dark1
   },
   grey: base.greyForMUI,
+  text: {
+    primary: base.grey[5], // core.text_normal.dark1
+    secondary: base.grey[40], // core.text_medium.dark1
+  },
   lunit_global: lunitColors,
   lunit_token: {
     core: {

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/foundation/index.ts

@@ -9,7 +9,7 @@ import { createElevationCssBaseline, elevationOptions } from "./Elevation";
 
 export const foundationCssBaseline: Components<Theme>["MuiCssBaseline"] = {
   styleOverrides: deepmerge(
-    deepmerge(createTypographyCssBaseline(), createColorCssBaseline()),
+    deepmerge(createColorCssBaseline(), createTypographyCssBaseline()),
     createElevationCssBaseline()
   ),
 };

package/src/stories/components/Button/BasicButton.stories.tsx

@@ -50,6 +50,16 @@ export default {
         defaultValue: { summary: "contained" },
       },
     },
+    variant: {
+      control: {
+        type: "radio",
+      },
+      options: ["contained", "outlined", "text", "ghost"],
+      description: "The variant is alias of kind.",
+      table: {
+        defaultValue: { summary: "contained" },
+      },
+    },
     color: {
       control: {
         type: "radio",
@@ -98,6 +108,7 @@ export default {
         "disabled",
         "size",
         "kind",
+        "variant",
         "color",
         "icon",
       ],

package/src/stories/components/Button/IconButton.stories.tsx

@@ -36,6 +36,16 @@ export default {
         defaultValue: { summary: "contained" },
       },
     },
+    variant: {
+      control: {
+        type: "radio",
+      },
+      options: ["contained", "outlined", "text", "ghost"],
+      description: "The variant is alias of kind.",
+      table: {
+        defaultValue: { summary: "contained" },
+      },
+    },
     color: {
       control: {
         type: "radio",
@@ -85,6 +95,7 @@ export default {
         "disabled",
         "size",
         "kind",
+        "variant",
         "color",
       ],
     },