pds-dev-kit-web-test 0.0.18 → 0.0.20

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.
Files changed (37) hide show
  1. package/dist/src/common/styles/colorSet/PaletteColor_Dark.json +4 -1
  2. package/dist/src/common/styles/colorSet/PaletteColor_light.json +4 -1
  3. package/dist/src/common/styles/colorSet/UIColor.json +9 -4
  4. package/dist/src/common/styles/colorSet/index.d.ts +11 -0
  5. package/dist/src/common/styles/colorSet/ui-type.d.ts +5 -0
  6. package/dist/src/sub/DynamicLayout/DynamicLayout.js +13 -2
  7. package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/common/styles/colorSet/PaletteColor_Dark.json +4 -1
  8. package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/common/styles/colorSet/PaletteColor_light.json +4 -1
  9. package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/common/styles/colorSet/UIColor.json +11 -4
  10. package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/common/styles/colorSet/index.d.ts +93 -80
  11. package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/common/styles/colorSet/index.js +2 -2
  12. package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/common/styles/colorSet/ui-type.d.ts +7 -0
  13. package/dist/src/sub/DynamicLayout/desktop/components/Item/Item.d.ts +3 -1
  14. package/dist/src/sub/DynamicLayout/desktop/components/Item/Item.js +6 -3
  15. package/dist/src/sub/DynamicLayout/desktop/components/Section/Section.d.ts +3 -1
  16. package/dist/src/sub/DynamicLayout/desktop/components/Section/Section.js +10 -13
  17. package/dist/src/sub/DynamicLayout/desktop/components/common/YouTubeIframe.js +6 -2
  18. package/dist/src/sub/DynamicLayout/desktop/sections/ContentsCarouselSection/templates/TemplateA/TemplateA.js +7 -6
  19. package/dist/src/sub/DynamicLayout/desktop/sections/ContentsCarouselSection/templates/TemplateB/TemplateB.js +7 -6
  20. package/dist/src/sub/DynamicLayout/desktop/sections/ContentsSection/templates/TemplateA/TemplateA.js +1 -1
  21. package/dist/src/sub/DynamicLayout/desktop/sections/ContentsSection/templates/TemplateB/TemplateB.js +1 -1
  22. package/dist/src/sub/DynamicLayout/desktop/sections/InfoBoxSection/templates/TemplateA/TemplateA.js +8 -7
  23. package/dist/src/sub/DynamicLayout/mobile/components/Item/Item.d.ts +3 -1
  24. package/dist/src/sub/DynamicLayout/mobile/components/Item/Item.js +6 -3
  25. package/dist/src/sub/DynamicLayout/mobile/components/Section/Section.js +4 -10
  26. package/dist/src/sub/DynamicLayout/mobile/components/common/YouTubeIframe.js +6 -2
  27. package/dist/src/sub/DynamicLayout/mobile/sections/ContentsCarouselSection/templates/TemplateA/TemplateA.js +10 -15
  28. package/dist/src/sub/DynamicLayout/mobile/sections/ContentsCarouselSection/templates/TemplateB/TemplateB.js +10 -15
  29. package/dist/src/sub/DynamicLayout/mobile/sections/ContentsSection/templates/TemplateA/TemplateA.js +1 -1
  30. package/dist/src/sub/DynamicLayout/mobile/sections/ContentsSection/templates/TemplateB/TemplateB.js +1 -1
  31. package/dist/src/sub/DynamicLayout/mobile/sections/InfoBoxSection/templates/TemplateA/TemplateA.js +10 -15
  32. package/dist/src/sub/DynamicLayout/mobile/sections/IntroSection/templates/TemplateA/TemplateA.js +2 -2
  33. package/dist/src/sub/DynamicLayout/mobile/sections/IntroSection/templates/TemplateB/TemplateB.js +2 -2
  34. package/dist/src/sub/DynamicLayout/mobile/sections/IntroSection/templates/TemplateC/TemplateC.js +2 -2
  35. package/dist/src/sub/DynamicLayout/mobile/sections/IntroSection/templates/TemplateD/TemplateD.js +2 -2
  36. package/package.json +1 -1
  37. package/release-note.md +5 -4
package/dist/src/common/styles/colorSet/PaletteColor_Dark.json CHANGED
@@ -224,5 +224,8 @@
224
224
  "sys_cpnt_sheet_base_04": "darkblue500",
225
225
  "sys_cpnt_sheet_base_05": "grey950",
226
226
  "sys_cpnt_sheet_base_06": "darkgreen500",
227
- "sys_facebook": "facebookblue"
227
+ "sys_facebook": "facebookblue",
228
+ "sys_component_base_19": "white/opacity65",
229
+ "sys_cpnt_pagination_dot_01": "white",
230
+ "sys_cpnt_pagination_dot_02": "white/opacity50"
228
231
  }
package/dist/src/common/styles/colorSet/PaletteColor_light.json CHANGED
@@ -224,5 +224,8 @@
224
224
  "sys_cpnt_sheet_base_04": "blue500",
225
225
  "sys_cpnt_sheet_base_05": "grey950",
226
226
  "sys_cpnt_sheet_base_06": "green500",
227
- "sys_facebook": "facebookblue"
227
+ "sys_facebook": "facebookblue",
228
+ "sys_component_base_19": "white/opacity65",
229
+ "sys_cpnt_pagination_dot_01": "grey400",
230
+ "sys_cpnt_pagination_dot_02": "white/opacity50"
228
231
  }
package/dist/src/common/styles/colorSet/UIColor.json CHANGED
@@ -634,12 +634,17 @@
634
634
  "ui_cpnt_sheet_base_06": "sys_cpnt_sheet_base_04",
635
635
  "ui_cpnt_sheet_base_07": "sys_cpnt_sheet_base_05",
636
636
  "ui_cpnt_sheet_base_08": "sys_cpnt_sheet_base_06",
637
- "ui_cpnt_pagination_dot_01": "sys_widget_white",
638
- "ui_cpnt_pagination_dot_02": "sys_cpnt_base_white_opacity50",
639
- "ui_cpnt_pagination_dot_border": "sys_border_line_01",
637
+ "ui_cpnt_pagination_dot_01": "sys_cpnt_pagination_dot_01",
638
+ "ui_cpnt_pagination_dot_02": "sys_cpnt_pagination_dot_02",
639
+ "ui_cpnt_pagination_dot_border": "sys_border_line_02",
640
640
  "ui_63": "sys_facebook",
641
641
  "ui_64": "sys_text_white",
642
642
  "ui_cpnt_sheet_border_04": "sys_border_line_02",
643
643
  "ui_cpnt_button_fill_base_01": "sys_component_base_05",
644
- "ui_cpnt_button_fill_base_hangup": "sys_component_base_red"
644
+ "ui_cpnt_button_fill_base_hangup": "sys_component_base_red",
645
+ "ui_cpnt_refund_text_status_issued": "sys_widget_orange_01",
646
+ "ui_cpnt_refund_text_status_refunded": "sys_widget_success_01",
647
+ "ui_cpnt_divider_white_01": "sys_component_base_19",
648
+ "ui_cpnt_timer_base_01": "sys_background_dimmed",
649
+ "ui_cpnt_timer_base_timeup": "sys_component_base_17"
645
650
  }
package/dist/src/common/styles/colorSet/index.d.ts CHANGED
@@ -306,6 +306,9 @@ declare const colorSet: {
306
306
  sys_cpnt_sheet_base_05: string;
307
307
  sys_cpnt_sheet_base_06: string;
308
308
  sys_facebook: string;
309
+ sys_component_base_19: string;
310
+ sys_cpnt_pagination_dot_01: string;
311
+ sys_cpnt_pagination_dot_02: string;
309
312
  };
310
313
  readonly PaletteColor_light: {
311
314
  sys_container_background_01: string;
@@ -534,6 +537,9 @@ declare const colorSet: {
534
537
  sys_cpnt_sheet_base_05: string;
535
538
  sys_cpnt_sheet_base_06: string;
536
539
  sys_facebook: string;
540
+ sys_component_base_19: string;
541
+ sys_cpnt_pagination_dot_01: string;
542
+ sys_cpnt_pagination_dot_02: string;
537
543
  };
538
544
  readonly UIColor: {
539
545
  ui_cpnt_button_fill_base_primary: string;
@@ -1179,6 +1185,11 @@ declare const colorSet: {
1179
1185
  ui_cpnt_sheet_border_04: string;
1180
1186
  ui_cpnt_button_fill_base_01: string;
1181
1187
  ui_cpnt_button_fill_base_hangup: string;
1188
+ ui_cpnt_refund_text_status_issued: string;
1189
+ ui_cpnt_refund_text_status_refunded: string;
1190
+ ui_cpnt_divider_white_01: string;
1191
+ ui_cpnt_timer_base_01: string;
1192
+ ui_cpnt_timer_base_timeup: string;
1182
1193
  };
1183
1194
  };
1184
1195
  export default colorSet;
package/dist/src/common/styles/colorSet/ui-type.d.ts CHANGED
@@ -642,4 +642,9 @@ export interface UITheme {
642
642
  ui_cpnt_sheet_border_04: string;
643
643
  ui_cpnt_button_fill_base_01: string;
644
644
  ui_cpnt_button_fill_base_hangup: string;
645
+ ui_cpnt_refund_text_status_issued: string;
646
+ ui_cpnt_refund_text_status_refunded: string;
647
+ ui_cpnt_divider_white_01: string;
648
+ ui_cpnt_timer_base_01: string;
649
+ ui_cpnt_timer_base_timeup: string;
645
650
  }
package/dist/src/sub/DynamicLayout/DynamicLayout.js CHANGED
@@ -1,4 +1,13 @@
1
1
  "use strict";
2
+ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
3
+ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
4
+ if (ar || !(i in from)) {
5
+ if (!ar) ar = Array.prototype.slice.call(from, 0, i);
6
+ ar[i] = from[i];
7
+ }
8
+ }
9
+ return to.concat(ar || Array.prototype.slice.call(from));
10
+ };
2
11
  var __importDefault = (this && this.__importDefault) || function (mod) {
3
12
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
13
  };
@@ -9,9 +18,11 @@ var dynamicLayoutContext_1 = require("./dynamicLayoutContext");
9
18
  var mobile_1 = require("./mobile");
10
19
  function DynamicLayout(_a) {
11
20
  var device = _a.device, isPreview = _a.isPreview, sections = _a.sections, navigationHandler = _a.navigationHandler;
21
+ var filteredSortedSection = __spreadArray([], sections, true).filter(function (section) { return section.display; })
22
+ .sort(function (a, b) { return a.order - b.order; });
12
23
  return (react_1.default.createElement(dynamicLayoutContext_1.dynamicLayoutContext.Provider, { value: { isPreview: isPreview, navigationHandler: navigationHandler } }, {
13
- MOBILE: react_1.default.createElement(mobile_1.MobileWeb, { sections: sections }),
14
- DESKTOP: react_1.default.createElement(desktop_1.DesktopWeb, { sections: sections })
24
+ MOBILE: react_1.default.createElement(mobile_1.MobileWeb, { sections: filteredSortedSection }),
25
+ DESKTOP: react_1.default.createElement(desktop_1.DesktopWeb, { sections: filteredSortedSection })
15
26
  }[device]));
16
27
  }
17
28
  exports.default = DynamicLayout;
package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/common/styles/colorSet/PaletteColor_Dark.json CHANGED
@@ -224,5 +224,8 @@
224
224
  "sys_cpnt_sheet_base_04": "darkblue500",
225
225
  "sys_cpnt_sheet_base_05": "grey950",
226
226
  "sys_cpnt_sheet_base_06": "darkgreen500",
227
- "sys_facebook": "facebookblue"
227
+ "sys_facebook": "facebookblue",
228
+ "sys_component_base_19": "white/opacity65",
229
+ "sys_cpnt_pagination_dot_01": "white",
230
+ "sys_cpnt_pagination_dot_02": "white/opacity50"
228
231
  }
package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/common/styles/colorSet/PaletteColor_light.json CHANGED
@@ -224,5 +224,8 @@
224
224
  "sys_cpnt_sheet_base_04": "blue500",
225
225
  "sys_cpnt_sheet_base_05": "grey950",
226
226
  "sys_cpnt_sheet_base_06": "green500",
227
- "sys_facebook": "facebookblue"
227
+ "sys_facebook": "facebookblue",
228
+ "sys_component_base_19": "white/opacity65",
229
+ "sys_cpnt_pagination_dot_01": "grey400",
230
+ "sys_cpnt_pagination_dot_02": "white/opacity50"
228
231
  }
package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/common/styles/colorSet/UIColor.json CHANGED
@@ -634,10 +634,17 @@
634
634
  "ui_cpnt_sheet_base_06": "sys_cpnt_sheet_base_04",
635
635
  "ui_cpnt_sheet_base_07": "sys_cpnt_sheet_base_05",
636
636
  "ui_cpnt_sheet_base_08": "sys_cpnt_sheet_base_06",
637
- "ui_cpnt_pagination_dot_01": "sys_widget_white",
638
- "ui_cpnt_pagination_dot_02": "sys_cpnt_base_white_opacity50",
639
- "ui_cpnt_pagination_dot_border": "sys_border_line_01",
637
+ "ui_cpnt_pagination_dot_01": "sys_cpnt_pagination_dot_01",
638
+ "ui_cpnt_pagination_dot_02": "sys_cpnt_pagination_dot_02",
639
+ "ui_cpnt_pagination_dot_border": "sys_border_line_02",
640
640
  "ui_63": "sys_facebook",
641
641
  "ui_64": "sys_text_white",
642
- "ui_cpnt_sheet_border_04": "sys_border_line_02"
642
+ "ui_cpnt_sheet_border_04": "sys_border_line_02",
643
+ "ui_cpnt_button_fill_base_01": "sys_component_base_05",
644
+ "ui_cpnt_button_fill_base_hangup": "sys_component_base_red",
645
+ "ui_cpnt_refund_text_status_issued": "sys_widget_orange_01",
646
+ "ui_cpnt_refund_text_status_refunded": "sys_widget_success_01",
647
+ "ui_cpnt_divider_white_01": "sys_component_base_19",
648
+ "ui_cpnt_timer_base_01": "sys_background_dimmed",
649
+ "ui_cpnt_timer_base_timeup": "sys_component_base_17"
643
650
  }
package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/common/styles/colorSet/index.d.ts CHANGED
@@ -1,4 +1,84 @@
1
1
  declare const colorSet: {
2
+ readonly SemanticColor: {
3
+ blue500: string;
4
+ blue700: string;
5
+ blue300: string;
6
+ green700: string;
7
+ green500: string;
8
+ green300: string;
9
+ red500: string;
10
+ grey900: string;
11
+ grey500: string;
12
+ grey400: string;
13
+ grey100: string;
14
+ grey50: string;
15
+ white: string;
16
+ black: string;
17
+ darkblue500: string;
18
+ grey950: string;
19
+ darkgrey900: string;
20
+ darkgrey500: string;
21
+ darkgrey400: string;
22
+ darkgrey100: string;
23
+ darkgrey50: string;
24
+ darkred500: string;
25
+ darkgreen700: string;
26
+ orange500: string;
27
+ darkorange500: string;
28
+ opacity00: string;
29
+ opacity20: string;
30
+ opacity30: string;
31
+ opacity65: string;
32
+ darkgreen500: string;
33
+ grey70: string;
34
+ navy500: string;
35
+ lightgreen500: string;
36
+ pink500: string;
37
+ darkgrey70: string;
38
+ darknavy500: string;
39
+ darkpink500: string;
40
+ darklightgreen500: string;
41
+ opacity10: string;
42
+ grey600: string;
43
+ darkgrey600: string;
44
+ skyblue500: string;
45
+ skyblue300: string;
46
+ pink300: string;
47
+ lightpink500: string;
48
+ darkblue300: string;
49
+ darkblue700: string;
50
+ darkgreen300: string;
51
+ darkskyblue500: string;
52
+ navy100: string;
53
+ darknavy100: string;
54
+ opacity80: string;
55
+ opacity50: string;
56
+ grey30: string;
57
+ opacity95: string;
58
+ darkgrey30: string;
59
+ opacity40: string;
60
+ kakaoyellow: string;
61
+ pastelblue500: string;
62
+ pastelpink500: string;
63
+ pastelorange500: string;
64
+ pastelgreen500: string;
65
+ pastelpurple500: string;
66
+ darkpastelblue500: string;
67
+ darkpastelpink500: string;
68
+ darkpastelorange500: string;
69
+ darkpastelgreen500: string;
70
+ darkpastelpurple500: string;
71
+ green30: string;
72
+ darkgreen30: string;
73
+ orange50: string;
74
+ darkorange50: string;
75
+ orange30: string;
76
+ darkorange30: string;
77
+ green50: string;
78
+ darkgreen50: string;
79
+ opacity90: string;
80
+ facebookblue: string;
81
+ };
2
82
  readonly PaletteColor_Dark: {
3
83
  sys_container_background_01: string;
4
84
  sys_container_background_02: string;
@@ -226,6 +306,9 @@ declare const colorSet: {
226
306
  sys_cpnt_sheet_base_05: string;
227
307
  sys_cpnt_sheet_base_06: string;
228
308
  sys_facebook: string;
309
+ sys_component_base_19: string;
310
+ sys_cpnt_pagination_dot_01: string;
311
+ sys_cpnt_pagination_dot_02: string;
229
312
  };
230
313
  readonly PaletteColor_light: {
231
314
  sys_container_background_01: string;
@@ -454,86 +537,9 @@ declare const colorSet: {
454
537
  sys_cpnt_sheet_base_05: string;
455
538
  sys_cpnt_sheet_base_06: string;
456
539
  sys_facebook: string;
457
- };
458
- readonly SemanticColor: {
459
- blue500: string;
460
- blue700: string;
461
- blue300: string;
462
- green700: string;
463
- green500: string;
464
- green300: string;
465
- red500: string;
466
- grey900: string;
467
- grey500: string;
468
- grey400: string;
469
- grey100: string;
470
- grey50: string;
471
- white: string;
472
- black: string;
473
- darkblue500: string;
474
- grey950: string;
475
- darkgrey900: string;
476
- darkgrey500: string;
477
- darkgrey400: string;
478
- darkgrey100: string;
479
- darkgrey50: string;
480
- darkred500: string;
481
- darkgreen700: string;
482
- orange500: string;
483
- darkorange500: string;
484
- opacity00: string;
485
- opacity20: string;
486
- opacity30: string;
487
- opacity65: string;
488
- darkgreen500: string;
489
- grey70: string;
490
- navy500: string;
491
- lightgreen500: string;
492
- pink500: string;
493
- darkgrey70: string;
494
- darknavy500: string;
495
- darkpink500: string;
496
- darklightgreen500: string;
497
- opacity10: string;
498
- grey600: string;
499
- darkgrey600: string;
500
- skyblue500: string;
501
- skyblue300: string;
502
- pink300: string;
503
- lightpink500: string;
504
- darkblue300: string;
505
- darkblue700: string;
506
- darkgreen300: string;
507
- darkskyblue500: string;
508
- navy100: string;
509
- darknavy100: string;
510
- opacity80: string;
511
- opacity50: string;
512
- grey30: string;
513
- opacity95: string;
514
- darkgrey30: string;
515
- opacity40: string;
516
- kakaoyellow: string;
517
- pastelblue500: string;
518
- pastelpink500: string;
519
- pastelorange500: string;
520
- pastelgreen500: string;
521
- pastelpurple500: string;
522
- darkpastelblue500: string;
523
- darkpastelpink500: string;
524
- darkpastelorange500: string;
525
- darkpastelgreen500: string;
526
- darkpastelpurple500: string;
527
- green30: string;
528
- darkgreen30: string;
529
- orange50: string;
530
- darkorange50: string;
531
- orange30: string;
532
- darkorange30: string;
533
- green50: string;
534
- darkgreen50: string;
535
- opacity90: string;
536
- facebookblue: string;
540
+ sys_component_base_19: string;
541
+ sys_cpnt_pagination_dot_01: string;
542
+ sys_cpnt_pagination_dot_02: string;
537
543
  };
538
544
  readonly UIColor: {
539
545
  ui_cpnt_button_fill_base_primary: string;
@@ -1177,6 +1183,13 @@ declare const colorSet: {
1177
1183
  ui_63: string;
1178
1184
  ui_64: string;
1179
1185
  ui_cpnt_sheet_border_04: string;
1186
+ ui_cpnt_button_fill_base_01: string;
1187
+ ui_cpnt_button_fill_base_hangup: string;
1188
+ ui_cpnt_refund_text_status_issued: string;
1189
+ ui_cpnt_refund_text_status_refunded: string;
1190
+ ui_cpnt_divider_white_01: string;
1191
+ ui_cpnt_timer_base_01: string;
1192
+ ui_cpnt_timer_base_timeup: string;
1180
1193
  };
1181
1194
  };
1182
1195
  export default colorSet;
package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/common/styles/colorSet/index.js CHANGED
@@ -4,14 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  /* eslint-disable import/order */
7
+ var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
7
8
  var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
8
9
  var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
9
- var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
10
10
  var UIColor_json_1 = __importDefault(require("./UIColor.json"));
11
11
  var colorSet = {
12
+ SemanticColor: SemanticColor_json_1.default,
12
13
  PaletteColor_Dark: PaletteColor_Dark_json_1.default,
13
14
  PaletteColor_light: PaletteColor_light_json_1.default,
14
- SemanticColor: SemanticColor_json_1.default,
15
15
  UIColor: UIColor_json_1.default
16
16
  };
17
17
  exports.default = colorSet;
package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/common/styles/colorSet/ui-type.d.ts CHANGED
@@ -640,4 +640,11 @@ export interface UITheme {
640
640
  ui_63: string;
641
641
  ui_64: string;
642
642
  ui_cpnt_sheet_border_04: string;
643
+ ui_cpnt_button_fill_base_01: string;
644
+ ui_cpnt_button_fill_base_hangup: string;
645
+ ui_cpnt_refund_text_status_issued: string;
646
+ ui_cpnt_refund_text_status_refunded: string;
647
+ ui_cpnt_divider_white_01: string;
648
+ ui_cpnt_timer_base_01: string;
649
+ ui_cpnt_timer_base_timeup: string;
643
650
  }
package/dist/src/sub/DynamicLayout/desktop/components/Item/Item.d.ts CHANGED
@@ -6,7 +6,9 @@ declare function Item({ children, ...props }: IItem & {
6
6
  children: React.ReactNode;
7
7
  }): JSX.Element;
8
8
  declare namespace Item {
9
- var Title: ({ text, color, ...textLabelProps }: IItemTitle & TextLabelProps) => JSX.Element;
9
+ var Title: ({ text, color, lineHeight, ...textLabelProps }: IItemTitle & TextLabelProps & {
10
+ lineHeight?: number | undefined;
11
+ }) => JSX.Element;
10
12
  var Description: ({ text, color, ...textLabelProps }: IItemDescription & TextLabelProps) => JSX.Element;
11
13
  var Image: ({ ...imageViewProps }: ImageViewProps) => JSX.Element;
12
14
  var Button: ({ buttonType, backgroundColor, textColor, text, linkType, src, linkMethod, state, borderColor }: IItemButton) => JSX.Element;
package/dist/src/sub/DynamicLayout/desktop/components/Item/Item.js CHANGED
@@ -68,13 +68,16 @@ var S_Item = styled_components_1.default.div(templateObject_1 || (templateObject
68
68
  return isClickable && 'cursor : pointer;';
69
69
  });
70
70
  function Title(_a) {
71
- var text = _a.text, color = _a.color, textLabelProps = __rest(_a, ["text", "color"]);
72
- return (react_1.default.createElement(S_TitleStyleWrapper, { "x-dlayout-item-element-name": "Title", color: color },
71
+ var text = _a.text, color = _a.color, _b = _a.lineHeight, lineHeight = _b === void 0 ? 1.5 : _b, textLabelProps = __rest(_a, ["text", "color", "lineHeight"]);
72
+ return (react_1.default.createElement(S_TitleStyleWrapper, { "x-dlayout-item-element-name": "Title", color: color, lineHeight: lineHeight },
73
73
  react_1.default.createElement(pdsOriginal_1.D_TextLabel, __assign({ text: text, colorTheme: "sysTextPrimary" }, textLabelProps))));
74
74
  }
75
- var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n & > div {\n color: ", ";\n }\n"], ["\n & > div {\n color: ", ";\n }\n"])), function (_a) {
75
+ var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n & > div {\n color: ", ";\n line-height: ", ";\n }\n"], ["\n & > div {\n color: ", ";\n line-height: ", ";\n }\n"])), function (_a) {
76
76
  var color = _a.color;
77
77
  return color;
78
+ }, function (_a) {
79
+ var lineHeight = _a.lineHeight;
80
+ return lineHeight;
78
81
  });
79
82
  function Description(_a) {
80
83
  var text = _a.text, color = _a.color, textLabelProps = __rest(_a, ["text", "color"]);
package/dist/src/sub/DynamicLayout/desktop/components/Section/Section.d.ts CHANGED
@@ -9,7 +9,9 @@ declare namespace Section {
9
9
  var Title: ({ text, color, lineHeight, ...textLabelProps }: ISectionTitle & TextLabelProps & {
10
10
  lineHeight?: number | undefined;
11
11
  }) => JSX.Element;
12
- var Description: ({ text, color, ...textLabelProps }: ISectionDescription & TextLabelProps) => JSX.Element;
12
+ var Description: ({ text, color, fontWeight, ...textLabelProps }: ISectionDescription & TextLabelProps & {
13
+ fontWeight?: string | undefined;
14
+ }) => JSX.Element;
13
15
  var Image: ({ ...imageViewProps }: ImageViewProps) => JSX.Element;
14
16
  var Button: ({ buttonType, backgroundColor, textColor, text, linkType, src, state, borderColor }: ISectionButton) => JSX.Element;
15
17
  var context: React.Context<ISection | null>;
package/dist/src/sub/DynamicLayout/desktop/components/Section/Section.js CHANGED
@@ -85,16 +85,10 @@ function Background() {
85
85
  height: backgroundWrapper.offsetHeight
86
86
  };
87
87
  var isHorizontal = backgroundSize.width / backgroundSize.height > 1;
88
- var isOverRatio = isHorizontal
89
- ? backgroundSize.width / backgroundSize.height > 16 / 9
90
- : backgroundSize.width / backgroundSize.height < 9 / 16;
91
- var youtubeSize = isHorizontal
92
- ? isOverRatio
93
- ? { width: backgroundSize.width, height: backgroundSize.width * (9 / 16) }
94
- : { width: backgroundSize.height * (16 / 9), height: backgroundSize.height }
95
- : isOverRatio
96
- ? { width: backgroundSize.height * (9 / 16), height: backgroundSize.height }
97
- : { width: backgroundSize.width, height: backgroundSize.width * (16 / 9) };
88
+ var isOverRatio = backgroundSize.width / backgroundSize.height > 16 / 9;
89
+ var youtubeSize = isHorizontal && isOverRatio
90
+ ? { width: backgroundSize.width, height: backgroundSize.width * (9 / 16) }
91
+ : { width: backgroundSize.height * (16 / 9), height: backgroundSize.height };
98
92
  return youtubeSize;
99
93
  };
100
94
  (0, react_1.useEffect)(function () {
@@ -156,13 +150,16 @@ var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_6 || (t
156
150
  });
157
151
  // DESCRIPTION
158
152
  function Description(_a) {
159
- var text = _a.text, color = _a.color, textLabelProps = __rest(_a, ["text", "color"]);
160
- return (react_1.default.createElement(S_DescriptionStyleWrapper, { "x-dlayout-section-element-name": "Description", color: color },
153
+ var text = _a.text, color = _a.color, fontWeight = _a.fontWeight, textLabelProps = __rest(_a, ["text", "color", "fontWeight"]);
154
+ return (react_1.default.createElement(S_DescriptionStyleWrapper, { "x-dlayout-section-element-name": "Description", color: color, fontWeight: fontWeight },
161
155
  react_1.default.createElement(pdsOriginal_1.D_TextLabel, __assign({ text: text, colorTheme: "sysTextPrimary" }, textLabelProps))));
162
156
  }
163
- var S_DescriptionStyleWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n & > div {\n color: ", ";\n }\n"], ["\n & > div {\n color: ", ";\n }\n"])), function (_a) {
157
+ var S_DescriptionStyleWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n & > div {\n color: ", ";\n ", ";\n }\n"], ["\n & > div {\n color: ", ";\n ", ";\n }\n"])), function (_a) {
164
158
  var color = _a.color;
165
159
  return color;
160
+ }, function (_a) {
161
+ var fontWeight = _a.fontWeight;
162
+ return fontWeight && "font-weight : " + fontWeight + ";";
166
163
  });
167
164
  // IMAGE
168
165
  function Image(_a) {
package/dist/src/sub/DynamicLayout/desktop/components/common/YouTubeIframe.js CHANGED
@@ -61,7 +61,11 @@ function YouTubeIframe(_a) {
61
61
  playerVars: {
62
62
  playsinline: 1,
63
63
  autoplay: 1,
64
- controls: 0
64
+ controls: 0,
65
+ iv_load_policy: 3,
66
+ listType: 'playlist',
67
+ playlist: TouTubeLinkParser_1.default.getId(src),
68
+ loop: 1
65
69
  },
66
70
  events: {
67
71
  onReady: onPlayerReady,
@@ -111,6 +115,6 @@ var BlackScreen = styled_components_1.default.div(templateObject_1 || (templateO
111
115
  var theme = _a.theme;
112
116
  return theme.ui_62;
113
117
  });
114
- var S_IframeWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 100%;\n margin: auto;\n max-width: 100%;\n overflow: hidden;\n pointer-events: none;\n\n iframe {\n border: 0;\n height: 100%;\n margin-left: -100%;\n width: 300%;\n }\n"], ["\n height: 100%;\n margin: auto;\n max-width: 100%;\n overflow: hidden;\n pointer-events: none;\n\n iframe {\n border: 0;\n height: 100%;\n margin-left: -100%;\n width: 300%;\n }\n"])));
118
+ var S_IframeWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: inherit;\n margin: auto;\n width: inherit;\n overflow: hidden;\n pointer-events: none;\n\n iframe {\n border: 0;\n height: inherit;\n width: inherit;\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n }\n"], ["\n height: inherit;\n margin: auto;\n width: inherit;\n overflow: hidden;\n pointer-events: none;\n\n iframe {\n border: 0;\n height: inherit;\n width: inherit;\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n }\n"])));
115
119
  exports.default = YouTubeIframe;
116
120
  var templateObject_1, templateObject_2;
package/dist/src/sub/DynamicLayout/desktop/sections/ContentsCarouselSection/templates/TemplateA/TemplateA.js CHANGED
@@ -57,15 +57,16 @@ function TemplateA() {
57
57
  !!item.properties.linkSrc);
58
58
  })
59
59
  : [];
60
- return (react_1.default.createElement(S_Wrapper, { hasNothing: !title && !description && !buttonAlphaLinkSrc && filteredItems.length === 0 },
60
+ var filteredSortedItems = filteredItems.sort(function (a, b) { return a.order - b.order; });
61
+ return (react_1.default.createElement(S_Wrapper, { hasNothing: !title && !description && !buttonAlphaLinkSrc && filteredSortedItems.length === 0 },
61
62
  react_1.default.createElement(S_ContentsArea, null,
62
63
  title && (react_1.default.createElement(S_SectionTitleBox, null,
63
64
  react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "48px", customFontWeight: "bold" }))),
64
65
  description && (react_1.default.createElement(S_SectionDescriptionBox, null,
65
- react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", styleTheme: "headingBold" }))),
66
+ react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "20px", fontWeight: "600" }))),
66
67
  buttonAlphaLinkSrc && (react_1.default.createElement(S_SectionButtonBox, null,
67
68
  react_1.default.createElement(components_1.Section.Button, { text: buttonAlphaLabel, src: buttonAlphaLinkSrc, linkType: buttonAlphaLinkType, buttonType: buttonAlphaDesignType, backgroundColor: buttonAlphaBackgroundColorInHex, textColor: buttonAlphaLabelColorInHex, borderColor: buttonAlphaLabelColorInHex }))),
68
- filteredItems.length > 0 && (react_1.default.createElement(S_CarouselBox, null,
69
+ filteredSortedItems.length > 0 && (react_1.default.createElement(S_CarouselBox, null,
69
70
  react_1.default.createElement(components_1.Carousel, { spaceBetween: 24, slidesPerView: 3, slidesPerGroup: 1, breakpoints: {
70
71
  1301: {
71
72
  slidesPerView: 4
@@ -77,13 +78,13 @@ function TemplateA() {
77
78
  ? 'autoplay'
78
79
  : carouselInfiniteLoopMode === 'USE'
79
80
  ? 'loop'
80
- : 'normal', autoplayDelay: carouselAutoplayTime, buttonSpacing: "-24px" }, filteredItems.map(function (item) {
81
+ : 'normal', autoplayDelay: carouselAutoplayTime, buttonSpacing: "-24px" }, filteredSortedItems.map(function (item) {
81
82
  var id = item.id;
82
83
  var _a = item.properties, itemTitle = _a.title, itemDescription = _a.description, itemImageSrc = _a.imageSrc, itemLinkMethod = _a.linkMethod, itemLinkSrc = _a.linkSrc, itemLinkType = _a.linkType, itemButtonLabel = _a.buttonLabel;
83
84
  return (react_1.default.createElement(components_1.Item, __assign({ key: id }, item),
84
85
  itemImageSrc && (react_1.default.createElement(S_ItemImageBox, null,
85
86
  react_1.default.createElement(components_1.Item.Image, { src: itemImageSrc, ratio: "1_1", width: "responsive", shapeType: "rectangle" }))),
86
- itemTitle && (react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, styleTheme: "subTitleBold" })),
87
+ itemTitle && (react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, customFontSize: "22px", customFontWeight: "bold", lineHeight: 1.4 })),
87
88
  itemDescription && (react_1.default.createElement(S_ItemDescriptionBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle },
88
89
  react_1.default.createElement(components_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, styleTheme: "body2Regular" }))),
89
90
  itemLinkMethod === 'CLICK_BUTTON_IN_ITEM' && itemLinkSrc && (react_1.default.createElement(S_ItemButtonBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle, hasDescription: !!itemDescription },
@@ -116,7 +117,7 @@ var S_CarouselBox = styled_components_1.default.div(templateObject_6 || (templat
116
117
  */
117
118
  var S_ItemImageBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-bottom: ", ";\n"], ["\n margin-bottom: ", ";\n"])), function (_a) {
118
119
  var theme = _a.theme;
119
- return theme.spacing.spacingD;
120
+ return theme.spacing.spacingE;
120
121
  });
121
122
  var S_ItemDescriptionBox = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n margin-top: ", ";\n"], ["\n margin-top: ", ";\n"])), function (_a) {
122
123
  var theme = _a.theme, hasImage = _a.hasImage, hasTitle = _a.hasTitle;
package/dist/src/sub/DynamicLayout/desktop/sections/ContentsCarouselSection/templates/TemplateB/TemplateB.js CHANGED
@@ -57,15 +57,16 @@ function TemplateB() {
57
57
  !!item.properties.linkSrc);
58
58
  })
59
59
  : [];
60
- return (react_1.default.createElement(S_Wrapper, { hasNothing: !title && !description && !buttonAlphaLinkSrc && filteredItems.length === 0 },
60
+ var filteredSortedItems = filteredItems.sort(function (a, b) { return a.order - b.order; });
61
+ return (react_1.default.createElement(S_Wrapper, { hasNothing: !title && !description && !buttonAlphaLinkSrc && filteredSortedItems.length === 0 },
61
62
  react_1.default.createElement(S_ContentsArea, null,
62
63
  title && (react_1.default.createElement(S_SectionTitleBox, null,
63
64
  react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "48px", customFontWeight: "bold" }))),
64
65
  description && (react_1.default.createElement(S_SectionDescriptionBox, null,
65
- react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", styleTheme: "body1Regular" }))),
66
+ react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "20px", fontWeight: "600" }))),
66
67
  buttonAlphaLinkSrc && (react_1.default.createElement(S_SectionButtonBox, null,
67
68
  react_1.default.createElement(components_1.Section.Button, { text: buttonAlphaLabel, src: buttonAlphaLinkSrc, linkType: buttonAlphaLinkType, buttonType: buttonAlphaDesignType, backgroundColor: buttonAlphaBackgroundColorInHex, textColor: buttonAlphaLabelColorInHex, borderColor: buttonAlphaLabelColorInHex }))),
68
- filteredItems.length > 0 && (react_1.default.createElement(S_CarouselBox, null,
69
+ filteredSortedItems.length > 0 && (react_1.default.createElement(S_CarouselBox, null,
69
70
  react_1.default.createElement(components_1.Carousel, { spaceBetween: 42, slidesPerView: 3, slidesPerGroup: 1, breakpoints: {
70
71
  1301: {
71
72
  slidesPerView: 4
@@ -77,13 +78,13 @@ function TemplateB() {
77
78
  ? 'autoplay'
78
79
  : carouselInfiniteLoopMode === 'USE'
79
80
  ? 'loop'
80
- : 'normal', autoplayDelay: carouselAutoplayTime, buttonSpacing: "-24px" }, filteredItems.map(function (item) {
81
+ : 'normal', autoplayDelay: carouselAutoplayTime, buttonSpacing: "-24px" }, filteredSortedItems.map(function (item) {
81
82
  var id = item.id;
82
83
  var _a = item.properties, itemTitle = _a.title, itemDescription = _a.description, itemImageSrc = _a.imageSrc, itemLinkMethod = _a.linkMethod, itemLinkSrc = _a.linkSrc, itemLinkType = _a.linkType, itemButtonLabel = _a.buttonLabel;
83
84
  return (react_1.default.createElement(components_1.Item, __assign({ key: id }, item),
84
85
  itemImageSrc && (react_1.default.createElement(S_ItemImageBox, null,
85
86
  react_1.default.createElement(components_1.Item.Image, { src: itemImageSrc, ratio: "3_2", width: "responsive", radius: 16 }))),
86
- itemTitle && (react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, styleTheme: "subTitleBold" })),
87
+ itemTitle && (react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, customFontSize: "22px", customFontWeight: "bold", lineHeight: 1.4 })),
87
88
  itemDescription && (react_1.default.createElement(S_ItemDescriptionBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle },
88
89
  react_1.default.createElement(components_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, styleTheme: "body2Regular" }))),
89
90
  itemLinkMethod === 'CLICK_BUTTON_IN_ITEM' && itemLinkSrc && (react_1.default.createElement(S_ItemButtonBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle, hasDescription: !!itemDescription },
@@ -116,7 +117,7 @@ var S_CarouselBox = styled_components_1.default.div(templateObject_6 || (templat
116
117
  */
117
118
  var S_ItemImageBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-bottom: ", ";\n"], ["\n margin-bottom: ", ";\n"])), function (_a) {
118
119
  var theme = _a.theme;
119
- return theme.spacing.spacingD;
120
+ return theme.spacing.spacingE;
120
121
  });
121
122
  var S_ItemDescriptionBox = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n margin-top: ", ";\n"], ["\n margin-top: ", ";\n"])), function (_a) {
122
123
  var theme = _a.theme, hasImage = _a.hasImage, hasTitle = _a.hasTitle;
package/dist/src/sub/DynamicLayout/desktop/sections/ContentsSection/templates/TemplateA/TemplateA.js CHANGED
@@ -41,7 +41,7 @@ function TemplateA() {
41
41
  react_1.default.createElement(S_ContentsBodyWrapper, null,
42
42
  title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "48px", customFontWeight: "bold" })),
43
43
  description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
44
- react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, styleTheme: "headingBold" }))),
44
+ react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "20px", fontWeight: "600" }))),
45
45
  buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, { hasTitle: !!title, hasDescription: !!description },
46
46
  react_1.default.createElement(Section_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex })))))));
47
47
  }
package/dist/src/sub/DynamicLayout/desktop/sections/ContentsSection/templates/TemplateB/TemplateB.js CHANGED
@@ -39,7 +39,7 @@ function TemplateB() {
39
39
  react_1.default.createElement(S_ContentsBodyWrapper, null,
40
40
  title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "48px", customFontWeight: "bold" })),
41
41
  description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
42
- react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, styleTheme: "headingBold" }))),
42
+ react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "20px", fontWeight: "600" }))),
43
43
  buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, { hasTitle: !!title, hasDescription: !!description },
44
44
  react_1.default.createElement(Section_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex })))),
45
45
  sectionContentMediaSrc && (react_1.default.createElement(react_1.default.Fragment, null, sectionContentMediaType === 'IMAGE' && (react_1.default.createElement(S_ImageBox, null,
package/dist/src/sub/DynamicLayout/desktop/sections/InfoBoxSection/templates/TemplateA/TemplateA.js CHANGED
@@ -52,20 +52,21 @@ function TemplateA() {
52
52
  (!!item.properties.imageSrc || !!item.properties.title || !!item.properties.description);
53
53
  })
54
54
  : [];
55
- var hasNothing = !title && !description && !buttonAlphaLinkSrc && filteredItems.length <= 0;
55
+ var filteredSortedItems = filteredItems.sort(function (a, b) { return a.order - b.order; });
56
+ var hasNothing = !title && !description && !buttonAlphaLinkSrc && filteredSortedItems.length <= 0;
56
57
  return (react_1.default.createElement(S_ContentsArea, { hasNothing: hasNothing },
57
58
  title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "48px", customFontWeight: "bold" })),
58
59
  description && (react_1.default.createElement(S_SectionDescriptionBox, null,
59
- react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", styleTheme: "headingBold" }))),
60
- filteredItems.length > 0 && (react_1.default.createElement(S_ItemsWrapper, { totalItems: filteredItems.length }, filteredItems.map(function (item, index, self) {
60
+ react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "20px", fontWeight: "600" }))),
61
+ filteredSortedItems.length > 0 && (react_1.default.createElement(S_ItemsWrapper, { totalItems: filteredSortedItems.length }, filteredSortedItems.map(function (item, index, self) {
61
62
  var id = item.id;
62
63
  var _a = item.properties, itemTitle = _a.title, itemDescription = _a.description, itemImageSrc = _a.imageSrc;
63
64
  return (react_1.default.createElement(S_ItemWrapper, { key: id, isFirstItem: index === 0, totalItems: self.length },
64
65
  react_1.default.createElement(Item_1.Item, __assign({}, item),
65
66
  itemImageSrc && (react_1.default.createElement(S_ItemImageBox, null,
66
- react_1.default.createElement(Item_1.Item.Image, { src: itemImageSrc, width: 120, ratio: "1_1", shapeType: "rectangle", scaleType: "cover" }))),
67
+ react_1.default.createElement(Item_1.Item.Image, { src: itemImageSrc, width: 120, ratio: "1_1", shapeType: "rectangle", scaleType: "contain" }))),
67
68
  react_1.default.createElement(S_ItemBodyWrapper, null,
68
- itemTitle && (react_1.default.createElement(Item_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, textAlign: "center", customFontSize: "22px", customFontWeight: "bold" })),
69
+ itemTitle && (react_1.default.createElement(Item_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, textAlign: "center", customFontSize: "22px", customFontWeight: "bold", lineHeight: 1.4 })),
69
70
  itemDescription && (react_1.default.createElement(react_1.default.Fragment, null,
70
71
  react_1.default.createElement(S_CustomDividerBox, null,
71
72
  react_1.default.createElement(S_CustomWidthDivider, null)),
@@ -104,7 +105,7 @@ var S_ItemWrapper = styled_components_1.default.div(templateObject_4 || (templat
104
105
  });
105
106
  var S_ItemImageBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n margin: ", " auto;\n"], ["\n display: flex;\n justify-content: center;\n margin: ", " auto;\n"])), function (_a) {
106
107
  var theme = _a.theme;
107
- return theme.spacing.spacingD;
108
+ return theme.spacing.spacingE;
108
109
  });
109
110
  var S_ItemBodyWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n"])));
110
111
  var S_CustomDividerBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
@@ -113,7 +114,7 @@ var S_CustomDividerBox = styled_components_1.default.div(templateObject_7 || (te
113
114
  });
114
115
  var S_CustomWidthDivider = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: 24px;\n height: 3px;\n background-color: ", ";\n"], ["\n width: 24px;\n height: 3px;\n background-color: ", ";\n"])), function (_a) {
115
116
  var theme = _a.theme;
116
- return theme.ui_cpnt_divider_white_opacity30;
117
+ return theme.ui_cpnt_divider_white_01;
117
118
  });
118
119
  var S_ButtonBox = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n margin: ", " 0;\n"], ["\n display: flex;\n justify-content: center;\n margin: ", " 0;\n"])), function (_a) {
119
120
  var theme = _a.theme;
package/dist/src/sub/DynamicLayout/mobile/components/Item/Item.d.ts CHANGED
@@ -6,7 +6,9 @@ declare function Item({ children, ...props }: IItem & {
6
6
  children: React.ReactNode;
7
7
  }): JSX.Element;
8
8
  declare namespace Item {
9
- var Title: ({ text, color, ...textLabelProps }: IItemTitle & TextLabelProps) => JSX.Element;
9
+ var Title: ({ text, color, lineHeight, ...textLabelProps }: IItemTitle & TextLabelProps & {
10
+ lineHeight?: number | undefined;
11
+ }) => JSX.Element;
10
12
  var Description: ({ text, color, ...textLabelProps }: IItemDescription & TextLabelProps) => JSX.Element;
11
13
  var Image: ({ ...imageViewProps }: ImageViewProps) => JSX.Element;
12
14
  var HTMLReader: ({ data, styleTheme, colorTheme, textAlign, color }: {
package/dist/src/sub/DynamicLayout/mobile/components/Item/Item.js CHANGED
@@ -65,13 +65,16 @@ function Item(_a) {
65
65
  }
66
66
  var S_Item = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
67
67
  function Title(_a) {
68
- var text = _a.text, color = _a.color, textLabelProps = __rest(_a, ["text", "color"]);
69
- return (react_1.default.createElement(S_TitleStyleWrapper, { "x-dlayout-item-element-name": "Title", color: color },
68
+ var text = _a.text, color = _a.color, _b = _a.lineHeight, lineHeight = _b === void 0 ? 1.5 : _b, textLabelProps = __rest(_a, ["text", "color", "lineHeight"]);
69
+ return (react_1.default.createElement(S_TitleStyleWrapper, { "x-dlayout-item-element-name": "Title", color: color, lineHeight: lineHeight },
70
70
  react_1.default.createElement(pdsOriginal_1.M_TextLabel, __assign({ text: text, colorTheme: "sysTextPrimary" }, textLabelProps))));
71
71
  }
72
- var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n & > div {\n color: ", ";\n }\n"], ["\n & > div {\n color: ", ";\n }\n"])), function (_a) {
72
+ var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n & > div {\n color: ", ";\n line-height: ", ";\n }\n"], ["\n & > div {\n color: ", ";\n line-height: ", ";\n }\n"])), function (_a) {
73
73
  var color = _a.color;
74
74
  return color;
75
+ }, function (_a) {
76
+ var lineHeight = _a.lineHeight;
77
+ return lineHeight;
75
78
  });
76
79
  function Description(_a) {
77
80
  var text = _a.text, color = _a.color, textLabelProps = __rest(_a, ["text", "color"]);
package/dist/src/sub/DynamicLayout/mobile/components/Section/Section.js CHANGED
@@ -87,16 +87,10 @@ function Background() {
87
87
  if (backgroundSize.width * backgroundSize.height === 0)
88
88
  return { width: 0, height: 0 };
89
89
  var isHorizontal = backgroundSize.width / backgroundSize.height > 1;
90
- var isOverRatio = isHorizontal
91
- ? backgroundSize.width / backgroundSize.height > 16 / 9
92
- : backgroundSize.width / backgroundSize.height < 9 / 16;
93
- var youtubeSize = isHorizontal
94
- ? isOverRatio
95
- ? { width: backgroundSize.width, height: backgroundSize.width * (9 / 16) }
96
- : { width: backgroundSize.height * (16 / 9), height: backgroundSize.height }
97
- : isOverRatio
98
- ? { width: backgroundSize.height * (9 / 16), height: backgroundSize.height }
99
- : { width: backgroundSize.width, height: backgroundSize.width * (16 / 9) };
90
+ var isOverRatio = backgroundSize.width / backgroundSize.height > 16 / 9;
91
+ var youtubeSize = isHorizontal && isOverRatio
92
+ ? { width: backgroundSize.width, height: backgroundSize.width * (9 / 16) }
93
+ : { width: backgroundSize.height * (16 / 9), height: backgroundSize.height };
100
94
  return youtubeSize;
101
95
  };
102
96
  (0, react_1.useEffect)(function () {
package/dist/src/sub/DynamicLayout/mobile/components/common/YouTubeIframe.js CHANGED
@@ -61,7 +61,11 @@ function YouTubeIframe(_a) {
61
61
  playerVars: {
62
62
  playsinline: 1,
63
63
  autoplay: 1,
64
- controls: 0
64
+ controls: 0,
65
+ iv_load_policy: 3,
66
+ listType: 'playlist',
67
+ playlist: TouTubeLinkParser_1.default.getId(src),
68
+ loop: 1
65
69
  },
66
70
  events: {
67
71
  onReady: onPlayerReady,
@@ -111,6 +115,6 @@ var BlackScreen = styled_components_1.default.div(templateObject_1 || (templateO
111
115
  var theme = _a.theme;
112
116
  return theme.ui_62;
113
117
  });
114
- var S_IframeWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 100%;\n margin: auto;\n max-width: 100%;\n overflow: hidden;\n pointer-events: none;\n\n /* NOTE \n iframe \uAD8C\uC7A5 \uB113\uC774(width)\n \uD654\uBA74 \uBE44\uC728 9:20 : 395% (Galaxy S20)\n \uD654\uBA74 \uBE44\uC728 9:21 : 415% (Galaxy Fold)\n */\n iframe {\n border: 0;\n height: 100%;\n width: 415%;\n margin-left: -157.5%;\n }\n"], ["\n height: 100%;\n margin: auto;\n max-width: 100%;\n overflow: hidden;\n pointer-events: none;\n\n /* NOTE \n iframe \uAD8C\uC7A5 \uB113\uC774(width)\n \uD654\uBA74 \uBE44\uC728 9:20 : 395% (Galaxy S20)\n \uD654\uBA74 \uBE44\uC728 9:21 : 415% (Galaxy Fold)\n */\n iframe {\n border: 0;\n height: 100%;\n width: 415%;\n margin-left: -157.5%;\n }\n"])));
118
+ var S_IframeWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: inherit;\n margin: auto;\n width: inherit;\n overflow: hidden;\n pointer-events: none;\n\n /* NOTE \n iframe \uAD8C\uC7A5 \uB113\uC774(width)\n \uD654\uBA74 \uBE44\uC728 9:20 : 395% (Galaxy S20)\n \uD654\uBA74 \uBE44\uC728 9:21 : 415% (Galaxy Fold)\n */\n iframe {\n border: 0;\n height: inherit;\n width: inherit;\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n }\n"], ["\n height: inherit;\n margin: auto;\n width: inherit;\n overflow: hidden;\n pointer-events: none;\n\n /* NOTE \n iframe \uAD8C\uC7A5 \uB113\uC774(width)\n \uD654\uBA74 \uBE44\uC728 9:20 : 395% (Galaxy S20)\n \uD654\uBA74 \uBE44\uC728 9:21 : 415% (Galaxy Fold)\n */\n iframe {\n border: 0;\n height: inherit;\n width: inherit;\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n }\n"])));
115
119
  exports.default = YouTubeIframe;
116
120
  var templateObject_1, templateObject_2;
package/dist/src/sub/DynamicLayout/mobile/sections/ContentsCarouselSection/templates/TemplateA/TemplateA.js CHANGED
@@ -57,27 +57,28 @@ function TemplateA() {
57
57
  !!item.properties.linkSrc);
58
58
  })
59
59
  : [];
60
- return (react_1.default.createElement(S_ContentsArea, { hasNothing: !title && !description && !buttonAlphaLinkSrc && filteredItems.length === 0 },
60
+ var filteredSortedItems = filteredItems.sort(function (a, b) { return a.order - b.order; });
61
+ return (react_1.default.createElement(S_ContentsArea, { hasNothing: !title && !description && !buttonAlphaLinkSrc && filteredSortedItems.length === 0 },
61
62
  title && (react_1.default.createElement(S_SectionTitleBox, null,
62
- react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold" }))),
63
+ react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold", lineHeight: 1.3 }))),
63
64
  description && (react_1.default.createElement(S_SectionDescriptionBox, null,
64
65
  react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "18px", fontWeight: "600" }))),
65
66
  buttonAlphaLinkSrc && (react_1.default.createElement(S_SectionButtonBox, null,
66
67
  react_1.default.createElement(components_1.Section.Button, { text: buttonAlphaLabel, src: buttonAlphaLinkSrc, linkType: buttonAlphaLinkType, buttonType: buttonAlphaDesignType, backgroundColor: buttonAlphaBackgroundColorInHex, textColor: buttonAlphaLabelColorInHex, borderColor: buttonAlphaLabelColorInHex }))),
67
- filteredItems.length > 0 && (react_1.default.createElement(S_CarouselBox, null,
68
+ filteredSortedItems.length > 0 && (react_1.default.createElement(S_CarouselBox, null,
68
69
  react_1.default.createElement(components_1.Carousel, { spaceBetween: 16, slidesPerView: 2, mode: carouselAutoplayMode === 'AUTO'
69
70
  ? 'autoplay'
70
71
  : carouselInfiniteLoopMode === 'USE'
71
72
  ? 'loop'
72
- : 'normal', autoplayDelay: carouselAutoplayTime, paginationSpacing: [48, 24] }, filteredItems.map(function (item) {
73
+ : 'normal', autoplayDelay: carouselAutoplayTime, paginationSpacing: [48, 24] }, filteredSortedItems.map(function (item) {
73
74
  var id = item.id;
74
75
  var _a = item.properties, itemTitle = _a.title, itemDescription = _a.description, itemImageSrc = _a.imageSrc, itemLinkMethod = _a.linkMethod, itemLinkSrc = _a.linkSrc, itemLinkType = _a.linkType, itemButtonLabel = _a.buttonLabel;
75
76
  return (react_1.default.createElement(components_1.Item, __assign({ key: id }, item),
76
77
  itemImageSrc && (react_1.default.createElement(S_ItemImageBox, null,
77
78
  react_1.default.createElement(components_1.Item.Image, { src: itemImageSrc, ratio: "1_1", width: "responsive", shapeType: "rectangle" }))),
78
- itemTitle && react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex }),
79
+ itemTitle && (react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, customFontSize: "20px", customFontWeight: "bold", lineHeight: 1.4 })),
79
80
  itemDescription && (react_1.default.createElement(S_ItemDescriptionBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle },
80
- react_1.default.createElement(components_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, customFontSize: "15px" }))),
81
+ react_1.default.createElement(components_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, styleTheme: "body2Regular" }))),
81
82
  itemLinkMethod === 'CLICK_BUTTON_IN_ITEM' && itemLinkSrc && (react_1.default.createElement(S_ItemButtonBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle, hasDescription: !!itemDescription },
82
83
  react_1.default.createElement(components_1.Item.Button, { text: itemButtonLabel, src: itemLinkSrc, linkType: itemLinkType, buttonType: itemButtonDesignType, backgroundColor: itemButtonBackgroundColorInHex, textColor: itemButtonLabelColorInHex, borderColor: itemButtonLabelColorInHex })))));
83
84
  }))))));
@@ -107,20 +108,14 @@ var S_SectionButtonBox = styled_components_1.default.div(templateObject_4 || (te
107
108
  var theme = _a.theme;
108
109
  return theme.spacing.spacingF;
109
110
  });
110
- var S_CarouselBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
111
- var theme = _a.theme;
112
- return theme.spacing.spacingG;
113
- });
111
+ var S_CarouselBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin: 56px 0;\n"], ["\n margin: 56px 0;\n"])));
114
112
  /** NOTE: X00001에서는 margin collapsing으로 스페이싱을 처리하는 것이 원칙이나,
115
113
  * Swiper 라이브러리가 각 슬라이드 아이템에 flexbox를 쓰고 있어서 이곳만 예외적으로 styled component로 스페이싱을 처리했습니다.
116
114
  */
117
- var S_ItemImageBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin-bottom: ", ";\n"], ["\n margin-bottom: ", ";\n"])), function (_a) {
118
- var theme = _a.theme;
119
- return theme.spacing.spacingC;
120
- });
115
+ var S_ItemImageBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin-bottom: 18px;\n"], ["\n margin-bottom: 18px;\n"])));
121
116
  var S_ItemDescriptionBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-top: ", ";\n"], ["\n margin-top: ", ";\n"])), function (_a) {
122
117
  var theme = _a.theme, hasImage = _a.hasImage, hasTitle = _a.hasTitle;
123
- return (hasImage || hasTitle) && theme.spacing.spacingB;
118
+ return (hasImage || hasTitle) && theme.spacing.spacingC;
124
119
  });
125
120
  var S_ItemButtonBox = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n margin-top: ", ";\n"], ["\n margin-top: ", ";\n"])), function (_a) {
126
121
  var theme = _a.theme, hasImage = _a.hasImage, hasTitle = _a.hasTitle, hasDescription = _a.hasDescription;
package/dist/src/sub/DynamicLayout/mobile/sections/ContentsCarouselSection/templates/TemplateB/TemplateB.js CHANGED
@@ -57,27 +57,28 @@ function TemplateB() {
57
57
  !!item.properties.linkSrc);
58
58
  })
59
59
  : [];
60
- return (react_1.default.createElement(S_ContentsArea, { hasNothing: !title && !description && !buttonAlphaLinkSrc && filteredItems.length === 0 },
60
+ var filteredSortedItems = filteredItems.sort(function (a, b) { return a.order - b.order; });
61
+ return (react_1.default.createElement(S_ContentsArea, { hasNothing: !title && !description && !buttonAlphaLinkSrc && filteredSortedItems.length === 0 },
61
62
  title && (react_1.default.createElement(S_SectionTitleBox, null,
62
- react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold" }))),
63
+ react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold", lineHeight: 1.3 }))),
63
64
  description && (react_1.default.createElement(S_SectionDescriptionBox, null,
64
65
  react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "18px", fontWeight: "600" }))),
65
66
  buttonAlphaLinkSrc && (react_1.default.createElement(S_SectionButtonBox, null,
66
67
  react_1.default.createElement(components_1.Section.Button, { text: buttonAlphaLabel, src: buttonAlphaLinkSrc, linkType: buttonAlphaLinkType, buttonType: buttonAlphaDesignType, backgroundColor: buttonAlphaBackgroundColorInHex, textColor: buttonAlphaLabelColorInHex, borderColor: buttonAlphaLabelColorInHex }))),
67
- filteredItems && (react_1.default.createElement(S_CarouselBox, null,
68
+ filteredSortedItems && (react_1.default.createElement(S_CarouselBox, null,
68
69
  react_1.default.createElement(components_1.Carousel, { spaceBetween: 24, slidesPerView: 1, mode: carouselAutoplayMode === 'AUTO'
69
70
  ? 'autoplay'
70
71
  : carouselInfiniteLoopMode === 'USE'
71
72
  ? 'loop'
72
- : 'normal', autoplayDelay: carouselAutoplayTime, paginationSpacing: [48, 24] }, filteredItems.map(function (item) {
73
+ : 'normal', autoplayDelay: carouselAutoplayTime, paginationSpacing: [48, 24] }, filteredSortedItems.map(function (item) {
73
74
  var id = item.id;
74
75
  var _a = item.properties, itemTitle = _a.title, itemDescription = _a.description, itemImageSrc = _a.imageSrc, itemLinkMethod = _a.linkMethod, itemLinkSrc = _a.linkSrc, itemLinkType = _a.linkType, itemButtonLabel = _a.buttonLabel;
75
76
  return (react_1.default.createElement(components_1.Item, __assign({ key: id }, item),
76
77
  itemImageSrc && (react_1.default.createElement(S_ItemImageBox, null,
77
78
  react_1.default.createElement(components_1.Item.Image, { src: itemImageSrc, ratio: "3_2", width: "responsive", radius: 16 }))),
78
- itemTitle && react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex }),
79
+ itemTitle && (react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, customFontSize: "20px", customFontWeight: "bold", lineHeight: 1.4 })),
79
80
  itemDescription && (react_1.default.createElement(S_ItemDescriptionBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle },
80
- react_1.default.createElement(components_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, customFontSize: "15px" }))),
81
+ react_1.default.createElement(components_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, styleTheme: "body2Regular" }))),
81
82
  itemLinkMethod === 'CLICK_BUTTON_IN_ITEM' && itemLinkSrc && (react_1.default.createElement(S_ItemButtonBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle, hasDescription: !!itemDescription },
82
83
  react_1.default.createElement(components_1.Item.Button, { text: itemButtonLabel, src: itemLinkSrc, linkType: itemLinkType, buttonType: itemButtonDesignType, backgroundColor: itemButtonBackgroundColorInHex, textColor: itemButtonLabelColorInHex, borderColor: itemButtonLabelColorInHex })))));
83
84
  }))))));
@@ -107,20 +108,14 @@ var S_SectionButtonBox = styled_components_1.default.div(templateObject_4 || (te
107
108
  var theme = _a.theme;
108
109
  return theme.spacing.spacingF;
109
110
  });
110
- var S_CarouselBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
111
- var theme = _a.theme;
112
- return theme.spacing.spacingG;
113
- });
111
+ var S_CarouselBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin: 56px 0;\n"], ["\n margin: 56px 0;\n"])));
114
112
  /** NOTE: X00001에서는 margin collapsing으로 스페이싱을 처리하는 것이 원칙이나,
115
113
  * Swiper 라이브러리가 각 슬라이드 아이템에 flexbox를 쓰고 있어서 이곳만 예외적으로 styled component로 스페이싱을 처리했습니다.
116
114
  */
117
- var S_ItemImageBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin-bottom: ", ";\n"], ["\n margin-bottom: ", ";\n"])), function (_a) {
118
- var theme = _a.theme;
119
- return theme.spacing.spacingC;
120
- });
115
+ var S_ItemImageBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin-bottom: 18px;\n"], ["\n margin-bottom: 18px;\n"])));
121
116
  var S_ItemDescriptionBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-top: ", ";\n"], ["\n margin-top: ", ";\n"])), function (_a) {
122
117
  var theme = _a.theme, hasImage = _a.hasImage, hasTitle = _a.hasTitle;
123
- return (hasImage || hasTitle) && theme.spacing.spacingB;
118
+ return (hasImage || hasTitle) && theme.spacing.spacingC;
124
119
  });
125
120
  var S_ItemButtonBox = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n margin-top: ", ";\n"], ["\n margin-top: ", ";\n"])), function (_a) {
126
121
  var theme = _a.theme, hasImage = _a.hasImage, hasTitle = _a.hasTitle, hasDescription = _a.hasDescription;
package/dist/src/sub/DynamicLayout/mobile/sections/ContentsSection/templates/TemplateA/TemplateA.js CHANGED
@@ -38,7 +38,7 @@ function TemplateA() {
38
38
  sectionContentMediaSrc && (react_1.default.createElement(react_1.default.Fragment, null, sectionContentMediaType === 'IMAGE' && (react_1.default.createElement(S_ImageBox, null,
39
39
  react_1.default.createElement(Section_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", ratio: "1_1", scaleType: "cover", shapeType: "rectangle" }))))),
40
40
  title && (react_1.default.createElement(S_SectionTitleBox, null,
41
- react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "32px", customFontWeight: "bold" }))),
41
+ react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "32px", customFontWeight: "bold", lineHeight: 1.3 }))),
42
42
  description && (react_1.default.createElement(S_SectionDescriptionBox, null,
43
43
  react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "18px", fontWeight: "600" }))),
44
44
  buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, null,
package/dist/src/sub/DynamicLayout/mobile/sections/ContentsSection/templates/TemplateB/TemplateB.js CHANGED
@@ -35,7 +35,7 @@ function TemplateB() {
35
35
  var _b = sectionContext.styles, titleColorInHex = _b.titleColorInHex, descriptionColorInHex = _b.descriptionColorInHex, buttonAlphaDesignType = _b.buttonAlphaDesignType, buttonAlphaLabelColorInHex = _b.buttonAlphaLabelColorInHex, buttonAlphaBackgroundColorInHex = _b.buttonAlphaBackgroundColorInHex;
36
36
  var hasNothing = !sectionContentMediaSrc && !title && !description && !buttonAlphaLinkSrc;
37
37
  return (react_1.default.createElement(S_ContentsArea, { hasNothing: hasNothing },
38
- title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "32px", customFontWeight: "bold" })),
38
+ title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "32px", customFontWeight: "bold", lineHeight: 1.3 })),
39
39
  description && (react_1.default.createElement(S_SectionDescriptionBox, null,
40
40
  react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "18px", fontWeight: "600" }))),
41
41
  sectionContentMediaSrc && (react_1.default.createElement(react_1.default.Fragment, null, sectionContentMediaType === 'IMAGE' && (react_1.default.createElement(S_ImageBox, null,
package/dist/src/sub/DynamicLayout/mobile/sections/InfoBoxSection/templates/TemplateA/TemplateA.js CHANGED
@@ -52,21 +52,22 @@ function TemplateA() {
52
52
  (!!item.properties.imageSrc || !!item.properties.title || !!item.properties.description);
53
53
  })
54
54
  : [];
55
- var hasNothing = !title && !description && !buttonAlphaLinkSrc && filteredItems.length <= 0;
55
+ var filteredSortedItems = filteredItems.sort(function (a, b) { return a.order - b.order; });
56
+ var hasNothing = !title && !description && !buttonAlphaLinkSrc && filteredSortedItems.length <= 0;
56
57
  return (react_1.default.createElement(S_ContentsArea, { hasNothing: hasNothing },
57
- title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold" })),
58
+ title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold", lineHeight: 1.3 })),
58
59
  description && (react_1.default.createElement(S_SectionDescriptionBox, null,
59
60
  react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "18px", fontWeight: "600" }))),
60
- filteredItems.length > 0 && (react_1.default.createElement(S_ItemsWrapper, null, filteredItems.map(function (item, index) {
61
+ filteredSortedItems.length > 0 && (react_1.default.createElement(S_ItemsWrapper, null, filteredSortedItems.map(function (item, index) {
61
62
  var id = item.id;
62
63
  var _a = item.properties, itemTitle = _a.title, itemDescription = _a.description, itemImageSrc = _a.imageSrc;
63
64
  return (react_1.default.createElement(S_ItemWrapper, { isFirstItem: index === 0, key: id },
64
65
  react_1.default.createElement(Item_1.Item, __assign({}, item),
65
66
  itemImageSrc && (react_1.default.createElement(S_ItemImageBox, null,
66
- react_1.default.createElement(Item_1.Item.Image, { src: itemImageSrc, width: 80, ratio: "1_1", scaleType: "cover" }))),
67
- itemTitle && (react_1.default.createElement(Item_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, textAlign: "center" })),
67
+ react_1.default.createElement(Item_1.Item.Image, { src: itemImageSrc, width: 80, ratio: "1_1", scaleType: "contain" }))),
68
+ itemTitle && (react_1.default.createElement(Item_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, textAlign: "center", customFontSize: "20px", customFontWeight: "bold", lineHeight: 1.4 })),
68
69
  itemDescription && (react_1.default.createElement(S_ItemDescriptionBox, null,
69
- react_1.default.createElement(Item_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, textAlign: "center", customFontSize: "15px" }))))));
70
+ react_1.default.createElement(Item_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, textAlign: "center", styleTheme: "body2Regular" }))))));
70
71
  }))),
71
72
  buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, null,
72
73
  react_1.default.createElement(Section_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex })))));
@@ -82,18 +83,12 @@ var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_2 |
82
83
  var theme = _a.theme;
83
84
  return theme.spacing.spacingE;
84
85
  });
85
- var S_ItemsWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
86
- var theme = _a.theme;
87
- return theme.spacing.spacingG;
88
- });
86
+ var S_ItemsWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin: 56px 0;\n"], ["\n margin: 56px 0;\n"])));
89
87
  var S_ItemWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin: 40px 0;\n"], ["\n margin: 40px 0;\n"])));
90
- var S_ItemImageBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n margin: ", " 0;\n"], ["\n display: flex;\n justify-content: center;\n margin: ", " 0;\n"])), function (_a) {
91
- var theme = _a.theme;
92
- return theme.spacing.spacingC;
93
- });
88
+ var S_ItemImageBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n margin: 18px 0;\n"], ["\n display: flex;\n justify-content: center;\n margin: 18px 0;\n"])));
94
89
  var S_ItemDescriptionBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
95
90
  var theme = _a.theme;
96
- return theme.spacing.spacingB;
91
+ return theme.spacing.spacingC;
97
92
  });
98
93
  var S_ButtonBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n margin: ", " 0;\n"], ["\n display: flex;\n justify-content: center;\n margin: ", " 0;\n"])), function (_a) {
99
94
  var theme = _a.theme;
package/dist/src/sub/DynamicLayout/mobile/sections/IntroSection/templates/TemplateA/TemplateA.js CHANGED
@@ -45,7 +45,7 @@ function TemplateA() {
45
45
  }, []);
46
46
  return (react_1.default.createElement(S_FullScreenWrapper, { vh: vh },
47
47
  react_1.default.createElement(S_ContentsArea, null,
48
- title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "40px", customFontWeight: "bold", lineHeight: 1.2 })),
48
+ title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "37px", customFontWeight: "bold", lineHeight: 1.3 })),
49
49
  description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
50
50
  react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", styleTheme: "body1Bold" }))),
51
51
  (buttonAlphaLinkSrc || buttonBravoLinkSrc || buttonCharlieLinkSrc) && (react_1.default.createElement(S_SectionButtonBox, { hasTitle: !!title, hasDescription: !!description },
@@ -57,7 +57,7 @@ var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (t
57
57
  var vh = _a.vh;
58
58
  return vh * 100;
59
59
  });
60
- var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 100%;\n margin: ", " ", ";\n"], ["\n width: 100%;\n margin: ", " ", ";\n"])), function (_a) {
60
+ var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 100%;\n box-sizing: border-box;\n margin: ", " 0;\n padding: 0 ", ";\n"], ["\n width: 100%;\n box-sizing: border-box;\n margin: ", " 0;\n padding: 0 ", ";\n"])), function (_a) {
61
61
  var theme = _a.theme;
62
62
  return theme.spacing.spacingG;
63
63
  }, function (_a) {
package/dist/src/sub/DynamicLayout/mobile/sections/IntroSection/templates/TemplateB/TemplateB.js CHANGED
@@ -45,7 +45,7 @@ function TemplateB() {
45
45
  }, []);
46
46
  return (react_1.default.createElement(S_FullScreenWrapper, { vh: vh },
47
47
  react_1.default.createElement(S_ContentsArea, null,
48
- title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, styleTheme: "headingBold", lineHeight: 1.2 })),
48
+ title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "37px", customFontWeight: "bold", lineHeight: 1.3 })),
49
49
  description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
50
50
  react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, styleTheme: "body2Bold" }))),
51
51
  (buttonAlphaLinkSrc || buttonBravoLinkSrc || buttonCharlieLinkSrc) && (react_1.default.createElement(S_SectionButtonBox, { hasTitle: !!title, hasDescription: !!description },
@@ -57,7 +57,7 @@ var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (t
57
57
  var vh = _a.vh;
58
58
  return vh * 100;
59
59
  });
60
- var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 100%;\n margin: ", " ", ";\n"], ["\n width: 100%;\n margin: ", " ", ";\n"])), function (_a) {
60
+ var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 100%;\n box-sizing: border-box;\n margin: ", " 0;\n padding: 0 ", ";\n"], ["\n width: 100%;\n box-sizing: border-box;\n margin: ", " 0;\n padding: 0 ", ";\n"])), function (_a) {
61
61
  var theme = _a.theme;
62
62
  return theme.spacing.spacingG;
63
63
  }, function (_a) {
package/dist/src/sub/DynamicLayout/mobile/sections/IntroSection/templates/TemplateC/TemplateC.js CHANGED
@@ -37,7 +37,7 @@ function TemplateC() {
37
37
  var _d = context.styles, buttonAlphaDesignType = _d.buttonAlphaDesignType, buttonAlphaBackgroundColorInHex = _d.buttonAlphaBackgroundColorInHex, buttonAlphaLabelColorInHex = _d.buttonAlphaLabelColorInHex, buttonBravoDesignType = _d.buttonBravoDesignType, buttonBravoBackgroundColorInHex = _d.buttonBravoBackgroundColorInHex, buttonBravoLabelColorInHex = _d.buttonBravoLabelColorInHex, buttonCharlieDesignType = _d.buttonCharlieDesignType, buttonCharlieBackgroundColorInHex = _d.buttonCharlieBackgroundColorInHex, buttonCharlieLabelColorInHex = _d.buttonCharlieLabelColorInHex;
38
38
  return (react_1.default.createElement(S_FullScreenWrapper, null,
39
39
  react_1.default.createElement(S_ContentsArea, null,
40
- title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, styleTheme: "displayBold", lineHeight: 1.2 })),
40
+ title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "37px", customFontWeight: "bold", lineHeight: 1.3 })),
41
41
  description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
42
42
  react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, styleTheme: "body1Bold" }))),
43
43
  (buttonAlphaLinkSrc || buttonBravoLinkSrc || buttonCharlieLinkSrc) && (react_1.default.createElement(S_SectionButtonBox, { hasTitle: !!title, hasDescription: !!description },
@@ -46,7 +46,7 @@ function TemplateC() {
46
46
  buttonCharlieLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonCharlieLabel, src: buttonCharlieLinkSrc, linkType: buttonCharlieLinkType, buttonType: buttonCharlieDesignType, backgroundColor: buttonCharlieBackgroundColorInHex, textColor: buttonCharlieLabelColorInHex, borderColor: buttonCharlieLabelColorInHex })))))));
47
47
  }
48
48
  var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n min-height: 80vh;\n display: flex;\n align-items: center;\n"], ["\n width: 100%;\n min-height: 80vh;\n display: flex;\n align-items: center;\n"])));
49
- var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 100%;\n margin: ", " ", ";\n"], ["\n width: 100%;\n margin: ", " ", ";\n"])), function (_a) {
49
+ var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 100%;\n box-sizing: border-box;\n margin: ", " 0;\n padding: 0 ", ";\n"], ["\n width: 100%;\n box-sizing: border-box;\n margin: ", " 0;\n padding: 0 ", ";\n"])), function (_a) {
50
50
  var theme = _a.theme;
51
51
  return theme.spacing.spacingG;
52
52
  }, function (_a) {
package/dist/src/sub/DynamicLayout/mobile/sections/IntroSection/templates/TemplateD/TemplateD.js CHANGED
@@ -37,7 +37,7 @@ function TemplateD() {
37
37
  var _d = context.styles, buttonAlphaDesignType = _d.buttonAlphaDesignType, buttonAlphaBackgroundColorInHex = _d.buttonAlphaBackgroundColorInHex, buttonAlphaLabelColorInHex = _d.buttonAlphaLabelColorInHex, buttonBravoDesignType = _d.buttonBravoDesignType, buttonBravoBackgroundColorInHex = _d.buttonBravoBackgroundColorInHex, buttonBravoLabelColorInHex = _d.buttonBravoLabelColorInHex, buttonCharlieDesignType = _d.buttonCharlieDesignType, buttonCharlieBackgroundColorInHex = _d.buttonCharlieBackgroundColorInHex, buttonCharlieLabelColorInHex = _d.buttonCharlieLabelColorInHex;
38
38
  return (react_1.default.createElement(S_FullScreenWrapper, null,
39
39
  react_1.default.createElement(S_ContentsArea, null,
40
- title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", styleTheme: "displayBold", lineHeight: 1.2 })),
40
+ title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "37px", customFontWeight: "bold", lineHeight: 1.3 })),
41
41
  description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
42
42
  react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", styleTheme: "body1Bold" }))),
43
43
  (buttonAlphaLinkSrc || buttonBravoLinkSrc || buttonCharlieLinkSrc) && (react_1.default.createElement(S_SectionButtonBox, { hasTitle: !!title, hasDescription: !!description },
@@ -46,7 +46,7 @@ function TemplateD() {
46
46
  buttonCharlieLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonCharlieLabel, src: buttonCharlieLinkSrc, linkType: buttonCharlieLinkType, buttonType: buttonCharlieDesignType, backgroundColor: buttonCharlieBackgroundColorInHex, textColor: buttonCharlieLabelColorInHex, borderColor: buttonCharlieLabelColorInHex })))))));
47
47
  }
48
48
  var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n min-height: 80vh;\n display: flex;\n align-items: center;\n"], ["\n width: 100%;\n min-height: 80vh;\n display: flex;\n align-items: center;\n"])));
49
- var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n margin: ", " ", ";\n"], ["\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n margin: ", " ", ";\n"])), function (_a) {
49
+ var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 100%;\n box-sizing: border-box;\n margin: ", " 0;\n padding: 0 ", ";\n"], ["\n width: 100%;\n box-sizing: border-box;\n margin: ", " 0;\n padding: 0 ", ";\n"])), function (_a) {
50
50
  var theme = _a.theme;
51
51
  return theme.spacing.spacingG;
52
52
  }, function (_a) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web-test",
3
- "version": "0.0.18",
3
+ "version": "0.0.20",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,8 +1,9 @@
1
1
  # PDS-DEV-KIT-WEB-TEST Release Notes
2
- ## [v0.0.18]
2
+ ## [v0.0.20]
3
3
 
4
4
  * sub
5
5
  * DynamicLayout 수정
6
- * 섹션 및 아이템 컴포넌트에 key값 부여
7
- * YouTubeIframe 리팩토링했던 부분 롤백
8
- * preview모드일때 HTML Reader에서 클릭이 되는 이슈 수정
6
+ * 인포박스섹션의 디바이더 컬러키 변경
7
+ * 섹션 및 아이템 순서 정렬과 필터 적용
8
+ * 컨텐츠 캐러셀 섹션의 내용 중앙 정렬
9
+ * 유튜브 연관 동영상 뜨는 이슈 수정