ecomlab-components-next 0.1.7 → 0.1.8

package/dist/components/Buttons/ButtonBasic/ButtonBasic.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+require("./ButtonBasic.scss");
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var ButtonBasic = function ButtonBasic(_ref) {
+  var text = _ref.text,
+    _onClick = _ref.onClick,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 210 : _ref$width,
+    minWidth = _ref.minWidth,
+    size = _ref.size,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    props = _ref.props,
+    maxWidth = _ref.maxWidth,
+    style = _ref.style,
+    _ref$blue = _ref.blue,
+    blue = _ref$blue === void 0 ? false : _ref$blue,
+    _ref$orange = _ref.orange,
+    orange = _ref$orange === void 0 ? false : _ref$orange,
+    _ref$red = _ref.red,
+    red = _ref$red === void 0 ? false : _ref$red,
+    _ref$green = _ref.green,
+    green = _ref$green === void 0 ? false : _ref$green,
+    _ref$whiteBlue = _ref.whiteBlue,
+    whiteBlue = _ref$whiteBlue === void 0 ? false : _ref$whiteBlue,
+    _ref$grey = _ref.grey,
+    grey = _ref$grey === void 0 ? false : _ref$grey,
+    _ref$violet = _ref.violet,
+    violet = _ref$violet === void 0 ? false : _ref$violet,
+    _ref$lilac = _ref.lilac,
+    lilac = _ref$lilac === void 0 ? false : _ref$lilac,
+    _ref$action = _ref.action,
+    action = _ref$action === void 0 ? false : _ref$action,
+    _ref$white = _ref.white,
+    white = _ref$white === void 0 ? false : _ref$white,
+    _ref$whiteGreen = _ref.whiteGreen,
+    whiteGreen = _ref$whiteGreen === void 0 ? false : _ref$whiteGreen,
+    _ref$darkViolet = _ref.darkViolet,
+    darkViolet = _ref$darkViolet === void 0 ? false : _ref$darkViolet;
+  // Если передан только "width" - то она становится статичной шириной, кнопка не расширяется и не сужается
+  // Если передана "minWidth" кнопка становится пластичной и тянется до with(наибольшей ширины), minWidt(наименьшей ширины)
+
+  var colorClassName = function colorClassName() {
+    if (blue) return 'blue-btn';
+    if (whiteBlue) return 'white-blue-btn';
+    if (green) return 'green-btn';
+    if (orange) return 'orange-btn';
+    if (red) return 'red-btn';
+    if (grey) return 'grey-btn';
+    if (violet) return 'violet-btn';
+    if (lilac) return 'lilac-btn';
+    if (action) return 'action-btn';
+    if (white) return 'white-btn';
+    if (whiteGreen) return 'white-green-btn';
+    if (darkViolet) return 'dark-violet-btn';
+  };
+  return /*#__PURE__*/React.createElement("button", _extends({
+    className: "btn-basic ".concat(colorClassName() || 'violet-btn'),
+    disabled: disabled,
+    style: _objectSpread(_defineProperty({
+      minWidth: minWidth ? minWidth : '',
+      width: width ? width : '',
+      maxWidth: maxWidth ? maxWidth : '',
+      height: size ? size : '40px'
+    }, "maxWidth", maxWidth ? maxWidth : ''), style),
+    onClick: function onClick(e) {
+      return _onClick(e);
+    }
+  }, props), text);
+};
+var _default = exports["default"] = ButtonBasic;

package/dist/components/Buttons/ButtonBasic/ButtonBasic.scss

@@ -0,0 +1,441 @@
+.btn-basic {
+    width: 100%;
+    min-height: 32px;
+    font-size: 13px;
+    // max-width: 200px;
+    width: 200px;
+    border-radius: 8px;
+    border: none;
+    //margin-top: 32px;
+    color: white;
+    font-family: Rubik;
+    font-weight: 500;
+    min-width: 120px;
+    padding: 4px 8px;
+    cursor: pointer;
+}
+
+.green-btn {
+    background-color: #22C55E;
+
+    &:hover {
+        background: #16A34A;
+        transition: 0.5s;
+    }
+
+    &[disabled] {
+        position: relative;
+        cursor: not-allowed;
+        background-color: #BBF7D0;
+        color: #ffffff;
+        -webkit-box-shadow: none;
+        -moz-box-shadow: none;
+        box-shadow: none;
+
+        &:hover {
+            box-shadow: none;
+            background-color: #BBF7D0;
+            box-shadow: none;
+        }
+
+        &:active {
+            border: none;
+        }
+
+    }
+}
+
+.blue-btn {
+    background-color: #1890FF;
+    box-shadow: 2px 4px 10px 0px rgba(24, 144, 255, 0.25);
+
+    &:hover {
+        -webkit-box-shadow: none;
+        -moz-box-shadow: none;
+        box-shadow: none;
+        background-color: #005DB2;
+        transition: 0.5s;
+        box-shadow: none;
+    }
+
+    &:active {
+        background-color: #1890FF;
+        border: 2px solid #005DB2;
+    }
+
+    &[disabled] {
+        position: relative;
+        cursor: not-allowed;
+        background-color: #B2DAFF;
+        color: #ffffff;
+        -webkit-box-shadow: none;
+        -moz-box-shadow: none;
+        box-shadow: none;
+
+        &:hover {
+            box-shadow: none;
+            background-color: #B2DAFF;
+            box-shadow: none;
+        }
+
+        &:active {
+            border: none;
+        }
+
+    }
+}
+
+.orange-btn {
+    background-color: #FB923C;
+
+    &:hover {
+        -webkit-box-shadow: none;
+        -moz-box-shadow: none;
+        box-shadow: none;
+        background-color: #F97316;
+        transition: 0.5s;
+        box-shadow: none;
+    }
+
+    &:active {
+        background-color: #FB923C;
+        border: 2px solid #F97316;
+    }
+
+    &[disabled] {
+        position: relative;
+        cursor: not-allowed;
+        background-color: #FFEDD5;
+        color: #ffffff;
+        -webkit-box-shadow: none;
+        -moz-box-shadow: none;
+        box-shadow: none;
+
+        &:hover {
+            box-shadow: none;
+            background-color: #FFEDD5;
+            box-shadow: none;
+        }
+
+        &:active {
+            border: none;
+        }
+
+    }
+}
+
+.white-green-btn {
+    color: #0B110B;
+    background: white;
+    border: 1px solid #51CA64;
+
+    &:hover {
+        background-color: #E0E7F2;
+        border: 1px solid #0B110B;
+        transition: all 0.5s;
+    }
+
+    &:active {
+        transition: all 0.5s;
+        border: 2px solid #51CA64;
+    }
+
+    &[disabled] {
+        position: relative;
+        cursor: not-allowed;
+        border: none;
+        opacity: 0.5;
+        color: #0B110B;
+        -webkit-box-shadow: none;
+        -moz-box-shadow: none;
+        box-shadow: none;
+        border: 1px solid #0B110B;
+
+        &:hover {
+            background-color: #fff;
+            border: 1px solid #0B110B;
+            box-shadow: none;
+        }
+
+        &:active {
+            border: none;
+        }
+
+    }
+}
+
+.white-blue-btn {
+    color: #1890FF;
+    background: white;
+    border: 1px solid #1890FF;
+
+    &:hover {
+        background-color: #E0E7F2;
+        border: 1px solid #1890FF;
+        transition: all 0.5s;
+    }
+
+    &:active {
+        transition: all 0.5s;
+        border: 2px solid #1890FF;
+    }
+
+    &[disabled] {
+        position: relative;
+        cursor: not-allowed;
+        background-color: #E1E6EA;
+        border: none;
+        color: #A9B3BC;
+        -webkit-box-shadow: none;
+        -moz-box-shadow: none;
+        box-shadow: none;
+
+        &:hover {
+            box-shadow: none;
+            border: none;
+            background-color: #E1E6EA;
+            box-shadow: none;
+        }
+
+        &:active {
+            border: none;
+        }
+
+    }
+}
+
+.red-btn {
+    background-color: #F87171;
+    color: white;
+
+    &:hover {
+        background-color: #EF4444;
+        transition: 0.5s;
+    }
+
+    &:active {
+        background-color: #F87171;
+        border: 2px solid #EF4444;
+        transition: 0.5s;
+    }
+
+    &[disabled] {
+        position: relative;
+        cursor: not-allowed;
+        background-color: #FEE2E2;
+        color: #ffffff;
+        -webkit-box-shadow: none;
+        -moz-box-shadow: none;
+        box-shadow: none;
+
+        &:hover {
+            box-shadow: none;
+            background-color: #FEE2E2;
+            box-shadow: none;
+        }
+
+        &:active {
+            border: none;
+        }
+
+    }
+}
+
+.grey-btn {
+    color: #0B110B;
+    text-align: center;
+    font-family: NunitoSans;
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 16px;
+    background: #D2D9D2;
+
+    &:hover {
+        background-color: #BBC6BB;
+        transition: all 0.5s;
+    }
+
+    &:active {
+        transition: all 0.5s;
+        border: 3px solid #EDEFED;
+    }
+
+    &[disabled] {
+        position: relative;
+        cursor: not-allowed;
+        background-color: #EFEEF2;
+        border: none;
+        color: #D2D9D2;
+        -webkit-box-shadow: none;
+        -moz-box-shadow: none;
+        box-shadow: none;
+
+        &:hover {
+            box-shadow: none;
+            border: none;
+            background-color: #F1F5F9;
+            box-shadow: none;
+        }
+
+        &:active {
+            border: none;
+        }
+
+    }
+}
+
+.violet-btn, .dark-violet-btn {
+    background-color: #3900B1;
+    color: white;
+
+    &:hover {
+        background-color: #24006F;
+        transition: 0.5s;
+    }
+
+    &:active {
+        background-color: #3900B1;
+        border: 2px solid #24006F;
+        transition: 0.5s;
+    }
+
+    &[disabled] {
+        position: relative;
+        cursor: not-allowed;
+        background-color: #ABADE4;
+        color: #EAEAF9;
+        -webkit-box-shadow: none;
+        -moz-box-shadow: none;
+        box-shadow: none;
+
+        &:hover {
+            box-shadow: none;
+            background-color: #ABADE4;
+            box-shadow: none;
+        }
+
+        &:active {
+            border: none;
+        }
+
+    }
+}
+
+.dark-violet-btn {
+  background-color: #3B0764;  
+
+  &:hover {
+    background-color: #7A2ABA;
+  }
+}
+
+.lilac-btn {
+    background-color: #E4E5F9;
+    color: #555C9E;
+
+    &:hover {
+        background-color: #C5C8F0;
+        transition: 0.5s;
+    }
+
+    &:active {
+        background-color: #C5C8F0;
+        border: 2px solid #3900B1;
+        transition: 0.5s;
+    }
+
+    &[disabled] {
+        position: relative;
+        cursor: not-allowed;
+        background-color: #fff;
+        color: #A9B3BC;
+        -webkit-box-shadow: none;
+        -moz-box-shadow: none;
+        box-shadow: none;
+        border: solid 2px rgba(57, 0, 177, 0.20);
+
+        &:hover {
+            box-shadow: none;
+        }
+
+        &:active {
+            border: border 2px #cfcbf0;
+        }
+    }
+}
+
+.action-btn {
+    background: #00B45E;
+    color: #F0FDF4;
+    text-align: center;
+    font-family: NunitoSans;
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px;
+    border-radius: 8px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &:hover {
+        background: #15803D;
+        transition: 0.5s;
+    }
+
+    &[disabled] {
+        position: relative;
+        cursor: not-allowed;
+        background: #C8D0CB;
+
+        &:hover {
+            box-shadow: none;
+        }
+
+        &:active {
+            border: border 2px #cfcbf0;
+        }
+    }
+}
+
+.white-btn {
+    color: #51CA64;
+    background: white;
+    border: 1px solid #51CA64;
+
+    &:hover {
+        background-color: #51CA64;
+        color: #fff;
+        //     border: 1px solid #51CA64;
+        transition: all 0.5s;
+    }
+
+    &:active {
+        transition: all 0.5s;
+        border: 2px solid #51CA64;
+    }
+
+    &[disabled] {
+        position: relative;
+        cursor: not-allowed;
+        background-color: #E1E6EA;
+        border: none;
+        color: #A9B3BC;
+        -webkit-box-shadow: none;
+        -moz-box-shadow: none;
+        box-shadow: none;
+
+        &:hover {
+            box-shadow: none;
+            border: none;
+            background-color: #E1E6EA;
+            box-shadow: none;
+        }
+
+        &:active {
+            border: none;
+        }
+
+    }
+}

package/dist/components/Buttons/ButtonBasic/ButtonBasic.stories.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _ButtonBasic = _interopRequireDefault(require("./ButtonBasic"));
+var _addonActions = require("@storybook/addon-actions");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var _default = exports["default"] = {
+  title: 'ButtonBasic',
+  component: _ButtonBasic["default"],
+  args: {
+    text: 'Кнопка',
+    onClick: _addonActions.action,
+    width: '210px',
+    minWidth: '210px',
+    size: '40px',
+    disabled: false,
+    maxWidth: '210px',
+    style: false,
+    blue: false,
+    orange: false,
+    red: false,
+    green: false,
+    whiteBlue: false,
+    grey: false
+  }
+};
+var Default = exports.Default = {
+  render: function render(args) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '10px',
+        flexDirection: 'column'
+      }
+    }, /*#__PURE__*/React.createElement(_ButtonBasic["default"], _extends({}, args, {
+      blue: true
+    })), /*#__PURE__*/React.createElement(_ButtonBasic["default"], _extends({}, args, {
+      whiteBlue: true
+    })), /*#__PURE__*/React.createElement(_ButtonBasic["default"], _extends({}, args, {
+      green: true
+    })), /*#__PURE__*/React.createElement(_ButtonBasic["default"], _extends({}, args, {
+      orange: true
+    })), /*#__PURE__*/React.createElement(_ButtonBasic["default"], _extends({}, args, {
+      red: true
+    })), /*#__PURE__*/React.createElement(_ButtonBasic["default"], _extends({}, args, {
+      grey: true
+    })), /*#__PURE__*/React.createElement(_ButtonBasic["default"], _extends({}, args, {
+      violet: true
+    })), /*#__PURE__*/React.createElement(_ButtonBasic["default"], _extends({}, args, {
+      lilac: true
+    })), /*#__PURE__*/React.createElement(_ButtonBasic["default"], _extends({}, args, {
+      action: true
+    })), /*#__PURE__*/React.createElement(_ButtonBasic["default"], _extends({}, args, {
+      white: true
+    })), /*#__PURE__*/React.createElement(_ButtonBasic["default"], _extends({}, args, {
+      whiteGreen: true
+    })), /*#__PURE__*/React.createElement(_ButtonBasic["default"], _extends({}, args, {
+      darkViolet: true
+    })));
+  }
+};

package/dist/components/ConstructorComponents/ClientsAboutUs/ClientsAboutUs.js

@@ -0,0 +1,78 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _ButtonBasic = _interopRequireDefault(require("@/components/Buttons/ButtonBasic/ButtonBasic"));
+var _react = require("react");
+require("./ClientsAboutUs.scss");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var list_about_us = [{
+  title: 'До сотрудничества с ECOMRU:',
+  description: /*#__PURE__*/React.createElement(React.Fragment, null, "\xB7 \u0411\u043E\u043B\u0435\u0435 4 \u0447\u0430\u0441\u043E\u0432 \u0432 \u0434\u0435\u043D\u044C \u0443\u0445\u043E\u0434\u0438\u043B\u043E \u043D\u0430 \u043C\u043E\u043D\u0438\u0442\u043E\u0440\u0438\u043D\u0433 \u043A\u043E\u043D\u043A\u0443\u0440\u0435\u043D\u0442\u043E\u0432 (\u0446\u0435\u043D\u044B, \u0430\u0441\u0441\u043E\u0440\u0442\u0438\u043C\u0435\u043D\u0442, \u043C\u0430\u0440\u043A\u0435\u0442\u0438\u043D\u0433\u043E\u0432\u044B\u0435 \u0430\u043A\u0442\u0438\u0432\u043D\u043E\u0441\u0442\u0438)", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "\xB7 \u0414\u043E\u0445\u043E\u0434\u043D\u043E\u0441\u0442\u044C \u0431\u0438\u0437\u043D\u0435\u0441\u0430 \u0441\u0442\u043E\u044F\u043B\u0430 \u043D\u0430 \u043C\u0435\u0441\u0442\u0435, \u0438\u0437-\u0437\u0430 \u043D\u0435\u0445\u0432\u0430\u0442\u043A\u0438 \u0432\u0440\u0435\u043C\u0435\u043D\u0438 \u043D\u0430 \u0434\u0440\u0443\u0433\u0438\u0435 \u043F\u0440\u043E\u0446\u0435\u0441\u0441\u044B", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "\xB7 \u041D\u0435\u0431\u044B\u043B\u043E \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E\u0441\u0442\u0438 \u0434\u043B\u044F \u043C\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043E\u0432\u0430\u043D\u0438\u044F")
+}, {
+  title: 'При сотрудничестве с ECOMRU:',
+  description: /*#__PURE__*/React.createElement(React.Fragment, null, "\xB7 \u0417\u0430\u0442\u0440\u0430\u0442\u044B \u0432\u0440\u0435\u043C\u0435\u043D\u0438 \u043D\u0430 \u0430\u043D\u0430\u043B\u0438\u0437 \u043A\u043E\u043D\u043A\u0443\u0440\u0435\u043D\u0442\u043E\u0432 \u0441\u043E\u043A\u0440\u0430\u0442\u0438\u043B\u0438\u0441\u044C \u0441 4 \u0447\u0430\u0441\u043E\u0432 \u0434\u043E 1 \u0447\u0430\u0441\u0430 \u0432 \u0434\u0435\u043D\u044C", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "\xB7 \u0410\u0432\u0442\u043E\u043C\u0430\u0442\u0438\u0437\u0438\u0440\u043E\u0432\u0430\u043B\u0438 \u0446\u0435\u043D\u043E\u043E\u0431\u0440\u0430\u0437\u043E\u0432\u0430\u043D\u0438\u0435, \u043D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0443 \u0440\u0435\u043A\u043B\u0430\u043C\u043D\u044B\u0445 \u043A\u0430\u043C\u043F\u0430\u043D\u0438\u0439 \u0438 \u0430\u0432\u0442\u043E\u043E\u0442\u0432\u0435\u0442\u044B \u043D\u0430 \u043E\u0442\u0437\u044B\u0432\u044B", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "\xB7 \u0421\u043E\u0437\u0434\u0430\u043B\u0438 \u043C\u0430\u0433\u0430\u0437\u0438\u043D \u043D\u0430 OZON (\u0440\u0430\u043D\u044C\u0448\u0435 \u0431\u044B\u043B \u0442\u043E\u043B\u044C\u043A\u043E \u043D\u0430 Wildberries)", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "\xB7 \u0420\u0430\u0441\u0448\u0438\u0440\u0438\u043B\u0438 \u0430\u0441\u0441\u043E\u0440\u0442\u0438\u043C\u0435\u043D\u0442 \u043D\u0430 \u0442\u0440\u0435\u0442\u044C, \u043D\u0430\u0448\u043B\u0438 \u043D\u043E\u0432\u044B\u0435 \u043F\u0435\u0440\u0441\u043F\u0435\u043A\u0442\u0438\u0432\u043D\u044B\u0435 \u0442\u043E\u0432\u0430\u0440\u044B \u0432 \u0441\u0432\u043E\u0435\u0439 \u043D\u0438\u0448\u0435", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "\xB7 \u0423\u0432\u0435\u043B\u0438\u0447\u0438\u043B\u0438 \u043F\u0440\u0438\u0431\u044B\u043B\u044C \u0432\u0434\u0432\u043E\u0435, \u0438 \u043E\u043D\u0430 \u043F\u0440\u043E\u0434\u043E\u043B\u0436\u0430\u0435\u0442 \u0440\u0430\u0441\u0442\u0438 \u043A\u0430\u0436\u0434\u044B\u0439 \u043C\u0435\u0441\u044F\u0446")
+}];
+var ClientsAboutUs = function ClientsAboutUs(_ref) {
+  var blockquote = _ref.blockquote,
+    cite = _ref.cite,
+    title = _ref.title;
+  var _useState = (0, _react.useState)(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    refPage = _useState2[0],
+    setRefPage = _useState2[1];
+  (0, _react.useEffect)(function () {
+    var _window;
+    var currentUrl = (_window = window) === null || _window === void 0 || (_window = _window.location) === null || _window === void 0 ? void 0 : _window.href;
+    setRefPage("?ref_page=".concat(currentUrl));
+  }, []);
+  return /*#__PURE__*/React.createElement("section", {
+    className: "clients-about-us"
+  }, title && /*#__PURE__*/React.createElement("h2", {
+    className: "clients-about-us__title"
+  }, title), (blockquote || cite) && /*#__PURE__*/React.createElement("div", {
+    className: "clients-about-us__header"
+  }, blockquote && /*#__PURE__*/React.createElement("blockquote", {
+    className: "clients-about-us__blockquote"
+  }, blockquote), cite && /*#__PURE__*/React.createElement("cite", {
+    className: "clients-about-us__cite"
+  }, cite)), /*#__PURE__*/React.createElement("div", {
+    className: "clients-about-us__cards"
+  }, list_about_us.map(function (_ref2, ind) {
+    var title = _ref2.title,
+      description = _ref2.description,
+      btnName = _ref2.btnName;
+    return /*#__PURE__*/React.createElement("div", {
+      className: ind == 1 ? 'clients-about-us__card-black' : 'clients-about-us__card'
+    }, /*#__PURE__*/React.createElement("h3", {
+      className: "clients-about-us__card-title"
+    }, title), /*#__PURE__*/React.createElement("p", {
+      className: "clients-about-us__card-description"
+    }, description), ind == 1 ? /*#__PURE__*/React.createElement(_ButtonBasic["default"], {
+      green: true,
+      text: btnName ? btnName : 'Подключиться',
+      onClick: function onClick() {
+        var _window2;
+        return (_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.open("https://lk.ecomru.ru/auth".concat(refPage), '_blunk');
+      },
+      width: "130px",
+      minWidth: "130px"
+    }) : /*#__PURE__*/React.createElement("button", {
+      onClick: function onClick() {
+        var _window3;
+        return (_window3 = window) === null || _window3 === void 0 ? void 0 : _window3.open("https://lk.ecomru.ru/auth".concat(refPage), '_blunk');
+      },
+      className: "clients-about-us__card-btn"
+    }, btnName ? btnName : 'Подключиться'));
+  })));
+};
+var _default = exports["default"] = ClientsAboutUs;

package/dist/components/ConstructorComponents/ClientsAboutUs/ClientsAboutUs.scss

@@ -0,0 +1,245 @@
+.clients-about-us {
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+
+    &__title {
+        color: #333;
+        font-family: "Golos Text";
+        font-size: 42px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 51px;
+    }
+
+    &__header {
+        display: flex;
+        gap: 100px;
+    }
+
+    &__blockquote {
+        color: #333;
+        font-family: "Golos Text";
+        font-size: 22px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 32px;
+    }
+
+    &__cite {
+        color: #333;
+        font-family: "Golos Text";
+        font-size: 16px;
+        // font-style: normal;
+        font-weight: 400;
+        line-height: 24px;
+    }
+
+    &__items {
+        display: flex;
+        gap: 18px;
+    }
+
+    &__cards {
+        display: flex;
+        width: 100%;
+        gap: 18px;
+    }
+
+    &__card, &__card-black {
+        display: flex;
+        padding: 24px;
+        width: calc(100%);
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 24px;
+        border-radius: 20px;
+        background: #EEE;
+        min-width: 220px;
+    }
+
+    &__card-black {
+        background: #333333;
+
+        .clients-about-us__card-title, .clients-about-us__card-description {
+            color: #FFF;
+        }
+    }
+
+    &__card-title {
+        color: #333;
+        font-family: "Golos Text";
+        font-size: 24px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 32px;
+    }
+
+    &__card-description {
+        color: #333;
+        font-family: "Golos Text";
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px;
+    }
+
+    &__card-btn {
+        display: flex;
+        height: 40px;
+        padding: 4px 18px;
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+        border-radius: var(--Main-System-10px, 10px);
+        background: #333;
+        border: none;
+        color: #FFF;
+        text-align: center;
+        color: white;
+        font-family: Rubik;
+        font-weight: 500;
+        margin-top: auto;
+        cursor: pointer;
+        
+        &:hover {
+            background-color: inherit;
+            transition: 0.5s;
+            color: black;
+            border: 1px solid black;
+        }
+    }
+
+}
+
+@media (max-width: 1100px) {
+    .clients-about-us {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+
+        &__title {
+            font-size: 28px;
+            line-height: 32px;
+        }
+
+        &__header {
+            display: flex;
+            gap: 40px;
+        }
+
+        &__blockquote {
+            font-size: 22px;
+            line-height: 32px;
+        }
+
+        &__cite {
+            font-size: 16px;
+            line-height: 24px;
+        }
+
+        &__items {}
+
+        &__cards {}
+
+        &__card {}
+
+        &__card-title {}
+
+        &__card-description {}
+
+        &__card-btn {}
+    }
+}
+
+@media (max-width: 768px) {
+    .clients-about-us {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+
+        &__title {
+            font-size: 28px;
+            line-height: 32px;
+        }
+
+        &__header {
+            display: flex;
+            gap: 40px;
+        }
+
+        &__blockquote {
+            font-size: 22px;
+            line-height: 32px;
+        }
+
+        &__cite {
+            font-size: 16px;
+            line-height: 24px;
+        }
+
+        &__items {}
+
+        &__cards {
+            flex-direction: column;
+        }
+
+        &__card {}
+
+        &__card-title {}
+
+        &__card-description {}
+
+        &__card-btn {}
+    }
+}
+
+@media (max-width: 430px) {
+    .clients-about-us {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+
+        &__title {
+            font-size: 20px;
+            line-height: 24px;
+        }
+
+        &__header {
+            flex-direction: column;
+            gap: 22px;
+        }
+
+        &__blockquote {
+            font-size: 18px;
+            line-height: 24px;
+        }
+
+        &__cite {
+            font-size: 16px;
+            line-height: 24px;
+        }
+
+        &__items {}
+
+        &__cards {
+            flex-direction: column;
+        }
+
+        &__card {
+            padding: 24px;
+            gap: 20px;
+        }
+
+        &__card-title {
+            font-size: 16px;
+            line-height: 24px;
+        }
+
+        &__card-description {
+            gap: 14px;
+        }
+
+        &__card-btn {}
+    }
+}

package/dist/components/ConstructorComponents/ClientsAboutUs/ClientsAboutUs.stories.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ClientsAboutUsTest = void 0;
+var _react = require("react");
+var _ClientsAboutUs = _interopRequireDefault(require("./ClientsAboutUs"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+// import { CenterElement } from '../../../../.storybook/decorators';
+// import { withRouter } from 'storybook-addon-react-router-v6'
+var _default = exports["default"] = {
+  title: 'ClientsAboutUs',
+  component: _ClientsAboutUs["default"]
+  // decorators: [
+  //     CenterElement,
+  //     withRouter
+  // ]
+};
+var ClientsAboutUsTest = exports.ClientsAboutUsTest = function ClientsAboutUsTest() {
+  return /*#__PURE__*/React.createElement(_ClientsAboutUs["default"], null);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ecomlab-components-next",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "A set of common and reusable React components",
   "main": "dist/index.js",
   "files": [