@steroidsjs/bootstrap 3.0.0-beta.59 → 3.0.0-beta.60

package/index.d.ts

@@ -230,6 +230,9 @@ declare const _default: {
     'nav.TreeView': {
         lazy: () => any;
     };
+    'nav.ButtonGroupView': {
+        lazy: () => any;
+    };
     'typography.TextView': {
         lazy: () => any;
     };

package/index.js

@@ -233,6 +233,9 @@ exports["default"] = {
     'nav.TreeView': {
         lazy: function () { return require('./nav/Tree/TreeView')["default"]; }
     },
+    'nav.ButtonGroupView': {
+        lazy: function () { return require('./nav/ButtonGroup/ButtonGroupView')["default"]; }
+    },
     'typography.TextView': {
         lazy: function () { return require('./typography/Text/TextView')["default"]; }
     },

package/index.scss

@@ -77,5 +77,6 @@
 @import './nav/Nav/NavListView';
 @import './nav/Nav/NavTabsView';
 @import './nav/Tree/TreeView';
+@import './nav/ButtonGroup/ButtonGroupView';
 @import './typography/Text/TextView';
 @import './typography/Title/TitleView';

package/nav/ButtonGroup/ButtonGroupView.d.ts

@@ -0,0 +1,2 @@
+import { IButtonGroupViewProps } from '@steroidsjs/core/ui/nav/ButtonGroup/ButtonGroup';
+export default function ButtonGroupView(props: IButtonGroupViewProps): JSX.Element;

package/nav/ButtonGroup/ButtonGroupView.js

@@ -0,0 +1,32 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var hooks_1 = require("@steroidsjs/core/hooks");
+var form_1 = require("@steroidsjs/core/ui/form");
+function ButtonGroupView(props) {
+    var bem = (0, hooks_1.useBem)('ButtonGroupView');
+    return (react_1["default"].createElement("div", { className: bem(bem.block({
+            size: props.size
+        }), props.className), style: props.style }, props.items.map(function (item, index) {
+        var isActive = props.activeButton === item.id;
+        return (react_1["default"].createElement(form_1.Button, __assign({ key: index, className: bem.element('button', {
+                "default": !isActive,
+                active: isActive
+            }), label: item.label, onClick: function () { return props.onClick(item.id); } }, props.buttonProps)));
+    })));
+}
+exports["default"] = ButtonGroupView;

package/nav/ButtonGroup/ButtonGroupView.scss

@@ -0,0 +1,83 @@
+@import "../../scss/variables/";
+
+:root {
+    --button-group-background: #DBE2E6;
+    --button-group-separator-color: #CBD5DB;
+}
+
+html[data-theme="dark"] {
+    --button-group-background: #333646;
+    --button-group-separator-color: #ADAAB3;
+}
+
+$button-group-background: var(--button-group-background);
+$button-group-separator-color: var(--button-group-separator-color);
+
+.ButtonGroupView {
+  display: flex;
+  padding: 4px;
+  width: fit-content;
+  background-color: $button-group-background;
+
+  $sizes: () !default;
+  $sizes: map-merge(
+      (
+          "lg": (
+              "border-radius": 16px,
+          ),
+          "md": (
+              "border-radius": 16px,
+          ),
+          "sm": (
+              "border-radius": 12px,
+          ),
+      ),
+      $sizes
+  );
+
+  &_size {
+      @each $size, $sizeMap in $sizes {
+          &_#{$size} {
+              border-radius: map-get($sizeMap, border-radius);
+          }
+      }
+  }
+
+  &__button {
+    &_default {
+      background-color: transparent;
+      border-color: transparent;
+      color: $text-color;
+      transition: opacity $transition-duration ease-in-out;
+
+      &:hover {
+        background-color: transparent;
+        border-color: transparent;
+        color: $text-color;
+        opacity: 0.7;
+      }
+
+      &:active {
+        box-shadow: none;
+      }
+
+      &:not(:first-child) {
+        &::after {
+          content: '';
+          display: block;
+          position: absolute;
+          top: 50%;
+          left: 0;
+          transform: translateY(-50%);
+          width: 1px;
+          height: 12px;
+          background-color: $button-group-separator-color;
+        }
+      }
+    }
+
+    &_active + &_default::after {
+      display: none;
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.0-beta.59",
+    "version": "3.0.0-beta.60",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -35,7 +35,7 @@
         "react-use": "^17.4.0"
     },
     "devDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.40",
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.42",
         "@steroidsjs/eslint-config": "^2.1.4",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",
@@ -53,6 +53,6 @@
         "typescript": "^4.9.5"
     },
     "peerDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.40"
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.42"
     }
 }

package/scss/mixins/button.scss

@@ -15,7 +15,7 @@
     }
     &:focus,
     &:focus-visible {
-        border: 4px solid map-get($colorMap, color-light);
+        box-shadow: 0 0 0 4px map-get($colorMap, color-light), 0 0 0 4px map-get($colorMap, color-light);
     }
     &:active {
         background-color: map-get($colorMap, color-light);