ecomlab-components-next 0.1.159 → 0.1.162

package/dist/stories/Article/Article.scss

@@ -0,0 +1,471 @@
+.article {
+    display: flex;
+    flex-direction: column;
+    row-gap: 18px;
+    width: 100%;
+
+    &__input-group {
+        display: flex;
+        width: 100%;
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    .toolbar-bottom {
+        display: flex;
+        gap: 14px;
+        align-items: center;
+        justify-content: space-between;
+        flex-wrap: wrap;
+
+        .author-box {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .author-avatar {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 42px;
+            height: 42px;
+            min-width: 42px;
+            background-color: #27BC62;
+            color: #FFF;
+            text-align: center;
+            font-family: NunitoSans;
+            border-radius: 50%;
+            font-size: 12px;
+            font-style: normal;
+            font-weight: 700;
+            line-height: 12px;
+        }
+
+        .text {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            color: #2B2B46;
+            font-family: "Golos Text";
+            font-size: 18px;
+            font-style: normal;
+            font-weight: 500;
+            line-height: 24px;
+            display: -webkit-box;
+            -webkit-line-clamp: 1; // количество строк
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            word-break: break-word;
+            hyphens: auto;
+            overflow: hidden;
+            gap: 8px;
+        }
+
+        .right-content {
+            display: flex;
+            column-gap: 32px;
+            row-gap: 16px;
+            align-items: center;
+            flex-wrap: wrap;
+
+            .date-box,
+            .time-box,
+            .view-box {
+                display: flex;
+                align-items: center;
+                gap: 6px;
+
+                .text {
+                    color: #5D5D75;
+                    font-family: "Golos Text";
+                    font-size: 18px;
+                    font-style: normal;
+                    font-weight: 500;
+                    line-height: 24px;
+                    white-space: nowrap;
+                }
+
+                .icon-box {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    border-radius: 4px;
+                    // border: 1px solid #EAECEA;
+                    background-color: #fff;
+                }
+            }
+        }
+    }
+
+    .btn-box {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+    }
+
+    .add-new-block {
+        position: relative;
+        width: 100%;
+
+        .btn-box {
+            width: 100%;
+        }
+    }
+
+    .article-template__content-article {
+        padding: 24px;
+        background-color: white;
+        border-radius: 12px;
+    }
+
+    .article-loader {
+        width: 100%;
+        height: 100%;
+        border: none;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .block-wrapper {
+        position: relative;
+        width: 100%;
+        max-width: 100%;
+
+        .delete-block-button {
+            z-index: 1;
+            border: none;
+            top: -10px;
+            right: -15px;
+            background-image: url('./img/close.svg');
+            color: #F5F5F5;
+            background-repeat: no-repeat;
+            width: 18px;
+            height: 18px;
+            position: absolute;
+            background-color: transparent;
+            opacity: 0.5;
+
+            &:hover {
+                opacity: 1;
+            }
+        }
+    }
+
+    .btn__round-blue {
+        width: 32px;
+        height: 32px;
+        border: none;
+        background-color: inherit;
+        background-image: url('./img/btn-add-round.svg');
+        background-size: 32px;
+        cursor: pointer;
+
+    }
+
+    .container-article {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        width: 100%;
+        height: auto;
+        border-radius: 16px;
+        border: 1px solid #27BC62;
+        position: relative;
+
+        .violet-information-box {
+            .text {
+                margin: 0;
+            }
+
+            .text[contenteditable="true"] {
+                font-size: 18px;
+                outline: none;
+            }
+        }
+
+        .text {
+            margin: 16px;
+            font-size: 18px;
+            line-height: 21.78px;
+            word-break: break-word;
+
+            &:empty {
+                height: 1lh;
+
+                &::after {
+                    content: "Введите текст";
+                    color: #D9D9D9;
+                }
+            }
+        }
+
+        .text[contenteditable="true"] {
+            outline: none;
+            font-size: 18px;
+        }
+
+
+        .btn__close-round {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            cursor: pointer;
+            z-index: 1;
+        }
+    }
+}
+
+.btn__close-round {
+    width: 13px;
+    height: 13px;
+    background-image: url('./img/close-round.svg');
+    background-size: 13px;
+    background-repeat: no-repeat;
+    background-position: center;
+    border: none;
+    background-color: inherit;
+    cursor: pointer;
+}
+
+.article-view {
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+
+    .share__drop-container {
+        right: 0;
+        left: auto;
+    }
+
+    &__content {
+        display: flex;
+        width: 100%;
+        gap: 30px;
+        justify-content: space-between;
+        background-color: #fff;
+        padding: 20px;
+        border-radius: 12px;
+
+        .list-of-content {
+            display: none;
+        }
+
+        .title-box {
+            display: flex;
+            gap: 12px;
+            width: 100%;
+
+            .title-input {
+                border: none;
+                outline: none;
+                width: 100%;
+                -webkit-user-modify: read-write;
+                overflow-wrap: break-word;
+                -webkit-line-break: after-white-space;
+                flex-grow: 1;
+                overflow-y: auto;
+                resize: none;
+                background-color: inherit;
+
+                &::placeholder {
+                    color: #D9D9D9;
+                }
+            }
+
+            .btn-group {
+                display: flex;
+                align-items: center;
+                gap: 4px;
+            }
+        }
+
+        .title__big {
+            font-size: 32px;
+            font-weight: 500;
+            text-align: center;
+            text-align: start;
+
+            &_grey {
+                color: #D9D9D9;
+                font-size: 32px;
+                font-weight: 400;
+                text-align: center;
+            }
+
+            &:empty {
+                padding-top: 0;
+                height: 1lh;
+
+                &::before {
+                    content: "Введите заголовок";
+                    color: #D9D9D9;
+                }
+            }
+        }
+
+        .title__big[contenteditable="true"] {
+            outline: none;
+        }
+    }
+
+    &__this-will-be-interesting {
+        background-color: #fff;
+        gap: 20px;
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+        padding: 20px;
+        border-radius: 12px;
+
+        .title {
+            color: #2B2B46;
+            font-family: "Golos Text";
+            font-size: 26px;
+            font-style: normal;
+            font-weight: 600;
+            line-height: 28px;
+        }
+
+        &__content {
+            display: flex;
+            flex-wrap: wrap;
+            width: 100%;
+            gap: 20px;
+
+            .tile-short {
+                max-width: calc(50% - 20px);
+            }
+        }
+    }
+}
+
+
+
+
+
+@media (max-width: 430px) {
+    .article {
+        .toolbar-bottom {
+            display: flex;
+            gap: 14px;
+            align-items: center;
+            justify-content: space-between;
+            flex-wrap: wrap;
+
+            .text {
+                color: #2B2B46;
+                font-family: "Golos Text";
+                font-size: 18px;
+                font-style: normal;
+                font-weight: 500;
+                line-height: 24px;
+               // white-space: nowrap;
+            }
+
+            .right-content {
+                display: flex;
+                column-gap: 14px;
+                row-gap: 14px;
+                align-items: center;
+                flex-wrap: wrap;
+
+                .date-box,
+                .time-box,
+                .view-box {
+                    display: flex;
+                    align-items: center;
+                    gap: 6px;
+
+                    .text {
+                        font-size: 12px;
+                        font-weight: 500;
+                        line-height: 16px;
+                    }
+
+                    .icon-box {
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        border-radius: 4px;
+                        // border: 1px solid #EAECEA;
+                        background-color: #fff;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@media (max-width: 1240px) {
+
+    .article-view {
+
+        &__content {
+
+            .list-of-content {
+                display: flex;
+                position: static;
+            }
+        }
+    }
+}
+
+@media (max-width: 1000px) {
+    .article {
+        gap: 14px;
+
+        .toolbar-bottom {
+            display: flex;
+            flex-direction: column-reverse;
+            align-items: flex-start;
+        }
+    }
+
+    .article-view {
+
+        &__content {
+
+            .list-of-content {
+                display: flex;
+                position: static;
+            }
+        }
+
+        &__this-will-be-interesting {
+
+            &__content {
+                gap: 6px;
+            }
+        }
+    }
+}
+
+@media (max-width: 430px) {
+    .article {
+        gap: 14px;
+    }
+
+    .article-view {
+
+        &__content {
+
+            .list-of-content {
+                display: flex;
+                position: static;
+            }
+        }
+
+        &__this-will-be-interesting {
+
+            .title {}
+
+            &__content {
+                gap: 6px;
+            }
+        }
+    }
+}

package/dist/stories/Article/ArticleElement.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ARTICLE_TYPES = void 0;
+var _TitleText = require("./TitleText/TitleText");
+var _ImgArticle = require("./ImgArticle/ImgArticle");
+var _TextArticle = require("./TextArticle/TextArticle");
+var _YellowInformationBox = require("./YellowInformationBox/YellowInformationBox");
+var _FormBtn = require("./FormBtn/FormBtn");
+var _react = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+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 _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 ARTICLE_TYPES = exports.ARTICLE_TYPES = {
+  header: 'header',
+  description: "description",
+  warningBlock: "warningBlock",
+  image: "image",
+  formBtn: 'formBtn'
+};
+var componentsMap = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ARTICLE_TYPES.header, _TitleText.TitleText), ARTICLE_TYPES.description, _TextArticle.TextArticle), ARTICLE_TYPES.warningBlock, _YellowInformationBox.YellowInformationBox), ARTICLE_TYPES.image, _ImgArticle.ImgArticle), ARTICLE_TYPES.formBtn, _FormBtn.FormBtn);
+var ArticleElement = /*#__PURE__*/_react["default"].forwardRef(function (_ref, outerRef) {
+  var id = _ref.id,
+    type = _ref.type,
+    data = _ref.data,
+    position = _ref.position,
+    editMode = _ref.editMode,
+    onChange = _ref.onChange,
+    onDelete = _ref.onDelete,
+    setNewElementPosition = _ref.setNewElementPosition,
+    setShowAddBlockPopup = _ref.setShowAddBlockPopup,
+    isFirstElement = _ref.isFirstElement,
+    isNew = _ref.isNew;
+  var ComponentToRender = componentsMap[type];
+  ComponentToRender.displayName = type;
+  var elementRef = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    if (data === '') {
+      var _elementRef$current;
+      (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 || _elementRef$current.focus();
+    }
+  }, []);
+  var refObject = {
+    id: id,
+    type: type,
+    data: data,
+    getData: function getData() {
+      if (type === ARTICLE_TYPES.image) {
+        return elementRef.current.data;
+      } else if (type === ARTICLE_TYPES.description) {
+        var _elementRef$current2;
+        return (_elementRef$current2 = elementRef.current) === null || _elementRef$current2 === void 0 ? void 0 : _elementRef$current2.innerHTML;
+      } else if (type === ARTICLE_TYPES.formBtn) {
+        return 1;
+      } else {
+        var _elementRef$current3;
+        return (_elementRef$current3 = elementRef.current) === null || _elementRef$current3 === void 0 ? void 0 : _elementRef$current3.innerText;
+      }
+    },
+    getId: function getId() {
+      return elementRef.current.id;
+    }
+  };
+  var onAddNewBlockClick = function onAddNewBlockClick(isFirstBlock) {
+    setShowAddBlockPopup(true);
+    if (isFirstBlock) setNewElementPosition(-1);else setNewElementPosition(position);
+  };
+  (0, _react.useImperativeHandle)(outerRef, function () {
+    return refObject;
+  }, [refObject]);
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isFirstElement && editMode && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "add-new-block"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "btn-box"
+  }, /*#__PURE__*/_react["default"].createElement("button", {
+    onClick: function onClick() {
+      return onAddNewBlockClick(true);
+    },
+    className: "btn__round-blue"
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: editMode ? 'container-article' : 'block-wrapper'
+  }, editMode && /*#__PURE__*/_react["default"].createElement("button", {
+    className: "btn__close-round",
+    onClick: function onClick() {
+      return onDelete(position);
+    }
+  }), /*#__PURE__*/_react["default"].createElement(ComponentToRender, {
+    data: data,
+    editMode: editMode,
+    ref: elementRef,
+    onChange: onChange
+  })), editMode && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "add-new-block"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "btn-box"
+  }, /*#__PURE__*/_react["default"].createElement("button", {
+    onClick: function onClick() {
+      return onAddNewBlockClick();
+    },
+    className: "btn__round-blue"
+  }))));
+});
+var _default = exports["default"] = ArticleElement;

package/dist/stories/Article/ArticleStorybook.scss

@@ -0,0 +1,6 @@
+.articles-container {
+    width: 100%;
+    height: 100%;
+    background-color: white;
+    flex-shrink: 1;
+}