@steroidsjs/bootstrap 3.0.0-beta.10 → 3.0.0-beta.100

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 { IAccordionItemViewProps } from '@steroidsjs/core/ui/content/Accordion/Accordion';
+export default function AccordionItemView(props: IAccordionItemViewProps): 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,262 @@
+@use "sass:map";
+@use "../../scss/variables";
+
+:root {
+    --accordion-light-background: var(--gray);
+    --accordion-intermediate-background: #ffffff;
+    --accordion-dark-background: #312c3a;
+
+    --accordion-chevron-light-background: #ffffff;
+    --accordion-chevron-intermediate-background: #ffffff;
+    --accordion-chevron-dark-background: #ffffff;
+
+    --accordion-chevron-inner-default-color: var(--graphite);
+    --accordion-chevron-inner-revert-color: #323232;
+
+    --accordion-chevron-default-box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.1);
+    --accordion-chevron-revert-box-shadow: none;
+
+    --accordion-content-background: #ffffff;
+    --accordion-text-color: #312c3a;
+    --accordion-content-border: rgba(0, 0, 0, 0.1);
+}
+
+html[data-theme="dark"] {
+    --accordion-light-background: var(--graphite);
+    --accordion-intermediate-background: var(--gray);
+    --accordion-dark-background: var(--gray-dark);
+
+    --accordion-chevron-light-background: var(--gray);
+    --accordion-chevron-intermediate-background: var(--gray-dark);
+    --accordion-chevron-dark-background: #ffffff;
+
+    --accordion-chevron-inner-default-color: #ffffff;
+    --accordion-chevron-inner-revert-color: #323232;
+
+    --accordion-chevron-default-box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.1);
+    --accordion-chevron-revert-box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.1);
+
+    --accordion-content-background: var(--graphite);
+    --accordion-text-color: #ffffff;
+    --accordion-content-border: rgba(255, 255, 255, 0.1);
+}
+
+$accordion-light-background: var(--accordion-light-background);
+$accordion-intermediate-background: var(--accordion-intermediate-background);
+$accordion-dark-background: var(--accordion-dark-background);
+
+$accordion-chevron-light-background: var(--accordion-chevron-light-background);
+$accordion-chevron-intermediate-background: var(--accordion-chevron-intermediate-background);
+$accordion-chevron-dark-background: var(--accordion-chevron-dark-background);
+
+$accordion-chevron-inner-default-color: var(--accordion-chevron-inner-default-color);
+$accordion-chevron-inner-revert-color: var(--accordion-chevron-inner-revert-color);
+
+$accordion-chevron-default-box-shadow: var(--accordion-chevron-default-box-shadow);
+$accordion-chevron-revert-box-shadow: var(--accordion-chevron-revert-box-shadow);
+
+$accordion-content-background: var(--accordion-content-background);
+
+$accordion-text-color: var(--accordion-text-color);
+
+$accordion-content-border: var(--accordion-content-border);
+
+$accordion-themes: () !default;
+$accordion-themes: map.merge(
+    (
+        "light": (
+            "background": $accordion-light-background,
+            "text-color": $accordion-text-color,
+            "chevron-box-shadow": $accordion-chevron-default-box-shadow,
+            "chevron-background": $accordion-chevron-light-background,
+            "chevron-inner-color": $accordion-chevron-inner-default-color,
+        ),
+        "intermediate": (
+            "background": $accordion-intermediate-background,
+            "text-color": $accordion-text-color,
+            "chevron-box-shadow": $accordion-chevron-default-box-shadow,
+            "chevron-background": $accordion-chevron-intermediate-background,
+            "chevron-inner-color": $accordion-chevron-inner-default-color,
+        ),
+        "dark": (
+            "background": $accordion-dark-background,
+            "text-color": #ffffff,
+            "chevron-box-shadow": $accordion-chevron-revert-box-shadow,
+            "chevron-background": $accordion-chevron-dark-background,
+            "chevron-inner-color": $accordion-chevron-inner-revert-color,
+        ),
+    ),
+    $accordion-themes
+);
+
+$accordion-rect-background: var(--accordion-rect-background);
+$accordion-chevron-color: var(--accordion-chevron-color);
+
+.AccordionItemView {
+    $root: &;
+
+    display: grid;
+    align-items: center;
+    overflow: hidden;
+
+    background-color: $accordion-content-background;
+    height: 56px;
+    width: 100%;
+    height: fit-content;
+
+    @each $theme, $themeProperties in $accordion-themes {
+        &_theme_#{$theme} {
+            #{$root}__header-container {
+                background-color: map.get($themeProperties, background);
+                color: map.get($themeProperties, text-color);
+            }
+
+            #{$root}__icon-chevron {
+                box-shadow: map.get($themeProperties, chevron-box-shadow);
+                rect {
+                    fill: map.get($themeProperties, chevron-background);
+                }
+                path {
+                    stroke: map.get($themeProperties, chevron-inner-color);
+                }
+            }
+        }
+    }
+
+    &_position {
+        &_top {
+            border-radius: variables.$radius-large variables.$radius-large 0 0;
+        }
+
+        &_middle {
+            border-radius: 0px;
+        }
+
+        &_bottom {
+            border-radius: 0 0 variables.$radius-large variables.$radius-large;
+
+            #{$root}__content {
+                grid-row-start: 1;
+                grid-row-end: 1;
+            }
+
+            #{$root}__header-container {
+                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: variables.$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: variables.$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: variables.$text-color;
+
+        &_visible {
+            max-height: 1024px;
+            padding: 18px 32px 18px 16px;
+            border: 1px solid $accordion-content-border;
+        }
+    }
+
+    &__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 { IAccordionViewProps } from '@steroidsjs/core/ui/content/Accordion/Accordion';
+export default function AccordionView(props: IAccordionViewProps): 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/Accordion/AccordionView.scss

@@ -0,0 +1,28 @@
+:root {
+    --accordion-content-border: rgba(0, 0, 0, 0.1);
+}
+
+html[data-theme="dark"] {
+    --accordion-content-border: rgba(255, 255, 255, 0.1);
+}
+
+$accordion-content-border: var(--accordion-content-border);
+
+.AccordionView {
+    height: fit-content;
+
+    display: grid;
+    grid-gap: 0;
+
+    .AccordionItemView {
+        $root: &;
+
+        &__header-container {
+            border-bottom: 1px solid $accordion-content-border;
+        }
+    }
+
+    .AccordionItemView:last-of-type .AccordionItemView__header-container {
+        border-bottom: none;
+    }
+}

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,15 +16,15 @@ 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') },
                     props.message && (react_1["default"].createElement("div", { className: bem.element('message') }, props.message)),
                     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', {
+                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

@@ -1,10 +1,50 @@
+@use "sass:map";
+@use "../../scss/variables";
+
+:root {
+    --alert-text-color: #152536;
+}
+
+html[data-theme="dark"] {
+    --alert-text-color: #152536;
+}
+
+$alert-text-color: var(--alert-text-color);
+
+$alert-themes: () !default;
+$alert-themes: map.merge(
+    (
+        "success": (
+            "background-color": variables.$success-light,
+            "icon-color": variables.$success,
+        ),
+        "info": (
+            "background-color": variables.$info-light,
+            "icon-color": variables.$info,
+        ),
+        "warning": (
+            "background-color": variables.$warning-light,
+            "icon-color": variables.$warning,
+        ),
+        "error": (
+            "background-color": variables.$danger-light,
+            "icon-color": variables.$danger,
+        ),
+        "default": (
+            "background-color": variables.$light-gray,
+            "icon-color": variables.$gray-dark,
+        ),
+    ),
+    $alert-themes
+);
+
 .AlertView {
     $root: &;
 
     position: relative;
-    padding: $spacing-16;
-    border-radius: $radius-large;
-    font-family: $font-family-nunito;
+    padding: 16px;
+    border-radius: variables.$radius-large;
+    font-family: variables.$font-family-nunito;
 
     &_close-animation {
         animation: hide_slide 0.4s ease-in;
@@ -25,13 +65,27 @@
         }
     }
 
-    &__icon.IconView {
+    &__icon {
         width: 24px;
+        height: 24px;
+        min-width: 24px;
         margin-right: 12px;
+
+        svg {
+            width: 24px;
+        }
     }
 
-    &__icon-close.IconView {
-        width: 10px;
+    &__icon-close {
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        min-width: 24px;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
     }
 
     &__text-block {
@@ -39,33 +93,29 @@
         row-gap: 12px;
         max-width: 444px;
         margin-right: auto;
+        color: $alert-text-color;
     }
 
-    &_success {
-        background: $success-light;
-    }
-
-    &_info {
-        background: $info-light;
-    }
+    @each $color, $alert-properties in $alert-themes {
+        &_#{$color} {
+            background-color: map.get($alert-properties, background-color);
 
-    &_warning {
-        background: $warning-light;
-    }
-
-    &_error {
-        background: $danger-light;
-    }
-    &_default {
-        background: $light-gray;
+            #{$root}__icon_#{$color} { 
+                g > circle:not([fill="white"]), rect { 
+                    fill: map.get($alert-properties, icon-color);
+                }
+            }
+        }
     }
 
     &__message {
-        font-size: $font-size-lg;
+        font-size: variables.$font-size-lg;
     }
 
     &__wrapper {
+        max-width: 508px;
         display: flex;
+        flex-flow: column;
         justify-content: space-between;
     }
 
@@ -73,9 +123,10 @@
         width: 100%;
         display: flex;
         flex-direction: row;
+        align-items: flex-start;
     }
 
     &__description {
-        font-size: $font-size-base;
+        font-size: variables.$font-size-base;
     }
 }

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;