pds-dev-kit-web-test 0.2.32 → 0.2.33
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/index.d.ts +2 -2
- package/dist/src/common/index.d.ts +1 -1
- package/dist/src/common/styles/theme.d.ts +0 -1
- package/dist/src/common/styles/theme.js +3 -4
- package/dist/src/common/types/styled-components.d.ts +0 -3
- package/dist/src/desktop/components/TextLabel/TextLabel.js +89 -43
- package/dist/src/mobile/components/TextLabel/TextLabel.js +6 -11
- package/package.json +1 -2
- package/release-note.md +2 -5
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { UITheme, IFormValues, FillIconNameKeys, LineIconNameKeys, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, ContextMenuItemValueOption, DropdownValueOption, AdminListDropdownValueOption, BasicButtonGroupValueOption, SegmentedButtonGroupValueOption, UiColors, PdsDevKitTheme, fontWeight, desktopFontSize, desktopLineHeight, desktopEditorFontSize, desktopEditorLineHeight, mobileFontSize, mobileLineHeight, mobileEditorFontSize, mobileEditorLineHeight, boxShadow, spacing, uiColors, customTheme, theme, Form, PDSIconType, ForwardedRefType
|
|
2
|
-
export { UITheme, IFormValues, FillIconNameKeys, LineIconNameKeys, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, ContextMenuItemValueOption, DropdownValueOption, AdminListDropdownValueOption, BasicButtonGroupValueOption, SegmentedButtonGroupValueOption, UiColors, PDSIconType, ForwardedRefType
|
|
1
|
+
import { UITheme, IFormValues, FillIconNameKeys, LineIconNameKeys, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, ContextMenuItemValueOption, DropdownValueOption, AdminListDropdownValueOption, BasicButtonGroupValueOption, SegmentedButtonGroupValueOption, UiColors, PdsDevKitTheme, fontWeight, desktopFontSize, desktopLineHeight, desktopEditorFontSize, desktopEditorLineHeight, mobileFontSize, mobileLineHeight, mobileEditorFontSize, mobileEditorLineHeight, boxShadow, spacing, uiColors, customTheme, theme, Form, PDSIconType, ForwardedRefType } from './src/common';
|
|
2
|
+
export { UITheme, IFormValues, FillIconNameKeys, LineIconNameKeys, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, ContextMenuItemValueOption, DropdownValueOption, AdminListDropdownValueOption, BasicButtonGroupValueOption, SegmentedButtonGroupValueOption, UiColors, PDSIconType, ForwardedRefType };
|
|
3
3
|
export { fontWeight, desktopFontSize, desktopLineHeight, desktopEditorFontSize, desktopEditorLineHeight, mobileFontSize, mobileLineHeight, mobileEditorFontSize, mobileEditorLineHeight, boxShadow, spacing, uiColors, customTheme };
|
|
4
4
|
export { theme };
|
|
5
5
|
export { dialogOnAni, dialogOffAni, dialogOverlayOnAni, dialogOverlayOffAni, modalOnAni, modalOffAni, modalOverlayOnAni, modalOverlayOffAni } from './src/common/styles';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { UITheme } from './styles/colorSet/ui-type';
|
|
2
|
-
export { IFormValues, FillIconNameKeys, LineIconNameKeys, PDSIconType, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, ContextMenuItemValueOption, DropdownValueOption, AdminListDropdownValueOption, BasicButtonGroupValueOption, SegmentedButtonGroupValueOption, UiColors, ForwardedRefType
|
|
2
|
+
export { IFormValues, FillIconNameKeys, LineIconNameKeys, PDSIconType, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, ContextMenuItemValueOption, DropdownValueOption, AdminListDropdownValueOption, BasicButtonGroupValueOption, SegmentedButtonGroupValueOption, UiColors, ForwardedRefType } from './types';
|
|
3
3
|
export { fontWeight, desktopFontSize, desktopLineHeight, desktopEditorFontSize, desktopEditorLineHeight, mobileFontSize, mobileLineHeight, mobileEditorFontSize, mobileEditorLineHeight, boxShadow, spacing } from './styles/theme';
|
|
4
4
|
export { uiColors, customTheme } from './styles/ui-colors';
|
|
5
5
|
export { theme } from './styles';
|
|
@@ -109,7 +109,6 @@ export declare const spacing: {
|
|
|
109
109
|
spacingM: string;
|
|
110
110
|
spacingN: string;
|
|
111
111
|
};
|
|
112
|
-
export declare const language = "ko";
|
|
113
112
|
declare const theme: DefaultTheme;
|
|
114
113
|
type ToneType = 'DARK' | 'LIGHT';
|
|
115
114
|
export declare const themeByGivenTone: (tone: ToneType) => any;
|
|
@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
|
|
|
11
11
|
return __assign.apply(this, arguments);
|
|
12
12
|
};
|
|
13
13
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
|
-
exports.themeByGivenTone = exports.
|
|
14
|
+
exports.themeByGivenTone = exports.spacing = exports.boxShadow = exports.mobileEditorLineHeight = exports.mobileEditorFontSize = exports.mobileLineHeight = exports.mobileFontSize = exports.desktopEditorLineHeight = exports.desktopEditorFontSize = exports.desktopLineHeight = exports.desktopFontSize = exports.fontWeight = void 0;
|
|
15
15
|
var ui_colors_1 = require("./ui-colors");
|
|
16
16
|
exports.fontWeight = {
|
|
17
17
|
normal: '500',
|
|
@@ -123,8 +123,7 @@ exports.spacing = {
|
|
|
123
123
|
spacingM: '288px',
|
|
124
124
|
spacingN: '320px'
|
|
125
125
|
};
|
|
126
|
-
exports.
|
|
127
|
-
var
|
|
128
|
-
var themeByGivenTone = function (tone) { return (__assign(__assign({}, (0, ui_colors_1.customTheme)(tone)), { fontWeight: exports.fontWeight, desktopFontSize: exports.desktopFontSize, desktopLineHeight: exports.desktopLineHeight, desktopEditorFontSize: exports.desktopEditorFontSize, desktopEditorLineHeight: exports.desktopEditorLineHeight, mobileFontSize: exports.mobileFontSize, mobileLineHeight: exports.mobileLineHeight, mobileEditorFontSize: exports.mobileEditorFontSize, mobileEditorLineHeight: exports.mobileEditorLineHeight, boxShadow: exports.boxShadow, spacing: exports.spacing, language: exports.language })); };
|
|
126
|
+
var theme = __assign({ fontWeight: exports.fontWeight, desktopFontSize: exports.desktopFontSize, desktopLineHeight: exports.desktopLineHeight, desktopEditorFontSize: exports.desktopEditorFontSize, desktopEditorLineHeight: exports.desktopEditorLineHeight, mobileFontSize: exports.mobileFontSize, mobileLineHeight: exports.mobileLineHeight, mobileEditorFontSize: exports.mobileEditorFontSize, mobileEditorLineHeight: exports.mobileEditorLineHeight, boxShadow: exports.boxShadow, spacing: exports.spacing }, (0, ui_colors_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK', window.PdsUtils ? window.PdsUtils.palette : {}));
|
|
127
|
+
var themeByGivenTone = function (tone) { return (__assign(__assign({}, (0, ui_colors_1.customTheme)(tone)), { fontWeight: exports.fontWeight, desktopFontSize: exports.desktopFontSize, desktopLineHeight: exports.desktopLineHeight, desktopEditorFontSize: exports.desktopEditorFontSize, desktopEditorLineHeight: exports.desktopEditorLineHeight, mobileFontSize: exports.mobileFontSize, mobileLineHeight: exports.mobileLineHeight, mobileEditorFontSize: exports.mobileEditorFontSize, mobileEditorLineHeight: exports.mobileEditorLineHeight, boxShadow: exports.boxShadow, spacing: exports.spacing })); };
|
|
129
128
|
exports.themeByGivenTone = themeByGivenTone;
|
|
130
129
|
exports.default = theme;
|
|
@@ -40,15 +40,76 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
40
40
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
41
41
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
42
42
|
var react_1 = require("react");
|
|
43
|
+
var react_dom_1 = require("react-dom");
|
|
43
44
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
44
45
|
var hybrid_1 = require("../../../hybrid");
|
|
45
46
|
function TextLabel(_a) {
|
|
46
|
-
var text = _a.text, tooltipText = _a.tooltipText, _b = _a.tooltipPosition, tooltipPosition = _b === void 0 ? 'right_bottom' : _b, _c = _a.tooltipIconColorKey, tooltipIconColorKey = _c === void 0 ? 'ui_cpnt_icon_sys_grey_03' : _c, _d = _a.textAlign, textAlign = _d === void 0 ? 'left' : _d, _e = _a.styleTheme, styleTheme = _e === void 0 ? 'body2Bold' : _e, colorOverride = _a.colorOverride, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'sysTextPrimary' : _f, _g = _a.singleLineMode, singleLineMode = _g === void 0 ? 'none' : _g, _h = _a.ellipsisMode, ellipsisMode = _h === void 0 ? 'none' : _h, lineLimit = _a.lineLimit, _j = _a.userSelectMode, userSelectMode = _j === void 0 ? 'none' : _j, customFontSize = _a.customFontSize, customFontWeight = _a.customFontWeight, _k = _a.textDecorationType, textDecorationType = _k === void 0 ? 'none' : _k, _l = _a.requirementMode, requirementMode = _l === void 0 ? 'none' : _l, _m = _a.bulletPointMode, bulletPointMode = _m === void 0 ? 'none' : _m,
|
|
47
|
-
var
|
|
48
|
-
var
|
|
49
|
-
|
|
47
|
+
var text = _a.text, tooltipText = _a.tooltipText, _b = _a.tooltipPosition, tooltipPosition = _b === void 0 ? 'right_bottom' : _b, _c = _a.tooltipIconColorKey, tooltipIconColorKey = _c === void 0 ? 'ui_cpnt_icon_sys_grey_03' : _c, _d = _a.textAlign, textAlign = _d === void 0 ? 'left' : _d, _e = _a.styleTheme, styleTheme = _e === void 0 ? 'body2Bold' : _e, colorOverride = _a.colorOverride, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'sysTextPrimary' : _f, _g = _a.singleLineMode, singleLineMode = _g === void 0 ? 'none' : _g, _h = _a.ellipsisMode, ellipsisMode = _h === void 0 ? 'none' : _h, lineLimit = _a.lineLimit, _j = _a.userSelectMode, userSelectMode = _j === void 0 ? 'none' : _j, customFontSize = _a.customFontSize, customFontWeight = _a.customFontWeight, _k = _a.textDecorationType, textDecorationType = _k === void 0 ? 'none' : _k, _l = _a.requirementMode, requirementMode = _l === void 0 ? 'none' : _l, _m = _a.bulletPointMode, bulletPointMode = _m === void 0 ? 'none' : _m, _o = _a.wordBreak, wordBreak = _o === void 0 ? 'keep_all' : _o, letterSpacing = _a.letterSpacing;
|
|
48
|
+
var _p = (0, react_1.useState)(false), isTooltipOpen = _p[0], setIsTooltipOpen = _p[1];
|
|
49
|
+
var _q = (0, react_1.useState)(null), tooltipSizeOffset = _q[0], setTooltipSizeOffset = _q[1];
|
|
50
|
+
var _r = (0, react_1.useState)(null), tooltipPositionOffset = _r[0], setTooltipPositionOffset = _r[1];
|
|
51
|
+
var tooltipRef = (0, react_1.useRef)(null);
|
|
52
|
+
var tooltipPositionTargetRef = (0, react_1.useRef)(null);
|
|
53
|
+
var handleTooltipOpen = function () {
|
|
54
|
+
setIsTooltipOpen(true);
|
|
50
55
|
};
|
|
51
|
-
|
|
56
|
+
var handleTooltipClose = function () {
|
|
57
|
+
setIsTooltipOpen(false);
|
|
58
|
+
};
|
|
59
|
+
/**
|
|
60
|
+
* @when : isTooltipOpen이 변경되었을 때
|
|
61
|
+
* @expected : tooltipPositionTargetRef, tooltipRef 의 위치를 업데이트합니다.
|
|
62
|
+
* @clear :
|
|
63
|
+
*/
|
|
64
|
+
(0, react_1.useEffect)(function () {
|
|
65
|
+
if (tooltipPositionTargetRef.current) {
|
|
66
|
+
var _a = tooltipPositionTargetRef.current.getBoundingClientRect(), top_1 = _a.top, right = _a.right, left = _a.left, bottom = _a.bottom;
|
|
67
|
+
setTooltipPositionOffset({
|
|
68
|
+
top: top_1 + window.scrollY,
|
|
69
|
+
right: right + window.scrollX,
|
|
70
|
+
bottom: bottom + window.scrollY,
|
|
71
|
+
left: left + window.scrollX
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
if (!isTooltipOpen && tooltipRef.current) {
|
|
75
|
+
setTooltipSizeOffset(null);
|
|
76
|
+
return;
|
|
77
|
+
}
|
|
78
|
+
if (tooltipRef.current) {
|
|
79
|
+
setTooltipSizeOffset({
|
|
80
|
+
height: tooltipRef.current.offsetHeight,
|
|
81
|
+
width: tooltipRef.current.offsetWidth
|
|
82
|
+
});
|
|
83
|
+
}
|
|
84
|
+
}, [isTooltipOpen]);
|
|
85
|
+
var tooltipPositionCss = getTooltipPositionCss(tooltipSizeOffset, tooltipPositionOffset, tooltipPosition);
|
|
86
|
+
return ((0, jsx_runtime_1.jsxs)(S_TextLabel, __assign({ "x-pds-name": "TextLabel", "x-pds-element-type": "component", "x-pds-device-type": "desktop", textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, userSelectMode: userSelectMode, customFontSize: customFontSize, customFontWeight: customFontWeight, textDecorationType: textDecorationType, bulletPointMode: bulletPointMode, wordBreak: wordBreak, "$letterSpacing": letterSpacing }, { children: [text, requirementMode === 'use' && ((0, jsx_runtime_1.jsx)(S_AfterTextBox, __assign({ styleTheme: styleTheme }, { children: (0, jsx_runtime_1.jsx)(S_IconWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_requirement", size: 16, fillType: "line", colorKey: "ui_cpnt_icon_sys_error_01" }) }) }))), tooltipText && ((0, jsx_runtime_1.jsxs)(S_AfterTextBox, __assign({ styleTheme: styleTheme, ref: tooltipPositionTargetRef }, { children: [(0, jsx_runtime_1.jsx)(S_IconWrapper, __assign({ onMouseEnter: handleTooltipOpen, onMouseLeave: handleTooltipClose }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_question", size: 16, fillType: "fill", colorKey: tooltipIconColorKey }) })), (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", ref: tooltipRef, isTooltipOpen: isTooltipOpen, tooltipPosition: tooltipPosition, tooltipPositionCss: tooltipPositionCss, onMouseEnter: handleTooltipOpen, onMouseLeave: handleTooltipClose }, { children: "".concat(tooltipText) })), document.body)] })))] })));
|
|
87
|
+
}
|
|
88
|
+
function getTooltipPositionCss(size, position, positionType) {
|
|
89
|
+
if (!size || !position) {
|
|
90
|
+
return '';
|
|
91
|
+
}
|
|
92
|
+
var left = position.left, bottom = position.bottom, top = position.top;
|
|
93
|
+
var width = size.width, height = size.height;
|
|
94
|
+
var leftValue = left - width + 16;
|
|
95
|
+
var bottomValue = bottom + 4;
|
|
96
|
+
var topValue = top - height - 4;
|
|
97
|
+
var isOverLeft = leftValue < 0;
|
|
98
|
+
var isOverRight = window.innerWidth < left + width;
|
|
99
|
+
var isOverBottom = window.innerHeight < bottomValue + height;
|
|
100
|
+
var isOverTop = topValue < 0;
|
|
101
|
+
switch (positionType) {
|
|
102
|
+
case 'left_bottom':
|
|
103
|
+
return "\n left: ".concat(isOverLeft ? 5 : leftValue, "px;\n ").concat(isOverBottom ? 'bottom: 5px;' : "top: ".concat(bottomValue, "px;"));
|
|
104
|
+
case 'left_top':
|
|
105
|
+
return "\n left: ".concat(isOverLeft ? 5 : leftValue, "px;\n top: ").concat(isOverTop ? 5 : topValue, "px;");
|
|
106
|
+
case 'right_bottom':
|
|
107
|
+
return "\n ".concat(isOverRight ? 'right: 5px;' : "left: ".concat(isOverRight ? 5 : left, "px;"), "\n ").concat(isOverBottom ? 'bottom: 5px;' : "top: ".concat(bottomValue, "px;"));
|
|
108
|
+
case 'right_top':
|
|
109
|
+
return "\n ".concat(isOverRight ? 'right: 5px;' : "left: ".concat(isOverRight ? 5 : left, "px;"), "\n top: ").concat(isOverTop ? 5 : topValue, "px;");
|
|
110
|
+
default:
|
|
111
|
+
return '';
|
|
112
|
+
}
|
|
52
113
|
}
|
|
53
114
|
var displayBold = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"], ["\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
54
115
|
var theme = _a.theme;
|
|
@@ -315,26 +376,17 @@ var ellipsisStyle = (0, styled_components_1.css)(templateObject_35 || (templateO
|
|
|
315
376
|
});
|
|
316
377
|
var userSelectModeStyle = (0, styled_components_1.css)(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n -khtml-user-select: none;\n -moz-user-select: -moz-none;\n -ms-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n"], ["\n -khtml-user-select: none;\n -moz-user-select: -moz-none;\n -ms-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n"])));
|
|
317
378
|
var bulletPointModeStyle = (0, styled_components_1.css)(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n padding-left: 16px;\n ::before {\n content: '\u2022';\n left: 0;\n position: absolute;\n width: 16px;\n }\n"], ["\n padding-left: 16px;\n ::before {\n content: '\u2022';\n left: 0;\n position: absolute;\n width: 16px;\n }\n"])));
|
|
318
|
-
var
|
|
319
|
-
var tooltipLeftBottom = (0, styled_components_1.css)(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n right: 0;\n top: 20px;\n"], ["\n right: 0;\n top: 20px;\n"])));
|
|
320
|
-
var tooltipRightTop = (0, styled_components_1.css)(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n bottom: 20px;\n left: 0;\n"], ["\n bottom: 20px;\n left: 0;\n"])));
|
|
321
|
-
var tooltipRightBottom = (0, styled_components_1.css)(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n left: 0;\n top: 20px;\n"], ["\n left: 0;\n top: 20px;\n"])));
|
|
322
|
-
var S_TextLabel = styled_components_1.default.div(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n box-sizing: border-box;\n overflow-wrap: break-word;\n text-align: ", ";\n white-space: pre-wrap;\n\n ", ";\n\n ", ";\n\n ", ";\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n box-sizing: border-box;\n overflow-wrap: break-word;\n text-align: ", ";\n white-space: pre-wrap;\n\n ", ";\n\n ", ";\n\n ", ";\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
|
|
379
|
+
var S_TextLabel = styled_components_1.default.div(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n box-sizing: border-box;\n overflow-wrap: break-word;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: ", ";\n\n ", ";\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n box-sizing: border-box;\n overflow-wrap: break-word;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: ", ";\n\n ", ";\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
|
|
323
380
|
var textAlign = _a.textAlign;
|
|
324
381
|
return textAlign;
|
|
325
|
-
}, function (_a) {
|
|
326
|
-
var theme = _a.theme;
|
|
327
|
-
return ['ko', 'ko-KR', 'ko-kr'].includes(theme.language)
|
|
328
|
-
? 'word-break: keep-all'
|
|
329
|
-
: 'word-break: normal';
|
|
330
382
|
}, function (_a) {
|
|
331
383
|
var wordBreak = _a.wordBreak;
|
|
332
384
|
return wordBreak &&
|
|
333
385
|
{
|
|
334
|
-
normal: '
|
|
335
|
-
break_all: '
|
|
336
|
-
keep_all: '
|
|
337
|
-
break_word: '
|
|
386
|
+
normal: 'normal',
|
|
387
|
+
break_all: 'break-all',
|
|
388
|
+
keep_all: 'keep-all',
|
|
389
|
+
break_word: 'break-word'
|
|
338
390
|
}[wordBreak];
|
|
339
391
|
}, function (_a) {
|
|
340
392
|
var $letterSpacing = _a.$letterSpacing;
|
|
@@ -409,19 +461,19 @@ var S_TextLabel = styled_components_1.default.div(templateObject_42 || (template
|
|
|
409
461
|
var bulletPointMode = _a.bulletPointMode;
|
|
410
462
|
return bulletPointMode === 'use' && bulletPointModeStyle;
|
|
411
463
|
});
|
|
412
|
-
var displayAfterTextBox = (0, styled_components_1.css)(
|
|
413
|
-
var headingAfterTextBox = (0, styled_components_1.css)(
|
|
414
|
-
var wizardPageTitleAfterTextBox = (0, styled_components_1.css)(
|
|
415
|
-
var leadParaAfterTextBox = (0, styled_components_1.css)(
|
|
416
|
-
var subTitleAfterTextBox = (0, styled_components_1.css)(
|
|
417
|
-
var body1AfterTextBox = (0, styled_components_1.css)(
|
|
418
|
-
var body2AfterTextBox = (0, styled_components_1.css)(
|
|
419
|
-
var caption1AfterTextBox = (0, styled_components_1.css)(
|
|
420
|
-
var caption2AfterTextBox = (0, styled_components_1.css)(
|
|
421
|
-
var form1AfterTextBox = (0, styled_components_1.css)(
|
|
422
|
-
var form2AfterTextBox = (0, styled_components_1.css)(
|
|
423
|
-
var blog1RAfterTextBox = (0, styled_components_1.css)(
|
|
424
|
-
var S_AfterTextBox = styled_components_1.default.div(
|
|
464
|
+
var displayAfterTextBox = (0, styled_components_1.css)(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
465
|
+
var headingAfterTextBox = (0, styled_components_1.css)(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
|
|
466
|
+
var wizardPageTitleAfterTextBox = (0, styled_components_1.css)(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n margin-bottom: 7px;\n"], ["\n margin-bottom: 7px;\n"])));
|
|
467
|
+
var leadParaAfterTextBox = (0, styled_components_1.css)(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
|
|
468
|
+
var subTitleAfterTextBox = (0, styled_components_1.css)(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
|
|
469
|
+
var body1AfterTextBox = (0, styled_components_1.css)(templateObject_44 || (templateObject_44 = __makeTemplateObject(["\n margin-bottom: 2px;\n"], ["\n margin-bottom: 2px;\n"])));
|
|
470
|
+
var body2AfterTextBox = (0, styled_components_1.css)(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
|
|
471
|
+
var caption1AfterTextBox = (0, styled_components_1.css)(templateObject_46 || (templateObject_46 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
|
|
472
|
+
var caption2AfterTextBox = (0, styled_components_1.css)(templateObject_47 || (templateObject_47 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
|
|
473
|
+
var form1AfterTextBox = (0, styled_components_1.css)(templateObject_48 || (templateObject_48 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
|
|
474
|
+
var form2AfterTextBox = (0, styled_components_1.css)(templateObject_49 || (templateObject_49 = __makeTemplateObject(["\n margin-bottom: 2px;\n"], ["\n margin-bottom: 2px;\n"])));
|
|
475
|
+
var blog1RAfterTextBox = (0, styled_components_1.css)(templateObject_50 || (templateObject_50 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
|
|
476
|
+
var S_AfterTextBox = styled_components_1.default.div(templateObject_51 || (templateObject_51 = __makeTemplateObject(["\n display: inline-block;\n margin-left: ", ";\n position: relative;\n vertical-align: middle;\n\n ", ";\n"], ["\n display: inline-block;\n margin-left: ", ";\n position: relative;\n vertical-align: middle;\n\n ", ";\n"])), function (_a) {
|
|
425
477
|
var theme = _a.theme;
|
|
426
478
|
return theme.spacing.spacingA;
|
|
427
479
|
}, function (_a) {
|
|
@@ -450,8 +502,8 @@ var S_AfterTextBox = styled_components_1.default.div(templateObject_55 || (templ
|
|
|
450
502
|
blog1Regular: blog1RAfterTextBox
|
|
451
503
|
}[styleTheme];
|
|
452
504
|
});
|
|
453
|
-
var S_IconWrapper = styled_components_1.default.div(
|
|
454
|
-
var S_TooltipWrapper = styled_components_1.default.div(
|
|
505
|
+
var S_IconWrapper = styled_components_1.default.div(templateObject_52 || (templateObject_52 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 16px;\n height: 100%;\n justify-content: center;\n width: 16px;\n"], ["\n align-items: center;\n display: flex;\n height: 16px;\n height: 100%;\n justify-content: center;\n width: 16px;\n"])));
|
|
506
|
+
var S_TooltipWrapper = styled_components_1.default.div(templateObject_53 || (templateObject_53 = __makeTemplateObject(["\n ", "\n align-items: center;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n display: flex;\n justify-content: center;\n line-height: 1.2;\n max-width: 240px;\n overflow-wrap: break-word;\n padding: ", ";\n position: fixed;\n text-align: left;\n white-space: pre-wrap;\n width: max-content;\n word-break: keep-all;\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 color: ", ";\n display: flex;\n justify-content: center;\n line-height: 1.2;\n max-width: 240px;\n overflow-wrap: break-word;\n padding: ", ";\n position: fixed;\n text-align: left;\n white-space: pre-wrap;\n width: max-content;\n word-break: keep-all;\n z-index: 400;\n\n ", ";\n ", ";\n"])), caption2Regular, function (_a) {
|
|
455
507
|
var theme = _a.theme;
|
|
456
508
|
return theme.ui_cpnt_button_tooltip_base;
|
|
457
509
|
}, function (_a) {
|
|
@@ -467,14 +519,8 @@ var S_TooltipWrapper = styled_components_1.default.div(templateObject_57 || (tem
|
|
|
467
519
|
var isTooltipOpen = _a.isTooltipOpen;
|
|
468
520
|
return !isTooltipOpen && 'display: none';
|
|
469
521
|
}, function (_a) {
|
|
470
|
-
var
|
|
471
|
-
return
|
|
472
|
-
{
|
|
473
|
-
left_top: tooltipLeftTop,
|
|
474
|
-
left_bottom: tooltipLeftBottom,
|
|
475
|
-
right_top: tooltipRightTop,
|
|
476
|
-
right_bottom: tooltipRightBottom
|
|
477
|
-
}[tooltipPosition];
|
|
522
|
+
var tooltipPositionCss = _a.tooltipPositionCss;
|
|
523
|
+
return tooltipPositionCss && tooltipPositionCss;
|
|
478
524
|
});
|
|
479
525
|
exports.default = TextLabel;
|
|
480
|
-
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, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49, templateObject_50, templateObject_51, templateObject_52, templateObject_53
|
|
526
|
+
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, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49, templateObject_50, templateObject_51, templateObject_52, templateObject_53;
|
|
@@ -42,7 +42,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
42
42
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
43
43
|
var hybrid_1 = require("../../../hybrid");
|
|
44
44
|
function TextLabel(_a) {
|
|
45
|
-
var text = _a.text, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'body2Bold' : _c, colorOverride = _a.colorOverride, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'sysTextPrimary' : _d, _e = _a.singleLineMode, singleLineMode = _e === void 0 ? 'none' : _e, _f = _a.ellipsisMode, ellipsisMode = _f === void 0 ? 'none' : _f, lineLimit = _a.lineLimit, _g = _a.userSelectMode, userSelectMode = _g === void 0 ? 'none' : _g, customFontSize = _a.customFontSize, customFontWeight = _a.customFontWeight, _h = _a.textDecorationType, textDecorationType = _h === void 0 ? 'none' : _h, _j = _a.requirementMode, requirementMode = _j === void 0 ? 'none' : _j, _k = _a.bulletPointMode, bulletPointMode = _k === void 0 ? 'none' : _k,
|
|
45
|
+
var text = _a.text, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'body2Bold' : _c, colorOverride = _a.colorOverride, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'sysTextPrimary' : _d, _e = _a.singleLineMode, singleLineMode = _e === void 0 ? 'none' : _e, _f = _a.ellipsisMode, ellipsisMode = _f === void 0 ? 'none' : _f, lineLimit = _a.lineLimit, _g = _a.userSelectMode, userSelectMode = _g === void 0 ? 'none' : _g, customFontSize = _a.customFontSize, customFontWeight = _a.customFontWeight, _h = _a.textDecorationType, textDecorationType = _h === void 0 ? 'none' : _h, _j = _a.requirementMode, requirementMode = _j === void 0 ? 'none' : _j, _k = _a.bulletPointMode, bulletPointMode = _k === void 0 ? 'none' : _k, _l = _a.wordBreak, wordBreak = _l === void 0 ? 'keep_all' : _l, letterSpacing = _a.letterSpacing;
|
|
46
46
|
return ((0, jsx_runtime_1.jsxs)(S_TextLabel, __assign({ "x-pds-name": "TextLabel", "x-pds-element-type": "component", "x-pds-device-type": "mobile", textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, userSelectMode: userSelectMode, customFontSize: customFontSize, customFontWeight: customFontWeight, textDecorationType: textDecorationType, bulletPointMode: bulletPointMode, wordBreak: wordBreak, "$letterSpacing": letterSpacing }, { children: [text, requirementMode === 'use' && ((0, jsx_runtime_1.jsx)(S_AfterTextBox, __assign({ styleTheme: styleTheme }, { children: (0, jsx_runtime_1.jsx)(S_IconWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_requirement", size: 16, fillType: "line", colorKey: "ui_cpnt_icon_sys_error_01" }) }) })))] })));
|
|
47
47
|
}
|
|
48
48
|
var displayBold = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"], ["\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
@@ -310,22 +310,17 @@ var ellipsisStyle = (0, styled_components_1.css)(templateObject_35 || (templateO
|
|
|
310
310
|
});
|
|
311
311
|
var userSelectModeStyle = (0, styled_components_1.css)(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n -khtml-user-select: none;\n -moz-user-select: -moz-none;\n -ms-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n"], ["\n -khtml-user-select: none;\n -moz-user-select: -moz-none;\n -ms-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n"])));
|
|
312
312
|
var bulletPointModeStyle = (0, styled_components_1.css)(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n padding-left: 16px;\n ::before {\n content: '\u2022';\n left: 0;\n position: absolute;\n width: 16px;\n }\n"], ["\n padding-left: 16px;\n ::before {\n content: '\u2022';\n left: 0;\n position: absolute;\n width: 16px;\n }\n"])));
|
|
313
|
-
var S_TextLabel = styled_components_1.default.div(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n box-sizing: border-box;\n overflow-wrap: break-word;\n text-align: ", ";\n white-space: pre-wrap;\n
|
|
313
|
+
var S_TextLabel = styled_components_1.default.div(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n box-sizing: border-box;\n overflow-wrap: break-word;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: ", ";\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n box-sizing: border-box;\n overflow-wrap: break-word;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: ", ";\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
|
|
314
314
|
var textAlign = _a.textAlign;
|
|
315
315
|
return textAlign;
|
|
316
|
-
}, function (_a) {
|
|
317
|
-
var theme = _a.theme;
|
|
318
|
-
return ['ko', 'ko-KR', 'ko-kr'].includes(theme.language)
|
|
319
|
-
? 'word-break: keep-all'
|
|
320
|
-
: 'word-break: normal';
|
|
321
316
|
}, function (_a) {
|
|
322
317
|
var wordBreak = _a.wordBreak;
|
|
323
318
|
return wordBreak &&
|
|
324
319
|
{
|
|
325
|
-
normal: '
|
|
326
|
-
break_all: '
|
|
327
|
-
keep_all: '
|
|
328
|
-
break_word: '
|
|
320
|
+
normal: 'normal',
|
|
321
|
+
break_all: 'break-all',
|
|
322
|
+
keep_all: 'keep-all',
|
|
323
|
+
break_word: 'break-word'
|
|
329
324
|
}[wordBreak];
|
|
330
325
|
}, function (_a) {
|
|
331
326
|
var $letterSpacing = _a.$letterSpacing;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "pds-dev-kit-web-test",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.33",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"private": false,
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -88,7 +88,6 @@
|
|
|
88
88
|
"@types/react-router-dom": "^5.3.3",
|
|
89
89
|
"@types/smoothscroll-polyfill": "^0.3.1",
|
|
90
90
|
"@types/styled-components": "^5.1.9",
|
|
91
|
-
"@typescript-eslint/eslint-plugin": "^6.4.0",
|
|
92
91
|
"@typescript-eslint/parser": "^6.3.0",
|
|
93
92
|
"chromatic": "^6.0.6",
|
|
94
93
|
"dotenv-cli": "^4.0.0",
|
package/release-note.md
CHANGED
|
@@ -1,10 +1,7 @@
|
|
|
1
1
|
# pds-dev-kit-web-test Release Notes
|
|
2
|
-
## [v0.2.
|
|
2
|
+
## [v0.2.33]
|
|
3
3
|
## 기준 pds-dev-kit-web 버전 @2.1.23
|
|
4
4
|
|
|
5
|
-
### Package
|
|
6
|
-
* theme
|
|
7
|
-
* language값을 받을 수 있도록 수정
|
|
8
5
|
### Component
|
|
9
6
|
* TextLabel
|
|
10
|
-
*
|
|
7
|
+
* tooltip이 떠있을 때 가려지는 문제와 영역 밖을 벗어나는 문제를 해결
|