pds-dev-kit-web 2.1.28-alpha.0 → 2.2.0
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 +5 -5
- package/dist/index.js +2 -3
- package/dist/src/common/index.d.ts +1 -1
- package/dist/src/common/styles/colorSet/UIColor.json +2 -1
- package/dist/src/common/styles/colorSet/index.d.ts +840 -839
- package/dist/src/common/styles/colorSet/index.js +3 -3
- package/dist/src/common/styles/colorSet/ui-type.d.ts +1 -0
- package/dist/src/common/styles/theme.d.ts +1 -0
- package/dist/src/common/styles/theme.js +4 -3
- package/dist/src/common/types/styled-components.d.ts +3 -0
- package/dist/src/desktop/components/TextLabel/TextLabel.js +14 -9
- package/dist/src/desktop/index.d.ts +1 -1
- package/dist/src/desktop/index.js +1 -2
- package/dist/src/desktop/panels/index.d.ts +1 -3
- package/dist/src/desktop/panels/index.js +1 -3
- package/dist/src/mobile/components/TextLabel/TextLabel.js +11 -6
- package/dist/src/sub/DynamicLayout/mock_storybook.js +20 -112
- package/dist/src/sub/DynamicLayout/sections/MembershipSection/NormalType/templates/TemplateA/mobile/components/SectionContents.js +1 -1
- package/dist/src/sub/DynamicLayout/sections/MembershipSection/NormalType/templates/TemplateB/mobile/components/SectionContents.js +1 -1
- package/package.json +2 -1
- package/release-note.md +7 -4
- package/dist/src/desktop/panels/DesktopBasicModalWithTab/Components/SideTab/SideTab.d.ts +0 -8
- package/dist/src/desktop/panels/DesktopBasicModalWithTab/Components/SideTab/SideTab.js +0 -58
- package/dist/src/desktop/panels/DesktopBasicModalWithTab/Components/SideTab/index.d.ts +0 -1
- package/dist/src/desktop/panels/DesktopBasicModalWithTab/Components/SideTab/index.js +0 -8
- package/dist/src/desktop/panels/DesktopBasicModalWithTab/Components/index.d.ts +0 -2
- package/dist/src/desktop/panels/DesktopBasicModalWithTab/Components/index.js +0 -5
- package/dist/src/desktop/panels/DesktopBasicModalWithTab/DesktopBasicModalWithTab.d.ts +0 -27
- package/dist/src/desktop/panels/DesktopBasicModalWithTab/DesktopBasicModalWithTab.js +0 -146
- package/dist/src/desktop/panels/DesktopBasicModalWithTab/index.d.ts +0 -2
- package/dist/src/desktop/panels/DesktopBasicModalWithTab/index.js +0 -8
|
@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
/* eslint-disable import/order */
|
|
7
7
|
var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
|
|
8
|
+
var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
|
|
8
9
|
var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
|
|
9
10
|
var UIColor_json_1 = __importDefault(require("./UIColor.json"));
|
|
10
|
-
var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
|
|
11
11
|
var colorSet = {
|
|
12
12
|
SemanticColor: SemanticColor_json_1.default,
|
|
13
|
+
PaletteColor_light: PaletteColor_light_json_1.default,
|
|
13
14
|
PaletteColor_Dark: PaletteColor_Dark_json_1.default,
|
|
14
|
-
UIColor: UIColor_json_1.default
|
|
15
|
-
PaletteColor_light: PaletteColor_light_json_1.default
|
|
15
|
+
UIColor: UIColor_json_1.default
|
|
16
16
|
};
|
|
17
17
|
exports.default = colorSet;
|
|
@@ -109,6 +109,7 @@ export declare const spacing: {
|
|
|
109
109
|
spacingM: string;
|
|
110
110
|
spacingN: string;
|
|
111
111
|
};
|
|
112
|
+
export declare const language = "ko";
|
|
112
113
|
declare const theme: DefaultTheme;
|
|
113
114
|
type ToneType = 'DARK' | 'LIGHT';
|
|
114
115
|
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.spacing = exports.boxShadow = exports.mobileEditorLineHeight = exports.mobileEditorFontSize = exports.mobileLineHeight = exports.mobileFontSize = exports.desktopEditorLineHeight = exports.desktopEditorFontSize = exports.desktopLineHeight = exports.desktopFontSize = exports.fontWeight = void 0;
|
|
14
|
+
exports.themeByGivenTone = exports.language = 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,7 +123,8 @@ exports.spacing = {
|
|
|
123
123
|
spacingM: '288px',
|
|
124
124
|
spacingN: '320px'
|
|
125
125
|
};
|
|
126
|
-
|
|
127
|
-
var
|
|
126
|
+
exports.language = 'ko';
|
|
127
|
+
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, language: exports.language }, (0, ui_colors_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK', window.PdsUtils ? window.PdsUtils.palette : {}));
|
|
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 })); };
|
|
128
129
|
exports.themeByGivenTone = themeByGivenTone;
|
|
129
130
|
exports.default = theme;
|
|
@@ -44,10 +44,10 @@ var react_dom_1 = require("react-dom");
|
|
|
44
44
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
45
45
|
var hybrid_1 = require("../../../hybrid");
|
|
46
46
|
function TextLabel(_a) {
|
|
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,
|
|
48
|
-
var
|
|
49
|
-
var
|
|
50
|
-
var
|
|
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, wordBreak = _a.wordBreak, letterSpacing = _a.letterSpacing;
|
|
48
|
+
var _o = (0, react_1.useState)(false), isTooltipOpen = _o[0], setIsTooltipOpen = _o[1];
|
|
49
|
+
var _p = (0, react_1.useState)(null), tooltipSizeOffset = _p[0], setTooltipSizeOffset = _p[1];
|
|
50
|
+
var _q = (0, react_1.useState)(null), tooltipPositionOffset = _q[0], setTooltipPositionOffset = _q[1];
|
|
51
51
|
var tooltipRef = (0, react_1.useRef)(null);
|
|
52
52
|
var tooltipPositionTargetRef = (0, react_1.useRef)(null);
|
|
53
53
|
var handleTooltipOpen = function () {
|
|
@@ -376,17 +376,22 @@ var ellipsisStyle = (0, styled_components_1.css)(templateObject_35 || (templateO
|
|
|
376
376
|
});
|
|
377
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"])));
|
|
378
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"])));
|
|
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
|
|
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\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) {
|
|
380
380
|
var textAlign = _a.textAlign;
|
|
381
381
|
return textAlign;
|
|
382
|
+
}, function (_a) {
|
|
383
|
+
var theme = _a.theme;
|
|
384
|
+
return ['ko', 'ko-KR', 'ko-kr'].includes(theme.language)
|
|
385
|
+
? 'word-break: keep-all'
|
|
386
|
+
: 'word-break: normal';
|
|
382
387
|
}, function (_a) {
|
|
383
388
|
var wordBreak = _a.wordBreak;
|
|
384
389
|
return wordBreak &&
|
|
385
390
|
{
|
|
386
|
-
normal: 'normal',
|
|
387
|
-
break_all: 'break-all',
|
|
388
|
-
keep_all: 'keep-all',
|
|
389
|
-
break_word: 'break-word'
|
|
391
|
+
normal: 'word-break: normal',
|
|
392
|
+
break_all: 'word-break: break-all',
|
|
393
|
+
keep_all: 'word-break: keep-all',
|
|
394
|
+
break_word: 'word-break: break-word'
|
|
390
395
|
}[wordBreak];
|
|
391
396
|
}, function (_a) {
|
|
392
397
|
var $letterSpacing = _a.$letterSpacing;
|
|
@@ -9,4 +9,4 @@ export { LayoutWT } from './layout/LayoutWT';
|
|
|
9
9
|
export { GlobalMenuContainer as WTGlobalMenuContainer } from './layout/LayoutWT/Containers';
|
|
10
10
|
export { ContainersBox as WTContainersBox } from './layout/LayoutWT/ContainersBox';
|
|
11
11
|
export { AdminList as D_AdminList, AdminListHeader as D_AdminListHeader, AdminListItem as D_AdminListItem, BasicButtonGroup as D_BasicButtonGroup, BasicChatListItem as D_BasicChatListItem, BasicFormGroup as D_BasicFormGroup, BasicList as D_BasicList, BasicListItem as D_BasicListItem, BlogTextField as D_BlogTextField, BodyTextGroup as D_BodyTextGroup, Card as D_Card, CardList as D_CardList, ChatBubbleListItem as D_ChatBubbleListItem, ChatList as D_ChatList, Checkbox as D_Checkbox, Chip as D_Chip, ContextMenu as D_ContextMenu, ContextMenuItem as D_ContextMenuItem, DesktopAlertDialog as D_DesktopAlertDialog, DesktopHeaderBar as D_DesktopHeaderBar, DesktopTabBar as D_DesktopTabBar, Dropdown as D_Dropdown, DynamicDesktopNavBar as D_DynamicDesktopNavBar, DynamicDesktopNavBarTemplates as D_DynamicDesktopNavBarTemplates, EditApplyTextField as D_EditApplyTextField, FilterBar as D_FilterBar, FloatingActionButton as D_FloatingActionButton, Hero as D_Hero, HorizontalFormGroup as D_HorizontalFormGroup, IconButton as D_IconButton, ImageSlide as D_ImageSlide, LottieReactionButton as D_LottieReactionButton, MainButton as D_MainButton, PageTitleTextGroup as D_PageTitleTextGroup, Radio as D_Radio, ReactionButton as D_ReactionButton, SegmentedButtonGroup as D_SegmentedButtonGroup, Select as D_Select, Slider as D_Slider, StatusBlock as D_StatusBlock, TextButton as D_TextButton, TextField as D_TextField, TextLabel as D_TextLabel, UploadIconButton as D_UploadIconButton, UploadMainButton as D_UploadMainButton, UploadTextButton as D_UploadTextButton, UserDesktopNavBar as D_UserDesktopNavBar, UserDesktopTabBar as D_UserDesktopTabBar, UserDesktopSideTab as D_UserDesktopSideTab } from './components';
|
|
12
|
-
export { AnnotationSheet as D_AnnotationSheet, ContentSheet as D_ContentSheet, DesktopBasicModal as D_DesktopBasicModal,
|
|
12
|
+
export { AnnotationSheet as D_AnnotationSheet, ContentSheet as D_ContentSheet, DesktopBasicModal as D_DesktopBasicModal, DesktopHeadlessModal as D_DesktopHeadlessModal, DesktopTutorialModal as D_DesktopTutorialModal, DesktopTutorialModalInfoType, SectionSheet as D_SectionSheet } from './panels';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.D_StatusBlock = exports.D_Slider = exports.D_Select = exports.D_SegmentedButtonGroup = exports.D_ReactionButton = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_LottieReactionButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_HorizontalFormGroup = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_DynamicDesktopNavBarTemplates = exports.D_DynamicDesktopNavBar = exports.D_Dropdown = exports.D_DesktopTabBar = exports.D_DesktopHeaderBar = exports.D_DesktopAlertDialog = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_ChatList = exports.D_ChatBubbleListItem = exports.D_CardList = exports.D_Card = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_BasicChatListItem = exports.D_BasicButtonGroup = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WHContainersBox = exports.LayoutWH = exports.WFContainersBox = exports.LayoutWF = void 0;
|
|
4
|
-
exports.D_SectionSheet = exports.D_DesktopTutorialModal = exports.D_DesktopHeadlessModal = exports.
|
|
4
|
+
exports.D_SectionSheet = exports.D_DesktopTutorialModal = exports.D_DesktopHeadlessModal = exports.D_DesktopBasicModal = exports.D_ContentSheet = exports.D_AnnotationSheet = exports.D_UserDesktopSideTab = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = void 0;
|
|
5
5
|
// layoutWF
|
|
6
6
|
var LayoutWF_1 = require("./layout/LayoutWF");
|
|
7
7
|
Object.defineProperty(exports, "LayoutWF", { enumerable: true, get: function () { return LayoutWF_1.LayoutWF; } });
|
|
@@ -82,7 +82,6 @@ var panels_1 = require("./panels");
|
|
|
82
82
|
Object.defineProperty(exports, "D_AnnotationSheet", { enumerable: true, get: function () { return panels_1.AnnotationSheet; } });
|
|
83
83
|
Object.defineProperty(exports, "D_ContentSheet", { enumerable: true, get: function () { return panels_1.ContentSheet; } });
|
|
84
84
|
Object.defineProperty(exports, "D_DesktopBasicModal", { enumerable: true, get: function () { return panels_1.DesktopBasicModal; } });
|
|
85
|
-
Object.defineProperty(exports, "D_DesktopBasicModalWithTab", { enumerable: true, get: function () { return panels_1.DesktopBasicModalWithTab; } });
|
|
86
85
|
Object.defineProperty(exports, "D_DesktopHeadlessModal", { enumerable: true, get: function () { return panels_1.DesktopHeadlessModal; } });
|
|
87
86
|
Object.defineProperty(exports, "D_DesktopTutorialModal", { enumerable: true, get: function () { return panels_1.DesktopTutorialModal; } });
|
|
88
87
|
Object.defineProperty(exports, "D_SectionSheet", { enumerable: true, get: function () { return panels_1.SectionSheet; } });
|
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
import { AnnotationSheet } from './AnnotationSheet';
|
|
2
2
|
import { ContentSheet } from './ContentSheet';
|
|
3
3
|
import { DesktopBasicModal } from './DesktopBasicModal';
|
|
4
|
-
import { DesktopBasicModalWithTab, DesktopBasicModalWithTabInfoType } from './DesktopBasicModalWithTab';
|
|
5
4
|
import { DesktopHeadlessModal } from './DesktopHeadlessModal';
|
|
6
5
|
import { DesktopTutorialModal, DesktopTutorialModalInfoType } from './DesktopTutorialModal';
|
|
7
6
|
import { SectionSheet } from './SectionSheet';
|
|
8
|
-
export { AnnotationSheet, ContentSheet, DesktopBasicModal,
|
|
9
|
-
export { DesktopBasicModalWithTabInfoType };
|
|
7
|
+
export { AnnotationSheet, ContentSheet, DesktopBasicModal, DesktopHeadlessModal, DesktopTutorialModal, SectionSheet };
|
|
10
8
|
export { DesktopTutorialModalInfoType };
|
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.SectionSheet = exports.DesktopTutorialModal = exports.DesktopHeadlessModal = exports.
|
|
3
|
+
exports.SectionSheet = exports.DesktopTutorialModal = exports.DesktopHeadlessModal = exports.DesktopBasicModal = exports.ContentSheet = exports.AnnotationSheet = void 0;
|
|
4
4
|
var AnnotationSheet_1 = require("./AnnotationSheet");
|
|
5
5
|
Object.defineProperty(exports, "AnnotationSheet", { enumerable: true, get: function () { return AnnotationSheet_1.AnnotationSheet; } });
|
|
6
6
|
var ContentSheet_1 = require("./ContentSheet");
|
|
7
7
|
Object.defineProperty(exports, "ContentSheet", { enumerable: true, get: function () { return ContentSheet_1.ContentSheet; } });
|
|
8
8
|
var DesktopBasicModal_1 = require("./DesktopBasicModal");
|
|
9
9
|
Object.defineProperty(exports, "DesktopBasicModal", { enumerable: true, get: function () { return DesktopBasicModal_1.DesktopBasicModal; } });
|
|
10
|
-
var DesktopBasicModalWithTab_1 = require("./DesktopBasicModalWithTab");
|
|
11
|
-
Object.defineProperty(exports, "DesktopBasicModalWithTab", { enumerable: true, get: function () { return DesktopBasicModalWithTab_1.DesktopBasicModalWithTab; } });
|
|
12
10
|
var DesktopHeadlessModal_1 = require("./DesktopHeadlessModal");
|
|
13
11
|
Object.defineProperty(exports, "DesktopHeadlessModal", { enumerable: true, get: function () { return DesktopHeadlessModal_1.DesktopHeadlessModal; } });
|
|
14
12
|
var DesktopTutorialModal_1 = require("./DesktopTutorialModal");
|
|
@@ -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, wordBreak = _a.wordBreak, 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,17 +310,22 @@ 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\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 ", ";\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';
|
|
316
321
|
}, function (_a) {
|
|
317
322
|
var wordBreak = _a.wordBreak;
|
|
318
323
|
return wordBreak &&
|
|
319
324
|
{
|
|
320
|
-
normal: 'normal',
|
|
321
|
-
break_all: 'break-all',
|
|
322
|
-
keep_all: 'keep-all',
|
|
323
|
-
break_word: 'break-word'
|
|
325
|
+
normal: 'word-break: normal',
|
|
326
|
+
break_all: 'word-break: break-all',
|
|
327
|
+
keep_all: 'word-break: keep-all',
|
|
328
|
+
break_word: 'word-break: break-word'
|
|
324
329
|
}[wordBreak];
|
|
325
330
|
}, function (_a) {
|
|
326
331
|
var $letterSpacing = _a.$letterSpacing;
|
|
@@ -1146,18 +1146,21 @@ exports.SampleSectionsMock = [
|
|
|
1146
1146
|
updatedAt: '2023-01-12T08:03:48'
|
|
1147
1147
|
},
|
|
1148
1148
|
{
|
|
1149
|
-
display: true,
|
|
1150
1149
|
type: 'PROGRAMMED',
|
|
1151
1150
|
program: 'MEMBERSHIP_DISPLAY',
|
|
1152
|
-
|
|
1151
|
+
display: true,
|
|
1152
|
+
dynamicLayoutSectionItems: null,
|
|
1153
1153
|
id: 6010,
|
|
1154
|
+
insertedAt: '2023-01-06T09:05:45',
|
|
1154
1155
|
manifest: {
|
|
1155
1156
|
availableProperties: [
|
|
1156
1157
|
'title',
|
|
1157
1158
|
'description',
|
|
1158
1159
|
'button_alpha_label',
|
|
1159
1160
|
'button_alpha_link_type',
|
|
1160
|
-
'button_alpha_link_src'
|
|
1161
|
+
'button_alpha_link_src',
|
|
1162
|
+
'section_content_media_type',
|
|
1163
|
+
'section_content_media_src'
|
|
1161
1164
|
],
|
|
1162
1165
|
availableStyles: [
|
|
1163
1166
|
'title_color_in_hex',
|
|
@@ -1176,7 +1179,7 @@ exports.SampleSectionsMock = [
|
|
|
1176
1179
|
availableTemplates: ['PRG_MEMBERSHIP_DISPLAY_A', 'PRG_MEMBERSHIP_DISPLAY_B'],
|
|
1177
1180
|
schema: 'PRG_MEMBERSHIP_DISPLAY'
|
|
1178
1181
|
},
|
|
1179
|
-
order:
|
|
1182
|
+
order: 10,
|
|
1180
1183
|
properties: {
|
|
1181
1184
|
buttonAlphaLabel: 'Lorem Ipsum',
|
|
1182
1185
|
buttonAlphaLinkSrc: 'https://team.publ.space',
|
|
@@ -1197,140 +1200,45 @@ exports.SampleSectionsMock = [
|
|
|
1197
1200
|
carouselAutoplayTime: 3,
|
|
1198
1201
|
carouselInfiniteLoopMode: 'NO_USE',
|
|
1199
1202
|
description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
|
|
1203
|
+
itemLinkMethod: 'CLICK_BUTTON_IN_ITEM',
|
|
1200
1204
|
sectionContentMediaSrc: '',
|
|
1201
1205
|
sectionContentMediaType: 'IMAGE',
|
|
1202
1206
|
title: 'Lorem Ipsum',
|
|
1203
|
-
multiPurposeUrl: 'https://app.publr.co/'
|
|
1204
|
-
itemLinkMethod: 'NONE'
|
|
1207
|
+
multiPurposeUrl: 'https://app.publr.co/'
|
|
1205
1208
|
},
|
|
1206
1209
|
styles: {
|
|
1207
|
-
backgroundColorInHex: '#
|
|
1210
|
+
backgroundColorInHex: '#FF1D973B',
|
|
1208
1211
|
backgroundMediaSrc: '',
|
|
1209
1212
|
backgroundMediaType: 'IMAGE',
|
|
1210
1213
|
backgroundOverlayColorInHex: '#FFFFFF00',
|
|
1211
|
-
buttonAlphaBackgroundColorInHex: '#
|
|
1214
|
+
buttonAlphaBackgroundColorInHex: '#FFC0CBFF',
|
|
1212
1215
|
buttonAlphaDesignType: 'C',
|
|
1213
1216
|
buttonAlphaLabelColorInHex: '#f5efd9FF',
|
|
1214
|
-
buttonBravoBackgroundColorInHex: '#
|
|
1217
|
+
buttonBravoBackgroundColorInHex: '#FFC0CBFF',
|
|
1215
1218
|
buttonBravoDesignType: 'E',
|
|
1216
1219
|
buttonBravoLabelColorInHex: '#FFFFFFFF',
|
|
1217
1220
|
buttonCharlieBackgroundColorInHex: '#465FF000',
|
|
1218
1221
|
buttonCharlieDesignType: 'E',
|
|
1219
1222
|
buttonCharlieLabelColorInHex: '#FFFFFFFF',
|
|
1220
|
-
buttonDeltaBackgroundColorInHex: '#
|
|
1223
|
+
buttonDeltaBackgroundColorInHex: '#FFC0CBFF',
|
|
1221
1224
|
buttonDeltaDesignType: 'A',
|
|
1222
1225
|
buttonDeltaLabelColorInHex: '#FFFFFFFF',
|
|
1223
|
-
buttonEchoBackgroundColorInHex: '#
|
|
1226
|
+
buttonEchoBackgroundColorInHex: '#FFC0CBFF',
|
|
1224
1227
|
buttonEchoDesignType: 'A',
|
|
1225
1228
|
buttonEchoLabelColorInHex: '#FFFFFFFF',
|
|
1226
|
-
descriptionColorInHex: '#
|
|
1227
|
-
itemButtonBackgroundColorInHex: '#
|
|
1229
|
+
descriptionColorInHex: '#FEECD8FF',
|
|
1230
|
+
itemButtonBackgroundColorInHex: '#FFC0CBFF',
|
|
1228
1231
|
itemButtonDesignType: 'A',
|
|
1229
1232
|
itemButtonLabelColorInHex: '#FFFFFFFF',
|
|
1230
1233
|
itemDescriptionColorInHex: '#68686BFF',
|
|
1231
1234
|
itemTitleColorInHex: '#1E1E20FF',
|
|
1232
|
-
|
|
1233
|
-
itemHighlightingColorInHex: '#ff7f50FF',
|
|
1235
|
+
itemHighlightingColorInHex: '#FF1D97FF',
|
|
1234
1236
|
itemToneType: 'LIGHT',
|
|
1237
|
+
titleColorInHex: '#F8FFACFF',
|
|
1235
1238
|
programmedItemActionButtonTextType: 'A'
|
|
1236
1239
|
},
|
|
1237
|
-
template: '
|
|
1238
|
-
|
|
1239
|
-
mdid: 'mdid',
|
|
1240
|
-
preview: {
|
|
1241
|
-
availableResources: ['REAL.MEMBERSHIP_DISPLAY'],
|
|
1242
|
-
resources: {
|
|
1243
|
-
mock: {},
|
|
1244
|
-
real: {
|
|
1245
|
-
membershipDisplay: {
|
|
1246
|
-
id: 1,
|
|
1247
|
-
mdid: "MEMBERSHIP_DISPLAY_MD_ID",
|
|
1248
|
-
title: "MEMBERSHIP_DISPLAY_MD_TITLE",
|
|
1249
|
-
isDefault: true,
|
|
1250
|
-
connectedMemberships: Array.from({ length: 6 }, function (_, i) {
|
|
1251
|
-
var alphabet = ['A', 'B', 'C', 'D', 'E', 'F'];
|
|
1252
|
-
var cardImage = [
|
|
1253
|
-
'https://cdn.dev.publishingkit.net/7f3f7a31-023b-4852-9a11-cbac31d25d93',
|
|
1254
|
-
'https://cdn.dev.publishingkit.net/c8973261-6c2a-4833-9b9f-20ee355647e4',
|
|
1255
|
-
'https://cdn.dev.publishingkit.net/8e585c93-9591-4300-ad93-d002560cbeae',
|
|
1256
|
-
'https://cdn.dev.publishingkit.net/4aaa2811-b3ff-435c-b50a-9486376ab230',
|
|
1257
|
-
'https://cdn.dev.publishingkit.net/5111c33c-07ba-4b91-8eb6-9975f4cd906a',
|
|
1258
|
-
'https://cdn.dev.publishingkit.net/16ac0a8a-acb1-465b-960c-6be66f2a04e8.jpg'
|
|
1259
|
-
];
|
|
1260
|
-
var getOverlayType = function () {
|
|
1261
|
-
if (i % 3 === 1)
|
|
1262
|
-
return 'SOLID';
|
|
1263
|
-
if (i % 3 === 2)
|
|
1264
|
-
return 'GRADIENT';
|
|
1265
|
-
return 'NONE';
|
|
1266
|
-
};
|
|
1267
|
-
var getDesignSchema = function () {
|
|
1268
|
-
if (i % 3 === 1)
|
|
1269
|
-
return 'B';
|
|
1270
|
-
if (i % 3 === 2)
|
|
1271
|
-
return 'C';
|
|
1272
|
-
return 'A';
|
|
1273
|
-
};
|
|
1274
|
-
return {
|
|
1275
|
-
id: i + 1,
|
|
1276
|
-
order: i,
|
|
1277
|
-
mdid: "CONNECTED_MEMBERSHIPS_".concat(alphabet[i], "_MD_ID"),
|
|
1278
|
-
mid: "CONNECTED_MEMBERSHIPS_".concat(alphabet[i], "_M_ID"),
|
|
1279
|
-
membership: {
|
|
1280
|
-
id: i + 1,
|
|
1281
|
-
type: 'GENERAL',
|
|
1282
|
-
mid: "MEMBERSHIP_".concat(alphabet[i], "_MID"),
|
|
1283
|
-
title: '청춘이 황금시대를 우리의 같은 무엇을 쓸쓸한 돋고, 장식하는 칼이다. 동산에는 투명하되!',
|
|
1284
|
-
insertedAt: '2023-01-06T09:05:45',
|
|
1285
|
-
updatedAt: '2023-01-06T09:05:45',
|
|
1286
|
-
membershipCardTemplate: {
|
|
1287
|
-
backgroundImageSrc: cardImage[i],
|
|
1288
|
-
logoImageSrc: 'https://publ-upload-local.s3.ap-northeast-2.amazonaws.com/e11d1a92-a1c0-4faa-b341-13a32f21828d_image',
|
|
1289
|
-
overlayType: getOverlayType(),
|
|
1290
|
-
overlayColorPrimary: '#FFC0CB49',
|
|
1291
|
-
overlayColorSecondary: '#31313149',
|
|
1292
|
-
designSchema: getDesignSchema()
|
|
1293
|
-
},
|
|
1294
|
-
membershipBenefitInfo: {
|
|
1295
|
-
benefitAlpha: '청춘이 황금시대를 우리의 같은 무엇을 쓸쓸한 돋고, 장식하는 칼이다. 동산에는 투명하되!',
|
|
1296
|
-
benefitBravo: 'Lorem ipsum dolor sit amet. Et magnam molestiae.',
|
|
1297
|
-
benefitCharlie: '청춘이 황금시대를 우리의 같은 무엇을 쓸쓸한 돋고, 장식하는 칼이다. 동산에는 투명하되!',
|
|
1298
|
-
benefitDelta: 'Lorem ipsum dolor sit amet. Et magnam molestiae.',
|
|
1299
|
-
benefitEcho: 'Lorem ipsum dolor sit amet. Et magnam molestiae.'
|
|
1300
|
-
},
|
|
1301
|
-
totalSubscriptionProducts: 3
|
|
1302
|
-
},
|
|
1303
|
-
connectedSubscriptionProducts: Array.from({ length: 1 }, function () {
|
|
1304
|
-
return {
|
|
1305
|
-
id: i + 1,
|
|
1306
|
-
order: i,
|
|
1307
|
-
connectedMembershipId: i + 1,
|
|
1308
|
-
subscriptionProductId: i + 1,
|
|
1309
|
-
subscriptionProduct: {
|
|
1310
|
-
id: i + 1,
|
|
1311
|
-
type: 'COUPON_ONCE_FINITE',
|
|
1312
|
-
title: '청춘이 황금시대를 우리의 같은 무엇을',
|
|
1313
|
-
alias: "CONNECTED_SUBSCRIPTION_PRODUCTS_".concat(alphabet[i], "_ALIAS"),
|
|
1314
|
-
expiryPeriodInDays: 7,
|
|
1315
|
-
isDeactivated: i % 2 === 0,
|
|
1316
|
-
fee: {
|
|
1317
|
-
currency: 'KRW',
|
|
1318
|
-
amount: 10000
|
|
1319
|
-
},
|
|
1320
|
-
insertedAt: '2023-01-06T09:05:45',
|
|
1321
|
-
updatedAt: '2023-01-06T09:05:45'
|
|
1322
|
-
}
|
|
1323
|
-
};
|
|
1324
|
-
})
|
|
1325
|
-
};
|
|
1326
|
-
})
|
|
1327
|
-
}
|
|
1328
|
-
}
|
|
1329
|
-
}
|
|
1330
|
-
}
|
|
1331
|
-
},
|
|
1332
|
-
insertedAt: '2023-01-30T10:24:35',
|
|
1333
|
-
updatedAt: '2023-01-30T10:24:35'
|
|
1240
|
+
template: 'PRG_MEMBERSHIP_DISPLAY_B',
|
|
1241
|
+
updatedAt: '2023-01-06T09:05:45'
|
|
1334
1242
|
}
|
|
1335
1243
|
];
|
|
1336
1244
|
var MembershipSectionsMock = function (templateType) { return [
|
|
@@ -30,7 +30,7 @@ function SectionContents() {
|
|
|
30
30
|
}
|
|
31
31
|
var _a = section.styles, buttonAlphaBackgroundColorInHex = _a.buttonAlphaBackgroundColorInHex, buttonAlphaLabelColorInHex = _a.buttonAlphaLabelColorInHex, buttonAlphaDesignType = _a.buttonAlphaDesignType, descriptionColorInHex = _a.descriptionColorInHex, titleColorInHex = _a.titleColorInHex;
|
|
32
32
|
var _b = section.properties, title = _b.title, description = _b.description, buttonAlphaLabel = _b.buttonAlphaLabel, buttonAlphaLinkSrc = _b.buttonAlphaLinkSrc, buttonAlphaLinkType = _b.buttonAlphaLinkType;
|
|
33
|
-
return ((0, jsx_runtime_1.jsxs)(S_SectionDataBox, __assign({ isEmptySectionData: !title && !description && !buttonAlphaLinkSrc }, { children: [title && ((0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Title, { text: title,
|
|
33
|
+
return ((0, jsx_runtime_1.jsxs)(S_SectionDataBox, __assign({ isEmptySectionData: !title && !description && !buttonAlphaLinkSrc }, { children: [title && ((0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Title, { text: title, textAlign: "center", color: titleColorInHex, styleTheme: "headingBold" })), description && ((0, jsx_runtime_1.jsx)(S_DescriptionWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Description, { text: description, textAlign: "center", color: descriptionColorInHex, styleTheme: "body1Regular" }) })), buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(S_ButtonWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.DesignedSectionButton, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex }) }))] })));
|
|
34
34
|
}
|
|
35
35
|
var S_SectionDataBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-bottom: ", ";\n"], ["\n margin-bottom: ", ";\n"])), function (_a) {
|
|
36
36
|
var isEmptySectionData = _a.isEmptySectionData, theme = _a.theme;
|
|
@@ -30,7 +30,7 @@ function SectionContents() {
|
|
|
30
30
|
}
|
|
31
31
|
var _a = section.styles, buttonAlphaBackgroundColorInHex = _a.buttonAlphaBackgroundColorInHex, buttonAlphaLabelColorInHex = _a.buttonAlphaLabelColorInHex, buttonAlphaDesignType = _a.buttonAlphaDesignType, descriptionColorInHex = _a.descriptionColorInHex, titleColorInHex = _a.titleColorInHex;
|
|
32
32
|
var _b = section.properties, title = _b.title, description = _b.description, buttonAlphaLabel = _b.buttonAlphaLabel, buttonAlphaLinkSrc = _b.buttonAlphaLinkSrc, buttonAlphaLinkType = _b.buttonAlphaLinkType;
|
|
33
|
-
return ((0, jsx_runtime_1.jsxs)(S_SectionDataBox, __assign({ isEmptySectionData: !title && !description && !buttonAlphaLinkSrc }, { children: [title && ((0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Title, { text: title,
|
|
33
|
+
return ((0, jsx_runtime_1.jsxs)(S_SectionDataBox, __assign({ isEmptySectionData: !title && !description && !buttonAlphaLinkSrc }, { children: [title && ((0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Title, { text: title, textAlign: "center", color: titleColorInHex, styleTheme: "headingBold" })), description && ((0, jsx_runtime_1.jsx)(S_DescriptionWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Description, { text: description, textAlign: "center", color: descriptionColorInHex, styleTheme: "body1Regular" }) })), buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(S_ButtonWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.DesignedSectionButton, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex }) }))] })));
|
|
34
34
|
}
|
|
35
35
|
var S_SectionDataBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-bottom: ", ";\n"], ["\n margin-bottom: ", ";\n"])), function (_a) {
|
|
36
36
|
var isEmptySectionData = _a.isEmptySectionData, theme = _a.theme;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "pds-dev-kit-web",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.2.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"private": false,
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -88,6 +88,7 @@
|
|
|
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.1",
|
|
91
92
|
"@typescript-eslint/parser": "^6.3.0",
|
|
92
93
|
"chromatic": "^6.0.6",
|
|
93
94
|
"dotenv-cli": "^4.0.0",
|
package/release-note.md
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
# PDS-DEV-KIT-WEB Release Notes
|
|
2
|
-
## [v2.
|
|
3
|
-
##
|
|
2
|
+
## [v2.2.0]
|
|
3
|
+
## release|https://design.storybook.publ.biz/
|
|
4
4
|
|
|
5
|
-
###
|
|
6
|
-
*
|
|
5
|
+
### Package
|
|
6
|
+
* theme에서 language값을 받을 수 있도록 추가
|
|
7
|
+
### Component
|
|
8
|
+
* TextLabel
|
|
9
|
+
* word break 기본값이 theme의 language로 받은 언어에 따라 설정될 수 있도록 수정
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import type { PDSTabItemOption } from '../../../../../common/types';
|
|
3
|
-
export type ItemType = PDSTabItemOption;
|
|
4
|
-
type SideTabProps = {
|
|
5
|
-
itemArray: ItemType[];
|
|
6
|
-
};
|
|
7
|
-
declare function SideTab({ itemArray }: SideTabProps): JSX.Element;
|
|
8
|
-
export default SideTab;
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
-
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
-
return cooked;
|
|
5
|
-
};
|
|
6
|
-
var __assign = (this && this.__assign) || function () {
|
|
7
|
-
__assign = Object.assign || function(t) {
|
|
8
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
9
|
-
s = arguments[i];
|
|
10
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
11
|
-
t[p] = s[p];
|
|
12
|
-
}
|
|
13
|
-
return t;
|
|
14
|
-
};
|
|
15
|
-
return __assign.apply(this, arguments);
|
|
16
|
-
};
|
|
17
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
18
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
19
|
-
};
|
|
20
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
21
|
-
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
22
|
-
var styled_components_1 = __importDefault(require("styled-components"));
|
|
23
|
-
var components_1 = require("../../../../components");
|
|
24
|
-
function SideTab(_a) {
|
|
25
|
-
var itemArray = _a.itemArray;
|
|
26
|
-
var handleClickTabItem = function (item, e) {
|
|
27
|
-
if (item.onClick) {
|
|
28
|
-
item.onClick(e);
|
|
29
|
-
}
|
|
30
|
-
};
|
|
31
|
-
return ((0, jsx_runtime_1.jsx)("div", { children: itemArray.map(function (item, index) {
|
|
32
|
-
return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ onClick: function (e) { return handleClickTabItem(item, e); } }, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: item.title, styleTheme: item.isActive ? 'subTitleBold' : 'subTitleRegular', colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary' }) }), index));
|
|
33
|
-
}) }));
|
|
34
|
-
}
|
|
35
|
-
var S_TabWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n box-sizing: border-box;\n cursor: pointer;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n & div {\n line-height: 1.3;\n }\n"], ["\n background-color: ", ";\n box-sizing: border-box;\n cursor: pointer;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n & div {\n line-height: 1.3;\n }\n"])), function (_a) {
|
|
36
|
-
var theme = _a.theme;
|
|
37
|
-
return theme.ui_cpnt_modalwithtab_sidetab_default;
|
|
38
|
-
}, function (_a) {
|
|
39
|
-
var theme = _a.theme;
|
|
40
|
-
return theme.spacing.spacingB;
|
|
41
|
-
}, function (_a) {
|
|
42
|
-
var theme = _a.theme;
|
|
43
|
-
return theme.spacing.spacingE;
|
|
44
|
-
}, function (_a) {
|
|
45
|
-
var theme = _a.theme;
|
|
46
|
-
return theme.spacing.spacingE;
|
|
47
|
-
}, function (_a) {
|
|
48
|
-
var theme = _a.theme;
|
|
49
|
-
return theme.spacing.spacingB;
|
|
50
|
-
}, function (_a) {
|
|
51
|
-
var theme = _a.theme;
|
|
52
|
-
return theme.ui_cpnt_modalwithtab_sidetab_hover;
|
|
53
|
-
}, function (_a) {
|
|
54
|
-
var theme = _a.theme;
|
|
55
|
-
return theme.ui_cpnt_modalwithtab_sidetab_pressed;
|
|
56
|
-
});
|
|
57
|
-
exports.default = SideTab;
|
|
58
|
-
var templateObject_1;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as SideTab } from './SideTab';
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.SideTab = void 0;
|
|
7
|
-
var SideTab_1 = require("./SideTab");
|
|
8
|
-
Object.defineProperty(exports, "SideTab", { enumerable: true, get: function () { return __importDefault(SideTab_1).default; } });
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import type { PDSTextType } from '../../../common';
|
|
3
|
-
export type DesktopBasicModalWithTabInfoType = {
|
|
4
|
-
sideTabTitleText: PDSTextType;
|
|
5
|
-
bodyTitleText?: PDSTextType;
|
|
6
|
-
body: React.ReactNode;
|
|
7
|
-
};
|
|
8
|
-
type DesktopBasicModalWithTabProps = {
|
|
9
|
-
size?: 'large' | 'medium';
|
|
10
|
-
modalTitleText: PDSTextType;
|
|
11
|
-
infoArray: DesktopBasicModalWithTabInfoType[];
|
|
12
|
-
btnMode?: 'btn_amount1' | 'btn_amount2' | 'btn_amount3';
|
|
13
|
-
btn1Text: PDSTextType;
|
|
14
|
-
btn2Text?: PDSTextType;
|
|
15
|
-
btn3Text?: PDSTextType;
|
|
16
|
-
btn1State?: 'normal' | 'disabled';
|
|
17
|
-
btn2State?: 'normal' | 'disabled';
|
|
18
|
-
btn3State?: 'normal' | 'disabled';
|
|
19
|
-
btn1Type?: 'button' | 'submit';
|
|
20
|
-
btn2Type?: 'button' | 'submit';
|
|
21
|
-
btn3Type?: 'button' | 'submit';
|
|
22
|
-
onClickBtn1?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
23
|
-
onClickBtn2?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
24
|
-
onClickBtn3?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
25
|
-
};
|
|
26
|
-
declare function DesktopBasicModalWithTab({ size, modalTitleText, infoArray, btnMode, btn1Text, btn2Text, btn3Text, btn1State, btn2State, btn3State, btn1Type, btn2Type, btn3Type, onClickBtn1, onClickBtn2, onClickBtn3 }: DesktopBasicModalWithTabProps): import("react").ReactPortal;
|
|
27
|
-
export default DesktopBasicModalWithTab;
|