@steroidsjs/bootstrap 3.0.0-beta.71 → 3.0.0-beta.73

package/content/Card/CardView.js

@@ -18,8 +18,8 @@ var react_1 = __importDefault(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 var form_1 = require("@steroidsjs/core/ui/form");
 var Avatar_1 = __importDefault(require("@steroidsjs/core/ui/content/Avatar/Avatar"));
-var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 var nav_1 = require("@steroidsjs/core/ui/nav");
+var content_1 = require("@steroidsjs/core/ui/content");
 function CardView(props) {
     var bem = (0, hooks_1.useBem)('CardView');
     var hasContent = !!(props.title || props.buttons || props.links || props.description || props.children);
@@ -33,7 +33,7 @@ function CardView(props) {
                     react_1["default"].createElement("h3", { className: bem.element('header-head') }, props.header.head),
                     react_1["default"].createElement("p", { className: bem.element('header-subhead') }, props.header.subhead))),
             props.header.menu && (react_1["default"].createElement("div", { className: bem.element('header-menu'), role: 'button' },
-                react_1["default"].createElement(Icon_1["default"], { name: 'menu_dots', className: bem.element('header-dots') }))))),
+                react_1["default"].createElement(content_1.Menu, __assign({}, props.header.menu)))))),
         props.cover && (react_1["default"].createElement("div", { className: bem.element('cover') },
             react_1["default"].createElement("img", { src: props.cover, alt: 'Card cover img' }))),
         hasContent && (react_1["default"].createElement("div", { className: bem.element('content') },

package/content/Card/CardView.scss

@@ -1,16 +1,13 @@
 :root {
-    --card-background-color: $white;
     --card-footer-background-color: var(--additional-light-blue);
     --card-dots-color: #323232;
 }
 
 html[data-theme="dark"] {
-    --card-background-color: var(--graphite);
     --card-footer-background-color: var(--gray-dark);
     --card-dots-color: #ffffff;
 }
 
-$card-background-color: var(--card-background-color);
 $card-footer-background-color: var(--card-footer-background-color);
 $card-dots-color: var(--card-dots-color);
 
@@ -45,7 +42,7 @@ $card-dots-color: var(--card-dots-color);
     border: 1px solid $element-border-color;
     border-radius: $radius-large;
     color: $text-color;
-    background-color: $card-background-color;
+    background-color: $element-background-color;
 
     &__header {
         display: flex;
@@ -55,7 +52,7 @@ $card-dots-color: var(--card-dots-color);
         padding: 18px;
         padding-bottom: 20px;
 
-        &_withoutCover { 
+        &_withoutCover {
             padding-bottom: 3px;
         }
 
@@ -66,7 +63,7 @@ $card-dots-color: var(--card-dots-color);
             column-gap: 8px;
         }
 
-        &-avatar { 
+        &-avatar {
             margin-right: 2px;
         }
 
@@ -88,22 +85,22 @@ $card-dots-color: var(--card-dots-color);
             justify-content: center;
             align-items: center;
             cursor: pointer;
-        }
 
-        &-dots {
-            width: 24px;
-            height: 24px;
+            .MenuView__icon {
+                width: 24px;
+                height: 24px;
 
-            display: flex;
-            justify-content: center;
-            align-items: center;
+                display: flex;
+                justify-content: center;
+                align-items: center;
 
-            rect {
-                fill: $card-dots-color;
-            }
+                rect {
+                    fill: $card-dots-color;
+                }
 
-            svg {
-                transform: translateX(5px);
+                svg {
+                    transform: translateX(5px);
+                }
             }
         }
     }
@@ -149,11 +146,11 @@ $card-dots-color: var(--card-dots-color);
         row-gap: 8px;
         column-gap: $columnGap;
 
-        button:only-of-type { 
+        button:only-of-type {
             width: 100%;
         }
 
-        button:not(:only-of-type) { 
+        button:not(:only-of-type) {
             width: calc(50% - $columnGap / 2);
         }
     }

package/form/InputField/InputFieldView.js

@@ -51,7 +51,7 @@ function InputFieldView(props) {
             hasError: !!props.errors,
             hasLeadIcon: !!props.leadIcon,
             hasClearIcon: props.showClear && !props.disabled,
-            filled: !!props.inputProps.value,
+            filled: !!props.input.value,
             hasAddonAfter: !!props.addonAfter,
             hasAddonBefore: !!props.addonBefore,
             hasAddon: !!props.addonAfter || !!props.addonBefore,
@@ -72,7 +72,7 @@ function InputFieldView(props) {
                     })) }, props.inputProps, { onInput: function (e) { return props.inputProps.onChange(e.currentTarget.value); }, type: props.type, placeholder: props.placeholder, disabled: props.disabled, required: props.required, id: props.id, ref: props.maskedInputRef })))
                 : (React.createElement("input", __assign({ className: bem(bem.element('input', {
                         size: props.size
-                    })) }, props.inputProps, { onChange: function (e) { return props.input.onChange(e.target.value); }, type: props.type, placeholder: props.placeholder, disabled: props.disabled, required: props.required, id: props.id }))),
+                    })) }, props.inputProps, { onChange: function (e) { return props.inputProps.onChange(e.target.value); }, type: props.type, placeholder: props.placeholder, disabled: props.disabled, required: props.required, id: props.id }))),
             !props.disabled && props.showClear && !props.maskProps && (React.createElement(Icon_1["default"], { name: "cross_8x8", className: bem.element('icon-clear'), tabIndex: -1, onClick: props.onClear }))),
         props.textAfter && (React.createElement("span", { className: bem.element('text-after') }, props.textAfter)),
         props.addonAfter && (React.createElement("span", { className: bem.element('addon-after') }, props.addonAfter))));

package/form/RateField/RateFieldView.js

@@ -26,20 +26,27 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 function RateFieldView(props) {
+    var _a;
     var bem = (0, hooks_1.useBem)('RateFieldView');
-    return (React.createElement("div", { className: bem(bem.block(), props.className) }, props.items.map(function (item, index) { return (React.createElement("div", { key: index, className: bem.element('rate-item', {
-            'is-full': item.value <= props.inputProps.value
-        }), onClick: function (e) {
-            e.preventDefault();
-            props.onItemClick(item);
-        } },
-        React.createElement("span", { className: bem.element('rate-value-first') },
-            React.createElement(Icon_1["default"], { className: bem.element('rate-icon'), name: 'star' })),
-        React.createElement("span", { className: bem.element('rate-value-second') },
-            React.createElement(Icon_1["default"], { className: bem.element('rate-icon'), name: 'star' })))); })));
+    return (React.createElement("div", { className: bem(bem.block({
+            size: props.size,
+            disabled: props.disabled
+        }), props.className), style: props.style },
+        React.createElement("ul", { className: bem.element('rate-list') }, props.items.map(function (item, index) { return (React.createElement("div", { key: index, className: bem.element('rate-item', {
+                'is-full': item.value <= props.inputProps.value
+            }), onClick: function (e) {
+                e.preventDefault();
+                props.onItemClick(item);
+            } },
+            React.createElement("span", { className: bem.element('rate-value-first') },
+                React.createElement(Icon_1["default"], { className: bem.element('rate-icon'), name: 'star' })),
+            React.createElement("span", { className: bem.element('rate-value-second') },
+                React.createElement(Icon_1["default"], { className: bem.element('rate-icon'), name: 'star' })))); })),
+        props.badge && (React.createElement("span", { className: bem.element('badge') }, (_a = props.badge) === null || _a === void 0 ? void 0 : _a.title))));
 }
 exports["default"] = RateFieldView;

package/form/RateField/RateFieldView.scss

@@ -1,57 +1,130 @@
-@import '../../scss/variables';
+$ratefield-sizes: () !default;
+$ratefield-sizes: map-merge(
+    (
+        "sm": (
+            "size": 18px,
+            "badge-gap": 8px,
+            "badge-paddings": 1px 8px,
+            "badge-radius": 6px,
+        ),
+        "md": (
+            "size": 22px,
+            "badge-gap": 12px,
+            "badge-paddings": 3px 8px,
+            "badge-radius": 6px,
+        ),
+        "lg": (
+            "size": 24px,
+            "badge-gap": 16px,
+            "badge-paddings": 4px 8px,
+            "badge-radius": $radius-small,
+        ),
+    ),
+    $ratefield-sizes
+);
 
 .RateFieldView {
+    $root: &;
 
-  $root: &;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
 
-  &:focus, & *:focus {
-    outline: none!important;
-  }
+    &:focus,
+    & *:focus {
+        outline: none !important;
+    }
 
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
+    &__rate-list {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        column-gap: 2px;
+    }
 
-  &__rate-item {
-    cursor: pointer;
-    position: relative;
-    margin-right: 10px;
-    line-height: 0;
+    &__rate-item {
+        cursor: pointer;
+        position: relative;
+        line-height: 0;
 
-    &_is-full{
-      #{$root}__rate-value-second {
-        width: 100%;
+        &_is-full {
+            #{$root}__rate-value-second {
+                width: 100%;
 
-        #{$root}__rate-icon {
-          path {
-            fill: $icon-color;
-          }
+                #{$root}__rate-icon {
+                    path {
+                        fill: $primary;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 
-  &__rate-value-first, &__rate-value-second {
-    display: inline-block;
-    width: $icon-size;
-    height: $icon-size;
-  }
+    &__rate-value-first,
+    &__rate-value-second {
+        display: inline-block;
+    }
 
-  &__rate-value-second {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 0;
-  }
+    &__rate-value-second {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 0;
+    }
 
-  &__rate-icon {
-    &.IconView svg {
-      width: $icon-size;
+    &__rate-icon {
+        &.IconView svg {
+            path {
+                fill: $gray;
+            }
+        }
+    }
 
-      path {
-        fill: $gray-dark;
-      }
+    &__badge {
+        display: block;
+        background-color: $primary;
+        color: $white;
+        font-size: $font-size-xs;
+        line-height: $line-height-xs;
     }
-  }
 
-}
+    &_size {
+        @each $size, $sizeMap in $ratefield-sizes {
+            &_#{$size} {
+                #{$root}__rate-icon {
+                    &.IconView svg {
+                        width: map-get($sizeMap, size);
+                        height: map-get($sizeMap, size);
+                    }
+                }
+
+                #{$root}__rate-value-first,
+                #{$root}__rate-value-second {
+                    width: map-get($sizeMap, size);
+                    height: map-get($sizeMap, size);
+                }
+
+                #{$root}__badge {
+                    margin-left: map-get($sizeMap, badge-gap);
+                    padding: map-get($sizeMap, badge-paddings);
+                    border-radius: map-get($sizeMap, badge-radius);
+                }
+            }
+        }
+    }
+
+    &_disabled {
+        cursor: not-allowed;
+
+        #{$root}__rate-item {
+            pointer-events: none;
+        }
+        #{$root}__rate-icon {
+            &.IconView svg {
+                path {
+                    fill: $light-gray;
+                }
+            }
+        }
+    }
+}

package/form/ReCaptchaField/ReCaptchaFieldView.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -22,19 +33,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
-var nav_1 = require("@steroidsjs/core/ui/nav");
+var react_google_recaptcha_1 = __importDefault(require("react-google-recaptcha"));
 function ReCaptchaFieldView(props) {
     var bem = (0, hooks_1.useBem)('ReCaptchaFieldView');
-    return (React.createElement("div", { className: bem.block() },
-        React.createElement("small", { className: 'text-muted' },
-            __('This site is protected by reCAPTCHA and the Google') + ' ',
-            React.createElement(nav_1.Link, { url: 'https://policies.google.com/privacy', target: '_blank', label: __('Privacy Policy') }),
-            ' ' + __('and') + ' ',
-            React.createElement(nav_1.Link, { url: 'https://policies.google.com/terms', target: '_blank', label: __('Terms of Service') }),
-            ' ' + __('apply'),
-            ".")));
+    var theme = (0, hooks_1.useTheme)().theme;
+    return (React.createElement("div", { className: bem(bem.block(), props.className), style: props.style },
+        React.createElement(react_google_recaptcha_1["default"], __assign({}, props.recaptchaOptions, { theme: theme }))));
 }
 exports["default"] = ReCaptchaFieldView;

package/form/ReCaptchaField/ReCaptchaFieldView.scss

@@ -1,5 +1,3 @@
-.ReCaptchaFieldView {}
+@import "../../scss/variables";
 
-.grecaptcha-badge {
-  visibility: hidden;
-}
+.ReCaptchaFieldView {}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.0-beta.71",
+    "version": "3.0.0-beta.73",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -29,13 +29,14 @@
         "react-collapse": "^5.0.1",
         "react-day-picker": "^7.4.10",
         "react-dom": "^18.2.0",
+        "react-google-recaptcha": "^3.1.0",
         "react-image-crop": "^9.0.2",
         "react-modal": "^3.11.2",
         "react-transition-group": "^2.9.0",
         "react-use": "^17.4.0"
     },
     "devDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.49",
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.52",
         "@steroidsjs/eslint-config": "^2.1.4",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",
@@ -53,6 +54,6 @@
         "typescript": "^4.9.5"
     },
     "peerDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.47"
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.52"
     }
 }