pds-dev-kit-web 2.2.8 → 2.2.9

package/dist/src/common/styles/colorSet/UIColor.json

@@ -835,5 +835,6 @@
     "ui_cpnt_modalwithtab_sidetab_hover": "sys_component_base_01",
     "ui_cpnt_modalwithtab_sidetab_pressed": "sys_component_base_04",
     "ui_107": "sys_component_border_white_opacity20",
-    "ui_cpnt_textlabel_sys_white_02": "sys_text_white_02"
+    "ui_cpnt_textlabel_sys_white_02": "sys_text_white_02",
+    "ui_cpnt_headerbar_base_area_transparent": "sys_container_background_04"
 }

package/dist/src/common/styles/colorSet/index.d.ts

@@ -1303,6 +1303,7 @@ declare const colorSet: {
         ui_cpnt_modalwithtab_sidetab_pressed: string;
         ui_107: string;
         ui_cpnt_textlabel_sys_white_02: string;
+        ui_cpnt_headerbar_base_area_transparent: string;
     };
     readonly PaletteColor_Dark: {
         sys_container_background_01: string;

package/dist/src/common/styles/colorSet/ui-type.d.ts

@@ -836,4 +836,5 @@ export interface UITheme {
     ui_cpnt_modalwithtab_sidetab_pressed: string;
     ui_107: string;
     ui_cpnt_textlabel_sys_white_02: string;
+    ui_cpnt_headerbar_base_area_transparent: string;
 }

package/dist/src/mobile/components/MobileHeaderBar/MobileHeaderBar.d.ts

@@ -18,9 +18,11 @@ type Props = {
     iBtn1Type?: 'submit' | 'reset' | 'button';
     iBtn2State?: 'normal' | 'disabled';
     iBtn2Type?: 'submit' | 'reset' | 'button';
+    colorTheme?: ColorTheme;
     onClickLeftBtn?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onClickIBtn1?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onClickIBtn2?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 };
-declare function MobileHeaderBar({ titleType, titleText, captionText, leftBtnMode, displayType, iBtn1IconName, iBtn1IconFillType, iBtn1IconColorKey, iBtn2IconName, iBtn2IconFillType, iBtn2IconColorKey, dividerMode, imageSrc, iBtn1State, iBtn1Type, iBtn2State, iBtn2Type, onClickLeftBtn, onClickIBtn1, onClickIBtn2 }: Props): JSX.Element;
+export type ColorTheme = 'none' | 'transparent_white';
+declare function MobileHeaderBar({ titleType, titleText, captionText, leftBtnMode, displayType, iBtn1IconName, iBtn1IconFillType, iBtn1IconColorKey, iBtn2IconName, iBtn2IconFillType, iBtn2IconColorKey, dividerMode, imageSrc, iBtn1State, iBtn1Type, iBtn2State, iBtn2Type, colorTheme, onClickLeftBtn, onClickIBtn1, onClickIBtn2 }: Props): JSX.Element;
 export default MobileHeaderBar;

package/dist/src/mobile/components/MobileHeaderBar/MobileHeaderBar.js

@@ -23,8 +23,10 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
 var IconButton_1 = require("../IconButton");
 var TextLabel_1 = require("../TextLabel");
+var utils_1 = require("./utils");
 function MobileHeaderBar(_a) {
-    var _b = _a.titleType, titleType = _b === void 0 ? 'text' : _b, titleText = _a.titleText, captionText = _a.captionText, _c = _a.leftBtnMode, leftBtnMode = _c === void 0 ? 'back' : _c, _d = _a.displayType, displayType = _d === void 0 ? 'none' : _d, iBtn1IconName = _a.iBtn1IconName, _e = _a.iBtn1IconFillType, iBtn1IconFillType = _e === void 0 ? 'line' : _e, _f = _a.iBtn1IconColorKey, iBtn1IconColorKey = _f === void 0 ? 'ui_cpnt_button_icon_enabled' : _f, iBtn2IconName = _a.iBtn2IconName, _g = _a.iBtn2IconFillType, iBtn2IconFillType = _g === void 0 ? 'line' : _g, _h = _a.iBtn2IconColorKey, iBtn2IconColorKey = _h === void 0 ? 'ui_cpnt_button_icon_enabled' : _h, _j = _a.dividerMode, dividerMode = _j === void 0 ? 'none' : _j, imageSrc = _a.imageSrc, _k = _a.iBtn1State, iBtn1State = _k === void 0 ? 'normal' : _k, _l = _a.iBtn1Type, iBtn1Type = _l === void 0 ? 'button' : _l, _m = _a.iBtn2State, iBtn2State = _m === void 0 ? 'normal' : _m, _o = _a.iBtn2Type, iBtn2Type = _o === void 0 ? 'button' : _o, onClickLeftBtn = _a.onClickLeftBtn, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2;
+    var _b = _a.titleType, titleType = _b === void 0 ? 'text' : _b, titleText = _a.titleText, captionText = _a.captionText, _c = _a.leftBtnMode, leftBtnMode = _c === void 0 ? 'back' : _c, _d = _a.displayType, displayType = _d === void 0 ? 'none' : _d, iBtn1IconName = _a.iBtn1IconName, _e = _a.iBtn1IconFillType, iBtn1IconFillType = _e === void 0 ? 'line' : _e, iBtn1IconColorKey = _a.iBtn1IconColorKey, iBtn2IconName = _a.iBtn2IconName, _f = _a.iBtn2IconFillType, iBtn2IconFillType = _f === void 0 ? 'line' : _f, iBtn2IconColorKey = _a.iBtn2IconColorKey, _g = _a.dividerMode, dividerMode = _g === void 0 ? 'none' : _g, imageSrc = _a.imageSrc, _h = _a.iBtn1State, iBtn1State = _h === void 0 ? 'normal' : _h, _j = _a.iBtn1Type, iBtn1Type = _j === void 0 ? 'button' : _j, _k = _a.iBtn2State, iBtn2State = _k === void 0 ? 'normal' : _k, _l = _a.iBtn2Type, iBtn2Type = _l === void 0 ? 'button' : _l, _m = _a.colorTheme, colorTheme = _m === void 0 ? 'none' : _m, onClickLeftBtn = _a.onClickLeftBtn, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2;
+    var _o = (0, utils_1.getOptionalColorTheme)(colorTheme), titleColor = _o.titleColor, captionColor = _o.captionColor, iconButtonIconColor = _o.iconButtonIconColor, baseColor = _o.baseColor, dividerColor = _o.dividerColor;
     var handleClickLeftBtn = function (e) {
         if (onClickLeftBtn) {
             onClickLeftBtn(e);
@@ -57,18 +59,18 @@ function MobileHeaderBar(_a) {
         if (!iconName) {
             return (0, jsx_runtime_1.jsx)("div", {});
         }
-        return ((0, jsx_runtime_1.jsx)(S_LeftButtonBox, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iconName, fillType: "fill", iconFillType: "line", baseSize: "large", iconSize: 24, shapeType: "rectangle", onClick: handleClickLeftBtn, iconColorKey: "ui_cpnt_button_icon_enabled", baseColorKey: "ui_cpnt_button_fill_base_transparent" }) }));
+        return ((0, jsx_runtime_1.jsx)(S_LeftButtonBox, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iconName, fillType: "fill", iconFillType: "line", baseSize: "large", iconSize: 24, shapeType: "rectangle", onClick: handleClickLeftBtn, iconColorKey: iconButtonIconColor, baseColorKey: "ui_cpnt_button_fill_base_transparent" }) }));
     };
     var title = function () {
         switch (titleType) {
             case 'text': {
                 if (captionText) {
-                    return ((0, jsx_runtime_1.jsxs)(S_CaptionTextBox, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "height" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "body2Bold", singleLineMode: "use", textAlign: "center", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "height" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, colorTheme: "sysTextTertiary", styleTheme: "caption2Regular", singleLineMode: "use", textAlign: "center", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 })] }));
+                    return ((0, jsx_runtime_1.jsxs)(S_CaptionTextBox, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "height" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, colorTheme: titleColor, styleTheme: "body2Bold", singleLineMode: "use", textAlign: "center", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "height" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, colorTheme: captionColor, styleTheme: "caption2Regular", singleLineMode: "use", textAlign: "center", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 })] }));
                 }
-                return ((0, jsx_runtime_1.jsx)(S_TextTypeBox, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "body2Bold", singleLineMode: "use", textAlign: "center", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 }) }));
+                return ((0, jsx_runtime_1.jsx)(S_TextTypeBox, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, colorTheme: titleColor, styleTheme: "body2Bold", singleLineMode: "use", textAlign: "center", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 }) }));
             }
             case 'profile': {
-                return ((0, jsx_runtime_1.jsxs)(S_ProfileWrapper, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: imageSrc, shapeType: "circular", width: 40, ratio: "1_1", scaleType: "cover", borderMode: "use" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "caption1Regular", singleLineMode: "use", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" })] }));
+                return ((0, jsx_runtime_1.jsxs)(S_ProfileWrapper, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: imageSrc, shapeType: "circular", width: 40, ratio: "1_1", scaleType: "cover", borderMode: "use" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, colorTheme: titleColor, styleTheme: "caption1Regular", singleLineMode: "use", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" })] }));
             }
             case 'image': {
                 return ((0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: imageSrc, shapeType: "rectangle", height: 32, scaleType: "contain", width: 160 }));
@@ -79,19 +81,19 @@ function MobileHeaderBar(_a) {
         if (displayType === 'none') {
             return (0, jsx_runtime_1.jsx)("div", {});
         }
-        return ((0, jsx_runtime_1.jsxs)(S_IBtnBox, { children: [displayType === 'ibtn_amount2' && iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconSize: 24, baseSize: "large", iconName: iBtn2IconName, fillType: "fill", onClick: handleClickIBtn2, iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, baseColorKey: "ui_cpnt_button_fill_base_transparent", type: iBtn2Type, state: iBtn2State })), (displayType === 'ibtn_amount1' || displayType === 'ibtn_amount2') && iBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconSize: 24, baseSize: "large", iconName: iBtn1IconName, fillType: "fill", onClick: handleClickIBtn1, iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, baseColorKey: "ui_cpnt_button_fill_base_transparent", type: iBtn1Type, state: iBtn1State }))] }));
+        return ((0, jsx_runtime_1.jsxs)(S_IBtnBox, { children: [displayType === 'ibtn_amount2' && iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconSize: 24, baseSize: "large", iconName: iBtn2IconName, fillType: "fill", onClick: handleClickIBtn2, iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey !== null && iBtn2IconColorKey !== void 0 ? iBtn2IconColorKey : iconButtonIconColor, baseColorKey: "ui_cpnt_button_fill_base_transparent", type: iBtn2Type, state: iBtn2State })), (displayType === 'ibtn_amount1' || displayType === 'ibtn_amount2') && iBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconSize: 24, baseSize: "large", iconName: iBtn1IconName, fillType: "fill", onClick: handleClickIBtn1, iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey !== null && iBtn1IconColorKey !== void 0 ? iBtn1IconColorKey : iconButtonIconColor, baseColorKey: "ui_cpnt_button_fill_base_transparent", type: iBtn1Type, state: iBtn1State }))] }));
     };
-    return ((0, jsx_runtime_1.jsxs)(S_MobileHeaderBar, __assign({ "x-pds-name": "MobileHeaderBar", "x-pds-element-type": "component", "x-pds-device-type": "mobile", hasBorder: dividerMode === 'solid', hasCaptionText: (captionText === null || captionText === void 0 ? void 0 : captionText.toString) ? true : false, expand: titleType === 'profile' }, { children: [(0, jsx_runtime_1.jsxs)(S_ButtonWrapper, { children: [(titleType === 'profile' || captionText) && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), leftIcon()] }), displayType === 'ibtn_amount2' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" }), (0, jsx_runtime_1.jsx)(S_Title, { children: title() }), (0, jsx_runtime_1.jsxs)(S_ButtonWrapper, { children: [(titleType === 'profile' || captionText) && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), iBtn()] })] })));
+    return ((0, jsx_runtime_1.jsxs)(S_MobileHeaderBar, __assign({ "x-pds-name": "MobileHeaderBar", "x-pds-element-type": "component", "x-pds-device-type": "mobile", hasBorder: dividerMode === 'solid', borderColor: dividerColor, hasCaptionText: (captionText === null || captionText === void 0 ? void 0 : captionText.toString) ? true : false, expand: titleType === 'profile', baseColor: baseColor }, { children: [(0, jsx_runtime_1.jsxs)(S_ButtonWrapper, { children: [(titleType === 'profile' || captionText) && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), leftIcon()] }), displayType === 'ibtn_amount2' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" }), (0, jsx_runtime_1.jsx)(S_Title, { children: title() }), (0, jsx_runtime_1.jsxs)(S_ButtonWrapper, { children: [(titleType === 'profile' || captionText) && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), iBtn()] })] })));
 }
 var S_MobileHeaderBar = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: ", ";\n  background-color: ", ";\n  border-bottom: ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: ", ";\n  justify-content: space-between;\n  padding: 0 ", ";\n"], ["\n  align-items: ", ";\n  background-color: ", ";\n  border-bottom: ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: ", ";\n  justify-content: space-between;\n  padding: 0 ", ";\n"])), function (_a) {
     var expand = _a.expand, hasCaptionText = _a.hasCaptionText;
     return expand || hasCaptionText ? 'flex-start' : 'center';
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_headerbar_base_area;
+    var theme = _a.theme, baseColor = _a.baseColor;
+    return theme[baseColor];
 }, function (_a) {
-    var hasBorder = _a.hasBorder, theme = _a.theme;
-    return hasBorder && "1px solid ".concat(theme.ui_cpnt_divider);
+    var hasBorder = _a.hasBorder, theme = _a.theme, borderColor = _a.borderColor;
+    return hasBorder && "1px solid ".concat(theme[borderColor]);
 }, function (_a) {
     var expand = _a.expand, hasCaptionText = _a.hasCaptionText;
     return (expand || hasCaptionText ? 'auto' : '56px');

package/dist/src/mobile/components/MobileHeaderBar/utils.d.ts

@@ -0,0 +1,12 @@
+import type { TextStyleProps } from '../TextLabel/TextLabel';
+import type { ColorTheme } from './MobileHeaderBar';
+import type { UiColors } from '../../../common/index';
+type MobileHeaderbarColorThemeType = {
+    titleColor: TextStyleProps['colorTheme'];
+    captionColor: TextStyleProps['colorTheme'];
+    iconButtonIconColor: UiColors;
+    baseColor: UiColors;
+    dividerColor: UiColors;
+};
+export declare function getOptionalColorTheme(colorTheme: ColorTheme): MobileHeaderbarColorThemeType;
+export {};

package/dist/src/mobile/components/MobileHeaderBar/utils.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOptionalColorTheme = void 0;
+function getOptionalColorTheme(colorTheme) {
+    if (colorTheme === 'transparent_white') {
+        return {
+            titleColor: 'sysTextWhite',
+            captionColor: 'sysTextWhite',
+            iconButtonIconColor: 'ui_cpnt_headerbar_icon_02',
+            baseColor: 'ui_cpnt_headerbar_base_area_transparent',
+            dividerColor: 'ui_cpnt_divider_white_opacity00'
+        };
+    }
+    return {
+        titleColor: 'sysTextPrimary',
+        captionColor: 'sysTextTertiary',
+        iconButtonIconColor: 'ui_cpnt_button_icon_enabled',
+        baseColor: 'ui_cpnt_headerbar_base_area',
+        dividerColor: 'ui_cpnt_divider'
+    };
+}
+exports.getOptionalColorTheme = getOptionalColorTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web",
-  "version": "2.2.8",
+  "version": "2.2.9",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/release-note.md

@@ -1,10 +1,7 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.8]
+## [v2.2.9]
 ## daily|https://design.storybook.publ.biz/
 
 ### common
-* TextFieldBase
-    * 자동완성시 텍스트 색상이 톤을 따라 갈 수 있도록 수정
-### sub
-* DynamicLayout - custom section
-    * textUtil에서 PRETENDARD를 선택할 경우 Pretendard-Regular가 아닌 Pretendard JP가 부여될 수 있도록 수정
+* MobileHeaderBar
+    * MobileHeaderBar: colorTheme transparent 추가

package/webhook/node_modules/esrecurse/.babelrc

@@ -1,3 +0,0 @@
-{
-    "presets": ["es2015"]
-}