Добпилил компоненты диаграмм

src/blocks-library.pug

@@ -539,6 +539,29 @@ block content
     +block-lib-code()
       include:show-code(first-line="//- Pug-файл этого блока:") blocks/pagination/pagination.pug
 
+  +block-lib('breadcrumbs', 'Хлебные крошки', false)
+    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/breadcrumbs/readme.md
+    +breadcrumbs()
+      +breadcrumbs-item('Главная', '/home')
+      +breadcrumbs-item('Услуги', '/services')
+      +breadcrumbs-item('Стриптиз')
+    +block-lib-code()
+      include:show-code(first-line="//- Pug-файл этого блока:") blocks/breadcrumbs/breadcrumbs.pug
+
+  +block-lib('progress', 'Прогресс', false)
+    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/progress/readme.md
+    +progress('30', '30% (без копеек)', 'success')(aria-valuemin='0', aria-valuemax='100')
+    +progress('10')(style="height:10px")
+    +block-lib-code()
+      include:show-code(first-line="//- Pug-файл этого блока:") blocks/progress/progress.pug
+
+  +block-lib('pie-chart', 'Круговые и секторные диаграммы', false)
+    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/pie-chart/readme.md
+    +pie-chart('30')
+    +pie-chart('64')(data-size="120" data-border="59.9")
+    +block-lib-code()
+      include:show-code(first-line="//- Pug-файл этого блока:") blocks/pie-chart/pie-chart.pug
+
 
 
   .burger.blocks-library__menu-toggler(data-toggle="off-canvas")

src/blocks/breadcrumbs/breadcrumbs.html

-<!--DEV
-
-Для использования этого файла как шаблона:
-
-@ @include('blocks/breadcrumbs/breadcrumbs.html')
-
-(Нужно убрать пробел между символами @)
-Подробнее: https://www.npmjs.com/package/gulp-file-include
-
-
-
-<ul class="breadcrumbs">
-  <li class="breadcrumbs__item"><a href="" class="breadcrumbs__link">Главная</a></li>
-  <li class="breadcrumbs__item"><a href="" class="breadcrumbs__link">Каталог</a></li>
-  <li class="breadcrumbs__item"><a href="" class="breadcrumbs__link">Маркеры</a></li>
-</ul>
-
--->

src/blocks/breadcrumbs/breadcrumbs.pug

+//- Все примеси в этом файле должны начинаться c имени блока (breadcrumbs)
+
+mixin breadcrumbs(mods)
+
+  //- Принимает:
+  //-   mods  {string} - список модификаторов
+  //- Вызов:
+        +breadcrumbs()
+          +breadcrumbs-item('Главная', '/home')
+          +breadcrumbs-item('Услуги', '/services')
+          +breadcrumbs-item('Стриптиз')
+  -
+    // список модификаторов
+    var allMods = '';
+    if(typeof(mods) !== 'undefined' && mods) {
+      var modsList = mods.split(',');
+      for (var i = 0; i < modsList.length; i++) {
+        allMods = allMods + ' breadcrumbs--' + modsList[i].trim();
+      }
+    }
+
+  ul.breadcrumbs(class=allMods, aria-label="Breadcrumb", role="navigation")&attributes(attributes)
+    block
+
+
+
+mixin breadcrumbs-item(text, href, mods)
+
+  //- Принимает:
+  //-   text   {string} - содержимое пункта
+  //-   href   {string} - ссылка этого пункта (если пустая, то это не ссылка, а span)
+  //-   mods   {string} - список модификаторов
+  -
+    // список модификаторов
+    var allMods = '';
+    if(typeof(mods) !== 'undefined' && mods) {
+      var modsList = mods.split(',');
+      for (var i = 0; i < modsList.length; i++) {
+        allMods = allMods + ' breadcrumbs--' + modsList[i].trim();
+      }
+    }
+
+  li.breadcrumbs__item(class=allMods)&attributes(attributes)
+    if(typeof(href) !== 'undefined' && href)
+      a(href=href)!= text
+    else
+      span!= text

src/blocks/breadcrumbs/breadcrumbs.scss

@@ -14,6 +14,18 @@ $text-color:                  hsl(0, 0%, 10%) !default;
   padding: 0;
   list-style: none;
   margin: $line-height 0;
+  color: $text-color;
+
+  a {
+    color: $text-color;
+    text-decoration: none;
+
+    &:hover,
+    &:focus {
+      color: $text-color;
+      text-decoration: none;
+    }
+  }
 
   &__item {
     display: inline-block;
@@ -27,15 +39,4 @@ $text-color:                  hsl(0, 0%, 10%) !default;
       color: $gray;
     }
   }
-
-  &__link {
-    color: $text-color;
-    text-decoration: none;
-
-    &:hover,
-    &:focus {
-      color: $text-color;
-      text-decoration: none;
-    }
-  }
 }

src/blocks/pagination/pagination.pug

@@ -28,20 +28,27 @@ mixin pagination(mods)
 
 
 
-mixin pagination-item(text, href, active)
+mixin pagination-item(text, href, active, mods)
 
   //- Принимает:
   //-   text   {string} - содержимое пункта
   //-   href   {string} - ссылка этого пункта (если пустая, то это не ссылка, а span)
   //-   active {bool}   - флаг «это активный пункт»
+  //-   mods   {string} - список модификаторов
   -
     // список модификаторов
-    var activeMod = '';
+    var allMods = '';
+    if(typeof(mods) !== 'undefined' && mods) {
+      var modsList = mods.split(',');
+      for (var i = 0; i < modsList.length; i++) {
+        allMods = allMods + ' pagination--' + modsList[i].trim();
+      }
+    }
     if(typeof(active) !== 'undefined' && active) {
-      activeMod = ' pagination--active';
+      allMods = allMods + ' pagination--active';
     }
 
   if(typeof(href) !== 'undefined' && href)
-    a.pagination__item(class=activeMod, href=href)&attributes(attributes)!= text
+    a.pagination__item(class=allMods, href=href)&attributes(attributes)!= text
   else
-    span.pagination__item(class=activeMod)&attributes(attributes)!= text
+    span.pagination__item(class=allMods)&attributes(attributes)!= text

src/blocks/pie-chart/pie-chart.html

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

src/blocks/pie-chart/pie-chart.js

@@ -8,11 +8,14 @@ document.addEventListener('DOMContentLoaded', function(){
 
   var charts = $$('.pie-chart');
 
+  var options =  {
+    size: 100,
+    border: 20,
+  }
+
   for (var i = 0; i < charts.length; i++) {
-    var size = charts[i].getAttribute('data-size');
-    if(!size) size = 100;
-    var border = charts[i].getAttribute('data-border');
-    if(!border) border = 20;
+    var size = charts[i].getAttribute('data-size') || options.size;
+    var border = charts[i].getAttribute('data-border') || options.border;
     var radius = (size / 2) - (border / 2);
     var fullStroke = 2 * 3.141592 * radius;
     var percentText = parseFloat(charts[i].textContent);

src/blocks/pie-chart/pie-chart.pug

+//- Все примеси в этом файле должны начинаться c имени блока (pie-chart)
+
+mixin pie-chart(percent, mods)
+
+  //- Принимает:
+  //-   percent  {string} - процент заполнения
+  //-   mods     {string} - список модификаторов
+  //- Вызов:
+        +pie-chart('30', 'success')
+        +pie-chart('30')(data-size="200" data-border="10")
+        +pie-chart('99', 'radial')(data-size="120" data-border="59.9")
+  -
+    // список модификаторов
+    var allMods = '';
+    if(typeof(mods) !== 'undefined' && mods) {
+      var modsList = mods.split(',');
+      for (var i = 0; i < modsList.length; i++) {
+        allMods = allMods + ' pie-chart--' + modsList[i].trim();
+      }
+    }
+    if(typeof(attributes['aria-valuemin']) === 'undefined') {
+      attributes['aria-valuemin'] = 0;
+    }
+    if(typeof(attributes['aria-valuemax']) === 'undefined') {
+      attributes['aria-valuemax'] = 100;
+    }
+
+  span.pie-chart(role='progressbar', class=allMods, aria-valuenow=percent)&attributes(attributes)= percent + '%'

src/blocks/pie-chart/pie-chart.scss

@@ -8,31 +8,36 @@ $font-size:                   14px !default;
 $gray-light:                  hsl(0, 0%, 60%) !default;
 $gray-lighter:                hsl(0, 0%, 80%) !default;
 
-.js .pie-chart {
+.pie-chart {
 
   $block-name:                &; // #{$block-name}__element
 
-  display: inline-block;
-  position: relative;
-
-  &__svg {
-    display: block;
-    transform: rotate(-90deg);
-  }
-
-  &__circle-back {
-    fill: $gray-lighter;
-  }
-
-  &__circle {
-    fill: $gray-lighter;
-    stroke: $gray-light;
-  }
-
-  &__descr {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+  .js & {
+
+    display: inline-block;
+    position: relative;
+    min-width: 100px;  // соответствуют ширине по умолчанию (указана в pie-chart.js)
+    min-height: 100px; // соответствуют ширине по умолчанию (указана в pie-chart.js)
+
+    &__svg {
+      display: block;
+      transform: rotate(-90deg);
+    }
+
+    &__circle-back {
+      fill: $gray-lighter;
+    }
+
+    &__circle {
+      fill: $gray-lighter;
+      stroke: $gray-light;
+    }
+
+    &__descr {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
   }
 }

src/blocks/pie-chart/readme.md

+Внутренняя разметка блока (SVG) создаётся JS-ом на основании `data`-атрибутов (значения по умолчанию прописаны в `pie-chart.js`).
+
+Если нужна секторная диаграмма, нужно указать ширину бордюра как `R - 0.1` — спасибо IE (см. пример в коде примеси).

src/blocks/progress/progress.html

-<!--DEV
-
-Для использования этого файла как шаблона:
-
-@ @include('blocks/progress/progress.html')
-
-(Нужно убрать пробел между символами @)
-Подробнее: https://www.npmjs.com/package/gulp-file-include
-
-
-
-<div class="progress">
-  <div class="progress__bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
-    <span class="progress__bartext">80%</span>
-  </div>
-</div>
-
--->

src/blocks/progress/progress.pug

+//- Все примеси в этом файле должны начинаться c имени блока (progress)
+
+mixin progress(percent, text, mods)
+
+  //- Принимает:
+  //-   percent  {string} - процент заполнения
+  //-   text     {string} - текст на заполненной части (если пуст, текстового узда не будет)
+  //-   mods     {string} - список модификаторов
+  //- Вызов:
+        +progress('30', '30%', 'success')(aria-valuemin='0', aria-valuemax='100')
+        +progress('10')(style="height: 10px")
+  -
+    // список модификаторов
+    var allMods = '';
+    if(typeof(mods) !== 'undefined' && mods) {
+      var modsList = mods.split(',');
+      for (var i = 0; i < modsList.length; i++) {
+        allMods = allMods + ' progress--' + modsList[i].trim();
+      }
+    }
+
+  .progress(class=allMods)
+    .progress__bar(role='progressbar', style='width: ' + percent + '%;', aria-valuenow=percent)&attributes(attributes)
+      if(typeof(text) !== 'undefined' && text)
+        span.progress__bartext!= text

src/blocks/progress/progress.scss

@@ -24,8 +24,13 @@ $transition-time:             0.3s !default;
   &__bar {
     background-color: $gray-lightest;
     border-radius: $border-radius;
-    padding: 0.5em;
     max-width: 100%;
+    min-height: 1px;
     transition: width $transition-time;
   }
+
+  &__bartext {
+    display: inline-block;
+    padding: 0.5em;
+  }
 }

src/blocks/table-responsive/table-responsive.scss

@@ -20,9 +20,7 @@ $screen-xxl:                  1800px !default;
   margin-top: $line-height;
   margin-bottom: $line-height;
   border-collapse: collapse;
-  border: 0;
-  border-top: 1px solid $border-color;
-  border-left: 1px solid $border-color;
+  border: 1px solid $border-color;
   width: 100%;
 
   caption {

src/pug/mixins.pug

@@ -23,3 +23,6 @@ include ../blocks/loader/loader.pug
 include ../blocks/table/table.pug
 include ../blocks/table-responsive/table-responsive.pug
 include ../blocks/pagination/pagination.pug
+include ../blocks/breadcrumbs/breadcrumbs.pug
+include ../blocks/progress/progress.pug
+include ../blocks/pie-chart/pie-chart.pug