@spothero/ui 20.0.2-beta.1 → 20.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -36,9 +36,10 @@ const Alert = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
36
36
  onDismissClick,
37
37
  showIcon,
38
38
  description,
39
+ icon,
39
40
  ...props
40
41
  } = _ref;
41
- const IconVariant = statusIconMapping[status];
42
+ const IconVariant = icon || statusIconMapping[status];
42
43
  // the issue with storybook breaking with hooks is still a problem, but once that's resolved this should be memoized
43
44
  const style = (0, _merge.default)({
44
45
  ..._theme.default.components.Alert.baseStyle
@@ -77,7 +78,8 @@ Alert.defaultProps = {
77
78
  onDismissClick: null,
78
79
  showIcon: true,
79
80
  description: null,
80
- size: 'md'
81
+ size: 'md',
82
+ icon: null
81
83
  };
82
84
  var _default = Alert;
83
85
  exports.default = _default;
@@ -483,18 +483,6 @@ Object.keys(_Button).forEach(function (key) {
483
483
  }
484
484
  });
485
485
  });
486
- var _Drawer = require("./Drawer");
487
- Object.keys(_Drawer).forEach(function (key) {
488
- if (key === "default" || key === "__esModule") return;
489
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
490
- if (key in exports && exports[key] === _Drawer[key]) return;
491
- Object.defineProperty(exports, key, {
492
- enumerable: true,
493
- get: function () {
494
- return _Drawer[key];
495
- }
496
- });
497
- });
498
486
  var _Skeleton = require("./Skeleton");
499
487
  Object.keys(_Skeleton).forEach(function (key) {
500
488
  if (key === "default" || key === "__esModule") return;
@@ -34,12 +34,6 @@ Object.defineProperty(exports, "Divider", {
34
34
  return _Divider.default;
35
35
  }
36
36
  });
37
- Object.defineProperty(exports, "Drawer", {
38
- enumerable: true,
39
- get: function () {
40
- return _styles12.default;
41
- }
42
- });
43
37
  Object.defineProperty(exports, "GridItem", {
44
38
  enumerable: true,
45
39
  get: function () {
@@ -149,5 +143,4 @@ var _styles8 = _interopRequireDefault(require("./Input/styles"));
149
143
  var _styles9 = _interopRequireDefault(require("./Modal/styles"));
150
144
  var _styles10 = _interopRequireDefault(require("./Radio/styles"));
151
145
  var _Skeleton = _interopRequireDefault(require("./Skeleton/Skeleton.styles"));
152
- var _styles11 = _interopRequireDefault(require("./Badge/styles"));
153
- var _styles12 = _interopRequireDefault(require("./Drawer/styles"));
146
+ var _styles11 = _interopRequireDefault(require("./Badge/styles"));
@@ -8,9 +8,7 @@ exports.default = void 0;
8
8
  var _merge = _interopRequireDefault(require("lodash/merge"));
9
9
  var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
10
10
  const shadows = {
11
- outline: '0 0 0 3px rgba(91, 170, 250, 0.7)',
12
- // primary.400, 70% opacity
13
- drawer: '-8px 0 16px 0 rgba(33,33,33,.1)'
11
+ outline: '0 0 0 3px rgba(91, 170, 250, 0.7)' // primary.400, 70% opacity
14
12
  };
15
13
  var _default = (0, _merge.default)(_theme.default.shadows, shadows);
16
14
  exports.default = _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spothero/ui",
3
- "version": "20.0.2-beta.1",
3
+ "version": "20.1.0",
4
4
  "description": "SpotHero's React component UI library.",
5
5
  "main": "./dist/components/index.js",
6
6
  "exports": "./dist/components/index.js",
@@ -96,13 +96,13 @@
96
96
  "css-loader": "5.1.3",
97
97
  "sass-loader": "10.2.1",
98
98
  "@spothero/babel-preset-spothero": "5.0.0",
99
- "@spothero/browserslist-config": "4.0.0",
99
+ "@spothero/core": "7.0.0",
100
100
  "@spothero/eslint-config": "6.0.0",
101
101
  "@spothero/prettier-config": "4.0.0",
102
- "@spothero/npm-publisher": "7.0.0",
103
- "@spothero/core": "7.0.0",
104
102
  "@spothero/stylelint-config": "6.0.0",
105
- "@spothero/icons": "7.0.0"
103
+ "@spothero/browserslist-config": "4.0.0",
104
+ "@spothero/icons": "7.1.0",
105
+ "@spothero/npm-publisher": "7.0.0"
106
106
  },
107
107
  "dependencies": {
108
108
  "@chakra-ui/react": "1.8.8",
@@ -1,25 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.default = void 0;
8
- var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
9
- var _react = _interopRequireWildcard(require("react"));
10
- var _react2 = require("@chakra-ui/react");
11
- 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); }
12
- 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; }
13
- const Drawer = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
14
- let {
15
- children,
16
- ...props
17
- } = _ref;
18
- return /*#__PURE__*/_react.default.createElement(_react2.Drawer, (0, _extends2.default)({
19
- placement: "right"
20
- }, props, {
21
- ref: ref
22
- }), /*#__PURE__*/_react.default.createElement(_react2.DrawerOverlay, null), /*#__PURE__*/_react.default.createElement(_react2.DrawerContent, null, /*#__PURE__*/_react.default.createElement(_react2.DrawerCloseButton, null), children));
23
- });
24
- var _default = Drawer;
25
- exports.default = _default;
@@ -1,39 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.default = exports.Drawer = void 0;
8
- var _react = _interopRequireWildcard(require("react"));
9
- var _Text = _interopRequireDefault(require("../Text/Text"));
10
- var _Button = require("../Button");
11
- var _index = require("./index");
12
- 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); }
13
- 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; }
14
- var _default = {
15
- title: 'v2/Drawer',
16
- component: _index.Drawer,
17
- subcomponents: {
18
- DrawerHeader: _index.DrawerHeader,
19
- DrawerBody: _index.DrawerBody,
20
- DrawerFooter: _index.DrawerFooter
21
- },
22
- parameters: {
23
- importBy: 'Drawer',
24
- removeBaseHtmlClass: true,
25
- chakraLink: 'https://chakra-ui.com/docs/components/drawer'
26
- }
27
- };
28
- exports.default = _default;
29
- const Drawer = props => {
30
- const [isOpen, setIsOpen] = (0, _react.useState)(false);
31
- const toggleDrawer = () => setIsOpen(prevState => !prevState);
32
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.Button, {
33
- onClick: toggleDrawer
34
- }, "Open"), /*#__PURE__*/_react.default.createElement(_index.Drawer, {
35
- isOpen: isOpen,
36
- onClose: toggleDrawer
37
- }, /*#__PURE__*/_react.default.createElement(_index.DrawerHeader, null, "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"))));
38
- };
39
- exports.Drawer = Drawer;
@@ -1,32 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- Object.defineProperty(exports, "Drawer", {
8
- enumerable: true,
9
- get: function () {
10
- return _Drawer.default;
11
- }
12
- });
13
- Object.defineProperty(exports, "DrawerBody", {
14
- enumerable: true,
15
- get: function () {
16
- return _react.DrawerBody;
17
- }
18
- });
19
- Object.defineProperty(exports, "DrawerFooter", {
20
- enumerable: true,
21
- get: function () {
22
- return _react.DrawerFooter;
23
- }
24
- });
25
- Object.defineProperty(exports, "DrawerHeader", {
26
- enumerable: true,
27
- get: function () {
28
- return _react.DrawerHeader;
29
- }
30
- });
31
- var _react = require("@chakra-ui/react");
32
- var _Drawer = _interopRequireDefault(require("./Drawer"));
@@ -1,105 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.default = void 0;
8
- var _merge = _interopRequireDefault(require("lodash/merge"));
9
- var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
10
- const body = _ref => {
11
- let {
12
- hasFooter,
13
- ...props
14
- } = _ref;
15
- return {
16
- overflowY: 'auto',
17
- padding: 6,
18
- paddingBottom: hasFooter ? 24 : 6
19
- };
20
- };
21
- const footer = props => {
22
- return {
23
- padding: 6,
24
- backgroundColor: 'white',
25
- position: 'absolute',
26
- bottom: 0,
27
- width: '100%'
28
- };
29
- };
30
- const header = props => {
31
- return {
32
- paddingY: 3,
33
- paddingLeft: 6,
34
- paddingRight: 14,
35
- borderBottom: '1px solid',
36
- borderBottomColor: 'gray.100'
37
- };
38
- };
39
- const closeButton = props => {
40
- return {
41
- width: 8,
42
- height: 8,
43
- position: 'absolute',
44
- top: 2,
45
- right: 3,
46
- fontSize: 'xs',
47
- background: 'transparent',
48
- borderRadius: 'md',
49
- display: 'flex',
50
- alignItems: 'center',
51
- justifyContent: 'center',
52
- flexShrink: 0,
53
- transitionProperty: 'common',
54
- transitionDuration: 'normal',
55
- outline: 'transparent solid 2px',
56
- outlineOffset: '2px',
57
- color: 'gray.600',
58
- _hover: {
59
- color: 'black',
60
- background: 'gray.100'
61
- },
62
- _focus: {
63
- outlineColor: 'primary.default'
64
- }
65
- };
66
- };
67
- const dialogContainer = props => {
68
- return {
69
- zIndex: 'layer2',
70
- backgroundColor: 'transparent'
71
- };
72
- };
73
- const dialog = props => {
74
- return {
75
- backgroundColor: 'white',
76
- boxShadow: 'drawer'
77
- };
78
- };
79
- const baseStyle = props => ({
80
- body: body(props),
81
- footer: footer(props),
82
- header: header(props),
83
- dialog: dialog(props),
84
- closeButton: closeButton(props),
85
- dialogContainer: dialogContainer(props)
86
- });
87
- const defaultProps = {
88
- size: 'xs'
89
- };
90
- const sizes = {
91
- xs: {
92
- dialog: {
93
- maxWidth: {
94
- base: '100vw',
95
- mobileXL: 80
96
- }
97
- }
98
- }
99
- };
100
- var _default = (0, _merge.default)(_theme.default.components.Drawer, {
101
- defaultProps,
102
- baseStyle,
103
- sizes
104
- });
105
- exports.default = _default;