@spothero/ui 18.0.0 → 18.0.4

package/dist/components/Modal/Modal.js

@@ -18,6 +18,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * @param {()=>void} [onClose] - Callback invoked to close the Modal. Not required, but strongly suggested.
  * @param {('sm'|'md'|'lg')} [size] - The size of the modal. If unspecified, uses "md" styles.
  * @param {object} [contentStyling] - Style props to be passed into the modal content
+ * @param {boolean} [hasHeader] - Whether or not ModalHeader is a child. Will change the styling
+ * @param {boolean} [hasFooter] - Whether or not ModalFooter is a child. Will change the styling
  * @param {React.ReactNode} [hideCloseButton] - Whether or not to show the close button
  * @returns {React.ReactElement} - The Modal component
  */
@@ -26,13 +28,14 @@ const Modal = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
     children,
     isMobile,
     hideCloseButton,
+    hasHeader,
     contentStyling = {}
   } = props;
   return /*#__PURE__*/_react.default.createElement(_react2.Modal, (0, _extends2.default)({
     motionPreset: isMobile ? 'slideInBottom' : 'scale'
   }, props, {
     ref: ref
-  }), /*#__PURE__*/_react.default.createElement(_react2.ModalOverlay, null), /*#__PURE__*/_react.default.createElement(_react2.ModalContent, contentStyling, hideCloseButton ? null : /*#__PURE__*/_react.default.createElement(_react2.ModalCloseButton, null), children));
+  }), /*#__PURE__*/_react.default.createElement(_react2.ModalOverlay, null), /*#__PURE__*/_react.default.createElement(_react2.ModalContent, contentStyling, !hasHeader ? /*#__PURE__*/_react.default.createElement(_react2.Box, (0, _header.default)(props)) : null, hideCloseButton ? null : /*#__PURE__*/_react.default.createElement(_react2.ModalCloseButton, null), children));
 });
 var _default = Modal;
 exports.default = _default;

package/dist/components/Modal/Modal.stories.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.TransactionalWithExpandingContent = exports.Transactional = exports.Passive = void 0;
+exports.default = exports.TransactionalWithExpandingContent = exports.Transactional = exports.Passive = exports.NoHeader = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@chakra-ui/react");
@@ -52,11 +52,13 @@ const Transactional = props => {
   });
   return /*#__PURE__*/_react.default.createElement(_react2.Box, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
     marginBottom: 2
-  }, "A \"Transactional\" modal just refers to one with a", ' ', /*#__PURE__*/_react.default.createElement("code", null, "footer"), " prop."), /*#__PURE__*/_react.default.createElement(_Button.default, {
+  }, "A \"Transactional\" modal just refers to one with a footer. Be sure to use the ", /*#__PURE__*/_react.default.createElement("code", null, "hasFooter"), " prop for the styling to be right when a ModalFooter is present. Same goes with ", /*#__PURE__*/_react.default.createElement("code", null, "hasHeader"), "."), /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: () => setOpen(true)
   }, "Open Modal"), /*#__PURE__*/_react.default.createElement(_index.Modal, (0, _extends2.default)({}, props, {
     isMobile: isMobile,
     isOpen: open,
+    hasHeader: true,
+    hasFooter: true,
     onClose: () => setOpen(false)
   }), /*#__PURE__*/_react.default.createElement(_index.ModalHeader, null, "Transactional"), /*#__PURE__*/_react.default.createElement(_index.ModalBody, null, props.children), /*#__PURE__*/_react.default.createElement(_index.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: () => setOpen(false),
@@ -80,11 +82,13 @@ const Passive = props => {
   });
   return /*#__PURE__*/_react.default.createElement(_react2.Box, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
     marginBottom: 2
-  }, "A \"Passive\" modal just refers to one with no", ' ', /*#__PURE__*/_react.default.createElement("code", null, "footer"), " prop."), /*#__PURE__*/_react.default.createElement(_Button.default, {
+  }, "A \"Passive\" modal just refers to one with no footer."), /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: () => setOpen(true)
   }, "Open Modal"), /*#__PURE__*/_react.default.createElement(_index.Modal, (0, _extends2.default)({}, props, {
     isMobile: isMobile,
     isOpen: open,
+    hasHeader: true,
+    hasFooter: false,
     onClose: () => setOpen(false)
   }), /*#__PURE__*/_react.default.createElement(_index.ModalHeader, null, "Passive"), /*#__PURE__*/_react.default.createElement(_index.ModalBody, null, props.children)));
 };
@@ -92,6 +96,28 @@ exports.Passive = Passive;
 Passive.args = {
   children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt lectus et mauris viverra, nec tincidunt arcu rhoncus. Duis pellentesque vestibulum orci ut mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis vel malesuada ligula. Cras dapibus enim sem. Suspendisse potenti. Mauris tempus non tortor eu placerat. Pellentesque faucibus dui vitae purus iaculis, ac convallis turpis gravida. Ut ac massa pretium, finibus quam vitae, aliquet libero. orci ut mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis vel malesuada ligula. Cras dapibus enim sem. Suspendisse potenti. Mauris tempus non tortor eu placerat. Pellentesque faucibus dui vitae purus iaculis, ac convallis turpis gravida. Ut ac massa pretium, finibus quam vitae, aliquet libero.'
 };
+const NoHeader = props => {
+  const [open, setOpen] = (0, _react.useState)(false);
+  const isMobile = (0, _react2.useBreakpointValue)({
+    base: true,
+    tablet: false
+  });
+  return /*#__PURE__*/_react.default.createElement(_react2.Box, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
+    marginBottom: 2
+  }, "A modal with no header"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => setOpen(true)
+  }, "Open Modal"), /*#__PURE__*/_react.default.createElement(_index.Modal, (0, _extends2.default)({}, props, {
+    isMobile: isMobile,
+    hasHeader: false,
+    hasFooter: false,
+    isOpen: open,
+    onClose: () => setOpen(false)
+  }), /*#__PURE__*/_react.default.createElement(_index.ModalBody, null, props.children)));
+};
+exports.NoHeader = NoHeader;
+NoHeader.args = {
+  children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt lectus et mauris viverra, nec tincidunt arcu rhoncus. Duis pellentesque vestibulum orci ut mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis vel malesuada ligula. Cras dapibus enim sem. Suspendisse potenti. Mauris tempus non tortor eu placerat. Pellentesque faucibus dui vitae purus iaculis, ac convallis turpis gravida. Ut ac massa pretium, finibus quam vitae, aliquet libero. orci ut mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis vel malesuada ligula. Cras dapibus enim sem. Suspendisse potenti. Mauris tempus non tortor eu placerat. Pellentesque faucibus dui vitae purus iaculis, ac convallis turpis gravida. Ut ac massa pretium, finibus quam vitae, aliquet libero.'
+};
 const TransactionalWithExpandingContent = props => {
   const [open, setOpen] = (0, _react.useState)(false);
   const accordionRefs = [/*#__PURE__*/_react.default.createRef(), /*#__PURE__*/_react.default.createRef()];
@@ -120,6 +146,8 @@ const TransactionalWithExpandingContent = props => {
     onClick: () => setOpen(true)
   }, "Open Modal"), /*#__PURE__*/_react.default.createElement(_index.Modal, (0, _extends2.default)({}, props, {
     isMobile: isMobile,
+    hasHeader: true,
+    hasFooter: true,
     isOpen: open,
     onClose: () => setOpen(false)
   }), /*#__PURE__*/_react.default.createElement(_index.ModalHeader, null, "Transactional with Expanding Content"), /*#__PURE__*/_react.default.createElement(_index.ModalBody, null, /*#__PURE__*/_react.default.createElement(_react2.Box, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
@@ -153,5 +181,5 @@ const TransactionalWithExpandingContent = props => {
 };
 exports.TransactionalWithExpandingContent = TransactionalWithExpandingContent;
 TransactionalWithExpandingContent.argTypes = {
-  ...(0, _disableArgs.default)(['children', 'header', 'footer'])
+  ...(0, _disableArgs.default)(['children', 'hasHeader', 'hasFooter'])
 };

package/dist/components/Modal/index.js

@@ -25,9 +25,8 @@ Object.defineProperty(exports, "ModalFooter", {
 Object.defineProperty(exports, "ModalHeader", {
   enumerable: true,
   get: function () {
-    return _ModalHeader.default;
+    return _react.ModalHeader;
   }
 });
 var _react = require("@chakra-ui/react");
-var _Modal = _interopRequireDefault(require("./Modal"));
-var _ModalHeader = _interopRequireDefault(require("./ModalHeader"));
+var _Modal = _interopRequireDefault(require("./Modal"));

package/dist/components/Modal/styles/body.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _default = _ref => {
   let {
-    footer,
-    header,
+    hasFooter,
+    hasHeader,
     hideCloseButton
   } = _ref;
-  const scrollingHeaderStyles = header || !hideCloseButton ? {
+  const scrollingHeaderStyles = hasHeader || !hideCloseButton ? {
     // The following adapted from https://lea.verou.me/2012/04/background-attachment-local/
     background: 'linear-gradient(white 30%, white), linear-gradient(rgb(0 0 0 / 10%) 0%, white)',
     backgroundRepeat: 'no-repeat',
@@ -19,7 +19,7 @@ var _default = _ref => {
     backgroundAttachment: 'local, scroll'
   } : {};
   return {
-    borderBottomRadius: footer ? null : 'md',
+    borderBottomRadius: hasFooter ? null : 'md',
     paddingX: 4,
     paddingBottom: 4,
     flex: 1,

package/dist/components/Modal/styles/closeButton.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _default = _ref => {
   let {
-    header
+    hasHeader
   } = _ref;
   return {
     position: 'absolute',
-    top: header ? 4 : 2,
-    insetEnd: header ? 4 : 2,
+    top: hasHeader ? 4 : 2,
+    insetEnd: hasHeader ? 4 : 2,
     color: 'gray.dark',
     borderRadius: 'sm',
     width: 8,

package/dist/components/Modal/styles/dialog.js

@@ -4,16 +4,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = {
-  borderRadius: 'md',
-  borderBottomRadius: {
-    base: '0',
-    tablet: 'md'
-  },
-  background: 'white',
-  color: 'inherit',
-  marginY: 0,
-  zIndex: 'layer8',
-  boxShadow: 'lg'
+var _default = _ref => {
+  let {
+    hasFooter
+  } = _ref;
+  return {
+    borderRadius: 'md',
+    borderBottomRadius: {
+      base: '0',
+      tablet: 'md'
+    },
+    background: 'white',
+    color: 'inherit',
+    marginY: 0,
+    zIndex: 'layer8',
+    boxShadow: 'lg',
+    paddingBottom: hasFooter ? 0 : 4
+  };
 };
 exports.default = _default;

package/dist/components/Modal/styles/header.js

@@ -7,14 +7,14 @@ exports.default = void 0;
 var _default = _ref => {
   let {
     hideCloseButton,
-    header
+    hasHeader
   } = _ref;
   return {
-    padding: !hideCloseButton || header ? 4 : 2,
+    padding: !hideCloseButton || hasHeader ? 4 : 2,
     fontSize: 'xl',
     fontWeight: 'semibold',
     // If just close button, still have 'header' section at top
-    minHeight: header || hideCloseButton ? null : 12
+    minHeight: hasHeader || hideCloseButton ? null : 12
   };
 };
 exports.default = _default;

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

@@ -15,10 +15,10 @@ var _closeButton = _interopRequireDefault(require("./closeButton"));
 var _body = _interopRequireDefault(require("./body"));
 var _footer = _interopRequireDefault(require("./footer"));
 const baseStyle = props => ({
-  dialog: _dialog.default,
   overlay: _overlay.default,
   dialogContainer: _dialogContainer.default,
   header: (0, _header.default)(props),
+  dialog: (0, _dialog.default)(props),
   closeButton: (0, _closeButton.default)(props),
   body: (0, _body.default)(props),
   footer: _footer.default

package/dist/components/Modal/styles/overlay.js

@@ -5,8 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _default = {
-  background: 'rgba(0, 45, 91, 0.3)',
-  // secondary.default at 30%
+  background: 'modalOverlay',
   zIndex: 'layer8'
 };
 exports.default = _default;

package/dist/components/index.js

@@ -66,7 +66,8 @@ var _exportNames = {
   useControllableProp: true,
   BasicInput: true,
   useControllableState: true,
-  usePrefersReducedMotion: true
+  usePrefersReducedMotion: true,
+  keyframes: true
 };
 Object.defineProperty(exports, "Alert", {
   enumerable: true,
@@ -380,6 +381,12 @@ Object.defineProperty(exports, "createIcon", {
     return _react.createIcon;
   }
 });
+Object.defineProperty(exports, "keyframes", {
+  enumerable: true,
+  get: function () {
+    return _react.keyframes;
+  }
+});
 Object.defineProperty(exports, "useBreakpointValue", {
   enumerable: true,
   get: function () {

package/dist/theme/base/colors.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 const white = '#ffffff';
 const black = '#000000';
 const brandBlue = '#0082ff';
+const modalOverlay = '#21212160';
 const gray = {
   50: '#f6f7f9',
   100: '#e1e6ec',
@@ -129,7 +130,8 @@ const colors = {
   },
   white,
   black,
-  brandBlue
+  brandBlue,
+  modalOverlay
 };
 var _default = colors;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spothero/ui",
-  "version": "18.0.0",
+  "version": "18.0.4",
   "description": "SpotHero's React component UI library.",
   "main": "./dist/components/index.js",
   "exports": "./dist/components/index.js",
@@ -135,8 +135,8 @@
     "classnames": "^2.2.6",
     "lodash": "4.17.21",
     "prop-types": "^15.7.2",
-    "react": ">=16.0.0",
-    "react-dom": ">=16.0.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "react-redux": ">=7.0.0",
     "redux": ">=4.0.0"
   }

package/dist/components/Modal/ModalHeader.js

@@ -1,18 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@chakra-ui/react");
-const ModalHeader = _ref => {
-  let {
-    children,
-    ...props
-  } = _ref;
-  return children ? /*#__PURE__*/_react.default.createElement(_react2.ModalHeader, props, children) : /*#__PURE__*/_react.default.createElement(Box, props);
-};
-var _default = ModalHeader;
-exports.default = _default;