@steroidsjs/bootstrap 3.0.0-beta.9 → 3.0.0-beta.90

package/list/Steps/StepItemView.scss

@@ -1,3 +1,4 @@
+@use "../../scss/variables";
 
 .StepItemView{
   $root: &;
@@ -14,31 +15,31 @@
   }
 
   &__icon{
-    background-color: rgba($white, .2);
+    background-color: rgba(variables.$white, .2);
     padding: 5px;
     border-radius: 10px;
   }
 
   &_wait{
     #{$root}__icon{
-      background-color: $grey-darker;
+      background-color: variables.$grey-darker;
       svg{
-        fill: $white;
+        fill:variables.$white;
       }
     }
 
     #{$root}__title, #{$root}__subtitle, #{$root}__description{
-      color: $grey-darker;
+      color: variables.$grey-darker;
     }
 
     #{$root}__divider{
-      border-top-color: $grey-darker;
+      border-top-color: variables.$grey-darker;
     }
   }
 
   &_active{
     #{$root}__body{
-      background-color: $primary;
+      background-color: variables.$primary;
     }
 
     #{$root}__icon svg{
@@ -50,13 +51,13 @@
     }
 
     #{$root}__divider{
-      border-top-color: $primary;
+      border-top-color: variables.$primary;
     }
   }
 
   &_finish{
     #{$root}__body{
-      background-color: $success;
+      background-color: variables.$success;
     }
 
     #{$root}__icon svg{
@@ -68,13 +69,13 @@
     }
 
     #{$root}__divider{
-      border-top-color: $success;
+      border-top-color: variables.$success;
     }
   }
 
   &_error{
     #{$root}__body{
-      background-color: $danger;
+      background-color: variables.$danger;
     }
 
     #{$root}__icon svg{
@@ -86,7 +87,7 @@
     }
 
     #{$root}__divider{
-      border-top-color: $danger;
+      border-top-color: variables.$danger;
     }
   }
 
@@ -115,7 +116,7 @@
   &__icon{
     margin-right: 5px;
 
-    color: $white;
+    color: variables.$white;
     font-size: 12px;
     font-weight: 500;
 

package/list/Steps/StepsView.scss

@@ -1,3 +1,5 @@
+@use "../../scss/variables";
+
 .StepsView{
   width: 100%;
   min-height: 96px;
@@ -6,7 +8,7 @@
   justify-content: center;
   align-items: center;
   flex-shrink: 1;
-  background: $secondary-light;
+  background: variables.$secondary-light;
   overflow: auto;
   padding: 5px;
 

package/modal/Modal/ModalView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { IModalViewProps } from '@steroidsjs/core/ui/modal/Modal/Modal';
-export default function ModalView(props: IModalViewProps & IBemHocOutput): JSX.Element;
+export default function ModalView(props: IModalViewProps): JSX.Element;

package/modal/Modal/ModalView.js

@@ -40,7 +40,8 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var react_modal_1 = __importDefault(require("react-modal"));
 var hooks_1 = require("@steroidsjs/core/hooks");
-var Controls_1 = __importDefault(require("@steroidsjs/core/ui/nav/Controls"));
+var content_1 = require("@steroidsjs/core/ui/content");
+var form_1 = require("@steroidsjs/core/ui/form");
 function ModalView(props) {
     var bem = (0, hooks_1.useBem)('ModalView');
     var overrideDefaultClasses = {
@@ -48,15 +49,11 @@ function ModalView(props) {
         afterOpen: 'ModalView_overlay-after',
         beforeClose: 'ModalView_overlay-before'
     };
-    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 }),
+    return (React.createElement(react_modal_1["default"], __assign({}, props, { ariaHideApp: false, bodyOpenClassName: 'ModalView_body-hide-scroll', className: bem(bem.element('body', { size: props.size }), props.className), 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(content_1.Icon, { name: 'cross_12x12', className: bem.element('close'), onClick: props.onClose })),
         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 })))));
+        props.buttons && (React.createElement("div", { className: bem.element('footer') }, props.buttons.map(function (button, buttonIndex) { return (React.createElement(form_1.Button, __assign({ key: buttonIndex, size: props.size }, button))); })))));
 }
 exports["default"] = ModalView;

package/modal/Modal/ModalView.scss

@@ -1,108 +1,155 @@
+@use "../../scss/variables";
+
+:root {
+    --modal-background-color: #ffffff;
+}
+
+html[data-theme="dark"] {
+    --modal-background-color: #272a37;
+}
+
+$modal-background-color: var(--modal-background-color);
+
 .ModalView {
+    $root: &;
+    min-width: 300px;
 
-  &_overlay {
-    z-index: 100;
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-
-    display: flex;
-    padding: 50px;
-
-    background-color: rgba(0,0,0,0.7);
-  }
-
-  &__body {
-    margin: auto;
-    background: #fff;
-
-    &_size {
-      &_small {
-        width: 400px;
-      }
-      &_middle {
-        width: 600px;
-      }
-      &_large {
-        width: 960px;
-      }
+    &_overlay {
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+
+        display: flex;
+        padding: 50px;
+
+        background-color: rgba(0, 0, 0, 0.7);
     }
-  }
-
-  &__header {
-    position: relative;
-    padding: 15px;
-
-    color: #333;
-    font-size: 20px;
-    border-bottom: 1px solid #f0f0f0;
-  }
-  &__close {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 50px;
-    height: 50px;
-
-    &:hover::before,
-    &:hover::after {
-      background-color: #333;
+
+    &__body {
+        margin: auto;
+        overflow: visible;
+        background-color: $modal-background-color;
+        color: variables.$text-color;
+        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+
+        &_size {
+            &_lg {
+                border-radius: 16px;
+
+                font-size: variables.$font-size-lg;
+                line-height: variables.$line-height-lg;
+
+                #{$root}__header {
+                    padding: 24px;
+                }
+
+                #{$root}__content {
+                    padding: 24px;
+                }
+
+                #{$root}__footer {
+                    padding: 24px;
+                }
+            }
+            &_md {
+                border-radius: variables.$radius-large;
+
+                font-size: variables.$font-size-base;
+                line-height: variables.$line-height-base;
+
+                #{$root}__header {
+                    padding: 21px 20px;
+                }
+
+                #{$root}__content {
+                    padding: 20px;
+                }
+
+                #{$root}__footer {
+                    padding: 20px;
+                }
+            }
+            &_sm {
+                border-radius: variables.$radius-small;
+
+                font-size: variables.$font-size-sm;
+                line-height: variables.$line-height-sm;
+
+                #{$root}__header {
+                    padding: 19px 16px;
+                }
+
+                #{$root}__content {
+                    padding: 16px;
+                }
+
+                #{$root}__footer {
+                    padding: 16px;
+                }
+            }
+        }
+    }
+
+    &__header {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        justify-content: space-between;
+
+        > * {
+            display: inline-block;
+        }
+    }
+
+    &__title {
+        font-size: inherit;
+        line-height: inherit;
+        font-weight: variables.$font-weight-lg;
+    }
+
+    &__close {
+        cursor: pointer;
+        width: 24px;
+        height: 24px;
+
+        svg {
+            path {
+                stroke: variables.$text-color;
+            }
+        }
+    }
+
+    &__content {
+        font-size: inherit;
+        line-height: inherit;
+    }
+
+    &__footer {
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: center;
+        align-items: center;
+        column-gap: 8px;
     }
 
-    &::before,
-    &::after
-    {
-      content: '';
-      display: block;
-      position: absolute;
-      top: 50%;
-      margin-top: -8px;
-      left: 50%;
-      width: 1px;
-      height: 16px;
-      background-color: #888;
+    // Fade animation
+    &_overlay {
+        opacity: 0;
+        transition: opacity 0.3s ease-in-out;
     }
 
-    &::before {
-      transform: rotate(45deg);
+    &_overlay-after {
+        opacity: 1;
     }
 
-    &::after {
-      transform: rotate(-45deg);
+    &_overlay-before {
+        opacity: 0;
     }
-  }
-
-  &__content {
-    padding: 15px;
-  }
-
-  &__footer {
-    padding: 15px;
-    border-top: 1px solid #f0f0f0;
-  }
-  &__controls.ControlsView {
-    flex-direction: row-reverse;
-  }
-
-  // Fade animation
-
-  &_overlay {
-    opacity: 0;
-    transition: opacity .3s ease-in-out;
-  }
-
-  &_overlay-after {
-    opacity: 1;
-  }
-
-  &_overlay-before {
-    opacity: 0;
-  }
 }
 
 // Class to hide body scroll, when Modal is opened
 .ModalView_body-hide-scroll {
-  overflow: hidden;
+    overflow: hidden;
 }

package/modal/TwoFactorModal/TwoFactorModalView.d.ts

@@ -1,4 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { ITwoFactorModalViewProps } from '@steroidsjs/core/ui/modal/TwoFactorModal/TwoFactorModal';
-import './TwoFactorModalView.scss';
-export default function TwoFactorModalView(props: ITwoFactorModalViewProps & IBemHocOutput): JSX.Element;
+export default function TwoFactorModalView(props: ITwoFactorModalViewProps): JSX.Element;

package/modal/TwoFactorModal/TwoFactorModalView.js

@@ -17,7 +17,6 @@ exports.__esModule = true;
 var react_1 = __importDefault(require("react"));
 var Modal_1 = __importDefault(require("@steroidsjs/core/ui/modal/Modal"));
 var form_1 = require("@steroidsjs/core/ui/form");
-require("./TwoFactorModalView.scss");
 var hooks_1 = require("@steroidsjs/core/hooks");
 function TwoFactorModalView(props) {
     var bem = (0, hooks_1.useBem)('TwoFactorModalView');

package/modal/TwoFactorModal/TwoFactorModalView.scss

@@ -1,4 +1,2 @@
-@import 'style/variables';
-
 .TwoFactorModal {
 }

package/nav/Breadcrubms/BreadcrumbsView.js

@@ -29,14 +29,22 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var Link_1 = __importDefault(require("@steroidsjs/core/ui/nav/Link"));
 var hooks_1 = require("@steroidsjs/core/hooks");
+var content_1 = require("@steroidsjs/core/ui/content");
+var renderIcon_1 = __importDefault(require("../../utils/renderIcon"));
 function BreadcrumbsView(props) {
     var bem = (0, hooks_1.useBem)('BreadcrumbsView');
     var items = props.items || [];
+    var renderLink = React.useCallback(function (item, children) { return (React.createElement(Link_1["default"], { toRoute: item.id, toRouteParams: props.routeParams, href: item.id }, children)); }, [props.routeParams]);
+    var renderHomeIcon = React.useCallback(function () { return (props.customIcon
+        ? (0, renderIcon_1["default"])(props.customIcon, { className: bem.element('custom-icon') })
+        : (React.createElement(content_1.Icon, { name: 'home', className: bem.element('icon') }))); }, [bem, props.customIcon]);
     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;
+            var isFirstItem = index === 0;
             return (React.createElement("li", { key: item.id || index, className: bem.element('item') },
-                !isLastItem && item.id && (React.createElement(Link_1["default"], { toRoute: item.id, toRouteParams: props.routeParams, href: item.id }, item.title)),
+                isFirstItem && item.id && renderLink(item, props.showIcon ? renderHomeIcon() : item.title),
+                !isFirstItem && !isLastItem && item.id && renderLink(item, item.title),
                 (isLastItem || !item.id) && (React.createElement("span", null, props.pageTitle || item.title))));
         }))));
 }

package/nav/Breadcrubms/BreadcrumbsView.scss

@@ -1,6 +1,36 @@
+@use "../../scss/variables";
+
+:root {
+  --last-link-color: rgba(0, 0, 0, 0.3);;
+}
+
+html[data-theme="dark"] { 
+  --last-link-color: rgba(255, 255, 255, 0.3);
+}
+
+$last-link-color: var(--last-link-color);
+
 .BreadcrumbsView {
   $breadcrumb-item-separator: '/';
 
+
+
+  &__icon, &__custom-icon {
+    display: flex;
+
+    svg {
+      stroke: variables.$link-color;
+    }
+
+    svg:hover { 
+      stroke: variables.$link-color-hover;
+    }
+
+    svg path, svg circle {
+      stroke:inherit;
+    }
+  }
+
   &__list {
     display: flex;
     flex-wrap: wrap;
@@ -8,11 +38,30 @@
     padding: 0;
   }
 
+  &__list {
+    li:last-child span{
+      color: $last-link-color;
+    }
+  }
+
   &__item {
+    display: flex;
+    align-items: center;
+
     &:not(:first-child)::before {
       content: $breadcrumb-item-separator;
       display: inline-block;
       margin: 0 8px;
+      color: variables.$link-color;
+    }
+
+    span {
+      line-height: 24px;
+      font-size: 14px;
+    }
+
+    span:hover {
+      color: variables.$link-color-hover;
     }
   }
 }

package/nav/ButtonGroup/ButtonGroupView.d.ts

@@ -0,0 +1,2 @@
+import { IButtonGroupViewProps } from '@steroidsjs/core/ui/nav/ButtonGroup/ButtonGroup';
+export default function ButtonGroupView(props: IButtonGroupViewProps): JSX.Element;

package/nav/ButtonGroup/ButtonGroupView.js

@@ -0,0 +1,33 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var hooks_1 = require("@steroidsjs/core/hooks");
+var form_1 = require("@steroidsjs/core/ui/form");
+function ButtonGroupView(props) {
+    var bem = (0, hooks_1.useBem)('ButtonGroupView');
+    return (react_1["default"].createElement("ul", { className: bem(bem.block({
+            size: props.size
+        }), props.className), style: props.style }, props.items.map(function (item, index) {
+        var isActive = props.activeButton === item.id;
+        return (react_1["default"].createElement("li", { key: index, className: item.className ? item.className : null },
+            react_1["default"].createElement(form_1.Button, __assign({ className: bem.element('button', {
+                    "default": !isActive,
+                    active: isActive
+                }), label: item.label, onClick: function () { return props.onClick(item.id); } }, props.buttonProps))));
+    })));
+}
+exports["default"] = ButtonGroupView;

package/nav/ButtonGroup/ButtonGroupView.scss

@@ -0,0 +1,84 @@
+@use "sass:map";
+@use "../../scss/variables";
+
+:root {
+    --button-group-background: #DBE2E6;
+    --button-group-separator-color: #CBD5DB;
+}
+
+html[data-theme="dark"] {
+    --button-group-background: #333646;
+    --button-group-separator-color: #ADAAB3;
+}
+
+$button-group-background: var(--button-group-background);
+$button-group-separator-color: var(--button-group-separator-color);
+
+.ButtonGroupView {
+  display: flex;
+  padding: 4px;
+  width: fit-content;
+  background-color: $button-group-background;
+
+  $sizes: () !default;
+  $sizes: map.merge(
+      (
+          "lg": (
+              "border-radius": 16px,
+          ),
+          "md": (
+              "border-radius": 16px,
+          ),
+          "sm": (
+              "border-radius": 12px,
+          ),
+      ),
+      $sizes
+  );
+
+  &_size {
+      @each $size, $sizeMap in $sizes {
+          &_#{$size} {
+              border-radius: map.get($sizeMap, border-radius);
+          }
+      }
+  }
+
+  &__button {
+    &_default {
+      background-color: transparent;
+      border-color: transparent;
+      color: variables.$text-color;
+      transition: opacity variables.$transition-duration ease-in-out;
+
+      &:hover {
+        background-color: transparent;
+        border-color: transparent;
+        color: variables.$text-color;
+        opacity: 0.7;
+      }
+
+      &:active {
+        box-shadow: none;
+      }
+
+      &:not(:first-child) {
+        &::after {
+          content: '';
+          display: block;
+          position: absolute;
+          top: 50%;
+          left: 0;
+          transform: translateY(-50%);
+          width: 1px;
+          height: 12px;
+          background-color: $button-group-separator-color;
+        }
+      }
+    }
+
+    &_active + &_default::after {
+      display: none;
+    }
+  }
+}

package/nav/Controls/ControlsView.d.ts

@@ -1,3 +1,2 @@
 import { IControlsViewProps } from '@steroidsjs/core/ui/nav/Controls/Controls';
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
-export default function ControlsView(props: IControlsViewProps & IBemHocOutput): JSX.Element;
+export default function ControlsView(props: IControlsViewProps): JSX.Element;

package/nav/Controls/ControlsView.scss

@@ -1,5 +1,19 @@
 .ControlsView {
-  display: flex;
-  flex-flow: row;
-  justify-content: space-between;
+    display: inline-flex;
+    flex-flow: row;
+    justify-content: space-between;
+
+    .ButtonView__icon { 
+         svg {
+            path, circle, rect { 
+                stroke: inherit;
+            }
+        }
+    }
+
+    a {
+        display: inline-block;
+        width: 100%;
+        height: 100%;
+    }
 }

package/nav/Nav/NavBarView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { INavViewProps } from '@steroidsjs/core/ui/nav/Nav/Nav';
-export default function NavBarView(props: INavViewProps & IBemHocOutput): JSX.Element;
+export default function NavBarView(props: INavViewProps): JSX.Element;

package/nav/Nav/NavBarView.js

@@ -42,9 +42,14 @@ var Button_1 = __importDefault(require("@steroidsjs/core/ui/form/Button"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function NavBarView(props) {
     var bem = (0, hooks_1.useBem)('NavBarView');
-    return (React.createElement("div", { className: bem('navbar-expand-lg navbar-nav', props.dark && 'navbar-dark bg-dark', bem.block(), props.className) },
-        React.createElement("div", { className: 'navbar-nav px-3' }, props.items.map(function (item, index) { return (React.createElement("li", { key: item.id || index, className: bem('nav-item text-nowrap', item.isActive && 'active') },
-            React.createElement(Button_1["default"], __assign({ link: true, className: bem('nav-link', item.isActive && 'active'), onClick: function () { return props.onClick(item, index); } }, item)))); })),
-        props.children));
+    return (React.createElement("div", { className: bem(bem.block({
+            size: props.size
+        }), props.className) },
+        React.createElement("ul", { className: bem.element('list') }, props.items.map(function (item, index) { return (React.createElement("li", { key: item.id || index, className: bem(bem.element('list-item', {
+                active: item.isActive,
+                disabled: item.disabled
+            }), props.navClassName) },
+            React.createElement(Button_1["default"], __assign({ size: props.size, link: !item.isActive, onClick: function () { return props.onClick(item, index); } }, item)))); })),
+        React.createElement("div", { className: bem.element('content') }, props.children)));
 }
 exports["default"] = NavBarView;