@fonixtree/magic-design 0.0.53 → 0.0.55

package/es/common/ImgArea/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _MultiCrops = require("./components/MultiCrops");
+
+var _default = _MultiCrops.MultiCrops;
+exports["default"] = _default;

package/es/common/index.js

@@ -63,6 +63,12 @@ Object.defineProperty(exports, "ImagePicker", {
     return _ImagePicker["default"];
   }
 });
+Object.defineProperty(exports, "ImgArea", {
+  enumerable: true,
+  get: function get() {
+    return _ImgArea["default"];
+  }
+});
 Object.defineProperty(exports, "LayoutSelector", {
   enumerable: true,
   get: function get() {
@@ -124,4 +130,6 @@ var _ButtonIconLayout = _interopRequireDefault(require("./ButtonIconLayout"));
 
 var _ProductSource = _interopRequireDefault(require("./ProductSource"));
 
+var _ImgArea = _interopRequireDefault(require("./ImgArea"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/es/composite-comp/bol/components/Banner/defaultJSON.js

@@ -43,7 +43,7 @@ var bannerGroupSourceJSON = function bannerGroupSourceJSON() {
       text: 'Title use, click modify text.',
       specialContent: [],
       content: {
-        // sizeType: 'Headline 1',
+        sizeType: 'Customize font styles',
         fontFamily: 'Open Sans',
         fontWeight: 700,
         fontSize: 28,
@@ -65,7 +65,7 @@ var bannerGroupSourceJSON = function bannerGroupSourceJSON() {
       specialContent: [],
       text: 'For the text area, you can enter a subtitle or description, the default width is the same as title.',
       content: {
-        // sizeType: 'Headline 1',
+        sizeType: 'Customize font styles',
         fontFamily: 'Open Sans',
         fontWeight: 400,
         fontSize: 18,
@@ -86,7 +86,7 @@ var bannerGroupSourceJSON = function bannerGroupSourceJSON() {
         backgroundColor: '#2F54EB'
       },
       buttonText: {
-        // sizeType: 'Headline 1',
+        sizeType: 'Customize font styles',
         fontFamily: 'Open Sans',
         fontWeight: 600,
         fontSize: 14,
@@ -122,7 +122,7 @@ var bannerGroupSourceJSON = function bannerGroupSourceJSON() {
           backgroundColor: '#0d39ed'
         },
         buttonText: {
-          // sizeType: 'Headline 1',
+          sizeType: 'Customize font styles',
           fontFamily: 'Open Sans',
           fontWeight: 600,
           fontSize: 14,
@@ -151,7 +151,7 @@ var bannerGroupSourceJSON = function bannerGroupSourceJSON() {
         backgroundColor: '#fff'
       },
       buttonText: {
-        // sizeType: 'Headline 1',
+        sizeType: 'Customize font styles',
         fontFamily: 'Open Sans',
         fontWeight: 600,
         fontSize: 14,
@@ -187,7 +187,7 @@ var bannerGroupSourceJSON = function bannerGroupSourceJSON() {
           backgroundColor: '#E9F0FF'
         },
         buttonText: {
-          // sizeType: 'Headline 1',
+          sizeType: 'Customize font styles',
           fontFamily: 'Open Sans',
           fontWeight: 600,
           fontSize: 14,
@@ -254,12 +254,12 @@ var getDefaultJSON = function getDefaultJSON() {
       pc: {
         paddingTop: 0,
         paddingBottom: 0,
-        marginBottom: 0
+        marginBottom: window.magicDesign.compSpacing * 1.5
       },
       mobile: {
         paddingTop: 0,
         paddingBottom: 0,
-        marginBottom: 0
+        marginBottom: window.magicDesign.compSpacing
       }
     }
   };

package/es/composite-comp/bol/components/Banner/mobile/index.js

@@ -21,8 +21,6 @@ var _AlignSelector = require("../../../../../common/AlignSelector");
 
 var _components = require("../../../../../meta-comp/components");
 
-var _businessUtil = require("../../../../../utils/businessUtil");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {
@@ -131,10 +129,8 @@ function (_super) {
       autoplay = false;
     }
 
-    var wrapStyle = (0, _businessUtil.computeStyle)(data, window.magicDesign.device);
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "m-banner-mobile",
-      style: wrapStyle
+      className: "m-banner-mobile"
     }, /*#__PURE__*/_react["default"].createElement(_antd.Carousel, {
       ref: this.carouselRef,
       afterChange: function afterChange(n) {

package/es/composite-comp/bol/components/Banner/pc/index.js

@@ -23,8 +23,6 @@ var _AlignSelector = require("../../../../../common/AlignSelector");
 
 var _common = require("../../../../../common");
 
-var _businessUtil = require("../../../../../utils/businessUtil");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {
@@ -174,10 +172,8 @@ function (_super) {
       autoplay = false;
     }
 
-    var wrapStyle = (0, _businessUtil.computeStyle)(data, window.magicDesign.device);
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "m-banner-pc",
-      style: wrapStyle
+      className: "m-banner-pc"
     }, data.setting.navigation.open && /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
       className: "turnPage leftBtn",
       onClick: function onClick() {

package/es/composite-comp/bol/components/Button/defaultJSON.js

@@ -90,12 +90,12 @@ var getDefaultJSON = function getDefaultJSON() {
       pc: {
         paddingTop: 10,
         paddingBottom: 10,
-        marginBottom: 0
+        marginBottom: window.magicDesign.compSpacing * 1.5
       },
       mobile: {
         paddingTop: 10,
         paddingBottom: 10,
-        marginBottom: 0
+        marginBottom: window.magicDesign.compSpacing
       }
     },
     customize: {

package/es/composite-comp/bol/components/Button/index.js

@@ -15,8 +15,6 @@ var _components = require("../../../../meta-comp/components");
 
 var _compositeDecorator = _interopRequireDefault(require("../../../../decorator/compositeDecorator"));
 
-var _businessUtil = require("../../../../utils/businessUtil");
-
 require("./index.less");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -76,11 +74,9 @@ function (_super) {
     var _a;
 
     var nodeData = this.props.nodeData;
-    var wrapStyle = (0, _businessUtil.computeStyle)(nodeData, window.magicDesign.device);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])('button-comp-wrap', (_a = {}, _a[nodeData.customize.layout] = true, _a[nodeData.customize.align] = true, _a)),
-      onClick: this.onComponentClick,
-      style: wrapStyle
+      onClick: this.onComponentClick
     }, nodeData.content.button.open && /*#__PURE__*/_react["default"].createElement("div", {
       className: "first-button"
     }, /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {

package/es/composite-comp/bol/components/Carousel/defaultJSON.js

@@ -7,10 +7,6 @@ exports.imagesGroupSourceJSON = exports.getDefaultJSON = void 0;
 
 var _uuid = require("uuid");
 
-var _defaultImg = _interopRequireDefault(require("./imgs/defaultImg.png"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 var imagesGroupSourceJSON = function imagesGroupSourceJSON(compId) {
   var groupId = (0, _uuid.v4)();
   return {
@@ -24,8 +20,8 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON(compId) {
       content: {
         h5Name: 'h5Name',
         pcName: 'pcName',
-        h5ImgSrc: _defaultImg["default"],
-        pcImgSrc: _defaultImg["default"],
+        h5ImgSrc: '',
+        pcImgSrc: '',
         clickUrl: ''
       },
       hover: {
@@ -44,7 +40,7 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON(compId) {
       specialContent: [],
       text: 'Title of this group',
       content: {
-        sizeType: 'Headline 1',
+        sizeType: 'Customize font styles',
         fontFamily: 'Open Sans',
         fontWeight: 600,
         fontSize: 16,
@@ -67,7 +63,7 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON(compId) {
       specialContent: [],
       text: 'Please enter a description',
       content: {
-        sizeType: 'Headline 1',
+        sizeType: 'Customize font styles',
         fontFamily: 'Open Sans',
         fontWeight: 400,
         fontSize: 14,
@@ -86,8 +82,8 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON(compId) {
       content: {
         h5Name: '',
         pcName: '',
-        h5ImgSrc: _defaultImg["default"],
-        pcImgSrc: _defaultImg["default"],
+        h5ImgSrc: '',
+        pcImgSrc: '',
         clickUrl: ''
       },
       hover: {
@@ -109,7 +105,7 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON(compId) {
         backgroundColor: '#E6EAF0'
       },
       buttonText: {
-        // sizeType: 'Headline 1',
+        sizeType: 'Customize font styles',
         fontFamily: 'Open Sans',
         fontWeight: 600,
         fontSize: 14,
@@ -145,7 +141,7 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON(compId) {
           backgroundColor: '#E6EAF0'
         },
         buttonText: {
-          // sizeType: 'Headline 1',
+          sizeType: 'Customize font styles',
           fontFamily: 'Open Sans',
           fontWeight: 600,
           fontSize: 14,
@@ -174,7 +170,7 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON(compId) {
         backgroundColor: '#E6EAF0'
       },
       buttonText: {
-        // sizeType: 'Headline 1',
+        sizeType: 'Customize font styles',
         fontFamily: 'Open Sans',
         fontWeight: 600,
         fontSize: 14,
@@ -210,7 +206,7 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON(compId) {
           backgroundColor: '#E6EAF0'
         },
         buttonText: {
-          // sizeType: 'Headline 1',
+          sizeType: 'Customize font styles',
           fontFamily: 'Open Sans',
           fontWeight: 600,
           fontSize: 14,
@@ -266,12 +262,12 @@ var getDefaultJSON = function getDefaultJSON() {
       pc: {
         paddingTop: 10,
         paddingBottom: 10,
-        marginBottom: 0
+        marginBottom: window.magicDesign.compSpacing * 1.5
       },
       mobile: {
         paddingTop: 10,
         paddingBottom: 10,
-        marginBottom: 0
+        marginBottom: window.magicDesign.compSpacing
       }
     },
     customize: {

package/es/composite-comp/bol/components/Carousel/index.js

@@ -15,8 +15,6 @@ var _defaultJSON = require("./defaultJSON");
 
 var _compositeDecorator = _interopRequireDefault(require("../../../../decorator/compositeDecorator"));
 
-var _businessUtil = require("../../../../utils/businessUtil");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -72,10 +70,7 @@ function (_super) {
 
   Carousel.prototype.render = function () {
     var nodeData = this.props.nodeData;
-    var wrapStyle = (0, _businessUtil.computeStyle)(nodeData, window.magicDesign.device);
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      style: wrapStyle
-    }, window.magicDesign.device === 'pc' ? /*#__PURE__*/_react["default"].createElement(_pc["default"], {
+    return /*#__PURE__*/_react["default"].createElement("div", null, window.magicDesign.device === 'pc' ? /*#__PURE__*/_react["default"].createElement(_pc["default"], {
       data: nodeData
     }) : /*#__PURE__*/_react["default"].createElement(_mobile["default"], {
       data: nodeData

package/es/composite-comp/bol/components/ImageGallery/defaultJSON.js

@@ -50,12 +50,12 @@ var getDefaultJSON = function getDefaultJSON() {
       pc: {
         paddingTop: 10,
         paddingBottom: 10,
-        marginBottom: 0
+        marginBottom: window.magicDesign.compSpacing * 1.5
       },
       mobile: {
         paddingTop: 10,
         paddingBottom: 10,
-        marginBottom: 0
+        marginBottom: window.magicDesign.compSpacing
       }
     },
     customize: {

package/es/composite-comp/bol/components/ImageText/defaultJSON.js

@@ -39,7 +39,7 @@ var ImageTextGroupSourceJSON = function ImageTextGroupSourceJSON() {
       specialContent: [],
       text: 'Title of this group',
       content: {
-        sizeType: 'Headline 1',
+        sizeType: 'Customize font styles',
         fontFamily: 'Open Sans',
         fontWeight: 600,
         fontSize: 12,
@@ -61,7 +61,7 @@ var ImageTextGroupSourceJSON = function ImageTextGroupSourceJSON() {
       specialContent: [],
       text: 'Please enter a description',
       content: {
-        sizeType: 'Headline 1',
+        sizeType: 'Customize font styles',
         fontFamily: 'Open Sans',
         fontWeight: 400,
         fontSize: 10,
@@ -82,7 +82,7 @@ var ImageTextGroupSourceJSON = function ImageTextGroupSourceJSON() {
         backgroundColor: '#2F54EB'
       },
       buttonText: {
-        sizeType: 'Headline 1',
+        sizeType: 'Customize font styles',
         fontFamily: 'Open Sans',
         fontWeight: 400,
         fontSize: 10,
@@ -104,7 +104,7 @@ var ImageTextGroupSourceJSON = function ImageTextGroupSourceJSON() {
           backgroundColor: '#0d39ed'
         },
         buttonText: {
-          sizeType: 'Headline 1',
+          sizeType: 'Customize font styles',
           fontFamily: 'Open Sans',
           fontWeight: 600,
           fontSize: 14,
@@ -137,7 +137,7 @@ var ImageTextGroupSourceJSON = function ImageTextGroupSourceJSON() {
         backgroundColor: '#fff'
       },
       buttonText: {
-        sizeType: 'Headline 1',
+        sizeType: 'Customize font styles',
         fontFamily: 'Open Sans',
         fontWeight: 400,
         fontSize: 10,
@@ -159,7 +159,7 @@ var ImageTextGroupSourceJSON = function ImageTextGroupSourceJSON() {
           backgroundColor: '#E9F0FF'
         },
         buttonText: {
-          sizeType: 'Headline 1',
+          sizeType: 'Customize font styles',
           fontFamily: 'Open Sans',
           fontWeight: 600,
           fontSize: 14,
@@ -237,7 +237,7 @@ var ImageTextGroupSourceJSON = function ImageTextGroupSourceJSON() {
         specialContent: [],
         text: '',
         content: {
-          sizeType: 'Headline 1',
+          sizeType: 'Customize font styles',
           fontFamily: 'Open Sans',
           fontWeight: 400,
           fontSize: 18,
@@ -257,7 +257,7 @@ var ImageTextGroupSourceJSON = function ImageTextGroupSourceJSON() {
           backgroundColor: '#2F54EB'
         },
         buttonText: {
-          sizeType: 'Headline 1',
+          sizeType: 'Customize font styles',
           fontFamily: 'Open Sans',
           fontWeight: 600,
           fontSize: 14,
@@ -279,7 +279,7 @@ var ImageTextGroupSourceJSON = function ImageTextGroupSourceJSON() {
             backgroundColor: '#0d39ed'
           },
           buttonText: {
-            sizeType: 'Headline 1',
+            sizeType: 'Customize font styles',
             fontFamily: 'Open Sans',
             fontWeight: 600,
             fontSize: 14,
@@ -307,7 +307,7 @@ var ImageTextGroupSourceJSON = function ImageTextGroupSourceJSON() {
           backgroundColor: '#fff'
         },
         buttonText: {
-          sizeType: 'Headline 1',
+          sizeType: 'Customize font styles',
           fontFamily: 'Open Sans',
           fontWeight: 600,
           fontSize: 14,
@@ -329,7 +329,7 @@ var ImageTextGroupSourceJSON = function ImageTextGroupSourceJSON() {
             backgroundColor: '#E9F0FF'
           },
           buttonText: {
-            sizeType: 'Headline 1',
+            sizeType: 'Customize font styles',
             fontFamily: 'Open Sans',
             fontWeight: 600,
             fontSize: 14,
@@ -370,7 +370,7 @@ var getDefaultJSON = function getDefaultJSON() {
     //   specialContent: [],
     //   text: 'Digital Maturity',
     //   content: {
-    //     sizeType: 'Headline 1',
+    //     sizeType: 'Customize font styles',
     //     fontFamily: 'Open Sans',
     //     fontWeight: 600,
     //     fontSize: 28,
@@ -392,7 +392,7 @@ var getDefaultJSON = function getDefaultJSON() {
     //   specialContent: [],
     //   text: 'Freedom to innovate and create with ODA compliant B/OSS solutions',
     //   content: {
-    //     sizeType: 'Headline 1',
+    //     sizeType: 'Customize font styles',
     //     fontFamily: 'Open Sans',
     //     fontWeight: 400,
     //     // textAlign: 'center',
@@ -418,7 +418,7 @@ var getDefaultJSON = function getDefaultJSON() {
     //     backgroundColor: '#2F54EB',
     //   },
     //   buttonText: {
-    //     sizeType: 'Headline 1',
+    //     sizeType: 'Customize font styles',
     //     fontFamily: 'Open Sans',
     //     fontWeight: 600,
     //     fontSize: 14,
@@ -440,7 +440,7 @@ var getDefaultJSON = function getDefaultJSON() {
     //       backgroundColor: '#0d39ed',
     //     },
     //     buttonText: {
-    //       sizeType: 'Headline 1',
+    //       sizeType: 'Customize font styles',
     //       fontFamily: 'Open Sans',
     //       fontWeight: 600,
     //       fontSize: 14,
@@ -468,7 +468,7 @@ var getDefaultJSON = function getDefaultJSON() {
     //     backgroundColor: '#FFFFFF',
     //   },
     //   buttonText: {
-    //     sizeType: 'Headline 1',
+    //     sizeType: 'Customize font styles',
     //     fontFamily: 'Open Sans',
     //     fontWeight: 600,
     //     fontSize: 14,
@@ -490,7 +490,7 @@ var getDefaultJSON = function getDefaultJSON() {
     //       backgroundColor: '#0d39ed',
     //     },
     //     buttonText: {
-    //       sizeType: 'Headline 1',
+    //       sizeType: 'Customize font styles',
     //       fontFamily: 'Open Sans',
     //       fontWeight: 600,
     //       fontSize: 14,

package/es/composite-comp/bol/components/ImageText/mobile/index.js

@@ -15,8 +15,6 @@ var _AlignSelector = require("../../../../../common/AlignSelector");
 
 var _components = require("../../../../../meta-comp/components");
 
-var _businessUtil = require("../../../../../utils/businessUtil");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {
@@ -107,7 +105,7 @@ function (_super) {
     var data = this.props.data; // const { ready } = this.state;
     // console.log('----imagetext mobile', data);
 
-    var wrapStyle = (0, _businessUtil.computeStyle)(data, window.magicDesign.device);
+    var wrapStyle = {};
     wrapStyle.textAlign = data.customize.align; // if (data.background.bgType === 'color') {
     //   wrapStyle.backgroundColor = data.background.color;
     //   wrapStyle.opacity = data.background.opacity ? data.background.opacity : 1;

package/es/composite-comp/bol/components/ImageText/pc/index.js

@@ -122,7 +122,7 @@ function (_super) {
     // console.log(data);
     // console.log('====================================');
 
-    var wrapStyle = (0, _businessUtil.computeStyle)(data, window.magicDesign.device);
+    var wrapStyle = {};
     wrapStyle.alignItems = _AlignSelector.alignItemMap[data.customize.align];
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])('image-text-pc', data.customize.layout.pcLayout),

package/es/composite-comp/bol/components/Newsletter/defaultJSON.js

@@ -111,12 +111,12 @@ var getDefaultJSON = function getDefaultJSON() {
       pc: {
         paddingTop: 10,
         paddingBottom: 10,
-        marginBottom: 0
+        marginBottom: window.magicDesign.compSpacing * 1.5
       },
       mobile: {
         paddingTop: 10,
         paddingBottom: 10,
-        marginBottom: 0
+        marginBottom: window.magicDesign.compSpacing
       }
     },
     customize: {

package/es/composite-comp/bol/components/Newsletter/index.js

@@ -19,8 +19,6 @@ var _Text = require("../../../../meta-comp/components/Text");
 
 require("./index.less");
 
-var _businessUtil = require("../../../../utils/businessUtil");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -90,15 +88,12 @@ function (_super) {
     //   wrapStyle.backgroundPosition = 'center';
     // }
 
-    var wrapStyle = (0, _businessUtil.computeStyle)(nodeData, window.magicDesign.device);
-
     var style = __assign({}, (0, _Text.contentStyle)(nodeData.content.inputField.content));
 
     Reflect.deleteProperty(style, 'width');
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])('newsletter-wrap', (_a = {}, _a[nodeData.customize.layout] = true, _a[nodeData.customize.align] = true, _a[window.magicDesign.device] = true, _a)),
-      onClick: this.onComponentClick,
-      style: wrapStyle
+      onClick: this.onComponentClick
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "top-wrap"
     }, nodeData.content.inputField.open && /*#__PURE__*/_react["default"].createElement("div", {

package/es/composite-comp/bol/components/Tag/defaultJSON.js

@@ -88,12 +88,12 @@ var getDefaultJSON = function getDefaultJSON() {
       pc: {
         paddingTop: 10,
         paddingBottom: 10,
-        marginBottom: 0
+        marginBottom: window.magicDesign.compSpacing * 1.5
       },
       mobile: {
         paddingTop: 10,
         paddingBottom: 10,
-        marginBottom: 0
+        marginBottom: window.magicDesign.compSpacing
       }
     },
     customize: {

package/es/composite-comp/bol/components/Tag/index.js

@@ -15,8 +15,6 @@ var _components = require("../../../../meta-comp/components");
 
 var _compositeDecorator = _interopRequireDefault(require("../../../../decorator/compositeDecorator"));
 
-var _businessUtil = require("../../../../utils/businessUtil");
-
 require("./index.less");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -76,11 +74,9 @@ function (_super) {
     var _a;
 
     var nodeData = this.props.nodeData;
-    var wrapStyle = (0, _businessUtil.computeStyle)(nodeData, window.magicDesign.device);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])('tag-comp-wrap', (_a = {}, _a[nodeData.customize.layout] = true, _a[nodeData.customize.align] = true, _a)),
-      onClick: this.onComponentClick,
-      style: wrapStyle
+      onClick: this.onComponentClick
     }, nodeData.content.image.open && /*#__PURE__*/_react["default"].createElement("div", {
       className: "tag-image"
     }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {

package/es/composite-comp/bol/components/Text/defaultJSON.js

@@ -103,7 +103,7 @@ var getDefaultJSON = function getDefaultJSON() {
       headline: __assign(__assign({}, getDefaultMetaTextJson()), {
         text: 'Title use, click modify text.',
         content: {
-          sizeType: 'Headline 1',
+          sizeType: 'Customize font styles',
           fontFamily: 'Montserrat',
           fontWeight: 600,
           fontSize: 28,
@@ -130,12 +130,12 @@ var getDefaultJSON = function getDefaultJSON() {
       pc: {
         paddingTop: 10,
         paddingBottom: 10,
-        marginBottom: 0
+        marginBottom: window.magicDesign.compSpacing * 1.5
       },
       mobile: {
         paddingTop: 10,
         paddingBottom: 10,
-        marginBottom: 0
+        marginBottom: window.magicDesign.compSpacing
       }
     },
     customize: {

package/es/composite-comp/bol/components/Text/index.js

@@ -15,8 +15,6 @@ var _components = require("../../../../meta-comp/components");
 
 var _compositeDecorator = _interopRequireDefault(require("../../../../decorator/compositeDecorator"));
 
-var _businessUtil = require("../../../../utils/businessUtil");
-
 require("./index.less");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -76,11 +74,9 @@ function (_super) {
     var _a;
 
     var nodeData = this.props.nodeData;
-    var wrapStyle = (0, _businessUtil.computeStyle)(nodeData, window.magicDesign.device);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-text",
-      onClick: this.onComponentClick,
-      style: wrapStyle
+      onClick: this.onComponentClick
     }, nodeData.title.headline.open && /*#__PURE__*/_react["default"].createElement("div", {
       className: "title-wrap"
     }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {

package/es/composite-comp/bol/config-panels/TagCompConfig/TagConfigContent/index.js

@@ -15,6 +15,8 @@ var _common = require("../../../../../common");
 
 var _ImageConfig = _interopRequireDefault(require("../../../../../meta-comp/config-panels/ImageConfig"));
 
+var _locale = require("../../../../../locale");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {
@@ -71,21 +73,21 @@ function (_super) {
       onRefresh: this.reRender,
       source: [{
         key: '1',
-        name: i18n('IMAGE_TAG'),
+        name: (0, _locale.i18n)('IMAGE_TAG'),
         value: /*#__PURE__*/_react["default"].createElement(_ImageConfig["default"], {
           data: panelProps.image
         }),
         metaOption: panelProps.image
       }, {
         key: '2',
-        name: i18n('BUTTON_TAG'),
+        name: (0, _locale.i18n)('BUTTON_TAG'),
         value: /*#__PURE__*/_react["default"].createElement(_ButtonConfig["default"], {
           data: panelProps.button
         }),
         metaOption: panelProps.button
       }, {
         key: '3',
-        name: i18n('SECONDARY_BUTTON_TAG'),
+        name: (0, _locale.i18n)('SECONDARY_BUTTON_TAG'),
         value: /*#__PURE__*/_react["default"].createElement(_ButtonConfig["default"], {
           data: panelProps.secondaryButton
         }),