ecomlab-components-next 0.1.159 → 0.1.162

package/dist/stories/LongTileArticleBox/LongTileArticleBox.stories.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _LongTileArticleBox = _interopRequireDefault(require("./LongTileArticleBox"));
+var _addonActions = require("@storybook/addon-actions");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = {
+  title: 'Article/LongTileArticleBox',
+  component: _LongTileArticleBox["default"],
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  args: {
+    id: 1,
+    name: 'Как увеличить продажи',
+    author: 'Константиниус Константинопольский',
+    annotation: 'Когда селлер, торгующий на маркетплейсе, становится популярнее, ему приходится ежедневно обрабатывать… Когда селлер, торгующий на маркетплейсе, становится популярнее, ему приходится ежедневно обрабатывать…',
+    photoPreview: [{
+      value: 'https://assets.cdn.personio.de/career-site/header/43501/28ed0d8a9de664d5fdcd5314facf8b51png',
+      alt: ''
+    }, {
+      value: 'https://www.rollingstone.com/wp-content/uploads/2018/06/rs-186804-peripheryjeremysaffer.jpg',
+      alt: ''
+    }],
+    tags: [],
+    date: new Date(),
+    timeToRead: 100500,
+    views: 15,
+    statusArray: ["https://dl.ecomru.ru/svg-storage/icon-waiting.svg", "Update"],
+    pathBread: 'main',
+    onLinkClick: (0, _addonActions.action)('onLinkClick'),
+    showStatus: true
+  }
+};
+var Default = exports.Default = {};

package/dist/stories/LongTileArticleBox/img/arrow_blue.svg

@@ -0,0 +1,6 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 393">
+<path id="Vector" d="M1.07092 11L11 1" stroke="#4285F4" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M11 11V1H1.07092" stroke="#4285F4" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

package/dist/stories/LongTileArticleBox/img/calendar_icon.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="bx-calendar.svg">
+<path id="Vector" d="M4.6665 7.33331H5.99984V8.66665H4.6665V7.33331ZM4.6665 9.99998H5.99984V11.3333H4.6665V9.99998ZM7.33317 7.33331H8.6665V8.66665H7.33317V7.33331ZM7.33317 9.99998H8.6665V11.3333H7.33317V9.99998ZM9.99984 7.33331H11.3332V8.66665H9.99984V7.33331ZM9.99984 9.99998H11.3332V11.3333H9.99984V9.99998Z" fill="#5D5D75"/>
+<path id="Vector_2" d="M3.33333 14.6666H12.6667C13.402 14.6666 14 14.0686 14 13.3333V3.99998C14 3.26465 13.402 2.66665 12.6667 2.66665H11.3333V1.33331H10V2.66665H6V1.33331H4.66667V2.66665H3.33333C2.598 2.66665 2 3.26465 2 3.99998V13.3333C2 14.0686 2.598 14.6666 3.33333 14.6666ZM12.6667 5.33331L12.6673 13.3333H3.33333V5.33331H12.6667Z" fill="#5D5D75"/>
+</g>
+</svg>

package/dist/stories/LongTileArticleBox/img/copy_icon.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="bx-copy.svg">
+<path id="Vector" d="M13.3335 1.33331H6.66683C5.9315 1.33331 5.3335 1.93131 5.3335 2.66665V5.33331H2.66683C1.9315 5.33331 1.3335 5.93131 1.3335 6.66665V13.3333C1.3335 14.0686 1.9315 14.6666 2.66683 14.6666H9.3335C10.0688 14.6666 10.6668 14.0686 10.6668 13.3333V10.6666H13.3335C14.0688 10.6666 14.6668 10.0686 14.6668 9.33331V2.66665C14.6668 1.93131 14.0688 1.33331 13.3335 1.33331ZM2.66683 13.3333V6.66665H9.3335L9.33483 13.3333H2.66683ZM13.3335 9.33331H10.6668V6.66665C10.6668 5.93131 10.0688 5.33331 9.3335 5.33331H6.66683V2.66665H13.3335V9.33331Z" fill="#4285F4"/>
+</g>
+</svg>

package/dist/stories/LongTileArticleBox/img/ok_icon.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="bxl-ok-ru.svg">
+<path id="Vector" d="M7.99044 8.22731C6.10711 8.22731 4.54177 6.66331 4.54177 4.81265C4.54177 2.89798 6.10711 1.33331 7.99111 1.33331C9.93911 1.33331 11.4398 2.89731 11.4398 4.81265C11.4364 5.72135 11.0724 6.59154 10.4277 7.23196C9.78305 7.87238 8.91048 8.23064 8.00177 8.22798L7.99044 8.22731ZM7.99044 3.34465C7.19311 3.34465 6.58644 4.01465 6.58644 4.81331C6.58644 5.61065 7.19311 6.21731 7.99111 6.21731C8.82111 6.21731 9.39577 5.61065 9.39577 4.81331C9.39644 4.01398 8.82111 3.34465 7.99044 3.34465ZM9.36377 11.0686L11.3124 12.952C11.6958 13.366 11.6958 13.9726 11.3124 14.356C10.8978 14.77 10.2584 14.77 9.93911 14.356L7.99111 12.4406L6.10711 14.356C5.91577 14.5473 5.65977 14.6426 5.37177 14.6426C5.14844 14.6426 4.89311 14.5466 4.66911 14.356C4.28577 13.9726 4.28577 13.366 4.66911 12.9513L6.64911 11.068C5.93406 10.8562 5.24813 10.5564 4.60711 10.1753C4.12777 9.91998 4.03244 9.28198 4.28777 8.80265C4.60711 8.32398 5.18177 8.19665 5.69311 8.51598C6.3855 8.93852 7.18096 9.16207 7.99211 9.16207C8.80325 9.16207 9.59871 8.93852 10.2911 8.51598C10.8024 8.19665 11.4084 8.32398 11.6958 8.80265C11.9838 9.28198 11.8551 9.91931 11.4078 10.1753C10.8018 10.5586 10.0991 10.846 9.36444 11.0693L9.36377 11.0686Z" fill="#4285F4"/>
+</g>
+</svg>

package/dist/stories/LongTileArticleBox/img/share_icon.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="bx-share.svg">
+<path id="Vector" d="M7.33314 4.7V2.66667C7.33314 2.48986 7.2629 2.32029 7.13787 2.19526C7.01285 2.07024 6.84328 2 6.66647 2C6.49158 2.00074 6.32398 2.07017 6.1998 2.19333L1.53314 6.86C1.47065 6.92198 1.42105 6.99571 1.38721 7.07695C1.35336 7.15819 1.33594 7.24533 1.33594 7.33333C1.33594 7.42134 1.35336 7.50848 1.38721 7.58972C1.42105 7.67096 1.47065 7.74469 1.53314 7.80667L6.1998 12.4733C6.29339 12.5651 6.41194 12.6272 6.54064 12.6519C6.66934 12.6767 6.80247 12.6629 6.9234 12.6124C7.04433 12.5619 7.14769 12.4769 7.22056 12.368C7.29344 12.259 7.33259 12.1311 7.33314 12V9.93333H7.8998C8.95308 9.91762 9.99716 10.1313 10.9596 10.5596C11.922 10.9878 12.7797 11.6204 13.4731 12.4133C13.5567 12.5246 13.673 12.6069 13.8057 12.6487C13.9384 12.6906 14.0809 12.6899 14.2131 12.6467C14.3477 12.6012 14.4643 12.514 14.5459 12.3977C14.6274 12.2814 14.6697 12.142 14.6665 12C14.6665 5.92 9.2798 4.88 7.33314 4.7ZM7.8998 8.58667C7.45391 8.58527 7.00843 8.61423 6.56647 8.67333C6.40864 8.69728 6.26465 8.77706 6.16066 8.89818C6.05667 9.01929 5.99959 9.1737 5.9998 9.33333V10.3933L2.94647 7.33333L5.9998 4.27333V5.33333C5.9998 5.51014 6.07004 5.67971 6.19507 5.80474C6.32009 5.92976 6.48966 6 6.66647 6C7.27314 6 12.0731 6.13333 13.1131 10.2867C11.6036 9.17371 9.77525 8.5775 7.8998 8.58667Z" fill="#4285F4"/>
+</g>
+</svg>

package/dist/stories/LongTileArticleBox/img/tag_icon.svg

@@ -0,0 +1,5 @@
+<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="tag">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M9.79497 6.74318L6.14322 10.4673C6.00336 10.6099 5.81392 10.6903 5.61615 10.6912C5.41838 10.6921 5.22827 10.6132 5.08722 10.4719L1.74972 7.13012C1.60792 6.98794 1.52731 6.79415 1.52562 6.59137C1.52394 6.3886 1.60131 6.19344 1.74072 6.04883L5.39172 2.25589C5.49636 2.14704 5.62122 2.06056 5.759 2.00147C5.89679 1.94239 6.04475 1.91189 6.19422 1.91177H9.37497C9.57389 1.91177 9.76465 1.99234 9.9053 2.13575C10.046 2.27916 10.125 2.47366 10.125 2.67647V5.93183C10.1249 6.08254 10.0958 6.23177 10.0392 6.37099C9.98254 6.5102 9.89956 6.63668 9.79497 6.74318ZM4.58847 1.45142C4.79796 1.23392 5.04785 1.06117 5.32356 0.943262C5.59926 0.825355 5.89525 0.764655 6.19422 0.76471H9.37497C9.87226 0.76471 10.3492 0.966127 10.7008 1.32465C11.0524 1.68318 11.25 2.16944 11.25 2.67647V5.93183C11.25 6.2332 11.1918 6.53163 11.0787 6.81006C10.9656 7.08849 10.7998 7.34146 10.5907 7.55453L6.93822 11.2786C6.58859 11.6349 6.11517 11.8359 5.62091 11.838C5.12666 11.8402 4.65157 11.6433 4.29897 11.2901L0.961474 7.94836C0.606764 7.5931 0.404968 7.10874 0.400468 6.60181C0.395967 6.09487 0.58913 5.60686 0.937474 5.24512L4.58847 1.45294V1.45142ZM7.87497 4.97059C7.62633 4.97059 7.38788 4.86988 7.21206 4.69062C7.03625 4.51136 6.93747 4.26822 6.93747 4.01471C6.93747 3.76119 7.03625 3.51806 7.21206 3.3388C7.38788 3.15954 7.62633 3.05883 7.87497 3.05883C8.12361 3.05883 8.36207 3.15954 8.53789 3.3388C8.7137 3.51806 8.81247 3.76119 8.81247 4.01471C8.81247 4.26822 8.7137 4.51136 8.53789 4.69062C8.36207 4.86988 8.12361 4.97059 7.87497 4.97059Z" fill="#B4B8B4"/>
+</g>
+</svg>

package/dist/stories/LongTileArticleBox/img/tg_icon.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="bxl-telegram.svg">
+<path id="Vector" d="M13.7766 2.478L1.95657 7.036C1.1499 7.36 1.15457 7.81 1.80857 8.01067L4.84323 8.95734L11.8646 4.52734C12.1966 4.32534 12.4999 4.434 12.2506 4.65534L6.5619 9.78934H6.56057L6.5619 9.79L6.35257 12.918C6.65923 12.918 6.79457 12.7773 6.96657 12.6113L8.44057 11.178L11.5066 13.4427C12.0719 13.754 12.4779 13.594 12.6186 12.9193L14.6312 3.434C14.8372 2.608 14.3159 2.234 13.7766 2.478Z" fill="#4285F4"/>
+</g>
+</svg>

package/dist/stories/LongTileArticleBox/img/time_icon.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="bx-time-five.svg">
+<path id="Vector" d="M8.00016 1.33331C4.32416 1.33331 1.3335 4.32398 1.3335 7.99998C1.3335 11.676 4.32416 14.6666 8.00016 14.6666C11.6762 14.6666 14.6668 11.676 14.6668 7.99998C14.6668 4.32398 11.6762 1.33331 8.00016 1.33331ZM8.00016 13.3333C5.0595 13.3333 2.66683 10.9406 2.66683 7.99998C2.66683 5.05931 5.0595 2.66665 8.00016 2.66665C10.9408 2.66665 13.3335 5.05931 13.3335 7.99998C13.3335 10.9406 10.9408 13.3333 8.00016 13.3333Z" fill="#5D5D75"/>
+<path id="Vector_2" d="M8.66683 4.66669H7.3335V8.27602L9.52883 10.4714L10.4715 9.52869L8.66683 7.72402V4.66669Z" fill="#5D5D75"/>
+</g>
+</svg>

package/dist/stories/LongTileArticleBox/img/view_icon.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="bx-show-alt.svg">
+<path id="Vector" d="M9.33333 8C8.60333 8 8 7.39667 8 6.66667C8 6.43067 8.06867 6.21133 8.17867 6.018C8.11867 6.01333 8.06133 6 8 6C7.47065 6.00349 6.96397 6.21533 6.58965 6.58965C6.21533 6.96397 6.00349 7.47065 6 8C6 9.09467 6.90533 10 8 10C9.094 10 10 9.09467 10 8C10 7.93867 9.98667 7.88133 9.982 7.82133C9.78867 7.93133 9.56933 8 9.33333 8Z" fill="#5D5D75"/>
+<path id="Vector_2" d="M8.00003 3.33331C2.91136 3.33331 1.38203 7.74465 1.36803 7.78931L1.29736 7.99998L1.36736 8.21065C1.38203 8.25531 2.91136 12.6666 8.00003 12.6666C13.0887 12.6666 14.618 8.25531 14.632 8.21065L14.7027 7.99998L14.6327 7.78931C14.618 7.74465 13.0887 3.33331 8.00003 3.33331ZM8.00003 11.3333C4.4327 11.3333 3.0507 8.76931 2.71603 7.99998C3.05203 7.22798 4.4347 4.66665 8.00003 4.66665C11.5674 4.66665 12.9494 7.23065 13.284 7.99998C12.948 8.77198 11.5654 11.3333 8.00003 11.3333Z" fill="#5D5D75"/>
+</g>
+</svg>

package/dist/stories/LongTileArticleBox/img/vk_icon.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="bxl-vk.svg">
+<path id="Vector" d="M14.3862 4.56999C14.4795 4.25999 14.3862 4.03265 13.9448 4.03265H12.4828C12.1108 4.03265 11.9408 4.22932 11.8475 4.44532C11.8475 4.44532 11.1042 6.25799 10.0508 7.43332C9.71083 7.77532 9.5555 7.88332 9.37016 7.88332C9.2775 7.88332 9.14283 7.77532 9.14283 7.46532V4.56999C9.14283 4.19799 9.0355 4.03265 8.7255 4.03265H6.42816C6.19616 4.03265 6.05616 4.20465 6.05616 4.36865C6.05616 4.72065 6.58283 4.80199 6.63683 5.79399V7.94599C6.63683 8.41732 6.55216 8.50332 6.3655 8.50332C5.87016 8.50332 4.66483 6.68399 3.9495 4.60132C3.81016 4.19665 3.6695 4.03332 3.29616 4.03332H1.83483C1.41683 4.03332 1.3335 4.22999 1.3335 4.44599C1.3335 4.83399 1.82883 6.75399 3.64083 9.29332C4.84883 11.0273 6.5495 11.9673 8.09883 11.9673C9.0275 11.9673 9.14216 11.7587 9.14216 11.3987V10.088C9.14216 9.67065 9.23083 9.58665 9.52483 9.58665C9.74083 9.58665 10.1128 9.69599 10.9802 10.5313C11.9708 11.522 12.1348 11.9667 12.6915 11.9667H14.1528C14.5702 11.9667 14.7788 11.758 14.6588 11.346C14.5275 10.936 14.0542 10.3393 13.4262 9.63332C13.0848 9.23065 12.5748 8.79732 12.4195 8.58065C12.2028 8.30132 12.2655 8.17799 12.4195 7.92999C12.4202 7.93065 14.2008 5.42265 14.3862 4.56999Z" fill="#4285F4"/>
+</g>
+</svg>

package/dist/stories/LongTileArticleBox/img/whatsapp_icon.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="bxl-whatsapp.svg">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M12.2687 3.75535C11.7142 3.19728 11.0546 2.75476 10.3279 2.45345C9.60123 2.15214 8.822 1.99802 8.03533 2.00002C4.73667 2.00002 2.05133 4.68469 2.05 7.98469C2.05 9.03935 2.32533 10.0687 2.84867 10.9767L2 14.0774L5.17267 13.2447C6.05026 13.7224 7.03347 13.9729 8.03267 13.9734H8.03533C11.3333 13.9734 14.0187 11.2887 14.02 7.98869C14.0223 7.20234 13.8687 6.42335 13.5681 5.69673C13.2674 4.9701 12.8258 4.31027 12.2687 3.75535ZM8.03533 12.9634H8.03333C7.14234 12.9634 6.26776 12.7237 5.50133 12.2694L5.32 12.1614L3.43733 12.6554L3.93933 10.82L3.82133 10.632C3.32319 9.83897 3.05949 8.92121 3.06067 7.98469C3.062 5.24202 5.29333 3.01069 8.03733 3.01069C8.69083 3.00923 9.33813 3.13741 9.94177 3.38779C10.5454 3.63817 11.0934 4.00578 11.554 4.46935C12.0171 4.93071 12.3841 5.47928 12.6339 6.08335C12.8837 6.68742 13.0113 7.33501 13.0093 7.98869C13.008 10.7314 10.7767 12.9634 8.03533 12.9634ZM10.764 9.23735C10.614 9.16202 9.87933 8.80069 9.742 8.75069C9.60533 8.70069 9.506 8.67602 9.406 8.82535C9.306 8.97469 9.01933 9.31135 8.932 9.41135C8.84467 9.51135 8.75733 9.52335 8.608 9.44869C8.45867 9.37402 7.97667 9.21602 7.40533 8.70669C6.96067 8.31002 6.66067 7.82068 6.57333 7.67069C6.486 7.52069 6.564 7.44002 6.63933 7.36535C6.70667 7.29869 6.78867 7.19069 6.86333 7.10335C6.938 7.01602 6.96267 6.95402 7.01267 6.85402C7.06267 6.75402 7.038 6.66669 7 6.59202C6.96267 6.51669 6.66333 5.78069 6.53867 5.48135C6.418 5.19135 6.29467 5.23002 6.20267 5.22602C6.10738 5.22212 6.01203 5.22034 5.91667 5.22069C5.84084 5.22262 5.76622 5.2402 5.69751 5.27232C5.62879 5.30444 5.56745 5.35041 5.51733 5.40735C5.38 5.55735 4.994 5.91869 4.994 6.65469C4.994 7.39069 5.53 8.10202 5.60467 8.20202C5.67933 8.30202 6.65933 9.81202 8.15933 10.46C8.51667 10.614 8.79533 10.706 9.012 10.7754C9.37 10.8894 9.696 10.8727 9.954 10.8347C10.2413 10.792 10.8387 10.4734 10.9633 10.124C11.088 9.77469 11.088 9.47535 11.0507 9.41269C11.0133 9.35002 10.9127 9.31202 10.764 9.23735Z" fill="#4285F4"/>
+</g>
+</svg>

package/dist/stories/ModalArticleAddElement/ModalArticleAddElement.js

@@ -0,0 +1,128 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ModalArticleAddElement = void 0;
+var _react = require("react");
+var _ArticleElement = require("../Article/ArticleElement");
+require("./ModalArticleAddElement.scss");
+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 ModalArticleAddElement = exports.ModalArticleAddElement = function ModalArticleAddElement(_ref) {
+  var onAddClick = _ref.onAddClick,
+    setShowModal = _ref.setShowModal;
+  var _useState = (0, _react.useState)(_ArticleElement.ARTICLE_TYPES.description),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedType = _useState2[0],
+    setSelectedType = _useState2[1];
+  var onRadioChange = function onRadioChange(type) {
+    setSelectedType(type);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "blackout"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "modal-article-add-element"
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "btn__close",
+    onClick: function onClick() {
+      return setShowModal(false);
+    }
+  }), /*#__PURE__*/React.createElement("h3", {
+    className: "title"
+  }, "\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C"), /*#__PURE__*/React.createElement("div", {
+    className: "modal-article-add-element__content"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "checkbox-item-box"
+  }, /*#__PURE__*/React.createElement("input", {
+    id: "description",
+    checked: selectedType === _ArticleElement.ARTICLE_TYPES.description,
+    onChange: function onChange() {
+      return onRadioChange(_ArticleElement.ARTICLE_TYPES.description);
+    },
+    className: "radio",
+    type: "radio",
+    radioGroup: "article"
+  }), /*#__PURE__*/React.createElement("label", {
+    htmlFor: "description",
+    className: "text"
+  }, "\u0422\u0435\u043A\u0441\u0442 ", /*#__PURE__*/React.createElement("span", {
+    className: "text_grey"
+  }, "(\u043E\u0441\u043D\u043E\u0432\u043D\u043E\u0439 \u0442\u0435\u043A\u0441\u0442)"))), /*#__PURE__*/React.createElement("div", {
+    className: "checkbox-item-box"
+  }, /*#__PURE__*/React.createElement("input", {
+    id: "header",
+    checked: selectedType === _ArticleElement.ARTICLE_TYPES.header,
+    onChange: function onChange() {
+      return onRadioChange(_ArticleElement.ARTICLE_TYPES.header);
+    },
+    className: "radio",
+    type: "radio",
+    radioGroup: "article"
+  }), /*#__PURE__*/React.createElement("label", {
+    htmlFor: "header",
+    className: "text"
+  }, "\u0422\u0435\u043A\u0441\u0442 ", /*#__PURE__*/React.createElement("span", {
+    className: "text_grey"
+  }, "(\u0437\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A)"))), /*#__PURE__*/React.createElement("div", {
+    className: "checkbox-item-box"
+  }, /*#__PURE__*/React.createElement("input", {
+    id: "image",
+    checked: selectedType === _ArticleElement.ARTICLE_TYPES.image,
+    onChange: function onChange() {
+      return onRadioChange(_ArticleElement.ARTICLE_TYPES.image);
+    },
+    className: "radio",
+    type: "radio",
+    radioGroup: "article"
+  }), /*#__PURE__*/React.createElement("label", {
+    htmlFor: "image",
+    className: "text"
+  }, "\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 ", /*#__PURE__*/React.createElement("span", {
+    className: "text_grey"
+  }, "(\u0444\u0430\u0439\u043B \u0432 \u0444\u043E\u0440\u043C\u0430\u0442\u0435 jpg, jpeg, png)"))), /*#__PURE__*/React.createElement("div", {
+    className: "checkbox-item-box"
+  }, /*#__PURE__*/React.createElement("input", {
+    id: "warning",
+    checked: selectedType === _ArticleElement.ARTICLE_TYPES.warningBlock,
+    onChange: function onChange() {
+      return onRadioChange(_ArticleElement.ARTICLE_TYPES.warningBlock);
+    },
+    className: "radio",
+    type: "radio",
+    radioGroup: "article"
+  }), /*#__PURE__*/React.createElement("label", {
+    htmlFor: "warning",
+    className: "text"
+  }, "\u0420\u0435\u043A\u043E\u043C\u0435\u043D\u0434\u0430\u0446\u0438\u044E ", /*#__PURE__*/React.createElement("span", {
+    className: "text_grey"
+  }, "(\u0442\u0435\u043A\u0441\u0442 \u043F\u043E\u043C\u0435\u0449\u0435\u043D \u0432 \u043E\u0442\u0434\u0435\u043B\u044C\u043D\u044B\u0439 \u0431\u043B\u043E\u043A \u0438 \u0432\u044B\u0434\u0435\u043B\u0435\u043D \u0446\u0432\u0435\u0442\u043E\u043C)"))), /*#__PURE__*/React.createElement("div", {
+    className: "checkbox-item-box"
+  }, /*#__PURE__*/React.createElement("input", {
+    id: "form",
+    checked: selectedType === _ArticleElement.ARTICLE_TYPES.formBtn,
+    onChange: function onChange() {
+      return onRadioChange(_ArticleElement.ARTICLE_TYPES.formBtn);
+    },
+    className: "radio",
+    type: "radio",
+    radioGroup: "article"
+  }), /*#__PURE__*/React.createElement("label", {
+    htmlFor: "form",
+    className: "text"
+  }, "\u0424\u043E\u0440\u043C\u0443 ", /*#__PURE__*/React.createElement("span", {
+    className: "text_grey"
+  }, "(\u0424\u043E\u0440\u043C\u0430 \u0437\u0430\u0445\u0432\u0430\u0442\u0430 \u0432 \u043C\u043E\u0434\u0430\u043B\u044C\u043D\u043E\u043C \u043E\u043A\u043D\u0435, \u043E\u0442\u043A\u0440\u044B\u0432\u0430\u044E\u0449\u0430\u044F\u0441\u044F \u043F\u043E \u043D\u0430\u0436\u0430\u0442\u0438\u044E \u043D\u0430 \u043A\u043D\u043E\u043F\u043A\u0443)")))), /*#__PURE__*/React.createElement("div", {
+    className: "btn-box"
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: function onClick() {
+      onAddClick(selectedType);
+      setShowModal(false);
+    },
+    className: "btn__green"
+  }, "\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u044D\u043B\u0435\u043C\u0435\u043D\u0442"))));
+};

package/dist/stories/ModalArticleAddElement/ModalArticleAddElement.scss

@@ -0,0 +1,124 @@
+.blackout {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 10;
+    min-height: 100vh;
+    overflow: auto;
+
+    &::before {
+        content: "";
+        display: block;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: rgba(0, 0, 0, 0.3);
+        position: absolute;
+        z-index: 1000;
+        opacity: 0.3;
+    }
+}
+
+.modal-article-add-element {
+    max-width: 560px;
+    min-width: 560px;
+    min-height: 360px;
+    height: auto;
+    margin-top: 160px;
+    position: absolute;
+    left: calc(50% - 280px);
+    border-radius: 16px;
+    background-color: rgb(255, 255, 255);
+    padding: 24px 40px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    z-index: 5000;
+
+    .btn__close {
+        position: absolute;
+        display: block;
+        width: 20px;
+        height: 20px;
+        background-repeat: no-repeat;
+        border: none;
+        background-color: unset;
+        background-image: url('https://dl.ecomru.ru/svg-storage/close.svg');
+        right: 1.5em;
+        top: 25px;
+        cursor: pointer;
+    }
+
+    .title {
+        font-size: 16px;
+        font-weight: 500;
+        padding: 0;
+        margin-top: 32px;
+    }
+
+    .radio {
+        cursor: pointer;
+        background-color: white;
+        color: black;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        border-radius: 50%;
+        width: 16px;
+        min-width: 16px;
+        height: 16px;
+    
+        border: 1px solid #999;
+        outline: none;
+        position: relative;
+        top: 4px;
+        &:checked {
+            cursor: pointer;
+            min-width: 16px;
+            width: 16px;
+            height: 16px;
+            border: 4px solid #FBCD10;
+            background-color: black;
+        }
+    }
+
+    &__content {
+        display: flex;
+        flex-direction: column;
+        width: auto;
+        gap: 40px;
+        margin-top: 40px;
+
+        
+    }
+
+    .btn-box {
+        display: flex;
+        justify-content: center;
+        width: 100%;
+        margin-top: 40px;
+
+        .btn__green {
+            max-width: 200px;
+            margin: 0;
+        }
+    }
+
+    .checkbox-item-box {
+        display: flex;
+        gap: 24px;
+
+        .text {
+            font-size: 14px;
+            margin-top: 0;
+
+            .text_grey {
+                font-size: 14px;
+                color: #AAAAAA;
+            }
+        }
+    }
+}

package/dist/stories/ModalArticleAddElement/ModalArticleAddElement.stories.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Modal = void 0;
+var _addonActions = require("@storybook/addon-actions");
+var _ModalArticleAddElement = require("./ModalArticleAddElement");
+var _default = exports["default"] = {
+  title: 'Article/ModalArticleAddElement',
+  component: _ModalArticleAddElement.ModalArticleAddElement,
+  parameters: {
+    layout: 'centered'
+  },
+  args: {
+    onAddClick: (0, _addonActions.action)('onAddClick')
+  }
+};
+var Modal = exports.Modal = {};

package/dist/stories/ModalBitrixForm/ModalBitrixForm.js

@@ -0,0 +1,236 @@
+"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["default"] = void 0;
+var _done_icon = _interopRequireDefault(require("./img/done_icon.svg"));
+var _close_icon = _interopRequireDefault(require("./img/close_icon.svg"));
+var _DownSelector = _interopRequireDefault(require("../DropDownSelector/DownSelector"));
+var _InputDinamycPlaceholder = _interopRequireDefault(require("../InputDinamycPlaceholder/InputDinamycPlaceholder"));
+var _TextareaDynamicPlaceholder = _interopRequireDefault(require("../TextareaDynamicPlaceholder/TextareaDynamicPlaceholder"));
+var _ButtonBasic = require("../ButtonBasic/ButtonBasic");
+var _validationFunc = require("../../common/validationFunc");
+var _react = require("react");
+require("./ModalBitrixForm.scss");
+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); }
+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); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+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 ModalBitrixForm = function ModalBitrixForm(_ref) {
+  var setIsModal = _ref.setIsModal,
+    inputArr = _ref.inputArr,
+    formTitle = _ref.formTitle,
+    subTitle = _ref.subTitle,
+    bitrixToken = _ref.bitrixToken,
+    _ref$modal = _ref.modal,
+    modal = _ref$modal === void 0 ? true : _ref$modal,
+    _ref$colorBtn = _ref.colorBtn,
+    colorBtn = _ref$colorBtn === void 0 ? 'green' : _ref$colorBtn,
+    _ref$btnName = _ref.btnName,
+    btnName = _ref$btnName === void 0 ? false : _ref$btnName;
+  var _useState = (0, _react.useState)({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  var _useState3 = (0, _react.useState)([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedValue = _useState4[0],
+    setSelectedValue = _useState4[1];
+  var _useState5 = (0, _react.useState)({}),
+    _useState6 = _slicedToArray(_useState5, 2),
+    err = _useState6[0],
+    setErr = _useState6[1];
+  var _useState7 = (0, _react.useState)([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    inputs = _useState8[0],
+    setInputs = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    successfulResponse = _useState10[0],
+    setsuccessfulResponse = _useState10[1];
+  var fetchTest = function fetchTest() {
+    var _Object$entries;
+    var queries = (_Object$entries = Object.entries(inputValue)) === null || _Object$entries === void 0 || (_Object$entries = _Object$entries.map(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+        key = _ref3[0],
+        value = _ref3[1];
+      if (key == 'FIELDS[TITLE]') {
+        return "".concat(key, "=").concat(value + ' // ' + inputValue['FIELDS[NAME]']);
+      }
+      if (key == 'FIELDS[COMMENTS]') {
+        return selectedValue !== null && selectedValue !== void 0 && selectedValue.label ? "".concat(key, "=\u0422\u0438\u043F \u043F\u0430\u0440\u0442\u043D\u0435\u0440\u0430: ").concat(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.label, "  // ").concat(value) : "".concat(key, "=").concat(value);
+      } else return "".concat(key, "=").concat(value);
+    })) === null || _Object$entries === void 0 ? void 0 : _Object$entries.join('&');
+    var testUrl = "https://ecs.bitrix24.ru/rest/1/".concat(bitrixToken, "/crm.lead.add.json?").concat(queries);
+    fetch(testUrl).then(function (res) {
+      return res.json();
+    }).then(function (json) {
+      if (json !== null && json !== void 0 && json.result) {
+        setsuccessfulResponse(true);
+      }
+    })["catch"](function (err) {
+      return console.error(err);
+    });
+  };
+  var handleChange = function handleChange(e, id) {
+    // setInputValue(prev => ({ ...prev, [id]: e?.value }))
+    setSelectedValue(e);
+  };
+  (0, _react.useEffect)(function () {
+    setInputs(_toConsumableArray(inputArr === null || inputArr === void 0 ? void 0 : inputArr.map(function (_ref4, ind) {
+      var id = _ref4.id,
+        placeholder = _ref4.placeholder,
+        hidden = _ref4.hidden,
+        value = _ref4.value,
+        inputType = _ref4.inputType,
+        options_prop = _ref4.options_prop,
+        type = _ref4.type,
+        required = _ref4.required;
+      if (hidden) {
+        setInputValue(function (prev) {
+          return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, id, value));
+        });
+        return;
+      }
+      if (type == 'textarea') {
+        return /*#__PURE__*/React.createElement(_TextareaDynamicPlaceholder["default"], {
+          width: "100%",
+          changeValue: inputValue === null || inputValue === void 0 ? void 0 : inputValue[id],
+          onChange: function onChange(e) {
+            return setInputValue(function (prev) {
+              return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, id, e));
+            });
+          },
+          required: required,
+          placeholder: placeholder
+        });
+      }
+      if (type == 'dropdown') {
+        return /*#__PURE__*/React.createElement(_DownSelector["default"], {
+          options_prop: options_prop,
+          state: selectedValue,
+          setState: function setState(e) {
+            handleChange(e, id);
+          },
+          err: err === null || err === void 0 ? void 0 : err[id],
+          required: required,
+          placeholder: placeholder,
+          size: "l",
+          width: "100%"
+        });
+      }
+      if (type == 'input') {
+        return /*#__PURE__*/React.createElement(_InputDinamycPlaceholder["default"], {
+          key: id,
+          type: inputType ? inputType : 'text',
+          placeholder: placeholder,
+          changeValue: inputValue === null || inputValue === void 0 ? void 0 : inputValue[id],
+          onChange: function onChange(e) {
+            return setInputValue(function (prev) {
+              return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, id, e));
+            });
+          },
+          autoComplete: false,
+          err: err === null || err === void 0 ? void 0 : err[id],
+          required: required,
+          textErr: err === null || err === void 0 ? void 0 : err[id]
+        });
+      }
+    })));
+  }, [inputArr, err, selectedValue]);
+  var validationFields = function validationFields() {
+    setErr({});
+    var error = {};
+    inputArr === null || inputArr === void 0 || inputArr.forEach(function (_ref5, ind) {
+      var id = _ref5.id,
+        inputType = _ref5.inputType,
+        required = _ref5.required;
+      if (required) {
+        if (inputType == 'email') {
+          if (!(0, _validationFunc.validationEmail)(inputValue === null || inputValue === void 0 ? void 0 : inputValue[id])) {
+            error[id] = 'Неверный email';
+          }
+        } else if (inputType == 'tel') {
+          var regex = /^[\d\+][\d\(\)\ -]{4,14}\d$/;
+          if (!regex.test(inputValue === null || inputValue === void 0 ? void 0 : inputValue[id])) {
+            error[id] = 'Неверный телефон';
+          }
+        } else if (inputType == 'dropdown') {
+          if (!(selectedValue !== null && selectedValue !== void 0 && selectedValue.label)) {
+            error[id] = 'Выберите значение';
+          }
+        } else if (inputType == 'text') {
+          if ((inputValue === null || inputValue === void 0 ? void 0 : inputValue[id].length) < 1) {
+            error[id] = 'Поле не заполнено';
+          }
+        }
+      }
+      setErr(error);
+    });
+    if (Object.keys(error).length === 0) {
+      return true;
+    } else return false;
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: modal ? 'blackout' : '',
+    onClick: function onClick(e) {
+      if (modal) {
+        var el = e.target;
+        if (el.classList.contains('blackout')) {
+          setIsModal(false);
+        }
+      }
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "modal-bitrix-form"
+  }, successfulResponse && /*#__PURE__*/React.createElement("div", {
+    className: "modal-bitrix-form__successful"
+  }, /*#__PURE__*/React.createElement("img", _extends({
+    className: "modal-bitrix-form__icon-done",
+    alt: "icon"
+  }, _done_icon["default"])), /*#__PURE__*/React.createElement("p", {
+    className: "modal-bitrix-form__text-green"
+  }, "\u0417\u0430\u044F\u0432\u043A\u0443 \u043F\u0440\u0438\u043D\u044F\u043B\u0438!"), /*#__PURE__*/React.createElement("p", {
+    className: "modal-bitrix-form__text"
+  }, "\u0412 \u0431\u043B\u0438\u0436\u0430\u0439\u0448\u0435\u0435 \u0432\u0440\u0435\u043C\u044F \u0441\u0432\u044F\u0436\u0435\u043C\u0441\u044F \u0441 \u0432\u0430\u043C\u0438!")), /*#__PURE__*/React.createElement(React.Fragment, null, (formTitle || subTitle) && /*#__PURE__*/React.createElement("header", {
+    className: "modal-bitrix-form__header"
+  }, /*#__PURE__*/React.createElement("h1", {
+    className: "modal-bitrix-form__title"
+  }, formTitle), /*#__PURE__*/React.createElement("p", {
+    className: "modal-bitrix-form__description"
+  }, subTitle), modal && /*#__PURE__*/React.createElement("button", {
+    className: "modal-bitrix-form__btn-close",
+    onClick: function onClick(e) {
+      return setIsModal(false);
+    }
+  }, /*#__PURE__*/React.createElement("img", _close_icon["default"]))), /*#__PURE__*/React.createElement("div", {
+    className: "modal-bitrix-form__content"
+  }, inputs), /*#__PURE__*/React.createElement(_ButtonBasic.ButtonBasic, {
+    text: btnName ? btnName : 'Отправить',
+    green: colorBtn == 'green',
+    darkViolet: colorBtn == 'darkViolet',
+    width: "100%",
+    size: "56px",
+    onClick: function onClick(e) {
+      if (validationFields()) {
+        fetchTest();
+      }
+    }
+  }))));
+};
+var _default = exports["default"] = ModalBitrixForm;