pds-dev-kit-web 2.2.258 → 2.2.259
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/desktop/components/TextButton/TextButton.d.ts +3 -2
- package/dist/src/desktop/components/TextButton/TextButton.js +27 -19
- package/dist/src/mobile/components/TextButton/TextButton.d.ts +3 -2
- package/dist/src/mobile/components/TextButton/TextButton.js +27 -19
- package/package.json +1 -1
- package/release-note.md +3 -2
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { PDSIconType, PDSTextType } from '../../../common';
|
|
1
|
+
import type { PDSIconType, PDSTextType, UiColors } from '../../../common';
|
|
2
2
|
import type React from 'react';
|
|
3
3
|
export type TextButtonProps = {
|
|
4
4
|
text?: PDSTextType;
|
|
@@ -11,8 +11,9 @@ export type TextButtonProps = {
|
|
|
11
11
|
iconFillType?: 'fill' | 'line';
|
|
12
12
|
iconName?: PDSIconType;
|
|
13
13
|
colorTheme?: 'none' | 'red' | 'grey_01' | 'grey2' | 'grey3' | 'white' | 'white2';
|
|
14
|
+
overrideColorKey?: UiColors;
|
|
14
15
|
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
15
16
|
onKeyDown?: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
|
|
16
17
|
};
|
|
17
|
-
declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, iconMode, iconFillType, iconName, colorTheme, onClick, onKeyDown, ...rest }: TextButtonProps): JSX.Element;
|
|
18
|
+
declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, iconMode, iconFillType, iconName, colorTheme, overrideColorKey, onClick, onKeyDown, ...rest }: TextButtonProps): JSX.Element;
|
|
18
19
|
export default TextButton;
|
|
@@ -71,14 +71,16 @@ var textColor = {
|
|
|
71
71
|
white: 'sysTextWhite',
|
|
72
72
|
white2: 'sysTextWhite'
|
|
73
73
|
};
|
|
74
|
-
var
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
74
|
+
var getIconColor = function (overrideColorKey) {
|
|
75
|
+
return ({
|
|
76
|
+
none: overrideColorKey ? overrideColorKey : 'ui_cpnt_button_icon_primary',
|
|
77
|
+
red: overrideColorKey ? overrideColorKey : 'ui_cpnt_button_icon_error',
|
|
78
|
+
grey_01: overrideColorKey ? overrideColorKey : 'ui_cpnt_button_icon_enabled',
|
|
79
|
+
grey2: overrideColorKey ? overrideColorKey : 'ui_cpnt_button_icon_default',
|
|
80
|
+
grey3: overrideColorKey ? overrideColorKey : 'ui_141',
|
|
81
|
+
white: overrideColorKey ? overrideColorKey : 'ui_cpnt_sidebar_icon_01',
|
|
82
|
+
white2: overrideColorKey ? overrideColorKey : 'ui_cpnt_sidebar_icon_01'
|
|
83
|
+
});
|
|
82
84
|
};
|
|
83
85
|
var textDisabledColor = {
|
|
84
86
|
none: 'sysTextTertiary',
|
|
@@ -89,14 +91,16 @@ var textDisabledColor = {
|
|
|
89
91
|
white: 'sysTextTertiary',
|
|
90
92
|
white2: 'sysTextTertiary'
|
|
91
93
|
};
|
|
92
|
-
var
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
94
|
+
var getOverrideTextColor = function (overrideColorKey) {
|
|
95
|
+
return ({
|
|
96
|
+
none: overrideColorKey,
|
|
97
|
+
red: overrideColorKey,
|
|
98
|
+
grey_01: overrideColorKey,
|
|
99
|
+
grey2: overrideColorKey,
|
|
100
|
+
grey3: overrideColorKey ? overrideColorKey : 'ui_141',
|
|
101
|
+
white: overrideColorKey,
|
|
102
|
+
white2: overrideColorKey
|
|
103
|
+
});
|
|
100
104
|
};
|
|
101
105
|
var overrideTextDisabledColor = {
|
|
102
106
|
none: undefined,
|
|
@@ -126,7 +130,7 @@ var backgroundPressedColor = {
|
|
|
126
130
|
white2: 'ui_cpnt_textbutton_white_variation_base_pressed'
|
|
127
131
|
};
|
|
128
132
|
function TextButton(_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"]);
|
|
133
|
+
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, overrideColorKey = _a.overrideColorKey, onClick = _a.onClick, onKeyDown = _a.onKeyDown, rest = __rest(_a, ["text", "size", "responsiveMode", "fontWeight", "type", "state", "iconMode", "iconFillType", "iconName", "colorTheme", "overrideColorKey", "onClick", "onKeyDown"]);
|
|
130
134
|
var buttonRef = (0, react_1.useRef)(null);
|
|
131
135
|
/**
|
|
132
136
|
* @when keydown 이벤트가 있을 때만
|
|
@@ -144,9 +148,13 @@ function TextButton(_a) {
|
|
|
144
148
|
onClick(e);
|
|
145
149
|
}
|
|
146
150
|
};
|
|
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'
|
|
151
|
+
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'
|
|
152
|
+
? 'ui_cpnt_button_text_disabled'
|
|
153
|
+
: getIconColor(overrideColorKey)[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
154
|
? overrideTextDisabledColor[colorTheme]
|
|
149
|
-
:
|
|
155
|
+
: getOverrideTextColor(overrideColorKey)[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'
|
|
156
|
+
? 'ui_cpnt_button_text_disabled'
|
|
157
|
+
: getIconColor(overrideColorKey)[colorTheme], fillType: iconFillType })] }))] })));
|
|
150
158
|
}
|
|
151
159
|
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) {
|
|
152
160
|
var size = _a.size;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import type { PDSIconType, PDSTextType } from '../../../common';
|
|
2
|
+
import type { PDSIconType, PDSTextType, UiColors } from '../../../common';
|
|
3
3
|
export type TextButtonProps = {
|
|
4
4
|
text?: PDSTextType;
|
|
5
5
|
size?: 'rlarge' | 'large' | 'medium' | 'small' | 'xsmall';
|
|
@@ -11,7 +11,8 @@ export type TextButtonProps = {
|
|
|
11
11
|
iconFillType?: 'fill' | 'line';
|
|
12
12
|
iconName?: PDSIconType;
|
|
13
13
|
colorTheme?: 'none' | 'red' | 'grey_01' | 'grey2' | 'grey3' | 'white' | 'white2';
|
|
14
|
+
overrideColorKey?: UiColors;
|
|
14
15
|
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
15
16
|
};
|
|
16
|
-
declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, iconMode, iconFillType, iconName, colorTheme, onClick, ...rest }: TextButtonProps): JSX.Element;
|
|
17
|
+
declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, iconMode, iconFillType, iconName, colorTheme, overrideColorKey, onClick, ...rest }: TextButtonProps): JSX.Element;
|
|
17
18
|
export default TextButton;
|
|
@@ -70,14 +70,16 @@ var textColor = {
|
|
|
70
70
|
white: 'sysTextWhite',
|
|
71
71
|
white2: 'sysTextWhite'
|
|
72
72
|
};
|
|
73
|
-
var
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
73
|
+
var getIconColor = function (overrideColorKey) {
|
|
74
|
+
return ({
|
|
75
|
+
none: overrideColorKey ? overrideColorKey : 'ui_cpnt_button_icon_primary',
|
|
76
|
+
red: overrideColorKey ? overrideColorKey : 'ui_cpnt_button_icon_error',
|
|
77
|
+
grey_01: overrideColorKey ? overrideColorKey : 'ui_cpnt_button_icon_enabled',
|
|
78
|
+
grey2: overrideColorKey ? overrideColorKey : 'ui_cpnt_button_icon_default',
|
|
79
|
+
grey3: overrideColorKey ? overrideColorKey : 'ui_141',
|
|
80
|
+
white: overrideColorKey ? overrideColorKey : 'ui_cpnt_sidebar_icon_01',
|
|
81
|
+
white2: overrideColorKey ? overrideColorKey : 'ui_cpnt_sidebar_icon_01'
|
|
82
|
+
});
|
|
81
83
|
};
|
|
82
84
|
var textDisabledColor = {
|
|
83
85
|
none: 'sysTextTertiary',
|
|
@@ -88,14 +90,16 @@ var textDisabledColor = {
|
|
|
88
90
|
white: 'sysTextTertiary',
|
|
89
91
|
white2: 'sysTextTertiary'
|
|
90
92
|
};
|
|
91
|
-
var
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
93
|
+
var getOverrideTextColor = function (overrideColorKey) {
|
|
94
|
+
return ({
|
|
95
|
+
none: overrideColorKey,
|
|
96
|
+
red: overrideColorKey,
|
|
97
|
+
grey_01: overrideColorKey,
|
|
98
|
+
grey2: overrideColorKey,
|
|
99
|
+
grey3: overrideColorKey ? overrideColorKey : 'ui_141',
|
|
100
|
+
white: overrideColorKey,
|
|
101
|
+
white2: overrideColorKey
|
|
102
|
+
});
|
|
99
103
|
};
|
|
100
104
|
var overrideTextDisabledColor = {
|
|
101
105
|
none: undefined,
|
|
@@ -116,15 +120,19 @@ var backgroundPressedColor = {
|
|
|
116
120
|
white2: 'ui_cpnt_textbutton_white_variation_base_pressed'
|
|
117
121
|
};
|
|
118
122
|
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.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"]);
|
|
123
|
+
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, overrideColorKey = _a.overrideColorKey, onClick = _a.onClick, rest = __rest(_a, ["text", "size", "responsiveMode", "fontWeight", "type", "state", "iconMode", "iconFillType", "iconName", "colorTheme", "overrideColorKey", "onClick"]);
|
|
120
124
|
var handleClick = function (e) {
|
|
121
125
|
if (onClick) {
|
|
122
126
|
onClick(e);
|
|
123
127
|
}
|
|
124
128
|
};
|
|
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'
|
|
129
|
+
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'
|
|
130
|
+
? 'ui_cpnt_button_text_disabled'
|
|
131
|
+
: getIconColor(overrideColorKey)[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
132
|
? overrideTextDisabledColor[colorTheme]
|
|
127
|
-
:
|
|
133
|
+
: getOverrideTextColor(overrideColorKey)[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'
|
|
134
|
+
? 'ui_cpnt_button_text_disabled'
|
|
135
|
+
: getIconColor(overrideColorKey)[colorTheme], fillType: iconFillType })] }))] })));
|
|
128
136
|
}
|
|
129
137
|
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) {
|
|
130
138
|
var size = _a.size;
|
package/package.json
CHANGED