pds-dev-kit-web 2.2.212 → 2.2.213

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 (10) hide show
  1. package/dist/src/common/styles/colorSet/UIColor.json +2 -1
  2. package/dist/src/common/styles/colorSet/index.d.ts +125 -124
  3. package/dist/src/common/styles/colorSet/index.js +2 -2
  4. package/dist/src/common/styles/colorSet/ui-type.d.ts +1 -0
  5. package/dist/src/desktop/components/DesktopTabBar/DesktopTabBar.d.ts +1 -1
  6. package/dist/src/desktop/components/DesktopTabBar/DesktopTabBar.js +21 -8
  7. package/dist/src/mobile/components/MobileTabBar/MobileTabBar.d.ts +3 -1
  8. package/dist/src/mobile/components/MobileTabBar/MobileTabBar.js +35 -15
  9. package/package.json +1 -1
  10. package/release-note.md +3 -3
package/dist/src/common/styles/colorSet/UIColor.json CHANGED
@@ -904,5 +904,6 @@
904
904
  "ui_141": "sys_widget_grey_07",
905
905
  "ui_142": "sys_widget_grey_08",
906
906
  "ui_143": "sys_on_base_hover_01",
907
- "ui_144": "sys_on_base_pressed_01"
907
+ "ui_144": "sys_on_base_pressed_01",
908
+ "ui_cpnt_badge_base_confirm": "sys_component_base_green"
908
909
  }
package/dist/src/common/styles/colorSet/index.d.ts CHANGED
@@ -1,128 +1,4 @@
1
1
  declare const colorSet: {
2
- readonly SemanticColor: {
3
- blue500: string;
4
- blue700: string;
5
- blue300: string;
6
- green700: string;
7
- green500: string;
8
- green300: string;
9
- red500: string;
10
- grey900: string;
11
- grey500: string;
12
- grey400: string;
13
- grey100: string;
14
- grey50: string;
15
- white: string;
16
- black: string;
17
- darkblue500: string;
18
- grey950: string;
19
- darkgrey900: string;
20
- darkgrey500: string;
21
- darkgrey400: string;
22
- darkgrey100: string;
23
- darkgrey50: string;
24
- darkred500: string;
25
- darkgreen700: string;
26
- orange500: string;
27
- darkorange500: string;
28
- opacity00: string;
29
- opacity20: string;
30
- opacity30: string;
31
- opacity65: string;
32
- darkgreen500: string;
33
- grey70: string;
34
- navy500: string;
35
- lightgreen500: string;
36
- pink500: string;
37
- darkgrey70: string;
38
- darknavy500: string;
39
- darkpink500: string;
40
- darklightgreen500: string;
41
- opacity10: string;
42
- grey600: string;
43
- darkgrey600: string;
44
- skyblue500: string;
45
- skyblue300: string;
46
- pink300: string;
47
- lightpink500: string;
48
- darkblue300: string;
49
- darkblue700: string;
50
- darkgreen300: string;
51
- darkskyblue500: string;
52
- navy100: string;
53
- darknavy100: string;
54
- opacity80: string;
55
- opacity50: string;
56
- grey30: string;
57
- opacity95: string;
58
- darkgrey30: string;
59
- opacity40: string;
60
- kakaoyellow: string;
61
- pastelblue500: string;
62
- pastelpink500: string;
63
- pastelorange500: string;
64
- pastelgreen500: string;
65
- pastelpurple500: string;
66
- darkpastelblue500: string;
67
- darkpastelpink500: string;
68
- darkpastelorange500: string;
69
- darkpastelgreen500: string;
70
- darkpastelpurple500: string;
71
- green30: string;
72
- darkgreen30: string;
73
- orange50: string;
74
- darkorange50: string;
75
- orange30: string;
76
- darkorange30: string;
77
- green50: string;
78
- darkgreen50: string;
79
- opacity90: string;
80
- facebookblue: string;
81
- opacity05: string;
82
- opacity15: string;
83
- grey80: string;
84
- grey200: string;
85
- darkgrey80: string;
86
- darkgrey200: string;
87
- opacity70: string;
88
- opacity60: string;
89
- skyblue100: string;
90
- green100: string;
91
- darkgreen100: string;
92
- darkskyblue100: string;
93
- opacity25: string;
94
- opacity35: string;
95
- grey10: string;
96
- darkgrey10: string;
97
- blue50: string;
98
- darkblue50: string;
99
- blue10: string;
100
- red10: string;
101
- green10: string;
102
- blue30: string;
103
- red30: string;
104
- orange300: string;
105
- darkorange300: string;
106
- darkpink300: string;
107
- pastelblue300: string;
108
- darkpastelblue300: string;
109
- softpurple500: string;
110
- darksoftpurple500: string;
111
- coolpink500: string;
112
- darkcoolpink500: string;
113
- brown500: string;
114
- darkbrown500: string;
115
- yellow300: string;
116
- darkyellow300: string;
117
- grey20: string;
118
- darkgrey20: string;
119
- grey300: string;
120
- darkgrey300: string;
121
- yellow500: string;
122
- darkyellow500: string;
123
- grey450: string;
124
- darkgrey450: string;
125
- };
126
2
  readonly PaletteColor_Dark: {
127
3
  sys_container_background_01: string;
128
4
  sys_container_background_02: string;
@@ -506,6 +382,130 @@ declare const colorSet: {
506
382
  sys_on_base_hover_01: string;
507
383
  sys_on_base_pressed_01: string;
508
384
  };
385
+ readonly SemanticColor: {
386
+ blue500: string;
387
+ blue700: string;
388
+ blue300: string;
389
+ green700: string;
390
+ green500: string;
391
+ green300: string;
392
+ red500: string;
393
+ grey900: string;
394
+ grey500: string;
395
+ grey400: string;
396
+ grey100: string;
397
+ grey50: string;
398
+ white: string;
399
+ black: string;
400
+ darkblue500: string;
401
+ grey950: string;
402
+ darkgrey900: string;
403
+ darkgrey500: string;
404
+ darkgrey400: string;
405
+ darkgrey100: string;
406
+ darkgrey50: string;
407
+ darkred500: string;
408
+ darkgreen700: string;
409
+ orange500: string;
410
+ darkorange500: string;
411
+ opacity00: string;
412
+ opacity20: string;
413
+ opacity30: string;
414
+ opacity65: string;
415
+ darkgreen500: string;
416
+ grey70: string;
417
+ navy500: string;
418
+ lightgreen500: string;
419
+ pink500: string;
420
+ darkgrey70: string;
421
+ darknavy500: string;
422
+ darkpink500: string;
423
+ darklightgreen500: string;
424
+ opacity10: string;
425
+ grey600: string;
426
+ darkgrey600: string;
427
+ skyblue500: string;
428
+ skyblue300: string;
429
+ pink300: string;
430
+ lightpink500: string;
431
+ darkblue300: string;
432
+ darkblue700: string;
433
+ darkgreen300: string;
434
+ darkskyblue500: string;
435
+ navy100: string;
436
+ darknavy100: string;
437
+ opacity80: string;
438
+ opacity50: string;
439
+ grey30: string;
440
+ opacity95: string;
441
+ darkgrey30: string;
442
+ opacity40: string;
443
+ kakaoyellow: string;
444
+ pastelblue500: string;
445
+ pastelpink500: string;
446
+ pastelorange500: string;
447
+ pastelgreen500: string;
448
+ pastelpurple500: string;
449
+ darkpastelblue500: string;
450
+ darkpastelpink500: string;
451
+ darkpastelorange500: string;
452
+ darkpastelgreen500: string;
453
+ darkpastelpurple500: string;
454
+ green30: string;
455
+ darkgreen30: string;
456
+ orange50: string;
457
+ darkorange50: string;
458
+ orange30: string;
459
+ darkorange30: string;
460
+ green50: string;
461
+ darkgreen50: string;
462
+ opacity90: string;
463
+ facebookblue: string;
464
+ opacity05: string;
465
+ opacity15: string;
466
+ grey80: string;
467
+ grey200: string;
468
+ darkgrey80: string;
469
+ darkgrey200: string;
470
+ opacity70: string;
471
+ opacity60: string;
472
+ skyblue100: string;
473
+ green100: string;
474
+ darkgreen100: string;
475
+ darkskyblue100: string;
476
+ opacity25: string;
477
+ opacity35: string;
478
+ grey10: string;
479
+ darkgrey10: string;
480
+ blue50: string;
481
+ darkblue50: string;
482
+ blue10: string;
483
+ red10: string;
484
+ green10: string;
485
+ blue30: string;
486
+ red30: string;
487
+ orange300: string;
488
+ darkorange300: string;
489
+ darkpink300: string;
490
+ pastelblue300: string;
491
+ darkpastelblue300: string;
492
+ softpurple500: string;
493
+ darksoftpurple500: string;
494
+ coolpink500: string;
495
+ darkcoolpink500: string;
496
+ brown500: string;
497
+ darkbrown500: string;
498
+ yellow300: string;
499
+ darkyellow300: string;
500
+ grey20: string;
501
+ darkgrey20: string;
502
+ grey300: string;
503
+ darkgrey300: string;
504
+ yellow500: string;
505
+ darkyellow500: string;
506
+ grey450: string;
507
+ darkgrey450: string;
508
+ };
509
509
  readonly PaletteColor_light: {
510
510
  sys_container_background_01: string;
511
511
  sys_container_background_02: string;
@@ -1796,6 +1796,7 @@ declare const colorSet: {
1796
1796
  ui_142: string;
1797
1797
  ui_143: string;
1798
1798
  ui_144: string;
1799
+ ui_cpnt_badge_base_confirm: string;
1799
1800
  };
1800
1801
  };
1801
1802
  export default colorSet;
package/dist/src/common/styles/colorSet/index.js CHANGED
@@ -4,13 +4,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  /* eslint-disable import/order */
7
- var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
8
7
  var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
8
+ var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
9
9
  var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
10
10
  var UIColor_json_1 = __importDefault(require("./UIColor.json"));
11
11
  var colorSet = {
12
- SemanticColor: SemanticColor_json_1.default,
13
12
  PaletteColor_Dark: PaletteColor_Dark_json_1.default,
13
+ SemanticColor: SemanticColor_json_1.default,
14
14
  PaletteColor_light: PaletteColor_light_json_1.default,
15
15
  UIColor: UIColor_json_1.default
16
16
  };
package/dist/src/common/styles/colorSet/ui-type.d.ts CHANGED
@@ -905,4 +905,5 @@ export interface UITheme {
905
905
  ui_142: string;
906
906
  ui_143: string;
907
907
  ui_144: string;
908
+ ui_cpnt_badge_base_confirm: string;
908
909
  }
package/dist/src/desktop/components/DesktopTabBar/DesktopTabBar.d.ts CHANGED
@@ -16,7 +16,7 @@ type TextObj = {
16
16
  };
17
17
  type DesktopTabBarProps = {
18
18
  itemArray?: ItemArray[];
19
- styleTheme?: 'main' | 'content' | 'content_black';
19
+ styleTheme?: 'main' | 'content' | 'content2' | 'content_black';
20
20
  /** @deprecated v1.5 해당 필드 대신 itemArray를 사용하세요. */
21
21
  textArray?: TextObj[];
22
22
  };
package/dist/src/desktop/components/DesktopTabBar/DesktopTabBar.js CHANGED
@@ -68,6 +68,9 @@ function DesktopTabBar(_a) {
68
68
  if (styleTheme === 'content') {
69
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
+ if (styleTheme === 'content2') {
72
+ return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, __assign({ text: item.title, textAlign: "center", styleTheme: "body2Bold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextTertiary', singleLineMode: "use" }, (item.tooltipText && { tooltipText: item.tooltipText }))));
73
+ }
71
74
  if (styleTheme === 'main') {
72
75
  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
76
  }
@@ -95,6 +98,9 @@ function DesktopTabBar(_a) {
95
98
  if (styleTheme === 'content') {
96
99
  return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: pathname.includes(item.path) ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname.includes(item.path) ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
97
100
  }
101
+ if (styleTheme === 'content2') {
102
+ return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "body2Bold", colorTheme: pathname.includes(item.path) ? 'sysTextPrimary' : 'sysTextTertiary', singleLineMode: "use" }));
103
+ }
98
104
  if (styleTheme === 'main') {
99
105
  return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "caption1Bold", colorTheme: pathname.includes(item.path) ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }));
100
106
  }
@@ -115,7 +121,7 @@ var S_MainTabBarSpace = styled_components_1.default.div(templateObject_2 || (tem
115
121
  return styleTheme !== 'main' && "border-bottom: 1px solid ".concat(theme.ui_cpnt_divider, ";");
116
122
  }, function (_a) {
117
123
  var styleTheme = _a.styleTheme;
118
- return (styleTheme === 'main' ? '52px' : '40px');
124
+ return styleTheme === 'main' ? '52px' : styleTheme === 'content2' ? '32px' : '40px';
119
125
  }, function (_a) {
120
126
  var theme = _a.theme;
121
127
  return theme.spacing.spacingE;
@@ -137,8 +143,8 @@ var tabIndicator = (0, styled_components_1.css)(templateObject_3 || (templateObj
137
143
  var styleTheme = _a.styleTheme;
138
144
  return (styleTheme === 'main' ? '3px' : '2px');
139
145
  }, function (_a) {
140
- var isActive = _a.isActive;
141
- return !isActive && "display: none;";
146
+ var isActive = _a.isActive, styleTheme = _a.styleTheme;
147
+ return (!isActive || styleTheme === 'content2') && "display: none;";
142
148
  });
143
149
  // NOTE: Tab item 활성화 시 text에 bold가 적용되는데, 이때 font-family에 따라 text 영역의 너비가 변경되어 시각적 변동을 일으키는 문제를 해결하기 위한 처리입니다.
144
150
  var textOffset = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n & > div::before {\n content: ", ";\n display: block;\n font-weight: ", ";\n height: 0;\n overflow: hidden;\n visibility: hidden;\n }\n\n & > div::after {\n content: ", ";\n display: block;\n font-weight: ", ";\n height: 0;\n overflow: hidden;\n visibility: hidden;\n }\n"], ["\n & > div::before {\n content: ", ";\n display: block;\n font-weight: ", ";\n height: 0;\n overflow: hidden;\n visibility: hidden;\n }\n\n & > div::after {\n content: ", ";\n display: block;\n font-weight: ", ";\n height: 0;\n overflow: hidden;\n visibility: hidden;\n }\n"])), function (_a) {
@@ -158,15 +164,22 @@ var S_MainTabItemBox = styled_components_1.default.div(templateObject_5 || (temp
158
164
  var theme = _a.theme, styleTheme = _a.styleTheme;
159
165
  return styleTheme === 'main' ? '20px' : theme.spacing.spacingD;
160
166
  });
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) {
167
+ var S_MainTabItemWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n align-items: ", ";\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n height: 100%;\n padding: 0\n ", ";\n ", "\n ", "\n & > [x-pds-name=\"TextLabel\"] {\n padding-bottom: ", ";\n }\n & > svg {\n padding-bottom: ", ";\n }\n"], ["\n align-items: ", ";\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n height: 100%;\n padding: 0\n ", ";\n ", "\n ", "\n & > [x-pds-name=\"TextLabel\"] {\n padding-bottom: ", ";\n }\n & > svg {\n padding-bottom: ", ";\n }\n"])), function (_a) {
168
+ var styleTheme = _a.styleTheme;
169
+ return (styleTheme === 'content2' ? 'flex-strat' : 'flex-end');
170
+ }, function (_a) {
162
171
  var disabled = _a.disabled;
163
172
  return (disabled ? 'default' : 'pointer');
164
173
  }, function (_a) {
165
174
  var theme = _a.theme, styleTheme = _a.styleTheme;
166
- return (styleTheme === 'main' ? 0 : theme.spacing.spacingA);
175
+ return styleTheme === 'main' || styleTheme === 'content2' ? 0 : theme.spacing.spacingA;
167
176
  }, tabIndicator, textOffset, function (_a) {
168
177
  var theme = _a.theme, styleTheme = _a.styleTheme;
169
- return styleTheme === 'main' ? theme.spacing.spacingA : theme.spacing.spacingB;
178
+ return styleTheme === 'main'
179
+ ? theme.spacing.spacingA
180
+ : styleTheme === 'content2'
181
+ ? theme.spacing.spacingC
182
+ : theme.spacing.spacingB;
170
183
  }, function (_a) {
171
184
  var theme = _a.theme, styleTheme = _a.styleTheme;
172
185
  return styleTheme === 'main' ? theme.spacing.spacingA : '7px';
@@ -174,10 +187,10 @@ var S_MainTabItemWrapper = styled_components_1.default.div(templateObject_6 || (
174
187
  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"])));
175
188
  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) {
176
189
  var theme = _a.theme, styleTheme = _a.styleTheme;
177
- return styleTheme !== 'main' && theme.ui_cpnt_tabbar_base_area_sub;
190
+ return styleTheme !== 'main' && styleTheme !== 'content2' && theme.ui_cpnt_tabbar_base_area_sub;
178
191
  }, function (_a) {
179
192
  var styleTheme = _a.styleTheme;
180
- return styleTheme === 'main' && "border-bottom: 1px solid #EFF0F3;";
193
+ return (styleTheme === 'main' || styleTheme === 'content2') && "border-bottom: 1px solid #EFF0F3;";
181
194
  }, function (_a) {
182
195
  var styleTheme = _a.styleTheme;
183
196
  return (styleTheme === 'main' ? '26px' : '32px');
package/dist/src/mobile/components/MobileTabBar/MobileTabBar.d.ts CHANGED
@@ -7,9 +7,11 @@ type TextObj = {
7
7
  };
8
8
  type MobileTabBarProps = {
9
9
  itemArray?: PDSTabItemOption[];
10
+ /** @description styleTheme이 'main'일 때만 colorTheme이 존재합니다. */
10
11
  colorTheme?: MobileTabBarColorThemeType;
12
+ styleTheme?: 'main' | 'content';
11
13
  /** @deprecated v1.5 해당 필드 대신 itemArray를 사용하세요. */
12
14
  textArray?: TextObj[];
13
15
  };
14
- declare function MobileTabBar({ itemArray, colorTheme, textArray }: MobileTabBarProps): JSX.Element;
16
+ declare function MobileTabBar({ itemArray, colorTheme, styleTheme, textArray }: MobileTabBarProps): JSX.Element;
15
17
  export default MobileTabBar;
package/dist/src/mobile/components/MobileTabBar/MobileTabBar.js CHANGED
@@ -32,22 +32,30 @@ var mobileTabBarThemes = {
32
32
  activeTextColor: 'sysTextPrimary',
33
33
  inActiveTextColor: 'sysTextTertiary',
34
34
  activeIndicatorBorderColor: 'ui_cpnt_tabbar_border_active_indicator'
35
+ },
36
+ content: {
37
+ activeTextColor: 'sysTextPrimary',
38
+ inActiveTextColor: 'sysTextTertiary'
35
39
  }
36
40
  };
37
41
  function MobileTabBar(_a) {
38
- var itemArray = _a.itemArray, _b = _a.colorTheme, colorTheme = _b === void 0 ? 'none' : _b, textArray = _a.textArray;
42
+ var itemArray = _a.itemArray, _b = _a.colorTheme, colorTheme = _b === void 0 ? 'none' : _b, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'main' : _c, textArray = _a.textArray;
39
43
  var history = (0, react_router_dom_1.useHistory)();
40
44
  var pathname = (0, react_router_dom_1.useLocation)().pathname;
41
45
  if (itemArray) {
42
- var hasScroll_1 = itemArray.length > 3;
46
+ var hasScroll_1 = styleTheme === 'content' ? true : itemArray.length > 3;
43
47
  var handleClickTabItem_1 = function (item, e) {
44
48
  if (item.onClick) {
45
49
  item.onClick(e);
46
50
  }
47
51
  };
48
- return ((0, jsx_runtime_1.jsx)(S_TabBarContainer, { children: (0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "MobileTabBar", "x-pds-element-type": "component", "x-pds-device-type": "mobile", hasScroll: hasScroll_1 }, { children: itemArray.map(function (item, index) { return ((0, jsx_runtime_1.jsxs)(S_TabWrapper, __assign({ hasScroll: hasScroll_1, colorTheme: colorTheme, isActive: item.isActive, onClick: function (e) { return handleClickTabItem_1(item, e); } }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "body2Bold", wordBreak: hasScroll_1 ? 'keep_all' : 'normal', colorTheme: item.isActive
49
- ? mobileTabBarThemes[colorTheme].activeTextColor
50
- : mobileTabBarThemes[colorTheme].inActiveTextColor, singleLineMode: "use" }), item.isActive && (0, jsx_runtime_1.jsx)(S_Indicator, { colorTheme: colorTheme })] }), index)); }) })) }));
52
+ return ((0, jsx_runtime_1.jsx)(S_TabBarContainer, { children: (0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "MobileTabBar", "x-pds-element-type": "component", "x-pds-device-type": "mobile", styleTheme: styleTheme, hasScroll: hasScroll_1 }, { children: itemArray.map(function (item, index) { return ((0, jsx_runtime_1.jsxs)(S_TabWrapper, __assign({ hasScroll: hasScroll_1, styleTheme: styleTheme, colorTheme: colorTheme, isActive: item.isActive, onClick: function (e) { return handleClickTabItem_1(item, e); } }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: styleTheme === 'main' ? 'body2Bold' : 'caption1Bold', wordBreak: hasScroll_1 ? 'keep_all' : 'normal', colorTheme: styleTheme === 'content'
53
+ ? item.isActive
54
+ ? mobileTabBarThemes.content.activeTextColor
55
+ : mobileTabBarThemes.content.inActiveTextColor
56
+ : item.isActive
57
+ ? mobileTabBarThemes[colorTheme].activeTextColor
58
+ : mobileTabBarThemes[colorTheme].inActiveTextColor, singleLineMode: "use" }), item.isActive && styleTheme !== 'content' && (0, jsx_runtime_1.jsx)(S_Indicator, { colorTheme: colorTheme })] }), index)); }) })) }));
51
59
  }
52
60
  if (textArray) {
53
61
  var hasScroll_2 = textArray.length > 3;
@@ -56,7 +64,7 @@ function MobileTabBar(_a) {
56
64
  history.push(value.path);
57
65
  }
58
66
  };
59
- return ((0, jsx_runtime_1.jsx)(S_TabBarContainer, { children: (0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "MobileTabBar", "x-pds-element-type": "component", "x-pds-device-type": "mobile", hasScroll: hasScroll_2 }, { children: textArray.map(function (value) { return ((0, jsx_runtime_1.jsxs)(S_TabWrapper, __assign({ hasScroll: hasScroll_2, colorTheme: colorTheme, isActive: pathname === value.path, onClick: function () { return handleClick_1(value); } }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: value.title, textAlign: "center", styleTheme: "body2Bold", wordBreak: hasScroll_2 ? 'keep_all' : 'normal', colorTheme: pathname === value.path ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }), pathname === value.path && (0, jsx_runtime_1.jsx)(S_Indicator, { colorTheme: colorTheme })] }), value.path)); }) })) }));
67
+ return ((0, jsx_runtime_1.jsx)(S_TabBarContainer, { children: (0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "MobileTabBar", "x-pds-element-type": "component", "x-pds-device-type": "mobile", hasScroll: hasScroll_2, styleTheme: styleTheme }, { children: textArray.map(function (value) { return ((0, jsx_runtime_1.jsxs)(S_TabWrapper, __assign({ hasScroll: hasScroll_2, styleTheme: styleTheme, colorTheme: colorTheme, isActive: pathname === value.path, onClick: function () { return handleClick_1(value); } }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: value.title, textAlign: "center", styleTheme: "body2Bold", wordBreak: hasScroll_2 ? 'keep_all' : 'normal', colorTheme: pathname === value.path ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }), pathname === value.path && styleTheme !== 'content' && ((0, jsx_runtime_1.jsx)(S_Indicator, { colorTheme: colorTheme }))] }), value.path)); }) })) }));
60
68
  }
61
69
  return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
62
70
  }
@@ -64,29 +72,41 @@ var S_Indicator = styled_components_1.default.div(templateObject_1 || (templateO
64
72
  var colorTheme = _a.colorTheme, theme = _a.theme;
65
73
  return theme[mobileTabBarThemes[colorTheme].activeIndicatorBorderColor];
66
74
  });
67
- var S_TabWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-bottom: ", ";\n box-sizing: border-box;\n display: ", ";\n flex: 1;\n justify-content: center;\n padding: 0 ", ";\n position: relative;\n\n &:last-child {\n margin-right: 0;\n }\n\n & > div {\n white-space: ", ";\n }\n"], ["\n align-items: center;\n background-color: ", ";\n border-bottom: ", ";\n box-sizing: border-box;\n display: ", ";\n flex: 1;\n justify-content: center;\n padding: 0 ", ";\n position: relative;\n\n &:last-child {\n margin-right: 0;\n }\n\n & > div {\n white-space: ", ";\n }\n"])), function (_a) {
75
+ var S_TabWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n display: ", ";\n flex: 1;\n justify-content: center;\n padding: 0 ", ";\n position: relative;\n\n &:last-child {\n margin-right: 0;\n }\n\n & > div {\n white-space: ", ";\n }\n"], ["\n align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n display: ", ";\n flex: 1;\n justify-content: center;\n padding: 0 ", ";\n position: relative;\n\n &:last-child {\n margin-right: 0;\n }\n\n & > div {\n white-space: ", ";\n }\n"])), function (_a) {
68
76
  var isActive = _a.isActive, theme = _a.theme;
69
77
  return isActive && theme.ui_cpnt_tabbar_base_area;
70
- }, function (_a) {
71
- var theme = _a.theme;
72
- return "1px solid ".concat(theme.ui_cpnt_divider);
73
78
  }, function (_a) {
74
79
  var hasScroll = _a.hasScroll;
75
80
  return (hasScroll ? 'inline-flex' : 'flex');
76
81
  }, function (_a) {
77
- var theme = _a.theme;
78
- return theme.spacing.spacingD;
82
+ var styleTheme = _a.styleTheme, theme = _a.theme;
83
+ return (styleTheme === 'main' ? theme.spacing.spacingD : "10px");
79
84
  }, function (_a) {
80
85
  var hasScroll = _a.hasScroll;
81
- return hasScroll && 'nowrap';
86
+ return (hasScroll ? 'nowrap' : 'normal');
82
87
  });
83
- var S_TabBarContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n overflow-x: auto;\n\n &::-webkit-scrollbar {\n display: none;\n }\n"], ["\n background-color: ", ";\n overflow-x: auto;\n\n &::-webkit-scrollbar {\n display: none;\n }\n"])), function (_a) {
88
+ var S_TabBarContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n border-bottom: ", ";\n overflow-x: auto;\n\n &::-webkit-scrollbar {\n display: none;\n }\n"], ["\n background-color: ", ";\n border-bottom: ", ";\n overflow-x: auto;\n\n &::-webkit-scrollbar {\n display: none;\n }\n"])), function (_a) {
84
89
  var theme = _a.theme;
85
90
  return theme.ui_cpnt_tabbar_base_area;
91
+ }, function (_a) {
92
+ var theme = _a.theme;
93
+ return "1px solid ".concat(theme.ui_cpnt_divider);
86
94
  });
87
- var S_TabBar = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n box-sizing: border-box;\n display: ", ";\n height: 48px;\n width: 100%;\n"], ["\n box-sizing: border-box;\n display: ", ";\n height: 48px;\n width: 100%;\n"])), function (_a) {
95
+ var S_TabBar = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n box-sizing: border-box;\n display: ", ";\n height: ", ";\n width: ", ";\n\n & > :first-child {\n padding-left: ", ";\n }\n\n & > :last-child {\n padding-right: ", ";\n }\n"], ["\n box-sizing: border-box;\n display: ", ";\n height: ", ";\n width: ", ";\n\n & > :first-child {\n padding-left: ", ";\n }\n\n & > :last-child {\n padding-right: ", ";\n }\n"])), function (_a) {
88
96
  var hasScroll = _a.hasScroll;
89
97
  return (hasScroll ? 'inline-flex' : 'flex');
98
+ }, function (_a) {
99
+ var styleTheme = _a.styleTheme;
100
+ return (styleTheme === 'main' ? '48px' : '46px');
101
+ }, function (_a) {
102
+ var styleTheme = _a.styleTheme;
103
+ return (styleTheme === 'main' ? '100%' : undefined);
104
+ }, function (_a) {
105
+ var styleTheme = _a.styleTheme, theme = _a.theme;
106
+ return styleTheme === 'content' && theme.spacing.spacingE;
107
+ }, function (_a) {
108
+ var styleTheme = _a.styleTheme, theme = _a.theme;
109
+ return styleTheme === 'content' && theme.spacing.spacingE;
90
110
  });
91
111
  exports.default = MobileTabBar;
92
112
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "2.2.212",
3
+ "version": "2.2.213",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,7 +1,7 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v2.2.212]
2
+ ## [v2.2.213]
3
3
  ## daily|https://design.storybook.publ.biz/
4
4
 
5
5
  ### 업데이트 사항
6
- * [PDS-1342] 모달류 컴포넌트에 스크롤 추가
7
- * [PDS-1337] Calendar 날짜 드래그로 해당 구간 이벤트 목록 전체 선택 가능한 기능 추가
6
+ * [PDS-1341] DesktopTabBar styleTheme prop에 content2 값 추가 건
7
+ * [PDS-1343] MobileTabBar styleTheme prop 추가 건