@spothero/ui 20.0.2-beta.2 → 20.2.0

package/dist/components/Alert/Alert.js

@@ -36,9 +36,10 @@ const Alert = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     onDismissClick,
     showIcon,
     description,
+    icon,
     ...props
   } = _ref;
-  const IconVariant = statusIconMapping[status];
+  const IconVariant = icon || statusIconMapping[status];
   // the issue with storybook breaking with hooks is still a problem, but once that's resolved this should be memoized
   const style = (0, _merge.default)({
     ..._theme.default.components.Alert.baseStyle
@@ -77,7 +78,8 @@ Alert.defaultProps = {
   onDismissClick: null,
   showIcon: true,
   description: null,
-  size: 'md'
+  size: 'md',
+  icon: null
 };
 var _default = Alert;
 exports.default = _default;

package/dist/components/index.js

@@ -39,20 +39,31 @@ var _exportNames = {
   AutoSuggestSelect: true,
   Badge: true,
   Box: true,
+  Kbd: true,
+  Code: true,
   Flex: true,
   Fade: true,
   Slide: true,
+  Center: true,
+  Circle: true,
   Portal: true,
+  Square: true,
   HStack: true,
+  VStack: true,
+  LinkBox: true,
+  Collapse: true,
+  Progress: true,
   useToken: true,
   useTheme: true,
   useToast: true,
-  Progress: true,
   ScaleFade: true,
   SlideFade: true,
+  Breadcrumb: true,
   createIcon: true,
   InputGroup: true,
-  Breadcrumb: true,
+  SimpleGrid: true,
+  AspectRatio: true,
+  LinkOverlay: true,
   useClipboard: true,
   useDisclosure: true,
   useMediaQuery: true,
@@ -75,6 +86,12 @@ Object.defineProperty(exports, "Alert", {
     return _Alert.default;
   }
 });
+Object.defineProperty(exports, "AspectRatio", {
+  enumerable: true,
+  get: function () {
+    return _react.AspectRatio;
+  }
+});
 Object.defineProperty(exports, "AutoSuggestSelect", {
   enumerable: true,
   get: function () {
@@ -123,12 +140,36 @@ Object.defineProperty(exports, "Card", {
     return _Card.default;
   }
 });
+Object.defineProperty(exports, "Center", {
+  enumerable: true,
+  get: function () {
+    return _react.Center;
+  }
+});
 Object.defineProperty(exports, "Checkbox", {
   enumerable: true,
   get: function () {
     return _Checkbox.default;
   }
 });
+Object.defineProperty(exports, "Circle", {
+  enumerable: true,
+  get: function () {
+    return _react.Circle;
+  }
+});
+Object.defineProperty(exports, "Code", {
+  enumerable: true,
+  get: function () {
+    return _react.Code;
+  }
+});
+Object.defineProperty(exports, "Collapse", {
+  enumerable: true,
+  get: function () {
+    return _react.Collapse;
+  }
+});
 Object.defineProperty(exports, "Container", {
   enumerable: true,
   get: function () {
@@ -225,12 +266,30 @@ Object.defineProperty(exports, "InputRightElement", {
     return _react.InputRightElement;
   }
 });
+Object.defineProperty(exports, "Kbd", {
+  enumerable: true,
+  get: function () {
+    return _react.Kbd;
+  }
+});
 Object.defineProperty(exports, "Link", {
   enumerable: true,
   get: function () {
     return _Link.default;
   }
 });
+Object.defineProperty(exports, "LinkBox", {
+  enumerable: true,
+  get: function () {
+    return _react.LinkBox;
+  }
+});
+Object.defineProperty(exports, "LinkOverlay", {
+  enumerable: true,
+  get: function () {
+    return _react.LinkOverlay;
+  }
+});
 Object.defineProperty(exports, "List", {
   enumerable: true,
   get: function () {
@@ -309,6 +368,12 @@ Object.defineProperty(exports, "Select", {
     return _Select.default;
   }
 });
+Object.defineProperty(exports, "SimpleGrid", {
+  enumerable: true,
+  get: function () {
+    return _react.SimpleGrid;
+  }
+});
 Object.defineProperty(exports, "Slide", {
   enumerable: true,
   get: function () {
@@ -327,6 +392,12 @@ Object.defineProperty(exports, "Spinner", {
     return _Spinner.default;
   }
 });
+Object.defineProperty(exports, "Square", {
+  enumerable: true,
+  get: function () {
+    return _react.Square;
+  }
+});
 Object.defineProperty(exports, "Switch", {
   enumerable: true,
   get: function () {
@@ -375,6 +446,12 @@ Object.defineProperty(exports, "ThemeProvider", {
     return _ThemeProvider.default;
   }
 });
+Object.defineProperty(exports, "VStack", {
+  enumerable: true,
+  get: function () {
+    return _react.VStack;
+  }
+});
 Object.defineProperty(exports, "createIcon", {
   enumerable: true,
   get: function () {
@@ -483,18 +560,6 @@ Object.keys(_Button).forEach(function (key) {
     }
   });
 });
-var _Drawer = require("./Drawer");
-Object.keys(_Drawer).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Drawer[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Drawer[key];
-    }
-  });
-});
 var _Skeleton = require("./Skeleton");
 Object.keys(_Skeleton).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/dist/components/styles.js

@@ -34,12 +34,6 @@ Object.defineProperty(exports, "Divider", {
     return _Divider.default;
   }
 });
-Object.defineProperty(exports, "Drawer", {
-  enumerable: true,
-  get: function () {
-    return _styles12.default;
-  }
-});
 Object.defineProperty(exports, "GridItem", {
   enumerable: true,
   get: function () {
@@ -149,5 +143,4 @@ var _styles8 = _interopRequireDefault(require("./Input/styles"));
 var _styles9 = _interopRequireDefault(require("./Modal/styles"));
 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 _styles11 = _interopRequireDefault(require("./Badge/styles"));

package/dist/theme/base/shadows.js

@@ -8,9 +8,7 @@ exports.default = void 0;
 var _merge = _interopRequireDefault(require("lodash/merge"));
 var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
 const shadows = {
-  outline: '0 0 0 3px rgba(91, 170, 250, 0.7)',
-  // primary.400, 70% opacity
-  drawer: '-8px 0 16px 0 rgba(33,33,33,.1)'
+  outline: '0 0 0 3px rgba(91, 170, 250, 0.7)' // primary.400, 70% opacity
 };
 var _default = (0, _merge.default)(_theme.default.shadows, shadows);
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spothero/ui",
-  "version": "20.0.2-beta.2",
+  "version": "20.2.0",
   "description": "SpotHero's React component UI library.",
   "main": "./dist/components/index.js",
   "exports": "./dist/components/index.js",
@@ -97,12 +97,12 @@
     "sass-loader": "10.2.1",
     "@spothero/babel-preset-spothero": "5.0.0",
     "@spothero/browserslist-config": "4.0.0",
-    "@spothero/eslint-config": "6.0.0",
-    "@spothero/core": "7.0.0",
-    "@spothero/icons": "7.0.0",
+    "@spothero/icons": "7.1.0",
     "@spothero/npm-publisher": "7.0.0",
     "@spothero/prettier-config": "4.0.0",
-    "@spothero/stylelint-config": "6.0.0"
+    "@spothero/eslint-config": "6.0.0",
+    "@spothero/stylelint-config": "6.0.0",
+    "@spothero/core": "7.0.0"
   },
   "dependencies": {
     "@chakra-ui/react": "1.8.8",

package/dist/components/Drawer/Drawer.js

@@ -1,26 +0,0 @@
-"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 = _interopRequireWildcard(require("react"));
-var _react2 = 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; }
-const Drawer = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-    header,
-    children,
-    ...props
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_react2.Drawer, (0, _extends2.default)({
-    placement: "right"
-  }, props, {
-    ref: ref
-  }), /*#__PURE__*/_react.default.createElement(_react2.DrawerOverlay, null), /*#__PURE__*/_react.default.createElement(_react2.DrawerContent, null, /*#__PURE__*/_react.default.createElement(_react2.DrawerHeader, null, header, /*#__PURE__*/_react.default.createElement(_react2.DrawerCloseButton, null)), children));
-});
-var _default = Drawer;
-exports.default = _default;

package/dist/components/Drawer/Drawer.stories.js

@@ -1,40 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Drawer = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _Text = _interopRequireDefault(require("../Text/Text"));
-var _Button = require("../Button");
-var _index = require("./index");
-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/Drawer',
-  component: _index.Drawer,
-  subcomponents: {
-    DrawerHeader: _index.DrawerHeader,
-    DrawerBody: _index.DrawerBody,
-    DrawerFooter: _index.DrawerFooter
-  },
-  parameters: {
-    importBy: 'Drawer',
-    removeBaseHtmlClass: true,
-    chakraLink: 'https://chakra-ui.com/docs/components/drawer'
-  }
-};
-exports.default = _default;
-const Drawer = props => {
-  const [isOpen, setIsOpen] = (0, _react.useState)(true);
-  const toggleDrawer = () => setIsOpen(prevState => !prevState);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    onClick: toggleDrawer
-  }, "Open"), /*#__PURE__*/_react.default.createElement(_index.Drawer, {
-    isOpen: isOpen,
-    onClose: toggleDrawer,
-    header: " Sample Drawer Header"
-  }, /*#__PURE__*/_react.default.createElement(_index.DrawerBody, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, "Sample Drawer Body")), /*#__PURE__*/_react.default.createElement(_index.DrawerFooter, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, "Sample Drawer Footer"))));
-};
-exports.Drawer = Drawer;

package/dist/components/Drawer/index.js

@@ -1,32 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Drawer", {
-  enumerable: true,
-  get: function () {
-    return _Drawer.default;
-  }
-});
-Object.defineProperty(exports, "DrawerBody", {
-  enumerable: true,
-  get: function () {
-    return _react.DrawerBody;
-  }
-});
-Object.defineProperty(exports, "DrawerFooter", {
-  enumerable: true,
-  get: function () {
-    return _react.DrawerFooter;
-  }
-});
-Object.defineProperty(exports, "DrawerHeader", {
-  enumerable: true,
-  get: function () {
-    return _react.DrawerHeader;
-  }
-});
-var _react = require("@chakra-ui/react");
-var _Drawer = _interopRequireDefault(require("./Drawer"));

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

@@ -1,106 +0,0 @@
-"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 body = _ref => {
-  let {
-    hasFooter,
-    ...props
-  } = _ref;
-  return {
-    overflowY: 'auto',
-    padding: 6,
-    paddingBottom: hasFooter ? 24 : 6
-  };
-};
-const footer = props => {
-  return {
-    padding: 6,
-    backgroundColor: 'white',
-    position: 'absolute',
-    bottom: 0,
-    width: '100%'
-  };
-};
-const header = props => {
-  return {
-    paddingY: 3,
-    paddingX: 6,
-    borderBottom: '1px solid',
-    borderBottomColor: 'gray.100',
-    display: 'flex',
-    gridGap: 2,
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    fontWeight: 'semibold'
-  };
-};
-const closeButton = props => {
-  return {
-    width: 8,
-    height: 8,
-    fontSize: 'xs',
-    background: 'transparent',
-    borderRadius: 'md',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexShrink: 0,
-    transitionProperty: 'common',
-    transitionDuration: 'normal',
-    outline: 'transparent solid 2px',
-    outlineOffset: '2px',
-    color: 'gray.600',
-    _hover: {
-      color: 'black',
-      background: 'gray.100'
-    },
-    _focus: {
-      outlineColor: 'primary.default'
-    }
-  };
-};
-const dialogContainer = props => {
-  return {
-    zIndex: 'layer2',
-    backgroundColor: 'transparent'
-  };
-};
-const dialog = props => {
-  return {
-    backgroundColor: 'white',
-    boxShadow: 'drawer'
-  };
-};
-const baseStyle = props => ({
-  body: body(props),
-  footer: footer(props),
-  header: header(props),
-  dialog: dialog(props),
-  closeButton: closeButton(props),
-  dialogContainer: dialogContainer(props)
-});
-const defaultProps = {
-  size: 'xs'
-};
-const sizes = {
-  xs: {
-    dialog: {
-      maxWidth: {
-        base: '100vw',
-        mobileXL: 80
-      }
-    }
-  }
-};
-var _default = (0, _merge.default)(_theme.default.components.Drawer, {
-  defaultProps,
-  baseStyle,
-  sizes
-});
-exports.default = _default;