@steroidsjs/bootstrap 3.0.0-beta.80 → 3.0.0-beta.82

package/content/Avatar/AvatarView.scss

@@ -55,7 +55,7 @@ $status-border-color: var(--status-border-color);
 
     &_size {
 
-        &_large {
+        &_lg {
             #{$root}__body {
                 height: 64px;
                 width: 64px;
@@ -67,11 +67,11 @@ $status-border-color: var(--status-border-color);
             --status-size: var(--status-size-large);
         }
 
-        &_middle {
+        &_md {
             #{$root}__body {
                 height: 50px;
                 width: 50px;
-                line-height: 46px;
+                line-height: 50px;
                 font-size: $font-size-sm;
             }
             --border-width: var(--border-width-medium);
@@ -79,11 +79,11 @@ $status-border-color: var(--status-border-color);
             --status-size: var(--status-size-medium);
         }
 
-        &_small {
+        &_sm {
             #{$root}__body {
                 height: 32px;
                 width: 32px;
-                line-height: 28px;
+                line-height: 32px;
                 font-size: $font-size-xs;
             }
             --border-width: var(--border-width-small);

package/content/Menu/MenuView.js

@@ -21,7 +21,10 @@ var renderIcon_1 = __importDefault(require("../../utils/renderIcon"));
 function MenuView(props) {
     var bem = (0, hooks_1.useBem)('MenuView');
     var MenuItemView = props.itemView;
-    var renderMenuItems = react_1["default"].useCallback(function () { return (react_1["default"].createElement(react_1["default"].Fragment, null, props.items.map(function (item, index) { return (react_1["default"].createElement(MenuItemView, __assign({ key: index }, item))); }))); }, [MenuItemView, props.items]);
+    var renderMenuItems = react_1["default"].useCallback(function () {
+        var _a;
+        return (react_1["default"].createElement(react_1["default"].Fragment, null, (_a = props.items) === null || _a === void 0 ? void 0 : _a.map(function (item, index) { return (react_1["default"].createElement(MenuItemView, __assign({ key: index }, item))); })));
+    }, [MenuItemView, props.items]);
     return (react_1["default"].createElement(content_1.DropDown, __assign({}, props.dropDownProps, { className: bem(bem.block(), props.className), content: renderMenuItems }),
         react_1["default"].createElement("span", { className: bem.element('button') }, props.icon
             ? (0, renderIcon_1["default"])(props.icon, { className: bem.element('icon') })

package/content/Slider/SliderView.d.ts

@@ -0,0 +1,2 @@
+import { ISliderViewProps } from '@steroidsjs/core/ui/content/Slider/Slider';
+export default function SliderView(props: ISliderViewProps): JSX.Element;

package/content/Slider/SliderView.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+/* eslint-disable import/no-extraneous-dependencies */
+var react_1 = __importDefault(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var react_splide_1 = require("@splidejs/react-splide");
+function SliderView(props) {
+    var _a;
+    var bem = (0, useBem_1["default"])('Slider');
+    var ItemView = props.itemView;
+    return (react_1["default"].createElement("div", { className: bem(bem.block(), props.className), style: props.style },
+        react_1["default"].createElement(react_splide_1.Splide, { options: props.sliderOptions, extensions: props.extensions, hasTrack: props.hasTrack, tag: props.tag, transition: props.transition }, (_a = props.items) === null || _a === void 0 ? void 0 : _a.map(function (item, itemIndex) { return (react_1["default"].createElement(react_splide_1.SplideSlide, { key: itemIndex },
+            react_1["default"].createElement(ItemView, { item: item }))); }))));
+}
+exports["default"] = SliderView;

package/content/Slider/SliderView.scss

@@ -0,0 +1,5 @@
+.SliderView {
+    .splide__slide { 
+        width: fit-content;
+    }
+}

package/icons/index.js

@@ -95,6 +95,8 @@ exports["default"] = (function (customIcons) {
         'expand_up',
         'left_12x12',
         'cancel_ellips',
+        'burger',
+        'sort',
     ];
     steroidsIcons.forEach(function (iconName) {
         icons[iconName] = require("./svgs/".concat(iconName, ".svg"));

package/icons/svgs/arrow_right_24x24.svg

@@ -1,4 +1,5 @@
 <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+
 <rect y="0.867676" width="24" height="24" rx="8" fill="white"/>
 <path d="M10 16.8677L14 12.8677L10 8.86768" stroke="#323232" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/icons/svgs/burger.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 7.44922H19" stroke="#323232" stroke-linecap="round"/>
+<path d="M5 12.4492H15" stroke="#323232" stroke-linecap="round"/>
+<path d="M5 17.4492H11" stroke="#323232" stroke-linecap="round"/>
+</svg>

package/icons/svgs/sort.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Icons/Icons24&#209;&#133;24/Black/burger &#38; menu/Sort">
+<path id="Vector 7" d="M5 7.80371H19" stroke="#323232" stroke-linecap="round"/>
+<path id="Vector 8" d="M5 12.8037H15" stroke="#323232" stroke-linecap="round"/>
+<path id="Vector 9" d="M5 17.8037H11" stroke="#323232" stroke-linecap="round"/>
+</g>
+</svg>

package/index.d.ts

@@ -35,6 +35,9 @@ declare const _default: {
     'content.CopyToClipboardView': {
         lazy: () => any;
     };
+    'content.SliderView': {
+        lazy: () => any;
+    };
     'form.AutoCompleteFieldView': {
         lazy: () => any;
     };

package/index.js

@@ -38,6 +38,9 @@ exports["default"] = {
     'content.CopyToClipboardView': {
         lazy: function () { return require('./content/CopyToClipboard/CopyToClipboardView')["default"]; }
     },
+    'content.SliderView': {
+        lazy: function () { return require('./content/Slider/SliderView')["default"]; }
+    },
     'form.AutoCompleteFieldView': {
         lazy: function () { return require('./form/AutoCompleteField/AutoCompleteFieldView')["default"]; }
     },

package/index.scss

@@ -1,3 +1,5 @@
+@import '~@splidejs/splide/dist/css/splide.min.css';
+
 @import './scss/normalize';
 @import './scss/mixins';
 @import './scss/variables';
@@ -20,6 +22,7 @@
 @import './content/Menu/MenuView';
 @import './content/Icon/IconView';
 @import './content/CopyToClipboard/CopyToClipboardView';
+@import './content/Slider//SliderView';
 @import './form/AutoCompleteField/AutoCompleteFieldView';
 @import './form/Button/ButtonView';
 @import './form/CheckboxField/CheckboxFieldView';

package/layout/Header/HeaderView.js

@@ -37,18 +37,55 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
+/* eslint-disable consistent-return */
 var React = __importStar(require("react"));
 var nav_1 = require("@steroidsjs/core/ui/nav");
 var Nav_1 = __importDefault(require("@steroidsjs/core/ui/nav/Nav"));
-var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 var hooks_1 = require("@steroidsjs/core/hooks");
+var form_1 = require("@steroidsjs/core/ui/form");
+var modal_1 = require("@steroidsjs/core/actions/modal");
+var Text_1 = __importDefault(require("@steroidsjs/core/ui/typography/Text/Text"));
+var content_1 = require("@steroidsjs/core/ui/content");
+var renderIcon_1 = __importDefault(require("../../utils/renderIcon"));
 function HeaderView(props) {
+    var _a, _b, _c, _d, _e;
     var bem = (0, hooks_1.useBem)('HeaderView');
-    return (React.createElement("header", { className: bem(bem.block(), props.className) },
-        props.logo && (React.createElement(nav_1.Link, __assign({ className: bem('navbar-brand', bem.element('logo')), toRoute: 'root' }, props.logo.linkProps),
-            props.logo.icon && (React.createElement(Icon_1["default"], { className: bem.element('logo-image'), name: props.logo.icon, title: props.logo.title })),
-            props.logo.title || '')),
-        props.nav && (React.createElement(Nav_1["default"], __assign({ layout: 'navbar' }, props.nav))),
+    var dispatch = (0, hooks_1.useDispatch)();
+    var renderAuthBlock = React.useCallback(function () {
+        var _a, _b;
+        return (React.createElement(form_1.Button, __assign({ outline: true, color: 'basic', toRoute: (_a = props.authParams) === null || _a === void 0 ? void 0 : _a.toRoute, className: bem.element('auth-btn'), size: props.size }, (_b = props.authParams) === null || _b === void 0 ? void 0 : _b.buttonProps, { onClick: function () { var _a; return dispatch((0, modal_1.openModal)((_a = props.authParams) === null || _a === void 0 ? void 0 : _a.modal)); } }), __('Войти')));
+    }, [bem, dispatch, (_a = props.authParams) === null || _a === void 0 ? void 0 : _a.buttonProps, (_b = props.authParams) === null || _b === void 0 ? void 0 : _b.modal, (_c = props.authParams) === null || _c === void 0 ? void 0 : _c.toRoute, props.size]);
+    var renderUserBlock = React.useCallback(function () {
+        var _a, _b, _c;
+        if (!props.user) {
+            return;
+        }
+        return (React.createElement("div", { className: bem.element('menu') },
+            React.createElement(Text_1["default"], { className: bem.element('menu-name') }, (_a = props.user) === null || _a === void 0 ? void 0 : _a.name),
+            React.createElement(content_1.Menu, __assign({ icon: (React.createElement(content_1.Avatar, __assign({ size: props.size, className: bem.element('menu-avatar') }, (_b = props.user) === null || _b === void 0 ? void 0 : _b.avatar))) }, (_c = props.user) === null || _c === void 0 ? void 0 : _c.menu))));
+    }, [bem, props.size, props.user]);
+    var renderBurger = React.useCallback(function () {
+        var _a;
+        return (React.createElement("div", { className: bem.element('burger') },
+            React.createElement(content_1.Icon, { name: !props.isBurgerOpened ? 'sort' : 'cross_12x12', className: bem.element('burger-icon'), onClick: props.toggleBurger }),
+            React.createElement("div", { className: bem.element('burger-menu', {
+                    isVisible: props.isBurgerOpened
+                }) },
+                React.createElement("ul", { className: bem.element('burger-list') }, (_a = props.burgerMenu.links) === null || _a === void 0 ? void 0 : _a.map(function (linkProps, linkIndex) { return (React.createElement("li", { key: linkIndex, className: "burger-item" },
+                    React.createElement(nav_1.Link, __assign({}, linkProps)))); })))));
+    }, [bem, (_d = props.burgerMenu) === null || _d === void 0 ? void 0 : _d.links, props.isBurgerOpened, props.toggleBurger]);
+    return (React.createElement("header", { className: bem(bem.block({
+            size: props.size
+        }), props.className), style: props.style },
+        props.logo && (React.createElement(nav_1.Link, __assign({ className: bem.element('logo'), toRoute: 'root', size: props.size }, props.logo.linkProps),
+            props.logo.icon && ((0, renderIcon_1["default"])(props.logo.icon, {
+                className: bem.element('logo-image')
+            })),
+            React.createElement("span", { className: bem.element('logo-title') }, props.logo.title || ''))),
+        props.nav && (React.createElement(Nav_1["default"], __assign({ size: props.size, layout: 'navbar', className: bem.element('nav') }, props.nav))),
+        React.createElement("div", { className: bem.element('interaction') },
+            ((_e = props === null || props === void 0 ? void 0 : props.authParams) === null || _e === void 0 ? void 0 : _e.isAuth) ? renderAuthBlock() : renderUserBlock(),
+            props.burgerMenu && renderBurger()),
         props.children));
 }
 exports["default"] = HeaderView;

package/layout/Header/HeaderView.scss

@@ -1,30 +1,138 @@
 .HeaderView {
-  display: flex;
-  justify-content: space-between;
-  padding: 15px 20px;
-  width: 100%;
-  background-color: $gray;
-
-  a:hover {
-    opacity: .7;
-  }
-
-  &__logo {
-    .ButtonView__text {
-      color: $text-color;
-    }
-  }
-  
-  &__logo-image {
-    margin-right: 12px;
-    display: inline-block;
+    width: 1000px;
+    display: flex;
+    align-items: center;
+    background-color: $element-background-color;
+    border-bottom: 1px solid $element-placeholder-color-disabled;
     position: relative;
-    top: -2px;
-    width: 24px;
-    height: 24px;
-  }
-  &__logo-svg {
-    margin-right: 12px;
-  }
-
-}
+
+    &_size {
+        &_sm {
+            padding: 6px 16px;
+        }
+        &_md {
+            padding: 14px 16px;
+        }
+        &_lg {
+            padding: 22px 16px;
+        }
+    }
+
+    &__logo {
+        margin-right: 136px;
+
+        .ButtonView__text {
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+            column-gap: 9px;
+        }
+
+        &-image {
+            width: 36px;
+            height: 36px;
+        }
+
+        &-title {
+            color: $text-color;
+            font-weight: $font-weight-lg;
+            font-size: $font-size-base;
+            line-height: $line-height-base;
+        }
+    }
+
+    &__logo-svg {
+        margin-right: 12px;
+    }
+
+    .NavBarView__list {
+        flex-flow: row nowrap;
+        column-gap: 8px;
+    }
+
+    &__nav {
+        @media (max-width: 361px) {
+            display: none;
+        }
+    }
+
+    &__menu {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        column-gap: 8px;
+
+        &-name.TextView_type_body {
+            margin: 0;
+            font-weight: $font-weight-lg;
+            font-size: $font-size-base;
+            line-height: $line-height-base;
+
+            @media (max-width: 360px) {
+                display: none;
+            }
+        }
+    }
+
+    &__auth-btn {
+        margin-left: auto;
+    }
+
+    &__burger {
+        cursor: pointer;
+        margin-left: auto;
+        display: block;
+
+        width: 24px;
+        height: 24px;
+
+        @media (max-width: 360px) {
+            display: block;
+        }
+
+        &-menu {
+            z-index: 999;
+            width: 100%;
+            position: absolute;
+            top: 100%;
+            left: 0;
+            background-color: $white;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 150ms ease-in-out;
+
+            &_isVisible {
+                opacity: 1;
+                pointer-events: all;
+            }
+            .ButtonView__text {
+                color: $element-placeholder-color;
+            }
+        }
+
+        &-icon {
+            width: 24px;
+            height: 24px;
+            svg path {
+                stroke: $icon-color;
+            }
+        }
+
+        &-list {
+            padding: 32px 16px;
+            flex-flow: column nowrap;
+            display: flex;
+            row-gap: 16px;
+            align-items: flex-start;
+            background-color: $element-background-color;
+        }
+    }
+
+    &__interaction {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        margin-left: auto;
+        column-gap: 16px;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.0-beta.80",
+    "version": "3.0.0-beta.82",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -19,6 +19,7 @@
     },
     "dependencies": {
         "@ckeditor/ckeditor5-react": "^3.0.2",
+        "@splidejs/react-splide": "^0.7.12",
         "@steroidsjs/ckeditor5": "^27.0.2-rc.2",
         "date-fns": "^2.29.3",
         "lodash": "^4.17.20",
@@ -36,7 +37,7 @@
         "react-use": "^17.4.0"
     },
     "devDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.59",
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.61",
         "@steroidsjs/eslint-config": "^2.1.4",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",

package/scss/variables/common/colors.scss

@@ -46,6 +46,7 @@
 
     --scroll-thumb-color: #cbd5db;
     --scroll-track-color: #f1f5f7;
+    --icon-color: #323232;
 
     --diagram-success: var(--success-light);
     --diagram-warning: var(--warning-light);
@@ -100,6 +101,7 @@ html[data-theme="dark"] {
 
     --scroll-thumb-color: #333646;
     --scroll-track-color: #26272f;
+    --icon-color: #FFFFFF;
 
     --diagram-success: var(--success-dark);
     --diagram-warning: var(--warning-dark);
@@ -154,6 +156,8 @@ $element-field-background-color: var(--element-field-background-color);
 
 $scroll-thumb-color: var(--scroll-thumb-color);
 $scroll-track-color: var(--scroll-track-color);
+$icon-color: var(--icon-color);
+
 
 $diagram-success: var(--diagram-success);
 $diagram-warning: var(--diagram-warning);