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.
- package/dist/src/sub/DynamicLayout/desktop/sections/ContentsCarouselSection/templates/TemplateA/TemplateA.js +1 -1
- package/dist/src/sub/DynamicLayout/desktop/sections/ContentsCarouselSection/templates/TemplateB/TemplateB.js +1 -3
- package/dist/src/sub/DynamicLayout/desktop/sections/ContentsSection/templates/TemplateB/TemplateB.js +1 -1
- package/dist/src/sub/DynamicLayout/desktop/sections/FooterSection/templates/TemplateA/TemplateA.js +4 -1
- package/dist/src/sub/DynamicLayout/desktop/sections/FooterSection/templates/TemplateB/TemplateB.js +4 -1
- package/dist/src/sub/DynamicLayout/desktop/sections/InfoBoxSection/templates/TemplateA/TemplateA.js +2 -2
- package/dist/src/sub/DynamicLayout/mobile/components/Section/Section.d.ts +3 -1
- package/dist/src/sub/DynamicLayout/mobile/components/Section/Section.js +6 -3
- package/dist/src/sub/DynamicLayout/mobile/sections/ContentsCarouselSection/templates/TemplateA/TemplateA.js +4 -4
- package/dist/src/sub/DynamicLayout/mobile/sections/ContentsCarouselSection/templates/TemplateB/TemplateB.js +4 -4
- package/dist/src/sub/DynamicLayout/mobile/sections/ContentsSection/templates/TemplateA/TemplateA.js +3 -3
- package/dist/src/sub/DynamicLayout/mobile/sections/ContentsSection/templates/TemplateB/TemplateB.js +2 -2
- package/dist/src/sub/DynamicLayout/mobile/sections/FooterSection/templates/TemplateA/TemplateA.js +2 -2
- package/dist/src/sub/DynamicLayout/mobile/sections/FooterSection/templates/TemplateB/TemplateB.js +2 -2
- package/dist/src/sub/DynamicLayout/mobile/sections/InfoBoxSection/templates/TemplateA/TemplateA.js +3 -3
- package/package.json +1 -1
- 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: "
|
|
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: "
|
|
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 })))));
|
package/dist/src/sub/DynamicLayout/desktop/sections/ContentsSection/templates/TemplateB/TemplateB.js
CHANGED
|
@@ -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: "
|
|
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 },
|
package/dist/src/sub/DynamicLayout/desktop/sections/FooterSection/templates/TemplateA/TemplateA.js
CHANGED
|
@@ -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:
|
|
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
|
});
|
package/dist/src/sub/DynamicLayout/desktop/sections/FooterSection/templates/TemplateB/TemplateB.js
CHANGED
|
@@ -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:
|
|
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
|
});
|
package/dist/src/sub/DynamicLayout/desktop/sections/InfoBoxSection/templates/TemplateA/TemplateA.js
CHANGED
|
@@ -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",
|
|
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: "
|
|
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
|
|
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: "
|
|
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,
|
|
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.
|
|
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.
|
|
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: "
|
|
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,
|
|
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.
|
|
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.
|
|
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;
|
package/dist/src/sub/DynamicLayout/mobile/sections/ContentsSection/templates/TemplateA/TemplateA.js
CHANGED
|
@@ -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: "
|
|
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.
|
|
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.
|
|
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;
|
package/dist/src/sub/DynamicLayout/mobile/sections/ContentsSection/templates/TemplateB/TemplateB.js
CHANGED
|
@@ -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: "
|
|
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.
|
|
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;
|
package/dist/src/sub/DynamicLayout/mobile/sections/FooterSection/templates/TemplateA/TemplateA.js
CHANGED
|
@@ -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 :
|
|
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;
|
package/dist/src/sub/DynamicLayout/mobile/sections/FooterSection/templates/TemplateB/TemplateB.js
CHANGED
|
@@ -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 :
|
|
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;
|
package/dist/src/sub/DynamicLayout/mobile/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: "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: "
|
|
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",
|
|
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.
|
|
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
package/release-note.md
CHANGED
|
@@ -1,20 +1,19 @@
|
|
|
1
1
|
# PDS-DEV-KIT-WEB-TEST Release Notes
|
|
2
|
-
## [v0.0.
|
|
2
|
+
## [v0.0.16]
|
|
3
3
|
|
|
4
4
|
* sub
|
|
5
5
|
* DynamicLayout 디자인 디테일 수정
|
|
6
6
|
* desktop
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
7
|
+
* ContentSheet 타이틀 사이즈 48px 수정
|
|
8
|
+
* Footer -> 위아래 마진값 원래 값으로 돌리기 (64px)
|
|
9
|
+
* 캐러셀 섹션
|
|
10
|
+
* 아이템 제목과 본문 사이 간격 24px -> 12px
|
|
11
|
+
* 아이템 제목 styleTheme : subTitleBold로 적용
|
|
12
|
+
* 인포박스 섹션
|
|
13
|
+
* 아이템 타이틀 customFontSize : 22px로 적용
|
|
14
|
+
* 아이템 본문 styleTheme : body2Regular 적용
|
|
11
15
|
* mobile
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
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
|
+
* 푸터 위아래 마진값 원래 값으로 돌리기
|