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

package/dist/src/sub/DynamicLayout/mobile/sections/FooterSection/templates/TemplateB/TemplateB.js

@@ -57,15 +57,12 @@ function TemplateB() {
             react_1.default.createElement(Item_1.Item.Image, { ratio: "auto", height: 48, scaleType: "fill", src: filteredItems[0].properties.logoImageSrc }))),
         filteredItems[0].properties.body && (react_1.default.createElement(Item_1.Item.HTMLReader, { data: filteredItems[0].properties.body, styleTheme: "caption1Regular", color: itemDescriptionColorInHex, textAlign: "center" }))))));
 }
-var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: ", " ", ";\n  ", "\n"], ["\n  margin: ", " ", ";\n  ", "\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingG;
+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) {
+    var hasNothing = _a.hasNothing;
+    return (hasNothing ? 0 : '80px');
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
-}, function (_a) {
-    var hasNothing = _a.hasNothing;
-    return hasNothing && "margin: 0";
 });
 var S_ImageBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __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) {
     var theme = _a.theme;

package/dist/src/sub/DynamicLayout/mobile/sections/InfoBoxSection/templates/TemplateA/TemplateA.js

@@ -54,9 +54,9 @@ function TemplateA() {
         : [];
     var hasNothing = !title && !description && !buttonAlphaLinkSrc && filteredItems.length <= 0;
     return (react_1.default.createElement(S_ContentsArea, { hasNothing: hasNothing },
-        title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", styleTheme: "displayBold" })),
+        title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold" })),
         description && (react_1.default.createElement(S_SectionDescriptionBox, null,
-            react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", styleTheme: "body1Bold" }))),
+            react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "20px", customFontWeight: "bold" }))),
         filteredItems.length > 0 && (react_1.default.createElement(S_ItemsWrapper, null, filteredItems.map(function (item, index) {
             var id = item.id;
             var _a = item.properties, itemTitle = _a.title, itemDescription = _a.description, itemImageSrc = _a.imageSrc;
@@ -71,15 +71,12 @@ function TemplateA() {
         buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, null,
             react_1.default.createElement(Section_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex })))));
 }
-var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: ", " ", ";\n  ", "\n"], ["\n  margin: ", " ", ";\n  ", "\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingG;
+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) {
+    var hasNothing = _a.hasNothing;
+    return (hasNothing ? 0 : '80px');
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
-}, function (_a) {
-    var hasNothing = _a.hasNothing;
-    return hasNothing && 'margin: 0';
 });
 var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: ", " 0;\n"], ["\n  margin: ", " 0;\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/sub/DynamicLayout/mobile/sections/IntroSection/templates/TemplateA/TemplateA.js

@@ -35,9 +35,17 @@ function TemplateA() {
     var _b = context.styles, titleColorInHex = _b.titleColorInHex, descriptionColorInHex = _b.descriptionColorInHex;
     var _c = context.properties, buttonAlphaLabel = _c.buttonAlphaLabel, buttonAlphaLinkSrc = _c.buttonAlphaLinkSrc, buttonAlphaLinkType = _c.buttonAlphaLinkType, buttonBravoLabel = _c.buttonBravoLabel, buttonBravoLinkSrc = _c.buttonBravoLinkSrc, buttonBravoLinkType = _c.buttonBravoLinkType, buttonCharlieLabel = _c.buttonCharlieLabel, buttonCharlieLinkSrc = _c.buttonCharlieLinkSrc, buttonCharlieLinkType = _c.buttonCharlieLinkType;
     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;
-    return (react_1.default.createElement(S_FullScreenWrapper, null,
+    var _e = (0, react_1.useState)(window.innerHeight * 0.01), vh = _e[0], setVH = _e[1];
+    var handleResize = function () {
+        setVH(window.innerHeight * 0.01);
+    };
+    (0, react_1.useEffect)(function () {
+        window.addEventListener('resize', handleResize);
+        return function () { return window.removeEventListener('resize', handleResize); };
+    }, []);
+    return (react_1.default.createElement(S_FullScreenWrapper, { vh: vh },
         react_1.default.createElement(S_ContentsArea, null,
-            title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "40px", customFontWeight: "bold" })),
+            title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "40px", customFontWeight: "bold", lineHeight: 1.2 })),
             description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
                 react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", styleTheme: "body1Bold" }))),
             (buttonAlphaLinkSrc || buttonBravoLinkSrc || buttonCharlieLinkSrc) && (react_1.default.createElement(S_SectionButtonBox, { hasTitle: !!title, hasDescription: !!description },
@@ -45,7 +53,10 @@ function TemplateA() {
                 buttonBravoLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonBravoLabel, src: buttonBravoLinkSrc, linkType: buttonBravoLinkType, buttonType: buttonBravoDesignType, backgroundColor: buttonBravoBackgroundColorInHex, textColor: buttonBravoLabelColorInHex, borderColor: buttonBravoLabelColorInHex })),
                 buttonCharlieLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonCharlieLabel, src: buttonCharlieLinkSrc, linkType: buttonCharlieLinkType, buttonType: buttonCharlieDesignType, backgroundColor: buttonCharlieBackgroundColorInHex, textColor: buttonCharlieLabelColorInHex, borderColor: buttonCharlieLabelColorInHex })))))));
 }
-var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  min-height: 100vh;\n  display: flex;\n  align-items: center;\n"], ["\n  width: 100%;\n  min-height: 100vh;\n  display: flex;\n  align-items: center;\n"])));
+var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  min-height: calc(100vh - 56px); // fallback\n  min-height: calc(", "px - 56px);\n  display: flex;\n  align-items: center;\n"], ["\n  width: 100%;\n  min-height: calc(100vh - 56px); // fallback\n  min-height: calc(", "px - 56px);\n  display: flex;\n  align-items: center;\n"])), function (_a) {
+    var vh = _a.vh;
+    return vh * 100;
+});
 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) {
     var theme = _a.theme;
     return theme.spacing.spacingG;

package/dist/src/sub/DynamicLayout/mobile/sections/IntroSection/templates/TemplateB/TemplateB.js

@@ -35,9 +35,17 @@ function TemplateB() {
     var _b = context.styles, titleColorInHex = _b.titleColorInHex, descriptionColorInHex = _b.descriptionColorInHex;
     var _c = context.properties, buttonAlphaLabel = _c.buttonAlphaLabel, buttonAlphaLinkSrc = _c.buttonAlphaLinkSrc, buttonAlphaLinkType = _c.buttonAlphaLinkType, buttonBravoLabel = _c.buttonBravoLabel, buttonBravoLinkSrc = _c.buttonBravoLinkSrc, buttonBravoLinkType = _c.buttonBravoLinkType, buttonCharlieLabel = _c.buttonCharlieLabel, buttonCharlieLinkSrc = _c.buttonCharlieLinkSrc, buttonCharlieLinkType = _c.buttonCharlieLinkType;
     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;
-    return (react_1.default.createElement(S_FullScreenWrapper, null,
+    var _e = (0, react_1.useState)(window.innerHeight * 0.01), vh = _e[0], setVH = _e[1];
+    var handleResize = function () {
+        setVH(window.innerHeight * 0.01);
+    };
+    (0, react_1.useEffect)(function () {
+        window.addEventListener('resize', handleResize);
+        return function () { return window.removeEventListener('resize', handleResize); };
+    }, []);
+    return (react_1.default.createElement(S_FullScreenWrapper, { vh: vh },
         react_1.default.createElement(S_ContentsArea, null,
-            title && react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, styleTheme: "headingBold" }),
+            title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, styleTheme: "headingBold", lineHeight: 1.2 })),
             description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
                 react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, styleTheme: "body2Bold" }))),
             (buttonAlphaLinkSrc || buttonBravoLinkSrc || buttonCharlieLinkSrc) && (react_1.default.createElement(S_SectionButtonBox, { hasTitle: !!title, hasDescription: !!description },
@@ -45,7 +53,10 @@ function TemplateB() {
                 buttonBravoLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonBravoLabel, src: buttonBravoLinkSrc, linkType: buttonBravoLinkType, buttonType: buttonBravoDesignType, backgroundColor: buttonBravoBackgroundColorInHex, textColor: buttonBravoLabelColorInHex, borderColor: buttonBravoLabelColorInHex })),
                 buttonCharlieLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonCharlieLabel, src: buttonCharlieLinkSrc, linkType: buttonCharlieLinkType, buttonType: buttonCharlieDesignType, backgroundColor: buttonCharlieBackgroundColorInHex, textColor: buttonCharlieLabelColorInHex, borderColor: buttonCharlieLabelColorInHex })))))));
 }
-var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  min-height: 100vh;\n  display: flex;\n  align-items: flex-end;\n"], ["\n  width: 100%;\n  min-height: 100vh;\n  display: flex;\n  align-items: flex-end;\n"])));
+var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  min-height: calc(100vh - 56px); // fallback\n  min-height: calc(", "px - 56px);\n  display: flex;\n  align-items: flex-end;\n"], ["\n  width: 100%;\n  min-height: calc(100vh - 56px); // fallback\n  min-height: calc(", "px - 56px);\n  display: flex;\n  align-items: flex-end;\n"])), function (_a) {
+    var vh = _a.vh;
+    return vh * 100;
+});
 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) {
     var theme = _a.theme;
     return theme.spacing.spacingG;

package/dist/src/sub/DynamicLayout/mobile/sections/IntroSection/templates/TemplateC/TemplateC.js

@@ -37,7 +37,7 @@ function TemplateC() {
     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;
     return (react_1.default.createElement(S_FullScreenWrapper, null,
         react_1.default.createElement(S_ContentsArea, null,
-            title && react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, styleTheme: "displayBold" }),
+            title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, styleTheme: "displayBold", lineHeight: 1.2 })),
             description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
                 react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, styleTheme: "body1Bold" }))),
             (buttonAlphaLinkSrc || buttonBravoLinkSrc || buttonCharlieLinkSrc) && (react_1.default.createElement(S_SectionButtonBox, { hasTitle: !!title, hasDescription: !!description },

package/dist/src/sub/DynamicLayout/mobile/sections/IntroSection/templates/TemplateD/TemplateD.js

@@ -37,7 +37,7 @@ function TemplateD() {
     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;
     return (react_1.default.createElement(S_FullScreenWrapper, null,
         react_1.default.createElement(S_ContentsArea, null,
-            title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", styleTheme: "displayBold" })),
+            title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", styleTheme: "displayBold", lineHeight: 1.2 })),
             description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
                 react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", styleTheme: "body1Bold" }))),
             (buttonAlphaLinkSrc || buttonBravoLinkSrc || buttonCharlieLinkSrc) && (react_1.default.createElement(S_SectionButtonBox, { hasTitle: !!title, hasDescription: !!description },

package/dist/src/sub/DynamicLayout/types.js

@@ -29,7 +29,7 @@ exports.MOCK_DATA = [
             buttonEchoLinkType: 'NONE',
             buttonEchoLinkSrc: '',
             carouselAutoplayMode: 'AUTO',
-            carouselAutoplayTime: 5,
+            carouselAutoplayTime: 1,
             carouselInfiniteLoopMode: 'USE'
         },
         styles: {
@@ -89,7 +89,7 @@ exports.MOCK_DATA = [
             buttonEchoLinkType: 'INTERNAL_LINK',
             buttonEchoLinkSrc: '',
             carouselAutoplayMode: 'AUTO',
-            carouselAutoplayTime: 5,
+            carouselAutoplayTime: 1,
             carouselInfiniteLoopMode: 'USE'
         },
         styles: {
@@ -153,7 +153,7 @@ exports.MOCK_DATA = [
             buttonEchoLinkType: 'NONE',
             buttonEchoLinkSrc: '',
             carouselAutoplayMode: 'AUTO',
-            carouselAutoplayTime: 5,
+            carouselAutoplayTime: 1,
             carouselInfiniteLoopMode: 'USE'
         },
         styles: {
@@ -394,7 +394,7 @@ exports.MOCK_DATA = [
             buttonEchoLinkType: 'INTERNAL_LINK',
             buttonEchoLinkSrc: '',
             carouselAutoplayMode: 'AUTO',
-            carouselAutoplayTime: 5,
+            carouselAutoplayTime: 1,
             carouselInfiniteLoopMode: 'USE'
         },
         styles: {
@@ -495,7 +495,7 @@ exports.MOCK_DATA = [
             buttonEchoLinkType: 'INTERNAL_LINK',
             buttonEchoLinkSrc: '',
             carouselAutoplayMode: 'AUTO',
-            carouselAutoplayTime: 5,
+            carouselAutoplayTime: 1,
             carouselInfiniteLoopMode: 'USE'
         },
         styles: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/release-note.md

@@ -1,5 +1,20 @@
 # PDS-DEV-KIT-WEB-TEST Release Notes
-## [v0.0.13]
+## [v0.0.15]
 
 * sub
-  * DynamicLayout 생성
+  * DynamicLayout 디자인 디테일 수정
+    * desktop
+      * Intro 섹션 타이틀 line-height 1.2
+      * Intro 제외 섹션 타이틀 line-height 1.3
+      * Intro 제외 섹션 타이틀 사이즈 48px로 일괄 적용
+      * Intro 제외 섹션과 콘텐츠 영역 상하단 margin 80px -> 160px으로 수정
+    * mobile
+      * Intro 섹션 타이틀 line-height 1.2
+      * Intro 제외 섹션 타이틀 line-height 1.4
+      * Intro 제외 섹션 타이틀 사이즈 32px로 일괄 적용
+      * Intro 제외 섹션 본문 bold 일괄 적용
+      * Intro 제외 섹션 본문 customFontSize : 20px
+      * Intro 제외 섹션과 콘텐츠 영역 상하단 margin 48px -> 80px으로 수정
+      * Content Section
+      * 이미지와 텍스트 사이 24px -> 48px
+      * 콘텐츠와 인디케이터 사이 간격 확인 / 인티케이터 하단 마진 조정 필요