@steroidsjs/bootstrap 2.1.21 → 3.0.0-beta.10

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 = hooks_1.useBem('AlertView');
+    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/AvatarGroupView.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -22,7 +26,7 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function Avatar(props) {
-    var bem = hooks_1.useBem('AvatarGroupView');
+    var bem = (0, hooks_1.useBem)('AvatarGroupView');
     return (React.createElement("div", { className: bem.block() }, props.children));
 }
 exports["default"] = Avatar;

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

@@ -17,12 +17,12 @@ exports.__esModule = true;
 var react_1 = __importDefault(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function Avatar(props) {
-    var bem = hooks_1.useBem('AvatarView');
+    var bem = (0, hooks_1.useBem)('AvatarView');
     var customSize = typeof props.size === 'number'
         ? {
             width: props.size,
             height: props.size,
-            lineHeight: props.size + "px",
+            lineHeight: "".concat(props.size, "px"),
             fontSize: props.size / 2
         }
         : {};
@@ -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/CalendarView.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -40,10 +44,10 @@ var hooks_1 = require("@steroidsjs/core/hooks");
 var react_day_picker_1 = __importStar(require("react-day-picker"));
 var CaptionElement_1 = __importDefault(require("./CaptionElement"));
 function CalendarView(props) {
-    var bem = hooks_1.useBem('CalendarView');
+    var bem = (0, hooks_1.useBem)('CalendarView');
     var month = props.month, toYear = props.toYear, fromYear = props.fromYear, showFooter = props.showFooter, onDaySelect = props.onDaySelect, selectedDates = props.selectedDates, onMonthSelect = props.onMonthSelect, numberOfMonths = props.numberOfMonths, toggleCaptionPanel = props.toggleCaptionPanel, isCaptionPanelVisible = props.isCaptionPanelVisible;
     var isRange = !!selectedDates[1];
-    var _a = react_1.useMemo(function () {
+    var _a = (0, react_1.useMemo)(function () {
         var from = selectedDates[0];
         var to = selectedDates[1];
         var inRange = function (day) { return react_day_picker_1.DateUtils.isDayAfter(day, from) && react_day_picker_1.DateUtils.isDayBefore(day, to); };
@@ -61,7 +65,7 @@ function CalendarView(props) {
                 : undefined
         };
     }, [isRange, selectedDates]), selectedDays = _a.selectedDays, modifiers = _a.modifiers;
-    return (React.createElement(react_day_picker_1["default"], __assign({}, props, { className: bem(bem.block({ ranged: isRange }), props.className), captionElement: react_1.useCallback(function (_a) {
+    return (React.createElement(react_day_picker_1["default"], __assign({}, props, { className: bem(bem.block({ ranged: isRange }), props.className), captionElement: (0, react_1.useCallback)(function (_a) {
             var classNames = _a.classNames, date = _a.date, localeUtils = _a.localeUtils, locale = _a.locale;
             return (React.createElement(CaptionElement_1["default"], { date: date, locale: locale, toYear: toYear, fromYear: fromYear, classNames: classNames, onChange: onMonthSelect, localeUtils: localeUtils, showCalendarFooter: showFooter, toggleCaptionPanel: toggleCaptionPanel, isCaptionPanelVisible: isCaptionPanelVisible }));
         }, [fromYear, isCaptionPanelVisible, onMonthSelect, showFooter, toYear, toggleCaptionPanel]), renderDay: function (day) {

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

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -25,10 +29,10 @@ 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 = hooks_1.useBem('CaptionElement');
+    var bem = (0, hooks_1.useBem)('CaptionElement');
     var localeUtils = props.localeUtils, locale = props.locale, fromYear = props.fromYear, toYear = props.toYear, date = props.date, isCaptionPanelVisible = props.isCaptionPanelVisible, toggleCaptionPanel = props.toggleCaptionPanel;
     var currentMonth = date.getMonth();
     var currentYear = date.getFullYear();
@@ -42,11 +46,11 @@ function CaptionElement(props) {
             props.onChange(new Date(currentYear, newMonth));
         }
     };
-    var months = react_1.useMemo(function () { return (localeUtils.getMonths(locale).map(function (item, index) { return ({
+    var months = (0, react_1.useMemo)(function () { return (localeUtils.getMonths(locale).map(function (item, index) { return ({
         id: index,
-        label: upperFirst_1["default"](item)
+        label: (0, upperFirst_1["default"])(item)
     }); })); }, [localeUtils, locale]);
-    var years = react_1.useMemo(function () {
+    var years = (0, react_1.useMemo)(function () {
         var result = [];
         for (var i = fromYear.getFullYear(); i <= toYear.getFullYear(); i += 1) {
             result.push(i);

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;