@steroidsjs/bootstrap 2.1.0-beta.2 → 2.1.0-beta.7

package/layout/ProgressBar/LineProgressBarView.scss

@@ -0,0 +1,115 @@
+.LineProgressBarView{
+  $root: &;
+
+  display: flex;
+  align-items: center;
+  font-weight: bolder;
+
+  &_size {
+    &_small {
+      font-size: 20px;
+
+      #{$root}__emptyLine{
+        width: 500px;
+        height: 8px;
+      }
+    }
+    &_medium {
+      font-size: 24px;
+
+      #{$root}__emptyLine{
+        width: 750px;
+        height: 12px;
+      }
+    }
+    &_large {
+      font-size: 24px;
+
+      #{$root}__emptyLine{
+        width: 1000px;
+        height: 16px;
+      }
+    }
+  }
+
+  &_status{
+    &_success{
+      #{$root}__progressLine{
+        background-color: $success;
+      }
+
+      svg{
+          fill: $success;
+      }
+    }
+
+    &_exception{
+      #{$root}__progressLine{
+        background-color: $danger;
+      }
+
+      svg{
+        fill: $danger;
+      }
+    }
+
+    &_normal{
+      #{$root}__progressLine{
+        background-color: $primary;
+      }
+    }
+
+  }
+
+  &__emptyLine{
+    position: relative;
+    background-color: $back-disabled;
+    border-radius: 20px;
+  }
+
+  &__progressLine{
+    position: absolute;
+    height: inherit;
+    border-radius: 20px;
+    max-width: 100%;
+    transition: width .2s linear, background-color .5s linear;
+    transform: scaleX(0);
+    animation: scale 1s forwards;
+    overflow: hidden;
+
+    &::before{
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        content: "";
+        position: absolute;
+        transform: translateX(-100%);
+        background: linear-gradient(90deg, transparent, rgba($white, 0.5), transparent);
+        animation: wave-animation 1.6s linear 0.5s infinite;
+    }
+
+    @keyframes wave-animation {
+      0% {
+        transform: translateX(-100%);
+      }
+      100% {
+        transform: translateX(100%);
+      }
+    }
+  }
+
+  @keyframes scale {
+    0% {
+      transform: scaleX(0);
+    }
+    100% {
+      transform: scaleX(1);
+    }
+  }
+
+  &__text{
+    color: $dark;
+    margin-left: 8px;
+  }
+}

package/layout/Skeleton/SkeletonView.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ISkeletonViewProps } from '@steroidsjs/core/ui/layout/Skeleton/Skeleton';
+export default function SkeletonView(props: ISkeletonViewProps): JSX.Element;

package/layout/Skeleton/SkeletonView.js

@@ -0,0 +1,31 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var hooks_1 = require("@steroidsjs/core/hooks");
+function SkeletonView(props) {
+    var bem = hooks_1.useBem('SkeletonView');
+    return (React.createElement("span", { className: bem(props.className, bem.block({
+            type: props.children ? null : props.type,
+            animation: props.animation
+        })), style: { height: props.height, width: props.width } }, props.children));
+}
+exports["default"] = SkeletonView;

package/layout/Skeleton/SkeletonView.scss

@@ -0,0 +1,71 @@
+.SkeletonView{
+  $root: &;
+  background-color: $grey-darker;
+  border-radius: 4px;
+  position: relative;
+  overflow: hidden;
+  height: auto;
+  width: auto;
+  display: block;
+
+  & > * {
+    opacity: 0;
+  }
+
+  &_type{
+    &_text{
+      height: 1em;
+      width: 100%;
+    }
+
+    &_rect{
+      height: 100%;
+    }
+
+    &_circle{
+      height: 100%;
+      border-radius: 50%;
+    }
+  }
+
+  &_animation{
+    &_pulse{
+      animation: pulse 4s infinite;
+    }
+
+    @keyframes pulse {
+      0% {
+        background-color: $grey-darker;
+      }
+      50% {
+        background-color: $grey-light;
+      }
+      100% {
+        background-color: $grey-darker;
+      }
+    }
+
+    &_wave{
+      &#{$root}::before{
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        content: "";
+        position: absolute;
+        transform: translateX(-100%);
+        background: linear-gradient(90deg, transparent, rgba($grey-light, 0.3), transparent);
+        animation: wave-animation 1.6s linear 0.5s infinite;
+      }
+    }
+
+    @keyframes wave-animation {
+      0% {
+        transform: translateX(-100%);
+      }
+      100% {
+        transform: translateX(100%);
+      }
+    }
+  }
+}

package/list/List/ListView.js

@@ -23,6 +23,9 @@ var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function ListView(props) {
     var bem = hooks_1.useBem('ListView');
+    if (!props.list) {
+        return null;
+    }
     var renderPagination = function (pagination, paginationSize, layout) {
         if (!pagination && !paginationSize && !layout) {
             return null;

package/list/Steps/StepItemView.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IStepItemViewProps } from "@steroidsjs/core/ui/list/Steps/Steps";
+export default function StepItemView(props: IStepItemViewProps): JSX.Element;

package/list/Steps/StepItemView.js

@@ -0,0 +1,41 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var Icon_1 = __importDefault(require("@steroidsjs/core/ui/icon/Icon"));
+var hooks_1 = require("@steroidsjs/core/hooks");
+function StepItemView(props) {
+    var _a;
+    var bem = hooks_1.useBem("StepItemView");
+    return (React.createElement("div", { className: bem(props.className, bem.block((_a = {}, _a[props.status] = true, _a))) },
+        React.createElement("div", { className: bem.element('body', { disabled: props.disabled }), onClick: props.onChange },
+            React.createElement("div", { className: bem.element('header') },
+                React.createElement("span", { className: bem.element('icon') }, props.status === 'finish' ? React.createElement(Icon_1["default"], { name: 'check' }) : props.stepItem.icon || "0" + props.index),
+                React.createElement("div", null,
+                    React.createElement("div", { className: bem.element('title') }, props.stepItem.title),
+                    React.createElement("div", { className: bem.element('subtitle') }, props.stepItem.subtitle))),
+            React.createElement("div", { className: bem.element('description') }, props.stepItem.description)),
+        React.createElement("span", { className: bem.element('divider') })));
+}
+exports["default"] = StepItemView;

package/list/Steps/StepItemView.scss

@@ -0,0 +1,144 @@
+
+.StepItemView{
+  $root: &;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  &:last-child{
+    flex-grow: 0;
+    #{$root}__divider{
+      display: none;
+    }
+  }
+
+  &__icon{
+    background-color: rgba($white, .2);
+    padding: 5px;
+    border-radius: 10px;
+  }
+
+  &_wait{
+    #{$root}__icon{
+      background-color: $grey-darker;
+      svg{
+        fill: $white;
+      }
+    }
+
+    #{$root}__title, #{$root}__subtitle, #{$root}__description{
+      color: $grey-darker;
+    }
+
+    #{$root}__divider{
+      border-top-color: $grey-darker;
+    }
+  }
+
+  &_active{
+    #{$root}__body{
+      background-color: $primary;
+    }
+
+    #{$root}__icon svg{
+        fill: #fff;
+    }
+
+    #{$root}__title, #{$root}__subtitle, #{$root}__description{
+      color: #fff;
+    }
+
+    #{$root}__divider{
+      border-top-color: $primary;
+    }
+  }
+
+  &_finish{
+    #{$root}__body{
+      background-color: $success;
+    }
+
+    #{$root}__icon svg{
+       fill: #fff;
+    }
+
+    #{$root}__title, #{$root}__subtitle, #{$root}__description{
+      color: #fff;
+    }
+
+    #{$root}__divider{
+      border-top-color: $success;
+    }
+  }
+
+  &_error{
+    #{$root}__body{
+      background-color: $danger;
+    }
+
+    #{$root}__icon svg{
+        fill: #fff;
+    }
+
+    #{$root}__title, #{$root}__subtitle, #{$root}__description{
+      color: #fff;
+    }
+
+    #{$root}__divider{
+      border-top-color: $danger;
+    }
+  }
+
+  &__body{
+    display: flex;
+    flex-direction: column;
+    padding: 8px;
+    cursor: pointer;
+    min-width: 100px;
+
+    border-radius: 15px;
+    background-color: transparent;
+    transition: background-color .15s ease-in;
+
+    &_disabled{
+      cursor: default;
+    }
+  }
+
+  &__header{
+    display: flex;
+    align-items: center;
+    line-height: 1.1;
+  }
+
+  &__icon{
+    margin-right: 5px;
+
+    color: $white;
+    font-size: 12px;
+    font-weight: 500;
+
+    transition: background-color .15s ease-in, color .15s ease-in;
+  }
+
+  &__title{
+    font-size: 12px;
+    transition: color .15s ease-in;
+  }
+
+  &__subtitle, &__description{
+    font-size: 9px;
+    transition: color .15s ease-in;
+  }
+
+
+  &__divider{
+    min-width: 10px;
+    flex-grow: 2;
+    flex-shrink: 1;
+    margin: 0 5px;
+    border-top: 2px dotted transparent;
+    transition: border-top-color .15s ease-in;
+  }
+}

package/list/Steps/StepsView.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IStepsViewProps } from '@steroidsjs/core/ui/list/Steps/Steps';
+export default function StepsView(props: IStepsViewProps): JSX.Element;

package/list/Steps/StepsView.js

@@ -0,0 +1,28 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var hooks_1 = require("@steroidsjs/core/hooks");
+function StepsView(props) {
+    var bem = hooks_1.useBem("StepsView");
+    return (React.createElement("div", { className: bem(props.className, bem.block()) }, props.children));
+}
+exports["default"] = StepsView;

package/list/Steps/StepsView.scss

@@ -0,0 +1,16 @@
+.StepsView{
+  width: 100%;
+  min-height: 96px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 1;
+  background: $secondary-light;
+  overflow: auto;
+  padding: 5px;
+
+  & > *{
+    flex-grow: 1;
+  }
+}

package/modal/Modal/ModalView.js

@@ -35,25 +35,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var react_modal_1 = __importDefault(require("react-modal"));
-var Controls_1 = __importDefault(require("@steroidsjs/core/ui/nav/Controls"));
 var hooks_1 = require("@steroidsjs/core/hooks");
+var Controls_1 = __importDefault(require("@steroidsjs/core/ui/nav/Controls"));
 function ModalView(props) {
     var bem = hooks_1.useBem('ModalView');
     var overrideDefaultClasses = {
         base: bem.block('overlay'),
-        afterOpen: bem.block('overlay-after'),
-        beforeClose: bem.block('overlay-before')
+        afterOpen: 'ModalView_overlay-after',
+        beforeClose: 'ModalView_overlay-before'
     };
-    return (React.createElement("div", null,
-        React.createElement(react_modal_1["default"], __assign({}, props, { isOpen: !props.isClosing, closeTimeoutMS: 200, overlayClassName: overrideDefaultClasses, className: bem.element('body', { size: props.size }), bodyOpenClassName: bem.block('body-opened'), ariaHideApp: false }),
-            React.createElement("div", { className: bem.element('header') },
-                React.createElement("span", { className: bem.element('title') }, props.title),
-                React.createElement("button", { className: bem.element('close'), onClick: function (e) {
-                        e.preventDefault();
-                        props.onClose();
-                    }, "aria-label": __('Закрыть') })),
-            React.createElement("div", { className: bem.element('content') }, props.children),
-            props.controls && (React.createElement("div", { className: bem.element('footer') },
-                React.createElement(Controls_1["default"], { items: props.controls, className: bem.element('controls') }))))));
+    return (React.createElement(react_modal_1["default"], __assign({}, props, { ariaHideApp: false, bodyOpenClassName: 'ModalView_body-hide-scroll', className: bem.element('body', { size: props.size }), closeTimeoutMS: props.closeTimeoutMs, isOpen: !props.isClosing, onRequestClose: props.onClose, overlayClassName: overrideDefaultClasses, shouldCloseOnEsc: props.shouldCloseOnEsc, shouldCloseOnOverlayClick: props.shouldCloseOnOverlayClick }),
+        React.createElement("div", { className: bem.element('header') },
+            React.createElement("span", { className: bem.element('title') }, props.title),
+            React.createElement("button", { className: bem.element('close'), onClick: function (e) {
+                    e.preventDefault();
+                    props.onClose();
+                }, "aria-label": __('Закрыть') })),
+        React.createElement("div", { className: bem.element('content') }, props.children),
+        props.controls && (React.createElement("div", { className: bem.element('footer') },
+            React.createElement(Controls_1["default"], { className: bem.element('controls'), items: props.controls })))));
 }
 exports["default"] = ModalView;

package/modal/Modal/ModalView.scss

@@ -1,7 +1,3 @@
-.ModalView_body-opened{
-  overflow: hidden;
-}
-
 .ModalView {
 
   &_overlay {
@@ -13,45 +9,40 @@
     right: 0;
 
     display: flex;
-    overflow: auto;
-
-    padding: 3rem;
+    padding: 50px;
 
     background-color: rgba(0,0,0,0.7);
-    opacity: 0;
-    transition: opacity 300ms ease-in-out;
   }
 
-  &__body{
-    outline: none;
-    width: 600px;
-    min-height: 350px;
+  &__body {
     margin: auto;
-
     background: #fff;
-  }
-  &__body_size_sm  {
-    width: 400px;
-  }
-  &__body_size_lg  {
-    width: 960px;
+
+    &_size {
+      &_small {
+        width: 400px;
+      }
+      &_middle {
+        width: 600px;
+      }
+      &_large {
+        width: 960px;
+      }
+    }
   }
 
   &__header {
-    font-size: 20px;
-    color: #333;
-    display: flex;
-    justify-content: space-between;
-    padding: 15px;
-    border-bottom: 1px solid #e9ecef;
     position: relative;
-  }
+    padding: 15px;
 
+    color: #333;
+    font-size: 20px;
+    border-bottom: 1px solid #f0f0f0;
+  }
   &__close {
     position: absolute;
     top: 0;
     right: 0;
-    display: block;
     width: 50px;
     height: 50px;
 
@@ -87,10 +78,19 @@
     padding: 15px;
   }
 
-  // fade
+  &__footer {
+    padding: 15px;
+    border-top: 1px solid #f0f0f0;
+  }
+  &__controls.ControlsView {
+    flex-direction: row-reverse;
+  }
+
+  // Fade animation
+
   &_overlay {
     opacity: 0;
-    transition: opacity .2s ease-in-out;
+    transition: opacity .3s ease-in-out;
   }
 
   &_overlay-after {
@@ -102,3 +102,7 @@
   }
 }
 
+// Class to hide body scroll, when Modal is opened
+.ModalView_body-hide-scroll {
+  overflow: hidden;
+}

package/nav/Breadcrubms/BreadcrumbsView.js

@@ -28,11 +28,11 @@ var hooks_1 = require("@steroidsjs/core/hooks");
 function BreadcrumbsView(props) {
     var bem = hooks_1.useBem('BreadcrumbsView');
     var items = props.items || [];
-    return (React.createElement("nav", { className: bem.block(), "aria-label": 'breadcrumb' },
-        React.createElement("ol", { className: bem(bem.element('list'), 'breadcrumb') }, items.map(function (item, index) {
+    return (React.createElement("nav", { className: bem(bem.block(), props.className), "aria-label": 'breadcrumb' },
+        React.createElement("ol", { className: bem.element('list') }, items.map(function (item, index) {
             var isLastItem = items.length === index + 1;
-            return (React.createElement("li", { key: item.id || index, className: bem(bem.element('item'), 'breadcrumb-item') },
-                !isLastItem && item.id && (React.createElement(Link_1["default"], { toRoute: item.id }, item.title)),
+            return (React.createElement("li", { key: item.id || index, className: bem.element('item') },
+                !isLastItem && item.id && (React.createElement(Link_1["default"], { toRoute: item.id, href: item.id }, item.title)),
                 (isLastItem || !item.id) && (React.createElement("span", null, props.pageTitle || item.title))));
         }))));
 }

package/nav/Breadcrubms/BreadcrumbsView.scss

@@ -1,2 +1,16 @@
 .BreadcrumbsView {
+  $breadcrumb-item-separator: '/';
+
+  &__list {
+    display: flex;
+    list-style: none;
+  }
+
+  &__item {
+    &:not(:first-child)::before {
+      content: $breadcrumb-item-separator;
+      display: inline-block;
+      margin: 0 8px;
+    }
+  }
 }

package/nav/Controls/ControlsView.scss

@@ -1,5 +1,5 @@
 .ControlsView {
   display: flex;
-  flex-direction: row;
+  flex-flow: row;
   justify-content: space-between;
 }

package/nav/Nav/NavButtonView.js

@@ -39,7 +39,7 @@ var hooks_1 = require("@steroidsjs/core/hooks");
 function NavButtonView(props) {
     var bem = hooks_1.useBem('NavButtonView');
     return (React.createElement("div", { className: bem(bem.block(), props.className) },
-        React.createElement("div", { className: bem(props.children && 'mb-3', bem.element('nav')) }, props.items.map(function (item, index) { return (React.createElement(Button_1["default"], __assign({ key: item.id || index, color: 'secondary', outline: !item.isActive, onClick: function () { return props.onClick(item, index); }, className: bem.element('nav-item') }, item))); })),
+        React.createElement("div", { className: bem(props.children && 'mb-3', bem.element('nav')) }, props.items.map(function (item, index) { return (React.createElement(Button_1["default"], __assign({ key: item.id || index, color: 'secondary', outline: !item.isActive, disabled: props.disabled, onClick: function () { return props.onClick(item, index); }, className: bem.element('nav-item') }, item))); })),
         React.createElement("div", { className: bem.element('content') }, props.children)));
 }
 exports["default"] = NavButtonView;

package/nav/Nav/NavIconView.js

@@ -39,7 +39,7 @@ var hooks_1 = require("@steroidsjs/core/hooks");
 function NavIconView(props) {
     var bem = hooks_1.useBem('NavIconView');
     return (React.createElement("div", { className: bem(bem.block(), props.className) },
-        props.items.map(function (item, index) { return (React.createElement(Button_1["default"], __assign({ key: item.id || index, link: true, onClick: function () { return props.onClick(item, index); } }, item, { label: null, hint: item.hint || item.label || null }))); }),
+        props.items.map(function (item, index) { return (React.createElement(Button_1["default"], __assign({ icon: props.icon ? props.icon : 'circle-notch', key: item.id || index, link: true, onClick: function () { return props.onClick(item, index); } }, item, { label: null, hint: item.hint || item.label || null }))); }),
         props.children));
 }
 exports["default"] = NavIconView;