ecomlab-components-next 0.1.159 → 0.1.162

package/dist/stories/InputDynamicWidth/InputDynamicWidth.scss

@@ -0,0 +1,98 @@
+.input-dynamic-width-bar {
+    position: relative;
+    display: flex;
+    width: fit-content;
+    //  overflow: hidden;
+
+    &__search,
+    &__search_active {
+        position: relative;
+        width: 40px;
+        height: 40px;
+        border-radius: 8px;
+        padding: 10px;
+        transition-duration: 1000ms;
+        cursor: pointer;
+        background-repeat: no-repeat;
+        font-size: 14px;
+        color: transparent;
+        border: 1px solid #fff;
+        overflow: hidden;
+        background-image: url('./img/search_icon.svg');
+        background-color: white;
+        background-size: 16px;
+        background-position: left 12px center;
+        padding-left: 40px;
+        padding-right: 0;
+        transition: 0s;
+        color: #0B110B;
+        font-family: NunitoSans;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 16px;
+
+        &:hover {
+            transition: 0.5s;
+            background-color: #F3F3F3;
+        }
+
+        &_active {
+            transition: 1s;
+            width: 100%;
+            max-width: 400px;
+            cursor: pointer;
+            padding-left: 16px;
+            color: #3B2C37;
+            font-family: Montserrat;
+            font-size: 14px;
+            font-style: normal;
+            font-weight: 500;
+            line-height: normal;
+            outline: none;
+            padding-left: 40px;
+            padding-right: 40px;
+            box-shadow: 0px 2px 8px 0px rgba(236, 234, 249, 0.60);
+
+            &:hover {
+                transition: 0.5s;
+                background-color: #fff
+            }
+        }
+
+        &::placeholder {
+            color: #94A3B8;
+        }
+    }
+
+    &__btn_close {
+        border: none;
+        background-color: inherit;
+        position: absolute;
+        top: 12px;
+        right: 12px;
+        cursor: pointer;
+    }
+
+    @keyframes showDiv {
+
+        0%,
+        99% {
+            display: none;
+        }
+
+        100% {
+            display: flex;
+        }
+    }
+
+}
+
+@media (max-width: 430px) {
+    .input-dynamic-width-bar {
+        &__search,
+        &__search_active {
+            font-size: 16px;
+        }
+    }
+}

package/dist/stories/InputDynamicWidth/InputDynamicWidth.stories.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _InputDynamicWidth = _interopRequireDefault(require("./InputDynamicWidth"));
+var _addonActions = require("@storybook/addon-actions");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = {
+  title: 'Components/InputDynamicWidth',
+  component: _InputDynamicWidth["default"],
+  parameters: {
+    layout: 'centered'
+  },
+  args: {
+    onChange: _addonActions.action,
+    placeholder: 'Поиск'
+  }
+};
+var Default = exports.Default = {
+  render: function render(args) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        width: '100%',
+        gap: '10px',
+        flexDirection: 'column'
+      }
+    }, /*#__PURE__*/React.createElement(_InputDynamicWidth["default"], args));
+  }
+};

package/dist/stories/InputDynamicWidth/img/close_icon.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 4.53033C12.8232 4.23744 12.8232 3.76256 12.5303 3.46967C12.2374 3.17678 11.7626 3.17678 11.4697 3.46967L8 6.93934L4.53033 3.46967C4.23744 3.17678 3.76256 3.17678 3.46967 3.46967C3.17678 3.76256 3.17678 4.23744 3.46967 4.53033L6.93934 8L3.46967 11.4697C3.17678 11.7626 3.17678 12.2374 3.46967 12.5303C3.76256 12.8232 4.23744 12.8232 4.53033 12.5303L8 9.06066L11.4697 12.5303C11.7626 12.8232 12.2374 12.8232 12.5303 12.5303C12.8232 12.2374 12.8232 11.7626 12.5303 11.4697L9.06066 8L12.5303 4.53033Z" fill="#0B110B"/>
+</svg>

package/dist/stories/InputDynamicWidth/img/search_icon.svg

@@ -0,0 +1,6 @@
+<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 418">
+<circle id="Ellipse 999" cx="6.5" cy="6.5" r="5.5" stroke="#0B110B" stroke-width="2"/>
+<path id="Vector 141" d="M12.2929 14.7071C12.6834 15.0976 13.3166 15.0976 13.7071 14.7071C14.0976 14.3166 14.0976 13.6834 13.7071 13.2929L12.2929 14.7071ZM9.29289 11.7071L12.2929 14.7071L13.7071 13.2929L10.7071 10.2929L9.29289 11.7071Z" fill="#0B110B"/>
+</g>
+</svg>

package/dist/stories/LongTileArticleBox/LongTileArticleBox.js

@@ -0,0 +1,168 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _link = _interopRequireDefault(require("next/link"));
+var _htmlReactParser = _interopRequireDefault(require("html-react-parser"));
+var _time_icon = _interopRequireDefault(require("./img/time_icon.svg"));
+var _view_icon = _interopRequireDefault(require("./img/view_icon.svg"));
+var _calendar_icon = _interopRequireDefault(require("./img/calendar_icon.svg"));
+var _SliderCarousel = _interopRequireDefault(require("../SliderCarousel/SliderCarousel"));
+var _ShareComponent = require("../../components/ShareComponent/ShareComponent");
+var _highlightWord = require("../../common/highlightWord ");
+var _react = require("react");
+require("./LongTileArticleBox.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 LongTileArticleBox = function LongTileArticleBox(_ref) {
+  var _tags$map, _author$, _author$2;
+  var id = _ref.id,
+    name = _ref.name,
+    annotation = _ref.annotation,
+    author = _ref.author,
+    photoPreview = _ref.photoPreview,
+    pathBread = _ref.pathBread,
+    tags = _ref.tags,
+    date = _ref.date,
+    timeToRead = _ref.timeToRead,
+    views = _ref.views,
+    statusArray = _ref.statusArray,
+    showStatus = _ref.showStatus,
+    onLinkClick = _ref.onLinkClick,
+    _ref$activeLang = _ref.activeLang,
+    activeLang = _ref$activeLang === void 0 ? 'rus' : _ref$activeLang,
+    transliter = _ref.transliter,
+    _ref$search = _ref.search,
+    search = _ref$search === void 0 ? false : _ref$search,
+    hideInfo = _ref.hideInfo,
+    BASE_ROUTE = _ref.BASE_ROUTE;
+  var _useState = (0, _react.useState)(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    articleName = _useState2[0],
+    setArticleName = _useState2[1];
+  var articlePath = annotation === null || annotation === void 0 ? void 0 : annotation[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isDropShare = _useState4[0],
+    setIsDropShare = _useState4[1];
+  (0, _react.useEffect)(function () {
+    setArticleName(Array.isArray(name) ? name === null || name === void 0 ? void 0 : name[0] : name);
+  }, [name]);
+  var translateMin = function translateMin() {
+    if (activeLang == 'rus') return 'мин';
+    if (activeLang == 'eng') return 'min';
+    if (activeLang == 'tur') return 'dak';
+    return 'мин';
+  };
+  var translateAuthor = function translateAuthor() {
+    if (author) {
+      if (Array.isArray(author)) {
+        if (activeLang == 'eng' || activeLang == 'tur') return transliter(author !== null && author !== void 0 && author[0] ? author === null || author === void 0 ? void 0 : author[0] : '');
+      } else {
+        if (activeLang == 'eng' || activeLang == 'tur') return transliter(author ? author : '');
+      }
+    } else {
+      if (activeLang == 'rus') return 'Неизвестный автор';
+      if (activeLang == 'tur') return 'Bilinmeyen Yazar';
+      if (activeLang == 'eng') return 'Unknown_author';
+    }
+    return Array.isArray(author) ? author === null || author === void 0 ? void 0 : author[0] : author;
+  };
+
+  // Обработчик на клик вне элемента
+  (0, _react.useEffect)(function () {
+    var isDrop = function isDrop(e) {
+      var el = e.target;
+      if (!el.closest("#share-".concat(id))) {
+        setIsDropShare(false);
+      }
+    };
+    document.addEventListener('click', isDrop);
+    return function () {
+      document.addEventListener('click', isDrop);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "tile-long",
+    key: id + '' + name + '' + author
+  }, /*#__PURE__*/React.createElement(_link["default"], {
+    onClick: function onClick(e) {
+      return onLinkClick(e, id, articlePath);
+    },
+    href: articlePath
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "article-min"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "img-content"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "img-box"
+  }, /*#__PURE__*/React.createElement(_SliderCarousel["default"], {
+    imgArr: photoPreview
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "content-box"
+  }, tags && /*#__PURE__*/React.createElement("div", {
+    className: "tag-box"
+  }, tags && ((_tags$map = tags.map(function (t, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: t + index,
+      className: "tag"
+    }, t);
+  })) === null || _tags$map === void 0 ? void 0 : _tags$map.splice(0, 3)), (tags === null || tags === void 0 ? void 0 : tags.length) > 3 && /*#__PURE__*/React.createElement("div", {
+    className: "tag"
+  }, '+ ' + ((tags === null || tags === void 0 ? void 0 : tags.length) - 3))), /*#__PURE__*/React.createElement("h3", {
+    className: "title"
+  }, search ? (0, _highlightWord.hightlightWord)(search, articleName) : articleName), /*#__PURE__*/React.createElement("div", {
+    className: "description-content"
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "text_description"
+  }, Array.isArray(annotation) ? annotation !== null && annotation !== void 0 && annotation[0] ? (0, _htmlReactParser["default"])(annotation === null || annotation === void 0 ? void 0 : annotation[0]) : '' : annotation ? (0, _htmlReactParser["default"])(annotation) : '')), /*#__PURE__*/React.createElement("div", {
+    className: "text-and-info-box"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "top-info"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "author-box"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "author-avatar",
+    style: {
+      backgroundColor: author[1] ? author[1] : ''
+    }
+  }, ((_author$ = author[0]) === null || _author$ === void 0 ? void 0 : _author$.length) > 0 ? (_author$2 = author[0]) === null || _author$2 === void 0 || (_author$2 = _author$2.split(' ').map(function (str) {
+    return str[0];
+  }).reduce(function (acc, current) {
+    return acc += current;
+  }, '')) === null || _author$2 === void 0 ? void 0 : _author$2.toUpperCase() : '-', " "), /*#__PURE__*/React.createElement("p", {
+    className: "text_grey"
+  }, translateAuthor(author))), /*#__PURE__*/React.createElement("div", {
+    className: "info-box"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "date-box"
+  }, /*#__PURE__*/React.createElement("img", _calendar_icon["default"]), /*#__PURE__*/React.createElement("p", {
+    className: "text_grey"
+  }, date.toLocaleDateString('ru-ru'))), /*#__PURE__*/React.createElement("div", {
+    className: "view-box"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "icon-box"
+  }, /*#__PURE__*/React.createElement("img", _view_icon["default"])), /*#__PURE__*/React.createElement("p", {
+    className: "text"
+  }, views)), /*#__PURE__*/React.createElement("div", {
+    className: "time-box"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "icon-box"
+  }, /*#__PURE__*/React.createElement("img", _time_icon["default"])), /*#__PURE__*/React.createElement("p", {
+    className: "text"
+  }, "".concat(timeToRead ? timeToRead : '-', " ").concat(translateMin()))))), /*#__PURE__*/React.createElement(_ShareComponent.ShareComponent, {
+    activeLang: activeLang,
+    id: id,
+    articlePath: articlePath
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "bottom-info"
+  }))))));
+};
+var _default = exports["default"] = LongTileArticleBox;

package/dist/stories/LongTileArticleBox/LongTileArticleBox.scss

@@ -0,0 +1,360 @@
+.tile-long {
+    max-width: 100%;
+    width: 100%;
+    min-width: 740px;
+
+    .link-blue {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        justify-content: flex-end;
+        gap: 8px;
+        color: #4285F4;
+        font-family: Inter;
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 22px;
+    }
+
+    .article-min {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        height: auto;
+        border: 2px solid #F2F5FA;
+        //overflow: hidden;
+        border-radius: 10px;
+
+
+        &:hover {
+            .content-box {
+                transition: 0.3s;
+                background-color: rgba(31, 31, 31, 0.04);
+            }
+
+            .img-box {
+                transition: 0.3s;
+                background-color: rgba(31, 31, 31, 0.04);
+            }
+        }
+
+        .img-content {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 16px;
+            min-height: calc(230px);
+            background: #F0F2F4;
+            width: 100%;
+            margin-left: auto;
+            margin-right: auto;
+            aspect-ratio: 1/0.53;
+            position: relative;
+            max-width: 348px;
+
+            .img-box {
+                width: 100%;
+                height: 100%;
+                border: 5px solid #fff;
+                background-color: #fff;
+                border-radius: 10px;
+                overflow: hidden;
+            }
+
+            //  border: 1px solid #AAAAAA;
+
+            .img-box {}
+
+
+
+            img {
+                display: inline-block;
+                max-width: 100%;
+                width: 100%;
+                height: 100%;
+                object-fit: contain;
+                border-radius: 8px;
+            }
+        }
+
+        .tag-box {
+            display: flex;
+            gap: 14px;
+            align-items: flex-start;
+            flex-wrap: nowrap;
+
+            .tag {
+                display: flex;
+                gap: 4px;
+                justify-content: center;
+                white-space: nowrap;
+                align-items: center;
+                font-size: 12px;
+                color: #9959FC;
+                font-family: "Golos Text";
+                font-size: 14px;
+                font-style: normal;
+                font-weight: 500;
+                line-height: 16px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+
+        .content-box {
+            padding: 16px;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            gap: 8px;
+            background-color: #fff;
+           // overflow: hidden;
+            width: calc(100% - 348px) ;
+
+            .title {
+                color: #2B2B46;
+                font-family: "Golos Text";
+                font-size: 20px;
+                font-style: normal;
+                font-weight: 600;
+                line-height: 24px;
+                display: -webkit-box;
+                -webkit-line-clamp: 1; // количество строк
+                -webkit-box-orient: vertical;
+                overflow: hidden;
+                hyphens: auto;
+                min-height: 24px;
+
+                b {
+                    background-color: #fdfd78;
+                }
+            }
+
+            .description-content {
+                margin-top: 2px;
+
+                .text_description {
+                    color: #5D5D75;
+                    font-family: "Golos Text";
+                    font-size: 14px;
+                    font-style: normal;
+                    font-weight: 400;
+                    line-height: 22px;
+                    display: -webkit-box;
+                    -webkit-line-clamp: 4;
+                    -webkit-box-orient: vertical;
+                    overflow: hidden;
+                    hyphens: auto;
+                    min-height: 88px;
+
+                    b {
+                        background-color: #fdfd78;
+                    }
+                }
+
+                .btn-box {
+                    display: none;
+                    opacity: 0;
+                    visibility: hidden;
+                    //  transition: 0.3s;
+                }
+            }
+
+            .text_grey {
+                //white-space: nowrap;
+                text-overflow: ellipsis;
+                //overflow: hidden;
+                font-size: 14px;
+                font-size: 12px;
+                color: #AAAAAA;
+                overflow: hidden;
+            }
+
+            .top-box {
+                display: flex;
+                flex-direction: column;
+                gap: 12px;
+            }
+
+            .bottom-box {
+                display: flex;
+                flex-direction: column;
+                gap: 12px;
+            }
+
+
+        }
+
+        .text-and-info-box {
+            display: flex;
+            flex-direction: column;
+            gap: 17px;
+            width: 100%;
+            margin-top: 37px;
+
+            .top-info,
+            .bottom-info {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                width: 100%;
+
+                .text,
+                .text_grey {
+                    //white-space: nowrap;
+                    color: #2B2B46;
+                    font-family: "Golos Text";
+                    font-size: 14px;
+                    font-style: normal;
+                    font-weight: 500;
+                    line-height: 18px;
+                }
+            }
+
+            .top-info {
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                overflow: hidden;
+                width: 100%;
+
+                .author-box {
+                    display: flex;
+                    align-items: center;
+                    gap: 8px;
+                    overflow: hidden;
+                }
+
+                .author-avatar {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 24px;
+                    height: 24px;
+                    min-width: 24px;
+                    background-color: #27BC62;
+                    color: #FFF;
+                    text-align: center;
+                    font-family: NunitoSans;
+                    border-radius: 50%;
+                    font-size: 10px;
+                    font-style: normal;
+                    font-weight: 700;
+                    line-height: 12px;
+                }
+
+                .text,
+                .text_grey {
+                    color: #2B2B46;
+                    font-family: "Golos Text";
+                    font-size: 14px;
+                    font-style: normal;
+                    font-weight: 500;
+                    line-height: 18px;
+                    display: -webkit-box;
+                    -webkit-line-clamp: 1; // количество строк
+                    -webkit-box-orient: vertical;
+                    overflow: hidden;
+                    word-break: break-word;
+                    hyphens: auto;
+                    overflow: hidden;
+                    gap: 8px;
+                }
+            }
+
+            .date-box,
+            .time-box,
+            .view-box {
+                display: flex;
+                align-items: center;
+                gap: 6px;
+
+                .icon-box {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    border-radius: 4px;
+                    // border: 1px solid #EAECEA;
+                    background-color: #fff;
+                }
+            }
+
+            .info-box {
+                display: flex;
+                gap: 14px;
+
+
+                .text,
+                .text_grey {
+                    white-space: nowrap;
+                    color: #0B110B;
+                    text-align: right;
+                    font-family: NunitoSans;
+                    font-size: 14px;
+                    font-style: normal;
+                    font-weight: 700;
+                    line-height: 16px;
+
+                    span {
+                        color: #B4B8B4;
+                        font-family: NunitoSans;
+                        font-size: 14px;
+                        font-style: normal;
+                        font-weight: 300;
+                        line-height: 16px;
+                    }
+
+                    .info-box {
+                        display: flex;
+                        flex-direction: column;
+                        align-items: end;
+                        gap: 4px;
+
+                        .time-box,
+                        .view-box {
+                            display: flex;
+                            align-items: center;
+                            gap: 5px;
+
+                            .icon-box {
+                                display: flex;
+                                align-items: center;
+                                justify-content: center;
+                                border-radius: 4px;
+                                border: 1px solid #EAECEA;
+                                width: 24px;
+                                height: 24px;
+                            }
+
+
+                        }
+
+                    }
+
+
+                }
+            }
+        }
+
+        .toolbar-bottom {
+            display: flex;
+            gap: 16px;
+            align-items: start;
+
+            .author {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                color: #888888;
+                font-size: 12px;
+                height: 23px;
+                min-height: 23px;
+                max-height: 23px;
+                white-space: nowrap;
+            }
+        }
+
+    }
+}