@team-monolith/cds 1.74.5 → 1.75.0

package/README.md

@@ -26,15 +26,6 @@
 - React JSX 형태로 export되는 값은 다음 예시와 같이 pascal case로 네이밍됩니다. (예: `ArrowDownCircleFillIcon`)
 - svg 파일 이름이 숫자로 시작하는 경우, 제일 앞에 `i`를 붙입니다. (예: `4k-fill.svg` -> `i4KFillSvg`, `I4KFillIcon`)
 
-## 브랜치 관리
-
-현재 CDS에서는 React 18 기준으로 개발하고 있습니다.
-
-- **main** : React 18
-
-과거 코들 스튜디오 시스템에서의 JL4 과업이 완료되지 않아, 두가지 버전을 동시에 관리했었습니다.
-과거 버전(`v0.x`)은 React 17 기반 [jce-codle-jlext](https://github.com/team-monolith-product/jce-codle-jlext)의 JL3에서 사용했고, 1.0 브랜치(`v1.x`)는 현재 JL4와 [jce-codle-react](https://github.com/team-monolith-product/jce-codle-react)에서 사용중입니다.
-
 ## 개발 및 배포 절차
 
 `npm run storybook` 을 실행하면 스토리북이 실행됩니다. 이곳에서 디버깅을 진행합니다.

package/dist/components/Banner.d.ts

@@ -1,6 +1,14 @@
 import React from "react";
 import { ButtonProps } from "./Button";
 export type BannerColor = "red" | "blue" | "green" | "yellow" | "white";
+export declare const bannerClasses: {
+    readonly icon: "Banner-icon";
+    readonly textContainer: "Banner-textContainer";
+    readonly headline: "Banner-textContainer-headline";
+    readonly content: "Banner-textContainer-content";
+    readonly button: "Banner-button";
+    readonly closeSquareButton: "Banner-closeSquareButton";
+};
 export interface BannerProps {
     className?: string;
     component?: React.ElementType;
@@ -16,8 +24,6 @@ export interface BannerProps {
     buttonLabel?: string;
     /** 컴포넌트 우측 버튼 클릭 시 호출될 콜백 함수 */
     onButtonClick?: () => void;
-    /** 버튼 컴포넌트에 삽입될 ClassName */
-    buttonClassName?: string;
     /** Button에 전달될 Props */
     buttonProps?: Omit<ButtonProps, "className" | "label" | "onClick">;
     /** 컴포넌트 우측에 표기될 닫기 버튼 유무 */

package/dist/components/Banner.js

@@ -17,6 +17,14 @@ import React from "react";
 import { CloseFillIcon } from "../icons";
 import SquareButton from "./SquareButton";
 import Button from "./Button";
+export const bannerClasses = {
+    icon: "Banner-icon",
+    textContainer: "Banner-textContainer",
+    headline: "Banner-textContainer-headline",
+    content: "Banner-textContainer-content",
+    button: "Banner-button",
+    closeSquareButton: "Banner-closeSquareButton",
+};
 const COLOR_PALETTE = (theme, color) => ({
     red: {
         background: theme.color.container.redContainer,
@@ -49,7 +57,7 @@ const COLOR_PALETTE = (theme, color) => ({
  */
 // eslint-disable-next-line react/display-name, @typescript-eslint/no-explicit-any
 const Banner = React.forwardRef((props, ref) => {
-    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 { className, component: Component = "div", headline, content, icon, color, buttonLabel, onButtonClick, buttonProps, close, onClose, fullWidth } = props, other = __rest(props, ["className", "component", "headline", "content", "icon", "color", "buttonLabel", "onButtonClick", "buttonProps", "close", "onClose", "fullWidth"]);
     const theme = useTheme();
     return (_jsxs(Component, Object.assign({}, other, { ref: ref, className: className, css: [
             css `
@@ -67,17 +75,17 @@ const Banner = React.forwardRef((props, ref) => {
                 border-radius: 12px;
                 width: fit-content;
               `,
-        ] }, { children: [icon && (_jsx(IconDiv, Object.assign({ css: css `
+        ] }, { children: [icon && (_jsx(Icon, Object.assign({ className: bannerClasses.icon, css: css `
               align-self: ${headline && content ? "flex-start" : "center"};
               color: ${COLOR_PALETTE(theme, color).headline};
-            ` }, { children: icon }))), _jsxs(TextContainer, { children: [headline && (_jsx(HeadlineDiv, Object.assign({ css: css `
+            ` }, { children: icon }))), _jsxs(TextContainer, Object.assign({ className: bannerClasses.textContainer }, { children: [headline && (_jsx(Headline, Object.assign({ className: bannerClasses.headline, css: css `
                 color: ${COLOR_PALETTE(theme, color).headline};
-              ` }, { children: headline }))), content && (_jsx(ContentDiv, Object.assign({ css: css `
+              ` }, { children: headline }))), content && (_jsx(Content, Object.assign({ className: bannerClasses.content, css: css `
                 color: ${COLOR_PALETTE(theme, color).content};
-              ` }, { children: content })))] }), buttonLabel && (_jsx(Button, Object.assign({ className: buttonClassName, css: !buttonProps &&
+              ` }, { children: content })))] })), buttonLabel && (_jsx(Button, Object.assign({ className: bannerClasses.button, css: !buttonProps &&
                     css `
                 color: ${COLOR_PALETTE(theme, color).content};
-              `, color: "textNeutral", size: "small", label: buttonLabel, onClick: onButtonClick }, buttonProps))), close && (_jsx(SquareButton, { css: css `
+              `, color: "textNeutral", size: "small", label: buttonLabel, onClick: onButtonClick }, buttonProps))), close && (_jsx(SquareButton, { className: bannerClasses.closeSquareButton, css: css `
               > button {
                 color: ${COLOR_PALETTE(theme, color).content};
               }
@@ -85,7 +93,7 @@ const Banner = React.forwardRef((props, ref) => {
                     "aria-label": "닫기",
                 } }))] })));
 });
-const IconDiv = styled.div `
+const Icon = styled.div `
   display: flex;
   align-items: flex-start;
   padding: 12px 0px;
@@ -95,14 +103,14 @@ const IconDiv = styled.div `
     height: 20px;
   }
 `;
-const HeadlineDiv = styled.div(({ theme }) => css `
+const Headline = styled.div(({ theme }) => css `
     font-family: ${theme.fontFamily.ui};
     font-size: 16px;
     font-style: normal;
     font-weight: 700;
     line-height: 20px; /* 125% */
   `);
-const ContentDiv = styled.div(({ theme }) => css `
+const Content = styled.div(({ theme }) => css `
     font-family: ${theme.fontFamily.ui};
     font-size: 16px;
     font-style: normal;

package/package.json

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