pds-dev-kit-web 2.2.121 → 2.2.123

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/src/common/types/components.d.ts +2 -0
  2. package/dist/src/desktop/components/DesktopTabBar/DesktopTabBar.js +14 -8
  3. package/dist/src/desktop/components/TextLabel/TextLabel.d.ts +1 -0
  4. package/dist/src/desktop/components/TextLabel/TextLabel.js +6 -3
  5. package/package.json +1 -1
  6. package/release-note.md +2 -2
package/dist/src/common/types/components.d.ts CHANGED
@@ -11,6 +11,8 @@ export type PDSTabItemOption = {
11
11
  title: PDSTextType;
12
12
  isActive: boolean;
13
13
  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
14
+ disabled?: boolean;
15
+ tooltipText?: PDSTextType;
14
16
  };
15
17
  export type ContextMenuItemValueOption = {
16
18
  text?: PDSTextType;
package/dist/src/desktop/components/DesktopTabBar/DesktopTabBar.js CHANGED
@@ -60,23 +60,23 @@ function DesktopTabBar(_a) {
60
60
  };
61
61
  var textLabel_1 = function (item, isSubText) {
62
62
  if (isSubText) {
63
- return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "caption1Bold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextTertiary', singleLineMode: "use" }));
63
+ return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, __assign({ text: item.title, textAlign: "center", styleTheme: "caption1Bold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextTertiary', singleLineMode: "use" }, (item.tooltipText && { tooltipText: item.tooltipText }))));
64
64
  }
65
65
  if (styleTheme === 'content_black') {
66
- return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
66
+ return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, __assign({ text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }, (item.tooltipText && { tooltipText: item.tooltipText }))));
67
67
  }
68
68
  if (styleTheme === 'content') {
69
- return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
69
+ return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, __assign({ text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }, (item.tooltipText && { tooltipText: item.tooltipText }))));
70
70
  }
71
71
  if (styleTheme === 'main') {
72
- return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "leadParaBold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextTertiary', singleLineMode: "use", letterSpacing: "-0.04em" }));
72
+ return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, __assign({ text: item.title, textAlign: "center", styleTheme: "leadParaBold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextTertiary', singleLineMode: "use", letterSpacing: "-0.04em" }, (item.tooltipText && { tooltipText: item.tooltipText }))));
73
73
  }
74
74
  };
75
- return ((0, jsx_runtime_1.jsxs)(S_TabBarBox, __assign({ "x-pds-name": "DesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsx)(S_MainTabBarSpace, __assign({ styleTheme: styleTheme, isSubTabBarActivated: isSubTabBarActivated }, { children: itemArray.map(function (item) { return ((0, jsx_runtime_1.jsxs)(S_MainTabItemBox, __assign({ styleTheme: styleTheme }, { children: [(0, jsx_runtime_1.jsxs)(S_MainTabItemWrapper, __assign({ text: item.title, styleTheme: styleTheme, isActive: item.isActive, onClick: function (e) { return handelClickTabItem_1(item, e); } }, { children: [textLabel_1(item, false), item.iconMode === 'use' && item.iconName && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spacing_1.default, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(Icon_1.default, { size: styleTheme === 'main' ? 20 : 16, iconName: item.iconName || 'ic_unavailable', fillType: item.iconFillType || 'line', colorKey: item.isActive
75
+ return ((0, jsx_runtime_1.jsxs)(S_TabBarBox, __assign({ "x-pds-name": "DesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsx)(S_MainTabBarSpace, __assign({ styleTheme: styleTheme, isSubTabBarActivated: isSubTabBarActivated }, { children: itemArray.map(function (item) { return ((0, jsx_runtime_1.jsxs)(S_MainTabItemBox, __assign({ styleTheme: styleTheme }, { children: [(0, jsx_runtime_1.jsxs)(S_MainTabItemWrapper, __assign({ text: item.title, styleTheme: styleTheme, isActive: item.isActive, onClick: function (e) { return !item.disabled && handelClickTabItem_1(item, e); }, disabled: item.disabled }, { children: [textLabel_1(item, false), item.iconMode === 'use' && item.iconName && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spacing_1.default, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(Icon_1.default, { size: styleTheme === 'main' ? 20 : 16, iconName: item.iconName || 'ic_unavailable', fillType: item.iconFillType || 'line', colorKey: item.isActive
76
76
  ? styleTheme === 'content'
77
77
  ? 'ui_cpnt_textlabel_usr_brandprimary'
78
78
  : 'ui_cpnt_textlabel_sys_primary'
79
- : 'ui_cpnt_textlabel_sys_tertiary' })] }))] })), item.isActive && item.subArray && ((0, jsx_runtime_1.jsx)(S_SubTabBarWrapper, { children: item.subArray.map(function (subItem) { return ((0, jsx_runtime_1.jsx)(S_SubTabItemWrapper, __assign({ text: subItem.title, styleTheme: styleTheme, onClick: function (e) { return handelClickTabItem_1(subItem, e); } }, { children: textLabel_1(subItem, true) }), subItem.title)); }) }))] }), item.title)); }) })), isSubTabBarActivated && (0, jsx_runtime_1.jsx)(S_SubTabBarSpace, { styleTheme: styleTheme })] })));
79
+ : 'ui_cpnt_textlabel_sys_tertiary' })] }))] })), item.isActive && item.subArray && ((0, jsx_runtime_1.jsx)(S_SubTabBarWrapper, { children: item.subArray.map(function (subItem) { return ((0, jsx_runtime_1.jsx)(S_SubTabItemWrapper, __assign({ text: subItem.title, styleTheme: styleTheme, disabled: subItem.disabled, onClick: function (e) { return !subItem.disabled && handelClickTabItem_1(subItem, e); } }, { children: textLabel_1(subItem, true) }), subItem.title)); }) }))] }), item.title)); }) })), isSubTabBarActivated && (0, jsx_runtime_1.jsx)(S_SubTabBarSpace, { styleTheme: styleTheme })] })));
80
80
  }
81
81
  if (textArray) {
82
82
  var isSubTabBarActivated = textArray.some(function (item) { return pathname.includes(item.path) && item.subArray; });
@@ -158,7 +158,10 @@ var S_MainTabItemBox = styled_components_1.default.div(templateObject_5 || (temp
158
158
  var theme = _a.theme, styleTheme = _a.styleTheme;
159
159
  return styleTheme === 'main' ? '20px' : theme.spacing.spacingD;
160
160
  });
161
- var S_MainTabItemWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n align-items: flex-end;\n box-sizing: border-box;\n cursor: pointer;\n display: flex;\n height: 100%;\n padding: 0 ", ";\n ", "\n ", "\n & > [x-pds-name=\"TextLabel\"] {\n padding-bottom: ", ";\n }\n & > svg {\n padding-bottom: ", ";\n }\n"], ["\n align-items: flex-end;\n box-sizing: border-box;\n cursor: pointer;\n display: flex;\n height: 100%;\n padding: 0 ", ";\n ", "\n ", "\n & > [x-pds-name=\"TextLabel\"] {\n padding-bottom: ", ";\n }\n & > svg {\n padding-bottom: ", ";\n }\n"])), function (_a) {
161
+ var S_MainTabItemWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n align-items: flex-end;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n height: 100%;\n padding: 0 ", ";\n ", "\n ", "\n & > [x-pds-name=\"TextLabel\"] {\n padding-bottom: ", ";\n }\n & > svg {\n padding-bottom: ", ";\n }\n"], ["\n align-items: flex-end;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n height: 100%;\n padding: 0 ", ";\n ", "\n ", "\n & > [x-pds-name=\"TextLabel\"] {\n padding-bottom: ", ";\n }\n & > svg {\n padding-bottom: ", ";\n }\n"])), function (_a) {
162
+ var disabled = _a.disabled;
163
+ return (disabled ? 'default' : 'pointer');
164
+ }, function (_a) {
162
165
  var theme = _a.theme, styleTheme = _a.styleTheme;
163
166
  return (styleTheme === 'main' ? 0 : theme.spacing.spacingA);
164
167
  }, tabIndicator, textOffset, function (_a) {
@@ -179,7 +182,10 @@ var S_SubTabBarSpace = styled_components_1.default.div(templateObject_8 || (temp
179
182
  var styleTheme = _a.styleTheme;
180
183
  return (styleTheme === 'main' ? '26px' : '32px');
181
184
  });
182
- var S_SubTabItemWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n align-items: center;\n cursor: pointer;\n display: flex;\n justify-content: center;\n margin-right: ", ";\n ", ";\n ", ";\n\n &:last-child {\n margin-right: 0;\n }\n\n ", "\n"], ["\n align-items: center;\n cursor: pointer;\n display: flex;\n justify-content: center;\n margin-right: ", ";\n ", ";\n ", ";\n\n &:last-child {\n margin-right: 0;\n }\n\n ", "\n"])), function (_a) {
185
+ var S_SubTabItemWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n align-items: center;\n cursor: ", ";\n display: flex;\n justify-content: center;\n margin-right: ", ";\n ", ";\n ", ";\n\n &:last-child {\n margin-right: 0;\n }\n\n ", "\n"], ["\n align-items: center;\n cursor: ", ";\n display: flex;\n justify-content: center;\n margin-right: ", ";\n ", ";\n ", ";\n\n &:last-child {\n margin-right: 0;\n }\n\n ", "\n"])), function (_a) {
186
+ var disabled = _a.disabled;
187
+ return (disabled ? 'default' : 'pointer');
188
+ }, function (_a) {
183
189
  var theme = _a.theme, styleTheme = _a.styleTheme;
184
190
  return styleTheme === 'main' ? theme.spacing.spacingD : theme.spacing.spacingE;
185
191
  }, function (_a) {
package/dist/src/desktop/components/TextLabel/TextLabel.d.ts CHANGED
@@ -26,6 +26,7 @@ export type TextLabelProps = {
26
26
  export type TextStyleProps = {
27
27
  textAlign?: TextLabelProps['textAlign'];
28
28
  tooltipPosition?: TextLabelProps['tooltipPosition'];
29
+ tooltipText?: TextLabelProps['tooltipText'];
29
30
  styleTheme?: TextLabelProps['styleTheme'];
30
31
  colorOverride?: UiColors;
31
32
  colorTheme?: TextLabelProps['colorTheme'];
package/dist/src/desktop/components/TextLabel/TextLabel.js CHANGED
@@ -361,7 +361,7 @@ var ellipsisStyle = (0, styled_components_1.css)(templateObject_35 || (templateO
361
361
  });
362
362
  var userSelectModeStyle = (0, styled_components_1.css)(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n -khtml-user-select: none;\n -moz-user-select: -moz-none;\n -ms-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n"], ["\n -khtml-user-select: none;\n -moz-user-select: -moz-none;\n -ms-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n"])));
363
363
  var bulletPointModeStyle = (0, styled_components_1.css)(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n padding-left: 16px;\n ::before {\n content: '\u2022';\n left: 0;\n position: absolute;\n width: 16px;\n }\n"], ["\n padding-left: 16px;\n ::before {\n content: '\u2022';\n left: 0;\n position: absolute;\n width: 16px;\n }\n"])));
364
- var S_TextLabel = styled_components_1.default.div(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n box-sizing: border-box;\n overflow-wrap: break-word;\n text-align: ", ";\n white-space: pre-wrap;\n\n ", ";\n\n ", ";\n\n ", ";\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n box-sizing: border-box;\n overflow-wrap: break-word;\n text-align: ", ";\n white-space: pre-wrap;\n\n ", ";\n\n ", ";\n\n ", ";\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
364
+ var S_TextLabel = styled_components_1.default.div(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n box-sizing: border-box;\n overflow-wrap: break-word;\n position: relative;\n text-align: ", ";\n white-space: pre-wrap;\n\n ", ";\n\n ", ";\n\n ", ";\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n box-sizing: border-box;\n overflow-wrap: break-word;\n position: relative;\n text-align: ", ";\n white-space: pre-wrap;\n\n ", ";\n\n ", ";\n\n ", ";\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
365
365
  var textAlign = _a.textAlign;
366
366
  return textAlign;
367
367
  }, function (_a) {
@@ -463,9 +463,12 @@ var caption2AfterTextBox = (0, styled_components_1.css)(templateObject_47 || (te
463
463
  var form1AfterTextBox = (0, styled_components_1.css)(templateObject_48 || (templateObject_48 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
464
464
  var form2AfterTextBox = (0, styled_components_1.css)(templateObject_49 || (templateObject_49 = __makeTemplateObject(["\n margin-bottom: 2px;\n"], ["\n margin-bottom: 2px;\n"])));
465
465
  var blog1RAfterTextBox = (0, styled_components_1.css)(templateObject_50 || (templateObject_50 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
466
- var S_AfterTextBox = styled_components_1.default.div(templateObject_51 || (templateObject_51 = __makeTemplateObject(["\n display: inline-block;\n margin-left: ", ";\n position: relative;\n vertical-align: middle;\n\n ", ";\n"], ["\n display: inline-block;\n margin-left: ", ";\n position: relative;\n vertical-align: middle;\n\n ", ";\n"])), function (_a) {
466
+ var S_AfterTextBox = styled_components_1.default.div(templateObject_51 || (templateObject_51 = __makeTemplateObject(["\n display: inline-block;\n margin-left: ", ";\n margin-right: ", ";\n position: relative;\n vertical-align: middle;\n\n ", ";\n"], ["\n display: inline-block;\n margin-left: ", ";\n margin-right: ", ";\n position: relative;\n vertical-align: middle;\n\n ", ";\n"])), function (_a) {
467
467
  var theme = _a.theme;
468
468
  return theme.spacing.spacingA;
469
+ }, function (_a) {
470
+ var tooltipText = _a.tooltipText;
471
+ return (tooltipText ? '0' : '12px');
469
472
  }, function (_a) {
470
473
  var styleTheme = _a.styleTheme;
471
474
  return styleTheme &&
@@ -492,7 +495,7 @@ var S_AfterTextBox = styled_components_1.default.div(templateObject_51 || (templ
492
495
  blog1Regular: blog1RAfterTextBox
493
496
  }[styleTheme];
494
497
  });
495
- var S_IconWrapper = styled_components_1.default.div(templateObject_52 || (templateObject_52 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 16px;\n height: 100%;\n justify-content: center;\n width: 16px;\n"], ["\n align-items: center;\n display: flex;\n height: 16px;\n height: 100%;\n justify-content: center;\n width: 16px;\n"])));
498
+ var S_IconWrapper = styled_components_1.default.div(templateObject_52 || (templateObject_52 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n justify-content: center;\n left: 0;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n"], ["\n align-items: center;\n display: flex;\n justify-content: center;\n left: 0;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n"])));
496
499
  var S_TooltipWrapper = styled_components_1.default.div(templateObject_53 || (templateObject_53 = __makeTemplateObject(["\n ", "\n\n ", ";\n"], ["\n ", "\n\n ", ";\n"])), systemUI_1.TooltipWrapperStyle, function (_a) {
497
500
  var tooltipPositionCss = _a.tooltipPositionCss;
498
501
  return tooltipPositionCss;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "2.2.121",
3
+ "version": "2.2.123",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v2.2.121]
2
+ ## [v2.2.123]
3
3
  ## daily|https://design.storybook.publ.biz/
4
4
 
5
5
  ### 업데이트 사항
6
- * [CHORE] bitbucket pipeline while문 제거
6
+ * [PDS-1266] DesktopTabBar prop추가