@team-monolith/cds 1.66.0 → 1.67.0

package/dist/components/Banner.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { ButtonProps } from "./Button";
 export type BannerColor = "red" | "blue" | "green" | "yellow" | "white";
 export interface BannerProps {
     className?: string;
@@ -17,6 +18,8 @@ export interface BannerProps {
     onButtonClick?: () => void;
     /** 버튼 컴포넌트에 삽입될 ClassName */
     buttonClassName?: string;
+    /** Button에 전달될 Props */
+    buttonProps?: Omit<ButtonProps, "className" | "label" | "onClick">;
     /** 컴포넌트 우측에 표기될 닫기 버튼 유무 */
     close?: boolean;
     /** 닫기 버튼 클릭 시 호출될 콜백 함수 */

package/dist/components/Banner.js

@@ -48,7 +48,7 @@ const COLOR_PALETTE = (theme, 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, buttonClassName, onButtonClick, close, onClose, fullWidth } = props, other = __rest(props, ["className", "component", "headline", "content", "icon", "color", "buttonLabel", "buttonClassName", "onButtonClick", "close", "onClose", "fullWidth"]);
+    const { className, component: Component = "div", headline, content, icon, color, buttonLabel, buttonClassName, onButtonClick, buttonProps, close, onClose, fullWidth } = props, other = __rest(props, ["className", "component", "headline", "content", "icon", "color", "buttonLabel", "buttonClassName", "onButtonClick", "buttonProps", "close", "onClose", "fullWidth"]);
     const theme = useTheme();
     return (_jsxs(Component, Object.assign({}, other, { ref: ref, className: className, css: [
             css `
@@ -73,9 +73,9 @@ const Banner = React.forwardRef((props, ref) => {
                 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 `
+              ` }, { children: content })))] }), buttonLabel && (_jsx(Button, Object.assign({ className: buttonClassName, css: css `
               color: ${COLOR_PALETTE(theme, color).content};
-            `, color: "textNeutral", size: "small", label: buttonLabel, onClick: onButtonClick })), close && (_jsx(SquareButton, { css: css `
+            `, color: "textNeutral", size: "small", label: buttonLabel, onClick: onButtonClick }, buttonProps))), close && (_jsx(SquareButton, { css: css `
               > button {
                 color: ${COLOR_PALETTE(theme, color).content};
               }

package/dist/components/Book/Book.d.ts

@@ -1,17 +1,27 @@
 import React from "react";
 export interface BookProps {
     className?: string;
+    /** 제목 영역 (하단에 노출되는) 텍스트 */
     title?: string;
+    /** subtitle 영역 (상단) 텍스트 */
     subtitle?: string;
+    /** subtitleBold 영역 (상단, subtitle 영역보다 1줄 낮음) 텍스트 */
     subtitleBold?: string;
+    /** 숨김 상태인지 여부 */
     isHidden?: boolean;
+    /** 버튼 영역 (최하단에 노출되는) */
     buttons?: React.ReactNode;
     /** 전달하면 controlled component로 애니메이션을 제어할 수 있다 */
     open?: boolean;
+    /** 커버 hover 시 발생하는 이벤트 */
     onHoverStart?: () => void;
+    /** 커버 hover 종료 시 발생하는 이벤트 */
     onHoverEnd?: () => void;
+    /** 커버 클릭 시 발생하는 이벤트 */
     onCoverClick?: () => void;
+    /** 커버에 노출되는 아이콘 */
     icon?: React.ReactNode;
+    /** 커버 색상 */
     coverColor: string;
 }
 declare const _default: React.ForwardRefExoticComponent<BookProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Book/Book.js

@@ -67,7 +67,7 @@ const CARD_COLOR_PALETTE = (theme) => ({
  *
  * 사유2)
  *   관리/배부 드랍다운 Modal이 Card 위로 그려져 hoverEnd를 유발하기 때문에
- *   특성 상황에서는 hoverEnd가 발생했어도 Card를 열고 있어야 합니다.
+ *   특정 상황에서는 hoverEnd가 발생했어도 Card를 열고 있어야 합니다.
  * @param props
  * @param ref
  * @returns
@@ -76,9 +76,7 @@ function Book(props, ref) {
     const { className, title, subtitle, subtitleBold, coverColor, isHidden = false, buttons, open: controlledOpen, onHoverStart, onHoverEnd, onCoverClick, icon, } = props;
     const theme = useTheme();
     const [open, setOpen] = useState(false);
-    return (_jsxs(Container, Object.assign({ initial: "closed", animate: (controlledOpen !== undefined ? controlledOpen : open)
-            ? "open"
-            : "closed", ref: ref, onHoverStart: () => {
+    return (_jsxs(Container, Object.assign({ initial: "closed", animate: (controlledOpen !== null && controlledOpen !== void 0 ? controlledOpen : open) ? "open" : "closed", ref: ref, onHoverStart: () => {
             setOpen(true);
             onHoverStart === null || onHoverStart === void 0 ? void 0 : onHoverStart();
         }, onHoverEnd: () => {
@@ -97,9 +95,6 @@ function Book(props, ref) {
                 top: 50%;
                 transform: translate(-50%, -50%);
                 opacity: 0.8;
-
-                width: 24px;
-                height: 24px;
               ` })] })), _jsxs(CoverTexts, Object.assign({ variants: buttons ? textMotion : undefined }, { children: [_jsx(Subtitle, { children: subtitle }), _jsx(Subtitle, Object.assign({ css: css `
               font-weight: 800;
             ` }, { children: subtitleBold })), _jsx(CoverTitle, { children: title })] })), _jsx(BookGradient, {}), _jsx(Buttons, Object.assign({ variants: buttonsMotion, onClick: (e) => {

package/package.json

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