@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.
- package/dist/components/Alert/Alert.js +4 -2
- package/dist/components/index.js +0 -12
- package/dist/components/styles.js +1 -8
- package/dist/theme/base/shadows.js +1 -3
- package/package.json +5 -5
- package/dist/components/Drawer/Drawer.js +0 -25
- package/dist/components/Drawer/Drawer.stories.js +0 -39
- package/dist/components/Drawer/index.js +0 -32
- package/dist/components/Drawer/styles/index.js +0 -105
|
@@ -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;
|
package/dist/components/index.js
CHANGED
|
@@ -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
|
|
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/
|
|
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/
|
|
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;
|