@steroidsjs/bootstrap 3.0.0-beta.1 → 3.0.0-beta.11

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,80 @@
     $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: $spacing-16;
+    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%);
-      }
-    }
-
-    &_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.IconView {
+        width: 24px;
+        margin-right: 12px;
+    }
 
-        #{$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,3 +1,6 @@
-/// <reference types="react" />
 import { IAvatarViewProps } from '@steroidsjs/core/ui/content/Avatar/Avatar';
-export default function Avatar(props: IAvatarViewProps): JSX.Element;
+interface IAvatarProps extends IAvatarViewProps {
+    formattedTitle: any;
+}
+export default function Avatar(props: IAvatarProps): JSX.Element;
+export {};

package/content/Avatar/AvatarView.js

@@ -31,10 +31,14 @@ 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-avatar': props.hasBorder && !!props.src,
+            'has-border-without-avatar': props.hasBorder && !props.src,
+            'has-custom-status': props.status && !!customSize.width
         }), props.className) },
         react_1["default"].createElement("span", { className: bem.element('body'), style: __assign(__assign({}, props.style), customSize) },
-            (props.src && renderImage()) || (react_1["default"].createElement("span", null, props.formattedTitle)),
-            props.children)));
+            react_1["default"].createElement(react_1["default"].Fragment, null,
+                (props.src && renderImage()) || (react_1["default"].createElement("span", null, props.formattedTitle)),
+                props.children))));
 }
 exports["default"] = Avatar;

package/content/Avatar/AvatarView.scss

@@ -1,103 +1,171 @@
+:root {
+    --border-width-small: 1px;
+    --border-width-medium: 1.5px;
+    --border-width-large: 2px;
+    --border-width: var(--border-width-large);
+
+    --status-border-width-small: 2px;
+    --status-border-width-medium: 3px;
+    --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: var(--status-size-x-large);
+}
 
-.AvatarView {
-  $root: &;
-
-  display: inline-block;
-  position: relative;
-
-  &_size {
-    &_x-large {
-      #{$root}__body {
-        height: $avatar-x-large-size;
-        width: $avatar-x-large-size;
-        line-height: $avatar-x-large-size;
-        font-size: $avatar-x-large-font-size;
-      }
+@mixin border($background) {
+    &::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        padding: 55%;
+        border-radius: 100%;
+        border: var(--border-width) solid transparent;
+        background: $background border-box;
+        -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+        -webkit-mask-composite: xor;
+        mask-composite: exclude;
     }
+}
 
-    &_large {
-      #{$root}__body {
-        height: $avatar-large-size;
-        width: $avatar-large-size;
-        line-height: $avatar-large-size;
-        font-size: $avatar-large-font-size;
-      }
-    }
+.AvatarView {
+    $root: &;
 
-    &_middle {
-      #{$root}__body {
-        height: $avatar-middle-size;
-        width: $avatar-middle-size;
-        line-height: $avatar-middle-size;
-        font-size: $avatar-middle-font-size;
-      }
-    }
+    display: inline-block;
+    position: relative;
+    aspect-ratio: 1;
 
-    &_small {
-      #{$root}__body {
-        height: $avatar-small-size;
-        width: $avatar-small-size;
-        line-height: $avatar-small-size;
-        font-size: $avatar-small-font-size;
-      }
+    &_has-custom-status {
+        --status-size: 25%;
+        --status-border-width: 2px;
     }
-  }
 
-  &_shape {
-    &_square {
-      #{$root}__body{
-        border-radius: unset;
-      }
+    &_size {
+        &_x-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-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-size: var(--status-size-medium);
+        }
+
+        &_small {
+            #{$root}__body {
+                height: 28px;
+                width: 28px;
+                line-height: 28px;
+                font-size: $font-size-xs;
+            }
+            --border-width: var(--border-width-small);
+            --status-border-width: var(--status-border-width-small);
+            --status-size: var(--status-size-small);
+        }
     }
 
-    &_circle {
-      #{$root}__body{
-        border-radius: 50%;
-      }
+    &_shape {
+        &_square {
+            #{$root}__body {
+                border-radius: unset;
+            }
+        }
+
+        &_circle {
+            #{$root}__body {
+                border-radius: 50%;
+            }
+        }
     }
-  }
 
-  &_has-image {
-    #{$root}__body{
-      background-color: unset;
-    }
-  }
-
-  &_has-status {
-    ::after {
-      content: '';
-      position: absolute;
-      right: 0;
-      bottom: 0;
-      width: 25%;
-      height: 25%;
-      z-index: 10;
-
-      color: $avatar-status-color;
-      font-size: 6px;
-
-      border-radius: 50%;
-      background-color: $avatar-status-color;
-      border: $avatar-status-border;
+    &_has-image {
+        #{$root}__body {
+            background-color: unset;
+        }
     }
-  }
 
-  &__body {
-    display: inline-block;
-    overflow: hidden;
+    &_has-status {
+        &::after {
+            content: "";
+            position: absolute;
+            box-sizing: content-box;
+            right: -7%;
+            bottom: -7%;
+            width: var(--status-size);
+            height: var(--status-size);
+            z-index: 10;
+
+            color: $success;
 
-    text-align: center;
-    white-space: nowrap;
-    vertical-align: middle;
+            border-radius: $radius-circle;
+            background-color: $success;
+
+            border: var(--status-border-width) solid $white;
+        }
+    }
 
-    color: $avatar-text-color;
-    background-color: $avatar-background-color;
+    &_has-border-avatar {
+        @include border($gradient-purple);
+    }
+
+    &_has-border-without-avatar {
+        @include border($gradient-red);
+    }
 
-    img {
-      display: block;
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
+    &__body {
+        display: inline-block;
+        overflow: hidden;
+
+        text-align: center;
+        white-space: nowrap;
+        vertical-align: middle;
+
+        color: $white;
+        background: $gradient-purple border-box;
+        border: 1px solid #fff;
+
+        span {
+            display: block;
+            transform: translateY(-2px);
+        }
+
+        img {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
     }
-  }
 }

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,23 @@
+"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"));
+require("./BadgeView.scss");
+var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
+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)), 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))))));
+}
+exports["default"] = BadgeView;

package/content/Calendar/CalendarView.d.ts

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

package/content/Calendar/CaptionElement.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CaptionElementProps } from 'react-day-picker/types/Props';
 import { ICalendarViewProps } from '@steroidsjs/core/ui/content/Calendar/Calendar';
 interface ICaptionElementProps extends CaptionElementProps, Pick<ICalendarViewProps, 'fromYear' | 'toYear' | 'isCaptionPanelVisible' | 'toggleCaptionPanel'> {

package/content/Calendar/CaptionElement.js

@@ -29,7 +29,7 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var react_1 = 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 upperFirst_1 = __importDefault(require("lodash-es/upperFirst"));
 function CaptionElement(props) {
     var bem = (0, hooks_1.useBem)('CaptionElement');

package/content/Card/CardView.d.ts

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

package/content/Card/CardView.js

@@ -19,8 +19,9 @@ function CardView(props) {
         react_1["default"].createElement("div", { className: bem.element('content') },
             props.title && (react_1["default"].createElement("div", { className: bem.element('title') }, props.title)),
             react_1["default"].createElement("div", { className: bem.element('content-inner') },
-                props.description && (react_1["default"].createElement("div", { className: bem.element('description') }, props.description)),
-                props.children)),
+                react_1["default"].createElement(react_1["default"].Fragment, null,
+                    props.description && (react_1["default"].createElement("div", { className: bem.element('description') }, props.description)),
+                    props.children))),
         props.footer && (react_1["default"].createElement("div", { className: bem.element('footer') }, props.footer))));
 }
 exports["default"] = CardView;

package/content/Collapse/CollapseItemView.d.ts

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

package/content/Collapse/CollapseItemView.js

@@ -27,7 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 var React = __importStar(require("react"));
-var Icon_1 = __importDefault(require("@steroidsjs/core/ui/icon/Icon"));
+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');
@@ -46,6 +46,7 @@ function CollapseItemView(props) {
         }), 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);

package/content/Collapse/CollapseView.d.ts

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

package/content/Detail/DetailView.d.ts

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

package/content/DropDown/DropDownView.d.ts

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

package/{icon → content}/Icon/IconView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
-import { IIconViewProps } from '@steroidsjs/core/ui/icon/Icon/Icon';
+import { IIconViewProps } from '@steroidsjs/core/ui/content/Icon/Icon';
 export default function IconView(props: IIconViewProps & IBemHocOutput): JSX.Element;

package/crud/Crud/CrudView.d.ts

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

package/form/AutoCompleteField/AutoCompleteFieldView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { IAutoCompleteFieldViewProps } from '@steroidsjs/core/ui/form/AutoCompleteField/AutoCompleteField';
 import './AutoCompleteFieldView.scss';

package/form/Button/ButtonView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IButtonViewProps } from '@steroidsjs/core/ui/form/Button/Button';
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 export default function ButtonView(props: IButtonViewProps & IBemHocOutput): JSX.Element;

package/form/Button/ButtonView.js

@@ -28,7 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var isString_1 = __importDefault(require("lodash-es/isString"));
-var Icon_1 = __importDefault(require("@steroidsjs/core/ui/icon/Icon"));
+var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function ButtonView(props) {
     var _a;