pds-dev-kit-web 2.0.13 → 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.
@@ -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
- display: true,
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: 10,
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: '#FF1D973B',
1207
+ backgroundColorInHex: '#4A5D78AB',
1211
1208
  backgroundMediaSrc: '',
1212
1209
  backgroundMediaType: 'IMAGE',
1213
1210
  backgroundOverlayColorInHex: '#FFFFFF00',
1214
- buttonAlphaBackgroundColorInHex: '#FFC0CBFF',
1211
+ buttonAlphaBackgroundColorInHex: '#313131FF',
1215
1212
  buttonAlphaDesignType: 'C',
1216
1213
  buttonAlphaLabelColorInHex: '#f5efd9FF',
1217
- buttonBravoBackgroundColorInHex: '#FFC0CBFF',
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: '#FFC0CBFF',
1220
+ buttonDeltaBackgroundColorInHex: '#313131FF',
1224
1221
  buttonDeltaDesignType: 'A',
1225
1222
  buttonDeltaLabelColorInHex: '#FFFFFFFF',
1226
- buttonEchoBackgroundColorInHex: '#FFC0CBFF',
1223
+ buttonEchoBackgroundColorInHex: '#313131FF',
1227
1224
  buttonEchoDesignType: 'A',
1228
1225
  buttonEchoLabelColorInHex: '#FFFFFFFF',
1229
- descriptionColorInHex: '#FEECD8FF',
1230
- itemButtonBackgroundColorInHex: '#FFC0CBFF',
1226
+ descriptionColorInHex: '#DEECFFA6',
1227
+ itemButtonBackgroundColorInHex: '#313131FF',
1231
1228
  itemButtonDesignType: 'A',
1232
1229
  itemButtonLabelColorInHex: '#FFFFFFFF',
1233
1230
  itemDescriptionColorInHex: '#68686BFF',
1234
1231
  itemTitleColorInHex: '#1E1E20FF',
1235
- itemHighlightingColorInHex: '#FF1D97FF',
1232
+ titleColorInHex: '#DEECFFFF',
1233
+ itemHighlightingColorInHex: '#ff7f50FF',
1236
1234
  itemToneType: 'LIGHT',
1237
- titleColorInHex: '#F8FFACFF',
1238
1235
  programmedItemActionButtonTextType: 'A'
1239
1236
  },
1240
- template: 'PRG_MEMBERSHIP_DISPLAY_B',
1241
- updatedAt: '2023-01-06T09:05:45'
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", color: titleColorInHex, styleTheme: "headingBold" }, void 0)), 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" }, 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));
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", color: titleColorInHex, styleTheme: "headingBold" }, void 0)), 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" }, 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));
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "2.0.13",
3
+ "version": "2.0.14-alpha.0",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,11 +1,9 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v2.0.13]
2
+ ## [v2.0.14-alpha.0]
3
3
 
4
- ## daily|https://design.storybook.publ.biz/
4
+ ## alpha|https://storybook-pds-alpha.test.publ.biz
5
5
 
6
6
  ### sub
7
7
  * DynamicLayout
8
- * membership section 디자인 변경
9
- * 스토리북 세분화
10
- ### Color
11
- * 컬러 키 값 23.05.16 14시 55분 기준 싱크
8
+ * membership section 모바일 템플릿 디자인 수정
9
+ * sectionSheet의 EDITMODE와 NORMALMODE가 동일하게 보이도록 수정