@steroidsjs/bootstrap 3.0.0-beta.12 → 3.0.0-beta.13

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)),
+            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,200 @@
+: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: $spacing-16;
+        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 $spacing-16;
+        color: #343a40;
+
+        &_visible {
+            max-height: 1024px;
+            padding: 18px 32px 18px $spacing-16;
+            border: 1px solid rgba(#000, 0.1);
+        }
+    }
+
+    &__close-icon,
+    &__open-icon {
+        transition: opacity 150ms ease-in-out;
+    }
+
+    &__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.scss

@@ -26,8 +26,12 @@
     }
 
     &__icon.IconView {
-        width: 24px;
+        height: 24px;
         margin-right: 12px;
+        
+        svg {
+            width: 24px;
+        }
     }
 
     &__icon-close.IconView {

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,18 +1,17 @@
 :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);
 }
 
@@ -24,7 +23,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,39 +46,28 @@
     }
 
     &_size {
-        &_x-large {
+
+        &_large {
             #{$root}__body {
                 height: 64px;
                 width: 64px;
                 line-height: 64px;
-                font-size: 20px;
+                font-size: $font-size-base;
             }
             --border-width: var(--border-width-large);
             --status-border-width: var(--status-border-width-large);
-            --status-size: var(--status-size-x-large);
+            --status-size: var(--status-size-large);
         }
 
-        &_large {
+        &_middle {
             #{$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-size: var(--status-size-large);
-        }
-
-        &_middle {
-            #{$root}__body {
-                height: 36px;
-                width: 36px;
-                line-height: 36px;
                 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);
         }
 
@@ -121,8 +109,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;
@@ -136,12 +124,8 @@
         }
     }
 
-    &_has-border-avatar {
-        @include border($gradient-purple);
-    }
-
-    &_has-border-without-avatar {
-        @include border($gradient-red);
+    &_has-border {
+        @include border($gradient-blue);
     }
 
     &__body {
@@ -153,12 +137,14 @@
         vertical-align: middle;
 
         color: $white;
-        background: $gradient-purple border-box;
+        background: $gradient-blue border-box;
         border: 1px solid #fff;
 
         span {
             display: block;
-            transform: translateY(-2px);
+            font-family: $font-family-nunito;
+            font-weight: 800;
+            letter-spacing: 0.1em;
         }
 
         img {

package/content/Badge/BadgeView.js

@@ -12,12 +12,14 @@ function BadgeView(props) {
     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[props.size] = !!props.size,
+            _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-wrapper') },
-            react_1["default"].createElement("span", { className: bem.element('content') }, props.message),
-            props.showClose && (react_1["default"].createElement(Icon_1["default"], { name: 'close', onClick: props.onClose })),
-            props.counter
-                && (react_1["default"].createElement("div", { className: bem.element('chip') }, typeof props.counter === 'object'
-                    && props.counter.content))))));
+        react_1["default"].createElement("div", { className: bem.element('wrapper') },
+            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: 'badge-close' })))))));
 }
 exports["default"] = BadgeView;

package/content/Badge/BadgeView.scss

@@ -1,12 +1,101 @@
-.BadgeView { 
-    
+@import "../../scss/variables";
+
+.BadgeView {
     $root: &;
+
     display: inline-block;
     position: relative;
+    width: fit-content;
 
     font-family: $font-family-nunito;
+    color: $white;
+    font-weight: $font-weight-sm;
+
+    &__content {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        #{$root}__message {
+            margin-right: 4px;
+        }
+    }
+
+    $badge-types: (
+        "primary": $primary,
+        "secondary": $secondary,
+        "success": $success,
+        "danger": $danger,
+        "warning": $warning,
+        "info": $info,
+    );
+
+    @each $type, $color in $badge-types {
+        &_#{$type} {
+            background-color: $color;
+
+            @if ($type == "warning" or $type == "info") {
+                color: $text-color;
+
+                #{$root}__close {
+                    svg {
+                        path {
+                            stroke: #000;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    &_squarer {
+        border-radius: $radius-small;
+    }
+
+    &_rounder {
+        border-radius: $radius-xlarge;
+    }
+
+    &_large {
+        padding: $spacing-4 $spacing-8;
+    }
+
+    &_medium {
+        padding: $spacing-2 $spacing-8;
+    }
+
+    &_small {
+        padding: 0 $spacing-8;
+    }
+
+    &_has-counter {
+        border: 1px solid #e9e9e9;
+        border-radius: 100px;
+
+        background: $light-gray;
+        color: $text-color;
+        padding: $spacing-4 12px;
+
+        #{$root}__counter-content {
+            background: $white;
+            padding: $spacing-2 5px;
+            border-radius: 20px;
+        }
+
+        #{$root}__message {
+            margin-right: 8px;
+        }
+
+        #{$root}__counter {
+            margin-right: 8px;
+        }
 
-    &_primary {
-        background-color: var(--primary);
+        #{$root}__close { 
+            svg {
+                path { 
+                    stroke: #000;
+                }
+            }
+        }
     }
-}
+}