@spothero/ui 21.5.0 → 21.6.0

package/dist/components/Menu/Menu.js

@@ -0,0 +1,16 @@
+"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 = _interopRequireDefault(require("react"));
+var _react2 = require("@chakra-ui/react");
+const Menu = (0, _react2.forwardRef)((props, ref) => {
+  return /*#__PURE__*/_react.default.createElement(_react2.Menu, (0, _extends2.default)({}, props, {
+    ref: ref
+  }));
+});
+var _default = exports.default = Menu;

package/dist/components/Menu/Menu.stories.js

@@ -0,0 +1,159 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Complex = exports.Basic = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _Menu = _interopRequireDefault(require("./Menu"));
+var _index = require("./index");
+var _disableArgs = _interopRequireDefault(require("storybook/utils/disable-args"));
+var _react2 = require("@chakra-ui/react");
+var _default = exports.default = {
+  title: 'v2/Menu',
+  component: {
+    Menu: _Menu.default
+  },
+  parameters: {
+    importedBy: 'Menu',
+    removeBaseHtmlClass: true,
+    chakraLink: 'https://v1.chakra-ui.com/docs/components/overlay/menu'
+  },
+  argTypes: {
+    variant: {
+      control: {
+        type: 'select',
+        options: ['basic', 'full']
+      }
+    }
+  }
+};
+const BasicMenuTemplate = props => {
+  return /*#__PURE__*/_react.default.createElement(_Menu.default, props, /*#__PURE__*/_react.default.createElement(_index.MenuButton, null, "MenuItem"), /*#__PURE__*/_react.default.createElement(_index.MenuList, null, /*#__PURE__*/_react.default.createElement(_index.MenuOptionGroup, {
+    title: "Order",
+    type: "radio"
+  }, /*#__PURE__*/_react.default.createElement(_index.MenuItemOption, {
+    value: "asc"
+  }, "Ascending"), /*#__PURE__*/_react.default.createElement(_index.MenuItemOption, {
+    value: "desc"
+  }, "Descending")), /*#__PURE__*/_react.default.createElement(_index.MenuDivider, null), /*#__PURE__*/_react.default.createElement(_index.MenuOptionGroup, {
+    title: "Country",
+    type: "checkbox"
+  }, /*#__PURE__*/_react.default.createElement(_index.MenuItemOption, {
+    value: "email"
+  }, "Email"), /*#__PURE__*/_react.default.createElement(_index.MenuItemOption, {
+    value: "phone"
+  }, "Phone"), /*#__PURE__*/_react.default.createElement(_index.MenuItemOption, {
+    value: "country"
+  }, "Country")), /*#__PURE__*/_react.default.createElement(_index.MenuGroup, {
+    title: "Profile"
+  }, /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, "My Account"), /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, "Payments "))));
+};
+const ComplexMenuTemplate = props => {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    variant: "body2",
+    marginBottom: 8
+  }, "NOTE: This is a fairly contrived example. Chakra's", ' ', /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    as: "code"
+  }, '<Menu />'), " (and child components) allow for the building of a complex menu using other components like", ' ', /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    as: "code"
+  }, '<Flex />'), ",", ' ', /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    as: "code"
+  }, '<Box />'), ",", ' ', /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    as: "code"
+  }, '<Text />'), ", etc. The example below is leveraging the ", /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    as: "code"
+  }, 'full'), " variant to allow for a more complex layout."), /*#__PURE__*/_react.default.createElement(_Menu.default, (0, _extends2.default)({}, props, {
+    placement: "bottom"
+  }), /*#__PURE__*/_react.default.createElement(_index.MenuButton, null, "Menu Button"), /*#__PURE__*/_react.default.createElement(_index.MenuList, null, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.Flex, {
+    gap: 4
+  }, /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    fontSize: "sm",
+    fontWeight: "semibold"
+  }, "102 S Ada St. Chicago, IL"), /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    fontSize: "sm"
+  }, "102 S Ada St. - Self Park Garage")), /*#__PURE__*/_react.default.createElement(_react2.Divider, {
+    marginY: 4
+  })), /*#__PURE__*/_react.default.createElement(_react2.Flex, {
+    alignItems: "flex-start",
+    gap: 2.5
+  }, /*#__PURE__*/_react.default.createElement(_index.MenuGroup, {
+    title: "Facility Management",
+    paddingX: 3.5
+  }, /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    fontSize: "sm"
+  }, "Location Information"), /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    fontSize: "xs",
+    fontWeight: "light"
+  }, "Manage the details provided to drivers about a facility")), /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    fontSize: "sm"
+  }, "Changelog"), /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    fontSize: "xs",
+    fontWeight: "light"
+  }, "Track changes made to your facilities")), /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    fontSize: "sm"
+  }, "Email Recipients"), /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    fontSize: "xs",
+    fontWeight: "light"
+  }, "View recipients of recurring operational emails"))), /*#__PURE__*/_react.default.createElement(_react2.Box, {
+    height: 80
+  }, /*#__PURE__*/_react.default.createElement(_react2.Divider, {
+    orientation: "vertical"
+  })), /*#__PURE__*/_react.default.createElement(_index.MenuGroup, {
+    title: "Events",
+    paddingX: 3.5
+  }, /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    fontSize: "sm"
+  }, "Event Schedule"), /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    fontSize: "xs",
+    fontWeight: "light"
+  }, "Manage upcoming event rates and track sales")), /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    fontSize: "sm"
+  }, "Event Pricing Defaults"), /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    fontSize: "xs",
+    fontWeight: "light"
+  }, "Set rate and inventory rules for various types of events"))), /*#__PURE__*/_react.default.createElement(_react2.Box, {
+    height: 80
+  }, /*#__PURE__*/_react.default.createElement(_react2.Divider, {
+    orientation: "vertical"
+  })), /*#__PURE__*/_react.default.createElement(_react2.Box, null, /*#__PURE__*/_react.default.createElement(_index.MenuGroup, {
+    title: "Monthly",
+    paddingX: 3.5
+  }, /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    fontSize: "sm"
+  }, "Monthly Rates"), /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    fontSize: "xs",
+    fontWeight: "light"
+  }, "Manage upcoming event rates and track sales")), /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    fontSize: "sm"
+  }, "Monthly Inventory"), /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    fontSize: "xs",
+    fontWeight: "light"
+  }, "Manage total monthly inventory and track utilization"))), /*#__PURE__*/_react.default.createElement(_index.MenuGroup, {
+    title: "Airport",
+    paddingX: 3.5
+  }, /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    fontSize: "sm"
+  }, "Airport Rates"), /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    fontSize: "xs",
+    fontWeight: "light"
+  }, "Manage airport rates")), /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    fontSize: "sm"
+  }, "Airport Inventory"), /*#__PURE__*/_react.default.createElement(_react2.Text, {
+    fontSize: "xs",
+    fontWeight: "light"
+  }, "Manage total airport inventory and exceptions"))))))));
+};
+const Basic = exports.Basic = BasicMenuTemplate.bind({});
+Basic.args = {
+  variant: 'basic'
+};
+const Complex = exports.Complex = ComplexMenuTemplate.bind({});
+Complex.argTypes = {
+  ...(0, _disableArgs.default)(['variant'])
+};
+Complex.args = {
+  variant: 'full'
+};

package/dist/components/Menu/Menu.styles.js

@@ -0,0 +1,173 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _merge = _interopRequireDefault(require("lodash/merge"));
+var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
+const baseStyle = {
+  button: {
+    px: 8,
+    py: 3,
+    fontSize: 'base',
+    fontFamily: 'body',
+    lineHeight: 0.875,
+    fontWeight: 'semibold',
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderRadius: 'base',
+    textTransform: 'capitalize',
+    transition: 'all normal ease',
+    _hover: {
+      bg: 'gray.50',
+      borderColor: 'gray.200'
+    },
+    _disabled: {
+      cursor: 'not-allowed',
+      opacity: 1,
+      bg: 'gray.200',
+      borderColor: 'gray.200',
+      color: 'gray.600'
+    },
+    _focus: {
+      zIndex: 1,
+      boxShadow: 'outline'
+    }
+  },
+  list: {
+    bg: 'white',
+    boxShadow: 'base',
+    padding: 6,
+    zIndex: 'layer1',
+    width: 64
+  },
+  item: {
+    paddingX: 2,
+    paddingY: 1.5,
+    _focus: {
+      zIndex: 1,
+      boxShadow: 'outline'
+    }
+  },
+  groupTitle: {
+    fontWeight: 'semibold',
+    color: 'gray.600',
+    padding: 2
+  },
+  command: {
+    // this will style the text defined by the command
+    // prop in the MenuItem and MenuItemOption components
+    opacity: '0.8',
+    fontFamily: 'mono',
+    fontSize: 'sm',
+    letterSpacing: 'tighter',
+    paddingL: 4
+  },
+  divider: {
+    marginY: 2,
+    borderColor: 'gray.200'
+  }
+};
+const variants = {
+  basic: {
+    button: {
+      bg: 'primary.default',
+      borderColor: 'primary.default',
+      color: 'white',
+      _hover: {
+        bg: 'primary.600',
+        borderColor: 'primary.600',
+        color: 'white',
+        _disabled: {
+          bg: 'gray.200',
+          borderColor: 'gray.200',
+          color: 'gray.600'
+        }
+      }
+    },
+    list: {
+      bg: 'white',
+      boxShadow: 'base',
+      zIndex: 'layer1',
+      borderColor: 'gray.100',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderRadius: 'base',
+      padding: 4,
+      width: 64
+    },
+    groupTitle: {
+      fontWeight: 'semibold',
+      fontSize: 'md',
+      color: 'gray.600',
+      padding: 2
+    },
+    item: {
+      fontWeight: 'semibold',
+      _hover: {
+        color: 'gray.600'
+      }
+    }
+  },
+  full: {
+    button: {
+      height: 8,
+      fontSize: 'sm',
+      fontWeight: 'semibold',
+      color: 'black',
+      borderColor: 'white',
+      backgroundColor: 'white',
+      borderRadius: 'base',
+      paddingX: 3,
+      paddingY: 'auto',
+      _hover: {
+        color: 'black',
+        backgroundColor: 'gray.50',
+        borderColor: 'gray.50'
+      },
+      _active: {
+        color: 'primary.default',
+        backgroundColor: 'gray.50',
+        borderColor: 'gray.50',
+        _hover: {
+          color: 'primary.600',
+          backgroundColor: 'gray.50',
+          borderColor: 'gray.50'
+        }
+      }
+    },
+    list: {
+      height: '30rem',
+      width: '100vw',
+      padding: 8,
+      backgroundColor: 'white'
+    },
+    groupTitle: {
+      fontSize: 'sm',
+      weight: 'normal',
+      color: 'gray.600'
+    },
+    item: {
+      display: 'block',
+      paddingX: 3.5,
+      paddingY: 2.5,
+      marginBottom: 2,
+      _last: {
+        marginBottom: 0
+      },
+      _hover: {
+        backgroundColor: 'gray.50'
+      },
+      _focus: {
+        boxShadow: 'none',
+        backgroundColor: 'gray.50'
+      }
+    }
+  }
+};
+var _default = exports.default = (0, _merge.default)(_theme.default.components.Menu, {
+  baseStyle,
+  variants
+});

package/dist/components/Menu/index.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "MenuButton", {
+  enumerable: true,
+  get: function () {
+    return _react.MenuButton;
+  }
+});
+Object.defineProperty(exports, "MenuDivider", {
+  enumerable: true,
+  get: function () {
+    return _react.MenuDivider;
+  }
+});
+Object.defineProperty(exports, "MenuGroup", {
+  enumerable: true,
+  get: function () {
+    return _react.MenuGroup;
+  }
+});
+Object.defineProperty(exports, "MenuItem", {
+  enumerable: true,
+  get: function () {
+    return _react.MenuItem;
+  }
+});
+Object.defineProperty(exports, "MenuItemOption", {
+  enumerable: true,
+  get: function () {
+    return _react.MenuItemOption;
+  }
+});
+Object.defineProperty(exports, "MenuList", {
+  enumerable: true,
+  get: function () {
+    return _react.MenuList;
+  }
+});
+Object.defineProperty(exports, "MenuOptionGroup", {
+  enumerable: true,
+  get: function () {
+    return _react.MenuOptionGroup;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Menu.default;
+  }
+});
+var _Menu = _interopRequireDefault(require("./Menu"));
+var _react = require("@chakra-ui/react");

package/dist/components/index.js

@@ -42,6 +42,14 @@ var _exportNames = {
   Badge: true,
   ToggleButtonGroup: true,
   CreatableSelect: true,
+  Menu: true,
+  MenuButton: true,
+  MenuList: true,
+  MenuItem: true,
+  MenuItemOption: true,
+  MenuGroup: true,
+  MenuOptionGroup: true,
+  MenuDivider: true,
   Box: true,
   Kbd: true,
   Code: true,
@@ -70,6 +78,8 @@ var _exportNames = {
   useClipboard: true,
   useDisclosure: true,
   useMediaQuery: true,
+  CheckboxGroup: true,
+  useStyleConfig: true,
   BreadcrumbItem: true,
   BreadcrumbLink: true,
   InputLeftAddon: true,
@@ -163,6 +173,12 @@ Object.defineProperty(exports, "Checkbox", {
     return _Checkbox.default;
   }
 });
+Object.defineProperty(exports, "CheckboxGroup", {
+  enumerable: true,
+  get: function () {
+    return _react.CheckboxGroup;
+  }
+});
 Object.defineProperty(exports, "Circle", {
   enumerable: true,
   get: function () {
@@ -325,6 +341,54 @@ Object.defineProperty(exports, "Loader", {
     return _Loader.default;
   }
 });
+Object.defineProperty(exports, "Menu", {
+  enumerable: true,
+  get: function () {
+    return _Menu.default;
+  }
+});
+Object.defineProperty(exports, "MenuButton", {
+  enumerable: true,
+  get: function () {
+    return _Menu.MenuButton;
+  }
+});
+Object.defineProperty(exports, "MenuDivider", {
+  enumerable: true,
+  get: function () {
+    return _Menu.MenuDivider;
+  }
+});
+Object.defineProperty(exports, "MenuGroup", {
+  enumerable: true,
+  get: function () {
+    return _Menu.MenuGroup;
+  }
+});
+Object.defineProperty(exports, "MenuItem", {
+  enumerable: true,
+  get: function () {
+    return _Menu.MenuItem;
+  }
+});
+Object.defineProperty(exports, "MenuItemOption", {
+  enumerable: true,
+  get: function () {
+    return _Menu.MenuItemOption;
+  }
+});
+Object.defineProperty(exports, "MenuList", {
+  enumerable: true,
+  get: function () {
+    return _Menu.MenuList;
+  }
+});
+Object.defineProperty(exports, "MenuOptionGroup", {
+  enumerable: true,
+  get: function () {
+    return _Menu.MenuOptionGroup;
+  }
+});
 Object.defineProperty(exports, "Popover", {
   enumerable: true,
   get: function () {
@@ -541,6 +605,12 @@ Object.defineProperty(exports, "usePrefersReducedMotion", {
     return _react.usePrefersReducedMotion;
   }
 });
+Object.defineProperty(exports, "useStyleConfig", {
+  enumerable: true,
+  get: function () {
+    return _react.useStyleConfig;
+  }
+});
 Object.defineProperty(exports, "useTheme", {
   enumerable: true,
   get: function () {
@@ -658,6 +728,7 @@ var _AutoSuggestSelect = require("./AutoSuggestSelect");
 var _Badge = _interopRequireDefault(require("./Badge/Badge"));
 var _ToggleButtonGroup = _interopRequireDefault(require("./ToggleButtonGroup/ToggleButtonGroup"));
 var _CreatableSelect = require("./CreatableSelect");
+var _Menu = _interopRequireWildcard(require("./Menu"));
 var _react = require("@chakra-ui/react");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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; }

package/dist/components/styles.js

@@ -70,6 +70,12 @@ Object.defineProperty(exports, "List", {
     return _styles.default;
   }
 });
+Object.defineProperty(exports, "Menu", {
+  enumerable: true,
+  get: function () {
+    return _Menu.default;
+  }
+});
 Object.defineProperty(exports, "Modal", {
   enumerable: true,
   get: function () {
@@ -157,4 +163,5 @@ var _styles10 = _interopRequireDefault(require("./Radio/styles"));
 var _Skeleton = _interopRequireDefault(require("./Skeleton/Skeleton.styles"));
 var _styles11 = _interopRequireDefault(require("./Badge/styles"));
 var _styles12 = _interopRequireDefault(require("./Drawer/styles"));
-var _Progress = _interopRequireDefault(require("./Progress/Progress.styles"));
+var _Progress = _interopRequireDefault(require("./Progress/Progress.styles"));
+var _Menu = _interopRequireDefault(require("./Menu/Menu.styles"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spothero/ui",
-  "version": "21.5.0",
+  "version": "21.6.0",
   "description": "SpotHero's React component UI library.",
   "main": "./dist/components/index.js",
   "exports": "./dist/components/index.js",
@@ -94,13 +94,13 @@
     "webpack-merge": "5.1.4",
     "css-loader": "5.1.3",
     "sass-loader": "10.2.1",
+    "@spothero/browserslist-config": "4.0.0",
     "@spothero/babel-preset-spothero": "5.1.0",
+    "@spothero/eslint-config": "6.1.0",
     "@spothero/core": "7.0.0",
     "@spothero/icons": "8.1.0",
-    "@spothero/eslint-config": "6.1.0",
     "@spothero/npm-publisher": "7.0.0",
     "@spothero/stylelint-config": "6.0.0",
-    "@spothero/browserslist-config": "4.0.0",
     "@spothero/prettier-config": "4.0.0"
   },
   "dependencies": {
@@ -117,7 +117,7 @@
     "regenerator-runtime": "0.13.7",
     "ssr-window": "1.0.1",
     "transitionEnd": "1.0.2",
-    "@spothero/utils": "14.1.0"
+    "@spothero/utils": "14.1.2"
   },
   "peerDependencies": {
     "classnames": "^2.2.6",