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

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 (25) hide show
  1. package/dist/src/sub/DynamicLayout/desktop/components/Item/Item.d.ts +3 -1
  2. package/dist/src/sub/DynamicLayout/desktop/components/Item/Item.js +6 -3
  3. package/dist/src/sub/DynamicLayout/desktop/components/Section/Section.d.ts +3 -1
  4. package/dist/src/sub/DynamicLayout/desktop/components/Section/Section.js +10 -13
  5. package/dist/src/sub/DynamicLayout/desktop/components/common/YouTubeIframe.js +1 -1
  6. package/dist/src/sub/DynamicLayout/desktop/sections/ContentsCarouselSection/templates/TemplateA/TemplateA.js +3 -3
  7. package/dist/src/sub/DynamicLayout/desktop/sections/ContentsCarouselSection/templates/TemplateB/TemplateB.js +3 -3
  8. package/dist/src/sub/DynamicLayout/desktop/sections/ContentsSection/templates/TemplateA/TemplateA.js +1 -1
  9. package/dist/src/sub/DynamicLayout/desktop/sections/ContentsSection/templates/TemplateB/TemplateB.js +1 -1
  10. package/dist/src/sub/DynamicLayout/desktop/sections/InfoBoxSection/templates/TemplateA/TemplateA.js +3 -3
  11. package/dist/src/sub/DynamicLayout/mobile/components/Item/Item.d.ts +3 -1
  12. package/dist/src/sub/DynamicLayout/mobile/components/Item/Item.js +6 -3
  13. package/dist/src/sub/DynamicLayout/mobile/components/Section/Section.js +4 -10
  14. package/dist/src/sub/DynamicLayout/mobile/components/common/YouTubeIframe.js +1 -1
  15. package/dist/src/sub/DynamicLayout/mobile/sections/ContentsCarouselSection/templates/TemplateA/TemplateA.js +6 -12
  16. package/dist/src/sub/DynamicLayout/mobile/sections/ContentsCarouselSection/templates/TemplateB/TemplateB.js +6 -12
  17. package/dist/src/sub/DynamicLayout/mobile/sections/ContentsSection/templates/TemplateA/TemplateA.js +1 -1
  18. package/dist/src/sub/DynamicLayout/mobile/sections/ContentsSection/templates/TemplateB/TemplateB.js +1 -1
  19. package/dist/src/sub/DynamicLayout/mobile/sections/InfoBoxSection/templates/TemplateA/TemplateA.js +6 -12
  20. package/dist/src/sub/DynamicLayout/mobile/sections/IntroSection/templates/TemplateA/TemplateA.js +2 -2
  21. package/dist/src/sub/DynamicLayout/mobile/sections/IntroSection/templates/TemplateB/TemplateB.js +2 -2
  22. package/dist/src/sub/DynamicLayout/mobile/sections/IntroSection/templates/TemplateC/TemplateC.js +2 -2
  23. package/dist/src/sub/DynamicLayout/mobile/sections/IntroSection/templates/TemplateD/TemplateD.js +2 -2
  24. package/package.json +1 -1
  25. package/release-note.md +21 -5
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
@@ -111,6 +111,6 @@ var BlackScreen = styled_components_1.default.div(templateObject_1 || (templateO
111
111
  var theme = _a.theme;
112
112
  return theme.ui_62;
113
113
  });
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"])));
114
+ 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
115
  exports.default = YouTubeIframe;
116
116
  var templateObject_1, templateObject_2;
package/dist/src/sub/DynamicLayout/desktop/sections/ContentsCarouselSection/templates/TemplateA/TemplateA.js CHANGED
@@ -62,7 +62,7 @@ function TemplateA() {
62
62
  title && (react_1.default.createElement(S_SectionTitleBox, null,
63
63
  react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "48px", customFontWeight: "bold" }))),
64
64
  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" }))),
65
+ react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "20px", fontWeight: "600" }))),
66
66
  buttonAlphaLinkSrc && (react_1.default.createElement(S_SectionButtonBox, null,
67
67
  react_1.default.createElement(components_1.Section.Button, { text: buttonAlphaLabel, src: buttonAlphaLinkSrc, linkType: buttonAlphaLinkType, buttonType: buttonAlphaDesignType, backgroundColor: buttonAlphaBackgroundColorInHex, textColor: buttonAlphaLabelColorInHex, borderColor: buttonAlphaLabelColorInHex }))),
68
68
  filteredItems.length > 0 && (react_1.default.createElement(S_CarouselBox, null,
@@ -83,7 +83,7 @@ function TemplateA() {
83
83
  return (react_1.default.createElement(components_1.Item, __assign({ key: id }, item),
84
84
  itemImageSrc && (react_1.default.createElement(S_ItemImageBox, null,
85
85
  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" })),
86
+ itemTitle && (react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, customFontSize: "22px", customFontWeight: "bold", lineHeight: 1.4 })),
87
87
  itemDescription && (react_1.default.createElement(S_ItemDescriptionBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle },
88
88
  react_1.default.createElement(components_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, styleTheme: "body2Regular" }))),
89
89
  itemLinkMethod === 'CLICK_BUTTON_IN_ITEM' && itemLinkSrc && (react_1.default.createElement(S_ItemButtonBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle, hasDescription: !!itemDescription },
@@ -116,7 +116,7 @@ var S_CarouselBox = styled_components_1.default.div(templateObject_6 || (templat
116
116
  */
117
117
  var S_ItemImageBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-bottom: ", ";\n"], ["\n margin-bottom: ", ";\n"])), function (_a) {
118
118
  var theme = _a.theme;
119
- return theme.spacing.spacingD;
119
+ return theme.spacing.spacingE;
120
120
  });
121
121
  var S_ItemDescriptionBox = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n margin-top: ", ";\n"], ["\n margin-top: ", ";\n"])), function (_a) {
122
122
  var theme = _a.theme, hasImage = _a.hasImage, hasTitle = _a.hasTitle;
package/dist/src/sub/DynamicLayout/desktop/sections/ContentsCarouselSection/templates/TemplateB/TemplateB.js CHANGED
@@ -62,7 +62,7 @@ function TemplateB() {
62
62
  title && (react_1.default.createElement(S_SectionTitleBox, null,
63
63
  react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "48px", customFontWeight: "bold" }))),
64
64
  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" }))),
65
+ react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "20px", fontWeight: "600" }))),
66
66
  buttonAlphaLinkSrc && (react_1.default.createElement(S_SectionButtonBox, null,
67
67
  react_1.default.createElement(components_1.Section.Button, { text: buttonAlphaLabel, src: buttonAlphaLinkSrc, linkType: buttonAlphaLinkType, buttonType: buttonAlphaDesignType, backgroundColor: buttonAlphaBackgroundColorInHex, textColor: buttonAlphaLabelColorInHex, borderColor: buttonAlphaLabelColorInHex }))),
68
68
  filteredItems.length > 0 && (react_1.default.createElement(S_CarouselBox, null,
@@ -83,7 +83,7 @@ function TemplateB() {
83
83
  return (react_1.default.createElement(components_1.Item, __assign({ key: id }, item),
84
84
  itemImageSrc && (react_1.default.createElement(S_ItemImageBox, null,
85
85
  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" })),
86
+ itemTitle && (react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, customFontSize: "22px", customFontWeight: "bold", lineHeight: 1.4 })),
87
87
  itemDescription && (react_1.default.createElement(S_ItemDescriptionBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle },
88
88
  react_1.default.createElement(components_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, styleTheme: "body2Regular" }))),
89
89
  itemLinkMethod === 'CLICK_BUTTON_IN_ITEM' && itemLinkSrc && (react_1.default.createElement(S_ItemButtonBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle, hasDescription: !!itemDescription },
@@ -116,7 +116,7 @@ var S_CarouselBox = styled_components_1.default.div(templateObject_6 || (templat
116
116
  */
117
117
  var S_ItemImageBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-bottom: ", ";\n"], ["\n margin-bottom: ", ";\n"])), function (_a) {
118
118
  var theme = _a.theme;
119
- return theme.spacing.spacingD;
119
+ return theme.spacing.spacingE;
120
120
  });
121
121
  var S_ItemDescriptionBox = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n margin-top: ", ";\n"], ["\n margin-top: ", ";\n"])), function (_a) {
122
122
  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
@@ -56,7 +56,7 @@ function TemplateA() {
56
56
  return (react_1.default.createElement(S_ContentsArea, { hasNothing: hasNothing },
57
57
  title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "48px", customFontWeight: "bold" })),
58
58
  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" }))),
59
+ react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "20px", fontWeight: "600" }))),
60
60
  filteredItems.length > 0 && (react_1.default.createElement(S_ItemsWrapper, { totalItems: filteredItems.length }, filteredItems.map(function (item, index, self) {
61
61
  var id = item.id;
62
62
  var _a = item.properties, itemTitle = _a.title, itemDescription = _a.description, itemImageSrc = _a.imageSrc;
@@ -65,7 +65,7 @@ function TemplateA() {
65
65
  itemImageSrc && (react_1.default.createElement(S_ItemImageBox, null,
66
66
  react_1.default.createElement(Item_1.Item.Image, { src: itemImageSrc, width: 120, ratio: "1_1", shapeType: "rectangle", scaleType: "cover" }))),
67
67
  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" })),
68
+ itemTitle && (react_1.default.createElement(Item_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, textAlign: "center", customFontSize: "22px", customFontWeight: "bold", lineHeight: 1.4 })),
69
69
  itemDescription && (react_1.default.createElement(react_1.default.Fragment, null,
70
70
  react_1.default.createElement(S_CustomDividerBox, null,
71
71
  react_1.default.createElement(S_CustomWidthDivider, null)),
@@ -104,7 +104,7 @@ var S_ItemWrapper = styled_components_1.default.div(templateObject_4 || (templat
104
104
  });
105
105
  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
106
  var theme = _a.theme;
107
- return theme.spacing.spacingD;
107
+ return theme.spacing.spacingE;
108
108
  });
109
109
  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
110
  var S_CustomDividerBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
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
@@ -111,6 +111,6 @@ var BlackScreen = styled_components_1.default.div(templateObject_1 || (templateO
111
111
  var theme = _a.theme;
112
112
  return theme.ui_62;
113
113
  });
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"])));
114
+ 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
115
  exports.default = YouTubeIframe;
116
116
  var templateObject_1, templateObject_2;
package/dist/src/sub/DynamicLayout/mobile/sections/ContentsCarouselSection/templates/TemplateA/TemplateA.js CHANGED
@@ -59,7 +59,7 @@ function TemplateA() {
59
59
  : [];
60
60
  return (react_1.default.createElement(S_ContentsArea, { hasNothing: !title && !description && !buttonAlphaLinkSrc && filteredItems.length === 0 },
61
61
  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" }))),
62
+ react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold", lineHeight: 1.3 }))),
63
63
  description && (react_1.default.createElement(S_SectionDescriptionBox, null,
64
64
  react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "18px", fontWeight: "600" }))),
65
65
  buttonAlphaLinkSrc && (react_1.default.createElement(S_SectionButtonBox, null,
@@ -75,9 +75,9 @@ function TemplateA() {
75
75
  return (react_1.default.createElement(components_1.Item, __assign({ key: id }, item),
76
76
  itemImageSrc && (react_1.default.createElement(S_ItemImageBox, null,
77
77
  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 }),
78
+ itemTitle && (react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, customFontSize: "20px", customFontWeight: "bold", lineHeight: 1.4 })),
79
79
  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" }))),
80
+ react_1.default.createElement(components_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, styleTheme: "body2Regular" }))),
81
81
  itemLinkMethod === 'CLICK_BUTTON_IN_ITEM' && itemLinkSrc && (react_1.default.createElement(S_ItemButtonBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle, hasDescription: !!itemDescription },
82
82
  react_1.default.createElement(components_1.Item.Button, { text: itemButtonLabel, src: itemLinkSrc, linkType: itemLinkType, buttonType: itemButtonDesignType, backgroundColor: itemButtonBackgroundColorInHex, textColor: itemButtonLabelColorInHex, borderColor: itemButtonLabelColorInHex })))));
83
83
  }))))));
@@ -107,20 +107,14 @@ var S_SectionButtonBox = styled_components_1.default.div(templateObject_4 || (te
107
107
  var theme = _a.theme;
108
108
  return theme.spacing.spacingF;
109
109
  });
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
- });
110
+ var S_CarouselBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin: 56px 0;\n"], ["\n margin: 56px 0;\n"])));
114
111
  /** NOTE: X00001에서는 margin collapsing으로 스페이싱을 처리하는 것이 원칙이나,
115
112
  * Swiper 라이브러리가 각 슬라이드 아이템에 flexbox를 쓰고 있어서 이곳만 예외적으로 styled component로 스페이싱을 처리했습니다.
116
113
  */
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
- });
114
+ var S_ItemImageBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin-bottom: 18px;\n"], ["\n margin-bottom: 18px;\n"])));
121
115
  var S_ItemDescriptionBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-top: ", ";\n"], ["\n margin-top: ", ";\n"])), function (_a) {
122
116
  var theme = _a.theme, hasImage = _a.hasImage, hasTitle = _a.hasTitle;
123
- return (hasImage || hasTitle) && theme.spacing.spacingB;
117
+ return (hasImage || hasTitle) && theme.spacing.spacingC;
124
118
  });
125
119
  var S_ItemButtonBox = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n margin-top: ", ";\n"], ["\n margin-top: ", ";\n"])), function (_a) {
126
120
  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
@@ -59,7 +59,7 @@ function TemplateB() {
59
59
  : [];
60
60
  return (react_1.default.createElement(S_ContentsArea, { hasNothing: !title && !description && !buttonAlphaLinkSrc && filteredItems.length === 0 },
61
61
  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" }))),
62
+ react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold", lineHeight: 1.3 }))),
63
63
  description && (react_1.default.createElement(S_SectionDescriptionBox, null,
64
64
  react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "18px", fontWeight: "600" }))),
65
65
  buttonAlphaLinkSrc && (react_1.default.createElement(S_SectionButtonBox, null,
@@ -75,9 +75,9 @@ function TemplateB() {
75
75
  return (react_1.default.createElement(components_1.Item, __assign({ key: id }, item),
76
76
  itemImageSrc && (react_1.default.createElement(S_ItemImageBox, null,
77
77
  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 }),
78
+ itemTitle && (react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, customFontSize: "20px", customFontWeight: "bold", lineHeight: 1.4 })),
79
79
  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" }))),
80
+ react_1.default.createElement(components_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, styleTheme: "body2Regular" }))),
81
81
  itemLinkMethod === 'CLICK_BUTTON_IN_ITEM' && itemLinkSrc && (react_1.default.createElement(S_ItemButtonBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle, hasDescription: !!itemDescription },
82
82
  react_1.default.createElement(components_1.Item.Button, { text: itemButtonLabel, src: itemLinkSrc, linkType: itemLinkType, buttonType: itemButtonDesignType, backgroundColor: itemButtonBackgroundColorInHex, textColor: itemButtonLabelColorInHex, borderColor: itemButtonLabelColorInHex })))));
83
83
  }))))));
@@ -107,20 +107,14 @@ var S_SectionButtonBox = styled_components_1.default.div(templateObject_4 || (te
107
107
  var theme = _a.theme;
108
108
  return theme.spacing.spacingF;
109
109
  });
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
- });
110
+ var S_CarouselBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin: 56px 0;\n"], ["\n margin: 56px 0;\n"])));
114
111
  /** NOTE: X00001에서는 margin collapsing으로 스페이싱을 처리하는 것이 원칙이나,
115
112
  * Swiper 라이브러리가 각 슬라이드 아이템에 flexbox를 쓰고 있어서 이곳만 예외적으로 styled component로 스페이싱을 처리했습니다.
116
113
  */
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
- });
114
+ var S_ItemImageBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin-bottom: 18px;\n"], ["\n margin-bottom: 18px;\n"])));
121
115
  var S_ItemDescriptionBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-top: ", ";\n"], ["\n margin-top: ", ";\n"])), function (_a) {
122
116
  var theme = _a.theme, hasImage = _a.hasImage, hasTitle = _a.hasTitle;
123
- return (hasImage || hasTitle) && theme.spacing.spacingB;
117
+ return (hasImage || hasTitle) && theme.spacing.spacingC;
124
118
  });
125
119
  var S_ItemButtonBox = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n margin-top: ", ";\n"], ["\n margin-top: ", ";\n"])), function (_a) {
126
120
  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
@@ -54,7 +54,7 @@ function TemplateA() {
54
54
  : [];
55
55
  var hasNothing = !title && !description && !buttonAlphaLinkSrc && filteredItems.length <= 0;
56
56
  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" })),
57
+ title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold", lineHeight: 1.3 })),
58
58
  description && (react_1.default.createElement(S_SectionDescriptionBox, null,
59
59
  react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "18px", fontWeight: "600" }))),
60
60
  filteredItems.length > 0 && (react_1.default.createElement(S_ItemsWrapper, null, filteredItems.map(function (item, index) {
@@ -64,9 +64,9 @@ function TemplateA() {
64
64
  react_1.default.createElement(Item_1.Item, __assign({}, item),
65
65
  itemImageSrc && (react_1.default.createElement(S_ItemImageBox, null,
66
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
+ itemTitle && (react_1.default.createElement(Item_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, textAlign: "center", customFontSize: "20px", customFontWeight: "bold", lineHeight: 1.4 })),
68
68
  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" }))))));
69
+ react_1.default.createElement(Item_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, textAlign: "center", styleTheme: "body2Regular" }))))));
70
70
  }))),
71
71
  buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, null,
72
72
  react_1.default.createElement(Section_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex })))));
@@ -82,18 +82,12 @@ var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_2 |
82
82
  var theme = _a.theme;
83
83
  return theme.spacing.spacingE;
84
84
  });
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
- });
85
+ var S_ItemsWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin: 56px 0;\n"], ["\n margin: 56px 0;\n"])));
89
86
  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
- });
87
+ 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
88
  var S_ItemDescriptionBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
95
89
  var theme = _a.theme;
96
- return theme.spacing.spacingB;
90
+ return theme.spacing.spacingC;
97
91
  });
98
92
  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
93
  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.19",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,8 +1,24 @@
1
1
  # PDS-DEV-KIT-WEB-TEST Release Notes
2
- ## [v0.0.18]
2
+ ## [v0.0.19]
3
3
 
4
4
  * sub
5
- * DynamicLayout 수정
6
- * 섹션 및 아이템 컴포넌트에 key값 부여
7
- * YouTubeIframe 리팩토링했던 부분 롤백
8
- * preview모드일때 HTML Reader에서 클릭이 되는 이슈 수정
5
+ * DynamicLayout 유튜브 배경의 비율 조정 (세로로 긴 섹션에서 제대로 표시되지 않는 이슈 픽스)
6
+ * DynamicLayout 디자인 디테일 수정
7
+ * mobile IntroSection 의 콘텐츠 영역의 넓이 조정 (띄어쓰기 없는 텍스트가 화면밖으로 넘어가는 이슈 픽스)
8
+ * desktop 콘텐츠 캐러셀 섹션 / 인포박스 섹션
9
+ * 섹션 본문
10
+ * 아이템 제목
11
+ * 아이템 이미지와 제목 사이 간격 spacing-d -> spacing-e로 수정
12
+ * desktop 콘텐트 섹션
13
+ * 섹션 본문
14
+ * mobile 인트로 섹션
15
+ * 섹션 제목
16
+ * mobile 콘텐츠 캐러셀 / 인포박스 섹션
17
+ * 섹션 제목
18
+ * 아이템 제목
19
+ * 아이템 본문
20
+ * 아이템 이미지와 제목 사이 간격 spacing-c -> 18px로 수정
21
+ * 아이템 제목과 아이템 본문 사이 간격 spacing-b -> spacing-c로 수정
22
+ * 섹션과 아이템 사이 간격 spacing-g -> 56px로 수정
23
+ * 콘텐트 섹션
24
+ * 섹션 제목