pds-dev-kit-web-test 2.4.71 → 2.5.2

package/dist/src/desktop/components/UserDesktopTabBar/UserDesktopTabBar.js

@@ -52,7 +52,15 @@ function UserDesktopTabBar(_a) {
                 item.onClick(e);
             }
         };
-        return ((0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "UserDesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: itemArray.map(function (item, index) { return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ isActive: item.isActive, styleTheme: styleTheme, text: item.title, onClick: function (e) { return handleClickTabItem_1(item, e); } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'body2Bold' : 'body2Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }) }), index)); }) })));
+        return ((0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "UserDesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop", styleTheme: styleTheme }, { children: itemArray.map(function (item, index) {
+                if (styleTheme === 'content') {
+                    return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ isActive: item.isActive, styleTheme: "content", text: item.title, onClick: function (e) { return handleClickTabItem_1(item, e); } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "headingBold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }) }), index));
+                }
+                if (styleTheme === 'content2') {
+                    return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ isActive: item.isActive, styleTheme: "content2", text: item.title, onClick: function (e) { return handleClickTabItem_1(item, e); } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "leadParaBold", colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }) }), index));
+                }
+                return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ isActive: item.isActive, styleTheme: styleTheme, text: item.title, onClick: function (e) { return handleClickTabItem_1(item, e); } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'body2Bold' : 'body2Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }) }), index));
+            }) })));
     }
     if (textArray) {
         var handleClick_1 = function (value) {
@@ -60,7 +68,7 @@ function UserDesktopTabBar(_a) {
                 history.push(value.path);
             }
         };
-        return ((0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "UserDesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: textArray.map(function (item) { return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ styleTheme: styleTheme, isActive: pathname === item.path, onClick: function () {
+        return ((0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "UserDesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop", styleTheme: styleTheme }, { children: textArray.map(function (item) { return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ styleTheme: styleTheme, isActive: pathname === item.path, onClick: function () {
                     handleClick_1(item);
                 } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, styleTheme: pathname === item.path ? 'body2Bold' : 'body2Regular', colorTheme: pathname === item.path ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }) }), item.path)); }) })));
     }
@@ -75,7 +83,11 @@ var S_TabWrapper = styled_components_1.default.div(templateObject_2 || (template
     var styleTheme = _a.styleTheme;
     switch (styleTheme) {
         case 'main':
-            return mainStyle; // TODO : 추후 styleTheme 의 enum 값이 추가되면 수정
+            return mainStyle;
+        case 'content':
+            return contentStyle;
+        case 'content2':
+            return content2Style;
         default:
             return mainStyle;
     }
@@ -99,12 +111,51 @@ var mainStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject
     var isActive = _a.isActive;
     return !isActive && "display: none;";
 });
-var S_TabBar = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: 48px;\n  justify-content: center;\n"], ["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: 48px;\n  justify-content: center;\n"])), function (_a) {
+var contentStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n  margin-right: ", ";\n  position: relative;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n  margin-right: ", ";\n  position: relative;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"])), function (_a) {
+    var isActive = _a.isActive, theme = _a.theme;
+    return isActive && theme.ui_cpnt_tabbar_base_area;
+}, function (_a) {
     var theme = _a.theme;
-    return theme.ui_cpnt_tabbar_base_area;
+    return theme.spacing.spacingF;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_19;
+}, function (_a) {
+    var isActive = _a.isActive;
+    return !isActive && "display: none;";
+});
+var content2Style = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n  height: 48px;\n  margin-right: ", ";\n  padding: ", ";\n  position: relative;\n\n  ", "\n\n  &:last-child {\n    margin-right: 0;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n  height: 48px;\n  margin-right: ", ";\n  padding: ", ";\n  position: relative;\n\n  ", "\n\n  &:last-child {\n    margin-right: 0;\n  }\n"])), function (_a) {
+    var isActive = _a.isActive, theme = _a.theme;
+    return isActive ? theme.ui_123 : theme.ui_cpnt_sheet_base_03;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingC;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.ui_cpnt_divider;
+    return "0 ".concat(theme.spacing.spacingD);
+}, function (_a) {
+    var isActive = _a.isActive;
+    return isActive && "border-radius: 24px;";
+});
+var S_TabBar = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: ", ";\n  background-color: ", ";\n  border-bottom: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: ", ";\n  justify-content: center;\n"], ["\n  align-items: ", ";\n  background-color: ", ";\n  border-bottom: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: ", ";\n  justify-content: center;\n"])), function (_a) {
+    var styleTheme = _a.styleTheme;
+    return styleTheme === 'content2' && 'center';
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_tabbar_base_area;
+}, function (_a) {
+    var styleTheme = _a.styleTheme, theme = _a.theme;
+    return styleTheme !== 'content2' && "1px solid ".concat(theme.ui_cpnt_divider);
+}, function (_a) {
+    var styleTheme = _a.styleTheme;
+    switch (styleTheme) {
+        case 'content':
+            return '64px';
+        case 'content2':
+            return '96px';
+        default:
+            return '48px';
+    }
 });
 exports.default = UserDesktopTabBar;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -26,7 +26,20 @@ var SectionMatcher_1 = require("./components/SectionMatcher");
 var dynamicLayoutContext_1 = require("./dynamicLayoutContext");
 function DynamicLayout(_a) {
     var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, navigationHandler = _a.navigationHandler, sectionActionHandler = _a.sectionActionHandler, onClickEditSection = _a.onClickEditSection, programmedSectionComponents = _a.programmedSectionComponents, shortcutKeyMode = _a.shortcutKeyMode, dynamicLayoutRef = _a.dynamicLayoutRef;
-    var filteredSortedSection = __spreadArray([], sections, true).filter(function (section) { return section.display; })
+    var filteredSortedSection = __spreadArray([], sections, true).filter(function (section) {
+        var _a;
+        if (!section.display) {
+            return false;
+        }
+        if (section.type === 'CUSTOM' && mode !== 'EDIT') {
+            var deviceKey = device === 'DESKTOP'
+                ? 'CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP'
+                : 'CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB';
+            var isVisible = (_a = section.jsonProperties) === null || _a === void 0 ? void 0 : _a.data.CB_CONTENT_PROP_VISIBILITY[deviceKey];
+            return isVisible;
+        }
+        return true;
+    })
         .sort(function (a, b) { return a.order - b.order; });
     var iframeSection = filteredSortedSection.find(function (section) { return section.manifest.schema === 'EXP_IFRAME' && section.display; });
     return ((0, jsx_runtime_1.jsxs)(dynamicLayoutContext_1.dynamicLayoutContext.Provider, __assign({ value: {

package/dist/src/sub/DynamicLayout/components/SectionMatcher/SectionMatcher.js

@@ -21,17 +21,13 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var FlexGridCustomSection_1 = __importDefault(require("../../../DynamicLayout/sections/CustomSection/FlexGridCustomSection"));
 var sections_1 = require("../../sections");
 function SectionMatcher(_a) {
     var props = __rest(_a, []);
     if (props.type === 'CUSTOM') {
-        return (0, jsx_runtime_1.jsx)(FlexGridCustomSection_1.default, __assign({}, props));
+        return (0, jsx_runtime_1.jsx)(sections_1.CustomSection, __assign({}, props));
     }
     var schema = props.manifest.schema;
     switch (schema) {

package/dist/src/sub/DynamicLayout/components/YouTubeIframe/YouTubeIframe.js

@@ -125,6 +125,7 @@ function YouTubeIframe(_a) {
                 disablekb: 1,
                 playlist: videoId,
                 start: startSeconds
+                // rel: 0
             };
             var player = new window.YT.Player(PLAYER_ID, {
                 videoId: videoId,
@@ -227,7 +228,7 @@ function YouTubeIframe(_a) {
             youtubeScript === null || youtubeScript === void 0 ? void 0 : youtubeScript.remove();
         };
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isYoutubeLoading && (0, jsx_runtime_1.jsx)(BlackScreen, {}), (0, jsx_runtime_1.jsx)(S_IframeWrapper, { children: (0, jsx_runtime_1.jsx)("div", { id: PLAYER_ID }) })] }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(S_IframeWrapper, { children: (0, jsx_runtime_1.jsx)("div", { id: PLAYER_ID }) }) }));
 }
 var BlackScreen = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n"], ["\n  background-color: ", ";\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/sub/DynamicLayout/mock_samplePage.d.ts

@@ -1,4 +1,5 @@
 import type { ISection } from './types';
+export declare const youtubeBgSection: any;
 export declare const samplePageIntroSection: ISection;
 export declare const samplePageContentsCarouselSection: ISection;
 export declare const samplePageIntroSection2: ISection;