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

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,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) },
-            (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", { className: bem.element('formattedTitle') }, props.formattedTitle)),
+                props.children))));
 }
 exports["default"] = Avatar;

package/content/Avatar/AvatarView.scss

@@ -1,103 +1,166 @@
+@use "../../scss/variables";
 
-.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;
-      }
-    }
+:root {
+    --border-width-small: 1px;
+    --border-width-medium: 2px;
+    --border-width-large: 2px;
+    --border-width: var(--border-width-large);
 
-    &_large {
-      #{$root}__body {
-        height: $avatar-large-size;
-        width: $avatar-large-size;
-        line-height: $avatar-large-size;
-        font-size: $avatar-large-font-size;
-      }
-    }
+    --status-border-width-small: 1px;
+    --status-border-width-medium: 2px;
+    --status-border-width-large: 4px;
+    --status-border-width: var(--status-border-width-large);
 
-    &_middle {
-      #{$root}__body {
-        height: $avatar-middle-size;
-        width: $avatar-middle-size;
-        line-height: $avatar-middle-size;
-        font-size: $avatar-middle-font-size;
-      }
-    }
+    --status-size-small: 8px;
+    --status-size-medium: 12px;
+    --status-size-large: 14px;
+    --status-size: var(--status-size-x-large);
+
+    --status-border-color: #FFFFFF;
+}
+
+html[data-theme="dark"] { 
+    --status-border-color: #4E4F57;
+}
 
-    &_small {
-      #{$root}__body {
-        height: $avatar-small-size;
-        width: $avatar-small-size;
-        line-height: $avatar-small-size;
-        font-size: $avatar-small-font-size;
-      }
+$status-border-color: var(--status-border-color);
+
+@mixin border($background) {
+    &::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        padding: 53%;
+        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;
     }
-  }
+}
 
-  &_shape {
-    &_square {
-      #{$root}__body{
-        border-radius: unset;
-      }
+.AvatarView {
+    $root: &;
+
+    display: inline-block;
+    position: relative;
+    aspect-ratio: 1;
+
+    &_has-custom-status {
+        --status-size: 25%;
+        --status-border-width: 2px;
     }
 
-    &_circle {
-      #{$root}__body{
-        border-radius: 50%;
-      }
+    &_size {
+
+        &_lg {
+            #{$root}__body {
+                height: 64px;
+                width: 64px;
+                line-height: 64px;
+                font-size: variables.$font-size-base;
+            }
+            --border-width: var(--border-width-large);
+            --status-border-width: var(--status-border-width-large);
+            --status-size: var(--status-size-large);
+        }
+
+        &_md {
+            #{$root}__body {
+                height: 50px;
+                width: 50px;
+                line-height: 50px;
+                font-size: variables.$font-size-sm;
+            }
+            --border-width: var(--border-width-medium);
+            --status-border-width: var(--status-border-width-medium);
+            --status-size: var(--status-size-medium);
+        }
+
+        &_sm {
+            #{$root}__body {
+                height: 32px;
+                width: 32px;
+                line-height: 32px;
+                font-size: variables.$font-size-xs;
+            }
+            --border-width: var(--border-width-small);
+            --status-border-width: var(--status-border-width-small);
+            --status-size: var(--status-size-small);
+        }
     }
-  }
 
-  &_has-image {
-    #{$root}__body{
-      background-color: unset;
+    &_shape {
+        &_square {
+            #{$root}__body {
+                border-radius: unset;
+            }
+        }
+
+        &_circle {
+            #{$root}__body {
+                border-radius: 50%;
+            }
+        }
     }
-  }
-
-  &_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: -6%;
+            bottom: -6%;
+            width: var(--status-size);
+            height: var(--status-size);
+            z-index: 10;
 
-    text-align: center;
-    white-space: nowrap;
-    vertical-align: middle;
+            color: variables.$success;
 
-    color: $avatar-text-color;
-    background-color: $avatar-background-color;
+            border-radius: variables.$radius-circle;
+            background-color: variables.$success;
+
+            border: var(--status-border-width) solid $status-border-color;
+        }
+    }
+
+    &_has-border {
+        @include border(variables.$gradient-blue);
+    }
 
-    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: variables.$white;
+        background: variables.$primary;
+
+        span {
+            display: block;
+            font-family: variables.$font-family-nunito;
+            font-weight: 800;
+            letter-spacing: 0.1em;
+        }
+
+        img {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
     }
-  }
 }

package/content/Badge/BadgeView.d.ts

@@ -0,0 +1,2 @@
+import { IBadgeViewProps } from '@steroidsjs/core/ui/content/Badge/Badge';
+export default function BadgeView(props: IBadgeViewProps): JSX.Element;

package/content/Badge/BadgeView.js

@@ -0,0 +1,24 @@
+"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"));
+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.size = props.size,
+            _a.hasClose = props.showClose,
+            _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') },
+            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: 'cross_4x4' }))))));
+}
+exports["default"] = BadgeView;

package/content/Badge/BadgeView.scss

@@ -0,0 +1,141 @@
+@use "../../scss/variables";
+
+:root {
+    --counter-background-color: #ffffff;
+    --counter-border-color: var(--gray);
+    --counter-cross-color: #000000;
+}
+
+html[data-theme="dark"] {
+    --counter-background-color: rgba(255, 255, 255, 0.1);;
+    --counter-border-color: transparent;
+    --counter-cross-color: #FFFFFF;
+}
+
+$counter-background-color: var(--counter-background-color);
+$counter-border-color: var(--counter-border-color);
+$counter-cross-color: var(--counter-cross-color);
+
+.BadgeView {
+    $root: &;
+
+    display: inline-block;
+    position: relative;
+    width: fit-content;
+
+    font-family: variables.$font-family-nunito;
+    color: variables.$white;
+    font-size: variables.$font-size-xs;
+    line-height: 16px;
+
+    &__content {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: center;
+    }
+
+    &__close {
+        width: 16px;
+        height: 16px;
+        cursor: pointer;
+    }
+
+    $badge-types: (
+        "primary": variables.$primary,
+        "secondary": variables.$secondary,
+        "success": variables.$success,
+        "danger": variables.$danger,
+        "warning": variables.$warning,
+        "info": variables.$info,
+    );
+
+    @each $type, $color in $badge-types {
+        &_#{$type} {
+            background-color: $color;
+
+            @if ($type == "warning" or $type == "info") {
+                color: variables.$static-text-color;
+
+                #{$root}__close {
+                    svg {
+                        path {
+                            stroke: #000;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    &_size {
+        &_lg {
+            padding: 4px 8px;
+        }
+        &_md {
+            padding: 3px 8px;
+        }
+        &_sm {
+            padding: 1px 8px;
+        }
+    }
+
+    &_squarer {
+        border-radius: variables.$radius-small;
+    }
+
+    &_rounder {
+        border-radius: variables.$radius-xlarge;
+    }
+
+    &_hasClose {
+        #{$root}__message {
+            margin-right: 4px;
+        }
+    }
+
+    &_has-counter {
+        border: 1px solid $counter-border-color;
+        border-radius: 100px;
+
+        background: variables.$light-gray;
+        color: variables.$text-color;
+        padding: 3px 12px;
+
+        #{$root}__content {
+            height: 100%;
+            padding: 0;
+        }
+
+        #{$root}__message {
+            margin-right: 8px;
+        }
+
+        #{$root}__counter {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            margin-right: 4px;
+            padding: 0 5.4px;
+            background-color: variables.$white;
+
+            border-radius: variables.$radius-circle;
+            background-color: $counter-background-color;
+        }
+
+        #{$root}__counter-content {
+            font-weight: variables.$font-weight-sm;
+            font-size: variables.$font-size-xs;
+            line-height: 16px;
+            color: variables.$text-color;
+        }
+
+        #{$root}__close {
+            path {
+                stroke: $counter-cross-color;
+            }
+        }
+    }
+}

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

@@ -45,8 +45,11 @@ var react_day_picker_1 = __importStar(require("react-day-picker"));
 var CaptionElement_1 = __importDefault(require("./CaptionElement"));
 function CalendarView(props) {
     var bem = (0, hooks_1.useBem)('CalendarView');
+    var localeComponent = (0, hooks_1.useComponents)().locale;
+    //TODO Исправить тип, связано с yarn tsc в action publish.yml
+    var DayPicker = react_day_picker_1["default"];
     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 isRange = !!selectedDates[0] && !!selectedDates[1];
     var _a = (0, react_1.useMemo)(function () {
         var from = selectedDates[0];
         var to = selectedDates[1];
@@ -65,7 +68,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: (0, react_1.useCallback)(function (_a) {
+    return (React.createElement(DayPicker, __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) {
@@ -78,6 +81,6 @@ function CalendarView(props) {
             else {
                 onDaySelect(day);
             }
-        }, fixedWeeks: true, month: month, firstDayOfWeek: 1, modifiers: modifiers, canChangeMonth: false, onDayClick: onDaySelect, selectedDays: selectedDays, numberOfMonths: numberOfMonths, localeUtils: moment_1["default"], locale: 'ru' })));
+        }, fixedWeeks: true, month: month, firstDayOfWeek: 1, modifiers: modifiers, canChangeMonth: false, onDayClick: onDaySelect, selectedDays: selectedDays, numberOfMonths: numberOfMonths, localeUtils: moment_1["default"], locale: localeComponent.language })));
 }
 exports["default"] = CalendarView;