pds-dev-kit-web 2.2.208 → 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.
Files changed (6) hide show
  1. package/dist/src/desktop/components/TextButton/TextButton.d.ts +5 -2
  2. package/dist/src/desktop/components/TextButton/TextButton.js +14 -4
  3. package/dist/src/mobile/components/TextButton/TextButton.d.ts +5 -2
  4. package/dist/src/mobile/components/TextButton/TextButton.js +14 -4
  5. package/package.json +1 -1
  6. package/release-note.md +2 -2
package/dist/src/desktop/components/TextButton/TextButton.d.ts CHANGED
@@ -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;
package/dist/src/desktop/components/TextButton/TextButton.js CHANGED
@@ -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.colorTheme, colorTheme = _f === void 0 ? 'none' : _f, onClick = _a.onClick, onKeyDown = _a.onKeyDown, rest = __rest(_a, ["text", "size", "responsiveMode", "fontWeight", "type", "state", "colorTheme", "onClick", "onKeyDown"]);
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.jsx)(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: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? textDisabledColor[colorTheme] : textColor[colorTheme], colorOverride: state === 'disabled'
138
- ? overrideTextDisabledColor[colorTheme]
139
- : overrideTextColor[colorTheme], singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
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;
package/dist/src/mobile/components/TextButton/TextButton.d.ts CHANGED
@@ -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;
package/dist/src/mobile/components/TextButton/TextButton.js CHANGED
@@ -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.colorTheme, colorTheme = _f === void 0 ? 'none' : _f, onClick = _a.onClick, rest = __rest(_a, ["text", "size", "responsiveMode", "fontWeight", "type", "state", "colorTheme", "onClick"]);
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.jsx)(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: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? textDisabledColor[colorTheme] : textColor[colorTheme], colorOverride: state === 'disabled'
116
- ? overrideTextDisabledColor[colorTheme]
117
- : overrideTextColor[colorTheme], singleLineMode: "use" }) })));
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "2.2.208",
3
+ "version": "2.2.209",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v2.2.208]
2
+ ## [v2.2.209]
3
3
  ## daily|https://design.storybook.publ.biz/
4
4
 
5
5
  ### 업데이트 사항
6
- * [FIX] USD인 경우 friendlyName USD currency로 보여주도록 수정
6
+ * [PDS-1330] TextButton에 iconMode 속성 추가건