pds-dev-kit-web-test 0.0.15 → 0.0.16

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 (17) hide show
  1. package/dist/src/sub/DynamicLayout/desktop/sections/ContentsCarouselSection/templates/TemplateA/TemplateA.js +1 -1
  2. package/dist/src/sub/DynamicLayout/desktop/sections/ContentsCarouselSection/templates/TemplateB/TemplateB.js +1 -3
  3. package/dist/src/sub/DynamicLayout/desktop/sections/ContentsSection/templates/TemplateB/TemplateB.js +1 -1
  4. package/dist/src/sub/DynamicLayout/desktop/sections/FooterSection/templates/TemplateA/TemplateA.js +4 -1
  5. package/dist/src/sub/DynamicLayout/desktop/sections/FooterSection/templates/TemplateB/TemplateB.js +4 -1
  6. package/dist/src/sub/DynamicLayout/desktop/sections/InfoBoxSection/templates/TemplateA/TemplateA.js +2 -2
  7. package/dist/src/sub/DynamicLayout/mobile/components/Section/Section.d.ts +3 -1
  8. package/dist/src/sub/DynamicLayout/mobile/components/Section/Section.js +6 -3
  9. package/dist/src/sub/DynamicLayout/mobile/sections/ContentsCarouselSection/templates/TemplateA/TemplateA.js +4 -4
  10. package/dist/src/sub/DynamicLayout/mobile/sections/ContentsCarouselSection/templates/TemplateB/TemplateB.js +4 -4
  11. package/dist/src/sub/DynamicLayout/mobile/sections/ContentsSection/templates/TemplateA/TemplateA.js +3 -3
  12. package/dist/src/sub/DynamicLayout/mobile/sections/ContentsSection/templates/TemplateB/TemplateB.js +2 -2
  13. package/dist/src/sub/DynamicLayout/mobile/sections/FooterSection/templates/TemplateA/TemplateA.js +2 -2
  14. package/dist/src/sub/DynamicLayout/mobile/sections/FooterSection/templates/TemplateB/TemplateB.js +2 -2
  15. package/dist/src/sub/DynamicLayout/mobile/sections/InfoBoxSection/templates/TemplateA/TemplateA.js +3 -3
  16. package/package.json +1 -1
  17. package/release-note.md +13 -14
@@ -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: "body1Bold" })),
86
+ itemTitle && (react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, styleTheme: "subTitleBold" })),
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 },
@@ -39,7 +39,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
39
39
  Object.defineProperty(exports, "__esModule", { value: true });
40
40
  var react_1 = __importStar(require("react"));
41
41
  var styled_components_1 = __importDefault(require("styled-components"));
42
- var hybrid_1 = require("../../../../../../../hybrid");
43
42
  var components_1 = require("../../../../components");
44
43
  function TemplateB() {
45
44
  var sectionContext = (0, react_1.useContext)(components_1.Section.context);
@@ -84,9 +83,8 @@ function TemplateB() {
84
83
  return (react_1.default.createElement(components_1.Item, __assign({ key: id }, item),
85
84
  itemImageSrc && (react_1.default.createElement(S_ItemImageBox, null,
86
85
  react_1.default.createElement(components_1.Item.Image, { src: itemImageSrc, ratio: "3_2", width: "responsive", radius: 24 }))),
87
- itemTitle && (react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, styleTheme: "body2Bold" })),
86
+ itemTitle && (react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, styleTheme: "subTitleBold" })),
88
87
  itemDescription && (react_1.default.createElement(S_ItemDescriptionBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle },
89
- react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c" }),
90
88
  react_1.default.createElement(components_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, styleTheme: "body2Regular" }))),
91
89
  itemLinkMethod === 'CLICK_BUTTON_IN_ITEM' && itemLinkSrc && (react_1.default.createElement(S_ItemButtonBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle, hasDescription: !!itemDescription },
92
90
  react_1.default.createElement(components_1.Item.Button, { text: itemButtonLabel, src: itemLinkSrc, linkType: itemLinkType, buttonType: itemButtonDesignType, backgroundColor: itemButtonBackgroundColorInHex, textColor: itemButtonLabelColorInHex, borderColor: itemButtonLabelColorInHex })))));
@@ -37,7 +37,7 @@ function TemplateB() {
37
37
  return (react_1.default.createElement(S_ContentsAreaBox, { hasNothing: hasNothing },
38
38
  react_1.default.createElement(S_ContentsArea, null,
39
39
  react_1.default.createElement(S_ContentsBodyWrapper, null,
40
- title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "60px", customFontWeight: "bold" })),
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
42
  react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, styleTheme: "headingBold" }))),
43
43
  buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, { hasTitle: !!title, hasDescription: !!description },
@@ -57,7 +57,10 @@ function TemplateA() {
57
57
  react_1.default.createElement(Item_1.Item.Image, { ratio: "auto", height: 48, scaleType: "fill", src: filteredItems[0].properties.logoImageSrc }))),
58
58
  filteredItems[0].properties.body && (react_1.default.createElement(Item_1.Item.HTMLReader, { data: filteredItems[0].properties.body, styleTheme: "caption1Regular", color: itemDescriptionColorInHex }))))));
59
59
  }
60
- var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: 160px auto;\n ", "\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: 160px auto;\n ", "\n"])), function (_a) {
60
+ var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: ", " auto;\n ", "\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: ", " auto;\n ", "\n"])), function (_a) {
61
+ var theme = _a.theme;
62
+ return theme.spacing.spacingH;
63
+ }, function (_a) {
61
64
  var hasNothing = _a.hasNothing;
62
65
  return hasNothing && 'margin: 0';
63
66
  });
@@ -57,7 +57,10 @@ function TemplateB() {
57
57
  react_1.default.createElement(Item_1.Item.Image, { ratio: "auto", height: 48, scaleType: "fill", src: filteredItems[0].properties.logoImageSrc }))),
58
58
  filteredItems[0].properties.body && (react_1.default.createElement(Item_1.Item.HTMLReader, { data: filteredItems[0].properties.body, styleTheme: "caption1Regular", color: itemDescriptionColorInHex, textAlign: "center" }))))));
59
59
  }
60
- var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: 160px auto;\n ", "\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: 160px auto;\n ", "\n"])), function (_a) {
60
+ var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: ", " auto;\n ", "\n"], ["\n --min-width: 1000;\n --min-width-px: 1000px;\n --max-width: 1500;\n --max-width-px: 1500px;\n --min-viewport-width: 1200;\n --min-viewport-width-px: 1200px;\n --max-viewport-width: 1920;\n --max-viewport-width-px: 1920px;\n width: calc(\n (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n );\n min-width: var(--min-width-px);\n max-width: var(--max-width-px);\n margin: ", " auto;\n ", "\n"])), function (_a) {
61
+ var theme = _a.theme;
62
+ return theme.spacing.spacingH;
63
+ }, function (_a) {
61
64
  var hasNothing = _a.hasNothing;
62
65
  return hasNothing && 'margin: 0';
63
66
  });
@@ -65,11 +65,11 @@ 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", styleTheme: "headingBold" })),
68
+ itemTitle && (react_1.default.createElement(Item_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, textAlign: "center", customFontSize: "22px", customFontWeight: "bold" })),
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)),
72
- react_1.default.createElement(Item_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, textAlign: "center", styleTheme: "body1Regular" })))))));
72
+ react_1.default.createElement(Item_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, textAlign: "center", styleTheme: "body2Regular" })))))));
73
73
  }))),
74
74
  buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, null,
75
75
  react_1.default.createElement(Section_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex })))));
@@ -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>;
@@ -166,13 +166,16 @@ var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_6 || (t
166
166
  });
167
167
  // DESCRIPTION
168
168
  function Description(_a) {
169
- var text = _a.text, color = _a.color, textLabelProps = __rest(_a, ["text", "color"]);
170
- return (react_1.default.createElement(S_DescriptionStyleWrapper, { color: color },
169
+ var text = _a.text, color = _a.color, fontWeight = _a.fontWeight, textLabelProps = __rest(_a, ["text", "color", "fontWeight"]);
170
+ return (react_1.default.createElement(S_DescriptionStyleWrapper, { color: color, fontWeight: fontWeight },
171
171
  react_1.default.createElement(mobile_1.M_TextLabel, __assign({ text: text, colorTheme: "sysTextPrimary" }, textLabelProps))));
172
172
  }
173
- 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) {
173
+ 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) {
174
174
  var color = _a.color;
175
175
  return color;
176
+ }, function (_a) {
177
+ var fontWeight = _a.fontWeight;
178
+ return fontWeight && "font-weight : " + fontWeight + ";";
176
179
  });
177
180
  // IMAGE
178
181
  function Image(_a) {
@@ -61,7 +61,7 @@ function TemplateA() {
61
61
  title && (react_1.default.createElement(S_SectionTitleBox, null,
62
62
  react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold" }))),
63
63
  description && (react_1.default.createElement(S_SectionDescriptionBox, null,
64
- react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "20px", customFontWeight: "bold" }))),
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,
66
66
  react_1.default.createElement(components_1.Section.Button, { text: buttonAlphaLabel, src: buttonAlphaLinkSrc, linkType: buttonAlphaLinkType, buttonType: buttonAlphaDesignType, backgroundColor: buttonAlphaBackgroundColorInHex, textColor: buttonAlphaLabelColorInHex, borderColor: buttonAlphaLabelColorInHex }))),
67
67
  filteredItems.length > 0 && (react_1.default.createElement(S_CarouselBox, null,
@@ -77,7 +77,7 @@ function TemplateA() {
77
77
  react_1.default.createElement(components_1.Item.Image, { src: itemImageSrc, ratio: "1_1", width: "responsive" }))),
78
78
  title && react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex }),
79
79
  description && (react_1.default.createElement(S_ItemDescriptionBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle },
80
- react_1.default.createElement(components_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, styleTheme: "caption1Regular" }))),
80
+ react_1.default.createElement(components_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, customFontSize: "15px" }))),
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
  }))))));
@@ -97,11 +97,11 @@ var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templa
97
97
  });
98
98
  var S_SectionTitleBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
99
99
  var theme = _a.theme;
100
- return theme.spacing.spacingD;
100
+ return theme.spacing.spacingE;
101
101
  });
102
102
  var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
103
103
  var theme = _a.theme;
104
- return theme.spacing.spacingD;
104
+ return theme.spacing.spacingE;
105
105
  });
106
106
  var S_SectionButtonBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin: ", " 0;\n\n & > div {\n width: fit-content;\n margin: 0 auto;\n }\n"], ["\n margin: ", " 0;\n\n & > div {\n width: fit-content;\n margin: 0 auto;\n }\n"])), function (_a) {
107
107
  var theme = _a.theme;
@@ -61,7 +61,7 @@ function TemplateB() {
61
61
  title && (react_1.default.createElement(S_SectionTitleBox, null,
62
62
  react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold" }))),
63
63
  description && (react_1.default.createElement(S_SectionDescriptionBox, null,
64
- react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "20px", customFontWeight: "bold" }))),
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,
66
66
  react_1.default.createElement(components_1.Section.Button, { text: buttonAlphaLabel, src: buttonAlphaLinkSrc, linkType: buttonAlphaLinkType, buttonType: buttonAlphaDesignType, backgroundColor: buttonAlphaBackgroundColorInHex, textColor: buttonAlphaLabelColorInHex, borderColor: buttonAlphaLabelColorInHex }))),
67
67
  filteredItems && (react_1.default.createElement(S_CarouselBox, null,
@@ -77,7 +77,7 @@ function TemplateB() {
77
77
  react_1.default.createElement(components_1.Item.Image, { src: itemImageSrc, ratio: "3_2", width: "responsive" }))),
78
78
  title && react_1.default.createElement(components_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex }),
79
79
  description && (react_1.default.createElement(S_ItemDescriptionBox, { hasImage: !!itemImageSrc, hasTitle: !!itemTitle },
80
- react_1.default.createElement(components_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, styleTheme: "caption1Regular" }))),
80
+ react_1.default.createElement(components_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, customFontSize: "15px" }))),
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
  }))))));
@@ -97,11 +97,11 @@ var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templa
97
97
  });
98
98
  var S_SectionTitleBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
99
99
  var theme = _a.theme;
100
- return theme.spacing.spacingD;
100
+ return theme.spacing.spacingE;
101
101
  });
102
102
  var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
103
103
  var theme = _a.theme;
104
- return theme.spacing.spacingD;
104
+ return theme.spacing.spacingE;
105
105
  });
106
106
  var S_SectionButtonBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin: ", " 0;\n\n & > div {\n width: fit-content;\n margin: 0 auto;\n }\n"], ["\n margin: ", " 0;\n\n & > div {\n width: fit-content;\n margin: 0 auto;\n }\n"])), function (_a) {
107
107
  var theme = _a.theme;
@@ -40,7 +40,7 @@ function TemplateA() {
40
40
  title && (react_1.default.createElement(S_SectionTitleBox, null,
41
41
  react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "32px", customFontWeight: "bold" }))),
42
42
  description && (react_1.default.createElement(S_SectionDescriptionBox, null,
43
- react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "20px", customFontWeight: "bold" }))),
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,
45
45
  react_1.default.createElement(Section_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex })))));
46
46
  }
@@ -57,11 +57,11 @@ var S_ImageBox = styled_components_1.default.div(templateObject_2 || (templateOb
57
57
  });
58
58
  var S_SectionTitleBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
59
59
  var theme = _a.theme;
60
- return theme.spacing.spacingD;
60
+ return theme.spacing.spacingE;
61
61
  });
62
62
  var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
63
63
  var theme = _a.theme;
64
- return theme.spacing.spacingD;
64
+ return theme.spacing.spacingE;
65
65
  });
66
66
  var S_ButtonBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
67
67
  var theme = _a.theme;
@@ -37,7 +37,7 @@ function TemplateB() {
37
37
  return (react_1.default.createElement(S_ContentsArea, { hasNothing: hasNothing },
38
38
  title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "32px", customFontWeight: "bold" })),
39
39
  description && (react_1.default.createElement(S_SectionDescriptionBox, null,
40
- react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "20px", customFontWeight: "bold" }))),
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,
42
42
  react_1.default.createElement(Section_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", ratio: "1_1", scaleType: "cover", shapeType: "rectangle" }))))),
43
43
  buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, null,
@@ -56,7 +56,7 @@ var S_ImageBox = styled_components_1.default.div(templateObject_2 || (templateOb
56
56
  });
57
57
  var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
58
58
  var theme = _a.theme;
59
- return theme.spacing.spacingD;
59
+ return theme.spacing.spacingE;
60
60
  });
61
61
  var S_ButtonBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
62
62
  var theme = _a.theme;
@@ -58,8 +58,8 @@ function TemplateA() {
58
58
  filteredItems[0].properties.body && (react_1.default.createElement(Item_1.Item.HTMLReader, { data: filteredItems[0].properties.body, styleTheme: "caption1Regular", color: itemDescriptionColorInHex }))))));
59
59
  }
60
60
  var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin: ", " 0;\n padding: 0 ", ";\n"], ["\n margin: ", " 0;\n padding: 0 ", ";\n"])), function (_a) {
61
- var hasNothing = _a.hasNothing;
62
- return (hasNothing ? 0 : '80px');
61
+ var theme = _a.theme, hasNothing = _a.hasNothing;
62
+ return (hasNothing ? 0 : theme.spacing.spacingG);
63
63
  }, function (_a) {
64
64
  var theme = _a.theme;
65
65
  return theme.spacing.spacingE;
@@ -58,8 +58,8 @@ function TemplateB() {
58
58
  filteredItems[0].properties.body && (react_1.default.createElement(Item_1.Item.HTMLReader, { data: filteredItems[0].properties.body, styleTheme: "caption1Regular", color: itemDescriptionColorInHex, textAlign: "center" }))))));
59
59
  }
60
60
  var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin: ", " 0;\n padding: 0 ", ";\n"], ["\n margin: ", " 0;\n padding: 0 ", ";\n"])), function (_a) {
61
- var hasNothing = _a.hasNothing;
62
- return (hasNothing ? 0 : '80px');
61
+ var theme = _a.theme, hasNothing = _a.hasNothing;
62
+ return (hasNothing ? 0 : theme.spacing.spacingG);
63
63
  }, function (_a) {
64
64
  var theme = _a.theme;
65
65
  return theme.spacing.spacingE;
@@ -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: "32px", 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", customFontSize: "20px", customFontWeight: "bold" }))),
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) {
61
61
  var id = item.id;
62
62
  var _a = item.properties, itemTitle = _a.title, itemDescription = _a.description, itemImageSrc = _a.imageSrc;
@@ -66,7 +66,7 @@ function TemplateA() {
66
66
  react_1.default.createElement(Item_1.Item.Image, { src: itemImageSrc, width: 80, ratio: "1_1", scaleType: "cover" }))),
67
67
  itemTitle && (react_1.default.createElement(Item_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, textAlign: "center" })),
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", styleTheme: "caption1Regular" }))))));
69
+ react_1.default.createElement(Item_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, textAlign: "center", customFontSize: "15px" }))))));
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 })))));
@@ -80,7 +80,7 @@ var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templa
80
80
  });
81
81
  var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin: ", " 0;\n"], ["\n margin: ", " 0;\n"])), function (_a) {
82
82
  var theme = _a.theme;
83
- return theme.spacing.spacingD;
83
+ return theme.spacing.spacingE;
84
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
86
  var theme = _a.theme;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web-test",
3
- "version": "0.0.15",
3
+ "version": "0.0.16",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,20 +1,19 @@
1
1
  # PDS-DEV-KIT-WEB-TEST Release Notes
2
- ## [v0.0.15]
2
+ ## [v0.0.16]
3
3
 
4
4
  * sub
5
5
  * DynamicLayout 디자인 디테일 수정
6
6
  * desktop
7
- * Intro 섹션 타이틀 line-height 1.2
8
- * Intro 제외 섹션 타이틀 line-height 1.3
9
- * Intro 제외 섹션 타이틀 사이즈 48px로 일괄 적용
10
- * Intro 제외 섹션과 콘텐츠 영역 상하단 margin 80px -> 160px으로 수정
7
+ * ContentSheet 타이틀 사이즈 48px 수정
8
+ * Footer -> 위아래 마진값 원래 값으로 돌리기 (64px)
9
+ * 캐러셀 섹션
10
+ * 아이템 제목과 본문 사이 간격 24px -> 12px
11
+ * 아이템 제목 styleTheme : subTitleBold로 적용
12
+ * 인포박스 섹션
13
+ * 아이템 타이틀 customFontSize : 22px로 적용
14
+ * 아이템 본문 styleTheme : body2Regular 적용
11
15
  * mobile
12
- * Intro 섹션 타이틀 line-height 1.2
13
- * Intro 제외 섹션 타이틀 line-height 1.4
14
- * Intro 제외 섹션 타이틀 사이즈 32px일괄 적용
15
- * Intro 제외 섹션 본문 bold 일괄 적용
16
- * Intro 제외 섹션 본문 customFontSize : 20px
17
- * Intro 제외 섹션과 콘텐츠 영역 상하단 margin 48px -> 80px으로 수정
18
- * Content Section
19
- * 이미지와 텍스트 사이 24px -> 48px
20
- * 콘텐츠와 인디케이터 사이 간격 확인 / 인티케이터 하단 마진 조정 필요
16
+ * 인트로, 푸터 섹션 제외 섹션 본문 18px / font-weight : 600으로 수정
17
+ * 섹션 제목과 본문 사이 간격 16px -> 24px
18
+ * 캐러셀, 인포박스 "아이템" 본문 14px -> customFontSize : 15px수정
19
+ * 푸터 위아래 마진값 원래 값으로 돌리기