pds-dev-kit-web 2.2.81 → 2.2.83

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

@@ -354,5 +354,6 @@
     "sys_cpnt_sheet_base_13": "grey50",
     "sys_cpnt_sheet_base_14": "grey900",
     "sys_cpnt_white_opacity60": "white/opacity60",
-    "sys_border_line_17": "darkgrey600"
+    "sys_border_line_17": "darkgrey600",
+    "usr_brand_primary_opacity05": "darkblue500/opacity05"
 }

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

@@ -354,5 +354,6 @@
     "sys_cpnt_sheet_base_13": "grey50",
     "sys_cpnt_sheet_base_14": "grey900",
     "sys_cpnt_white_opacity60": "white/opacity60",
-    "sys_border_line_17": "black/opacity00"
+    "sys_border_line_17": "black/opacity00",
+    "usr_brand_primary_opacity05": "blue500/opacity05"
 }

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

@@ -858,5 +858,6 @@
     "ui_120": "sys_cpnt_white_opacity60",
     "ui_121": "sys_component_base_03",
     "ui_cpnt_tooltip_base_border": "sys_border_line_17",
-    "ui_122": "sys_widget_green_01"
+    "ui_122": "sys_widget_green_01",
+    "ui_123": "usr_brand_primary_opacity05"
 }

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

@@ -476,6 +476,7 @@ declare const colorSet: {
         sys_cpnt_sheet_base_14: string;
         sys_cpnt_white_opacity60: string;
         sys_border_line_17: string;
+        usr_brand_primary_opacity05: string;
     };
     readonly PaletteColor_Dark: {
         sys_container_background_01: string;
@@ -834,6 +835,7 @@ declare const colorSet: {
         sys_cpnt_sheet_base_14: string;
         sys_cpnt_white_opacity60: string;
         sys_border_line_17: string;
+        usr_brand_primary_opacity05: string;
     };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
@@ -1696,6 +1698,7 @@ declare const colorSet: {
         ui_121: string;
         ui_cpnt_tooltip_base_border: string;
         ui_122: string;
+        ui_123: string;
     };
 };
 export default colorSet;

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

@@ -859,4 +859,5 @@ export interface UITheme {
     ui_121: string;
     ui_cpnt_tooltip_base_border: string;
     ui_122: string;
+    ui_123: string;
 }

package/dist/src/desktop/components/UserDesktopTabBar/UserDesktopTabBar.d.ts

@@ -4,7 +4,7 @@ type TextObj = {
     path: string;
     title: PDSTextType;
 };
-type StyleTheme = 'main' | 'content';
+type StyleTheme = 'main' | 'content' | 'content2';
 type UserDesktopTabBarProps = {
     itemArray?: PDSTabItemOption[];
     styleTheme?: StyleTheme;

package/dist/src/desktop/components/UserDesktopTabBar/UserDesktopTabBar.js

@@ -56,6 +56,9 @@ function UserDesktopTabBar(_a) {
                 if (styleTheme === 'content') {
                     return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ isActive: item.isActive, styleTheme: "content", text: item.title, onClick: function (e) { return handleClickTabItem_1(item, e); } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "headingBold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }) }), index));
                 }
+                if (styleTheme === 'content2') {
+                    return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ isActive: item.isActive, styleTheme: "content2", text: item.title, onClick: function (e) { return handleClickTabItem_1(item, e); } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "leadParaBold", colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }) }), index));
+                }
                 return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ isActive: item.isActive, styleTheme: styleTheme, text: item.title, onClick: function (e) { return handleClickTabItem_1(item, e); } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'body2Bold' : 'body2Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }) }), index));
             }) })));
     }
@@ -83,6 +86,8 @@ var S_TabWrapper = styled_components_1.default.div(templateObject_2 || (template
             return mainStyle;
         case 'content':
             return contentStyle;
+        case 'content2':
+            return content2Style;
         default:
             return mainStyle;
     }
@@ -119,20 +124,38 @@ var contentStyle = (0, styled_components_1.css)(templateObject_4 || (templateObj
     var isActive = _a.isActive;
     return !isActive && "display: none;";
 });
-var S_TabBar = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: ", ";\n  justify-content: center;\n"], ["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: ", ";\n  justify-content: center;\n"])), function (_a) {
+var content2Style = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n  height: 48px;\n  margin-right: ", ";\n  padding: ", ";\n  position: relative;\n\n  ", "\n\n  &:last-child {\n    margin-right: 0;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n  height: 48px;\n  margin-right: ", ";\n  padding: ", ";\n  position: relative;\n\n  ", "\n\n  &:last-child {\n    margin-right: 0;\n  }\n"])), function (_a) {
+    var isActive = _a.isActive, theme = _a.theme;
+    return isActive ? theme.ui_123 : theme.ui_cpnt_sheet_base_03;
+}, function (_a) {
     var theme = _a.theme;
-    return theme.ui_cpnt_tabbar_base_area;
+    return theme.spacing.spacingC;
+}, function (_a) {
+    var theme = _a.theme;
+    return "0 ".concat(theme.spacing.spacingD);
+}, function (_a) {
+    var isActive = _a.isActive;
+    return isActive && "border-radius: 24px;";
+});
+var S_TabBar = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: ", ";\n  background-color: ", ";\n  border-bottom: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: ", ";\n  justify-content: center;\n"], ["\n  align-items: ", ";\n  background-color: ", ";\n  border-bottom: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: ", ";\n  justify-content: center;\n"])), function (_a) {
+    var styleTheme = _a.styleTheme;
+    return styleTheme === 'content2' && 'center';
 }, function (_a) {
     var theme = _a.theme;
-    return theme.ui_cpnt_divider;
+    return theme.ui_cpnt_tabbar_base_area;
+}, function (_a) {
+    var styleTheme = _a.styleTheme, theme = _a.theme;
+    return styleTheme !== 'content2' && "1px solid ".concat(theme.ui_cpnt_divider);
 }, function (_a) {
     var styleTheme = _a.styleTheme;
     switch (styleTheme) {
         case 'content':
             return '64px';
+        case 'content2':
+            return '96px';
         default:
             return '48px';
     }
 });
 exports.default = UserDesktopTabBar;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/package.json

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

package/release-note.md

@@ -1,6 +1,6 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.81]
+## [v2.2.83]
 ## daily|https://design.storybook.publ.biz/
 
 ### 업데이트 사항
-* [PDS-1235] mobile sync를 위한 업데이트
+* [fix] UserDesktopTabBar border 미적용 문제 해결