@steroidsjs/bootstrap 3.0.0-beta.5 → 3.0.0-beta.50

package/README.md

@@ -1,7 +1,6 @@
 
-# Bootstrap views for Steroids
+# Web views for Steroids
 
 Эта библиотека содержит представления (views) для компонентов из [Steroids](https://github.com/steroids/react/),
-стилизованные под UI-фреймворк [Bootstrap](https://getbootstrap.com/).
 
 Подробнее о том как создавать и использовать эти view-файлы можно узнать в [документации Steroids](https://github.com/steroids/react/blob/master/docs/index.md)

package/content/Accordion/AccordionItemView.d.ts

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

package/content/{Collapse/CollapseItemView.js → Accordion/AccordionItemView.js}

@@ -29,10 +29,16 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 var hooks_1 = require("@steroidsjs/core/hooks");
-function CollapseItemView(props) {
-    var bem = (0, hooks_1.useBem)('CollapseItemView');
+var renderIcon_1 = __importDefault(require("../../utils/renderIcon"));
+var ICON_SIZE = '_24x24';
+function AccordionItemView(props) {
+    var _a;
+    var bem = (0, hooks_1.useBem)('AccordionItemView');
     React.useEffect(function () {
-        if (props.isAccordion) {
+        if (!props.toggleAccordion || !props.toggleCollapse || !props.activeKey) {
+            return;
+        }
+        if (props.hasOneOpenItem) {
             props.toggleAccordion(props.activeKey - 1);
         }
         else {
@@ -40,26 +46,45 @@ function CollapseItemView(props) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.activeKey]);
-    return (React.createElement("div", { className: bem(bem.block({
-            disable: props.disabled,
-            borderless: props.borderless
-        }), props.className), style: props.style },
-        React.createElement("div", { className: bem.element('header-container', { revert: props.iconPosition === 'left' }), onClick: !props.disabled
-                ? function () {
-                    // eslint-disable-next-line no-unused-expressions
-                    props.isAccordion
-                        ? props.toggleAccordion(props.childIndex)
-                        : props.toggleCollapse(props.childIndex);
-                }
-                : null },
+    var renderIcon = React.useCallback(function () {
+        if (!props.icon) {
+            return null;
+        }
+        if (typeof props.icon === 'object') {
+            var icons = props.icon;
+            return (React.createElement(React.Fragment, null,
+                (0, renderIcon_1["default"])(icons.open, { className: bem.element('open-icon') }),
+                (0, renderIcon_1["default"])(icons.close, { className: bem.element('close-icon') })));
+        }
+        return (0, renderIcon_1["default"])(props.icon, { className: bem.element('custom-icon') });
+    }, [bem, props.icon]);
+    var handleHeaderClick = React.useCallback(function () {
+        if (props.disabled || !props.toggleAccordion || !props.toggleCollapse) {
+            return;
+        }
+        var toggleAccordion = props.toggleAccordion, toggleCollapse = props.toggleCollapse, hasOneOpenItem = props.hasOneOpenItem, childIndex = props.childIndex;
+        if (hasOneOpenItem) {
+            toggleAccordion(childIndex);
+        }
+        else {
+            toggleCollapse(childIndex);
+        }
+    }, [props]);
+    return (React.createElement("div", { className: bem(bem.block((_a = {
+                disable: props.disabled
+            },
+            _a["position_".concat(props.position)] = !!props.position,
+            _a["theme_".concat(props.theme)] = !!props.theme,
+            _a.opened = !props.disabled && props.isShowMore,
+            _a)), props.className), style: props.style },
+        React.createElement("div", { className: bem.element('header-container'), onClick: handleHeaderClick },
             React.createElement("div", { className: bem.element('title-container') },
                 React.createElement("p", null, props.title)),
-            React.createElement("div", { className: bem.element('icon-wrapper', { not_visible: !props.showIcon }) }, props.icon
-                ? (typeof props.icon === 'string' ? React.createElement(Icon_1["default"], { name: props.icon }) : props.icon)
-                : (React.createElement(Icon_1["default"], { className: bem.element('icon', {
-                        active: !props.disabled && props.isShowMore,
-                        disable_cursor: !props.showIcon
-                    }), name: "chevron-down" })))),
+            props.showIcon && (React.createElement("div", { className: bem.element('icon-wrapper') }, props.icon
+                ? renderIcon()
+                : (React.createElement(Icon_1["default"], { className: bem.element('icon-chevron', {
+                        active: !props.disabled && props.isShowMore
+                    }), name: "arrow_down_24x24" }))))),
         React.createElement("div", { className: bem.element('content', { visible: !props.disabled && props.isShowMore }) }, props.children)));
 }
-exports["default"] = CollapseItemView;
+exports["default"] = AccordionItemView;

package/content/Accordion/AccordionItemView.scss

@@ -0,0 +1,209 @@
+:root {
+    --accordion-background-light: #f8f8f8;
+    --accordion-background-intermediate: #ffffff;
+    --accordion-background-dark: #312c3a;
+    --accordion-rect-background: #ffffff;
+    --accordion-chevron-color: #323232;
+}
+
+html[data-theme="dark"] {
+    --accordion-background-light: #414141;
+    --accordion-background-intermediate: #5b5c6b;
+    --accordion-background-dark: #4e4f57;
+    --accordion-rect-background: #6f6b76;
+    --accordion-chevron-color: #ffffff;
+}
+
+$accordionBackgroundMap: (
+    "light": var(--accordion-background-light),
+    "intermediate": var(--accordion-background-intermediate),
+    "dark": var(--accordion-background-dark),
+);
+
+$accordion-rect-background: var(--accordion-rect-background);
+$accordion-chevron-color: var(--accordion-chevron-color);
+
+.AccordionItemView {
+    $root: &;
+
+    display: grid;
+    align-items: center;
+
+    background-color: #fff;
+    height: 56px;
+    width: 480px;
+    height: fit-content;
+    font-family: $font-family-nunito;
+
+    &_theme {
+        @each $theme, $backgroundColor in $accordionBackgroundMap {
+            &_#{$theme} {
+                #{$root}__header-container {
+                    background-color: $backgroundColor;
+                }
+
+                #{$root}__title-container {
+                    color: $text-color;
+
+                    @if ($theme == "dark" or $is-dark == "false") {
+                        color: $white;
+                    }
+                }
+
+                #{$root}__icon {
+                    svg {
+                        @if ($theme == "light" or $theme == "intermediate") {
+                            rect {
+                                fill: $accordion-rect-background;
+                            }
+                            path {
+                                stroke: $accordion-chevron-color;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    &_position {
+        &_top {
+            #{$root}__header-container {
+                border-bottom: 1px solid rgba(#000, 0.1);
+                border-radius: $radius-large $radius-large 0 0;
+            }
+        }
+
+        &_middle {
+            #{$root}__header-container {
+                border-top: 1px solid rgba(#000, 0.1);
+                border-radius: 0px;
+            }
+        }
+
+        &_bottom {
+            #{$root}__content {
+                grid-row-start: 1;
+                grid-row-end: 1;
+            }
+
+            #{$root}__header-container {
+                border-top: 1px solid rgba(#000, 0.1);
+                border-radius: 0 0 $radius-large $radius-large;
+                grid-row-start: 2;
+                grid-row-end: 2;
+            }
+
+            #{$root}__icon-chevron {
+                transform: rotate(180deg);
+                &_active {
+                    transform: rotate(0deg);
+                }
+            }
+        }
+    }
+
+    &_disable {
+        opacity: 0.4;
+        color: rgba(#212529, 0.7);
+
+        #{$root}__header-container {
+            background-color: #d7d7d7;
+        }
+    }
+
+    &_active {
+        margin-bottom: 16px;
+    }
+
+    p {
+        margin: 0;
+    }
+
+    &__icon-chevron {
+        width: 24px;
+        height: 24px;
+        box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.1);
+        border-radius: $radius-small;
+
+        transform: rotate(0deg);
+        transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+        &_active {
+            transform: rotate(180deg);
+        }
+    }
+
+    &__header-container {
+        position: relative;
+        cursor: pointer;
+    }
+
+    &__title-container {
+        width: 100%;
+        padding: 16px;
+        align-self: center;
+        font-size: $font-size-lg;
+        line-height: 24px;
+    }
+
+    &__icon-wrapper {
+        width: 24px;
+        height: 24px;
+
+        position: absolute;
+        top: 16px;
+        right: 16px;
+
+        &_not_visible {
+            width: 0;
+            opacity: 0;
+        }
+    }
+
+    .IconView { 
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+    }
+
+    &__content {
+        transition: all 200ms ease;
+        overflow: hidden;
+        max-height: 0;
+        padding: 0 16px;
+        color: #343a40;
+
+        &_visible {
+            max-height: 1024px;
+            padding: 18px 32px 18px 16px;
+            border: 1px solid rgba(#000, 0.1);
+        }
+    }
+
+    &__close-icon,
+    &__open-icon {
+        width: 24px;
+        height: 24px;
+    }
+
+    &__close-icon {
+        position: absolute;
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    &_opened {
+        #{$root}__close-icon {
+            position: static;
+            opacity: 1;
+            pointer-events: all;
+        }
+        
+        #{$root}__open-icon {
+            position: absolute;
+            opacity: 0;
+            pointer-events: none;
+        }
+    }
+}

package/content/Accordion/AccordionView.d.ts

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

package/content/{Collapse/CollapseView.js → Accordion/AccordionView.js}

@@ -25,8 +25,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
-function CollapseView(props) {
-    var bem = (0, hooks_1.useBem)('CollapseView');
+function AccordionView(props) {
+    var bem = (0, hooks_1.useBem)('AccordionView');
     return (React.createElement("div", { className: bem(bem.block(), props.className) }, props.children));
 }
-exports["default"] = CollapseView;
+exports["default"] = AccordionView;

package/content/{Collapse/CollapseView.scss → Accordion/AccordionView.scss}

@@ -1,15 +1,14 @@
-.CollapseView {
+.AccordionView {
   height: fit-content;
 
   display: grid;
   grid-gap: 0;
 
   & > :first-child {
-    border-radius: 4px 4px 0 0;
+    border-radius: 14px 14px 0 0;
   }
 
   & > :last-child {
-    border-radius: 0 0 4px 4px;
-    border: unset;
+    border-radius: 0 0 14px 14px;
   }
 }

package/content/Alert/AlertView.js

@@ -6,6 +6,7 @@ exports.__esModule = true;
 var react_1 = __importDefault(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
+var ICON_SIZE = '_24x24';
 function Alert(props) {
     var _a, _b;
     var bem = (0, hooks_1.useBem)('AlertView');
@@ -15,7 +16,7 @@ function Alert(props) {
             _a)), props.className), style: props.style },
         react_1["default"].createElement("div", { className: bem.element('wrapper') },
             react_1["default"].createElement("div", { className: bem.element('content') },
-                props.showIcon && (react_1["default"].createElement(Icon_1["default"], { name: props.type, className: bem.element('icon', (_b = {},
+                props.showIcon && (react_1["default"].createElement(Icon_1["default"], { name: props.type + ICON_SIZE, className: bem.element('icon', (_b = {},
                         _b[props.type] = !!props.type,
                         _b)) })),
                 react_1["default"].createElement("div", { className: bem.element('text-block') },
@@ -23,7 +24,7 @@ function Alert(props) {
                     props.description && (react_1["default"].createElement("div", { className: bem.element('description') }, props.description))),
                 react_1["default"].createElement("div", null, props.showClose && (react_1["default"].createElement(Icon_1["default"], { className: bem.element('icon-close', {
                         large: !!props.description
-                    }), name: 'close', onClick: props.onClose })))),
+                    }), name: 'circle_cross_16x16', onClick: props.onClose })))),
             props.children || null))));
 }
 exports["default"] = Alert;

package/content/Alert/AlertView.scss

@@ -2,7 +2,7 @@
     $root: &;
 
     position: relative;
-    padding: $spacing-16;
+    padding: 16px;
     border-radius: $radius-large;
     font-family: $font-family-nunito;
 
@@ -25,13 +25,25 @@
         }
     }
 
-    &__icon.IconView {
+    &__icon {
         width: 24px;
+        height: 24px;
         margin-right: 12px;
+
+        svg {
+            width: 24px;
+        }
     }
 
-    &__icon-close.IconView {
-        width: 10px;
+    &__icon-close {
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;    
     }
 
     &__text-block {
@@ -56,6 +68,7 @@
     &_error {
         background: $danger-light;
     }
+
     &_default {
         background: $light-gray;
     }
@@ -65,7 +78,9 @@
     }
 
     &__wrapper {
+        width: 508px;
         display: flex;
+        flex-flow: column;
         justify-content: space-between;
     }
 

package/content/Avatar/AvatarView.js

@@ -32,13 +32,12 @@ function Avatar(props) {
             shape: props.shape,
             'has-image': !!props.src && !props.isError,
             'has-status': props.status,
-            'has-border-avatar': props.hasBorder && !!props.src,
-            'has-border-without-avatar': props.hasBorder && !props.src,
+            'has-border': props.hasBorder,
             'has-custom-status': props.status && !!customSize.width
         }), props.className) },
         react_1["default"].createElement("span", { className: bem.element('body'), style: __assign(__assign({}, props.style), customSize) },
             react_1["default"].createElement(react_1["default"].Fragment, null,
-                (props.src && renderImage()) || (react_1["default"].createElement("span", null, props.formattedTitle)),
+                (props.src && renderImage()) || (react_1["default"].createElement("span", { className: bem.element('formattedTitle') }, props.formattedTitle)),
                 props.children))));
 }
 exports["default"] = Avatar;

package/content/Avatar/AvatarView.scss

@@ -1,21 +1,28 @@
 :root {
     --border-width-small: 1px;
-    --border-width-medium: 1.5px;
+    --border-width-medium: 2px;
     --border-width-large: 2px;
     --border-width: var(--border-width-large);
 
-    --status-border-width-small: 2px;
-    --status-border-width-medium: 3px;
+    --status-border-width-small: 1px;
+    --status-border-width-medium: 2px;
     --status-border-width-large: 4px;
     --status-border-width: var(--status-border-width-large);
 
     --status-size-small: 8px;
-    --status-size-medium: 10px;
-    --status-size-large: 12px;
-    --status-size-x-large: 14px;
+    --status-size-medium: 12px;
+    --status-size-large: 14px;
     --status-size: var(--status-size-x-large);
+
+    --status-border-color: #FFFFFF;
+}
+
+html[data-theme="dark"] { 
+    --status-border-color: #4E4F57;
 }
 
+$status-border-color: var(--status-border-color);
+
 @mixin border($background) {
     &::before {
         content: "";
@@ -24,7 +31,7 @@
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
-        padding: 55%;
+        padding: 53%;
         border-radius: 100%;
         border: var(--border-width) solid transparent;
         background: $background border-box;
@@ -47,46 +54,35 @@
     }
 
     &_size {
-        &_x-large {
+
+        &_large {
             #{$root}__body {
                 height: 64px;
                 width: 64px;
                 line-height: 64px;
-                font-size: 20px;
-            }
-            --border-width: var(--border-width-large);
-            --status-border-width: var(--status-border-width-large);
-            --status-size: var(--status-size-x-large);
-        }
-
-        &_large {
-            #{$root}__body {
-                height: 46px;
-                width: 46px;
-                line-height: 46px;
                 font-size: $font-size-base;
             }
             --border-width: var(--border-width-large);
-            --status-border-width: var(--status-border-width-medium);
+            --status-border-width: var(--status-border-width-large);
             --status-size: var(--status-size-large);
         }
 
         &_middle {
             #{$root}__body {
-                height: 36px;
-                width: 36px;
-                line-height: 36px;
+                height: 50px;
+                width: 50px;
+                line-height: 46px;
                 font-size: $font-size-sm;
             }
             --border-width: var(--border-width-medium);
-            --status-border-width: var(--status-border-width-small);
+            --status-border-width: var(--status-border-width-medium);
             --status-size: var(--status-size-medium);
         }
 
         &_small {
             #{$root}__body {
-                height: 28px;
-                width: 28px;
+                height: 32px;
+                width: 32px;
                 line-height: 28px;
                 font-size: $font-size-xs;
             }
@@ -121,8 +117,8 @@
             content: "";
             position: absolute;
             box-sizing: content-box;
-            right: -7%;
-            bottom: -7%;
+            right: -6%;
+            bottom: -6%;
             width: var(--status-size);
             height: var(--status-size);
             z-index: 10;
@@ -132,16 +128,12 @@
             border-radius: $radius-circle;
             background-color: $success;
 
-            border: var(--status-border-width) solid $white;
+            border: var(--status-border-width) solid $status-border-color;
         }
     }
 
-    &_has-border-avatar {
-        @include border($gradient-purple);
-    }
-
-    &_has-border-without-avatar {
-        @include border($gradient-red);
+    &_has-border {
+        @include border($gradient-blue);
     }
 
     &__body {
@@ -153,12 +145,13 @@
         vertical-align: middle;
 
         color: $white;
-        background: $gradient-purple border-box;
-        border: 1px solid #fff;
+        background: $gradient-blue border-box;
 
         span {
             display: block;
-            transform: translateY(-2px);
+            font-family: $font-family-nunito;
+            font-weight: 800;
+            letter-spacing: 0.1em;
         }
 
         img {

package/content/Badge/BadgeView.d.ts

@@ -0,0 +1,3 @@
+import { IBadgeViewProps } from '@steroidsjs/core/ui/content/Badge/Badge';
+import './BadgeView.scss';
+export default function BadgeView(props: IBadgeViewProps): JSX.Element;

package/content/Badge/BadgeView.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
+require("./BadgeView.scss");
+function BadgeView(props) {
+    var _a;
+    var bem = (0, useBem_1["default"])('BadgeView');
+    return (props.isExist && (react_1["default"].createElement("div", { className: bem(bem.block((_a = {},
+            _a[props.type] = !!props.type,
+            _a.size = props.size,
+            _a.hasClose = props.showClose,
+            _a[props.roundingStyle] = !!props.roundingStyle,
+            _a['has-counter'] = !!props.counter,
+            _a)), props.className), style: props.style },
+        react_1["default"].createElement("div", { className: bem.element('content') },
+            react_1["default"].createElement("span", { className: bem.element('message') }, props.message),
+            props.counter && (react_1["default"].createElement("span", { className: bem.element('counter') }, typeof props.counter === 'object' && (react_1["default"].createElement("span", { className: bem.element('counter-content') }, props.counter.content)))),
+            props.showClose && (react_1["default"].createElement(Icon_1["default"], { onClick: props.onClose, className: bem.element('close'), name: 'cross_4x4' }))))));
+}
+exports["default"] = BadgeView;