ecomlab-components-next 0.1.159 → 0.1.162

package/dist/stories/MultilevelSidebar/MultilevelSidebar.scss

@@ -0,0 +1,237 @@
+.multilevel-sidebar {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    position: relative;
+
+    &__panelBtn {
+        display: flex;
+        gap: 16px;
+    }
+
+    .btn-section {
+        display: none;
+    }
+
+    &__nav {
+        display: flex;
+        flex-direction: column;
+        height: fit-content;
+        max-height: calc(100vh - 107px - 140px);
+        overflow: auto;
+        padding: 8px;
+    }
+
+
+    &__box,
+    &__box_hide {
+        position: sticky;
+        top: 140px;
+        transition: all 0.5s;
+        height: fit-content;
+        min-width: 264px;
+        width: 264px;
+        max-width: 325px;
+        background-color: white;
+        border-radius: 12px;
+        overflow: hidden;
+    }
+
+        .sidebar-menu {
+    
+            &__item,
+            &__item_active {
+                width: 100%;
+            }
+    
+            &__item_active {
+                border-radius: 16px;
+    
+                .sidebar-menu__item_active {
+                    outline: none;
+                    // padding-right: 0;
+    
+                }
+            }
+    
+            &__link-box {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                border-radius: 16px;
+                padding: 6px 12px;
+    
+                .sidebar-menu__link-box {
+                    border: none;
+                }
+    
+                &_active {
+    
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    color: #111;
+                    /* Lending/Mon16reg */
+                    font-family: Montserrat;
+                    font-size: 16px;
+                    font-style: normal;
+                    font-weight: 400;
+                    line-height: normal;
+                    color: var(--Text-Primary-Black, #0B110B);
+                    /* Desktop/Body/M/Regular */
+                    font-family: NunitoSans;
+                    font-size: 16px;
+                    font-style: normal;
+                    font-weight: 400;
+                    line-height: 20px;
+                    padding: 6px 12px;
+    
+                    .sidebar-menu__link {
+                        color: #B147E2;
+                        background-color: #F0F2F4;
+                        border-radius: 10px;
+                    }
+                }
+            }
+    
+            &__list {
+                display: block;
+                overflow: hidden;
+                transition: max-height 0.5s;
+                margin-left: 16px;
+    
+                .sidebar-menu__link {
+                //    padding: 0;
+    
+                    .sidebar-menu__link {
+                        color: #B147E2;
+                    }
+                }
+    
+                // &:nth-child(2) {
+                //     margin-top: 4px;
+                // }
+            }
+    
+            &__list_hide {
+    
+                display: block;
+                overflow: hidden;
+                max-height: 0;
+                transition: max-height 0.2s;
+            }
+    
+            &__link,
+            &__link_grey {
+                display: flex;
+                font-size: 18px;
+                justify-content: space-between;
+                width: 100%;
+                align-items: center;
+                color: var(--Text-Primary-Black, #0B110B);
+                /* Desktop/Body/M/Regular */
+                font-family: NunitoSans;
+                font-size: 16px;
+                font-style: normal;
+                font-weight: 400;
+                line-height: 20px;
+                cursor: pointer;
+                padding: 7px 12px;
+    
+                &_grey {
+                    color: #888888;
+                    padding: 0;
+                }
+    
+                &:hover {
+                    color: #B147E2;
+                    transition: 0.5s;
+                }
+            }
+    
+            &__list-item,
+            &__list-item_active {
+                //  padding: 8px;
+                cursor: pointer;
+                color: var(--Text-Primary-Black, #0B110B);
+                /* Desktop/Body/M/Regular */
+                font-family: NunitoSans;
+                font-size: 16px;
+                font-style: normal;
+                font-weight: 400;
+                line-height: 20px;
+                width: 100%;
+                transition: background-color 0.1s;
+                padding: 7px 12px;
+                border-radius: 10px;
+    
+                &_active {
+                    background-color: #F0F2F4;
+                    color: #B147E2;
+                }
+    
+                &:hover {
+                    color: #B147E2;
+                    transition: 0.5s;
+                }
+            }
+        }
+    
+        .icon-drop {
+            width: 16px;
+            height: 16px;
+            background-image: url('https://dl.ecomru.ru/svg-storage/Drop.svg');
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: 8px;
+            border: none;
+            transform: rotate(180deg);
+    
+            &__active {
+                @extend .icon-drop;
+                transform: none;
+            }
+        }
+}
+
+@media (max-width: 1000px) {
+    .multilevel-sidebar {
+        display: flex;
+        flex-direction: column;
+
+        .btn-section {
+            display: inline-block;
+            width: fit-content;
+            width: 100%;
+            min-height: 32px;
+            height: 32px;
+            padding: 4px 16px;
+            justify-content: center;
+            align-items: center;
+            gap: 6px;
+            border-radius: 100px;
+            border: 1px solid #9199A5;
+            background: #FFF;
+            cursor: pointer;
+        }
+
+        &__box {
+            margin-top: 10px;
+            border: 1px solid #9199A5;
+            background: #FFF;
+            box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+            width: 100%;
+            min-width: 200px;
+            max-width: 100%;
+            border-radius: 10px;
+            position: absolute;
+            top: 32px;
+            //   width: calc(100% - 32px);
+            z-index: 2;
+
+            &_hide {
+                display: none;
+            }
+        }
+    }
+}

package/dist/stories/MultilevelSidebar/MultilevelSidebar.stories.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _addonActions = require("@storybook/addon-actions");
+var _MultilevelSidebar = _interopRequireDefault(require("./MultilevelSidebar"));
+require("./MultilevelSidebarStorybook.scss");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = {
+  title: 'Article/MultilevelSidebar',
+  component: _MultilevelSidebar["default"],
+  parameters: {
+    layout: 'centered'
+  }
+};
+var Default = exports.Default = {
+  args: {
+    data: [{
+      label: 'some',
+      value: '/some/path',
+      redirect: true
+    }, {
+      "label": "gtcom.io",
+      "subItems": [{
+        "label": "services",
+        "subItems": [{
+          "label": " parsing",
+          "value": 1
+        }],
+        "value": 2
+      }, {
+        "label": "cases",
+        "subItems": [],
+        "value": 3
+      }, {
+        "label": "news",
+        "subItems": [],
+        "value": 13
+      }, {
+        "label": "guides",
+        "subItems": [],
+        "value": 23
+      }, {
+        "label": "articles",
+        "subItems": [],
+        "value": 33
+      }],
+      "value": 4
+    }, {
+      "label": "ecomru.ru",
+      "value": 5,
+      "subItems": [{
+        "label": "cases",
+        "subItems": [],
+        "value": 7
+      }, {
+        "label": "news",
+        "subItems": [],
+        "value": 45
+      }]
+    }],
+    setData: (0, _addonActions.action)('setData'),
+    maxDepth: 3,
+    mainRoute: 'main',
+    baseRoute: 'test',
+    onLevelClick: (0, _addonActions.action)('onLevelClick'),
+    onPortalClick: (0, _addonActions.action)('onPortalClick'),
+    setPathsWebName: (0, _addonActions.action)('setPathsWebName'),
+    setTitle: (0, _addonActions.action)('setTitle'),
+    setDescription: (0, _addonActions.action)('setDescription'),
+    dependencies: []
+  },
+  render: function render(props) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "container"
+    }, /*#__PURE__*/React.createElement(_MultilevelSidebar["default"], props));
+  }
+};

package/dist/stories/MultilevelSidebar/MultilevelSidebarStorybook.scss

@@ -0,0 +1,7 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    margin: 16px;
+    min-width: 325px;
+    width: 325px;
+}

package/dist/stories/MultilevelSidebar/img/drop.svg

@@ -0,0 +1,3 @@
+<svg width="9" height="13" viewBox="0 0 9 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 1L1 6.5L8 12" stroke="#111111" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/stories/MultilevelSidebar/img/settings.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 143 143" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M71.5 95.3334C84.6441 95.3334 95.3334 84.6441 95.3334 71.5C95.3334 58.3559 84.6441 47.6667 71.5 47.6667C58.3559 47.6667 47.6667 58.3559 47.6667 71.5C47.6667 84.6441 58.3559 95.3334 71.5 95.3334ZM71.5 59.5834C77.9589 59.5834 83.4167 65.0412 83.4167 71.5C83.4167 77.9589 77.9589 83.4167 71.5 83.4167C65.0412 83.4167 59.5834 77.9589 59.5834 71.5C59.5834 65.0412 65.0412 59.5834 71.5 59.5834Z" fill="#636D65"/>
+<path d="M16.9515 96.1437L22.9098 106.452C26.0737 111.915 33.6884 113.965 39.1761 110.801L42.328 108.978C45.7751 111.69 49.5758 113.919 53.625 115.604V119.167C53.625 125.739 58.9696 131.083 65.5417 131.083H77.4583C84.0304 131.083 89.375 125.739 89.375 119.167V115.604C93.4229 113.918 97.2232 111.691 100.672 108.984L103.824 110.807C109.324 113.965 116.92 111.927 120.096 106.452L126.049 96.1496C127.628 93.413 128.056 90.1614 127.239 87.1093C126.423 84.0571 124.428 81.4539 121.693 79.8715L118.684 78.1316C119.324 73.7377 119.324 69.2743 118.684 64.8803L121.693 63.1405C124.427 61.5569 126.42 58.9537 127.237 55.902C128.053 52.8503 127.626 49.5993 126.049 46.8623L120.096 36.5604C116.932 31.0787 109.324 29.0231 103.824 32.1989L100.672 34.0221C97.2249 31.3105 93.4242 29.0814 89.375 27.3964V23.8334C89.375 17.2613 84.0304 11.9167 77.4583 11.9167H65.5417C58.9696 11.9167 53.625 17.2613 53.625 23.8334V27.3964C49.5772 29.0817 45.7768 31.3086 42.328 34.0161L39.1761 32.1929C33.6706 29.029 26.0677 31.0787 22.9038 36.5544L16.9515 46.8564C15.3724 49.593 14.9442 52.8445 15.7608 55.8967C16.5775 58.9489 18.5723 61.5521 21.307 63.1345L24.316 64.8743C23.6739 69.2661 23.6739 73.7279 24.316 78.1197L21.307 79.8596C18.5731 81.4442 16.5792 84.0485 15.7627 87.1012C14.9462 90.1539 15.3737 93.4057 16.9515 96.1437ZM36.7689 79.7106C36.0961 77.0255 35.7539 74.2682 35.75 71.5C35.75 68.7473 36.0956 65.9826 36.7629 63.2894C37.0772 62.0342 36.9738 60.7107 36.4685 59.5195C35.9632 58.3282 35.0834 57.3341 33.9625 56.6876L27.2713 52.8147L33.2177 42.5127L40.04 46.4571C41.1526 47.1009 42.444 47.3665 43.7203 47.2139C44.9966 47.0614 46.189 46.4989 47.1185 45.6111C51.1494 41.7772 56.0103 38.9247 61.3232 37.2754C62.5436 36.9028 63.6121 36.1482 64.3716 35.1228C65.131 34.0973 65.5411 32.8552 65.5417 31.5792V23.8334H77.4583V31.5792C77.4589 32.8552 77.869 34.0973 78.6285 35.1228C79.3879 36.1482 80.4564 36.9028 81.6768 37.2754C86.9887 38.9271 91.849 41.7793 95.8815 45.6111C96.812 46.4972 98.0042 47.0585 99.2801 47.211C100.556 47.3635 101.847 47.099 102.96 46.4571L109.776 42.5187L115.735 52.8206L109.038 56.6876C107.917 57.3348 107.038 58.329 106.533 59.52C106.028 60.7111 105.924 62.0342 106.237 63.2894C106.904 65.9826 107.25 68.7473 107.25 71.5C107.25 74.2468 106.904 77.0115 106.231 79.7106C105.918 80.9665 106.023 82.2901 106.529 83.4812C107.036 84.6723 107.916 85.6661 109.038 86.3124L115.729 90.1794L109.782 100.481L102.96 96.5429C101.848 95.8981 100.556 95.632 99.2796 95.7846C98.003 95.9372 96.8105 96.5002 95.8815 97.389C91.8506 101.223 86.9897 104.075 81.6768 105.725C80.4564 106.097 79.3879 106.852 78.6285 107.877C77.869 108.903 77.4589 110.145 77.4583 111.421L77.4703 119.167H65.5417V111.421C65.5411 110.145 65.131 108.903 64.3716 107.877C63.6121 106.852 62.5436 106.097 61.3232 105.725C56.0114 104.073 51.151 101.221 47.1185 97.389C46.1908 96.4977 44.9977 95.9334 43.7202 95.7818C42.4427 95.6302 41.1506 95.8995 40.04 96.5489L33.2237 100.493L27.2653 90.1913L33.9625 86.3124C35.0838 85.6661 35.9642 84.6723 36.4705 83.4812C36.9769 82.2901 37.0816 80.9665 36.7689 79.7106Z" fill="#636D65"/>
+</svg>

package/dist/stories/NoArticles/NoArticles.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _banner = _interopRequireDefault(require("./img/banner.svg"));
+require("./NoArticles.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); }
+var NoArticles = function NoArticles() {
+  var lang = localStorage.getItem('lang');
+
+  // Перевод
+  var translateContent = function translateContent() {
+    if (lang == 'rus') return 'Совсем скоро здесь будут статьи';
+    if (lang == 'eng') return 'More articles will be here very soon';
+    if (lang == 'tur') return "Makaleler Türkçe'ye çevrilme aşamasında olup, İngilizce versiyonlarını web sitesinde okuyabilirsiniz.";
+    return 'Совсем скоро здесь будут статьи';
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "no-articles"
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "text_articles"
+  }, translateContent()), /*#__PURE__*/React.createElement("img", _extends({
+    className: "img_banner"
+  }, _banner["default"])));
+};
+var _default = exports["default"] = NoArticles;

package/dist/stories/NoArticles/NoArticles.scss

@@ -0,0 +1,26 @@
+.no-articles {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    gap: 60px;
+    padding: 0px 40px;
+
+    .text_articles {
+        color: #0F172A;
+        text-align: center;
+        font-family: Montserrat;
+        font-size: 20px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 30px;
+        letter-spacing: -0.2px;
+        width: 60%;
+    }
+
+    .img_banner {
+        width: 100%;
+        max-width: 270px;
+        height: auto;
+    }
+}

package/dist/stories/NoArticles/NoArticles.stories.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _NoArticles = _interopRequireDefault(require("./NoArticles"));
+var _addonActions = require("@storybook/addon-actions");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = {
+  title: 'Article/NoArticles',
+  component: _NoArticles["default"],
+  parameters: {
+    layout: 'centered'
+  },
+  args: {
+    lang: false
+  }
+};
+var Default = exports.Default = {};