orcs-design-system 3.1.14 → 3.1.15

package/es/components/ButtonGroup/ButtonGroup.stories.js

@@ -3,17 +3,15 @@ import Box from "../Box";
 import { ButtonGroupContainer, ButtonGroupItem } from ".";
 export default {
   title: "Components/ButtonGroup",
-  decorators: [function (storyFn) {
-    return /*#__PURE__*/React.createElement(Box, {
-      bg: "greyDark",
-      p: "r"
-    }, storyFn());
-  }],
   component: ButtonGroupContainer
 };
 export var defaultButtonGroup = function defaultButtonGroup() {
-  return /*#__PURE__*/React.createElement(ButtonGroupContainer, {
-    controlLabel: "View:"
+  return /*#__PURE__*/React.createElement(Box, {
+    bg: "white",
+    p: "r"
+  }, /*#__PURE__*/React.createElement(ButtonGroupContainer, {
+    controlLabel: "View:",
+    labelDark: true
   }, /*#__PURE__*/React.createElement(ButtonGroupItem, {
     name: "viewMode",
     label: "Chapters",
@@ -27,13 +25,42 @@ export var defaultButtonGroup = function defaultButtonGroup() {
     name: "viewMode",
     label: "Constraints",
     value: "Constraints view"
-  }));
+  })));
 };
 defaultButtonGroup.story = {
   name: "Default button group"
 };
+export var invertedButtonGroup = function invertedButtonGroup() {
+  return /*#__PURE__*/React.createElement(Box, {
+    bg: "greyDark",
+    p: "r"
+  }, /*#__PURE__*/React.createElement(ButtonGroupContainer, {
+    controlLabel: "View:"
+  }, /*#__PURE__*/React.createElement(ButtonGroupItem, {
+    name: "viewMode",
+    label: "Chapters",
+    value: "Chapters view"
+  }), /*#__PURE__*/React.createElement(ButtonGroupItem, {
+    name: "viewMode",
+    label: "Groups",
+    value: "Groups view",
+    checked: true
+  }), /*#__PURE__*/React.createElement(ButtonGroupItem, {
+    name: "viewMode",
+    label: "Constraints",
+    value: "Constraints view"
+  })));
+};
+invertedButtonGroup.story = {
+  name: "Inverted button group"
+};
 defaultButtonGroup.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "defaultButtonGroup"
+};
+invertedButtonGroup.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "invertedButtonGroup"
 };

package/es/components/ButtonGroup/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "theme", "controlLabel"];
+var _excluded = ["children", "theme", "controlLabel", "labelDark"];
 import PropTypes from "prop-types";
 import React from "react";
 import styled, { ThemeProvider } from "styled-components";
@@ -12,7 +12,7 @@ var ButtonGroupControlLabel = styled("div").withConfig({
   componentId: "sc-g7627n-0"
 })(function (props) {
   return css({
-    color: themeGet("colors.white")(props),
+    color: props.labelDark ? themeGet("colors.greyDark") : themeGet("colors.white")(props),
     fontSize: themeGet("fontSizes.1")(props),
     fontWeight: themeGet("fontWeights.1")(props),
     marginRight: themeGet("space.3")(props)
@@ -27,7 +27,8 @@ var ButtonGroupWrapper = styled("div").withConfig({
     alignItems: "center",
     background: themeGet("colors.greyDarker")(props),
     borderRadius: themeGet("radii.2")(props),
-    padding: "2px"
+    padding: "4px",
+    height: themeGet("appScale.inputHeightDefault")(props)
   });
 });
 var ButtonGroupRadio = styled.input.attrs({
@@ -62,10 +63,9 @@ var ButtonGroupLabel = styled("label").withConfig({
   return css({
     height: "100%",
     borderRadius: themeGet("radii.2")(props),
-    margin: "2px",
     display: "flex",
     alignItems: "center",
-    padding: "".concat(themeGet("space.1")(props), " ").concat(themeGet("space.3")(props)),
+    padding: "0 ".concat(themeGet("space.3")(props)),
     transition: themeGet("transition.transitionDefault")(props),
     fontSize: themeGet("fontSizes.1")(props),
     fontWeight: themeGet("fontWeights.2")(props),
@@ -74,6 +74,9 @@ var ButtonGroupLabel = styled("label").withConfig({
     backgroundColor: props.checked ? themeGet("colors.white")(props) : "#5e686d",
     "&:hover": {
       backgroundColor: props.checked ? themeGet("colors.white")(props) : themeGet("colors.primary")(props)
+    },
+    "&:not(:last-of-type)": {
+      marginRight: "4px"
     }
   });
 });
@@ -84,10 +87,13 @@ export var ButtonGroupContainer = function ButtonGroupContainer(_ref) {
   var children = _ref.children,
     theme = _ref.theme,
     controlLabel = _ref.controlLabel,
+    labelDark = _ref.labelDark,
     props = _objectWithoutProperties(_ref, _excluded);
   var component = /*#__PURE__*/React.createElement(Flex, _extends({
     alignItems: "center"
-  }, props), controlLabel && /*#__PURE__*/React.createElement(ButtonGroupControlLabel, null, controlLabel), /*#__PURE__*/React.createElement(ButtonGroupWrapper, null, children));
+  }, props), controlLabel && /*#__PURE__*/React.createElement(ButtonGroupControlLabel, {
+    labelDark: labelDark
+  }, controlLabel), /*#__PURE__*/React.createElement(ButtonGroupWrapper, null, children));
   return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme
   }, component) : component;
@@ -116,6 +122,7 @@ export var ButtonGroupItem = function ButtonGroupItem(_ref2) {
 ButtonGroupContainer.propTypes = {
   children: PropTypes.node,
   controlLabel: PropTypes.string,
+  labelDark: PropTypes.bool,
   theme: PropTypes.object
 };
 ButtonGroupItem.propTypes = {
@@ -145,6 +152,13 @@ ButtonGroupContainer.__docgenInfo = {
       },
       "required": false
     },
+    "labelDark": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
     "theme": {
       "description": "",
       "type": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.1.14",
+  "version": "3.1.15",
   "engines": {
     "node": "18.17.1"
   },