pds-dev-kit-web 2.0.10-alpha.0 → 2.0.10
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.
|
@@ -44,7 +44,7 @@ function TextLabel(_a) {
|
|
|
44
44
|
var handleTooltipToggle = function (value) {
|
|
45
45
|
setIsTooltipOpen(value);
|
|
46
46
|
};
|
|
47
|
-
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" }, void 0) }, void 0) }), void 0)), tooltipText && ((0, jsx_runtime_1.
|
|
47
|
+
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" }, void 0) }, void 0) }), void 0)), tooltipText && ((0, jsx_runtime_1.jsxs)(S_AfterTextBox, __assign({ styleTheme: styleTheme }, { children: [(0, jsx_runtime_1.jsx)(S_IconWrapper, __assign({ onMouseEnter: function () { return handleTooltipToggle(true); }, onMouseLeave: function () { return handleTooltipToggle(false); } }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_question", size: 16, fillType: "fill", colorKey: tooltipIconColorKey }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", isTooltipOpen: isTooltipOpen, tooltipPosition: tooltipPosition }, { children: "" + tooltipText }), void 0)] }), void 0))] }), void 0));
|
|
48
48
|
}
|
|
49
49
|
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) {
|
|
50
50
|
var theme = _a.theme;
|
|
@@ -285,12 +285,10 @@ var colorOverrideStyle = (0, styled_components_1.css)(templateObject_32 || (temp
|
|
|
285
285
|
var colorOverride = _a.colorOverride, theme = _a.theme;
|
|
286
286
|
return colorOverride && theme[colorOverride];
|
|
287
287
|
});
|
|
288
|
-
|
|
289
|
-
var ellipsisStyle = (0, styled_components_1.css)(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n"], ["\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n"])), function (_a) {
|
|
288
|
+
var ellipsisStyle = (0, styled_components_1.css)(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n -webkit-box-orient: vertical;\n -webkit-line-clamp: ", ";\n display: -webkit-box;\n overflow: hidden;\n text-overflow: ellipsis;\n"], ["\n -webkit-box-orient: vertical;\n -webkit-line-clamp: ", ";\n display: -webkit-box;\n overflow: hidden;\n text-overflow: ellipsis;\n"])), function (_a) {
|
|
290
289
|
var lineLimit = _a.lineLimit;
|
|
291
290
|
return lineLimit;
|
|
292
291
|
});
|
|
293
|
-
/* eslint-enable */
|
|
294
292
|
var userSelectModeStyle = (0, styled_components_1.css)(templateObject_34 || (templateObject_34 = __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"])));
|
|
295
293
|
var bulletPointModeStyle = (0, styled_components_1.css)(templateObject_35 || (templateObject_35 = __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"])));
|
|
296
294
|
var tooltipLeftTop = (0, styled_components_1.css)(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n bottom: 20px;\n right: 0;\n"], ["\n bottom: 20px;\n right: 0;\n"])));
|
|
@@ -380,11 +378,23 @@ var S_TextLabel = styled_components_1.default.div(templateObject_40 || (template
|
|
|
380
378
|
var bulletPointMode = _a.bulletPointMode;
|
|
381
379
|
return bulletPointMode === 'use' && bulletPointModeStyle;
|
|
382
380
|
});
|
|
383
|
-
var S_AfterTextBox = styled_components_1.default.div(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n
|
|
381
|
+
var S_AfterTextBox = styled_components_1.default.div(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n display: inline-block;\n margin-left: ", ";\n position: relative;\n\n ", ";\n"], ["\n display: inline-block;\n margin-left: ", ";\n position: relative;\n\n ", ";\n"])), function (_a) {
|
|
384
382
|
var theme = _a.theme;
|
|
385
383
|
return theme.spacing.spacingA;
|
|
386
|
-
})
|
|
387
|
-
var
|
|
384
|
+
}, function (_a) {
|
|
385
|
+
var styleTheme = _a.styleTheme;
|
|
386
|
+
switch (styleTheme) {
|
|
387
|
+
case 'headingBold':
|
|
388
|
+
return;
|
|
389
|
+
case 'leadParaBold':
|
|
390
|
+
return;
|
|
391
|
+
case 'leadParaRegular':
|
|
392
|
+
return;
|
|
393
|
+
default:
|
|
394
|
+
return 'vertical-align: middle';
|
|
395
|
+
}
|
|
396
|
+
});
|
|
397
|
+
var S_IconWrapper = styled_components_1.default.div(templateObject_42 || (templateObject_42 = __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"])));
|
|
388
398
|
var S_TooltipWrapper = styled_components_1.default.div(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 8px;\n box-shadow: ", ";\n box-sizing: border-box;\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n max-width: 320px;\n overflow-wrap: break-word;\n padding: ", ";\n position: absolute;\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 background-color: ", ";\n border: 1px solid ", ";\n border-radius: 8px;\n box-shadow: ", ";\n box-sizing: border-box;\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n max-width: 320px;\n overflow-wrap: break-word;\n padding: ", ";\n position: absolute;\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"])), function (_a) {
|
|
389
399
|
var theme = _a.theme;
|
|
390
400
|
return theme.ui_cpnt_contextmenu_base;
|
|
@@ -71,7 +71,7 @@ function MobileHeaderBar(_a) {
|
|
|
71
71
|
return ((0, jsx_runtime_1.jsxs)(S_ProfileWrapper, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: imageSrc, shapeType: "circular", width: 40, ratio: "1_1", scaleType: "cover", borderMode: "use" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "caption1Regular", singleLineMode: "use", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }, void 0)] }, void 0));
|
|
72
72
|
}
|
|
73
73
|
case 'image': {
|
|
74
|
-
return ((0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: imageSrc, shapeType: "rectangle", height: 32, scaleType: "
|
|
74
|
+
return ((0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: imageSrc, shapeType: "rectangle", height: 32, scaleType: "contain", width: 160 }, void 0));
|
|
75
75
|
}
|
|
76
76
|
}
|
|
77
77
|
};
|
package/package.json
CHANGED
package/release-note.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
# PDS-DEV-KIT-WEB Release Notes
|
|
2
|
-
## [v2.0.10
|
|
2
|
+
## [v2.0.10]
|
|
3
3
|
|
|
4
|
-
##
|
|
4
|
+
## daily|https://design.storybook.publ.biz/
|
|
5
5
|
|
|
6
6
|
### Component
|
|
7
|
-
*
|
|
8
|
-
*
|
|
7
|
+
* MobileHeaderBar
|
|
8
|
+
* titleType이 image일때 scaleType을 cover에서 contain으로 변경
|