pds-dev-kit-web 2.2.34 → 2.2.35

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 (5) hide show
  1. package/dist/src/desktop/components/DesktopTabBar/DesktopTabBar.d.ts +4 -1
  2. package/dist/src/desktop/components/DesktopTabBar/DesktopTabBar.js +16 -4
  3. package/package.json +1 -1
  4. package/release-note.md +6 -3
  5. package/webhook/node_modules/esrecurse/.babelrc +3 -0
package/dist/src/desktop/components/DesktopTabBar/DesktopTabBar.d.ts CHANGED
@@ -1,7 +1,10 @@
1
1
  /// <reference types="react" />
2
- import type { PDSTabItemOption, PDSTextType } from '../../../common/types';
2
+ import type { FillIconNameKeys, LineIconNameKeys, PDSTabItemOption, PDSTextType } from '../../../common/types';
3
3
  type ItemArray = PDSTabItemOption & {
4
4
  subArray?: PDSTabItemOption[];
5
+ iconMode?: 'none' | 'use';
6
+ iconName?: FillIconNameKeys | LineIconNameKeys;
7
+ iconFillType?: 'line' | 'fill';
5
8
  };
6
9
  type TextObj = {
7
10
  title: PDSTextType;
package/dist/src/desktop/components/DesktopTabBar/DesktopTabBar.js CHANGED
@@ -37,9 +37,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
37
37
  __setModuleDefault(result, mod);
38
38
  return result;
39
39
  };
40
+ var __importDefault = (this && this.__importDefault) || function (mod) {
41
+ return (mod && mod.__esModule) ? mod : { "default": mod };
42
+ };
40
43
  Object.defineProperty(exports, "__esModule", { value: true });
41
44
  var jsx_runtime_1 = require("react/jsx-runtime");
42
45
  var react_router_dom_1 = require("react-router-dom");
46
+ var Icon_1 = __importDefault(require("../../../hybrid/components/Icon/Icon"));
47
+ var Spacing_1 = __importDefault(require("../../../hybrid/components/Spacing/Spacing"));
43
48
  var styled_components_1 = __importStar(require("styled-components"));
44
49
  var TextLabel_1 = require("../TextLabel");
45
50
  function DesktopTabBar(_a) {
@@ -67,7 +72,11 @@ function DesktopTabBar(_a) {
67
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" }));
68
73
  }
69
74
  };
70
- 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.jsx)(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.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 })] })));
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
76
+ ? styleTheme === 'content'
77
+ ? 'ui_cpnt_textlabel_usr_brandprimary'
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 })] })));
71
80
  }
72
81
  if (textArray) {
73
82
  var isSubTabBarActivated = textArray.some(function (item) { return pathname.includes(item.path) && item.subArray; });
@@ -149,13 +158,16 @@ var S_MainTabItemBox = styled_components_1.default.div(templateObject_5 || (temp
149
158
  var theme = _a.theme, styleTheme = _a.styleTheme;
150
159
  return styleTheme === 'main' ? '20px' : theme.spacing.spacingD;
151
160
  });
152
- 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 padding-bottom: ", ";\n ", "\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 padding-bottom: ", ";\n ", "\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: 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) {
153
162
  var theme = _a.theme, styleTheme = _a.styleTheme;
154
163
  return (styleTheme === 'main' ? 0 : theme.spacing.spacingA);
155
- }, function (_a) {
164
+ }, tabIndicator, textOffset, function (_a) {
156
165
  var theme = _a.theme, styleTheme = _a.styleTheme;
157
166
  return styleTheme === 'main' ? theme.spacing.spacingA : theme.spacing.spacingB;
158
- }, tabIndicator, textOffset);
167
+ }, function (_a) {
168
+ var theme = _a.theme, styleTheme = _a.styleTheme;
169
+ return styleTheme === 'main' ? theme.spacing.spacingA : '7px';
170
+ });
159
171
  var S_SubTabBarWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n bottom: -33px;\n display: flex;\n height: 32px;\n left: 0px;\n position: absolute;\n width: max-content;\n"], ["\n bottom: -33px;\n display: flex;\n height: 32px;\n left: 0px;\n position: absolute;\n width: max-content;\n"])));
160
172
  var S_SubTabBarSpace = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background-color: ", ";\n ", ";\n height: ", ";\n"], ["\n background-color: ", ";\n ", ";\n height: ", ";\n"])), function (_a) {
161
173
  var theme = _a.theme, styleTheme = _a.styleTheme;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "2.2.34",
3
+ "version": "2.2.35",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,7 +1,10 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v2.2.34]
2
+ ## [v2.2.35]
3
3
  ## daily|https://design.storybook.publ.biz/
4
4
 
5
5
  ### Component
6
- * DynamicDesktopNavBar
7
- * DynamicDesktopNavBar에 1단 로고 중앙형에서 로고가 작을 때에도 중앙에 배치될 수 있게 한다.
6
+ * DesktopTabBar
7
+ * itemArray 내부에 icon관련 prop 추가
8
+ * iconMode
9
+ * iconName
10
+ * iconFillType
package/webhook/node_modules/esrecurse/.babelrc ADDED
@@ -0,0 +1,3 @@
1
+ {
2
+ "presets": ["es2015"]
3
+ }