@fonixtree/magic-design 0.0.8 → 0.0.9

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

@@ -0,0 +1,4 @@
+import styleInject from '../../../../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index_image-text-mobile__wcodl {\n  padding: 17px 0;\n}\n.index_image-text-mobile__wcodl .index_headline__C24a8 {\n  margin-bottom: 8px;\n}\n.index_image-text-mobile__wcodl .index_subtitle__rrdfn {\n  margin-bottom: 36px;\n}\n.index_image-text-mobile__wcodl .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-btn-wrap__jdwtW .index_card-first-btn__LiSqH,\n.index_image-text-mobile__wcodl .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-btn-wrap__jdwtW .index_card-second-btn__XqmWw {\n  width: fit-content;\n}\n.index_image-text-mobile__wcodl .index_btn-wrap__1Cgdm {\n  display: flex;\n  width: 100%;\n  justify-content: center;\n}\n.index_image-text-mobile__wcodl .index_btn-wrap__1Cgdm .index_first-btn__ZCEBD {\n  margin-top: 36px;\n}\n.index_image-text-mobile__wcodl .index_btn-wrap__1Cgdm .index_second-btn__jaGp6 {\n  margin-top: 36px;\n  margin-left: 12px;\n}\n.index_normal1__-DEkH .index_group-wrap__ByNFt {\n  padding: 0 15px;\n  width: 100%;\n}\n.index_normal1__-DEkH .index_group-wrap__ByNFt .index_one-card__mEbCD {\n  display: flex;\n  align-items: stretch;\n  padding: 18px;\n  margin-bottom: 8px;\n}\n.index_normal1__-DEkH .index_group-wrap__ByNFt .index_one-card__mEbCD:last-of-type {\n  margin-bottom: 0;\n}\n.index_normal1__-DEkH .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-image-wrap__r9cJr {\n  flex-shrink: 0;\n  margin-right: 12px;\n}\n.index_normal1__-DEkH .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-content-wrap__4JBAu {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n.index_normal1__-DEkH .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-content-wrap__4JBAu .index_card-title__ZPyCN {\n  margin-bottom: 6px;\n}\n.index_normal1__-DEkH .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-content-wrap__4JBAu .index_card-text__2Ntaj {\n  margin-bottom: 12px;\n}\n.index_normal1__-DEkH .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-content-wrap__4JBAu .index_card-btn-wrap__jdwtW {\n  display: flex;\n}\n.index_normal1__-DEkH .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-content-wrap__4JBAu .index_card-btn-wrap__jdwtW .index_card-first-btn__LiSqH {\n  margin-right: 12px;\n}\n.index_normal2__8GWwi .index_group-wrap__ByNFt {\n  width: 100%;\n  padding: 0 15px;\n}\n.index_normal2__8GWwi .index_group-wrap__ByNFt .index_one-card__mEbCD {\n  width: 100%;\n  padding: 20px 16px;\n  margin-bottom: 36px;\n}\n.index_normal2__8GWwi .index_group-wrap__ByNFt .index_one-card__mEbCD:last-of-type {\n  margin-bottom: 0;\n}\n.index_normal2__8GWwi .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-image-wrap__r9cJr .index_card-image__NBvlh {\n  width: fit-content;\n  margin: 0 auto;\n}\n.index_normal2__8GWwi .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-content-wrap__4JBAu .index_card-title__ZPyCN {\n  margin-bottom: 8px;\n}\n.index_normal2__8GWwi .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-content-wrap__4JBAu .index_card-text__2Ntaj {\n  margin-bottom: 16px;\n}\n.index_normal2__8GWwi .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-content-wrap__4JBAu .index_card-btn-wrap__jdwtW {\n  display: flex;\n}\n.index_normal2__8GWwi .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-content-wrap__4JBAu .index_card-btn-wrap__jdwtW .index_card-first-btn__LiSqH {\n  margin-right: 12px;\n}\n.index_normal3__oZf6b .index_group-wrap__ByNFt {\n  display: flex;\n  flex-wrap: wrap;\n  width: 100%;\n  padding: 0 15px;\n}\n.index_normal3__oZf6b .index_group-wrap__ByNFt .index_one-card__mEbCD {\n  display: flex;\n  flex-direction: column;\n}\n.index_normal3__oZf6b .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-image-wrap__r9cJr {\n  width: 100%;\n}\n.index_normal3__oZf6b .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-image-wrap__r9cJr .index_card-image__NBvlh {\n  width: fit-content;\n  margin: 0 auto 7px;\n}\n.index_normal3__oZf6b .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-title__ZPyCN {\n  margin-bottom: 4px;\n}\n.index_normal3__oZf6b .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-text__2Ntaj {\n  margin-bottom: 7px;\n}\n.index_normal3__oZf6b .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-btn-wrap__jdwtW {\n  display: flex;\n  flex-direction: column;\n}\n.index_normal3__oZf6b .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-second-btn__XqmWw {\n  margin-top: 8px;\n}\n.index_normal3__oZf6b .index_group-wrap__ByNFt .index_card-margin-bottom__D6rgm {\n  margin-bottom: 10px;\n}\n.index_outsideM__g6TyU .index_group-wrap__ByNFt {\n  padding: 0 15px;\n  width: 100%;\n}\n.index_outsideM__g6TyU .index_group-wrap__ByNFt .index_one-card__mEbCD {\n  margin-top: 35px;\n  position: relative;\n  padding: 30px 10px 20px 36px;\n}\n.index_outsideM__g6TyU .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-image-wrap__r9cJr {\n  position: absolute;\n  left: 18px;\n  top: 0;\n  transform: translateY(-50%);\n}\n.index_outsideM__g6TyU .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-content-wrap__4JBAu .index_card-title__ZPyCN {\n  margin-bottom: 4px;\n}\n.index_outsideM__g6TyU .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-content-wrap__4JBAu .index_card-text__2Ntaj {\n  margin-bottom: 12px;\n}\n.index_outsideM__g6TyU .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-content-wrap__4JBAu .index_card-btn-wrap__jdwtW {\n  display: flex;\n}\n.index_outsideM__g6TyU .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-content-wrap__4JBAu .index_card-btn-wrap__jdwtW .index_card-first-btn__LiSqH {\n  margin-right: 12px;\n}\n.index_centerM__M3UWG .index_group-wrap__ByNFt {\n  position: relative;\n  width: 100%;\n}\n.index_centerM__M3UWG .index_group-wrap__ByNFt::before {\n  content: '';\n  position: absolute;\n  width: 1px;\n  height: 100%;\n  border-right: 1px dashed #D2D9E5;\n  left: 50%;\n  transform: translateX(-50%);\n}\n.index_centerM__M3UWG .index_group-wrap__ByNFt .index_one-card__mEbCD {\n  width: calc((100% - 1px)/2);\n  position: relative;\n  padding: 0 14px 16px;\n}\n.index_centerM__M3UWG .index_group-wrap__ByNFt .index_one-card__mEbCD::before {\n  content: '';\n  position: absolute;\n  border-radius: 50%;\n  background: #2F54EB;\n  width: 10px;\n  height: 10px;\n  z-index: 10;\n  border: 2px solid #CCE3FF;\n}\n.index_centerM__M3UWG .index_group-wrap__ByNFt .index_one-card__mEbCD:nth-of-type(2n-1) {\n  left: 0;\n}\n.index_centerM__M3UWG .index_group-wrap__ByNFt .index_one-card__mEbCD:nth-of-type(2n-1)::before {\n  right: -5px;\n  top: 5px;\n}\n.index_centerM__M3UWG .index_group-wrap__ByNFt .index_one-card__mEbCD:nth-of-type(2n-1) .index_card-content-wrap__4JBAu {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n}\n.index_centerM__M3UWG .index_group-wrap__ByNFt .index_one-card__mEbCD:nth-of-type(2n-1) .index_card-content-wrap__4JBAu .index_card-title__ZPyCN,\n.index_centerM__M3UWG .index_group-wrap__ByNFt .index_one-card__mEbCD:nth-of-type(2n-1) .index_card-content-wrap__4JBAu .index_card-text__2Ntaj {\n  text-align: right !important;\n}\n.index_centerM__M3UWG .index_group-wrap__ByNFt .index_one-card__mEbCD:nth-of-type(2n-1) .index_card-content-wrap__4JBAu .index_image-subtext-wrap__c0fgm {\n  flex-direction: row-reverse;\n}\n.index_centerM__M3UWG .index_group-wrap__ByNFt .index_one-card__mEbCD:nth-of-type(2n-1) .index_card-content-wrap__4JBAu .index_image-subtext-wrap__c0fgm .index_card-image-wrap__r9cJr {\n  margin-left: 8px;\n}\n.index_centerM__M3UWG .index_group-wrap__ByNFt .index_one-card__mEbCD:nth-of-type(2n-1) .index_card-content-wrap__4JBAu .index_card-btn-wrap__jdwtW {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n}\n.index_centerM__M3UWG .index_group-wrap__ByNFt .index_one-card__mEbCD:nth-of-type(2n) {\n  left: 50%;\n}\n.index_centerM__M3UWG .index_group-wrap__ByNFt .index_one-card__mEbCD:nth-of-type(2n)::before {\n  left: -5px;\n  top: 5px;\n}\n.index_centerM__M3UWG .index_group-wrap__ByNFt .index_one-card__mEbCD:nth-of-type(2n) .index_card-content-wrap__4JBAu .index_card-title__ZPyCN,\n.index_centerM__M3UWG .index_group-wrap__ByNFt .index_one-card__mEbCD:nth-of-type(2n) .index_card-content-wrap__4JBAu .index_card-text__2Ntaj {\n  text-align: left !important;\n}\n.index_centerM__M3UWG .index_group-wrap__ByNFt .index_one-card__mEbCD:nth-of-type(2n) .index_card-content-wrap__4JBAu .index_image-subtext-wrap__c0fgm .index_card-image-wrap__r9cJr {\n  margin-right: 8px;\n}\n.index_centerM__M3UWG .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-content-wrap__4JBAu .index_card-title__ZPyCN {\n  margin-bottom: 10px;\n}\n.index_centerM__M3UWG .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-content-wrap__4JBAu .index_image-subtext-wrap__c0fgm {\n  display: flex;\n  margin-bottom: 20px;\n  align-items: center;\n}\n.index_centerM__M3UWG .index_group-wrap__ByNFt .index_one-card__mEbCD .index_card-content-wrap__4JBAu .index_card-btn-wrap__jdwtW .index_card-second-btn__XqmWw {\n  margin-top: 12px;\n}\n";
+styleInject(css_248z);

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

@@ -0,0 +1,112 @@
+import { __extends, __assign } from '../../../../../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import './index.less.js';
+import classNames from 'classnames';
+import { alignItemMap } from '../../../../../common/AlignSelector/index.js';
+import Text from '../../../../../meta-comp/components/Text/index.js';
+import Button from '../../../../../meta-comp/components/Button/index.js';
+import Image from '../../../../../meta-comp/components/Image/index.js';
+import { computeStyle } from '../../../../../utils/businessUtil.js';
+
+var maxWidthAndHeight = {
+  normal: 410,
+  outside: 100,
+  center: 410
+};
+
+var ImageTextPc =
+/** @class */
+function (_super) {
+  __extends(ImageTextPc, _super);
+
+  function ImageTextPc() {
+    var _this = _super !== null && _super.apply(this, arguments) || this; // state = {
+    //   clickedGroup: '',
+    // }
+    // componentDidMount() {
+    //   this.distroy = autorun(() => {
+    //     this.setState({
+    //       clickedGroup: store.clickedGroup,
+    //     });
+    //   });
+    // }
+    // componentWillUnmount() {
+    //   this.distroy();
+    // }
+
+
+    _this.calcWidth = function (num) {
+      return "".concat((100 - (num - 1) * 2) / num, "%");
+    };
+
+    _this.getCardStyle = function (source, i) {
+      var data = _this.props.data;
+      var cardStyle = {
+        width: _this.calcWidth(data.customize.pcRowNum),
+        marginRight: (1 + i) % data.customize.pcRowNum !== 0 ? '2%' : 0,
+        alignItems: alignItemMap[data.customize.align],
+        textAlign: data.customize.align
+      };
+      var wrapStyle = computeStyle(source, window.magicDesign.device);
+      return __assign(__assign({}, cardStyle), wrapStyle);
+    };
+
+    return _this;
+  }
+
+  ImageTextPc.prototype.render = function () {
+    var _this = this;
+
+    var data = this.props.data;
+    console.log('====================================');
+    console.log(data);
+    console.log('====================================');
+    var wrapStyle = computeStyle(data, window.magicDesign.device);
+    wrapStyle.alignItems = alignItemMap[data.customize.align];
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: classNames('image-text-pc', data.customize.layout.pcLayout),
+      style: wrapStyle
+    }, (data === null || data === void 0 ? void 0 : data.groupSource.length) > 0 && /*#__PURE__*/React__default.createElement("div", {
+      className: "group-wrap"
+    }, data.groupSource.map(function (source, i) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        key: source.id,
+        className: data.groupSource.length > data.customize.pcRowNum ? 'one-card card-margin-bottom' : 'one-card',
+        style: _this.getCardStyle(source, i)
+      }, source.title.open && data.customize.layout.pcLayout === 'center' && /*#__PURE__*/React__default.createElement(Text, {
+        className: "card-title",
+        data: source.title
+      }), source.image.open && /*#__PURE__*/React__default.createElement("div", {
+        className: "card-image-wrap"
+      }, /*#__PURE__*/React__default.createElement(Image, {
+        className: "card-image",
+        data: source.image,
+        maxHeight: maxWidthAndHeight[data.customize.layout.pcLayout],
+        maxWidth: maxWidthAndHeight[data.customize.layout.pcLayout]
+      })), source.title.open && data.customize.layout.pcLayout !== 'center' && /*#__PURE__*/React__default.createElement(Text, {
+        className: "card-title",
+        data: source.title
+      }), source.text.open && /*#__PURE__*/React__default.createElement(Text, {
+        className: "card-text",
+        data: source.text
+      }), /*#__PURE__*/React__default.createElement("div", {
+        className: classNames({
+          'card-btn-wrap': data.customize.pcRowNum <= 3
+        })
+      }, source.button.open && /*#__PURE__*/React__default.createElement(Button, {
+        className: "card-first-btn",
+        data: source.button
+      }), source.secondButton.open && /*#__PURE__*/React__default.createElement(Button, {
+        className: "card-second-btn",
+        data: source.secondButton
+      })));
+    })));
+  };
+
+  ImageTextPc.defaultProps = {
+    data: {}
+  };
+  return ImageTextPc;
+}(React__default.Component);
+
+export { ImageTextPc as default };

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

@@ -0,0 +1,4 @@
+import styleInject from '../../../../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index_image-text-pc__U30U8 {\n  display: flex;\n  flex-direction: column;\n  padding: 17px 70px;\n}\n.index_image-text-pc__U30U8 .index_headline__CyykA {\n  margin-bottom: 8px;\n}\n.index_image-text-pc__U30U8 .index_subtitle__qXvkY {\n  margin-bottom: 36px;\n}\n.index_image-text-pc__U30U8 .index_group-wrap__Kb8tK {\n  display: flex;\n  flex-wrap: wrap;\n  width: 100%;\n}\n.index_image-text-pc__U30U8 .index_group-wrap__Kb8tK .index_one-card__NWols {\n  display: flex;\n  flex-direction: column;\n}\n.index_image-text-pc__U30U8 .index_group-wrap__Kb8tK .index_one-card__NWols .index_card-image-wrap__EE8VR {\n  width: 100%;\n}\n.index_image-text-pc__U30U8 .index_group-wrap__Kb8tK .index_one-card__NWols .index_card-image-wrap__EE8VR .index_card-image__mLns4 {\n  width: fit-content;\n  margin: 0 auto 7px;\n}\n.index_image-text-pc__U30U8 .index_group-wrap__Kb8tK .index_one-card__NWols .index_card-title__GZL0K {\n  margin-bottom: 4px;\n}\n.index_image-text-pc__U30U8 .index_group-wrap__Kb8tK .index_one-card__NWols .index_card-text__byGz2 {\n  margin-bottom: 7px;\n}\n.index_image-text-pc__U30U8 .index_group-wrap__Kb8tK .index_one-card__NWols .index_card-btn-wrap__xfbbO {\n  width: fit-content;\n  display: flex;\n}\n.index_image-text-pc__U30U8 .index_group-wrap__Kb8tK .index_one-card__NWols .index_card-btn-wrap__xfbbO .index_card-first-btn__VJL1d {\n  margin-right: 12px;\n}\n.index_image-text-pc__U30U8 .index_group-wrap__Kb8tK .index_one-card__NWols .index_card-btn-wrap__xfbbO .index_card-second-btn__kwtrw {\n  margin-top: 0;\n}\n.index_image-text-pc__U30U8 .index_group-wrap__Kb8tK .index_one-card__NWols .index_card-first-btn__VJL1d {\n  width: fit-content;\n}\n.index_image-text-pc__U30U8 .index_group-wrap__Kb8tK .index_one-card__NWols .index_card-second-btn__kwtrw {\n  margin-top: 8px;\n  width: fit-content;\n}\n.index_image-text-pc__U30U8 .index_group-wrap__Kb8tK .index_card-margin-bottom__Wt1F5 {\n  margin-bottom: 10px;\n}\n.index_image-text-pc__U30U8 .index_btn-wrap__-p9e8 {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n}\n.index_image-text-pc__U30U8 .index_btn-wrap__-p9e8 > div {\n  margin-right: 12px;\n}\n.index_image-text-pc__U30U8 .index_btn-wrap__-p9e8 > div:last-of-type {\n  margin-right: 0;\n}\n.index_image-text-pc__U30U8 .index_btn-wrap__-p9e8 .index_first-btn__D9m7W {\n  margin-top: 36px;\n}\n.index_image-text-pc__U30U8 .index_btn-wrap__-p9e8 .index_second-btn__w7JgY {\n  margin-top: 36px;\n}\n.index_normal__xHk2t .index_group-wrap__Kb8tK .index_one-card__NWols {\n  padding: 40px 24px;\n}\n.index_outside__-x9jW .index_group-wrap__Kb8tK .index_one-card__NWols {\n  padding: 40px 24px 24px;\n  position: relative;\n  margin-top: 40px;\n}\n.index_outside__-x9jW .index_group-wrap__Kb8tK .index_one-card__NWols .index_card-image-wrap__EE8VR .index_card-image__mLns4 {\n  position: absolute;\n  top: 0;\n  transform: translateY(-50%);\n  left: 24px;\n}\n.index_center__LBeZ- .index_group-wrap__Kb8tK .index_one-card__NWols {\n  padding: 20px 20px;\n}\n.index_center__LBeZ- .index_group-wrap__Kb8tK .index_one-card__NWols .index_card-title__GZL0K {\n  margin-bottom: 10px;\n}\n";
+styleInject(css_248z);

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

@@ -0,0 +1,114 @@
+import { __assign } from '../../../../../../node_modules/tslib/tslib.es6.js';
+import uuid_1 from '../../../../../../node_modules/uuid/index.js';
+
+/**
+ * 获取 text 元组件json
+ */
+
+var getDefaultMetaTextJson = function () {
+  return {
+    id: uuid_1.v4(),
+    open: true,
+    type: 'Text',
+    specialContent: [],
+    text: 'Thank you for you subscription',
+    content: {
+      sizeType: 'Customize font styles',
+      fontFamily: 'Open Sans',
+      fontWeight: 400,
+      fontSize: 14,
+      color: '#8493AF'
+    },
+    underline: {
+      open: false,
+      textDecorationColor: '',
+      textDecorationStyle: 'solid'
+    },
+    vertical: {
+      open: false,
+      lineHeight: 18
+    }
+  };
+};
+/**
+ * 获取 text 元组件json
+ */
+
+
+var getDefaultMetaButtonJson = function () {
+  return {
+    id: uuid_1.v4(),
+    open: true,
+    content: {
+      url: '',
+      backgroundColor: '#2F54EB'
+    },
+    buttonText: {
+      sizeType: 'Customize font styles',
+      fontFamily: 'Open Sans',
+      fontWeight: 600,
+      fontSize: 14,
+      fontStyle: 'normal',
+      color: '#fff',
+      padding: '12px 30px'
+    },
+    buttonBorder: {
+      open: true,
+      borderColor: '',
+      borderRadius: 8
+    },
+    buttonIcon: {
+      iconUrl: '',
+      layout: 'right'
+    },
+    text: 'Subscribe',
+    hover: null
+  };
+};
+
+var getDefaultJSON = function () {
+  return {
+    id: uuid_1.v4(),
+    type: 'NEWSLETTER',
+    content: {
+      inputField: {
+        open: true,
+        type: 'InputField',
+        placeholder: 'Email Address',
+        content: {
+          sizeType: 'Customize font styles',
+          fontFamily: 'Open Sans',
+          fontWeight: 600,
+          fontSize: 16,
+          color: '#CE1126'
+        }
+      },
+      button: __assign({}, getDefaultMetaButtonJson()),
+      confirmation: __assign({}, getDefaultMetaTextJson())
+    },
+    spacing: {
+      pc: {
+        paddingTop: 10,
+        paddingBottom: 10,
+        marginBottom: 0
+      },
+      mobile: {
+        paddingTop: 10,
+        paddingBottom: 10,
+        marginBottom: 0
+      }
+    },
+    customize: {
+      layout: 'layout1',
+      align: 'center'
+    },
+    background: {
+      opacity: 100,
+      color: '#fff',
+      image: '',
+      bgType: 'color'
+    }
+  };
+};
+
+export { getDefaultJSON };

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

@@ -0,0 +1,65 @@
+import { __extends, __assign } from '../../../../../../node_modules/tslib/tslib.es6.js';
+import React__default, { Component } from 'react';
+import classNames from 'classnames';
+import { getDefaultJSON } from './defaultJSON.js';
+import Text, { contentStyle } from '../../../../meta-comp/components/Text/index.js';
+import Button from '../../../../meta-comp/components/Button/index.js';
+import '../../../../meta-comp/components/Image/index.js';
+import './index.less.js';
+import { computeStyle } from '../../../../utils/businessUtil.js';
+
+var Newsletter =
+/** @class */
+function (_super) {
+  __extends(Newsletter, _super);
+
+  function Newsletter() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  Newsletter.prototype.render = function () {
+    var _a;
+
+    var nodeData = this.props.nodeData; // const wrapStyle = {};
+    // if (nodeData.background.bgType === 'color') {
+    //   wrapStyle.backgroundColor = nodeData.background.color;
+    //   wrapStyle.opacity = nodeData.background.opacity ? nodeData.background.opacity : 1;
+    // } else {
+    //   wrapStyle.backgroundImage = `url(${nodeData.background.image})`;
+    //   wrapStyle.backgroundPosition = 'center';
+    // }
+
+    var wrapStyle = computeStyle(nodeData, window.magicDesign.device);
+
+    var style = __assign({}, contentStyle(nodeData.content.inputField.content));
+
+    Reflect.deleteProperty(style, 'width');
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: classNames('newsletter-wrap', (_a = {}, _a[nodeData.customize.layout] = true, _a[nodeData.customize.align] = true, _a[window.magicDesign.device] = true, _a)),
+      onClick: this.onComponentClick,
+      style: wrapStyle
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "top-wrap"
+    }, nodeData.content.inputField.open && /*#__PURE__*/React__default.createElement("div", {
+      className: "input-wrap"
+    }, /*#__PURE__*/React__default.createElement("input", {
+      placeholder: nodeData.content.inputField.placeholder,
+      style: style,
+      type: "text"
+    })), nodeData.content.inputField.open && /*#__PURE__*/React__default.createElement("div", {
+      className: "btn-wrap"
+    }, /*#__PURE__*/React__default.createElement(Button, {
+      data: nodeData.content.button
+    }))), nodeData.content.button.open && /*#__PURE__*/React__default.createElement("div", {
+      className: "confirmation-text"
+    }, /*#__PURE__*/React__default.createElement(Text, {
+      data: nodeData.content.confirmation
+    })));
+  };
+
+  Newsletter.type = 'NEWSLETTER';
+  Newsletter.getDefaultJSON = getDefaultJSON;
+  return Newsletter;
+}(Component);
+
+export { Newsletter as default };

package/src/components/composite-comp/bol/components/Newsletter/index.less.js

@@ -0,0 +1,4 @@
+import styleInject from '../../../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index_newsletter-wrap__f0Sjc {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.index_newsletter-wrap__f0Sjc .index_top-wrap__-xnJZ {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  padding: 0 20px;\n}\n.index_newsletter-wrap__f0Sjc .index_top-wrap__-xnJZ .index_input-wrap__MZj-C input {\n  border: 1px solid #D2D9E5;\n  width: 600px;\n  height: 56px;\n  padding: 0 20px;\n  border-radius: 8px;\n  background-color: #fff;\n}\n.index_newsletter-wrap__f0Sjc .index_top-wrap__-xnJZ .index_btn-wrap__u-LM- {\n  margin-left: 12px;\n}\n.index_newsletter-wrap__f0Sjc .index_confirmation-text__ZMmib {\n  margin-top: 12px;\n}\n.index_newsletter-wrap__f0Sjc.index_layout1__c6SFz {\n  flex-direction: column;\n}\n.index_newsletter-wrap__f0Sjc.index_layout1__c6SFz.index_left__VGwZJ {\n  align-items: flex-start;\n}\n.index_newsletter-wrap__f0Sjc.index_layout1__c6SFz.index_left__VGwZJ .index_top-wrap__-xnJZ {\n  justify-content: flex-start;\n}\n.index_newsletter-wrap__f0Sjc.index_layout1__c6SFz.index_center__FNodw {\n  align-items: center;\n}\n.index_newsletter-wrap__f0Sjc.index_layout1__c6SFz.index_center__FNodw .index_top-wrap__-xnJZ {\n  justify-content: center;\n}\n.index_newsletter-wrap__f0Sjc.index_layout1__c6SFz.index_right__S7rnh {\n  align-items: flex-end;\n}\n.index_newsletter-wrap__f0Sjc.index_layout1__c6SFz.index_right__S7rnh .index_top-wrap__-xnJZ {\n  justify-content: flex-end;\n}\n.index_newsletter-wrap__f0Sjc.index_mobile__TS-KA .index_input-wrap__MZj-C input {\n  border: 1px solid #D2D9E5;\n  width: 100%;\n  height: 48px;\n  border-radius: 8px;\n  background-color: #fff;\n}\n";
+styleInject(css_248z);

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

@@ -0,0 +1,91 @@
+import { __assign } from '../../../../../../node_modules/tslib/tslib.es6.js';
+import uuid_1 from '../../../../../../node_modules/uuid/index.js';
+
+/**
+ * 获取 text 元组件json
+ */
+
+var getDefaultMetaButtonJson = function () {
+  return {
+    id: uuid_1.v4(),
+    open: true,
+    content: {
+      url: '',
+      backgroundColor: '#e6eaf0'
+    },
+    buttonText: {
+      sizeType: 'Customize font styles',
+      fontFamily: 'Open Sans',
+      fontWeight: 600,
+      fontSize: 12,
+      fontStyle: 'normal',
+      color: '#8493AF',
+      padding: '2px 8px'
+    },
+    buttonBorder: {
+      open: true,
+      borderColor: '',
+      borderRadius: 4
+    },
+    buttonIcon: {
+      iconUrl: '',
+      layout: 'right'
+    },
+    text: 'Button Tag',
+    hover: null
+  };
+};
+
+var getDefaultJSON = function () {
+  return {
+    id: uuid_1.v4(),
+    type: 'TAG',
+    content: {
+      image: {
+        id: uuid_1.v4(),
+        open: false,
+        type: 'IMAGE',
+        content: {
+          h5Name: '',
+          pcName: '',
+          h5ImgSrc: '',
+          pcImgSrc: '',
+          clickUrl: ''
+        },
+        hover: {
+          open: false,
+          backgroundType: 'enlarge',
+          magnification: 1.5,
+          pcImgHoverUrl: '',
+          h5ImgHoverUrl: ''
+        }
+      },
+      button: __assign({}, getDefaultMetaButtonJson()),
+      secondaryButton: __assign({}, getDefaultMetaButtonJson())
+    },
+    spacing: {
+      pc: {
+        paddingTop: 10,
+        paddingBottom: 10,
+        marginBottom: 0
+      },
+      mobile: {
+        paddingTop: 10,
+        paddingBottom: 10,
+        marginBottom: 0
+      }
+    },
+    customize: {
+      layout: 'layout1',
+      align: 'center'
+    },
+    background: {
+      opacity: 100,
+      color: '#F2F2F2',
+      image: '',
+      bgType: 'color'
+    }
+  };
+};
+
+export { getDefaultJSON };

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

@@ -0,0 +1,52 @@
+import { __extends, __decorate } from '../../../../../../node_modules/tslib/tslib.es6.js';
+import React__default, { Component } from 'react';
+import classNames from 'classnames';
+import { getDefaultJSON } from './defaultJSON.js';
+import '../../../../meta-comp/components/Text/index.js';
+import Button from '../../../../meta-comp/components/Button/index.js';
+import Image from '../../../../meta-comp/components/Image/index.js';
+import compositeDecorator from '../../../../decorator/compositeDecorator.js';
+import { computeStyle } from '../../../../utils/businessUtil.js';
+import './index.less.js';
+
+var Tag =
+/** @class */
+function (_super) {
+  __extends(Tag, _super);
+
+  function Tag() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  Tag.prototype.render = function () {
+    var _a;
+
+    var nodeData = this.props.nodeData;
+    var wrapStyle = computeStyle(nodeData, window.magicDesign.device);
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: classNames('tag-comp-wrap', (_a = {}, _a[nodeData.customize.layout] = true, _a[nodeData.customize.align] = true, _a)),
+      onClick: this.onComponentClick,
+      style: wrapStyle
+    }, nodeData.content.image.open && /*#__PURE__*/React__default.createElement("div", {
+      className: "tag-image"
+    }, /*#__PURE__*/React__default.createElement(Image, {
+      data: nodeData.content.image
+    })), nodeData.content.button.open && /*#__PURE__*/React__default.createElement("div", {
+      className: "first-button"
+    }, /*#__PURE__*/React__default.createElement(Button, {
+      data: nodeData.content.button
+    })), nodeData.content.secondaryButton.open && /*#__PURE__*/React__default.createElement("div", {
+      className: "secondary-button"
+    }, /*#__PURE__*/React__default.createElement(Button, {
+      data: nodeData.content.secondaryButton
+    })));
+  };
+
+  Tag.defaultProps = {};
+  Tag.type = 'TAG';
+  Tag.getDefaultJSON = getDefaultJSON;
+  Tag = __decorate([compositeDecorator], Tag);
+  return Tag;
+}(Component);
+
+export { Tag as default };

package/src/components/composite-comp/bol/components/Tag/index.less.js

@@ -0,0 +1,4 @@
+import styleInject from '../../../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index_tag-comp-wrap__UjbcC {\n  display: flex;\n  align-items: center;\n}\n.index_tag-comp-wrap__UjbcC .index_tag-image__5FKgB {\n  width: 26px;\n  height: 26px;\n}\n.index_tag-comp-wrap__UjbcC .index_first-button__SE0VE {\n  margin: 5px;\n}\n.index_tag-comp-wrap__UjbcC .index_secondary-button__T8X9y {\n  margin: 5px;\n}\n.index_tag-comp-wrap__UjbcC.index_layout1__NKtEQ {\n  flex-direction: row;\n}\n.index_tag-comp-wrap__UjbcC.index_layout1__NKtEQ.index_left__ra7iR {\n  justify-content: flex-start;\n}\n.index_tag-comp-wrap__UjbcC.index_layout1__NKtEQ.index_center__TNrNg {\n  justify-content: center;\n}\n.index_tag-comp-wrap__UjbcC.index_layout1__NKtEQ.index_right__T9842 {\n  justify-content: flex-end;\n}\n";
+styleInject(css_248z);

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

@@ -0,0 +1,125 @@
+import { __assign } from '../../../../../../node_modules/tslib/tslib.es6.js';
+import uuid_1 from '../../../../../../node_modules/uuid/index.js';
+
+/**
+ * 获取 text 元组件json
+ */
+
+var getDefaultMetaTextJson = function () {
+  return {
+    id: uuid_1.v4(),
+    open: true,
+    type: 'Text',
+    specialContent: [],
+    text: 'Flash Deal',
+    content: {
+      sizeType: 'Customize font styles',
+      fontFamily: 'Open Sans',
+      fontWeight: 600,
+      fontSize: 14,
+      color: '#CE1126'
+    },
+    underline: {
+      open: false,
+      textDecorationColor: '',
+      textDecorationStyle: 'solid'
+    },
+    vertical: {
+      open: false,
+      lineHeight: 18
+    }
+  };
+};
+
+var textGroupSourceJSON = function (parentId) {
+  var groupId = uuid_1.v4();
+  return {
+    id: groupId,
+    parentId: parentId,
+    content: {
+      title: __assign(__assign({
+        parentId: groupId,
+        id: uuid_1.v4()
+      }, getDefaultMetaTextJson()), {
+        text: 'Group Name',
+        content: {
+          sizeType: 'Customize font styles',
+          fontFamily: 'Open Sans',
+          fontWeight: 600,
+          fontSize: 26,
+          width: '100%',
+          color: '#232F46'
+        }
+      }),
+      text: __assign(__assign({
+        parentId: groupId,
+        id: uuid_1.v4()
+      }, getDefaultMetaTextJson()), {
+        text: 'For the text area, you can enter a subtitle or description, the default width is the same as title.',
+        content: {
+          sizeType: 'Body 1',
+          fontFamily: 'Open Sans',
+          fontWeight: 400,
+          fontSize: 18,
+          width: '100%',
+          color: '#232F46'
+        }
+      })
+    }
+  };
+};
+var getDefaultJSON = function () {
+  var groupId = uuid_1.v4();
+  return {
+    id: groupId,
+    type: 'TEXT',
+    title: {
+      headline: __assign(__assign({}, getDefaultMetaTextJson()), {
+        text: 'Title use, click modify text.',
+        content: {
+          sizeType: 'Headline 1',
+          fontFamily: 'Montserrat',
+          fontWeight: 600,
+          fontSize: 68,
+          color: '#232F46'
+        }
+      }),
+      subtitle: __assign(__assign({}, getDefaultMetaTextJson()), {
+        text: 'For the text area, you can enter a subtitle or description',
+        content: {
+          sizeType: 'Title 1',
+          fontFamily: 'Montserrat',
+          fontWeight: 400,
+          fontSize: 32,
+          color: '#232F46'
+        }
+      })
+    },
+    groupSource: [textGroupSourceJSON(groupId), textGroupSourceJSON(groupId), textGroupSourceJSON(groupId)],
+    spacing: {
+      pc: {
+        paddingTop: 10,
+        paddingBottom: 10,
+        marginBottom: 0
+      },
+      mobile: {
+        paddingTop: 10,
+        paddingBottom: 10,
+        marginBottom: 0
+      }
+    },
+    customize: {
+      layout: 'left',
+      align: 'left',
+      rowNum: 3
+    },
+    background: {
+      opacity: 100,
+      color: '#F2F2F2',
+      image: '',
+      bgType: 'color'
+    }
+  };
+};
+
+export { getDefaultJSON, textGroupSourceJSON };

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

@@ -0,0 +1,68 @@
+import { __extends, __decorate } from '../../../../../../node_modules/tslib/tslib.es6.js';
+import React__default, { Component } from 'react';
+import classNames from 'classnames';
+import { getDefaultJSON } from './defaultJSON.js';
+import Text$1 from '../../../../meta-comp/components/Text/index.js';
+import '../../../../meta-comp/components/Button/index.js';
+import '../../../../meta-comp/components/Image/index.js';
+import compositeDecorator from '../../../../decorator/compositeDecorator.js';
+import { computeStyle } from '../../../../utils/businessUtil.js';
+import './index.less.js';
+
+var Text =
+/** @class */
+function (_super) {
+  __extends(Text, _super);
+
+  function Text() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  Text.prototype.render = function () {
+    var _a;
+
+    var nodeData = this.props.nodeData;
+    var wrapStyle = computeStyle(nodeData, window.magicDesign.device);
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "m-text",
+      onClick: this.onComponentClick,
+      style: wrapStyle
+    }, nodeData.title.headline.open && /*#__PURE__*/React__default.createElement("div", {
+      className: "title-wrap"
+    }, /*#__PURE__*/React__default.createElement(Text$1, {
+      data: nodeData.title.headline
+    })), nodeData.title.subtitle.open && /*#__PURE__*/React__default.createElement("div", {
+      className: "sub-title"
+    }, /*#__PURE__*/React__default.createElement(Text$1, {
+      data: nodeData.title.subtitle
+    })), /*#__PURE__*/React__default.createElement("div", {
+      className: classNames('group-content-wrap', 'col-' + nodeData.customize.rowNum, (_a = {}, _a[window.magicDesign.device] = true, _a))
+    }, nodeData.groupSource.map(function (group) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: "group-wrap-container"
+      }, /*#__PURE__*/React__default.createElement("div", {
+        key: group.id,
+        className: "group-wrap",
+        style: {
+          textAlign: nodeData.customize.align
+        }
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: "group-title"
+      }, /*#__PURE__*/React__default.createElement(Text$1, {
+        data: group.content.title
+      })), /*#__PURE__*/React__default.createElement("div", {
+        className: "group-content"
+      }, /*#__PURE__*/React__default.createElement(Text$1, {
+        data: group.content.text
+      }))));
+    })));
+  };
+
+  Text.defaultProps = {};
+  Text.type = 'TEXT';
+  Text.getDefaultJSON = getDefaultJSON;
+  Text = __decorate([compositeDecorator], Text);
+  return Text;
+}(Component);
+
+export { Text as default };