ecomlab-components-next 0.1.159 → 0.1.162

package/dist/stories/Article/ImgArticle/ImgArticle.scss

@@ -0,0 +1,140 @@
+// @import url('../../../font.scss');
+
+.img-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: auto;
+    max-height: 500px;
+    width: fit-content;
+    max-width: 100%;
+    border-radius: 10px;
+    overflow: hidden;
+
+    .img-container__button__readonly,
+    .img-container__button {
+        border: none;
+        background-color: inherit;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        position: relative;
+
+        .img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+
+        .hidden-placeholder {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            z-index: 1;
+            background-color: white;
+            opacity: 0.5;
+            transition: 0.3s;
+            opacity: 0;
+            visibility: hidden;
+            cursor: pointer;
+
+            .text {
+                color: #2B2B46;
+                font-family: "Golos Text";
+                font-size: 32px;
+                line-height: 1.1;
+            }
+        }
+
+        &:hover {
+            .hidden-placeholder {
+                visibility: visible;
+                opacity: 0.5;
+            }
+
+        }
+
+
+    }
+
+
+    .blackout {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        min-height: 100vh;
+        z-index: 10;
+        position: fixed;
+        overflow: auto;
+        align-items: center;
+        justify-content: center;
+        background-color: rgb(0, 0, 0, 0.3);
+        padding: 20px;
+    }
+
+    .img-box {
+        width: 100%;
+        height: 100%;
+
+        .img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+    }
+
+    &__placeholder {
+        width: 200px;
+        height: 200px;
+    }
+
+    &__button {
+        min-width: 100%;
+        position: relative;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 0;
+        border: none;
+        border-radius: 16px;
+        background-color: unset;
+        min-height: 100px;
+
+        &__placeholder {
+            display: flex;
+            width: 400px;
+            height: 400px;
+            justify-content: center;
+            align-items: center;
+        }
+    }
+
+    &__file-input {
+        position: absolute;
+        opacity: 0;
+        visibility: hidden;
+    }
+
+    &__img {
+        display: inline-block;
+        max-width: 100%;
+        width: 100%;
+        height: auto;
+    }
+
+    &__img-placeholder {
+        display: inline-block;
+        max-width: 100%;
+        width: 100%;
+        height: auto;
+    }
+}

package/dist/stories/Article/ListOfContent/ListOfContent.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+require("./ListOfContent.scss");
+var ListOfContent = function ListOfContent(_ref) {
+  var links = _ref.links,
+    _ref$lang = _ref.lang,
+    lang = _ref$lang === void 0 ? localStorage.getItem('lang') : _ref$lang,
+    title = _ref.title,
+    setTitle = _ref.setTitle,
+    description = _ref.description,
+    setDescription = _ref.setDescription,
+    isEdit = _ref.isEdit;
+  var linksList = links === null || links === void 0 ? void 0 : links.map(function (_ref2, index) {
+    var linkText = _ref2.linkText,
+      path = _ref2.path;
+    return /*#__PURE__*/React.createElement("a", {
+      key: index,
+      href: "#".concat(path),
+      className: "list-of-content__link"
+    }, linkText);
+  });
+  var translateContent = function translateContent() {
+    if (lang == 'eng') return 'Table of Contents';
+    if (lang == 'tur') return 'Içerik';
+    return 'Содержание';
+  };
+  return /*#__PURE__*/React.createElement("section", {
+    className: "list-of-content"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "list-of-content__content"
+  }, /*#__PURE__*/React.createElement("h4", {
+    className: "list-of-content__title"
+  }, translateContent()), /*#__PURE__*/React.createElement("div", {
+    className: "list-of-content__links"
+  }, linksList)));
+};
+var _default = exports["default"] = ListOfContent;

package/dist/stories/Article/ListOfContent/ListOfContent.scss

@@ -0,0 +1,83 @@
+// @import url('../../../font.scss');
+
+.list-of-content {
+    top: 20px;
+    height: 400px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 24px;
+    width: 306px;
+    min-width: 306px;
+    background-color: inherit;
+    border-radius: 16px;
+    height: auto;
+    border-radius: 10px;
+    background: #FFF;
+    overflow: overlay;
+    max-height: 65vh;
+
+    &__title {
+        color: #2B2B46;
+        font-family: "Golos Text";
+        font-size: 22px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 28px;
+    }
+
+    &__seo-box {
+        display: flex;
+        flex-direction: column;
+        gap: .5em;
+        margin-bottom: 1em;
+    }
+
+    &__links {
+        display: flex;
+        flex-direction: column;
+        gap: 18px;
+        width: 100%;
+    }
+
+    &__content {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    &__link {
+        color: #2B2B46;
+        font-family: "Golos Text";
+        font-size: 18px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 24px;
+        word-wrap: break-word;
+    }
+}
+
+@media (max-width: 1240px) {
+    .list-of-content {
+        display: none;
+        background: #FAFAFA;
+        padding: 16px;
+        width: 100%;
+
+        &__title {
+            font-size: 20px;
+        }
+
+        &__link {
+            font-size: 16px;
+            line-height: 20px;
+        }
+    }
+}
+
+
+@media (max-width: 430px) {
+    .list-of-content {
+        padding: 8px 16px;
+    }
+}

package/dist/stories/Article/ListOfContent/ListOfContent.stories.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _ListOfContent = _interopRequireDefault(require("./ListOfContent"));
+var _addonActions = require("@storybook/addon-actions");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = {
+  title: 'Article/ListOfContent',
+  component: _ListOfContent["default"],
+  paramters: {
+    layout: 'centered'
+  }
+};
+var Default = exports.Default = {
+  args: {
+    links: [{
+      linkText: 'link 1',
+      path: '#'
+    }, {
+      linkText: 'link 2',
+      path: '#'
+    }, {
+      linkText: 'link 3',
+      path: '#'
+    }, {
+      linkText: 'very looooooooooooooooooooooooooooooo    oooooooo ng link 4',
+      path: '#'
+    }],
+    readonly: false,
+    readingTime: 215,
+    tags: [{
+      label: 'some tag 1',
+      value: 10
+    }, {
+      label: 'some tag 2',
+      value: 20
+    }, {
+      label: 'some tag 3',
+      value: 30
+    }],
+    selectedTags: [{
+      label: 'tag 1',
+      value: 1
+    }, {
+      label: 'tag 2',
+      value: 2
+    }, {
+      label: 'tag 3',
+      value: 3
+    }, {
+      label: 'veeeeeryyy looooooooooong tag 4',
+      value: 4
+    }],
+    setSelectedTags: (0, _addonActions.action)('setSelectedTags'),
+    onAddTagClick: (0, _addonActions.action)('onAddTagClick'),
+    setTitle: (0, _addonActions.action)('setTitle'),
+    setDescription: (0, _addonActions.action)('setDescription'),
+    isEdit: true,
+    views: 100500,
+    publicationDate: new Date(),
+    author: 'Константин Константинопольский'
+  }
+};

package/dist/stories/Article/ListOfContent/img/time_icon.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 1.75C7 1.33579 7.33579 1 7.75 1H12.25C12.6642 1 13 1.33579 13 1.75C13 2.16421 12.6642 2.5 12.25 2.5H10.75V3.03469C14.8166 3.41279 18 6.83463 18 11C18 15.4183 14.4183 19 10 19C5.58172 19 2 15.4183 2 11C2 6.83463 5.1834 3.41279 9.25 3.03469V2.5H7.75C7.33579 2.5 7 2.16421 7 1.75ZM4.78033 2.21967C5.07322 2.51256 5.07322 2.98744 4.78033 3.28033L2.28033 5.78033C1.98744 6.07323 1.51256 6.07323 1.21967 5.78033C0.926777 5.48744 0.926777 5.01257 1.21967 4.71967L3.71967 2.21967C4.01256 1.92678 4.48744 1.92678 4.78033 2.21967ZM15.2197 2.21967C15.5126 1.92678 15.9874 1.92678 16.2803 2.21967L18.7803 4.71967C19.0732 5.01257 19.0732 5.48744 18.7803 5.78033C18.4874 6.07323 18.0126 6.07323 17.7197 5.78033L15.2197 3.28033C14.9268 2.98744 14.9268 2.51256 15.2197 2.21967ZM10 4.5C6.41015 4.5 3.5 7.41015 3.5 11C3.5 14.5899 6.41015 17.5 10 17.5C13.5899 17.5 16.5 14.5899 16.5 11C16.5 7.41015 13.5899 4.5 10 4.5ZM9.75 6C10.1642 6 10.5 6.33579 10.5 6.75V10.5H12.25C12.6642 10.5 13 10.8358 13 11.25C13 11.6642 12.6642 12 12.25 12H9.75C9.33578 12 9 11.6642 9 11.25V6.75C9 6.33579 9.33578 6 9.75 6Z" fill="black"/>
+</svg>

package/dist/stories/Article/ListOfContent/img/view_icon.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.61359 6.42412C4.30606 7.52165 3.27624 8.83007 2.69645 9.64489C2.60201 9.77761 2.55769 9.84094 2.528 9.89127C2.50946 9.92271 2.50594 9.93377 2.50399 9.94131C2.50399 9.94131 2.50305 9.94681 2.50227 9.954C2.50094 9.96632 2.5 9.98222 2.5 10C2.5 10.0178 2.50094 10.0337 2.50227 10.046C2.50305 10.0532 2.50399 10.0587 2.50399 10.0587C2.50594 10.0662 2.50946 10.0773 2.528 10.1087C2.55769 10.1591 2.60201 10.2224 2.69645 10.3551C3.27624 11.1699 4.30606 12.4784 5.61359 13.5759C6.93271 14.6831 8.44391 15.5 10 15.5C11.5561 15.5 13.0673 14.6831 14.3864 13.5759C15.6939 12.4784 16.7238 11.1699 17.3036 10.3551C17.398 10.2224 17.4423 10.1591 17.472 10.1087C17.4905 10.0773 17.4941 10.0662 17.496 10.0587C17.496 10.0587 17.497 10.0532 17.4977 10.046C17.4991 10.0337 17.5 10.0178 17.5 10C17.5 9.98222 17.4991 9.96632 17.4977 9.954C17.497 9.94682 17.496 9.94131 17.496 9.94131C17.4941 9.93377 17.4905 9.92272 17.472 9.89127C17.4423 9.84094 17.398 9.77761 17.3036 9.64489C16.7238 8.83007 15.6939 7.52165 14.3864 6.42412C13.0673 5.31686 11.5561 4.5 10 4.5C8.44391 4.5 6.93271 5.31686 5.61359 6.42412ZM4.64921 5.27522C6.08184 4.07268 7.92989 3 10 3C12.0701 3 13.9182 4.07268 15.3508 5.27522C16.795 6.48747 17.9094 7.90908 18.5257 8.77524C18.5358 8.78946 18.5461 8.80377 18.5564 8.8182C18.7045 9.02535 18.8698 9.25645 18.9506 9.57492C19.0165 9.83465 19.0165 10.1653 18.9506 10.4251C18.8698 10.7436 18.7045 10.9747 18.5564 11.1818C18.5461 11.1962 18.5358 11.2105 18.5257 11.2248C17.9094 12.0909 16.795 13.5125 15.3508 14.7248C13.9182 15.9273 12.0701 17 10 17C7.92989 17 6.08184 15.9273 4.64921 14.7248C3.20501 13.5125 2.0906 12.0909 1.47428 11.2248C1.46416 11.2105 1.45393 11.1962 1.44361 11.1818C1.29548 10.9747 1.13023 10.7436 1.04943 10.4251C0.983524 10.1653 0.983524 9.83465 1.04943 9.57492C1.13023 9.25644 1.29548 9.02535 1.44361 8.81819C1.45393 8.80377 1.46416 8.78945 1.47428 8.77524C2.0906 7.90908 3.20501 6.48747 4.64921 5.27522ZM10 8.5C9.17157 8.5 8.5 9.17157 8.5 10C8.5 10.8284 9.17157 11.5 10 11.5C10.8284 11.5 11.5 10.8284 11.5 10C11.5 9.17157 10.8284 8.5 10 8.5ZM7 10C7 8.34315 8.34315 7 10 7C11.6569 7 13 8.34315 13 10C13 11.6569 11.6569 13 10 13C8.34315 13 7 11.6569 7 10Z" fill="black"/>
+</svg>

package/dist/stories/Article/RecommendationList/RecommendationList.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RecommendationList = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactRouterDom = require("react-router-dom");
+require("./RecommendationList.scss");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var RecommendationList = exports.RecommendationList = function RecommendationList(_ref) {
+  var recommendationList = _ref.recommendationList;
+  var recommendationListItems = recommendationList.map(function (_ref2, key) {
+    var title = _ref2.title;
+    return /*#__PURE__*/_react["default"].createElement("li", {
+      key: key,
+      className: "recommendation__item"
+    }, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Link, {
+      to: "#",
+      key: title,
+      className: "recommendation__link"
+    }, title));
+  });
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "recommendation"
+  }, /*#__PURE__*/_react["default"].createElement("h3", {
+    className: "title"
+  }, "\u0420\u0435\u043A\u043E\u043C\u0435\u043D\u0434\u0430\u0446\u0438\u0438 \u0434\u043B\u044F \u0412\u0430\u0441"), /*#__PURE__*/_react["default"].createElement("ul", {
+    className: "recommendation__list"
+  }, recommendationListItems));
+};

package/dist/stories/Article/RecommendationList/RecommendationList.scss

@@ -0,0 +1,41 @@
+.recommendation {
+    display: flex;
+    flex-direction: column;
+    margin-top: 64px;
+    gap: 30px;
+    margin-bottom: 48px;
+
+    .title {
+        color: #969798;
+        font-size: 16px;
+        text-transform: uppercase;
+        font-weight: 600;
+    }
+
+    &__list {
+        display: flex;
+        flex-direction: column;
+        gap: 32px;
+    }
+
+    &__item {
+        position: relative;
+
+        &::after {
+            content: '';
+            position: absolute;
+            display: block;
+            max-width: 100%;
+            width: 100%;
+            height: 1px;
+            background-color: #F0F0F0;
+            margin-top: 16px;
+        }
+    }
+
+    &__link {
+        font-size: 20px;
+        color: #1890FF;
+        font-weight: 500;
+    }
+}

package/dist/stories/Article/TextArticle/TextArticle.js

@@ -0,0 +1,129 @@
+"use strict";
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextArticle = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ButtonBasic = _interopRequireDefault(require("../../ButtonBasic/ButtonBasic"));
+var _htmlReactParser = _interopRequireDefault(require("html-react-parser"));
+require("./TextArticle.scss");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+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 _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 TextArticle = exports.TextArticle = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var data = _ref.data,
+    editMode = _ref.editMode,
+    onChange = _ref.onChange;
+  var _useState = (0, _react.useState)(data),
+    _useState2 = _slicedToArray(_useState, 2),
+    content = _useState2[0],
+    setContent = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showLinkModal = _useState4[0],
+    setShowLinkModal = _useState4[1];
+  var _useState5 = (0, _react.useState)(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    target = _useState6[0],
+    setTarget = _useState6[1];
+  var _useState7 = (0, _react.useState)(''),
+    _useState8 = _slicedToArray(_useState7, 2),
+    linkValue = _useState8[0],
+    setLinkValue = _useState8[1];
+  var _useState9 = (0, _react.useState)({}),
+    _useState10 = _slicedToArray(_useState9, 2),
+    selectionData = _useState10[0],
+    setSelectionData = _useState10[1];
+  var handleInput = function handleInput(e) {
+    onChange();
+  };
+  var getSelectionText = function getSelectionText() {
+    var text = "";
+    var startIndex;
+    var endIndex;
+    var WGS = window.getSelection();
+    if (WGS) {
+      text = WGS.toString();
+      startIndex = WGS.anchorOffset;
+      endIndex = WGS.extentOffset;
+    } else if (document.selection && document.selection.type != "Control") {
+      text = document.selection.createRange().text;
+    }
+    return {
+      text: text,
+      startIndex: startIndex,
+      endIndex: endIndex
+    };
+  };
+  var resetData = function resetData() {
+    setSelectionData({});
+    setLinkValue('');
+    setTarget(null);
+  };
+  var replaceWithLink = function replaceWithLink(linkValue) {
+    var fullContent = target.innerText;
+    var text = selectionData.text,
+      startIndex = selectionData.startIndex,
+      endIndex = selectionData.endIndex;
+    target.innerHTML = "".concat(fullContent === null || fullContent === void 0 ? void 0 : fullContent.slice(0, startIndex), "<a class='link' href=").concat(linkValue, " target='_blank'>").concat(text, "</a>").concat(fullContent === null || fullContent === void 0 ? void 0 : fullContent.slice(endIndex, fullContent === null || fullContent === void 0 ? void 0 : fullContent.length));
+    resetData();
+  };
+  var contextMenuHandler = function contextMenuHandler(e) {
+    var _selectionObj$text;
+    e.preventDefault();
+    var selectionObj = getSelectionText();
+    if ((selectionObj === null || selectionObj === void 0 || (_selectionObj$text = selectionObj.text) === null || _selectionObj$text === void 0 ? void 0 : _selectionObj$text.length) < 1) {
+      return;
+    }
+    setSelectionData(selectionObj);
+    setTarget(e.target);
+    setShowLinkModal(true);
+  };
+  (0, _react.useEffect)(function () {
+    setContent((0, _htmlReactParser["default"])(data));
+  }, [editMode, data]);
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, showLinkModal && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "link_modal",
+    onClick: function onClick() {
+      return setShowLinkModal(false);
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    className: "link_modal_container"
+  }, /*#__PURE__*/_react["default"].createElement("input", {
+    className: "link_modal_input",
+    placeholder: "\u0410\u0434\u0440\u0435\u0441 \u0441\u0441\u044B\u043B\u043A\u0438",
+    value: linkValue,
+    onChange: function onChange(e) {
+      return setLinkValue(e.target.value);
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_ButtonBasic["default"], {
+    blue: true,
+    text: "\u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C",
+    onClick: function onClick() {
+      setShowLinkModal(false);
+      replaceWithLink(linkValue);
+    }
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "text",
+    style: showLinkModal ? {
+      minWidth: 320,
+      minHeight: 320
+    } : {},
+    suppressContentEditableWarning: true,
+    contentEditable: editMode,
+    ref: ref,
+    onInput: handleInput,
+    onContextMenu: contextMenuHandler
+  }, content));
+});

package/dist/stories/Article/TextArticle/TextArticle.scss

@@ -0,0 +1,43 @@
+// @import url('../../../font.scss');
+
+.text {
+    max-width: 920px;
+    color: #2B2B46;
+    font-family: "Golos Text";
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 28px;
+    white-space: pre-wrap;
+
+    .link {
+        color: #029CFD;
+        text-decoration: underline;
+    }
+}
+
+.link_modal {
+    z-index: 1;
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    padding: 8px;
+    background-color: #fff;
+
+    .link_modal_container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 1em;
+        border-radius: 1em;
+        background: white;
+        width: 100%;
+
+        .link_modal_input {
+            border: 1px solid grey;
+            outline: 1px solid grey;
+            border-radius: .5em;
+        }
+    }
+
+}

package/dist/stories/Article/TitleText/TitleText.js

@@ -0,0 +1,30 @@
+"use strict";
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TitleText = void 0;
+var _react = _interopRequireWildcard(require("react"));
+require("./TitleText.scss");
+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; }
+var MAX_LENGTH = 100;
+var TitleText = exports.TitleText = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var data = _ref.data,
+    editMode = _ref.editMode,
+    onChange = _ref.onChange;
+  var handleInput = function handleInput(e) {
+    onChange();
+  };
+  var id = (0, _react.useId)();
+  return /*#__PURE__*/_react["default"].createElement("h2", {
+    id: id,
+    maxLength: 20,
+    suppressContentEditableWarning: true,
+    ref: ref,
+    className: "title__medium",
+    contentEditable: editMode,
+    onInput: handleInput
+  }, data);
+});

package/dist/stories/Article/TitleText/TitleText.scss

@@ -0,0 +1,33 @@
+// @import url('../../../font.scss');
+
+.title__medium {
+    text-align: left;
+    color: #2B2B46;
+    font-family: "Golos Text";
+    font-size: 26px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 28px;
+    word-break: break-word;
+
+    &:empty {
+        height: 1lh;
+
+        &::after{
+            content: "Введите заголовок";
+            color: #D9D9D9;
+        }
+    }
+}
+
+.title__medium[contenteditable="true"] {
+    outline: none;
+    margin: 10px 20px;
+}
+
+@media (max-width: 430px) {
+    .title__medium {
+        font-size: 22px;
+        line-height: 24px;
+    }
+}