@team-monolith/cds 1.23.0 → 1.24.1

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.23.0",
+  "version": "1.24.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,