@spothero/ui 22.5.3 → 23.0.1

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _react = require("@chakra-ui/react");
+var _react2 = _interopRequireWildcard(require("react"));
+var _styles = require("./styles");
+function _getRequireWildcardCache(e) { if ("function" != typeof _WeakMap) return null; var r = new _WeakMap(), t = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? _Object$getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? _Object$defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * @example (
+ * <ToggleButtonGroup onChange={handleChangeValue} value={value}>
+ *  <Button value={value1}>label1</Button>
+ *  <Button value={value2}>label2</Button>
+ * </ToggleButtonGroup>
+ * )
+ * @note
+ * must have multiple child elements
+ */
+var ToggleButtonGroup = /*#__PURE__*/(0, _react2.forwardRef)(function (props, ref) {
+  var _context;
+  var onChange = props.onChange,
+    value = props.value,
+    children = props.children,
+    groupProps = props.groupProps;
+  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: _objectSpread({}, _styles.buttonGroupStyles)
+  }, groupProps), (0, _map["default"])(_context = _react2["default"].Children).call(_context, children, function (CHILD) {
+    var _CHILD$props3;
+    return /*#__PURE__*/_react2["default"].cloneElement(CHILD, _objectSpread({
+      onClick: function onClick() {
+        var _CHILD$props, _CHILD$props2;
+        if (value === (CHILD === null || CHILD === void 0 ? void 0 : (_CHILD$props = CHILD.props) === null || _CHILD$props === void 0 ? void 0 : _CHILD$props.value)) return;
+        onChange(CHILD === null || CHILD === void 0 ? void 0 : (_CHILD$props2 = CHILD.props) === null || _CHILD$props2 === void 0 ? void 0 : _CHILD$props2.value);
+      }
+    }, value !== (CHILD === null || CHILD === void 0 ? void 0 : (_CHILD$props3 = CHILD.props) === null || _CHILD$props3 === void 0 ? void 0 : _CHILD$props3.value) ? {
+      sx: _objectSpread(_objectSpread({}, _styles.defaultStyles), _styles.inactiveStyles)
+    } : {
+      sx: _objectSpread(_objectSpread({}, _styles.defaultStyles), _styles.activeStyles)
+    }));
+  }));
+});
+var _default = exports["default"] = ToggleButtonGroup;

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

@@ -0,0 +1,62 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ToggleButtonGroup = void 0;
+var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@chakra-ui/react");
+var _Button = require("../Button");
+var _ToggleButtonGroup = _interopRequireDefault(require("./ToggleButtonGroup"));
+function _getRequireWildcardCache(e) { if ("function" != typeof _WeakMap) return null; var r = new _WeakMap(), t = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? _Object$getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? _Object$defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var _default = exports["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.
+*/
+var Template = function Template(props) {
+  var _useState = (0, _react.useState)("multiple"),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    toggleValue = _useState2[0],
+    setToggleValue = _useState2[1];
+  var onChange = function 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",
+    fontSize: "xs"
+  }, "Single Bookings"), /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+    key: "multiple",
+    value: "multiple",
+    fontSize: "xs"
+  }, "Multiple Bookings"), /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+    key: "blah",
+    value: "blah",
+    fontSize: "xs"
+  }, "Blah Bookings")));
+};
+var ToggleButtonGroup = exports.ToggleButtonGroup = (0, _bind["default"])(Template).call(Template, {});
+ToggleButtonGroup.args = {};

package/dist/components/ToggleButtonGroup/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+_Object$defineProperty(exports, "ToggleButtonGroup", {
+  enumerable: true,
+  get: function get() {
+    return _ToggleButtonGroup["default"];
+  }
+});
+var _ToggleButtonGroup = _interopRequireDefault(require("./ToggleButtonGroup"));

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

@@ -0,0 +1,48 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.inactiveStyles = exports.defaultStyles = exports.buttonGroupStyles = exports.activeStyles = void 0;
+var defaultStyles = exports.defaultStyles = {
+  border: 0,
+  borderRadius: '4px',
+  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)'
+  }
+};
+var inactiveStyles = exports.inactiveStyles = {
+  color: 'black',
+  borderColor: 'gray.100',
+  bg: 'gray.100',
+  _hover: {
+    bg: 'gray.100'
+  },
+  _active: {
+    bg: 'gray.100'
+  }
+};
+var activeStyles = exports.activeStyles = {
+  color: 'black',
+  fontWeight: 'semibold',
+  boxShadow: 'sm',
+  bg: 'white',
+  _hover: {
+    bg: 'white'
+  },
+  _active: {
+    bg: 'white'
+  }
+};
+var buttonGroupStyles = exports.buttonGroupStyles = {
+  borderRadius: '4px',
+  backgroundColor: 'gray.100',
+  padding: 1
+};