pds-dev-kit-web 2.1.23 → 2.1.25

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

@@ -75,6 +75,9 @@ exports.customSectionMock1 = {
     template: undefined,
     updatedAt: '2023-01-06T09:05:45',
     jsonProperties: {
+        CB_CONTENT_PROP_SECTION: {
+            CB_CONTENT_PROP_SECTION_SPEC_VARIABLEROOTFONTSIZE: true
+        },
         CB_CONTENT_PROP_VISIBILITY: {
             CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP: true,
             CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB: true

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

@@ -488,7 +488,7 @@ exports.pages0803PreviewSections = [
                     CB_CONTENT_PROP_HOVER_SPEC_MUSE: false
                 },
                 CB_CONTENT_PROP_SECTION: {
-                    CB_CONTENT_PROP_SECTION_SPEC_VARIABLEROOTFONTSIZE: false
+                    CB_CONTENT_PROP_SECTION_SPEC_VARIABLEROOTFONTSIZE: true
                 },
                 CB_CONTENT_PROP_VISIBILITY: {
                     CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP: true,

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

@@ -61,19 +61,20 @@ var GLE_MIN_WIDTH_MOBILE_PX = "".concat(GRID_CELL_MIN * MOBILE_GRID_COLS, "px");
 function CustomSection(props) {
     var _a = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _a.device, editingSectionId = _a.editingSectionId, mode = _a.mode, sectionActionHandler = _a.sectionActionHandler;
     var componentBlocks = props.componentBlocks, jsonProperties = props.jsonProperties;
-    var _b = jsonProperties, CB_PLACEMENT_PROP_SECTION = _b.CB_PLACEMENT_PROP_SECTION, CB_LAYOUT_PROP_PADDING = _b.CB_LAYOUT_PROP_PADDING;
+    var _b = jsonProperties, CB_PLACEMENT_PROP_SECTION = _b.CB_PLACEMENT_PROP_SECTION, CB_LAYOUT_PROP_PADDING = _b.CB_LAYOUT_PROP_PADDING, CB_CONTENT_PROP_SECTION = _b.CB_CONTENT_PROP_SECTION;
     var _c = (0, react_1.useState)(null), selectedCB = _c[0], setSelectedCB = _c[1];
     var gleRef = (0, react_1.useRef)(null);
     var _d = (0, react_1.useState)(50), rowHeight = _d[0], setRowHeight = _d[1];
+    var _e = (0, react_1.useState)(16), baseFontSize = _e[0], setBaseFontSize = _e[1];
     var isMobile = device === 'MOBILE';
     var isEditMode = mode === 'EDIT';
-    var _e = (0, react_1.useState)(function () {
+    var _f = (0, react_1.useState)(function () {
         var _a = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : []), lg = _a.lg, sm = _a.sm;
         return {
             lg: lg,
             sm: sm
         };
-    }), layouts = _e[0], setLayouts = _e[1];
+    }), layouts = _f[0], setLayouts = _f[1];
     (0, react_1.useEffect)(function () {
         var _a = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : []), lg = _a.lg, sm = _a.sm;
         setLayouts({ lg: lg, sm: sm });
@@ -83,10 +84,10 @@ function CustomSection(props) {
             setSelectedCB(null);
         }
     }, [editingSectionId]);
-    var _f = (0, util_1.parseCustomSectionPlacement)({
+    var _g = (0, util_1.parseCustomSectionPlacement)({
         isMobile: isMobile,
         customSectionProps: CB_PLACEMENT_PROP_SECTION
-    }), rows = _f.rows, width = _f.width, minHeight = _f.minHeight, isFullWidth = _f.isFullWidth;
+    }), rows = _g.rows, width = _g.width, minHeight = _g.minHeight, isFullWidth = _g.isFullWidth;
     var customSectionStyles = {
         minHeight: "".concat(minHeight, "vh"),
         width: isFullWidth ? '100%' : "".concat(width, "px")
@@ -165,13 +166,18 @@ function CustomSection(props) {
             });
     };
     var onWidthChange = function (width) {
+        var responsiveFontMode = 
+        // NOTE: local환경에서 CB_CONTENT_PROP_SECTION이 없는 경우가 있음.
+        !!(CB_CONTENT_PROP_SECTION === null || CB_CONTENT_PROP_SECTION === void 0 ? void 0 : CB_CONTENT_PROP_SECTION.CB_CONTENT_PROP_SECTION_SPEC_VARIABLEROOTFONTSIZE);
         if (device === 'MOBILE') {
             var cellWidth_1 = width / MOBILE_GRID_COLS;
             setRowHeight(cellWidth_1 * 0.56);
+            baseFontSize !== 16 && setBaseFontSize(16);
             return;
         }
         var cellWidth = width / DESKTOP_GRID_COLS;
         setRowHeight(cellWidth * 0.56);
+        responsiveFontMode ? setBaseFontSize(cellWidth / 2.35) : setBaseFontSize(16);
     };
     var padding = (0, parseSectionPadding_1.default)(CB_LAYOUT_PROP_PADDING, device);
     var breakpoints = device === 'DESKTOP' ? { lg: 100, sm: 0 } : { lg: 1200, sm: 480 };
@@ -183,7 +189,8 @@ function CustomSection(props) {
                         paddingLeft: padding.left
                     } }, { children: (0, jsx_runtime_1.jsx)(Responsive, __assign({ allowOverlap: true, layouts: { lg: layouts.lg, sm: layouts.sm }, resizeHandles: ['nw', 'e', 'n', 'ne', 's', 'se', 'sw', 'w'], breakpoints: breakpoints, breakpoint: breakpoint, cols: { lg: 24, sm: 8 }, rowHeight: rowHeight, margin: [10, 10], style: {
                             width: customSectionStyles.width,
-                            minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX
+                            minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX,
+                            fontSize: "".concat(baseFontSize, "px")
                         }, onLayoutChange: onLayoutChange, onDragStop: onDragStop, onResizeStop: onResizeStop, onWidthChange: onWidthChange, minNbRow: rows, isDraggable: isEditMode, isResizable: isEditMode }, { children: (componentBlocks === null || componentBlocks === void 0 ? void 0 : componentBlocks.length) ? (componentBlocks.map(function (each) { return ((0, jsx_runtime_1.jsx)("div", __assign({ className: selectedCB === each.id ? 'react-grid-item-selected' : '' }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
                                     width: '100%',
                                     height: '100%'

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Button/Button.js

@@ -10,6 +10,17 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -37,7 +48,7 @@ function Button(props) {
     }), onClickCLINK = _c.onClickCLINK, CLINKCursor = _c.CLINKCursor;
     var _d = getBTNStyles(props.CB_STYLE_PROP_BTNTEXT, device), btnTextStyle = _d.style, btnTextHoverStyle = _d.hoverStyle;
     var _e = getBTNColorStyles(CB_STYLE_PROP_BTNCOLOR, device), btnColorStyle = _e.style, btnColorHoverStyle = _e.hoverStyle;
-    var _f = (0, util_1.parseProperties)(props, device), propsStyle = _f.style, propsHoverStyle = _f.hoverStyle, layoutStyle = _f.layout, effect = _f.effect;
+    var _f = (0, util_1.parseProperties)(props, device), propsStyle = _f.style, propsHoverStyle = _f.hoverStyle, _g = _f.layout, paddingLeft = _g.paddingLeft, paddingRight = _g.paddingRight, paddingTop = _g.paddingTop, paddingBottom = _g.paddingBottom, layoutStyle = __rest(_g, ["paddingLeft", "paddingRight", "paddingTop", "paddingBottom"]), effect = _f.effect;
     var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
     if (mode === 'EDIT') {
         propsStyle.visibility = 'visible';
@@ -49,7 +60,12 @@ function Button(props) {
     var hasEffect = props.CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE !== 'NONE' &&
         props.CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] !== 'NONE';
     var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign(__assign({}, btnTextStyle), propsStyle), layoutStyle), effectCssProperties), btnColorStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor }), hoverStyle: __assign(__assign(__assign(__assign({}, btnTextHoverStyle), propsHoverStyle), btnColorHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT })) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle, style: {
+                    paddingLeft: paddingLeft,
+                    paddingRight: paddingRight,
+                    paddingBottom: paddingBottom,
+                    paddingTop: paddingTop
+                } }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign(__assign({}, btnTextStyle), propsStyle), layoutStyle), effectCssProperties), btnColorStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor }), hoverStyle: __assign(__assign(__assign(__assign({}, btnTextHoverStyle), propsHoverStyle), btnColorHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT })) }))] }));
 }
 function getBTNStyles(props, device) {
     var availableSpecCodes = [

package/dist/src/sub/DynamicLayout/sections/CustomSection/newUtils/textUtil.js

@@ -66,14 +66,17 @@ function parseStyleTextToCSSProp(_a) {
         }
         if (cssPropertyKey === 'fontSize') {
             if (hoverValue === null || hoverValue === undefined) {
+                var emValue_1 = getEmFontSize(device, value);
                 return {
-                    style: __assign(__assign({}, acc.style), (_k = {}, _k[cssPropertyKey] = "".concat(value, "px"), _k)),
+                    style: __assign(__assign({}, acc.style), (_k = {}, _k[cssPropertyKey] = emValue_1, _k)),
                     hoverStyle: __assign({}, acc.hoverStyle)
                 };
             }
+            var emValue = getEmFontSize(device, value);
+            var hoverEmValue = getEmFontSize(device, hoverValue);
             return {
-                style: __assign(__assign({}, acc.style), (_l = {}, _l[cssPropertyKey] = "".concat(value, "px"), _l)),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), (_m = {}, _m[cssPropertyKey] = "".concat(hoverValue, "px"), _m))
+                style: __assign(__assign({}, acc.style), (_l = {}, _l[cssPropertyKey] = emValue, _l)),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), (_m = {}, _m[cssPropertyKey] = hoverEmValue, _m))
             };
         }
         if (cssPropertyKey === 'HORIZONTAL') {
@@ -198,3 +201,9 @@ function getVerticalPositionValue(value) {
             return '';
     }
 }
+function getEmFontSize(device, size) {
+    if (device === 'DESKTOP') {
+        return "".concat((size / 16).toFixed(3), "em");
+    }
+    return "".concat((size / 16).toFixed(3), "em");
+}

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

@@ -295,6 +295,9 @@ export type IMembershipDisplay = {
     connectedMemberships: IConnectedMembership[];
 };
 export type ISectionJsonProperties = {
+    CB_CONTENT_PROP_SECTION: {
+        CB_CONTENT_PROP_SECTION_SPEC_VARIABLEROOTFONTSIZE: boolean;
+    };
     CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
     CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
     CB_LAYOUT_PROP_PADDING?: CB_LAYOUT_PROP_PADDING_SPECS;

package/package.json

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

package/release-note.md

@@ -1,6 +1,7 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.1.23]
-## daily|https://design.storybook.publ.biz/
+## [v2.1.25]
+## urgent|https://design.storybook.publ.biz/
 
-### package
-* typescript 버전을 4.9.5로 업그레이드
+### sub
+* DynamicLayout - custom section
+    * mobile 기준폰트 14px에서 16px로 변경