@steroidsjs/bootstrap 3.0.0-beta.3 → 3.0.0-beta.31

package/content/DropDown/DropDownView.scss

@@ -1,31 +1,200 @@
+@import "../../scss/variables/";
+
+:root {
+    --dropdown-background: #fff;
+    --dropdown-triangle-border: #eef1f2;
+    --dropdown-triangle-svg: url("data:image/svg+xml,%3Csvg width='21' height='11' viewBox='0 0 21 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.0416 0.5L10.1719 10.2567L1.30215 0.499998L19.0416 0.5Z' fill='white' stroke='%23EEF1F2'/%3E%3C/svg%3E%0A");
+}
+
+html[data-theme="dark"] {
+    --dropdown-background: #4e4f57;
+    --dropdown-triangle-border: transparent;
+    --dropdown-triangle-svg: url("data:image/svg+xml,%3Csvg width='21' height='11' viewBox='0 0 21 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.1719 11L0.171876 -1.74846e-06L20.1719 0L10.1719 11Z' fill='%234E4F57'/%3E%3C/svg%3E%0A");
+}
+
+$dropdown-background: var(--dropdown-background);
+$dropdown-triangle-border: var(--triangle-border);
+$dropdown-triangle-svg: var(--dropdown-triangle-svg);
+
 $gap: 12px;
 
+%triangle {
+    content: "";
+    position: absolute;
+    width: 20px;
+    height: 11px;
+    z-index: 2;
+    background-image: $dropdown-triangle-svg;
+}
+
+%borderShaper {
+    content: "";
+    position: absolute;
+    z-index: 3;
+
+    width: 16px;
+    height: 1px;
+    background-color: $dropdown-background;
+    border-left: 2px solid $dropdown-triangle-border;
+    border-right: 2px solid $dropdown-triangle-border;
+}
+
+@mixin drop($edge, $padding) {
+    @if ($edge == "top") {
+        &::before {
+            @extend %triangle;
+
+            top: 100%;
+            left: $padding;
+            transform: translateX(-50%);
+        }
+
+        &::after {
+            @extend %borderShaper;
+
+            top: 100%;
+            left: $padding;
+            transform: translateX(-50%);
+        }
+    } @else if ($edge == "bottom") {
+        &::before {
+            @extend %triangle;
+
+            top: 0;
+            left: $padding;
+            top: -11px;
+            transform: translateX(-50%) rotate(180deg);
+        }
+
+        &::after {
+            @extend %borderShaper;
+
+            transform: translateX(-50%);
+            top: -1px;
+            left: $padding;
+        }
+    } @else if($edge == "left") {
+        &::before {
+            @extend %triangle;
+
+            left: 100%;
+            top: $padding;
+            transform: translateX(-22.5%) rotate(-90deg);
+        }
+
+        &::after {
+            @extend %borderShaper;
+
+            left: 100%;
+            top: $padding;
+            transform: rotate(-90deg) translate(-30%, -7.5px) ;
+        }
+    }
+    @else if($edge == "right") { 
+        &::before {
+            @extend %triangle;
+
+            right: 100%;
+            top: $padding;
+            transform: translateX(22.5%) rotate(90deg);
+        }
+
+        &::after {
+            @extend %borderShaper;
+
+            right: 100%;
+            top: $padding;
+            transform: rotate(-90deg) translate(-30%, 7.5px) ;
+        }
+    }
+}
+
 .DropDownView {
-  z-index: 1000;
-  position: absolute;
-
-  transform: translate(0,0);
-  opacity: 0;
-  transition: opacity .15s ease-in, transform .15s ease-in;
-
-  border-radius: 4px;
-  border: 1px solid #ccc;
-  background-color: #fff;
-  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
-
-  &_show {
-    opacity: 1;
-  }
-  &_position-top, &_position-topLeft, &_position-topRight {
-    transform: translateY(-$gap);
-  }
-  &_position-bottom, &_position-bottomLeft, &_position-bottomRight {
-    transform: translateY($gap);
-  }
-  &_position-left, &_position-leftTop, &_position-leftBottom {
-    transform: translateX(-$gap);
-  }
-  &_position-right, &_position-rightTop, &_position-rightBottom{
-    transform: translateX($gap);
-  }
+    $root: &;
+
+    z-index: 1000;
+    position: absolute;
+
+    transform: translate(0, 0);
+    opacity: 0;
+    transition: opacity 0.15s ease-in, transform 0.15s ease-in;
+
+    z-index: 4;
+    width: 200px;
+    padding: 12px;
+    border-radius: $radius-large;
+    background-color: $dropdown-background;
+    border: 1px solid $gray;
+
+    &_show {
+        opacity: 1;
+    }
+    &_position-top,
+    &_position-topLeft,
+    &_position-topRight {
+        transform: translateY(-$gap);
+    }
+    &_position-bottom,
+    &_position-bottomLeft,
+    &_position-bottomRight {
+        transform: translateY($gap);
+    }
+    &_position-left,
+    &_position-leftTop,
+    &_position-leftBottom {
+        transform: translateX(-$gap);
+    }
+    &_position-right,
+    &_position-rightTop,
+    &_position-rightBottom {
+        transform: translateX($gap);
+    }
+
+    &_position-top {
+        @include drop("top", 50%);
+    }
+
+    &_position-topLeft {
+        @include drop("top", 15%);
+    }
+
+    &_position-topRight {
+        @include drop("top", 85%);
+    }
+
+    &_position-bottom {
+        @include drop("bottom", 50%);
+    }
+
+    &_position-bottomLeft {
+        @include drop("bottom", 15%);
+    }
+
+    &_position-bottomRight {
+        @include drop("bottom", 85%);
+    }
+
+    &_position-left {
+        @include drop("left", 46.5%);
+    }
+
+    &_position-leftTop {
+        @include drop("left", 12.5%)
+    }
+
+    &_position-leftBottom {
+        @include drop("left", 80%)
+    }
+
+    &_position-right {
+        @include drop("right", 46.5%);
+    }
+
+    &_position-rightTop {
+        @include drop("right", 12.5%);
+    }
+
+    &_position-rightBottom {
+        @include drop("right", 80%);
+    }
 }

package/content/Icon/IconView.js

@@ -28,9 +28,9 @@ var hooks_1 = require("@steroidsjs/core/hooks");
 function IconView(props) {
     var bem = (0, hooks_1.useBem)('IconView');
     if (typeof props.icon === 'string' && props.icon.indexOf('<svg') === 0) {
-        return (React.createElement("span", { dangerouslySetInnerHTML: { __html: props.icon } /* eslint-disable-line react/no-danger */, "aria-label": props.title, title: props.title, className: bem(bem.block(), props.className), onClick: props.onClick, onKeyPress: props.onClick, role: 'button', tabIndex: 0 }));
+        return (React.createElement("span", { dangerouslySetInnerHTML: { __html: props.icon } /* eslint-disable-line react/no-danger */, "aria-label": props.title, title: props.title, className: bem(bem.block(), props.className), onClick: props.onClick, onKeyPress: props.onClick, role: 'button', tabIndex: props.tabIndex || 0 }));
     }
-    return (React.createElement("span", { onClick: props.onClick, onKeyPress: props.onClick, role: 'button', tabIndex: 0 },
+    return (React.createElement("span", { onClick: props.onClick, onKeyPress: props.onClick, role: 'button', tabIndex: props.tabIndex || 0 },
         React.createElement("img", { alt: props.title, title: props.title, src: props.icon, className: bem(bem.block(), props.className) })));
 }
 exports["default"] = IconView;

package/form/Button/ButtonView.js

@@ -38,17 +38,19 @@ function ButtonView(props) {
             ? props.label
             : (props.hint || null);
         return (React.createElement(React.Fragment, null,
-            props.isLoading && (React.createElement("div", { className: bem.element('preloader') },
-                React.createElement("span", { className: 'spinner-border spinner-border-sm', role: 'status', "aria-hidden": 'true' }))),
-            (props.showLabelOnLoading || !props.isLoading) && (React.createElement("span", { className: bem.element('label') },
+            props.isLoading && (React.createElement(Icon_1["default"], { className: bem.element('loader'), name: 'loader', tabIndex: -1 })),
+            !props.isLoading && (React.createElement("span", { className: bem.element('label') },
                 props.icon && (React.createElement(Icon_1["default"], { name: props.icon, title: title, className: bem.element('icon', !props.label && 'without-label') })),
                 props.children))));
     };
     var renderBadge = function () {
-        if (!props.badge.enable) {
+        var _a;
+        if (!props.badge || !props.badge.enable) {
             return null;
         }
-        return (React.createElement("span", { className: bem('badge', props.badge.color && "badge-".concat(props.badge.color), bem.element('badge'), props.badge.className) }, props.badge.value));
+        return (React.createElement("span", { className: bem(bem.element('badge', (_a = {},
+                _a["".concat(props.badge.color)] = !!props.badge.color,
+                _a)), props.badge.className) }, props.badge.value));
     };
     var className = bem(bem.block((_a = {
             button: !props.link
@@ -61,14 +63,16 @@ function ButtonView(props) {
         _a.submitting = props.submitting,
         _a.loading = props.isLoading,
         _a.failed = props.isFailed,
-        _a.link = props.tag === 'a',
-        _a)), props.block && 'btn-block', props.link && 'btn-link', props.className);
+        _a.link = props.link,
+        _a.block = props.block,
+        _a["tag-".concat(props.tag)] = !!props.tag,
+        _a)), props.className);
     if (props.tag === 'a') {
         return (React.createElement("a", { className: className, href: props.url, onClick: props.onClick, style: props.style, target: props.target },
             renderLabel(),
             renderBadge()));
     }
-    return (React.createElement("button", { title: props.hint, type: props.type, disabled: props.disabled, onClick: props.onClick, style: props.style, className: className },
+    return (React.createElement("button", { title: props.hint, type: props.type, disabled: props.disabled || props.isLoading, onClick: props.onClick, style: props.style, className: className },
         renderLabel(),
         renderBadge()));
 }

package/form/Button/ButtonView.scss

@@ -1,96 +1,182 @@
-.ButtonView {
-  $root: &;
+$btn-font-weight-sm: 400;
+$btn-font-weight-lg: 800;
+$btn-line-height: 24px;
+$btn-letter-spacing: 0.1em;
 
-  transition-property: color, background-color, border-color, box-shadow;
-  transition-duration: .15s;
-  transition-timing-function: ease-in-out;
+.ButtonView {
+    $root: &;
 
-  &_button {
-    position: relative;
-    border-radius: $button-border-radius;
-    user-select: none;
-    border: $button-border;
+    transition-property: color, background-color, border-color, box-shadow;
+    transition-duration: 0.15s;
+    transition-timing-function: ease-in-out;
 
-    padding: $button-padding-y $button-padding-x;
     display: flex;
     justify-content: center;
     align-items: center;
 
-    font-weight: $button-font-weight;
-    font-size: $button-font-size;
+    &_button {
+        position: relative;
+        border-radius: $radius-small;
+        user-select: none;
+        border: 3px solid transparent;
+
+        padding: 0 20px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        font-family: $font-family-nunito;
+        font-weight: $btn-font-weight-sm;
+        font-size: $font-size-sm;
+        line-height: $btn-line-height;
+        outline: none;
+
+        @each $colorName, $colorMap in $color-themes {
+            &#{$root}_color_#{$colorName} {
+                @include button-theme($colorMap, $colorName, $root);
+            }
+        }
+
+        @each $colorName, $colorMap in $color-themes {
+            &#{$root}_outline_#{$colorName} {
+                @include button-outline-theme($colorMap, $colorName, $root);
+            }
+        }
+    }
 
-    @each $color, $value in $color-themes {
-      &#{$root}_color_#{$color} {
-        @include button-theme($value)
-      }
+    &__label {
+        display: flex;
+        justify-content: center;
+        align-items: center;
     }
 
-    @each $color, $value in $color-themes {
-      &#{$root}_outline_#{$color} {
-        @include button-outline-theme($value)
-      }
+    &_block {
+        display: block;
+        width: 100%;
+
+        #{$root}__label {
+            justify-content: center;
+        }
     }
 
-  }
 
-  &_disabled {
-    opacity: .5;
-    color: rgba(0, 0, 0, .25);
-    cursor: not-allowed;
-    input {
-      cursor: inherit;
+
+    &_tag { 
+        &-a { 
+            width: auto;
+        }
     }
-  }
 
-  &_size {
-    &_sm {
-      height: $button-height-sm;
-      font-size: $button-font-size-sm;
+    &_disabled {
+        opacity: 0.5;
+        color: rgba(0, 0, 0, 0.1);
+        cursor: not-allowed;
+
+        input {
+            cursor: inherit;
+        }
     }
-    &_md {
-      height: $button-height-md;
-      font-size: $button-font-size-md;
+
+    &_size {
+        &_sm {
+            height: 34px;
+            font-size: $font-size-sm;
+            border-radius: $radius-small;
+        }
+        &_md {
+            height: 46px;
+            font-size: $font-size-base;
+            border-radius: $radius-large;
+        }
+        &_lg {
+            height: 56px;
+            font-size: $font-size-lg;
+            border-radius: $radius-large;
+        }
     }
-    &_lg {
-      height: $button-height-lg;
-      font-size: $button-font-size-lg;
+
+    &_link {
+        display: inline;
+        width: auto;
+        height: auto;
+        #{$root}__label {
+            display: inline;
+            color: $link-color;
+        }
     }
-  }
 
-  &_link {
-    justify-content: flex-start;
-    background-color: transparent;
-  }
+    &__label {
+        display: flex;
+        flex-direction: row;
+        column-gap: 10px;
+    }
 
-  &__icon {
-    margin-right: 3px;
+    &__icon {
+        width: 16px;
+        height: 16px;
+        &_without-label {
+            margin: 0;
+        }
+    }
+
+    &_failed {
+        &,
+        &:hover {
+            border-color: $danger;
+            box-shadow: 0 0 1rem rgba($danger, 0.2);
+        }
+    }
+
+    &__preloader {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    &__badge {
+        position: relative;
+        top: -1px;
+        margin-left: 4px;
+        border-radius: $radius-small;
+        font-size: $font-size-xs;
+        line-height: 16px;
+        padding: 3px 5px;
+
+        $badge-types: (
+            "primary": $primary,
+            "secondary": $secondary,
+            "success": $success,
+            "danger": $danger,
+            "warning": $warning,
+            "info": $info,
+        );
+
+        @each $type, $color in $badge-types {
+            &_#{$type} {
+                background-color: $color;
+            }
+        }
+    }
 
-    &_without-label {
-      margin: 0;
+    &__loader {
+        width: 24px;
+        height: 24px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        svg {
+            width: 14px;
+            height: 14px;
+            transform-origin: center;
+            animation: rotate 1.45s linear infinite;
+        }
     }
-  }
+}
 
-  &_failed {
-    &, &:hover {
-      border-color: $danger;
-      box-shadow: 0 0 1rem rgba($danger, .2);
+@keyframes rotate {
+    100% {
+        transform: rotate(360deg);
     }
-  }
-
-  &_loading &__label {
-    opacity: 0;
-  }
-
-  &__preloader {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  &__badge {
-    position: relative;
-    top: -1px;
-    margin-left: 4px;
-  }
 }

package/form/CheckboxField/CheckboxFieldView.js

@@ -43,9 +43,12 @@ var useUniqueId_1 = __importDefault(require("@steroidsjs/core/hooks/useUniqueId"
 function CheckboxFieldView(props) {
     var bem = (0, hooks_1.useBem)('CheckboxFieldView');
     var id = (0, useUniqueId_1["default"])('checkbox');
-    return (React.createElement("div", { className: bem(bem.block({ 'is-invalid': !!props.errors }), 'custom-control', 'custom-checkbox') },
-        React.createElement("input", __assign({ className: bem(bem.element('input'), 'custom-control-input', !!props.errors && 'is-invalid', props.className), id: id }, props.inputProps, { disabled: props.disabled, required: props.required })),
-        React.createElement("label", { className: bem(bem.element('label'), 'custom-control-label'), htmlFor: id },
+    return (React.createElement("div", { className: bem(bem.block({
+            size: props.size,
+            hasErrors: !!props.errors
+        }), props.className), style: props.style, onClick: props.onChange },
+        React.createElement("input", __assign({ className: bem.element('input'), id: id }, props.inputProps, { disabled: props.disabled, required: props.required })),
+        React.createElement("label", { className: bem.element('label'), htmlFor: id },
             React.createElement("span", { className: bem.element('label-text', { required: props.required }) }, props.label))));
 }
 exports["default"] = CheckboxFieldView;