@fonixtree/magic-design 0.0.6 → 0.0.9

package/src/components/composite-comp/bol/config-panels/NewsletterConfig/NewsletterContentSetting/index.js

@@ -0,0 +1,89 @@
+import { __extends } from '../../../../../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import TextConfig$1 from '../../../../../meta-comp/config-panels/TextConfig/index.js';
+import ButtonConfig from '../../../../../meta-comp/config-panels/ButtonConfig/index.js';
+import { renderPreview } from '../../../../../utils/coreUtil.js';
+import '../../../../../common/LayoutSelector/index.js';
+import '../../../../../common/Field/index.js';
+import '../../../../../common/UrlPicker/index.js';
+import '../../../../../common/Iconfont/index.js';
+import '../../../../../common/Button/index.js';
+import '../../../../../common/AlignSelector/index.js';
+import CommonCollapse from '../../../../../common/Collapse/index.js';
+import '../../../../../common/ColorPickerInput/index.js';
+import '../../../../../common/ImagePicker/index.js';
+import '../../../../../common/IconPicker/index.js';
+import '../../../../../common/SwitchCollapse/index.js';
+import '../../../../../common/Slider/index.js';
+import '../../../../../common/FontStyles/index.js';
+import '../../../../../common/ButtonIconLayout/index.js';
+import '../../../../../../../node_modules/axios/index.js';
+import '../../../../../../../node_modules/qs/lib/stringify.js';
+import '../../../../../../../node_modules/qs/lib/utils.js';
+import '../../../../../common/ProductModal/index.js';
+import '../../../../../common/ProductSource/index.less.js';
+import TextConfig from '../InputField/index.js';
+
+var AComponent =
+/** @class */
+function (_super) {
+  __extends(AComponent, _super);
+
+  function AComponent() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {};
+
+    _this.reRender = function () {
+      renderPreview();
+
+      _this.setState({});
+    };
+
+    return _this;
+  }
+
+  AComponent.prototype.render = function () {
+    var panelProps = this.props.panelProps;
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "recommend_content"
+    }, /*#__PURE__*/React__default.createElement(CommonCollapse, {
+      headerSize: "middle",
+      onRefresh: this.reRender,
+      source: [{
+        key: '1',
+        name: 'Input Field',
+        value: /*#__PURE__*/React__default.createElement(TextConfig, {
+          data: panelProps.inputField
+        }),
+        metaOption: panelProps.inputField
+      }, {
+        key: '2',
+        name: 'Button',
+        value: /*#__PURE__*/React__default.createElement(ButtonConfig, {
+          data: panelProps.button
+        }),
+        metaOption: panelProps.button
+      }, {
+        key: '3',
+        name: 'Confirmation',
+        value: /*#__PURE__*/React__default.createElement(TextConfig$1, {
+          data: panelProps.confirmation
+        }),
+        metaOption: panelProps.confirmation
+      }],
+      type: "switch"
+    }));
+  };
+
+  AComponent.defaultProps = {
+    panelProps: {
+      inputField: {},
+      button: {},
+      confirmation: {}
+    }
+  };
+  return AComponent;
+}(React__default.Component);
+
+export { AComponent as default };

package/src/components/composite-comp/bol/config-panels/NewsletterConfig/index.js

@@ -0,0 +1,44 @@
+import React__default from 'react';
+import AComponent from './NewsletterContentSetting/index.js';
+import CommonCollapse from '../../../../common/Collapse/index.js';
+import CustomizeConfig from '../../../common/config-panels/CustomizeConfig/index.js';
+import BackgroundConfig from '../../../common/config-panels/BackgroundConfig/index.js';
+import { newsletterLayout } from '../../../../constants/layout.js';
+import SpacingConfig from '../../../common/config-panels/SpacingConfig/index.js';
+
+function NewsletterConfig(props) {
+  var data = props.data;
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(CommonCollapse, {
+    divider: "bold",
+    headerSize: "large",
+    source: [{
+      key: '1',
+      name: 'Content',
+      value: /*#__PURE__*/React__default.createElement(AComponent, {
+        panelProps: data.content
+      })
+    }, {
+      key: '2',
+      name: 'Spacing',
+      value: /*#__PURE__*/React__default.createElement(SpacingConfig, {
+        data: data.spacing
+      })
+    }, {
+      key: '3',
+      name: 'Customize',
+      value: /*#__PURE__*/React__default.createElement(CustomizeConfig, {
+        data: data.customize,
+        layoutSource: newsletterLayout
+      })
+    }, {
+      key: '4',
+      name: 'Background',
+      value: /*#__PURE__*/React__default.createElement(BackgroundConfig, {
+        data: data.background
+      })
+    }],
+    type: "triangle"
+  }));
+}
+
+export { NewsletterConfig as default };

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

@@ -0,0 +1,88 @@
+import { __extends } from '../../../../../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import ButtonConfig from '../../../../../meta-comp/config-panels/ButtonConfig/index.js';
+import { renderPreview } from '../../../../../utils/coreUtil.js';
+import '../../../../../common/LayoutSelector/index.js';
+import '../../../../../common/Field/index.js';
+import '../../../../../common/UrlPicker/index.js';
+import '../../../../../common/Iconfont/index.js';
+import '../../../../../common/Button/index.js';
+import '../../../../../common/AlignSelector/index.js';
+import CommonCollapse from '../../../../../common/Collapse/index.js';
+import '../../../../../common/ColorPickerInput/index.js';
+import '../../../../../common/ImagePicker/index.js';
+import '../../../../../common/IconPicker/index.js';
+import '../../../../../common/SwitchCollapse/index.js';
+import '../../../../../common/Slider/index.js';
+import '../../../../../common/FontStyles/index.js';
+import '../../../../../common/ButtonIconLayout/index.js';
+import '../../../../../../../node_modules/axios/index.js';
+import '../../../../../../../node_modules/qs/lib/stringify.js';
+import '../../../../../../../node_modules/qs/lib/utils.js';
+import '../../../../../common/ProductModal/index.js';
+import '../../../../../common/ProductSource/index.less.js';
+import ImageConfig from '../../../../../meta-comp/config-panels/ImageConfig/index.js';
+
+var AComponent =
+/** @class */
+function (_super) {
+  __extends(AComponent, _super);
+
+  function AComponent() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {};
+
+    _this.reRender = function () {
+      renderPreview();
+
+      _this.setState({});
+    };
+
+    return _this;
+  }
+
+  AComponent.prototype.render = function () {
+    var panelProps = this.props.panelProps;
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "recommend_content"
+    }, /*#__PURE__*/React__default.createElement(CommonCollapse, {
+      headerSize: "middle",
+      onRefresh: this.reRender,
+      source: [{
+        key: '1',
+        name: 'Image Tag',
+        value: /*#__PURE__*/React__default.createElement(ImageConfig, {
+          data: panelProps.image
+        }),
+        metaOption: panelProps.image
+      }, {
+        key: '2',
+        name: 'Button Tag',
+        value: /*#__PURE__*/React__default.createElement(ButtonConfig, {
+          data: panelProps.button
+        }),
+        metaOption: panelProps.button
+      }, {
+        key: '3',
+        name: 'Secondary Button Tag',
+        value: /*#__PURE__*/React__default.createElement(ButtonConfig, {
+          data: panelProps.secondaryButton
+        }),
+        metaOption: panelProps.secondaryButton
+      }],
+      type: "switch"
+    }));
+  };
+
+  AComponent.defaultProps = {
+    panelProps: {
+      image: {},
+      button: {},
+      secondaryButton: {}
+    }
+  };
+  return AComponent;
+}(React__default.Component);
+
+export { AComponent as default };

package/src/components/composite-comp/bol/config-panels/TagCompConfig/imgs/layout1.png.js

@@ -0,0 +1,3 @@
+var img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALwAAACECAYAAAAqYEFrAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAS5SURBVHgB7d1dbhtVFMDxc8cejz9KsRvUghQkJyygUXmnqGwgYgNdAogFUFgBdAftErqBEjYAYQPYUp/aSBmriu34ay73unFE3XxaqNTn/H9PY8fuw+jfkztzR4qTK8pz3yyl/d20lN4vvN/xvmg755oCvGfe+55zSTcc7CeJ7B0fV5+1Wq53le+6yz6Q58N2mvrvwycfEjg+WF6ejMfyc6tV6170sXODjxM9y0aPvITYgTXhxP9Sr9d/OP/nZ4hTvZLJb+GwLcD66YxH8uCsaZ8sv5HnRzvEjjW3FRp+fnQ03ln+wVsTnskOZd6Z9KfBxzV7JTv+U4gduoToq/cWd3FOlzTxAlWIHfpsZdnwx8WL+YQ/Wcp0BNDJh6XNdlzazCd8mhY/CaCXC3tJ380P8jwPa/dqLoBqLh+Psu0kTdNdAdR782hMWNK4rwXQz5VKpa8Sce6uABYUfqfsFN+KnE5n8uqwL6PJTIrCCy7WqKWy0axLWi6JSi5pu/5gqLKEGPuLl68J/ZqSxMnmnZtao/eJKHXQGxD7CuI5OzgciFZqgx8MJ4LVjCZT0Upt8Fid5t+MBA9TCB6mEDxMIXiYQvAwheBhCsHDFIKHKQQPUwgephA8TCF4mELwMIXgYQrBwxSChykED1MIHqYQPEwheJhC8DCF4GEKwcMUgocpBA9TCB6mEDxMIXiYQvAwheBhCsHDFIKHKQQPUwgephA8TCF4mELwMIXgYQrBwxS1wSfOCbBMbfBZpSxYTaNWEa3UBn/7VoMpv4J4zjaaddHK9QdDtX9nfDot5KA3kMFwLLhYDL1SKYVBcUPSsto56FUHDyzx3KWBKQQPUwgephA8TCF4mELwMIXgYYrq/ffpdCavDvsymsykKNhuuEyjls53WdNySbRSu/EUY3/x8jWhX1OSONm8c1Nr9Ho3nuIjBcR+ffGcHRwORCu1wQ+GE8FqRpOpaMVFK96h+TcjwcMUgocpBA9TCB6mEDxMIXiYQvAwheBhCsHDFIKHKQQPUwgephA8TCF4mELwMIXgYQrBwxSChykED1MIHqYQPEwheJhC8DCF4GEKwcMUgocpBA9TCB6mEDxMIXiYQvAwheBhCsHDFIKHKQQPUwgephA8TCF4mELwMEVt8IlzAixTG3xWKQtW06hVRCu1wd++1WDKryCes41mXbRKxPueKFQuJ/L5px9LXfG0+i/F0KtZWTbDOUvLaudgr+xFumEO7ohCMfrPPrkhwJz33fBf2f8lgAWJ208K7/cE0M8nUtpzeZ43K5WsI841BdDLj0fVW0mr1eoVXp4KoJmTJ62W683v2w2Hw3aIviOATj5xsl2r1brz+0/xoCj8rwLo433hH8fG44vTnZn5Wj6r/hEOtwTQ4+9GvfbF4sXpDkNcy4ex/yAcsrSBFp3Q9Df/fuOtLbU49n0x+1aIHuuvE1teLGUWznzY5OQi9rmwvMH68XIy2Zdjj858aCJ+cDw6vndyIesFWA/zC9R6rfrlWbFHlz5OGKf9rCgeOZc8vOp3gPfI+/gApJOnJecenxf6wpXjDf9os98/3hVX3A9fuxveajt2Z/E/8G+e8O26pLQ/m01+/6jReBZavNJTv/8AGdhTMvCZnhQAAAAASUVORK5CYII=";
+
+export { img as default };

package/src/components/composite-comp/bol/config-panels/TagCompConfig/index.js

@@ -0,0 +1,48 @@
+import React__default from 'react';
+import AComponent from './TagConfigContent/index.js';
+import img from './imgs/layout1.png.js';
+import BackgroundConfig from '../../../common/config-panels/BackgroundConfig/index.js';
+import CustomizeConfig from '../../../common/config-panels/CustomizeConfig/index.js';
+import CommonCollapse from '../../../../common/Collapse/index.js';
+import SpacingConfig from '../../../common/config-panels/SpacingConfig/index.js';
+
+function TagCompConfig(props) {
+  var data = props.data;
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(CommonCollapse, {
+    divider: "bold",
+    headerSize: "large",
+    source: [{
+      key: '1',
+      name: 'Content',
+      value: /*#__PURE__*/React__default.createElement(AComponent, {
+        panelProps: data.content
+      })
+    }, {
+      key: '2',
+      name: 'Spacing',
+      value: /*#__PURE__*/React__default.createElement(SpacingConfig, {
+        data: data.spacing
+      })
+    }, {
+      key: '3',
+      name: 'Customize',
+      value: /*#__PURE__*/React__default.createElement(CustomizeConfig, {
+        data: data.customize,
+        layoutSource: [{
+          id: 'layout1',
+          name: 'layout1',
+          image: img
+        }]
+      })
+    }, {
+      key: '4',
+      name: 'Background',
+      value: /*#__PURE__*/React__default.createElement(BackgroundConfig, {
+        data: data.background
+      })
+    }],
+    type: "triangle"
+  }));
+}
+
+export { TagCompConfig as default };

package/src/components/composite-comp/bol/config-panels/TextCompConfig/TextConfigContent/index.js

@@ -0,0 +1,79 @@
+import { __extends } from '../../../../../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import TextConfig from '../../../../../meta-comp/config-panels/TextConfig/index.js';
+import { renderPreview } from '../../../../../utils/coreUtil.js';
+import '../../../../../common/LayoutSelector/index.js';
+import '../../../../../common/Field/index.js';
+import '../../../../../common/UrlPicker/index.js';
+import '../../../../../common/Iconfont/index.js';
+import '../../../../../common/Button/index.js';
+import '../../../../../common/AlignSelector/index.js';
+import CommonCollapse from '../../../../../common/Collapse/index.js';
+import '../../../../../common/ColorPickerInput/index.js';
+import '../../../../../common/ImagePicker/index.js';
+import '../../../../../common/IconPicker/index.js';
+import '../../../../../common/SwitchCollapse/index.js';
+import '../../../../../common/Slider/index.js';
+import '../../../../../common/FontStyles/index.js';
+import '../../../../../common/ButtonIconLayout/index.js';
+import '../../../../../../../node_modules/axios/index.js';
+import '../../../../../../../node_modules/qs/lib/stringify.js';
+import '../../../../../../../node_modules/qs/lib/utils.js';
+import '../../../../../common/ProductModal/index.js';
+import '../../../../../common/ProductSource/index.less.js';
+
+var AComponent =
+/** @class */
+function (_super) {
+  __extends(AComponent, _super);
+
+  function AComponent() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {};
+
+    _this.reRender = function () {
+      renderPreview();
+
+      _this.setState({});
+    };
+
+    return _this;
+  }
+
+  AComponent.prototype.render = function () {
+    var panelProps = this.props.panelProps;
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "recommend_content"
+    }, /*#__PURE__*/React__default.createElement(CommonCollapse, {
+      headerSize: "middle",
+      onRefresh: this.reRender,
+      source: [{
+        key: '1',
+        name: 'Headline',
+        value: /*#__PURE__*/React__default.createElement(TextConfig, {
+          data: panelProps.headline
+        }),
+        metaOption: panelProps.headline
+      }, {
+        key: '2',
+        name: 'Subtitle',
+        value: /*#__PURE__*/React__default.createElement(TextConfig, {
+          data: panelProps.subtitle
+        }),
+        metaOption: panelProps.subtitle
+      }],
+      type: "switch"
+    }));
+  };
+
+  AComponent.defaultProps = {
+    panelProps: {
+      headline: {},
+      subTitle: {}
+    }
+  };
+  return AComponent;
+}(React__default.Component);
+
+export { AComponent as default };

package/src/components/composite-comp/bol/config-panels/TextCompConfig/TextConfigGroup/index.js

@@ -0,0 +1,85 @@
+import { __extends, __decorate } from '../../../../../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { inject, observer } from '../../../../../../../node_modules/mobx-react/dist/mobxreact.esm.js';
+import Button from '../../../../../common/Button/index.js';
+import GroupList from '../../../../../common/GroupList/index.js';
+import { renderPreview } from '../../../../../utils/coreUtil.js';
+import { textGroupSourceJSON } from '../../../components/Text/defaultJSON.js';
+import './index.less.js';
+
+var notice = '';
+
+var default_1 =
+/** @class */
+function (_super) {
+  __extends(default_1, _super);
+
+  function default_1() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {};
+
+    _this.onClickItem = function (node) {
+      _this.props.store.setState({
+        clickedGroup: node.id
+      });
+    };
+
+    _this.onAddClick = function () {
+      var json = textGroupSourceJSON();
+
+      _this.props.source.push(json);
+
+      _this.setState({});
+
+      renderPreview();
+    };
+
+    _this.reRender = function () {
+      _this.setState({});
+    };
+
+    return _this;
+  }
+
+  default_1.prototype.render = function () {
+    var source = this.props.source;
+
+    var renderCard = function (src) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: "card_wrap"
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: "name"
+      }, src.content.title.text));
+    };
+
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "group_wrap"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "node_list"
+    }, source.length === 0 ? /*#__PURE__*/React__default.createElement("span", {
+      className: "notice"
+    }, notice) : /*#__PURE__*/React__default.createElement(GroupList, {
+      onClickItem: this.onClickItem,
+      renderCard: function (v) {
+        return renderCard(v);
+      },
+      reRender: this.reRender,
+      source: source
+    })), /*#__PURE__*/React__default.createElement("div", {
+      className: "btn_wrap"
+    }, /*#__PURE__*/React__default.createElement(Button, {
+      icon: "icon-add",
+      onClick: this.onAddClick,
+      type: "primary"
+    }, "Add Group")));
+  };
+
+  default_1.defaultProps = {
+    source: []
+  };
+  default_1 = __decorate([inject('store'), observer], default_1);
+  return default_1;
+}(React__default.Component);
+
+export { default_1 as default };

package/src/components/composite-comp/bol/config-panels/TextCompConfig/TextConfigGroup/index.less.js

@@ -0,0 +1,4 @@
+import styleInject from '../../../../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index_group_wrap__LF5XR {\n  margin-bottom: 20px;\n}\n.index_group_wrap__LF5XR .index_node_list__dUQKS {\n  margin-bottom: 12px;\n}\n.index_group_wrap__LF5XR .index_node_list__dUQKS .index_notice__eP8a6 {\n  font-family: 'Open Sans';\n  font-style: normal;\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 24px;\n  color: #232F46;\n}\n";
+styleInject(css_248z);

package/src/components/composite-comp/bol/config-panels/TextCompConfig/imgs/layout1.png.js

@@ -0,0 +1,3 @@
+var img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAS4AAADYCAYAAABV/A7zAAAACXBIWXMAAAsTAAALEwEAmpwYAAAJ+klEQVR4nO3dW5LaSBqG4R8dEWfKdkWHdzVrmB3NHmZVczcXHQ4fcAEFQkik5qLa0R53uctlS8r8ivdZgJSRpF4JAWL0r39v23/+IzMAUPCf/zobHY5l63sgAPAcke8BAMBzES4AcggXADmEC4AcwgVADuECIIdwAZBDuADIIVwA5BAuAHIIFwA5hAuAHMIFQA7hAiCHcAGQQ7gAyEl8D8DMzLWt3R/PVteNXS5+xxLHZuM8tWKcWjQaDbpv17ZWnS92LKsg5iFNEyvGqaXx8Oe3smqYB3uYh/JUW9O4wff9Nd/z8C3vT0Dd7ivb7I7mXFgPYk2SyFazsS3n40H2F+o8mJndLApbL4tB9nUoz/bp7mi15wP1MUPOQ1k19mFzH+Q8rOZjWy+LwU/sX/Mars/b0ja70tfuf8hqPrZXq0mv+1CYh/k0s9ubWa/7UJiHPIvs7e2y14OWeXiat2u+hyuMsF8cM7O7/cm2+1Nv298dNOZhfzjbZtvfOA/lWWIeqrOzzz3OQ3NxMvPw/tO9t/17CZdzrW3vw39xvtjsSnNtPxemdwKL9Ivt/am3efh0d+xlu32425+svvTzFs5nDJ7rUNZWnhov+/YSrrKqg3zv/j3OPXx40LWyauTmYXdfdb7dqr5IzYOZ2b6HeWguzsrKTwh+1uHU/XHxI7yEqzp7/qjoJ5zr7sdcnurOt9m3cw+vXXXWOljN+lkPivNwqq4oXL4/2v0Z7hLep30vheR6cN2P+RLgJ8pP6ekd85P8fyEDAJ6JcAGQQ7gAyCFcAOQQLgByCBcAOYQLgBzCBUAO4QIgh3ABkEO4AMghXADkEC4AcggXADmEC4AcwgVADuECIIdwAZBDuADIIVwA5BAuAHIIFwA5hAuAHMIFQA7hAiCHcAGQQ7gAyCFcAOQQLgByCBcAOYQLgBwv4YqikY/d/pIo7n7MUcR5w8wsSZgHVWns57Xzstcsi33s9pdkadL5NnPBeRiP0863mWfdz23fsh7GPMm7n9u+JYmfNewlXLMik7rqSpLIZpPuF1WRJ1LzYPYw5q7laWx5qnXVtZyNO99mkkS9zG+f5pPcy369vVVcLyY+dv1T5pPcolE/gXm1mvay3T6sF4WlPb2te7We9bLdPizn497mYb0UOi6muRVjP6H1dppbzXNbzrs/a3VtOR/bzbLobfuLaWbrRX/b78p8mvc6D0WeSMxDnkX2etVfXIo8kTiZ9T0PTxkdjmXrbe9mttmWdn+srG6cz2H8RRSNbL0sbNXDW4LH7A5nu9sdg5yH5azfeH+NeXhwKGv7dHcIbh7M/jiZLwqvtzm8h8vMzLnW7sva6rqxy8XvcOJ4ZGkae7sPdyhrO1U18xDQPCRxbPOpv3mozo01AQQszxJv8/CtIMIFAM+h9VEOABjhAiCIcAGQQ7gAyCFcAOQQLgByCBcAOYQLgBzCBUAO4QIgp7NnUtSNC+L3VADCkaRRL09J7SRcu0NlHzaHLjYF4AWJopG9vV1Ynnb7pNROUnh/qLrYDIAXxrnWDsdz59vtJFyTws/jWwGELYpGNp9234fOHmtTnS/mWp6QA+BPeRr38vyuzm7OK/5jDQBNfB0CgBzCBUAO4QIgh3ABkEO4AMghXADkEC4AcggXADmEC4AcwgVATmc/+Rmaa1srT7U1jbPmcrHLxfeIwhfHZqNRZHE0svE47fxRI0OrG2dl9bAG2taxBn7AlzWQZ7FlWdLLs7KGIBeusmrs8/ZoZdX4Hoq8JImsyFNbLwuZBeza1ra7k+2PldU8uPKX5Vlki1lhix6e4NCnzp4O0TeC1a/VfGzrZWHRqPtf8ndlu69sszuacxJLVkqSRLZe6ARMIlzbfWUf73jCat+SJLK3t4vgrr5c29q7D3tOWgNYzcf2ajXxPYwnBR+uz9vSNrvS9zCuRpJE9tvreTD3v5qLs9/f73hbOKA8i+zt7TLoq++wTq3fIFrDaxpn7z7urb6EEYp3H4nW0Kqzs/ef7n0P428FG67m4oiWJ03j7EMAC/fztrTqTLR8OJS1bfcn38P4rmDD9fv7ne8hXLWyarwuXE5c/m12ZTBX3t8KMly7Ax91h2CzK739j8Bme/SyX/zJuTbYq64gw8XfnYXBuYcv+Q6tuTjbH7r/Sys83/5QBfknOMGFq7k4PvYOiI+AHD3EEo9zrrX7Hv4X8VcFF67qTLRCUlbDR+RYhnegXLNzHd5vqQIMV3iTdM2cawe/39g0rIGQnAO8mAguXA035YPTDnyPo76Ed0/lmoX4yWJw4UJ4LgOHhN8i4imEC4AcwgVADuECIIdwAZBDuADIIVwA5BAuAHIIFwA5hAuAHMIFQA7hAiCHcAGQQ7gAyCFcAOQQLgByCBcAOYQLgBzCBUAO4QIgh3ABkEO4AMghXADkEC4AcggXADmEC4AcwgVADuECIIdwAZBDuADIIVwA5BAuAHIIFwA5hAuAHMIFQA7hAiCHcAGQQ7gAyCFcAOQQLgByCBcAOYQLgBzCBUAO4QIgh3ABkEO4AMghXADkEC4AcggXADmEC4AcwgVADuECIIdwAZBDuADIIVwA5BAuAHIIFwA5hAuAHMIFQA7hAiCHcAGQQ7gAyCFcAOQQLgByCBcAOYQLgBzCBUAO4QIgh3ABkEO4AMghXADkEC4AcggXADmEC4AcwgVADuECIIdwAZBDuBCcKBr5HgICF1y4WLThSZJhl0nMGghKGgeXifDClWWx7yHgK1E0snTgcGUpayAkSRLe6xFcuCZ56nsI+EruISJZmgy+T3zfOMBjMrhwJUlkeRrcsK7WbDoefJ/FOLwD5ZoVeXgnkiALMSly30OAPZxEfCzaIk+CPFiu0XyaD36r4EeENyIzW83H3KQPwHzib9GulxMv+8X/Wy8K30N4VJDhiqKR3d7MfA/jqiVJZKv58G8TvyjyxKZF5m3/MFvOx0FebZkFGi4zs2mR2tLjgXPt3r5ZeL/qvb2ZBnvgvHRJEtlNoFdbZgGHy8zs9Wpi8yln3aG9uZkFEYwoGtnbN4sgxnJNkiQK4sT1d4JfEbc3M668BhJFI/vt9dwWAZ0svhxExGsYeaYx36PDsWx9D+JH7A5nu9sdrW6c76G8SEWeBHOl9RjnWtvsStvuT76H8mIt52O7WRRBX2l9IRMuM7OmcbY7VHZ/rAhYR4o8sfVyIvP1g6ZxttmVtj9UvofyIkTRyBbT3BazcG/EP0YqXF8rq8bKU23n+mLOEbEfFUWRpUlkaRrbrMgkzq6Pca61smrsVNVWN4418AxJHFscj2xSZJanseQakA0XgOulc20IAH8gXADkEC4AcggXADmEC4AcwgVADuECIIdwAZBDuADIIVwA5BAuAHIIFwA5hAuAHMIFQA7hAiCHcAGQQ7gAyCFcAOQQLgBy/gehRAcC4QafRgAAAABJRU5ErkJggg==";
+
+export { img as default };

package/src/components/composite-comp/bol/config-panels/TextCompConfig/index.js

@@ -0,0 +1,55 @@
+import React__default from 'react';
+import default_1 from './TextConfigGroup/index.js';
+import AComponent from './TextConfigContent/index.js';
+import img from './imgs/layout1.png.js';
+import BackgroundConfig from '../../../common/config-panels/BackgroundConfig/index.js';
+import CustomizeConfig from '../../../common/config-panels/CustomizeConfig/index.js';
+import CommonCollapse from '../../../../common/Collapse/index.js';
+import SpacingConfig from '../../../common/config-panels/SpacingConfig/index.js';
+
+function TextConfig(props) {
+  var data = props.data;
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(CommonCollapse, {
+    divider: "bold",
+    headerSize: "large",
+    source: [{
+      key: '1',
+      name: 'Title',
+      value: /*#__PURE__*/React__default.createElement(AComponent, {
+        panelProps: data.title
+      })
+    }, {
+      key: '2',
+      name: 'Group',
+      value: /*#__PURE__*/React__default.createElement(default_1, {
+        source: data.groupSource
+      })
+    }, {
+      key: '3',
+      name: 'Spacing',
+      value: /*#__PURE__*/React__default.createElement(SpacingConfig, {
+        data: data.spacing
+      })
+    }, {
+      key: '4',
+      name: 'Customize',
+      value: /*#__PURE__*/React__default.createElement(CustomizeConfig, {
+        data: data.customize,
+        layoutSource: [{
+          id: 'layout1',
+          name: 'left',
+          image: img
+        }]
+      })
+    }, {
+      key: '5',
+      name: 'Background',
+      value: /*#__PURE__*/React__default.createElement(BackgroundConfig, {
+        data: data.background
+      })
+    }],
+    type: "triangle"
+  }));
+}
+
+export { TextConfig as default };

package/src/components/composite-comp/bol/second-config-panels/BannerSecondConfig/index.js

@@ -0,0 +1,109 @@
+import { __extends } from '../../../../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { renderPreview } from '../../../../utils/coreUtil.js';
+import CommonCollapse from '../../../../common/Collapse/index.js';
+import ImageConfig from '../../../../meta-comp/config-panels/ImageConfig/index.js';
+import ButtonConfig from '../../../../meta-comp/config-panels/ButtonConfig/index.js';
+import TextConfig from '../../../../meta-comp/config-panels/TextConfig/index.js';
+import BackgroundConfig from '../../../common/config-panels/BackgroundConfig/index.js';
+import CustomizeConfig from '../../../common/config-panels/CustomizeConfig/index.js';
+
+require('debug')('worker:BannerSecondConfig');
+
+var BannerSecondConfig =
+/** @class */
+function (_super) {
+  __extends(BannerSecondConfig, _super);
+
+  function BannerSecondConfig() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {};
+
+    _this.getContentPanel = function () {
+      var panelProps = _this.props.panelProps;
+      var source = [{
+        key: '1',
+        name: 'Image',
+        value: /*#__PURE__*/React__default.createElement(ImageConfig, {
+          data: panelProps.image
+        }),
+        metaOption: panelProps.image
+      }, {
+        key: '2',
+        name: 'Title',
+        value: /*#__PURE__*/React__default.createElement(TextConfig, {
+          data: panelProps.title
+        }),
+        metaOption: panelProps.title
+      }, {
+        key: '3',
+        name: 'Text',
+        value: /*#__PURE__*/React__default.createElement(TextConfig, {
+          data: panelProps.text
+        }),
+        metaOption: panelProps.text
+      }, {
+        key: '4',
+        name: 'Button',
+        value: /*#__PURE__*/React__default.createElement(ButtonConfig, {
+          data: panelProps.button
+        }),
+        metaOption: panelProps.button
+      }, {
+        key: '5',
+        name: 'Secondary Button',
+        value: /*#__PURE__*/React__default.createElement(ButtonConfig, {
+          data: panelProps.secondButton
+        }),
+        metaOption: panelProps.secondButton
+      }];
+      return /*#__PURE__*/React__default.createElement(CommonCollapse, {
+        headerSize: "middle",
+        onRefresh: function () {
+          return renderPreview();
+        },
+        showActiveColor: true,
+        source: source,
+        type: "switch"
+      });
+    };
+
+    return _this;
+  }
+
+  BannerSecondConfig.prototype.render = function () {
+    var panelProps = this.props.panelProps;
+    console.log('---banner second,', panelProps);
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "banner_second_conf_wrap"
+    }, /*#__PURE__*/React__default.createElement(CommonCollapse, {
+      divider: "bold",
+      headerSize: "large",
+      source: [{
+        key: '1',
+        name: 'Content',
+        value: this.getContentPanel()
+      }, {
+        key: '2',
+        name: 'Customize',
+        value: /*#__PURE__*/React__default.createElement(CustomizeConfig, {
+          data: panelProps.customize
+        })
+      }, {
+        key: '3',
+        name: 'Background',
+        value: /*#__PURE__*/React__default.createElement(BackgroundConfig, {
+          data: panelProps.background
+        })
+      }]
+    }));
+  };
+
+  BannerSecondConfig.defaultProps = {
+    panelProps: {}
+  };
+  return BannerSecondConfig;
+}(React__default.Component);
+
+export { BannerSecondConfig as default };