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

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

@@ -54,7 +54,7 @@ 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", customFontSize: "32px", customFontWeight: "bold" })),
+        title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold", lineHeight: 1.3 })),
         description && (react_1.default.createElement(S_SectionDescriptionBox, null,
             react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "18px", fontWeight: "600" }))),
         filteredItems.length > 0 && (react_1.default.createElement(S_ItemsWrapper, null, filteredItems.map(function (item, index) {
@@ -64,9 +64,9 @@ function TemplateA() {
                 react_1.default.createElement(Item_1.Item, __assign({}, item),
                     itemImageSrc && (react_1.default.createElement(S_ItemImageBox, null,
                         react_1.default.createElement(Item_1.Item.Image, { src: itemImageSrc, width: 80, ratio: "1_1", scaleType: "cover" }))),
-                    itemTitle && (react_1.default.createElement(Item_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, textAlign: "center" })),
+                    itemTitle && (react_1.default.createElement(Item_1.Item.Title, { text: itemTitle, color: itemTitleColorInHex, textAlign: "center", customFontSize: "20px", customFontWeight: "bold", lineHeight: 1.4 })),
                     itemDescription && (react_1.default.createElement(S_ItemDescriptionBox, null,
-                        react_1.default.createElement(Item_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, textAlign: "center", customFontSize: "15px" }))))));
+                        react_1.default.createElement(Item_1.Item.Description, { text: itemDescription, color: itemDescriptionColorInHex, textAlign: "center", styleTheme: "body2Regular" }))))));
         }))),
         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 })))));
@@ -82,18 +82,12 @@ var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_2 |
     var theme = _a.theme;
     return theme.spacing.spacingE;
 });
-var S_ItemsWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: ", " 0;\n"], ["\n  margin: ", " 0;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingG;
-});
+var S_ItemsWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 56px 0;\n"], ["\n  margin: 56px 0;\n"])));
 var S_ItemWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 40px 0;\n"], ["\n  margin: 40px 0;\n"])));
-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) {
-    var theme = _a.theme;
-    return theme.spacing.spacingC;
-});
+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"])));
 var S_ItemDescriptionBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin: ", " 0;\n"], ["\n  margin: ", " 0;\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingB;
+    return theme.spacing.spacingC;
 });
 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) {
     var theme = _a.theme;

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

@@ -30,7 +30,7 @@ var components_1 = require("../../components");
 var templates_1 = require("./templates");
 function IntroSection(_a) {
     var props = __rest(_a, []);
-    return (react_1.default.createElement(components_1.Section, __assign({}, props),
+    return (react_1.default.createElement(components_1.Section, __assign({ "x-dlayout-section-type": "Intro" }, props),
         react_1.default.createElement(TemplateMatcher, { styleTemplate: props.template })));
 }
 function TemplateMatcher(_a) {

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

@@ -45,7 +45,7 @@ function TemplateA() {
     }, []);
     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", lineHeight: 1.2 })),
+            title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "37px", customFontWeight: "bold", lineHeight: 1.3 })),
             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 },
@@ -57,7 +57,7 @@ var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (t
     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 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) {
     var theme = _a.theme;
     return theme.spacing.spacingG;
 }, function (_a) {

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

@@ -45,7 +45,7 @@ function TemplateB() {
     }, []);
     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", lineHeight: 1.2 })),
+            title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "37px", customFontWeight: "bold", lineHeight: 1.3 })),
             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 },
@@ -57,7 +57,7 @@ var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (t
     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 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) {
     var theme = _a.theme;
     return theme.spacing.spacingG;
 }, function (_a) {

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", lineHeight: 1.2 })),
+            title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "37px", customFontWeight: "bold", lineHeight: 1.3 })),
             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 },
@@ -46,7 +46,7 @@ function TemplateC() {
                 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: 80vh;\n  display: flex;\n  align-items: center;\n"], ["\n  width: 100%;\n  min-height: 80vh;\n  display: flex;\n  align-items: center;\n"])));
-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 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) {
     var theme = _a.theme;
     return theme.spacing.spacingG;
 }, function (_a) {

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", lineHeight: 1.2 })),
+            title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "37px", customFontWeight: "bold", lineHeight: 1.3 })),
             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 },
@@ -46,7 +46,7 @@ function TemplateD() {
                 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: 80vh;\n  display: flex;\n  align-items: center;\n"], ["\n  width: 100%;\n  min-height: 80vh;\n  display: flex;\n  align-items: center;\n"])));
-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) {
+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) {
     var theme = _a.theme;
     return theme.spacing.spacingG;
 }, function (_a) {

package/package.json

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

package/release-note.md

@@ -1,12 +1,24 @@
 # PDS-DEV-KIT-WEB-TEST Release Notes
-## [v0.0.17]
+## [v0.0.19]
 
 * sub
-  * DynamicLayout 유튜브쪽 문제 해결
+  * DynamicLayout 유튜브 배경의 비율 조정 (세로로 긴 섹션에서 제대로 표시되지 않는 이슈 픽스)
   * DynamicLayout 디자인 디테일 수정
-    * mobile
-      * 캐러셀 섹션 2번 타입 아이템 본문이 보이지 않던 부분 수정
-      * 푸터 정렬이 제대로 안되는 이슈 수정
-      * 인포박스 아이템
-        * 제목과 본문사이 spacing-a -> spacing-b
-        * 아이템 사이 간격 spacing-e -> 40px
+    * mobile IntroSection 의 콘텐츠 영역의 넓이 조정 (띄어쓰기 없는 텍스트가 화면밖으로 넘어가는 이슈 픽스)
+    * desktop 콘텐츠 캐러셀 섹션 / 인포박스 섹션
+      * 섹션 본문
+      * 아이템 제목
+      * 아이템 이미지와 제목 사이 간격 spacing-d -> spacing-e로 수정
+    * desktop 콘텐트 섹션
+      * 섹션 본문
+    * mobile 인트로 섹션
+      * 섹션 제목
+    * mobile 콘텐츠 캐러셀 / 인포박스 섹션
+      * 섹션 제목
+      * 아이템 제목
+      * 아이템 본문
+      * 아이템 이미지와 제목 사이 간격 spacing-c -> 18px로 수정
+      * 아이템 제목과 아이템 본문 사이 간격 spacing-b -> spacing-c로 수정
+      * 섹션과 아이템 사이 간격 spacing-g -> 56px로 수정
+    * 콘텐트 섹션
+      * 섹션 제목

package/dist/src/sub/utils/YouTubeIframeHelper.d.ts

@@ -1,14 +0,0 @@
-export declare class YouTubeIframeHelper {
-    static players: {
-        id: string;
-        src: string;
-    }[];
-    static getReady(): void;
-    static cleanUp(): void;
-    static registerPlayer(playerId: string, src: string): void;
-    private static onYouTubeIframeAPIReady;
-    private static onPlayerReady;
-    private static onPlayerStateChange;
-    private static concealPlayer;
-    private static revealPlayer;
-}

package/dist/src/sub/utils/youtubeLinkParser.js

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var YoutubeLinkParser = /** @class */ (function () {
-    function YoutubeLinkParser() {
-    }
-    YoutubeLinkParser.getId = function (src) {
-        var _a;
-        var embedUrl = src.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/);
-        var shareUrl = src.match(/youtu.be\/(.{11})/);
-        return (_a = (embedUrl || shareUrl)) === null || _a === void 0 ? void 0 : _a.pop();
-    };
-    YoutubeLinkParser.getThumbnailUrl = function (src) {
-        return "https://img.youtube.com/vi/" + YoutubeLinkParser.getId(src) + "/0.jpg";
-    };
-    YoutubeLinkParser.getEmbedUrl = function (src) {
-        return "https://www.youtube.com/embed/" + YoutubeLinkParser.getId(src);
-    };
-    YoutubeLinkParser.getEmbedUrlWithLoop = function (src) {
-        return "https://www.youtube.com/embed/" + YoutubeLinkParser.getId(src) + "?autoplay=1&mute=1&loop=1&color=white&controls=0&modestbranding=1&playsinline=1&rel=0&playlist=" + this.getId(src);
-    };
-    return YoutubeLinkParser;
-}());
-exports.default = YoutubeLinkParser;