pds-dev-kit-web 2.1.0 → 2.1.1

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 (21) hide show
  1. package/dist/src/desktop/components/IconButton/IconButton.d.ts +1 -1
  2. package/dist/src/desktop/components/Select/Select.js +12 -6
  3. package/dist/src/desktop/components/TextButton/TextButton.d.ts +1 -1
  4. package/dist/src/desktop/components/TextButton/TextButton.js +3 -0
  5. package/dist/src/desktop/components/TextField/TextField.js +3 -3
  6. package/dist/src/desktop/components/UploadIconButton/UploadIconButton.d.ts +5 -3
  7. package/dist/src/desktop/components/UploadIconButton/UploadIconButton.js +52 -4
  8. package/dist/src/desktop/components/UploadTextButton/UploadTextButton.d.ts +1 -1
  9. package/dist/src/desktop/components/UploadTextButton/UploadTextButton.js +3 -0
  10. package/dist/src/mobile/components/IconButton/IconButton.d.ts +1 -1
  11. package/dist/src/mobile/components/IconButton/IconButton.js +1 -1
  12. package/dist/src/mobile/components/Select/Select.js +12 -6
  13. package/dist/src/mobile/components/TextButton/TextButton.d.ts +1 -1
  14. package/dist/src/mobile/components/TextButton/TextButton.js +3 -0
  15. package/dist/src/mobile/components/TextField/TextField.js +3 -3
  16. package/dist/src/mobile/components/UploadIconButton/UploadIconButton.d.ts +1 -1
  17. package/dist/src/mobile/components/UploadIconButton/UploadIconButton.js +1 -1
  18. package/dist/src/mobile/components/UploadTextButton/UploadTextButton.d.ts +1 -1
  19. package/dist/src/mobile/components/UploadTextButton/UploadTextButton.js +3 -0
  20. package/package.json +1 -1
  21. package/release-note.md +18 -7
package/dist/src/desktop/components/IconButton/IconButton.d.ts CHANGED
@@ -8,7 +8,7 @@ export declare type IconButtonProps = {
8
8
  baseSize?: 'xxlarge' | 'large' | 'medium' | 'small' | 'xsmall';
9
9
  baseColorKey?: UiColors;
10
10
  borderColorKey?: UiColors;
11
- iconSize?: 12 | 16 | 20 | 24 | 48 | 72;
11
+ iconSize?: 12 | 16 | 20 | 24 | 32 | 48 | 72;
12
12
  iconFillType?: 'fill' | 'line';
13
13
  iconName: FillIconNameKeys | LineIconNameKeys;
14
14
  iconColorKey?: UiColors;
package/dist/src/desktop/components/Select/Select.js CHANGED
@@ -63,7 +63,7 @@ function Select(_a) {
63
63
  return 'ui_cpnt_select_icon_01';
64
64
  }
65
65
  };
66
- return ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ "x-pds-name": "Select", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, tabIndex: 0, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_Icon_Wrapper, __assign({ state: state }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_arrow_down", colorKey: getIconColorKey() }, void 0) }), void 0), (0, jsx_runtime_1.jsxs)(S_Select, __assign({ disabled: state === 'disabled' || state === 'read_only', state: state, colorTheme: colorTheme, onChange: handleChange, defaultValue: (_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _b !== void 0 ? _b : HINT, value: value || undefined }, { children: [hintText && ((0, jsx_runtime_1.jsx)("option", __assign({ disabled: true, value: HINT }, { children: hintText }), void 0)), valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)("option", __assign({ value: el.value }, { children: el.text }), el.value)); })] }), void 0)] }), void 0));
66
+ return ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ "x-pds-name": "Select", "x-pds-element-type": "component", "x-pds-device-type": "desktop", "$size": size, responsiveMode: responsiveMode, tabIndex: 0, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_Icon_Wrapper, __assign({ state: state }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_arrow_down", colorKey: getIconColorKey() }, void 0) }), void 0), (0, jsx_runtime_1.jsxs)(S_Select, __assign({ disabled: state === 'disabled' || state === 'read_only', state: state, "$size": size, colorTheme: colorTheme, onChange: handleChange, defaultValue: (_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _b !== void 0 ? _b : HINT, value: value || undefined }, { children: [hintText && ((0, jsx_runtime_1.jsx)("option", __assign({ disabled: true, value: HINT }, { children: hintText }), void 0)), valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)("option", __assign({ value: el.value }, { children: el.text }), el.value)); })] }), void 0)] }), void 0));
67
67
  }
68
68
  var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 48px;\n width: 432px;\n"], ["\n height: 48px;\n width: 432px;\n"])));
69
69
  var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 40px;\n width: 188px;\n"], ["\n height: 40px;\n width: 188px;\n"])));
@@ -97,14 +97,14 @@ var dark = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 =
97
97
  return theme.ui_cpnt_select_text_darktheme_enabled;
98
98
  });
99
99
  var S_Box = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: relative;\n z-index: 0;\n\n ", "\n ", ";\n ", "\n"], ["\n position: relative;\n z-index: 0;\n\n ", "\n ", ";\n ", "\n"])), function (_a) {
100
- var size = _a.size;
101
- return size &&
100
+ var $size = _a.$size;
101
+ return $size &&
102
102
  {
103
103
  large: large,
104
104
  medium: medium,
105
105
  small: small,
106
106
  rlarge: rlarge
107
- }[size];
107
+ }[$size];
108
108
  }, function (_a) {
109
109
  var responsiveMode = _a.responsiveMode;
110
110
  return responsiveMode === 'use' && 'width: 100%';
@@ -146,8 +146,14 @@ var S_Select = styled_components_1.default.select(templateObject_11 || (template
146
146
  var theme = _a.theme;
147
147
  return theme.ui_cpnt_select_border_normal;
148
148
  }, function (_a) {
149
- var size = _a.size;
150
- return (size === 'small' ? '10px' : '14px');
149
+ var $size = _a.$size;
150
+ return $size &&
151
+ {
152
+ small: '10px',
153
+ medium: '12px',
154
+ large: '14px',
155
+ rlarge: '14px'
156
+ }[$size];
151
157
  }, function (_a) {
152
158
  var theme = _a.theme;
153
159
  return theme.ui_cpnt_select_text_hint;
package/dist/src/desktop/components/TextButton/TextButton.d.ts CHANGED
@@ -7,7 +7,7 @@ export declare type TextButtonProps = {
7
7
  fontWeight?: 'bold' | 'regular';
8
8
  type?: 'submit' | 'reset' | 'button';
9
9
  state?: 'normal' | 'disabled';
10
- colorTheme?: 'none' | 'red' | 'grey_01' | 'white' | 'white2';
10
+ colorTheme?: 'none' | 'red' | 'grey_01' | 'grey2' | 'white' | 'white2';
11
11
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
12
12
  };
13
13
  declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, colorTheme, onClick, ...rest }: TextButtonProps): JSX.Element;
package/dist/src/desktop/components/TextButton/TextButton.js CHANGED
@@ -60,6 +60,7 @@ var textColor = {
60
60
  none: 'usrTextBrandPrimary',
61
61
  red: 'sysTextError',
62
62
  grey_01: 'sysTextPrimary',
63
+ grey2: 'sysTextSecondary',
63
64
  white: 'sysTextWhite',
64
65
  white2: 'sysTextWhite'
65
66
  };
@@ -110,6 +111,8 @@ var S_Button = styled_components_1.default.button(templateObject_8 || (templateO
110
111
  case 'red':
111
112
  case 'grey_01':
112
113
  return colorThemeDefault;
114
+ case 'grey2':
115
+ return colorThemeDefault;
113
116
  case 'white':
114
117
  return colorThemeWhite;
115
118
  case 'white2':
package/dist/src/desktop/components/TextField/TextField.js CHANGED
@@ -186,14 +186,14 @@ var small = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 =
186
186
  var theme = _a.theme;
187
187
  return theme.spacing.spacingB;
188
188
  });
189
- var medium = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: 40px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"], ["\n height: 40px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"])), function (_a) {
189
+ var medium = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n border-radius: 12px;\n height: 40px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"], ["\n border-radius: 12px;\n height: 40px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"])), function (_a) {
190
190
  var theme = _a.theme;
191
191
  return theme.spacing.spacingC;
192
192
  }, function (_a) {
193
193
  var theme = _a.theme;
194
194
  return theme.spacing.spacingB;
195
195
  });
196
- var large = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n height: 48px;\n padding-left: ", ";\n padding-right: ", ";\n width: ", ";\n ", "\n ", "\n"], ["\n height: 48px;\n padding-left: ", ";\n padding-right: ", ";\n width: ", ";\n ", "\n ", "\n"])), function (_a) {
196
+ var large = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n border-radius: 14px;\n height: 48px;\n padding-left: ", ";\n padding-right: ", ";\n width: ", ";\n ", "\n ", "\n"], ["\n border-radius: 14px;\n height: 48px;\n padding-left: ", ";\n padding-right: ", ";\n width: ", ";\n ", "\n ", "\n"])), function (_a) {
197
197
  var theme = _a.theme;
198
198
  return theme.spacing.spacingD;
199
199
  }, function (_a) {
@@ -311,7 +311,7 @@ var backgroundActiveColor = (0, styled_components_1.css)(templateObject_17 || (t
311
311
  }
312
312
  });
313
313
  var normalActionColor = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n"], ["\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n"])), backgroundHoverColor, backgroundActiveColor);
314
- var S_TextFieldWrapper = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n align-items: center;\n border-radius: 14px;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n ", ";\n ", ";\n\n ", "\n\n ", "\n\n ", ";\n ", "\n"], ["\n align-items: center;\n border-radius: 14px;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n ", ";\n ", ";\n\n ", "\n\n ", "\n\n ", ";\n ", "\n"])), function (_a) {
314
+ var S_TextFieldWrapper = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n align-items: center;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n ", ";\n ", ";\n\n ", "\n\n ", "\n\n ", ";\n ", "\n"], ["\n align-items: center;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n ", ";\n ", ";\n\n ", "\n\n ", "\n\n ", ";\n ", "\n"])), function (_a) {
315
315
  var state = _a.state;
316
316
  return (state === 'disabled' ? 'not-allowed' : 'text');
317
317
  }, function (_a) {
package/dist/src/desktop/components/UploadIconButton/UploadIconButton.d.ts CHANGED
@@ -1,12 +1,12 @@
1
1
  /// <reference types="react" />
2
- import type { FillIconNameKeys, LineIconNameKeys, UiColors } from '../../../common';
2
+ import type { FillIconNameKeys, LineIconNameKeys, PDSTextType, UiColors } from '../../../common';
3
3
  export declare type UploadIconButtonProps = {
4
4
  fillType?: 'fill' | 'line';
5
5
  shapeType?: 'circular' | 'rectangle';
6
6
  baseSize?: 'xxlarge' | 'large' | 'medium' | 'small' | 'xsmall';
7
7
  baseColorKey?: UiColors;
8
8
  borderColorKey?: UiColors;
9
- iconSize?: 12 | 16 | 20 | 24 | 48 | 72;
9
+ iconSize?: 12 | 16 | 20 | 24 | 32 | 48 | 72;
10
10
  iconFillType?: 'fill' | 'line';
11
11
  iconName: FillIconNameKeys | LineIconNameKeys;
12
12
  iconColorKey?: UiColors;
@@ -15,7 +15,9 @@ export declare type UploadIconButtonProps = {
15
15
  state?: 'normal' | 'disabled';
16
16
  accept?: string;
17
17
  multipleMode?: 'none' | 'use';
18
+ tooltipText?: PDSTextType;
19
+ tooltipPosition?: 'left_top' | 'left_bottom' | 'center_top' | 'center_bottom' | 'right_top' | 'right_bottom';
18
20
  onClick?: (e: React.ChangeEvent<HTMLInputElement>) => void;
19
21
  };
20
- declare function UploadIconButton({ fillType, shapeType, baseSize, baseColorKey, borderColorKey, iconSize, iconFillType, iconName, iconColorKey, shadow, colorTheme, state, accept, multipleMode, onClick }: UploadIconButtonProps): JSX.Element;
22
+ declare function UploadIconButton({ fillType, shapeType, baseSize, baseColorKey, borderColorKey, iconSize, iconFillType, iconName, iconColorKey, shadow, colorTheme, state, accept, multipleMode, tooltipText, tooltipPosition, onClick }: UploadIconButtonProps): JSX.Element;
21
23
  export default UploadIconButton;
package/dist/src/desktop/components/UploadIconButton/UploadIconButton.js CHANGED
@@ -35,12 +35,19 @@ var __importStar = (this && this.__importStar) || function (mod) {
35
35
  };
36
36
  Object.defineProperty(exports, "__esModule", { value: true });
37
37
  var jsx_runtime_1 = require("react/jsx-runtime");
38
+ var react_1 = require("react");
38
39
  var styled_components_1 = __importStar(require("styled-components"));
39
40
  var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
40
41
  var hybrid_1 = require("../../../hybrid");
42
+ var constants_1 = require("../IconButton/constants");
43
+ var TextLabel_1 = require("../TextLabel");
41
44
  var types_1 = require("./types");
42
45
  function UploadIconButton(_a) {
43
- var _b = _a.fillType, fillType = _b === void 0 ? 'fill' : _b, _c = _a.shapeType, shapeType = _c === void 0 ? 'rectangle' : _c, _d = _a.baseSize, baseSize = _d === void 0 ? 'small' : _d, baseColorKey = _a.baseColorKey, borderColorKey = _a.borderColorKey, _e = _a.iconSize, iconSize = _e === void 0 ? 24 : _e, _f = _a.iconFillType, iconFillType = _f === void 0 ? 'line' : _f, _g = _a.iconName, iconName = _g === void 0 ? 'ic_upload' : _g, iconColorKey = _a.iconColorKey, _h = _a.shadow, shadow = _h === void 0 ? 'hidden' : _h, _j = _a.colorTheme, colorTheme = _j === void 0 ? 'none' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, _l = _a.accept, accept = _l === void 0 ? '*' : _l, _m = _a.multipleMode, multipleMode = _m === void 0 ? 'none' : _m, onClick = _a.onClick;
46
+ var _b = _a.fillType, fillType = _b === void 0 ? 'fill' : _b, _c = _a.shapeType, shapeType = _c === void 0 ? 'rectangle' : _c, _d = _a.baseSize, baseSize = _d === void 0 ? 'small' : _d, baseColorKey = _a.baseColorKey, borderColorKey = _a.borderColorKey, _e = _a.iconSize, iconSize = _e === void 0 ? 24 : _e, _f = _a.iconFillType, iconFillType = _f === void 0 ? 'line' : _f, _g = _a.iconName, iconName = _g === void 0 ? 'ic_upload' : _g, iconColorKey = _a.iconColorKey, _h = _a.shadow, shadow = _h === void 0 ? 'hidden' : _h, _j = _a.colorTheme, colorTheme = _j === void 0 ? 'none' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, _l = _a.accept, accept = _l === void 0 ? '*' : _l, _m = _a.multipleMode, multipleMode = _m === void 0 ? 'none' : _m, tooltipText = _a.tooltipText, _o = _a.tooltipPosition, tooltipPosition = _o === void 0 ? 'center_bottom' : _o, onClick = _a.onClick;
47
+ var _p = (0, react_1.useState)(false), isTooltipOpen = _p[0], setIsTooltipOpen = _p[1];
48
+ var handleTooltipToggle = function (value) {
49
+ setIsTooltipOpen(value);
50
+ };
44
51
  var handleClick = function (e) {
45
52
  if (onClick) {
46
53
  onClick(e);
@@ -59,7 +66,7 @@ function UploadIconButton(_a) {
59
66
  }
60
67
  return types_1.iconStateColors[fillType];
61
68
  };
62
- return ((0, jsx_runtime_1.jsxs)(S_UploadIconButton, __assign({ "x-pds-name": "UploadIconButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, isDisabled: state === 'disabled' }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: iconSize, colorKey: IconColorSelect(), fillType: iconFillType }, void 0)] }), void 0));
69
+ return ((0, jsx_runtime_1.jsxs)(S_UploadIconButton, __assign({ "x-pds-name": "UploadIconButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, isDisabled: state === 'disabled', onMouseEnter: function () { return tooltipText && handleTooltipToggle(true); }, onMouseLeave: function () { return tooltipText && handleTooltipToggle(false); } }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: iconSize, colorKey: IconColorSelect(), fillType: iconFillType }, void 0), tooltipText && isTooltipOpen && ((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", isTooltipOpen: isTooltipOpen, tooltipPosition: tooltipPosition, baseSize: baseSize }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: tooltipText, colorOverride: "ui_cpnt_textlabel_button_tooltip", styleTheme: "caption2Regular", colorTheme: "sysTextSecondary" }, void 0) }), void 0))] }), void 0));
63
70
  }
64
71
  var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
65
72
  var theme = _a.theme, baseColorKey = _a.baseColorKey;
@@ -67,7 +74,7 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObj
67
74
  ? ''
68
75
  : theme.ui_cpnt_button_fill_base_disabled;
69
76
  });
70
- var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n position: relative;\n\n &::before {\n content: '';\n border-radius: inherit;\n position: absolute;\n background-color: transparent;\n height: 100%;\n width: 100%;\n ", "\n }\n\n &:hover:not([disabled])::before {\n background-color: ", ";\n }\n\n &:active:not([disabled])::before {\n background-color: ", ";\n }\n\n ", ";\n"], ["\n background-color: ", ";\n border: none;\n position: relative;\n\n &::before {\n content: '';\n border-radius: inherit;\n position: absolute;\n background-color: transparent;\n height: 100%;\n width: 100%;\n ", "\n }\n\n &:hover:not([disabled])::before {\n background-color: ", ";\n }\n\n &:active:not([disabled])::before {\n background-color: ", ";\n }\n\n ", ";\n"])), function (_a) {
77
+ var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n position: relative;\n\n &::before {\n background-color: transparent;\n border-radius: inherit;\n content: '';\n height: 100%;\n position: absolute;\n width: 100%;\n ", "\n }\n\n &:hover:not([disabled])::before {\n background-color: ", ";\n }\n\n &:active:not([disabled])::before {\n background-color: ", ";\n }\n\n ", ";\n"], ["\n background-color: ", ";\n border: none;\n position: relative;\n\n &::before {\n background-color: transparent;\n border-radius: inherit;\n content: '';\n height: 100%;\n position: absolute;\n width: 100%;\n ", "\n }\n\n &:hover:not([disabled])::before {\n background-color: ", ";\n }\n\n &:active:not([disabled])::before {\n background-color: ", ";\n }\n\n ", ";\n"])), function (_a) {
71
78
  var theme = _a.theme, baseColorKey = _a.baseColorKey;
72
79
  return baseColorKey ? theme[baseColorKey] : theme.ui_cpnt_button_fill_base_primary;
73
80
  }, transitionStyle_1.ButtonTransition, function (_a) {
@@ -157,5 +164,46 @@ var S_UploadIconButton = styled_components_1.default.label(templateObject_12 ||
157
164
  xsmall: xsmall
158
165
  }[baseSize];
159
166
  });
167
+ var tooltipPositionSpacing = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (_a) {
168
+ var baseSize = _a.baseSize;
169
+ return baseSize &&
170
+ {
171
+ xxlarge: constants_1.TOOLTIP_POSITION_SPACING.xxlarge,
172
+ large: constants_1.TOOLTIP_POSITION_SPACING.large,
173
+ medium: constants_1.TOOLTIP_POSITION_SPACING.medium,
174
+ small: constants_1.TOOLTIP_POSITION_SPACING.small,
175
+ xsmall: constants_1.TOOLTIP_POSITION_SPACING.xsmall
176
+ }[baseSize];
177
+ });
178
+ var tooltipLeftTop = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n bottom: ", ";\n right: 0;\n"], ["\n bottom: ", ";\n right: 0;\n"])), tooltipPositionSpacing);
179
+ var tooltipLeftBottom = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n right: 0;\n top: ", ";\n"], ["\n right: 0;\n top: ", ";\n"])), tooltipPositionSpacing);
180
+ var tooltipCenterTop = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n bottom: ", ";\n"], ["\n bottom: ", ";\n"])), tooltipPositionSpacing);
181
+ var tooltipCenterBottom = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n top: ", ";\n"], ["\n top: ", ";\n"])), tooltipPositionSpacing);
182
+ var tooltipRightTop = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n bottom: ", ";\n left: 0;\n"], ["\n bottom: ", ";\n left: 0;\n"])), tooltipPositionSpacing);
183
+ var tooltipRightBottom = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n left: 0;\n top: ", ";\n"], ["\n left: 0;\n top: ", ";\n"])), tooltipPositionSpacing);
184
+ var S_TooltipWrapper = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n padding: ", ";\n position: absolute;\n width: max-content;\n z-index: 400;\n\n ", ";\n\n ", "\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n padding: ", ";\n position: absolute;\n width: max-content;\n z-index: 400;\n\n ", ";\n\n ", "\n"])), function (_a) {
185
+ var theme = _a.theme;
186
+ return theme.ui_cpnt_button_tooltip_base;
187
+ }, function (_a) {
188
+ var theme = _a.theme;
189
+ return theme.spacing.spacingA;
190
+ }, function (_a) {
191
+ var theme = _a.theme;
192
+ return theme.spacing.spacingA + " " + theme.spacing.spacingB;
193
+ }, function (_a) {
194
+ var isTooltipOpen = _a.isTooltipOpen;
195
+ return !isTooltipOpen && 'display: none';
196
+ }, function (_a) {
197
+ var tooltipPosition = _a.tooltipPosition;
198
+ return tooltipPosition &&
199
+ {
200
+ left_top: tooltipLeftTop,
201
+ left_bottom: tooltipLeftBottom,
202
+ center_top: tooltipCenterTop,
203
+ center_bottom: tooltipCenterBottom,
204
+ right_top: tooltipRightTop,
205
+ right_bottom: tooltipRightBottom
206
+ }[tooltipPosition];
207
+ });
160
208
  exports.default = UploadIconButton;
161
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
209
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20;
package/dist/src/desktop/components/UploadTextButton/UploadTextButton.d.ts CHANGED
@@ -6,7 +6,7 @@ declare type UploadTextButtonProps = {
6
6
  responsiveMode?: 'none' | 'use';
7
7
  fontWeight?: 'bold' | 'regular';
8
8
  state?: 'normal' | 'disabled';
9
- colorTheme?: 'none' | 'red' | 'grey_01' | 'white' | 'white2';
9
+ colorTheme?: 'none' | 'red' | 'grey_01' | 'grey2' | 'white' | 'white2';
10
10
  accept?: string;
11
11
  multipleMode?: 'none' | 'use';
12
12
  onClick?: (e: React.ChangeEvent<HTMLInputElement>) => void;
package/dist/src/desktop/components/UploadTextButton/UploadTextButton.js CHANGED
@@ -49,6 +49,7 @@ var textColor = {
49
49
  none: 'usrTextBrandPrimary',
50
50
  red: 'sysTextError',
51
51
  grey_01: 'sysTextPrimary',
52
+ grey2: 'sysTextSecondary',
52
53
  white: 'sysTextWhite',
53
54
  white2: 'sysTextWhite'
54
55
  };
@@ -103,6 +104,8 @@ var S_UploadTextButton = styled_components_1.default.label(templateObject_8 || (
103
104
  case 'red':
104
105
  case 'grey_01':
105
106
  return colorThemeDefault;
107
+ case 'grey2':
108
+ return colorThemeDefault;
106
109
  case 'white':
107
110
  return colorThemeWhite;
108
111
  case 'white2':
package/dist/src/mobile/components/IconButton/IconButton.d.ts CHANGED
@@ -6,7 +6,7 @@ export declare type IconButtonProps = {
6
6
  baseSize?: 'xxlarge' | 'large' | 'medium' | 'small' | 'xsmall';
7
7
  baseColorKey?: UiColors;
8
8
  borderColorKey?: UiColors;
9
- iconSize?: 12 | 16 | 20 | 24 | 48 | 72;
9
+ iconSize?: 12 | 16 | 20 | 24 | 32 | 48 | 72;
10
10
  iconFillType?: 'fill' | 'line';
11
11
  iconName: FillIconNameKeys | LineIconNameKeys;
12
12
  iconColorKey?: UiColors;
package/dist/src/mobile/components/IconButton/IconButton.js CHANGED
@@ -81,7 +81,7 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObj
81
81
  ? ''
82
82
  : theme.ui_cpnt_button_fill_base_disabled;
83
83
  });
84
- var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n position: relative;\n\n &::before {\n content: '';\n border-radius: inherit;\n position: absolute;\n background-color: transparent;\n height: 100%;\n width: 100%;\n ", "\n }\n\n &:active:enabled::before {\n background-color: ", ";\n }\n\n ", ";\n"], ["\n background-color: ", ";\n border: none;\n position: relative;\n\n &::before {\n content: '';\n border-radius: inherit;\n position: absolute;\n background-color: transparent;\n height: 100%;\n width: 100%;\n ", "\n }\n\n &:active:enabled::before {\n background-color: ", ";\n }\n\n ", ";\n"])), function (_a) {
84
+ var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n position: relative;\n\n &::before {\n background-color: transparent;\n border-radius: inherit;\n content: '';\n height: 100%;\n position: absolute;\n width: 100%;\n ", "\n }\n\n &:active:enabled::before {\n background-color: ", ";\n }\n\n ", ";\n"], ["\n background-color: ", ";\n border: none;\n position: relative;\n\n &::before {\n background-color: transparent;\n border-radius: inherit;\n content: '';\n height: 100%;\n position: absolute;\n width: 100%;\n ", "\n }\n\n &:active:enabled::before {\n background-color: ", ";\n }\n\n ", ";\n"])), function (_a) {
85
85
  var theme = _a.theme, baseColorKey = _a.baseColorKey;
86
86
  return baseColorKey ? theme[baseColorKey] : theme.ui_cpnt_button_fill_base_primary;
87
87
  }, transitionStyle_1.ButtonTransition, function (_a) {
package/dist/src/mobile/components/Select/Select.js CHANGED
@@ -59,7 +59,7 @@ function Select(_a) {
59
59
  }
60
60
  return 'ui_cpnt_select_icon_01';
61
61
  };
62
- return ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ "x-pds-name": "Select", "x-pds-element-type": "component", "x-pds-device-type": "mobile", size: size, responsiveMode: responsiveMode, tabIndex: 0, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_Icon_Wrapper, __assign({ state: state }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_arrow_down", colorKey: getIconColorKey() }, void 0) }), void 0), (0, jsx_runtime_1.jsxs)(S_Select, __assign({ disabled: state === 'disabled' || state === 'read_only', state: state, colorTheme: colorTheme, onChange: handleChange, defaultValue: (_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _b !== void 0 ? _b : HINT, value: value || undefined }, { children: [hintText && ((0, jsx_runtime_1.jsx)("option", __assign({ disabled: true, value: HINT }, { children: hintText }), void 0)), valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)("option", __assign({ value: el.value }, { children: el.text }), el.value)); })] }), void 0)] }), void 0));
62
+ return ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ "x-pds-name": "Select", "x-pds-element-type": "component", "x-pds-device-type": "mobile", "$size": size, responsiveMode: responsiveMode, tabIndex: 0, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_Icon_Wrapper, __assign({ state: state }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_arrow_down", colorKey: getIconColorKey() }, void 0) }), void 0), (0, jsx_runtime_1.jsxs)(S_Select, __assign({ disabled: state === 'disabled' || state === 'read_only', state: state, "$size": size, colorTheme: colorTheme, onChange: handleChange, defaultValue: (_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _b !== void 0 ? _b : HINT, value: value || undefined }, { children: [hintText && ((0, jsx_runtime_1.jsx)("option", __assign({ disabled: true, value: HINT }, { children: hintText }), void 0)), valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)("option", __assign({ value: el.value }, { children: el.text }), el.value)); })] }), void 0)] }), void 0));
63
63
  }
64
64
  var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 48px;\n width: 432px;\n"], ["\n height: 48px;\n width: 432px;\n"])));
65
65
  var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 40px;\n width: 188px;\n"], ["\n height: 40px;\n width: 188px;\n"])));
@@ -93,14 +93,14 @@ var dark = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 =
93
93
  return theme.ui_cpnt_select_text_darktheme_enabled;
94
94
  });
95
95
  var S_Box = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: relative;\n z-index: 0;\n\n ", "\n ", ";\n ", "\n"], ["\n position: relative;\n z-index: 0;\n\n ", "\n ", ";\n ", "\n"])), function (_a) {
96
- var size = _a.size;
97
- return size &&
96
+ var $size = _a.$size;
97
+ return $size &&
98
98
  {
99
99
  large: large,
100
100
  medium: medium,
101
101
  small: small,
102
102
  rlarge: rlarge
103
- }[size];
103
+ }[$size];
104
104
  }, function (_a) {
105
105
  var responsiveMode = _a.responsiveMode;
106
106
  return responsiveMode === 'use' && 'width: 100%';
@@ -131,8 +131,14 @@ var S_Select = styled_components_1.default.select(templateObject_10 || (template
131
131
  var theme = _a.theme;
132
132
  return theme.ui_cpnt_select_border_normal;
133
133
  }, function (_a) {
134
- var size = _a.size;
135
- return (size === 'small' ? '10px' : '14px');
134
+ var $size = _a.$size;
135
+ return $size &&
136
+ {
137
+ small: '10px',
138
+ medium: '12px',
139
+ large: '14px',
140
+ rlarge: '14px'
141
+ }[$size];
136
142
  }, function (_a) {
137
143
  var theme = _a.theme;
138
144
  return theme.ui_cpnt_select_text_hint;
package/dist/src/mobile/components/TextButton/TextButton.d.ts CHANGED
@@ -7,7 +7,7 @@ export declare type TextButtonProps = {
7
7
  fontWeight?: 'bold' | 'regular';
8
8
  type?: 'submit' | 'reset' | 'button';
9
9
  state?: 'normal' | 'disabled';
10
- colorTheme?: 'none' | 'red' | 'grey_01' | 'white' | 'white2';
10
+ colorTheme?: 'none' | 'red' | 'grey_01' | 'grey2' | 'white' | 'white2';
11
11
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
12
12
  };
13
13
  declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, colorTheme, onClick, ...rest }: TextButtonProps): JSX.Element;
package/dist/src/mobile/components/TextButton/TextButton.js CHANGED
@@ -60,6 +60,7 @@ var textColor = {
60
60
  none: 'usrTextBrandPrimary',
61
61
  red: 'sysTextError',
62
62
  grey_01: 'sysTextPrimary',
63
+ grey2: 'sysTextSecondary',
63
64
  white: 'sysTextWhite',
64
65
  white2: 'sysTextWhite'
65
66
  };
@@ -98,6 +99,8 @@ var S_Button = styled_components_1.default.button(templateObject_8 || (templateO
98
99
  case 'red':
99
100
  case 'grey_01':
100
101
  return colorThemeDefault;
102
+ case 'grey2':
103
+ return colorThemeDefault;
101
104
  case 'white':
102
105
  return colorThemeWhite;
103
106
  case 'white2':
package/dist/src/mobile/components/TextField/TextField.js CHANGED
@@ -186,14 +186,14 @@ var small = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 =
186
186
  var theme = _a.theme;
187
187
  return theme.spacing.spacingB;
188
188
  });
189
- var medium = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: 40px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"], ["\n height: 40px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"])), function (_a) {
189
+ var medium = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n border-radius: 12px;\n height: 40px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"], ["\n border-radius: 12px;\n height: 40px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"])), function (_a) {
190
190
  var theme = _a.theme;
191
191
  return theme.spacing.spacingC;
192
192
  }, function (_a) {
193
193
  var theme = _a.theme;
194
194
  return theme.spacing.spacingB;
195
195
  });
196
- var large = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n height: 48px;\n padding-left: ", ";\n padding-right: ", ";\n width: ", ";\n ", "\n ", "\n"], ["\n height: 48px;\n padding-left: ", ";\n padding-right: ", ";\n width: ", ";\n ", "\n ", "\n"])), function (_a) {
196
+ var large = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n border-radius: 14px;\n height: 48px;\n padding-left: ", ";\n padding-right: ", ";\n width: ", ";\n ", "\n ", "\n"], ["\n border-radius: 14px;\n height: 48px;\n padding-left: ", ";\n padding-right: ", ";\n width: ", ";\n ", "\n ", "\n"])), function (_a) {
197
197
  var theme = _a.theme;
198
198
  return theme.spacing.spacingD;
199
199
  }, function (_a) {
@@ -298,7 +298,7 @@ var backgroundActiveColor = (0, styled_components_1.css)(templateObject_16 || (t
298
298
  }
299
299
  });
300
300
  var normalActionColor = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n &:active {\n background-color: ", ";\n }\n"], ["\n &:active {\n background-color: ", ";\n }\n"])), backgroundActiveColor);
301
- var S_TextFieldWrapper = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n align-items: center;\n border-radius: 14px;\n box-sizing: border-box;\n display: flex;\n ", ";\n ", ";\n\n ", "\n\n ", "\n\n ", ";\n ", "\n"], ["\n align-items: center;\n border-radius: 14px;\n box-sizing: border-box;\n display: flex;\n ", ";\n ", ";\n\n ", "\n\n ", "\n\n ", ";\n ", "\n"])), function (_a) {
301
+ var S_TextFieldWrapper = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n align-items: center;\n box-sizing: border-box;\n display: flex;\n ", ";\n ", ";\n\n ", "\n\n ", "\n\n ", ";\n ", "\n"], ["\n align-items: center;\n box-sizing: border-box;\n display: flex;\n ", ";\n ", ";\n\n ", "\n\n ", "\n\n ", ";\n ", "\n"])), function (_a) {
302
302
  var size = _a.size;
303
303
  return size &&
304
304
  {
package/dist/src/mobile/components/UploadIconButton/UploadIconButton.d.ts CHANGED
@@ -6,7 +6,7 @@ export declare type UploadIconButtonProps = {
6
6
  baseSize?: 'xxlarge' | 'large' | 'medium' | 'small' | 'xsmall';
7
7
  baseColorKey?: UiColors;
8
8
  borderColorKey?: UiColors;
9
- iconSize?: 12 | 16 | 20 | 24 | 48 | 72;
9
+ iconSize?: 12 | 16 | 20 | 24 | 32 | 48 | 72;
10
10
  iconFillType?: 'fill' | 'line';
11
11
  iconName: FillIconNameKeys | LineIconNameKeys;
12
12
  iconColorKey?: UiColors;
package/dist/src/mobile/components/UploadIconButton/UploadIconButton.js CHANGED
@@ -67,7 +67,7 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObj
67
67
  ? ''
68
68
  : theme.ui_cpnt_button_fill_base_disabled;
69
69
  });
70
- var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n position: relative;\n\n &::before {\n content: '';\n border-radius: inherit;\n position: absolute;\n background-color: transparent;\n height: 100%;\n width: 100%;\n ", "\n }\n\n &:active:not([disabled])::before {\n background-color: ", ";\n }\n\n ", ";\n"], ["\n background-color: ", ";\n border: none;\n position: relative;\n\n &::before {\n content: '';\n border-radius: inherit;\n position: absolute;\n background-color: transparent;\n height: 100%;\n width: 100%;\n ", "\n }\n\n &:active:not([disabled])::before {\n background-color: ", ";\n }\n\n ", ";\n"])), function (_a) {
70
+ var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n position: relative;\n\n &::before {\n background-color: transparent;\n border-radius: inherit;\n content: '';\n height: 100%;\n position: absolute;\n width: 100%;\n ", "\n }\n\n &:active:not([disabled])::before {\n background-color: ", ";\n }\n\n ", ";\n"], ["\n background-color: ", ";\n border: none;\n position: relative;\n\n &::before {\n background-color: transparent;\n border-radius: inherit;\n content: '';\n height: 100%;\n position: absolute;\n width: 100%;\n ", "\n }\n\n &:active:not([disabled])::before {\n background-color: ", ";\n }\n\n ", ";\n"])), function (_a) {
71
71
  var theme = _a.theme, baseColorKey = _a.baseColorKey;
72
72
  return baseColorKey ? theme[baseColorKey] : theme.ui_cpnt_button_fill_base_primary;
73
73
  }, transitionStyle_1.ButtonTransition, function (_a) {
package/dist/src/mobile/components/UploadTextButton/UploadTextButton.d.ts CHANGED
@@ -6,7 +6,7 @@ declare type UploadTextButtonProps = {
6
6
  responsiveMode?: 'none' | 'use';
7
7
  fontWeight?: 'bold' | 'regular';
8
8
  state?: 'normal' | 'disabled';
9
- colorTheme?: 'none' | 'red' | 'grey_01' | 'white' | 'white2';
9
+ colorTheme?: 'none' | 'red' | 'grey_01' | 'grey2' | 'white' | 'white2';
10
10
  accept?: string;
11
11
  multipleMode?: 'none' | 'use';
12
12
  onClick?: (e: React.ChangeEvent<HTMLInputElement>) => void;
package/dist/src/mobile/components/UploadTextButton/UploadTextButton.js CHANGED
@@ -49,6 +49,7 @@ var textColor = {
49
49
  none: 'usrTextBrandPrimary',
50
50
  red: 'sysTextError',
51
51
  grey_01: 'sysTextPrimary',
52
+ grey2: 'sysTextSecondary',
52
53
  white: 'sysTextWhite',
53
54
  white2: 'sysTextWhite'
54
55
  };
@@ -91,6 +92,8 @@ var S_UploadTextButton = styled_components_1.default.label(templateObject_8 || (
91
92
  case 'red':
92
93
  case 'grey_01':
93
94
  return colorThemeDefault;
95
+ case 'grey2':
96
+ return colorThemeDefault;
94
97
  case 'white':
95
98
  return colorThemeWhite;
96
99
  case 'white2':
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "2.1.0",
3
+ "version": "2.1.1",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,10 +1,21 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v2.1.0]
3
- ## release|https://design.storybook.publ.biz/
2
+ ## [v2.1.1]
3
+ ## daily|https://design.storybook.publ.biz/
4
4
 
5
5
  ### components
6
- * BasicButtonGroup 생성
7
- * Dropdown
8
- * displayType prop 추가 (icon 활용 가능하게 업데이트)
9
- * SegmentedButtonGroup 생성
10
- * Slider 생성
6
+ * IconButton
7
+ * iconSize prop에 value 32 추가
8
+ * Select
9
+ * size가 medium일때 radius값을 14px에서 12px로 변경
10
+ * TextButton
11
+ * colorTheme prop에 value grey2 추가
12
+ * TextField
13
+ * size가 medium일때 radius값을 14px에서 12px로 변경
14
+ * UploadIconButton
15
+ * iconSize prop에 value 32 추가
16
+ * UploadTextButton
17
+ * colorTheme prop에 value grey2 추가
18
+ * D_UploadIconButton
19
+ * tooltip 기능 추가
20
+ * tooltipText
21
+ * tooltipPosition