@spothero/ui 21.1.0 → 21.1.1-beta.0

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = require("@chakra-ui/react");
+var _react2 = _interopRequireWildcard(require("react"));
+var _styles = require("./styles");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/**
+ * @example (
+ * <ToggleButton onChange={handleChangeValue} value={value}>
+ *  <Button value={value1}>label1</Button>
+ *  <Button value={value2}>label2</Button>
+ * </ToggleButton>
+ * )
+ * @note
+ * must have multiple child elements
+ */
+// const ToggleButtonGroup = forwardRef(({onChange, value, children, groupProps}, ref) => {
+const ToggleButtonGroup = /*#__PURE__*/(0, _react2.forwardRef)((props, ref) => {
+  const {
+    onChange,
+    value,
+    children,
+    groupProps
+  } = props;
+  if (!children) throw new Error('Children required');
+
+  // iterate over array of child nodes to apply extended props
+  return /*#__PURE__*/_react2.default.createElement(_react.ButtonGroup, (0, _extends2.default)({
+    ref: ref,
+    sx: {
+      ..._styles.buttonGroupStyles
+    }
+  }, groupProps), _react2.default.Children.map(children, CHILD => {
+    return /*#__PURE__*/_react2.default.cloneElement(CHILD, {
+      onClick: () => {
+        if (value === CHILD?.props?.value) return;
+        onChange(CHILD?.props?.value);
+      },
+      ...(value !== CHILD?.props?.value ? {
+        sx: {
+          ..._styles.defaultStyles,
+          ..._styles.inactiveStyles
+        }
+      } : {
+        sx: {
+          ..._styles.defaultStyles,
+          ..._styles.activeStyles
+        }
+      })
+    });
+  }));
+});
+var _default = ToggleButtonGroup;
+exports.default = _default;

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.stories.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ToggleButtonGroup = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@chakra-ui/react");
+var _Button = require("../Button");
+var _ToggleButtonGroup = _interopRequireDefault(require("./ToggleButtonGroup"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _default = {
+  title: 'v2/ToggleButtonGroup',
+  displayName: 'ToggleButtonGroup',
+  component: _ToggleButtonGroup.default,
+  parameters: {
+    removeBaseHtmlClass: true
+  }
+};
+/*
+    Storybook's background is white so the ToggleButtonGroup is hard to see.
+    The ToggleButtonGroup is typically displayed against a light green background.
+*/
+exports.default = _default;
+const Template = props => {
+  const [toggleValue, setToggleValue] = (0, _react.useState)("multiple");
+  const onChange = value => {
+    setToggleValue(value);
+  };
+  return /*#__PURE__*/_react.default.createElement(_react2.Box, {
+    backgroundColor: "green.50",
+    padding: 8
+  }, /*#__PURE__*/_react.default.createElement(_ToggleButtonGroup.default, (0, _extends2.default)({}, props, {
+    value: toggleValue,
+    onChange: onChange
+  }), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    key: "single",
+    value: "single"
+  }, "Single Bookings"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    key: "multiple",
+    value: "multiple"
+  }, "Multiple Bookings")));
+};
+const ToggleButtonGroup = Template.bind({});
+exports.ToggleButtonGroup = ToggleButtonGroup;
+ToggleButtonGroup.args = {};

package/dist/components/ToggleButtonGroup/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ToggleButtonGroup", {
+  enumerable: true,
+  get: function () {
+    return _ToggleButtonGroup.default;
+  }
+});
+var _ToggleButtonGroup = _interopRequireDefault(require("./ToggleButtonGroup"));

package/dist/components/ToggleButtonGroup/styles/index.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.inactiveStyles = exports.defaultStyles = exports.buttonGroupStyles = exports.activeStyles = void 0;
+const defaultStyles = {
+  border: 0,
+  borderRadius: '4px',
+  fontSize: 'xs',
+  fontWeight: 'normal',
+  paddingX: 4,
+  paddingY: 1,
+  _hover: {
+    boxShadow: '0 0 0 2px rgba(158, 202, 237, 1)'
+  },
+  _focus: {
+    boxShadow: '0 0 0 2px rgba(158, 202, 237, 1)'
+  }
+};
+exports.defaultStyles = defaultStyles;
+const inactiveStyles = {
+  color: 'gray.700',
+  borderColor: 'gray.100',
+  bg: 'gray.100',
+  _hover: {
+    bg: 'gray.100'
+  },
+  _active: {
+    bg: 'gray.100'
+  }
+};
+exports.inactiveStyles = inactiveStyles;
+const activeStyles = {
+  color: 'black',
+  fontWeight: 'semibold',
+  bg: 'white',
+  _hover: {
+    bg: 'white'
+  },
+  _active: {
+    bg: 'white'
+  }
+};
+exports.activeStyles = activeStyles;
+const buttonGroupStyles = {
+  borderRadius: '4px',
+  backgroundColor: 'gray.100',
+  padding: 1
+};
+exports.buttonGroupStyles = buttonGroupStyles;

package/dist/components/index.js

@@ -40,6 +40,7 @@ var _exportNames = {
   RadioGroup: true,
   AutoSuggestSelect: true,
   Badge: true,
+  ToggleButtonGroup: true,
   Box: true,
   Kbd: true,
   Code: true,
@@ -453,6 +454,12 @@ Object.defineProperty(exports, "ThemeProvider", {
     return _ThemeProvider.default;
   }
 });
+Object.defineProperty(exports, "ToggleButtonGroup", {
+  enumerable: true,
+  get: function () {
+    return _ToggleButtonGroup.default;
+  }
+});
 Object.defineProperty(exports, "VStack", {
   enumerable: true,
   get: function () {
@@ -628,6 +635,7 @@ var _Popover = require("./Popover");
 var _Radio = require("./Radio");
 var _AutoSuggestSelect = require("./AutoSuggestSelect");
 var _Badge = _interopRequireDefault(require("./Badge/Badge"));
+var _ToggleButtonGroup = _interopRequireDefault(require("./ToggleButtonGroup/ToggleButtonGroup"));
 var _react = require("@chakra-ui/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spothero/ui",
-  "version": "21.1.0",
+  "version": "21.1.1-beta.0",
   "description": "SpotHero's React component UI library.",
   "main": "./dist/components/index.js",
   "exports": "./dist/components/index.js",
@@ -96,13 +96,13 @@
     "css-loader": "5.1.3",
     "sass-loader": "10.2.1",
     "@spothero/babel-preset-spothero": "5.0.0",
-    "@spothero/core": "7.0.0",
     "@spothero/browserslist-config": "4.0.0",
     "@spothero/eslint-config": "6.0.0",
+    "@spothero/core": "7.0.0",
     "@spothero/icons": "8.0.0",
     "@spothero/npm-publisher": "7.0.0",
-    "@spothero/stylelint-config": "6.0.0",
-    "@spothero/prettier-config": "4.0.0"
+    "@spothero/prettier-config": "4.0.0",
+    "@spothero/stylelint-config": "6.0.0"
   },
   "dependencies": {
     "@chakra-ui/react": "1.8.8",