pds-dev-kit-web 2.2.207 → 2.2.209
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.
- package/dist/src/core/pricing/translator.js +8 -7
- package/dist/src/core/pricing/types.js +1 -1
- package/dist/src/desktop/components/TextButton/TextButton.d.ts +5 -2
- package/dist/src/desktop/components/TextButton/TextButton.js +14 -4
- package/dist/src/mobile/components/TextButton/TextButton.d.ts +5 -2
- package/dist/src/mobile/components/TextButton/TextButton.js +14 -4
- package/package.json +1 -1
- package/release-note.md +2 -2
|
@@ -28,10 +28,7 @@ var PricingTranslator = /** @class */ (function () {
|
|
|
28
28
|
*/
|
|
29
29
|
PricingTranslator.currency = function (code, opts) {
|
|
30
30
|
var currency = types_1.CURRENCY_MAP[code];
|
|
31
|
-
|
|
32
|
-
return currency.friendlyName(opts.translation);
|
|
33
|
-
}
|
|
34
|
-
return currency.name;
|
|
31
|
+
return (opts === null || opts === void 0 ? void 0 : opts.friendly) ? currency.friendlyName(opts.translation) : currency.name;
|
|
35
32
|
};
|
|
36
33
|
/**
|
|
37
34
|
* 포맷된 금액과 통화 문자열을 결합합니다
|
|
@@ -43,9 +40,13 @@ var PricingTranslator = /** @class */ (function () {
|
|
|
43
40
|
if (PricingTranslator.isCurrencyLeading(PricingTranslator.browserLanguage)) {
|
|
44
41
|
return "".concat(currencyString, " ").concat(formattedAmount);
|
|
45
42
|
}
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
43
|
+
// KRW만 friendly 대응
|
|
44
|
+
if (price.currency === types_1.CurrencyCode.KRW) {
|
|
45
|
+
return (opts === null || opts === void 0 ? void 0 : opts.friendly)
|
|
46
|
+
? "".concat(formattedAmount).concat(currencyString)
|
|
47
|
+
: "".concat(formattedAmount, " ").concat(currencyString);
|
|
48
|
+
}
|
|
49
|
+
return "".concat(formattedAmount, " ").concat(currencyString);
|
|
49
50
|
};
|
|
50
51
|
PricingTranslator.browserLanguage = null;
|
|
51
52
|
return PricingTranslator;
|
|
@@ -19,7 +19,7 @@ exports.CURRENCY_MAP = (_a = {},
|
|
|
19
19
|
_a[CurrencyCode.USD] = {
|
|
20
20
|
code: CurrencyCode.USD,
|
|
21
21
|
name: CurrencyCode.USD,
|
|
22
|
-
friendlyName:
|
|
22
|
+
friendlyName: function () { return CurrencyCode.USD; },
|
|
23
23
|
decimalDigits: 2
|
|
24
24
|
},
|
|
25
25
|
_a[CurrencyCode.JPY] = {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { PDSTextType } from '../../../common';
|
|
1
|
+
import type { PDSIconType, PDSTextType } from '../../../common';
|
|
2
2
|
import type React from 'react';
|
|
3
3
|
export type TextButtonProps = {
|
|
4
4
|
text?: PDSTextType;
|
|
@@ -7,9 +7,12 @@ export type TextButtonProps = {
|
|
|
7
7
|
fontWeight?: 'bold' | 'regular';
|
|
8
8
|
type?: 'submit' | 'reset' | 'button';
|
|
9
9
|
state?: 'normal' | 'disabled';
|
|
10
|
+
iconMode?: 'none' | 'left' | 'right';
|
|
11
|
+
iconFillType?: 'fill' | 'line';
|
|
12
|
+
iconName?: PDSIconType;
|
|
10
13
|
colorTheme?: 'none' | 'red' | 'grey_01' | 'grey2' | 'grey3' | 'white' | 'white2';
|
|
11
14
|
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
12
15
|
onKeyDown?: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
|
|
13
16
|
};
|
|
14
|
-
declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, colorTheme, onClick, onKeyDown, ...rest }: TextButtonProps): JSX.Element;
|
|
17
|
+
declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, iconMode, iconFillType, iconName, colorTheme, onClick, onKeyDown, ...rest }: TextButtonProps): JSX.Element;
|
|
15
18
|
export default TextButton;
|
|
@@ -51,6 +51,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
51
51
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
52
52
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
53
53
|
var react_1 = require("react");
|
|
54
|
+
var components_1 = require("../../../hybrid/components");
|
|
54
55
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
55
56
|
var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
|
|
56
57
|
var TextLabel_1 = require("../TextLabel");
|
|
@@ -70,6 +71,15 @@ var textColor = {
|
|
|
70
71
|
white: 'sysTextWhite',
|
|
71
72
|
white2: 'sysTextWhite'
|
|
72
73
|
};
|
|
74
|
+
var iconColor = {
|
|
75
|
+
none: 'ui_cpnt_button_icon_primary',
|
|
76
|
+
red: 'ui_cpnt_button_icon_error',
|
|
77
|
+
grey_01: 'ui_cpnt_button_icon_enabled',
|
|
78
|
+
grey2: 'ui_cpnt_button_icon_default',
|
|
79
|
+
grey3: 'ui_141',
|
|
80
|
+
white: 'ui_cpnt_sidebar_icon_01',
|
|
81
|
+
white2: 'ui_cpnt_sidebar_icon_01'
|
|
82
|
+
};
|
|
73
83
|
var textDisabledColor = {
|
|
74
84
|
none: 'sysTextTertiary',
|
|
75
85
|
red: 'sysTextTertiary',
|
|
@@ -116,7 +126,7 @@ var backgroundPressedColor = {
|
|
|
116
126
|
white2: 'ui_cpnt_textbutton_white_variation_base_pressed'
|
|
117
127
|
};
|
|
118
128
|
function TextButton(_a) {
|
|
119
|
-
var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.
|
|
129
|
+
var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.iconMode, iconMode = _f === void 0 ? 'none' : _f, _g = _a.iconFillType, iconFillType = _g === void 0 ? 'line' : _g, iconName = _a.iconName, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, onClick = _a.onClick, onKeyDown = _a.onKeyDown, rest = __rest(_a, ["text", "size", "responsiveMode", "fontWeight", "type", "state", "iconMode", "iconFillType", "iconName", "colorTheme", "onClick", "onKeyDown"]);
|
|
120
130
|
var buttonRef = (0, react_1.useRef)(null);
|
|
121
131
|
/**
|
|
122
132
|
* @when keydown 이벤트가 있을 때만
|
|
@@ -134,9 +144,9 @@ function TextButton(_a) {
|
|
|
134
144
|
onClick(e);
|
|
135
145
|
}
|
|
136
146
|
};
|
|
137
|
-
return ((0, jsx_runtime_1.
|
|
138
|
-
|
|
139
|
-
|
|
147
|
+
return ((0, jsx_runtime_1.jsxs)(S_Button, __assign({ ref: buttonRef, "x-pds-name": "TextButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, onKeyDown: onKeyDown, type: type, fontWeight: fontWeight, disabled: state === 'disabled', state: state, hoverColor: backgroundHoverColor[colorTheme], pressedColor: backgroundPressedColor[colorTheme] }, { children: [size !== 'xsmall' && iconMode === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: state === 'disabled' ? 'ui_cpnt_button_text_disabled' : iconColor[colorTheme], fillType: iconFillType }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? textDisabledColor[colorTheme] : textColor[colorTheme], colorOverride: state === 'disabled'
|
|
148
|
+
? overrideTextDisabledColor[colorTheme]
|
|
149
|
+
: overrideTextColor[colorTheme], singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }), size !== 'xsmall' && iconMode === 'right' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: state === 'disabled' ? 'ui_cpnt_button_text_disabled' : iconColor[colorTheme], fillType: iconFillType })] }))] })));
|
|
140
150
|
}
|
|
141
151
|
var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 14px;\n height: 48px;\n\n ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"], ["\n border-radius: 14px;\n height: 48px;\n\n ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"])), function (_a) {
|
|
142
152
|
var size = _a.size;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import type { PDSTextType } from '../../../common';
|
|
2
|
+
import type { PDSIconType, PDSTextType } from '../../../common';
|
|
3
3
|
export type TextButtonProps = {
|
|
4
4
|
text?: PDSTextType;
|
|
5
5
|
size?: 'rlarge' | 'large' | 'medium' | 'small' | 'xsmall';
|
|
@@ -7,8 +7,11 @@ export type TextButtonProps = {
|
|
|
7
7
|
fontWeight?: 'bold' | 'regular';
|
|
8
8
|
type?: 'submit' | 'reset' | 'button';
|
|
9
9
|
state?: 'normal' | 'disabled';
|
|
10
|
+
iconMode?: 'none' | 'left' | 'right';
|
|
11
|
+
iconFillType?: 'fill' | 'line';
|
|
12
|
+
iconName?: PDSIconType;
|
|
10
13
|
colorTheme?: 'none' | 'red' | 'grey_01' | 'grey2' | 'grey3' | 'white' | 'white2';
|
|
11
14
|
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
12
15
|
};
|
|
13
|
-
declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, colorTheme, onClick, ...rest }: TextButtonProps): JSX.Element;
|
|
16
|
+
declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, iconMode, iconFillType, iconName, colorTheme, onClick, ...rest }: TextButtonProps): JSX.Element;
|
|
14
17
|
export default TextButton;
|
|
@@ -50,6 +50,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
50
50
|
};
|
|
51
51
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
52
52
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
53
|
+
var components_1 = require("../../../hybrid/components");
|
|
53
54
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
54
55
|
var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
|
|
55
56
|
var TextLabel_1 = require("../TextLabel");
|
|
@@ -69,6 +70,15 @@ var textColor = {
|
|
|
69
70
|
white: 'sysTextWhite',
|
|
70
71
|
white2: 'sysTextWhite'
|
|
71
72
|
};
|
|
73
|
+
var iconColor = {
|
|
74
|
+
none: 'ui_cpnt_button_icon_primary',
|
|
75
|
+
red: 'ui_cpnt_button_icon_error',
|
|
76
|
+
grey_01: 'ui_cpnt_button_icon_enabled',
|
|
77
|
+
grey2: 'ui_cpnt_button_icon_default',
|
|
78
|
+
grey3: 'ui_141',
|
|
79
|
+
white: 'ui_cpnt_sidebar_icon_01',
|
|
80
|
+
white2: 'ui_cpnt_sidebar_icon_01'
|
|
81
|
+
};
|
|
72
82
|
var textDisabledColor = {
|
|
73
83
|
none: 'sysTextTertiary',
|
|
74
84
|
red: 'sysTextTertiary',
|
|
@@ -106,15 +116,15 @@ var backgroundPressedColor = {
|
|
|
106
116
|
white2: 'ui_cpnt_textbutton_white_variation_base_pressed'
|
|
107
117
|
};
|
|
108
118
|
function TextButton(_a) {
|
|
109
|
-
var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.
|
|
119
|
+
var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.iconMode, iconMode = _f === void 0 ? 'none' : _f, _g = _a.iconFillType, iconFillType = _g === void 0 ? 'line' : _g, iconName = _a.iconName, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, onClick = _a.onClick, rest = __rest(_a, ["text", "size", "responsiveMode", "fontWeight", "type", "state", "iconMode", "iconFillType", "iconName", "colorTheme", "onClick"]);
|
|
110
120
|
var handleClick = function (e) {
|
|
111
121
|
if (onClick) {
|
|
112
122
|
onClick(e);
|
|
113
123
|
}
|
|
114
124
|
};
|
|
115
|
-
return ((0, jsx_runtime_1.
|
|
116
|
-
|
|
117
|
-
|
|
125
|
+
return ((0, jsx_runtime_1.jsxs)(S_Button, __assign({ "x-pds-name": "TextButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled', pressedColor: backgroundPressedColor[colorTheme] }, { children: [size !== 'xsmall' && iconMode === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: state === 'disabled' ? 'ui_cpnt_button_text_disabled' : iconColor[colorTheme], fillType: iconFillType }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? textDisabledColor[colorTheme] : textColor[colorTheme], colorOverride: state === 'disabled'
|
|
126
|
+
? overrideTextDisabledColor[colorTheme]
|
|
127
|
+
: overrideTextColor[colorTheme], singleLineMode: "use" }), size !== 'xsmall' && iconMode === 'right' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: state === 'disabled' ? 'ui_cpnt_button_text_disabled' : iconColor[colorTheme], fillType: iconFillType })] }))] })));
|
|
118
128
|
}
|
|
119
129
|
var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 14px;\n height: 48px;\n ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"], ["\n border-radius: 14px;\n height: 48px;\n ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"])), function (_a) {
|
|
120
130
|
var size = _a.size;
|
package/package.json
CHANGED
package/release-note.md
CHANGED