@team-monolith/cds 1.24.0 → 1.25.0

package/dist/components/Banner.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-export type BannerColor = "red" | "blue" | "green" | "yellow";
+export type BannerColor = "red" | "blue" | "green" | "yellow" | "white";
 export interface BannerProps {
     className?: string;
     component?: React.ElementType;
@@ -15,6 +15,8 @@ export interface BannerProps {
     buttonLabel?: string;
     /** 컴포넌트 우측 버튼 클릭 시 호출될 콜백 함수 */
     onButtonClick?: () => void;
+    /** 버튼 컴포넌트에 삽입될 ClassName */
+    buttonClassName?: string;
     /** 컴포넌트 우측에 표기될 닫기 버튼 유무 */
     close?: boolean;
     /** 닫기 버튼 클릭 시 호출될 콜백 함수 */

package/dist/components/Banner.js

@@ -14,43 +14,50 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { css, useTheme } from "@emotion/react";
 import styled from "@emotion/styled";
 import React from "react";
-import COLOR from "../foundation/color";
 import { CloseFillIcon } from "../icons";
-import { RESET_BUTTON } from "../utils/reset";
 import SquareButton from "./SquareButton";
-const COLOR_TO_STYLE = (theme, color) => ({
-    red: css `
-      background: ${theme.color.container.dangerContainer};
-      color: ${theme.color.container.dangerOnContainer};
-    `,
-    blue: css `
-      background: ${theme.color.container.primaryContainer};
-      color: ${theme.color.container.primaryOnContainer};
-    `,
-    green: css `
-      background: ${theme.color.container.successContainer};
-      color: ${theme.color.container.successOnContainer};
-    `,
-    yellow: css `
-      background: ${theme.color.container.warningContainer};
-      color: ${theme.color.container.warningOnContainer};
-    `,
+import Button from "./Button";
+const COLOR_PALETTE = (theme, color) => ({
+    red: {
+        background: theme.color.container.dangerContainer,
+        headline: theme.color.container.dangerOnContainer,
+        content: theme.color.container.dangerOnContainer,
+    },
+    blue: {
+        background: theme.color.container.primaryContainer,
+        headline: theme.color.container.primaryOnContainer,
+        content: theme.color.container.primaryOnContainer,
+    },
+    green: {
+        background: theme.color.container.successContainer,
+        headline: theme.color.container.successOnContainer,
+        content: theme.color.container.successOnContainer,
+    },
+    yellow: {
+        background: theme.color.container.warningContainer,
+        headline: theme.color.container.warningOnContainer,
+        content: theme.color.container.warningOnContainer,
+    },
+    white: {
+        background: theme.color.background.neutralBase,
+        headline: theme.color.foreground.neutralBaseDisabled,
+        content: theme.color.foreground.neutralBase,
+    },
 })[color];
 /**
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=44-2847&t=bhnL1ombbddld3RQ-0)
  */
 const Banner = React.forwardRef((props, ref) => {
-    const { className, component: Component = "div", headline, content, icon, color, buttonLabel, onButtonClick, close, onClose, fullWidth } = props, other = __rest(props, ["className", "component", "headline", "content", "icon", "color", "buttonLabel", "onButtonClick", "close", "onClose", "fullWidth"]);
+    const { className, component: Component = "div", headline, content, icon, color, buttonLabel, buttonClassName, onButtonClick, close, onClose, fullWidth } = props, other = __rest(props, ["className", "component", "headline", "content", "icon", "color", "buttonLabel", "buttonClassName", "onButtonClick", "close", "onClose", "fullWidth"]);
     const theme = useTheme();
     return (_jsxs(Component, Object.assign({}, other, { ref: ref, className: className, css: [
             css `
             box-sizing: border-box;
             display: flex;
             align-items: center;
-            color: ${COLOR.white};
             line-height: 125%;
+            background: ${COLOR_PALETTE(theme, color).background};
           `,
-            COLOR_TO_STYLE(theme, color),
             fullWidth
                 ? css `
                 width: 100%;
@@ -59,10 +66,17 @@ const Banner = React.forwardRef((props, ref) => {
                 border-radius: 12px;
                 width: fit-content;
               `,
-        ] }, { children: [icon && _jsx(IconDiv, { children: icon }), _jsxs(TextContainer, { children: [headline && _jsx(HeadlineDiv, { children: headline }), content && _jsx(ContentDiv, { children: content })] }), buttonLabel && (_jsx(BannerButton, Object.assign({ type: "button", onClick: onButtonClick }, { children: buttonLabel }))), close && (_jsx(SquareButton, { css: css `
-              > button,
-              > button:hover {
-                color: currentColor;
+        ] }, { children: [icon && (_jsx(IconDiv, Object.assign({ css: css `
+              color: ${COLOR_PALETTE(theme, color).headline};
+            ` }, { children: icon }))), _jsxs(TextContainer, { children: [headline && (_jsx(HeadlineDiv, Object.assign({ css: css `
+                color: ${COLOR_PALETTE(theme, color).headline};
+              ` }, { children: headline }))), content && (_jsx(ContentDiv, Object.assign({ css: css `
+                color: ${COLOR_PALETTE(theme, color).content};
+              ` }, { children: content })))] }), buttonLabel && (_jsx(Button, { className: buttonClassName, css: css `
+              color: ${COLOR_PALETTE(theme, color).content};
+            `, color: "textNeutral", size: "small", label: buttonLabel, onClick: onButtonClick })), close && (_jsx(SquareButton, { css: css `
+              > button {
+                color: ${COLOR_PALETTE(theme, color).content};
               }
             `, color: "icon", size: "medium", icon: _jsx(CloseFillIcon, {}), onClick: onClose }))] })));
 });
@@ -94,13 +108,4 @@ const TextContainer = styled.div `
   padding: 16px;
   gap: 4px;
 `;
-const BannerButton = styled.button `
-  ${RESET_BUTTON}
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 10px 12px;
-  cursor: pointer;
-  color: currentColor;
-`;
 export default Banner;

package/dist/components/Button.d.ts

@@ -17,6 +17,8 @@ export interface ButtonOwnProps<RootComponentType extends React.ElementType> {
     endIcon?: React.ReactNode;
     /** 컴포넌트 내 표기될 문자열 */
     label: React.ReactNode;
+    /** 버튼 텍스트 굵음 여부 */
+    bold?: boolean;
     /** 전체 너비 유무 */
     fullWidth?: boolean;
 }

package/dist/components/Button.js

@@ -201,7 +201,7 @@ const SIZE_TO_LABEL_STYLE = {
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=20-173&t=cXcCv3QijbX7MkoC-0)
  */
 const Button = React.forwardRef(function Button(props, ref) {
-    const { className, component: Component = "button", disabled, color, size, startIcon, endIcon, label, fullWidth } = props, other = __rest(props, ["className", "component", "disabled", "color", "size", "startIcon", "endIcon", "label", "fullWidth"]);
+    const { className, component: Component = "button", disabled, color, size, startIcon, endIcon, label, fullWidth, bold = false } = props, other = __rest(props, ["className", "component", "disabled", "color", "size", "startIcon", "endIcon", "label", "fullWidth", "bold"]);
     const theme = useTheme();
     return (_jsxs(Component, Object.assign({ type: "button" }, other, { className: className, ref: ref, css: [
             css `
@@ -229,10 +229,10 @@ const Button = React.forwardRef(function Button(props, ref) {
         `,
             COLOR_TO_BUTTON_STYLE(theme, color, Boolean(disabled)),
             SIZE_TO_BUTTON_STYLE[size],
-        ], disabled: disabled }, { children: [startIcon, _jsx(Label, Object.assign({ size: size }, { children: label })), endIcon] })));
+        ], disabled: disabled }, { children: [startIcon, _jsx(Label, Object.assign({ size: size, bold: bold }, { children: label })), endIcon] })));
 });
 const Label = styled.span `
-  font-weight: 400;
+  font-weight: ${({ bold }) => (bold ? 700 : 400)};
   white-space: nowrap;
   ${({ size }) => SIZE_TO_LABEL_STYLE[size]}
 `;

package/dist/components/SwitchButton.d.ts

@@ -0,0 +1,33 @@
+import { PolymorphicProps } from "@mui/base";
+import React from "react";
+export type SwitchButtonColor = "grey" | "white" | "none";
+export type SwitchButtonSize = "medium" | "xsmall";
+export interface SwitchButtonOwnProps<RootComponentType extends React.ElementType> {
+    className?: string;
+    component?: RootComponentType;
+    /** 스위치 버튼 색상 */
+    color: SwitchButtonColor;
+    /** 스위치 버튼 크기 */
+    size: SwitchButtonSize;
+    /** on/off status를 나타냅니다. */
+    isOn: boolean;
+    /** on 일때의 아이콘 */
+    onIcon: React.ReactNode;
+    /** off 일때의 아이콘 */
+    offIcon: React.ReactNode;
+    /** 아이콘 오른쪽에 나타낼 부분. 전달하지 않으면 나타나지 않습니다. */
+    content?: React.ReactNode;
+    /** 버튼 클릭시 실행될 콜백 */
+    onClick: () => void;
+}
+export type SwitchButtonProps<RootComponentType extends React.ElementType = SwitchButtonTypeMap["defaultComponent"]> = PolymorphicProps<SwitchButtonTypeMap<RootComponentType>, RootComponentType>;
+export interface SwitchButtonTypeMap<RootComponentType extends React.ElementType = "button"> {
+    props: SwitchButtonOwnProps<RootComponentType>;
+    defaultComponent: RootComponentType;
+}
+type SwitchButtonComponent = <RootComponentType extends React.ElementType = "button">(props: SwitchButtonProps<RootComponentType>) => React.ReactElement | null;
+/**
+ * [피그마](https://www.figma.com/file/CxpgZcJFoRPWEZyx5RC0tq/Framework-System?node-id=766%3A11274&mode=dev)
+ */
+declare const SwitchButton: SwitchButtonComponent;
+export default SwitchButton;

package/dist/components/SwitchButton.js

@@ -0,0 +1,153 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css, useTheme } from "@emotion/react";
+import { HOVER } from "../utils/hover";
+import React from "react";
+import styled from "@emotion/styled";
+const COLOR_TO_SWITCH_BUTTON_STYLE = (theme, color, isOn) => ({
+    grey: css `
+      ${isOn
+        ? css `
+            background: ${theme.color.background.neutralAltActive};
+            span {
+              opacity: 1;
+              font-weight: 700;
+            }
+            svg {
+              opacity: 1;
+            }
+          `
+        : css `
+            background: ${theme.color.background.neutralAlt};
+            span,
+            svg {
+              opacity: 0.6;
+            }
+            ${HOVER(css `
+              span,
+              svg {
+                opacity: 1;
+              }
+            `)}
+          `}
+    `,
+    white: css `
+      ${isOn
+        ? css `
+            background: ${theme.color.background.neutralAlt};
+            span {
+              opacity: 1;
+              font-weight: 700;
+            }
+            svg {
+              opacity: 1;
+            }
+          `
+        : css `
+            background: ${theme.color.background.neutralBase};
+            span,
+            svg {
+              opacity: 0.6;
+            }
+            ${HOVER(css `
+              span,
+              svg {
+                opacity: 1;
+              }
+            `)}
+          `}
+    `,
+    none: css `
+      ${isOn
+        ? css `
+            background: ${theme.color.background.neutralAlt};
+            span {
+              opacity: 1;
+              font-weight: 700;
+            }
+            svg {
+              opacity: 1;
+            }
+          `
+        : css `
+            background: none;
+            span,
+            svg {
+              opacity: 0.6;
+            }
+            ${HOVER(css `
+              span,
+              svg {
+                opacity: 1;
+              }
+            `)}
+          `}
+    `,
+})[color];
+const SIZE_TO_SWITCH_BUTTON_STYLE = (size) => ({
+    medium: css `
+      padding: 8px 12px;
+      gap: 8px;
+      height: 40px;
+      svg {
+        width: 24px;
+        height: 24px;
+      }
+      span {
+        font-size: 16px;
+        line-height: 20px;
+      }
+    `,
+    xsmall: css `
+      padding: 4px 6px;
+      gap: 4px;
+      height: 24px;
+      svg {
+        width: 16px;
+        height: 16px;
+      }
+      span {
+        font-size: 12px;
+        line-height: 16px;
+      }
+    `,
+})[size];
+/**
+ * [피그마](https://www.figma.com/file/CxpgZcJFoRPWEZyx5RC0tq/Framework-System?node-id=766%3A11274&mode=dev)
+ */
+const SwitchButton = React.forwardRef(function SwitchButton(props, ref) {
+    const { className, component: Component = "button", color, size, isOn, onIcon, offIcon, content, onClick } = props, other = __rest(props, ["className", "component", "color", "size", "isOn", "onIcon", "offIcon", "content", "onClick"]);
+    const theme = useTheme();
+    return (_jsxs(Component, Object.assign({ type: "button" }, other, { className: className, ref: ref, css: [
+            css `
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: fit-content;
+            cursor: pointer;
+            border: none;
+            border-radius: 99px;
+            text-decoration: none;
+          `,
+            COLOR_TO_SWITCH_BUTTON_STYLE(theme, color, isOn),
+            SIZE_TO_SWITCH_BUTTON_STYLE(size),
+        ], onClick: onClick }, { children: [isOn ? onIcon : offIcon, content && _jsx(Content, { children: content })] })));
+});
+const Content = styled.span(({ theme }) => css `
+    color: ${theme.color.foreground.neutralBase};
+    /* Default/Label/16px-Md */
+    font-family: ${theme.fontFamily.ui};
+    font-weight: 500;
+  `);
+export default SwitchButton;

package/dist/icons/Custom.d.ts

@@ -19,12 +19,10 @@ export declare const CustomSymbolIcon: React.ForwardRefExoticComponent<{
 export declare const customGoogleSvg: string;
 export declare const CustomGoogleIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
-    color?: string | undefined;
 } & React.RefAttributes<any>>;
 export declare const customWhaleSvg: string;
 export declare const CustomWhaleIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
-    color?: string | undefined;
 } & React.RefAttributes<any>>;
 export declare const customJudgeColorSvg: string;
 export declare const CustomJudgeColorIcon: React.ForwardRefExoticComponent<{
@@ -82,6 +80,20 @@ export declare const customProSvg: string;
 export declare const CustomProIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
 } & React.RefAttributes<any>>;
+export declare const customMasterSvg: string;
+export declare const CustomMasterIcon: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+} & React.RefAttributes<any>>;
+export declare const customGrantSvg: string;
+export declare const CustomGrantIcon: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+    color?: string | undefined;
+} & React.RefAttributes<any>>;
+export declare const customGrantAltSvg: string;
+export declare const CustomGrantAltIcon: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+    color?: string | undefined;
+} & React.RefAttributes<any>>;
 export declare const customQuizSvg: string;
 export declare const CustomQuizIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
@@ -154,3 +166,57 @@ export declare const customEmbeddedColorSvg: string;
 export declare const CustomEmbeddedColorIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
 } & React.RefAttributes<any>>;
+export declare const customEmoHeartSvg: string;
+export declare const CustomEmoHeartIcon: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+    color?: string | undefined;
+} & React.RefAttributes<any>>;
+export declare const customEmoHeartColorSvg: string;
+export declare const CustomEmoHeartColorIcon: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+} & React.RefAttributes<any>>;
+export declare const customEmoHundredSvg: string;
+export declare const CustomEmoHundredIcon: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+    color?: string | undefined;
+} & React.RefAttributes<any>>;
+export declare const customEmoHundredColorSvg: string;
+export declare const CustomEmoHundredColorIcon: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+} & React.RefAttributes<any>>;
+export declare const customEmoStarsSvg: string;
+export declare const CustomEmoStarsIcon: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+    color?: string | undefined;
+} & React.RefAttributes<any>>;
+export declare const customEmoStarsColorSvg: string;
+export declare const CustomEmoStarsColorIcon: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+} & React.RefAttributes<any>>;
+export declare const customEmoThumbupSvg: string;
+export declare const CustomEmoThumbupIcon: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+    color?: string | undefined;
+} & React.RefAttributes<any>>;
+export declare const customEmoThumbupColorSvg: string;
+export declare const CustomEmoThumbupColorIcon: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+} & React.RefAttributes<any>>;
+export declare const customEmoClapSvg: string;
+export declare const CustomEmoClapIcon: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+    color?: string | undefined;
+} & React.RefAttributes<any>>;
+export declare const customEmoClapColorSvg: string;
+export declare const CustomEmoClapColorIcon: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+} & React.RefAttributes<any>>;
+export declare const customBoardSvg: string;
+export declare const CustomBoardIcon: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+    color?: string | undefined;
+} & React.RefAttributes<any>>;
+export declare const customBoardColorSvg: string;
+export declare const CustomBoardColorIcon: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+} & React.RefAttributes<any>>;