Начал делать вкладки

.stylelintrc

@@ -153,7 +153,7 @@
       "message": "После «{» перенос строки быть должен"
     }],
     "block-opening-brace-space-before": ["always", {
-      "message": "Перед «{» пробел нужен"
+      "message": "Перед «{» один пробел нужен"
     }],
     "selector-attribute-brackets-space-inside": ["never", {
       "message": "В селекторе атрибута пробел использовать не следует"

gulpfile.js

@@ -29,7 +29,7 @@ let lists = getFilesList(projectConfig);
 // console.log(lists);
 
 // Запишем стилевой файл диспетчер подключений
-let styleImports = '/**\n * ВНИМАНИЕ! Этот файл генерируется автоматически.\n * Не пишите сюда ничего вручную, все такие правки будут потеряны.\n * Читайте ./README.md для понимания.\n */\n\n';
+let styleImports = '/*!*\n * ВНИМАНИЕ! Этот файл генерируется автоматически.\n * Не пишите сюда ничего вручную, все такие правки будут потеряны.\n * Читайте ./README.md для понимания.\n */\n\n';
 lists.css.forEach(function(blockPath) {
   styleImports += '@import \''+blockPath+'\';\n';
 });

projectConfig.json

@@ -52,7 +52,8 @@
     "progress": [],
     "media": [],
     "modal": [],
-    "close": []
+    "close": [],
+    "tabs": []
   },
   "addCssBefore": [
     "./src/scss/variables.scss",

src/blocks-demo.html

@@ -1861,6 +1861,44 @@
 
     </section>
 
+    <section class="blocks-library__item" id="tabs" data-name=".tabs">
+
+      <h2 class="blocks-library__item-title">Вкладки</h2>
+
+      <div class="tabs">
+        <ul class="tabs__links">
+          <li class="tabs__link-wrap  tabs__link-wrap--active"><a href="#demo-tab-01" class="tabs__link">Вкладка 01</a></li>
+          <li class="tabs__link-wrap"><a href="#demo-tab-02" class="tabs__link">Вкладка 02</a></li>
+          <li class="tabs__link-wrap"><a href="#demo-tab-03" class="tabs__link">Вкладка 03</a></li>
+          <li class="tabs__link-wrap"><a href="#demo-tab-04" class="tabs__link">Вкладка 04</a></li>
+        </ul>
+        <div class="tabs__content-wrapper">
+          <div class="tabs__content-item">
+            <div class="tabs__content-item  tabs__content-item--active" id="demo-tab-01">
+              <p>01 Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные.</p>
+            </div>
+            <div class="tabs__content-item" id="demo-tab-02">
+              <p>02 Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные.</p>
+            </div>
+            <div class="tabs__content-item" id="demo-tab-03">
+              <p>03 Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные.</p>
+            </div>
+            <div class="tabs__content-item" id="demo-tab-04">
+              <p>04 Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="blocks-library__code-wrapper">
+        <span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
+        <div class="blocks-library__code">
+          <pre class="code">11111</pre>
+        </div>
+      </div>
+
+    </section>
+
     <div class="burger  blocks-library__menu-toggler" data-toggle="off-canvas"><span data-toggle="off-canvas"></span></div>
 
   </main>

src/blocks/tabs/tabs.html

+<!--DEV
+
+Для использования этого файла как шаблона:
+
+@ @include('blocks/tabs/tabs.html')
+
+(Нужно убрать пробел между символами @)
+Подробнее: https://www.npmjs.com/package/gulp-file-include
+
+-->
+
+<div class="tabs">content</div>

src/blocks/tabs/tabs.js

+(function() {
+
+  'use strict';
+
+  // Источник: https://github.com/callmenick/responsive-tabs/blob/master/js/src/tabs.js
+
+  /**
+   * tabs
+   *
+   * @description The Tabs component.
+   * @param {Object} options The options hash
+   */
+  var tabs = function(options) {
+
+    var el = document.querySelector(options.el);
+    var tabNavigationLinks = el.querySelectorAll(options.tabNavigationLinks);
+    var tabContentContainers = el.querySelectorAll(options.tabContentContainers);
+    var activeIndex = 0;
+    var initCalled = false;
+
+    /**
+     * init
+     *
+     * @description Initializes the component by removing the no-js class from
+     *   the component, and attaching event listeners to each of the nav items.
+     *   Returns nothing.
+     */
+    var init = function() {
+      if (!initCalled) {
+        initCalled = true;
+        el.classList.remove('no-js');
+
+        for (var i = 0; i < tabNavigationLinks.length; i++) {
+          var link = tabNavigationLinks[i];
+          handleClick(link, i);
+        }
+      }
+    };
+
+    /**
+     * handleClick
+     *
+     * @description Handles click event listeners on each of the links in the
+     *   tab navigation. Returns nothing.
+     * @param {HTMLElement} link The link to listen for events on
+     * @param {Number} index The index of that link
+     */
+    var handleClick = function(link, index) {
+      link.addEventListener('click', function(e) {
+        e.preventDefault();
+        goToTab(index);
+      });
+    };
+
+    /**
+     * goToTab
+     *
+     * @description Goes to a specific tab based on index. Returns nothing.
+     * @param {Number} index The index of the tab to go to
+     */
+    var goToTab = function(index) {
+      if (index !== activeIndex && index >= 0 && index <= tabNavigationLinks.length) {
+        tabNavigationLinks[activeIndex].classList.remove('is-active');
+        tabNavigationLinks[index].classList.add('is-active');
+        tabContentContainers[activeIndex].classList.remove('is-active');
+        tabContentContainers[index].classList.add('is-active');
+        activeIndex = index;
+      }
+    };
+
+    /**
+     * Returns init and goToTab
+     */
+    return {
+      init: init,
+      goToTab: goToTab
+    };
+
+  };
+
+  /**
+   * Attach to global namespace
+   */
+  window.tabs = tabs;
+
+})();

src/blocks/tabs/tabs.scss

+// В этом файле должны быть стили только для БЭМ-блока tabs, его элементов,
+// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
+// Не пишите здесь другие селекторы.
+
+$text-color:                  hsl(0, 0%, 10%) !default;
+
+$border-color:                hsl(0, 0%, 60%) !default;
+
+$line-height:                 1.375em !default;
+
+$field-padding-vertical:      0.3em !default;
+$field-padding-horizontal:    0.7em !default;
+
+.tabs {
+
+  $block-name:                &;
+
+  margin-top: $line-height;
+  margin-bottom: $line-height;
+
+  &__links {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+
+    &:after {
+      content: '';
+      flex-grow: 1;
+      height: 1px;
+      background-color: $border-color;
+    }
+  }
+
+  &__link-wrap {
+    position: relative;
+    border: 1px solid $border-color;
+
+    &:not(:first-child) {
+      margin-left: -1px;
+    }
+
+    &--active {
+      z-index: 1;
+    }
+  }
+
+  &__link {
+    display: block;
+    padding: $field-padding-vertical $field-padding-horizontal;
+    color: $text-color;
+    text-decoration: none;
+
+    &:hover,
+    &:focus {
+      color: $text-color;
+    }
+  }
+
+  &__content-wrapper {
+    display: block;
+    padding: $field-padding-vertical $field-padding-horizontal;
+    border: 1px solid $border-color;
+    border-top: none;
+  }
+
+  &__content-item {
+
+    &--active {}
+  }
+}
+