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

package/content/DropDown/DropDownView.scss

@@ -1,31 +1,63 @@
+@import "../../scss/variables/";
+
+:root {
+    --drop-down-background: #fff;
+
+    html[data-theme="dark"] {
+        --drop-down-background: #4e4f57;
+    }
+}
+
+$drop-down-background: var(--drop-down-background);
+
 $gap: 12px;
 
 .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);
-  }
+    z-index: 1000;
+    position: absolute;
+
+    transform: translate(0, 0);
+    opacity: 0;
+    transition: opacity 0.15s ease-in, transform 0.15s ease-in;
+
+    width: 200px;
+    padding: 12px;
+    border-radius: $radius-large;
+    background-color: $drop-down-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);
+    }
+
+    &::before {
+        content: "";
+        position: absolute;
+        left: -10px;
+        top: 50%;
+        transform: translateY(-50%);
+        border-top: 10px solid transparent;
+        border-bottom: 10px solid transparent;
+        border-right: 10px solid #fff;
+    }
 }

package/form/Button/ButtonView.js

@@ -38,16 +38,14 @@ 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' })),
+            !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) {
+        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));
     };
     var className = bem(bem.block((_a = {
@@ -59,7 +57,7 @@ function ButtonView(props) {
         _a.size = props.size,
         _a.disabled = props.disabled,
         _a.submitting = props.submitting,
-        _a.loading = props.isLoading,
+        _a.loading = !!props.isLoading,
         _a.failed = props.isFailed,
         _a.link = props.tag === 'a',
         _a)), props.block && 'btn-block', props.link && 'btn-link', props.className);
@@ -68,7 +66,7 @@ function ButtonView(props) {
             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,122 @@
+$btn-font-weight-sm: 400;
+$btn-font-weight-lg: 800;
+$btn-line-height: 24px;
+$btn-letter-spacing: 0.1em;
+
 .ButtonView {
-  $root: &;
-
-  transition-property: color, background-color, border-color, box-shadow;
-  transition-duration: .15s;
-  transition-timing-function: ease-in-out;
-
-  &_button {
-    position: relative;
-    border-radius: $button-border-radius;
-    user-select: none;
-    border: $button-border;
-
-    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;
-
-    @each $color, $value in $color-themes {
-      &#{$root}_color_#{$color} {
-        @include button-theme($value)
-      }
+    $root: &;
+
+    transition-property: color, background-color, border-color, box-shadow;
+    transition-duration: 0.15s;
+    transition-timing-function: ease-in-out;
+
+    width: 160px;
+
+    &_button {
+        position: relative;
+        border-radius: 8px;
+        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}_outline_#{$color} {
-        @include button-outline-theme($value)
-      }
+    &_disabled {
+        opacity: 0.5;
+        color: rgba(0, 0, 0, 0.25);
+        cursor: not-allowed;
+        input {
+            cursor: inherit;
+        }
     }
 
-  }
+    &_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;
+        }
+    }
 
-  &_disabled {
-    opacity: .5;
-    color: rgba(0, 0, 0, .25);
-    cursor: not-allowed;
-    input {
-      cursor: inherit;
+    &_link {
+        justify-content: center;
+        background-color: transparent;
     }
-  }
 
-  &_size {
-    &_sm {
-      height: $button-height-sm;
-      font-size: $button-font-size-sm;
+    &__icon {
+        &_without-label {
+            margin: 0;
+        }
     }
-    &_md {
-      height: $button-height-md;
-      font-size: $button-font-size-md;
+
+    &_failed {
+        &,
+        &:hover {
+            border-color: $danger;
+            box-shadow: 0 0 1rem rgba($danger, 0.2);
+        }
     }
-    &_lg {
-      height: $button-height-lg;
-      font-size: $button-font-size-lg;
+
+    &__preloader {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
     }
-  }
 
-  &_link {
-    justify-content: flex-start;
-    background-color: transparent;
-  }
+    &__badge {
+        position: relative;
+        top: -1px;
+        margin-left: 4px;
+    }
 
-  &__icon {
-    margin-right: 3px;
+    &__loader {
+        svg {
+            transform-origin: center;
+            animation: rotate 1.45s linear infinite;
+        }
+    }
 
-    &_without-label {
-      margin: 0;
+    &__label { 
+        display: flex;
+        flex-direction: row;
+        column-gap: 10px;
     }
-  }
+}
 
-  &_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,9 @@ 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: "".concat(bem.block(), " \n                 ").concat(bem(props.className), "\n                 ").concat(props.errors ? 'has-errors' : ''), style: props.style, onClick: props.onChange },
+        React.createElement("input", __assign({ className: bem(bem.element('input')), id: id }, props.inputProps, { disabled: props.disabled, required: props.required })),
+        React.createElement("label", { className: bem(bem.element('label')), htmlFor: id },
             React.createElement("span", { className: bem.element('label-text', { required: props.required }) }, props.label))));
 }
 exports["default"] = CheckboxFieldView;

package/form/CheckboxField/CheckboxFieldView.scss

@@ -1,46 +1,130 @@
 .CheckboxFieldView {
-  display: inline-block;
+    $root: &;
 
-  &__label {
-    &-text {
-      &_required:after {
-        display: inline-block;
-        content: '*';
-        color: $danger;
-        margin: 0 0 0 3px;
-      }
-    }
-  }
-  .custom-control-label {
-    &::before, &::after {
-      top: 0;
+    display: inline-block;
+
+    font-family: $font-family-nunito;
+
+    &__input + &__label {
+        display: inline-flex;
+        align-items: center;
+        user-select: none;
     }
-  }
-
-  .custom-control-input {
-    &:checked ~ .custom-control-label {
-      &::before {
-        border-color: $primary;
-        background: $primary;
-      }
-      &:hover {
+
+    &__label {
+        position: relative;
+        cursor: pointer;
+
+        //Сам кастомный checkbox
         &::before {
-          background: $primary-dark;
+            content: "";
+            display: inline-block;
+            width: 24px;
+            height: 24px;
+            flex-shrink: 0;
+            flex-grow: 0;
+
+            border: 1px solid $gray;
+            border-radius: $radius-small;
+            margin-right: 8px;
+
+            background-repeat: no-repeat;
+            background-position: center center;
+            background-size: 50% 50%;
         }
-      }
-      &:active {
-        &::before {
-          background: $primary-light;
+
+        //Псевдоэлемент который служит для применения эффектов на чекбокс
+        &::after {
+            content: "";
+            display: inline-block;
+            position: absolute;
+            transform: translateX(-7.5%);
+
+            width: 28px;
+            height: 28px;
+            flex-shrink: 0;
+            flex-grow: 0;
+
+            border-radius: $radius-small;
+            border: 4px solid $primary-light;
+            opacity: 0;
+
+            background: transparent;
+        }
+
+        &-text {
+            color: $text-color;
+            font-size: $font-size-sm;
+            font-weight: $font-weight-md;
         }
-      }
     }
-    &:disabled ~ .custom-control-label {
-      color: $border-default;
 
-      &::before {
-        border: unset;
-        background-color: $back-disabled;
-      }
+    &__input {
+        position: absolute;
+        z-index: -1;
+        opacity: 0;
+
+        //HOVER
+        &:not(:disabled):not(:checked):not(:active) + #{$root}__label:hover::before {
+            border-color: #d0d0d0;
+        }
+
+        //ACTIVE
+        &:not(:disabled):not(:checked):active + #{$root}__label::before {
+            border-color: $primary;
+        }
+
+        &:active:checked + #{$root}__label::after {
+            opacity: 0;
+        }
+
+        &:checked:active + #{$root}__label::before {
+            background-color: $primary-light;
+            border: none;
+        }
+
+        //FOCUS
+        &:focus + #{$root}__label::after {
+            opacity: 1;
+        }
+
+        //CHECKED
+        &:checked + #{$root}__label::before {
+            border-color: $primary;
+            background-color: $primary;
+            background-image: url("data:image/svg+xml,%3Csvg width='11' height='8' viewBox='0 0 11 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.20898 1L3.70898 7L1.20898 4.27273' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+        }
+
+        //DISABLED
+        &:disabled + #{$root}__label {
+            cursor: not-allowed;
+            color: $gray;
+
+            span {
+                color: currentColor;
+            }
+
+            &::before {
+                background: currentColor;
+                border: none;
+            }
+        }
+
+        &:disabled:checked #{$root}__label::before {
+            background-color: $gray;
+            border-color: none;
+            background-image: url("data:image/svg+xml,%3Csvg width='11' height='9' viewBox='0 0 11 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.8584 1.48401L4.3584 7.48401L1.8584 4.75674' stroke='black' stroke-opacity='0.1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+        }
+
+        //ERROR
+    }
+}
+.has-errors label {
+    &::before {
+        border-color: $danger;
+    }
+
+    span {
+        color: $danger;
     }
-  }
 }

package/icons/{fontawesome.js → index.js}

@@ -248,6 +248,9 @@ exports["default"] = (function () {
         'error',
         'close',
         'default',
+        'badge-close',
+        'loader',
+        'accordion-chevron',
     ];
     steroidsIcons.forEach(function (iconName) {
         icons[iconName] = require("./svgs/".concat(iconName, ".svg"));

package/icons/svgs/accordion-chevron.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" rx="8" fill="white"/>
+<path d="M7.75829 10.9995L12.0009 15.2422L16.2426 11.0005" stroke="#323232" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/badge-close.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.28906 6.5L10.2891 10.4856M6.28906 10.5L10.2891 6.51441" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/close.svg

@@ -0,0 +1,4 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.246094" y="0.5" width="16" height="16" rx="8" fill="#323232"/>
+<path d="M5.24609 5.5L11.2461 11.4784M5.24609 11.5L11.2461 5.52161" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/default.svg

@@ -0,0 +1,11 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_126_1078)">
+<circle cx="12.7461" cy="12" r="12" fill="#E1E1E1"/>
+<path d="M15.7791 8.73626H15.7131M17.7571 8.73626L18.7461 9.1978L17.7571 9.65934M14.6582 11.5055C14.6582 12.6264 13.801 13.4835 12.6802 13.4835C11.5593 13.4835 8.52631 13.4835 6.74609 13.4835M15.3175 6.75824C16.5703 6.75824 17.6252 7.81318 17.6252 9.13187C17.6252 9.85714 17.2955 10.5824 16.7681 10.978C17.2955 11.6374 17.6252 12.4945 17.6252 13.4176C17.6252 15.5275 15.9769 17.2418 13.9329 17.2418C11.889 17.2418 10.0428 15.3297 8.39445 13.4176C9.64719 11.6374 13.5373 6.75824 15.3175 6.75824Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_126_1078">
+<rect width="24" height="24" fill="white" transform="translate(0.746094)"/>
+</clipPath>
+</defs>
+</svg>

package/icons/svgs/error.svg

@@ -0,0 +1,12 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_126_1073)">
+<path d="M12.746 24C11.9983 24 11.2394 23.8103 10.5698 23.4197L3.94064 19.5917C2.60142 18.8105 1.7644 17.3708 1.7644 15.8196V8.186C1.7644 6.63474 2.60142 5.19507 3.94064 4.41386L10.5698 0.58591C11.909 -0.195303 13.5719 -0.195303 14.9223 0.58591L21.5514 4.41386C22.8907 5.19507 23.7277 6.63474 23.7277 8.186V15.8196C23.7277 17.3708 22.8907 18.8105 21.5514 19.5917L14.9223 23.4197C14.2527 23.8103 13.4938 24 12.746 24Z" fill="#FB4E4E"/>
+<circle cx="12.7461" cy="16.75" r="0.75" fill="white"/>
+<line x1="12.7461" y1="7.25" x2="12.7461" y2="13.75" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_126_1073">
+<rect width="24" height="24" fill="white" transform="translate(0.746094)"/>
+</clipPath>
+</defs>
+</svg>

package/icons/svgs/info.svg

@@ -0,0 +1,12 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_126_1063)">
+<circle cx="12.7461" cy="12" r="12" fill="#A7EFFF"/>
+<circle cx="12.7461" cy="7.25" r="0.75" transform="rotate(-180 12.7461 7.25)" fill="white"/>
+<line x1="12.7461" y1="16.75" x2="12.7461" y2="10.25" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_126_1063">
+<rect width="24" height="24" fill="white" transform="translate(0.746094)"/>
+</clipPath>
+</defs>
+</svg>

package/icons/svgs/loader.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.07051 1.00041C5.8839 0.986525 4.71983 1.32482 3.72548 1.97252C2.73114 2.62022 1.9512 3.54823 1.48427 4.63919C1.01735 5.73016 0.884422 6.93509 1.1023 8.1016C1.32018 9.26812 1.87907 10.3438 2.70831 11.1927C3.53755 12.0416 4.59989 12.6255 5.76098 12.8706C6.92208 13.1157 8.12979 13.011 9.23139 12.5698C10.333 12.1285 11.279 11.3705 11.9498 10.3916C12.6206 9.41265 12.986 8.25681 12.9999 7.07021" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/success.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" rx="12" fill="#2BC945"/>
+<path d="M16.5 9L10.3125 15L7.5 12.2727" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/svgs/warning.svg

@@ -0,0 +1,12 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_126_1068)">
+<path d="M10.148 3C11.3027 0.999997 14.1895 1 15.3442 3L24.0044 18C25.1591 20 23.7157 22.5 21.4063 22.5H4.08584C1.77644 22.5 0.333063 20 1.48776 18L10.148 3Z" fill="#FFE457"/>
+<circle cx="12.7461" cy="16.75" r="0.75" fill="white"/>
+<line x1="12.7461" y1="7.25" x2="12.7461" y2="13.75" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_126_1068">
+<rect width="24" height="24" fill="white" transform="translate(0.746094)"/>
+</clipPath>
+</defs>
+</svg>

package/index.d.ts

@@ -35,10 +35,10 @@ declare const _default: {
     'content.CardView': {
         lazy: () => any;
     };
-    'content.CollapseView': {
+    'content.AccordionView': {
         lazy: () => any;
     };
-    'content.CollapseItemView': {
+    'content.AccordionItemView': {
         lazy: () => any;
     };
     'form.CheckboxFieldView': {

package/index.js

@@ -38,11 +38,11 @@ exports["default"] = {
     'content.CardView': {
         lazy: function () { return require('./content/Card/CardView')["default"]; }
     },
-    'content.CollapseView': {
-        lazy: function () { return require('./content/Collapse/CollapseView')["default"]; }
+    'content.AccordionView': {
+        lazy: function () { return require('./content/Accordion/AccordionView')["default"]; }
     },
-    'content.CollapseItemView': {
-        lazy: function () { return require('./content/Collapse/CollapseItemView')["default"]; }
+    'content.AccordionItemView': {
+        lazy: function () { return require('./content/Accordion/AccordionItemView')["default"]; }
     },
     'form.CheckboxFieldView': {
         lazy: function () { return require('./form/CheckboxField/CheckboxFieldView')["default"]; }

package/index.scss

@@ -9,8 +9,8 @@
 @import './content/Calendar/CalendarView';
 @import './content/Calendar/CaptionElement';
 @import './content/Card/CardView';
-@import './content/Collapse/CollapseView';
-@import './content/Collapse/CollapseItemView';
+@import './content/Accordion/AccordionView';
+@import './content/Accordion/AccordionItemView';
 @import './content/Detail/DetailView';
 @import './form/AutoCompleteField/AutoCompleteFieldView';
 @import './form/Button/ButtonView';
@@ -39,7 +39,6 @@
 @import './form/TextField/TextFieldView';
 @import './form/TimeField/TimeFieldView';
 @import './form/TimeField/TimePanelView';
-@import './content/Icon/IconView';
 @import './layout/Header/HeaderView';
 @import './layout/Tooltip/TooltipView';
 @import './layout/Notifications/NotificationsView';