@steroidsjs/bootstrap 3.0.0-beta.1 → 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/Accordion/AccordionItemView.js

@@ -0,0 +1,90 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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/content/Icon"));
+var hooks_1 = require("@steroidsjs/core/hooks");
+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.toggleAccordion || !props.toggleCollapse || !props.activeKey) {
+            return;
+        }
+        if (props.hasOneOpenItem) {
+            props.toggleAccordion(props.activeKey - 1);
+        }
+        else {
+            props.toggleCollapse(props.activeKey - 1);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.activeKey]);
+    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)),
+            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"] = 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.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { IAlertViewProps } from '@steroidsjs/core/ui/content/Alert/Alert';
 export default function Alert(props: IAlertViewProps): JSX.Element;

package/content/Alert/AlertView.js

@@ -5,29 +5,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 var react_1 = __importDefault(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
-var Icon_1 = __importDefault(require("@steroidsjs/core/ui/icon/Icon"));
+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');
     return (props.isExist && (react_1["default"].createElement("div", { className: bem(bem.block((_a = {},
             _a[props.type] = !!props.type,
-            _a['has-description'] = !!props.description,
             _a['close-animation'] = !props.isVisible,
             _a)), props.className), style: props.style },
-        props.showIcon && (react_1["default"].createElement(Icon_1["default"], { name: props.type, className: bem.element('icon', (_b = {},
-                _b[props.type] = !!props.type,
-                _b)) })),
-        typeof props.showIcon === 'string' && (react_1["default"].createElement(Icon_1["default"], { name: props.showIcon, className: bem.element('icon') })),
-        react_1["default"].createElement("div", { className: bem.element('content-wrapper') },
+        react_1["default"].createElement("div", { className: bem.element('wrapper') },
             react_1["default"].createElement("div", { className: bem.element('content') },
-                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))),
-            props.action && (react_1["default"].createElement("div", { className: bem.element('action') }, props.action))),
-        props.showClose && (react_1["default"].createElement(Icon_1["default"], { className: bem.element('icon-close', {
-                large: !!props.description
-            }), name: 'times', onClick: function (e) {
-                e.preventDefault();
-                props.onClose();
-            } })))));
+                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))),
+                props.showClose && (react_1["default"].createElement(Icon_1["default"], { className: bem.element('icon-close', {
+                        large: !!props.description
+                    }), name: 'circle_cross_16x16', onClick: props.onClose }))),
+            props.children || null))));
 }
 exports["default"] = Alert;

package/content/Alert/AlertView.scss

@@ -1,120 +1,132 @@
+@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;
-
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: $alert-padding-y $alert-padding-x;
-
-    border-radius: $alert-border-radius;
-    border: 1px solid transparent;
+    padding: 16px;
+    border-radius: variables.$radius-large;
+    font-family: variables.$font-family-nunito;
 
     &_close-animation {
-        animation: hide_slide .4s ease-in;
+        animation: hide_slide 0.4s ease-in;
     }
 
     @keyframes hide_slide {
-      0% {
-        transform: translateX(-10px);
-      }
-      40% {
-        transform: translateX(0%);
-      }
-      80% {
-        transform: translateX(-10%);
-      }
-      100% {
-        transform: translateX(100%);
-      }
-    }
-
-    &_has-description {
-        align-items: flex-start;
-
-        #{$root}__message {
-            font-size: $alert-description-font-size;
+        0% {
+            transform: translateX(-10px);
+        }
+        40% {
+            transform: translateX(0%);
+        }
+        80% {
+            transform: translateX(-10%);
+        }
+        100% {
+            transform: translateX(100%);
         }
     }
 
-    &_success {
-        background: $back-success;
-        border-color: $success;
+    &__icon {
+        width: 24px;
+        height: 24px;
+        min-width: 24px;
+        margin-right: 12px;
 
-        #{$root}__icon.IconView {
-            fill: $success;
+        svg {
+            width: 24px;
         }
     }
-    &_info {
-        background: $back-info;
-        border-color: $info;
 
-        #{$root}__icon.IconView {
-            fill: $info;
-        }
-    }
-    &_warning {
-        background: $back-warning;
-        border-color: $warning;
+    &__icon-close {
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        min-width: 24px;
 
-        #{$root}__icon.IconView {
-            fill: $warning;
-        }
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
     }
-    &_error {
-        background: $back-error;
-        border-color: $danger;
 
-        #{$root}__icon.IconView {
-            fill: $danger;
-        }
+    &__text-block {
+        display: grid;
+        row-gap: 12px;
+        max-width: 444px;
+        margin-right: auto;
+        color: $alert-text-color;
     }
 
-    &__icon.IconView svg {
-        width: $alert-icon-size;
-        height: $alert-icon-size;
-        margin-right: 12px;
-    }
+    @each $color, $alert-properties in $alert-themes {
+        &_#{$color} {
+            background-color: map.get($alert-properties, background-color);
 
-    &__action {
-        display: flex;
-        flex-direction: column;
-        padding: 0 35px 0 15px;
+            #{$root}__icon_#{$color} { 
+                g > circle:not([fill="white"]), rect { 
+                    fill: map.get($alert-properties, icon-color);
+                }
+            }
+        }
     }
 
     &__message {
-        flex-grow: 1;
-        font-size: $alert-message-font-size;
+        font-size: variables.$font-size-lg;
     }
 
-    &__content-wrapper {
+    &__wrapper {
+        max-width: 508px;
         display: flex;
+        flex-flow: column;
         justify-content: space-between;
     }
 
     &__content {
-        display: grid;
-        grid-gap: 12px;
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
     }
 
     &__description {
-        font-size: $alert-description-font-size;
-    }
-
-    &__icon-close.IconView {
-        position: absolute;
-        right: 20px;
-
-        svg {
-            width: $alert-close-icon-size;
-            height: $alert-close-icon-size;
-        }
-
-        fill: rgba($heading, .6);
-        transition: fill .1s ease-in;
-        &:hover {
-            fill: $heading;
-        }
+        font-size: variables.$font-size-base;
     }
 }

package/content/Avatar/AvatarGroupView.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { IAvatarGroupViewProps } from '@steroidsjs/core/ui/content/Avatar/AvatarGroup';
 export default function Avatar(props: IAvatarGroupViewProps): JSX.Element;