pds-dev-kit-web 2.0.13-alpha.2 → 2.0.14-alpha.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/src/common/styles/colorSet/PaletteColor_Dark.json +2 -1
- package/dist/src/common/styles/colorSet/PaletteColor_light.json +2 -1
- package/dist/src/common/styles/colorSet/UIColor.json +2 -1
- package/dist/src/common/styles/colorSet/index.d.ts +3 -0
- package/dist/src/common/styles/colorSet/ui-type.d.ts +1 -0
- package/dist/src/sub/DynamicLayout/mock_storybook.js +112 -20
- 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 +1 -1
- package/release-note.md +3 -2
|
@@ -298,5 +298,6 @@
|
|
|
298
298
|
"sys_plan_base_03": "darkcoolpink500/opacity60",
|
|
299
299
|
"sys_text_warning_02": "darkbrown500",
|
|
300
300
|
"sys_component_base_39": "darkyellow300",
|
|
301
|
-
"sys_component_base_40": "darkorange50"
|
|
301
|
+
"sys_component_base_40": "darkorange50",
|
|
302
|
+
"sys_component_base_41": "darkskyblue100"
|
|
302
303
|
}
|
|
@@ -298,5 +298,6 @@
|
|
|
298
298
|
"sys_plan_base_03": "coolpink500/opacity60",
|
|
299
299
|
"sys_text_warning_02": "brown500",
|
|
300
300
|
"sys_component_base_39": "yellow300",
|
|
301
|
-
"sys_component_base_40": "orange50"
|
|
301
|
+
"sys_component_base_40": "orange50",
|
|
302
|
+
"sys_component_base_41": "skyblue100"
|
|
302
303
|
}
|
|
@@ -768,5 +768,6 @@
|
|
|
768
768
|
"ui_cpnt_textlabel_sys_warning_2": "sys_text_warning_02",
|
|
769
769
|
"ui_cpnt_sheet_base_20": "sys_component_base_39",
|
|
770
770
|
"ui_cpnt_sheet_base_21": "sys_component_base_32",
|
|
771
|
-
"ui_cpnt_sheet_base_22": "sys_component_base_40"
|
|
771
|
+
"ui_cpnt_sheet_base_22": "sys_component_base_40",
|
|
772
|
+
"ui_cpnt_sheet_base_23": "sys_component_base_41"
|
|
772
773
|
}
|
|
@@ -418,6 +418,7 @@ declare const colorSet: {
|
|
|
418
418
|
sys_text_warning_02: string;
|
|
419
419
|
sys_component_base_39: string;
|
|
420
420
|
sys_component_base_40: string;
|
|
421
|
+
sys_component_base_41: string;
|
|
421
422
|
};
|
|
422
423
|
readonly PaletteColor_light: {
|
|
423
424
|
sys_container_background_01: string;
|
|
@@ -720,6 +721,7 @@ declare const colorSet: {
|
|
|
720
721
|
sys_text_warning_02: string;
|
|
721
722
|
sys_component_base_39: string;
|
|
722
723
|
sys_component_base_40: string;
|
|
724
|
+
sys_component_base_41: string;
|
|
723
725
|
};
|
|
724
726
|
readonly UIColor: {
|
|
725
727
|
ui_cpnt_button_fill_base_primary: string;
|
|
@@ -1492,6 +1494,7 @@ declare const colorSet: {
|
|
|
1492
1494
|
ui_cpnt_sheet_base_20: string;
|
|
1493
1495
|
ui_cpnt_sheet_base_21: string;
|
|
1494
1496
|
ui_cpnt_sheet_base_22: string;
|
|
1497
|
+
ui_cpnt_sheet_base_23: string;
|
|
1495
1498
|
};
|
|
1496
1499
|
};
|
|
1497
1500
|
export default colorSet;
|
|
@@ -1146,21 +1146,18 @@ exports.SampleSectionsMock = [
|
|
|
1146
1146
|
updatedAt: '2023-01-12T08:03:48'
|
|
1147
1147
|
},
|
|
1148
1148
|
{
|
|
1149
|
+
display: true,
|
|
1149
1150
|
type: 'PROGRAMMED',
|
|
1150
1151
|
program: 'MEMBERSHIP_DISPLAY',
|
|
1151
|
-
|
|
1152
|
-
dynamicLayoutSectionItems: null,
|
|
1152
|
+
dynamicLayoutSectionItems: [],
|
|
1153
1153
|
id: 6010,
|
|
1154
|
-
insertedAt: '2023-01-06T09:05:45',
|
|
1155
1154
|
manifest: {
|
|
1156
1155
|
availableProperties: [
|
|
1157
1156
|
'title',
|
|
1158
1157
|
'description',
|
|
1159
1158
|
'button_alpha_label',
|
|
1160
1159
|
'button_alpha_link_type',
|
|
1161
|
-
'button_alpha_link_src'
|
|
1162
|
-
'section_content_media_type',
|
|
1163
|
-
'section_content_media_src'
|
|
1160
|
+
'button_alpha_link_src'
|
|
1164
1161
|
],
|
|
1165
1162
|
availableStyles: [
|
|
1166
1163
|
'title_color_in_hex',
|
|
@@ -1179,7 +1176,7 @@ exports.SampleSectionsMock = [
|
|
|
1179
1176
|
availableTemplates: ['PRG_MEMBERSHIP_DISPLAY_A', 'PRG_MEMBERSHIP_DISPLAY_B'],
|
|
1180
1177
|
schema: 'PRG_MEMBERSHIP_DISPLAY'
|
|
1181
1178
|
},
|
|
1182
|
-
order:
|
|
1179
|
+
order: 8,
|
|
1183
1180
|
properties: {
|
|
1184
1181
|
buttonAlphaLabel: 'Lorem Ipsum',
|
|
1185
1182
|
buttonAlphaLinkSrc: 'https://team.publ.space',
|
|
@@ -1200,45 +1197,140 @@ exports.SampleSectionsMock = [
|
|
|
1200
1197
|
carouselAutoplayTime: 3,
|
|
1201
1198
|
carouselInfiniteLoopMode: 'NO_USE',
|
|
1202
1199
|
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',
|
|
1204
1200
|
sectionContentMediaSrc: '',
|
|
1205
1201
|
sectionContentMediaType: 'IMAGE',
|
|
1206
1202
|
title: 'Lorem Ipsum',
|
|
1207
|
-
multiPurposeUrl: 'https://app.publr.co/'
|
|
1203
|
+
multiPurposeUrl: 'https://app.publr.co/',
|
|
1204
|
+
itemLinkMethod: 'NONE'
|
|
1208
1205
|
},
|
|
1209
1206
|
styles: {
|
|
1210
|
-
backgroundColorInHex: '#
|
|
1207
|
+
backgroundColorInHex: '#4A5D78AB',
|
|
1211
1208
|
backgroundMediaSrc: '',
|
|
1212
1209
|
backgroundMediaType: 'IMAGE',
|
|
1213
1210
|
backgroundOverlayColorInHex: '#FFFFFF00',
|
|
1214
|
-
buttonAlphaBackgroundColorInHex: '#
|
|
1211
|
+
buttonAlphaBackgroundColorInHex: '#313131FF',
|
|
1215
1212
|
buttonAlphaDesignType: 'C',
|
|
1216
1213
|
buttonAlphaLabelColorInHex: '#f5efd9FF',
|
|
1217
|
-
buttonBravoBackgroundColorInHex: '#
|
|
1214
|
+
buttonBravoBackgroundColorInHex: '#313131FF',
|
|
1218
1215
|
buttonBravoDesignType: 'E',
|
|
1219
1216
|
buttonBravoLabelColorInHex: '#FFFFFFFF',
|
|
1220
1217
|
buttonCharlieBackgroundColorInHex: '#465FF000',
|
|
1221
1218
|
buttonCharlieDesignType: 'E',
|
|
1222
1219
|
buttonCharlieLabelColorInHex: '#FFFFFFFF',
|
|
1223
|
-
buttonDeltaBackgroundColorInHex: '#
|
|
1220
|
+
buttonDeltaBackgroundColorInHex: '#313131FF',
|
|
1224
1221
|
buttonDeltaDesignType: 'A',
|
|
1225
1222
|
buttonDeltaLabelColorInHex: '#FFFFFFFF',
|
|
1226
|
-
buttonEchoBackgroundColorInHex: '#
|
|
1223
|
+
buttonEchoBackgroundColorInHex: '#313131FF',
|
|
1227
1224
|
buttonEchoDesignType: 'A',
|
|
1228
1225
|
buttonEchoLabelColorInHex: '#FFFFFFFF',
|
|
1229
|
-
descriptionColorInHex: '#
|
|
1230
|
-
itemButtonBackgroundColorInHex: '#
|
|
1226
|
+
descriptionColorInHex: '#DEECFFA6',
|
|
1227
|
+
itemButtonBackgroundColorInHex: '#313131FF',
|
|
1231
1228
|
itemButtonDesignType: 'A',
|
|
1232
1229
|
itemButtonLabelColorInHex: '#FFFFFFFF',
|
|
1233
1230
|
itemDescriptionColorInHex: '#68686BFF',
|
|
1234
1231
|
itemTitleColorInHex: '#1E1E20FF',
|
|
1235
|
-
|
|
1232
|
+
titleColorInHex: '#DEECFFFF',
|
|
1233
|
+
itemHighlightingColorInHex: '#ff7f50FF',
|
|
1236
1234
|
itemToneType: 'LIGHT',
|
|
1237
|
-
titleColorInHex: '#F8FFACFF',
|
|
1238
1235
|
programmedItemActionButtonTextType: 'A'
|
|
1239
1236
|
},
|
|
1240
|
-
template: '
|
|
1241
|
-
|
|
1237
|
+
template: 'PRG_MEMBERSHIP_DISPLAY_A',
|
|
1238
|
+
programData: {
|
|
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_" + alphabet[i] + "_MD_ID",
|
|
1278
|
+
mid: "CONNECTED_MEMBERSHIPS_" + alphabet[i] + "_M_ID",
|
|
1279
|
+
membership: {
|
|
1280
|
+
id: i + 1,
|
|
1281
|
+
type: 'GENERAL',
|
|
1282
|
+
mid: "MEMBERSHIP_" + 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_" + 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'
|
|
1242
1334
|
}
|
|
1243
1335
|
];
|
|
1244
1336
|
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, textAlign: "center",
|
|
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, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold", lineHeight: 1.3 }, void 0)), description && ((0, jsx_runtime_1.jsx)(S_DescriptionWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "18px", fontWeight: "600" }, void 0) }, void 0)), 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 }, void 0) }, void 0))] }), void 0));
|
|
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, textAlign: "center",
|
|
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, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold", lineHeight: 1.3 }, void 0)), description && ((0, jsx_runtime_1.jsx)(S_DescriptionWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "18px", fontWeight: "600" }, void 0) }, void 0)), 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 }, void 0) }, void 0))] }), void 0));
|
|
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
package/release-note.md
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
# PDS-DEV-KIT-WEB Release Notes
|
|
2
|
-
## [v2.0.
|
|
2
|
+
## [v2.0.14-alpha.0]
|
|
3
3
|
|
|
4
4
|
## alpha|https://storybook-pds-alpha.test.publ.biz
|
|
5
5
|
|
|
6
6
|
### sub
|
|
7
7
|
* DynamicLayout
|
|
8
|
-
* membership section
|
|
8
|
+
* membership section 모바일 템플릿 디자인 수정
|
|
9
|
+
* sectionSheet의 EDITMODE와 NORMALMODE가 동일하게 보이도록 수정
|