@steroidsjs/bootstrap 3.0.0-beta.2 → 3.0.0-beta.20

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/Accordion/AccordionItemView.js

@@ -0,0 +1,96 @@
+"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");
+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;
+        }
+        var openIconClassName = bem.element('open-icon');
+        var closeIconClassName = bem.element('close-icon');
+        if (typeof props.icon === 'object') {
+            var icons = props.icon;
+            return (React.createElement(React.Fragment, null,
+                typeof icons.open === 'string'
+                    ? (React.createElement(Icon_1["default"], { name: icons.open, className: openIconClassName }))
+                    : (React.createElement("span", { className: openIconClassName }, icons.open)),
+                typeof icons.close === 'string'
+                    ? (React.createElement(Icon_1["default"], { name: icons.close, className: closeIconClassName }))
+                    : (React.createElement("span", { className: closeIconClassName }, icons.close))));
+        }
+        return typeof props.icon === 'string'
+            ? React.createElement(Icon_1["default"], { name: props.icon })
+            : (React.createElement("span", { className: bem.element('custom-icon') }, props.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', {
+                        active: !props.disabled && props.isShowMore
+                    }), name: "accordion-chevron" }))))),
+        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,195 @@
+: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 {
+                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 {
+        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 {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+    }
+
+    &__title-container {
+        width: 100%;
+        padding: 16px;
+        align-self: center;
+        font-size: $font-size-lg;
+        line-height: 24px;
+    }
+
+    &__icon-wrapper {
+        width: 48px;
+        height: 48px;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &_not_visible {
+            width: 0;
+            opacity: 0;
+        }
+    }
+
+    &__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 {
+        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/Accordion/AccordionView.scss

@@ -0,0 +1,14 @@
+.AccordionView {
+  height: fit-content;
+
+  display: grid;
+  grid-gap: 0;
+
+  & > :first-child {
+    border-radius: $radius-large $radius-large 0 0;
+  }
+
+  & > :last-child {
+    border-radius: 0 0 $radius-large $radius-large;
+  }
+}

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,25 @@ 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"));
 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, 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', {
+                        large: !!props.description
+                    }), name: 'close', onClick: props.onClose })))),
+            props.children || null))));
 }
 exports["default"] = Alert;

package/content/Alert/AlertView.scss

@@ -2,119 +2,84 @@
     $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: $radius-large;
+    font-family: $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%);
-      }
+        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;
+    &__icon.IconView {
+        height: 24px;
+        margin-right: 12px;
+        
+        svg {
+            width: 24px;
         }
     }
 
-    &_success {
-        background: $back-success;
-        border-color: $success;
-
-        #{$root}__icon.IconView {
-            fill: $success;
-        }
+    &__icon-close.IconView {
+        width: 10px;
     }
-    &_info {
-        background: $back-info;
-        border-color: $info;
 
-        #{$root}__icon.IconView {
-            fill: $info;
-        }
+    &__text-block {
+        display: grid;
+        row-gap: 12px;
+        max-width: 444px;
+        margin-right: auto;
     }
-    &_warning {
-        background: $back-warning;
-        border-color: $warning;
 
-        #{$root}__icon.IconView {
-            fill: $warning;
-        }
+    &_success {
+        background: $success-light;
     }
-    &_error {
-        background: $back-error;
-        border-color: $danger;
 
-        #{$root}__icon.IconView {
-            fill: $danger;
-        }
+    &_info {
+        background: $info-light;
     }
 
-    &__icon.IconView svg {
-        width: $alert-icon-size;
-        height: $alert-icon-size;
-        margin-right: 12px;
+    &_warning {
+        background: $warning-light;
     }
 
-    &__action {
-        display: flex;
-        flex-direction: column;
-        padding: 0 35px 0 15px;
+    &_error {
+        background: $danger-light;
+    }
+    &_default {
+        background: $light-gray;
     }
 
     &__message {
-        flex-grow: 1;
-        font-size: $alert-message-font-size;
+        font-size: $font-size-lg;
     }
 
-    &__content-wrapper {
+    &__wrapper {
         display: flex;
         justify-content: space-between;
     }
 
     &__content {
-        display: grid;
-        grid-gap: 12px;
+        width: 100%;
+        display: flex;
+        flex-direction: row;
     }
 
     &__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: $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;

package/content/Avatar/AvatarView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IAvatarViewProps } from '@steroidsjs/core/ui/content/Avatar/Avatar';
 interface IAvatarProps extends IAvatarViewProps {
     formattedTitle: any;

package/content/Avatar/AvatarView.js

@@ -31,11 +31,13 @@ function Avatar(props) {
             size: props.size,
             shape: props.shape,
             'has-image': !!props.src && !props.isError,
-            'has-status': props.status
+            'has-status': props.status,
+            '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;