@spothero/ui 20.2.0 → 20.4.0

package/dist/components/Drawer/Drawer.js

@@ -0,0 +1,26 @@
+"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

@@ -0,0 +1,40 @@
+"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

@@ -0,0 +1,56 @@
+"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, "DrawerCloseButton", {
+  enumerable: true,
+  get: function () {
+    return _react.DrawerCloseButton;
+  }
+});
+Object.defineProperty(exports, "DrawerContainer", {
+  enumerable: true,
+  get: function () {
+    return _react.Drawer;
+  }
+});
+Object.defineProperty(exports, "DrawerContent", {
+  enumerable: true,
+  get: function () {
+    return _react.DrawerContent;
+  }
+});
+Object.defineProperty(exports, "DrawerFooter", {
+  enumerable: true,
+  get: function () {
+    return _react.DrawerFooter;
+  }
+});
+Object.defineProperty(exports, "DrawerHeader", {
+  enumerable: true,
+  get: function () {
+    return _react.DrawerHeader;
+  }
+});
+Object.defineProperty(exports, "DrawerOverlay", {
+  enumerable: true,
+  get: function () {
+    return _react.DrawerOverlay;
+  }
+});
+var _react = require("@chakra-ui/react");
+var _Drawer = _interopRequireDefault(require("./Drawer"));

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

@@ -0,0 +1,106 @@
+"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;

package/dist/components/index.js

@@ -560,6 +560,18 @@ 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,6 +34,12 @@ 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 () {
@@ -143,4 +149,5 @@ 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 _styles11 = _interopRequireDefault(require("./Badge/styles"));
+var _styles12 = _interopRequireDefault(require("./Drawer/styles"));

package/dist/theme/base/shadows.js

@@ -8,7 +8,9 @@ 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
+  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)'
 };
 var _default = (0, _merge.default)(_theme.default.shadows, shadows);
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spothero/ui",
-  "version": "20.2.0",
+  "version": "20.4.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/core": "7.0.0",
+    "@spothero/eslint-config": "6.0.0",
     "@spothero/icons": "7.1.0",
     "@spothero/npm-publisher": "7.0.0",
     "@spothero/prettier-config": "4.0.0",
-    "@spothero/eslint-config": "6.0.0",
-    "@spothero/stylelint-config": "6.0.0",
-    "@spothero/core": "7.0.0"
+    "@spothero/stylelint-config": "6.0.0"
   },
   "dependencies": {
     "@chakra-ui/react": "1.8.8",