@spothero/ui 17.1.0-beta.3 → 17.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.
Files changed (38) hide show
  1. package/dist/components/Alert/Alert.js +29 -18
  2. package/dist/components/Alert/Alert.stories.js +56 -39
  3. package/dist/components/FormControl/FormControl.js +3 -2
  4. package/dist/components/Modal/Modal.js +11 -2
  5. package/dist/components/Toast/Toast.stories.js +102 -0
  6. package/dist/components/index.js +7 -16
  7. package/dist/components/styles.js +12 -20
  8. package/dist/theme/base/index.js +21 -1
  9. package/dist/{components/Alert/styles/index.js → theme/base/notifications.js} +79 -65
  10. package/package.json +6 -6
  11. package/dist/components/Datepicker/Range/DatepickerRange.js +0 -67
  12. package/dist/components/Datepicker/Range/DatepickerRange.stories.js +0 -427
  13. package/dist/components/Datepicker/Range/DatepickerRangeContext.js +0 -80
  14. package/dist/components/Datepicker/Range/components/DateRow.js +0 -261
  15. package/dist/components/Datepicker/Range/components/DatepickerRangeContainer.js +0 -227
  16. package/dist/components/Datepicker/Range/components/DatepickerRangeControls.js +0 -80
  17. package/dist/components/Datepicker/Range/components/index.js +0 -31
  18. package/dist/components/Datepicker/Range/utils/propTypes.js +0 -158
  19. package/dist/components/Datepicker/Single/Datepicker.stories.js +0 -314
  20. package/dist/components/Datepicker/Single/DatepickerContext.js +0 -65
  21. package/dist/components/Datepicker/Single/DatepickerSingle.js +0 -54
  22. package/dist/components/Datepicker/Single/components/DateRow.js +0 -146
  23. package/dist/components/Datepicker/Single/components/DatepickerContainer.js +0 -167
  24. package/dist/components/Datepicker/Single/components/DatepickerControl.js +0 -51
  25. package/dist/components/Datepicker/Single/components/index.js +0 -31
  26. package/dist/components/Datepicker/Single/utils/propTypes.js +0 -88
  27. package/dist/components/Datepicker/common/components/DatepickerDays.js +0 -111
  28. package/dist/components/Datepicker/common/components/DatepickerHeader.js +0 -118
  29. package/dist/components/Datepicker/common/components/DatepickerInput.js +0 -127
  30. package/dist/components/Datepicker/common/components/WithPopoverAnchor.js +0 -23
  31. package/dist/components/Datepicker/common/components/WithPortal.js +0 -26
  32. package/dist/components/Datepicker/common/components/index.js +0 -39
  33. package/dist/components/Datepicker/common/utils/constants.js +0 -43
  34. package/dist/components/Datepicker/common/utils/dateRowCalculations.js +0 -92
  35. package/dist/components/Datepicker/common/utils/generalCalculations.js +0 -71
  36. package/dist/components/Datepicker/common/utils/getWeeksOfMonth.js +0 -51
  37. package/dist/components/Datepicker/common/utils/sharedPropTypes.js +0 -147
  38. package/dist/components/Datepicker/index.js +0 -23
@@ -2,10 +2,18 @@
2
2
 
3
3
  var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
4
4
 
5
- var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
5
+ var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
6
+
7
+ var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
8
+
9
+ var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
6
10
 
7
11
  var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
8
12
 
13
+ var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
14
+
15
+ var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
16
+
9
17
  var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
10
18
 
11
19
  Object.defineProperty(exports, "__esModule", {
@@ -21,8 +29,12 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
21
29
 
22
30
  var _react = _interopRequireWildcard(require("react"));
23
31
 
32
+ var _merge = _interopRequireDefault(require("lodash/merge"));
33
+
24
34
  var _react2 = require("@chakra-ui/react");
25
35
 
36
+ var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
37
+
26
38
  var _times = _interopRequireDefault(require("@spothero/icons/times"));
27
39
 
28
40
  var _filledInfoCircle = _interopRequireDefault(require("@spothero/icons/filled-info-circle"));
@@ -35,7 +47,7 @@ var _Button = _interopRequireDefault(require("../Button/Button"));
35
47
 
36
48
  var _Icon = _interopRequireDefault(require("../Icon/Icon"));
37
49
 
38
- var _styles = require("./styles");
50
+ var _notifications = require("../../theme/base/notifications");
39
51
 
40
52
  var _excluded = ["status", "title", "buttonProps", "buttonText", "buttonOnBottom", "showDismiss", "onDismissClick", "showIcon", "description"];
41
53
 
@@ -45,7 +57,11 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
45
57
 
46
58
  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; }
47
59
 
48
- var statusIconMapping = (_statusIconMapping = {}, (0, _defineProperty2.default)(_statusIconMapping, _styles.STATUSES.WARNING, _filledExclamationCircle.default), (0, _defineProperty2.default)(_statusIconMapping, _styles.STATUSES.SUCCESS, _filledCheckCircle.default), (0, _defineProperty2.default)(_statusIconMapping, _styles.STATUSES.ERROR, _filledExclamationCircle.default), (0, _defineProperty2.default)(_statusIconMapping, _styles.STATUSES.NEUTRAL, _filledInfoCircle.default), _statusIconMapping);
60
+ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
61
+
62
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
63
+
64
+ var statusIconMapping = (_statusIconMapping = {}, (0, _defineProperty2.default)(_statusIconMapping, _notifications.NOTIFICATION_STATUSES.WARNING, _filledExclamationCircle.default), (0, _defineProperty2.default)(_statusIconMapping, _notifications.NOTIFICATION_STATUSES.SUCCESS, _filledCheckCircle.default), (0, _defineProperty2.default)(_statusIconMapping, _notifications.NOTIFICATION_STATUSES.ERROR, _filledExclamationCircle.default), (0, _defineProperty2.default)(_statusIconMapping, _notifications.NOTIFICATION_STATUSES.NEUTRAL, _filledInfoCircle.default), _statusIconMapping);
49
65
  var Alert = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
50
66
  var status = _ref.status,
51
67
  title = _ref.title,
@@ -57,33 +73,28 @@ var Alert = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
57
73
  showIcon = _ref.showIcon,
58
74
  description = _ref.description,
59
75
  props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
60
- var style = (0, _react2.useStyleConfig)('Alert', {
61
- 'data-status': status
62
- });
63
- var IconVariant = statusIconMapping[status];
64
- return /*#__PURE__*/_react.default.createElement(_react2.Alert, (0, _extends2.default)({
76
+ var IconVariant = statusIconMapping[status]; // the issue with storybook breaking with hooks is still a problem, but once that's resolved this should be memoized
77
+
78
+ var style = (0, _merge.default)(_objectSpread({}, _theme.default.components.Alert.baseStyle), _notifications.notificationBaseStyle, (0, _notifications.notificationStatusStyles)(status), (0, _notifications.notificationSizeStyles)(props.size));
79
+ return /*#__PURE__*/_react.default.createElement(_react2.Alert, (0, _extends2.default)({}, style.container, {
65
80
  "data-status": status
66
81
  }, props, {
67
82
  ref: ref
68
- }), showIcon ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
69
- sx: style.icon,
83
+ }), showIcon ? /*#__PURE__*/_react.default.createElement(_Icon.default, (0, _extends2.default)({}, style.icon, {
70
84
  as: IconVariant
71
- }) : null, /*#__PURE__*/_react.default.createElement(_react2.VStack, {
85
+ })) : null, /*#__PURE__*/_react.default.createElement(_react2.VStack, {
72
86
  spacing: 0,
73
87
  alignItems: "flex-start"
74
- }, title ? /*#__PURE__*/_react.default.createElement(_react2.AlertTitle, null, title) : null, description ? /*#__PURE__*/_react.default.createElement(_react2.AlertDescription, null, description) : null, buttonOnBottom && buttonText && buttonProps ? /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({
75
- sx: style.actionButton,
88
+ }, title ? /*#__PURE__*/_react.default.createElement(_react2.AlertTitle, style.title, title) : null, description ? /*#__PURE__*/_react.default.createElement(_react2.AlertDescription, style.description, description) : null, buttonOnBottom && buttonText && buttonProps ? /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({}, style.actionButton, {
76
89
  variant: "tertiary"
77
90
  }, buttonProps), buttonText) : null), /*#__PURE__*/_react.default.createElement(_react2.Flex, {
78
91
  alignItems: "center",
79
92
  marginLeft: "auto"
80
- }, !buttonOnBottom && buttonText && buttonProps ? /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({
81
- sx: style.actionButton,
93
+ }, !buttonOnBottom && buttonText && buttonProps ? /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({}, style.actionButton, {
82
94
  variant: "tertiary"
83
- }, buttonProps), buttonText) : null, showDismiss ? /*#__PURE__*/_react.default.createElement(_Button.default, {
84
- sx: style.dismissButton,
95
+ }, buttonProps), buttonText) : null, showDismiss ? /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({}, style.dismissButton, {
85
96
  onClick: onDismissClick
86
- }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
97
+ }), /*#__PURE__*/_react.default.createElement(_Icon.default, {
87
98
  width: 3,
88
99
  height: "auto",
89
100
  as: _times.default
@@ -1,5 +1,15 @@
1
1
  "use strict";
2
2
 
3
+ var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
4
+
5
+ var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
6
+
7
+ var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
8
+
9
+ var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
10
+
11
+ var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
12
+
3
13
  var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
14
 
5
15
  Object.defineProperty(exports, "__esModule", {
@@ -7,16 +17,27 @@ Object.defineProperty(exports, "__esModule", {
7
17
  });
8
18
  exports.default = exports.Alert = void 0;
9
19
 
20
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
21
+
22
+ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
23
+
10
24
  var _react = _interopRequireDefault(require("react"));
11
25
 
12
26
  var _react2 = require("@chakra-ui/react");
13
27
 
14
- // import {createSelectControl} from 'storybook/utils/create-control';
15
- // import disableArgs from 'storybook/utils/disable-args';
16
- // import Component from './Alert';
28
+ var _createControl = require("storybook/utils/create-control");
29
+
30
+ var _disableArgs = _interopRequireDefault(require("storybook/utils/disable-args"));
31
+
32
+ var _Alert = _interopRequireDefault(require("./Alert"));
33
+
34
+ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
35
+
36
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
37
+
17
38
  var _default = {
18
39
  title: 'v2/Alert',
19
- // component: Component,
40
+ component: _Alert.default,
20
41
  parameters: {
21
42
  removeBaseHtmlClass: true
22
43
  }
@@ -26,38 +47,34 @@ exports.default = _default;
26
47
  var AlertTemplate = function AlertTemplate(props) {
27
48
  return /*#__PURE__*/_react.default.createElement(_react2.VStack, {
28
49
  alignItems: "flex-start"
29
- }, /*#__PURE__*/_react.default.createElement(_react2.Text, null, "Alert story currently broken due to issues between current version of storybook, forwardref, and hooks. Updating storybook will likely help."));
30
- }; // const AlertTemplate = props => (
31
- // <VStack alignItems="flex-start">
32
- // <Text>Status: Success</Text>
33
- // <Component status="success" {...props} />
34
- // <Text>Status: Error</Text>
35
- // <Component status="error" {...props} />
36
- // <Text>Status: Warning</Text>
37
- // <Component status="warning" {...props} />
38
- // <Text>Status: Neutral</Text>
39
- // <Component status="neutral" {...props} />
40
- // </VStack>
41
- // );
42
- // AlertTemplate.propTypes = {};
43
-
44
-
45
- var Alert = AlertTemplate.bind({}); // Alert.argTypes = {
46
- // ...createSelectControl('size', ['sm', 'md', 'lg']),
47
- // ...disableArgs(['buttonProps', 'onDismissClick', 'status']),
48
- // };
49
- // Alert.args = {
50
- // title: 'Hello',
51
- // buttonOnBottom: false,
52
- // buttonText: 'Action',
53
- // description: 'This is an alert.',
54
- // buttonProps: {
55
- // onClick: () => console.log('Action clicked'),
56
- // },
57
- // showDismiss: true,
58
- // onDismissClick: () => console.log('dismissed'),
59
- // showIcon: true,
60
- // size: 'md',
61
- // };
62
-
63
- exports.Alert = Alert;
50
+ }, /*#__PURE__*/_react.default.createElement(_react2.Text, null, "Status: Success"), /*#__PURE__*/_react.default.createElement(_Alert.default, (0, _extends2.default)({
51
+ status: "success"
52
+ }, props)), /*#__PURE__*/_react.default.createElement(_react2.Text, null, "Status: Error"), /*#__PURE__*/_react.default.createElement(_Alert.default, (0, _extends2.default)({
53
+ status: "error"
54
+ }, props)), /*#__PURE__*/_react.default.createElement(_react2.Text, null, "Status: Warning"), /*#__PURE__*/_react.default.createElement(_Alert.default, (0, _extends2.default)({
55
+ status: "warning"
56
+ }, props)), /*#__PURE__*/_react.default.createElement(_react2.Text, null, "Status: Neutral"), /*#__PURE__*/_react.default.createElement(_Alert.default, (0, _extends2.default)({
57
+ status: "neutral"
58
+ }, props)));
59
+ };
60
+
61
+ var Alert = AlertTemplate.bind({});
62
+ exports.Alert = Alert;
63
+ Alert.argTypes = _objectSpread(_objectSpread({}, (0, _createControl.createSelectControl)('size', ['sm', 'md', 'lg'])), (0, _disableArgs.default)(['buttonProps', 'onDismissClick', 'status']));
64
+ Alert.args = {
65
+ title: 'Hello',
66
+ buttonOnBottom: false,
67
+ buttonText: 'Action',
68
+ description: 'This is an alert.',
69
+ buttonProps: {
70
+ onClick: function onClick() {
71
+ return console.log('Action clicked');
72
+ }
73
+ },
74
+ showDismiss: true,
75
+ onDismissClick: function onDismissClick() {
76
+ return console.log('dismissed');
77
+ },
78
+ showIcon: true,
79
+ size: 'md'
80
+ };
@@ -23,7 +23,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
23
23
 
24
24
  var _react2 = require("@chakra-ui/react");
25
25
 
26
- var _excluded = ["children", "label", "inputId", "helperText", "errorMessage", "isFieldset"];
26
+ var _excluded = ["children", "label", "inputId", "helperText", "errorMessage", "isFieldset", "isOptional"];
27
27
 
28
28
  function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
29
29
 
@@ -36,6 +36,7 @@ var FormControl = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
36
36
  helperText = _ref.helperText,
37
37
  errorMessage = _ref.errorMessage,
38
38
  isFieldset = _ref.isFieldset,
39
+ isOptional = _ref.isOptional,
39
40
  props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
40
41
  return /*#__PURE__*/_react.default.createElement(_react2.FormControl, (0, _extends2.default)({}, props, {
41
42
  ref: ref,
@@ -49,7 +50,7 @@ var FormControl = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
49
50
  htmlFor: inputId,
50
51
  as: isFieldset ? 'legend' : 'label',
51
52
  requiredIndicator: "",
52
- optionalIndicator: props !== null && props !== void 0 && props.isOptional && !(props !== null && props !== void 0 && props.isRequired) ? /*#__PURE__*/_react.default.createElement(_react2.Text, {
53
+ optionalIndicator: isOptional && !(props !== null && props !== void 0 && props.isRequired) ? /*#__PURE__*/_react.default.createElement(_react2.Text, {
53
54
  marginLeft: 1,
54
55
  as: "span",
55
56
  variant: "caption",
@@ -31,6 +31,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
31
31
  * @param {React.ReactNode} children - The header text of the modal
32
32
  * @param {()=>void} [onClose] - Callback invoked to close the Modal. Not required, but strongly suggested.
33
33
  * @param {('sm'|'md'|'lg')} [size] - The size of the modal. If unspecified, uses "md" styles.
34
+ * @param {object} [contentStyling] - Style props to be passed into the modal content
35
+ * @param {object} [headerStyling] - Style props to be passed into the modal header
36
+ * @param {object} [footerStyling] - Style props to be passed into the modal footer
34
37
  * @param {React.ReactNode} [header] - The node for the header. Likely just a string.
35
38
  * @param {React.ReactNode} [footer] - The node for the footer. Likely some control buttons.
36
39
  * @param {React.ReactNode} [hideCloseButton] - Whether or not to show the close button
@@ -41,12 +44,18 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
41
44
  footer = props.footer,
42
45
  children = props.children,
43
46
  hideCloseButton = props.hideCloseButton,
44
- isMobile = props.isMobile;
47
+ isMobile = props.isMobile,
48
+ _props$contentStyling = props.contentStyling,
49
+ contentStyling = _props$contentStyling === void 0 ? {} : _props$contentStyling,
50
+ _props$headerStyling = props.headerStyling,
51
+ headerStyling = _props$headerStyling === void 0 ? {} : _props$headerStyling,
52
+ _props$footerStyling = props.footerStyling,
53
+ footerStyling = _props$footerStyling === void 0 ? {} : _props$footerStyling;
45
54
  return /*#__PURE__*/_react.default.createElement(_react2.Modal, (0, _extends2.default)({
46
55
  motionPreset: isMobile ? 'slideInBottom' : 'scale'
47
56
  }, props, {
48
57
  ref: ref
49
- }), /*#__PURE__*/_react.default.createElement(_react2.ModalOverlay, null), /*#__PURE__*/_react.default.createElement(_react2.ModalContent, null, header ? /*#__PURE__*/_react.default.createElement(_react2.ModalHeader, null, header) : /*#__PURE__*/_react.default.createElement(_react2.Box, (0, _header.default)(props)), hideCloseButton ? null : /*#__PURE__*/_react.default.createElement(_react2.ModalCloseButton, null), /*#__PURE__*/_react.default.createElement(_react2.ModalBody, null, children), footer ? /*#__PURE__*/_react.default.createElement(_react2.ModalFooter, null, footer) : null));
58
+ }), /*#__PURE__*/_react.default.createElement(_react2.ModalOverlay, null), /*#__PURE__*/_react.default.createElement(_react2.ModalContent, contentStyling, header ? /*#__PURE__*/_react.default.createElement(_react2.ModalHeader, headerStyling, header) : /*#__PURE__*/_react.default.createElement(_react2.Box, (0, _header.default)(props)), hideCloseButton ? null : /*#__PURE__*/_react.default.createElement(_react2.ModalCloseButton, null), /*#__PURE__*/_react.default.createElement(_react2.ModalBody, null, children), footer ? /*#__PURE__*/_react.default.createElement(_react2.ModalFooter, footerStyling, footer) : null));
50
59
  });
51
60
  var _default = Modal;
52
61
  exports.default = _default;
@@ -0,0 +1,102 @@
1
+ "use strict";
2
+
3
+ var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
4
+
5
+ var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
6
+
7
+ var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
8
+
9
+ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
10
+
11
+ Object.defineProperty(exports, "__esModule", {
12
+ value: true
13
+ });
14
+ exports.default = exports.Toast = void 0;
15
+
16
+ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
17
+
18
+ var _react = _interopRequireWildcard(require("react"));
19
+
20
+ var _Alert = _interopRequireDefault(require("../Alert/Alert"));
21
+
22
+ var _Button = _interopRequireDefault(require("../Button/Button"));
23
+
24
+ var _react2 = require("@chakra-ui/react");
25
+
26
+ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
27
+
28
+ 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; }
29
+
30
+ var _default = {
31
+ title: 'v2/Toast',
32
+ component: _Alert.default,
33
+ parameters: {
34
+ importBy: 'useToast',
35
+ removeBaseHtmlClass: true,
36
+ chakraLink: 'https://chakra-ui.com/docs/components/toast'
37
+ }
38
+ };
39
+ exports.default = _default;
40
+
41
+ var Template = function Template(props) {
42
+ var toast = (0, _react2.useToast)();
43
+
44
+ var addToast = function addToast() {
45
+ var toastRef = /*#__PURE__*/(0, _react.createRef)();
46
+
47
+ var close = function close() {
48
+ if (toastRef.current) {
49
+ toast.close(toastRef.current);
50
+ }
51
+ };
52
+
53
+ toastRef.current = toast({
54
+ position: 'bottom-left',
55
+ duration: 5000,
56
+ render: function render() {
57
+ return /*#__PURE__*/_react.default.createElement(_Alert.default, (0, _extends2.default)({}, props, {
58
+ onDismissClick: close
59
+ }));
60
+ }
61
+ });
62
+ };
63
+
64
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.VStack, {
65
+ alignItems: "flex-start",
66
+ marginBottom: 4
67
+ }, /*#__PURE__*/_react.default.createElement(_react2.Text, null, "Note that Toast is not actually a component in and of itself. The \"Toast\" in these examples is created by using the useToast hook provided by Chakra and then using our Alert component as the custom component that is is rendered.")), /*#__PURE__*/_react.default.createElement(_Button.default, {
68
+ onClick: addToast
69
+ }, "Show Toast"));
70
+ };
71
+
72
+ var Toast = Template.bind({});
73
+ exports.Toast = Toast;
74
+ Toast.argTypes = {
75
+ buttonProps: {
76
+ table: {
77
+ disable: true
78
+ }
79
+ },
80
+ buttonText: {
81
+ table: {
82
+ disable: true
83
+ }
84
+ },
85
+ buttonOnBottom: {
86
+ table: {
87
+ disable: true
88
+ }
89
+ },
90
+ onDismissClick: {
91
+ table: {
92
+ disable: true
93
+ }
94
+ }
95
+ };
96
+ Toast.args = {
97
+ title: 'Default Title',
98
+ description: 'This is a basic description',
99
+ status: 'neutral',
100
+ showDismiss: true,
101
+ showIcon: true
102
+ };
@@ -53,8 +53,6 @@ var _exportNames = {
53
53
  RadioGroup: true,
54
54
  AutoSuggestSelect: true,
55
55
  Badge: true,
56
- DatepickerSingle: true,
57
- DatepickerRange: true,
58
56
  Box: true,
59
57
  Flex: true,
60
58
  Fade: true,
@@ -63,6 +61,7 @@ var _exportNames = {
63
61
  HStack: true,
64
62
  useToken: true,
65
63
  useTheme: true,
64
+ useToast: true,
66
65
  ScaleFade: true,
67
66
  SlideFade: true,
68
67
  createIcon: true,
@@ -179,18 +178,6 @@ Object.defineProperty(exports, "Container", {
179
178
  return _Container.default;
180
179
  }
181
180
  });
182
- Object.defineProperty(exports, "DatepickerRange", {
183
- enumerable: true,
184
- get: function get() {
185
- return _Datepicker.DatepickerRange;
186
- }
187
- });
188
- Object.defineProperty(exports, "DatepickerSingle", {
189
- enumerable: true,
190
- get: function get() {
191
- return _Datepicker.DatepickerSingle;
192
- }
193
- });
194
181
  Object.defineProperty(exports, "Divider", {
195
182
  enumerable: true,
196
183
  get: function get() {
@@ -485,6 +472,12 @@ Object.defineProperty(exports, "useTheme", {
485
472
  return _react.useTheme;
486
473
  }
487
474
  });
475
+ Object.defineProperty(exports, "useToast", {
476
+ enumerable: true,
477
+ get: function get() {
478
+ return _react.useToast;
479
+ }
480
+ });
488
481
  Object.defineProperty(exports, "useToken", {
489
482
  enumerable: true,
490
483
  get: function get() {
@@ -584,8 +577,6 @@ var _AutoSuggestSelect = require("./AutoSuggestSelect");
584
577
 
585
578
  var _Badge = _interopRequireDefault(require("./Badge/Badge"));
586
579
 
587
- var _Datepicker = require("./Datepicker");
588
-
589
580
  var _react = require("@chakra-ui/react");
590
581
 
591
582
  function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -11,16 +11,10 @@ Object.defineProperty(exports, "Accordion", {
11
11
  return _styles2.default;
12
12
  }
13
13
  });
14
- Object.defineProperty(exports, "Alert", {
15
- enumerable: true,
16
- get: function get() {
17
- return _styles6.default;
18
- }
19
- });
20
14
  Object.defineProperty(exports, "Badge", {
21
15
  enumerable: true,
22
16
  get: function get() {
23
- return _styles12.default;
17
+ return _styles11.default;
24
18
  }
25
19
  });
26
20
  Object.defineProperty(exports, "Button", {
@@ -56,7 +50,7 @@ Object.defineProperty(exports, "Heading", {
56
50
  Object.defineProperty(exports, "Input", {
57
51
  enumerable: true,
58
52
  get: function get() {
59
- return _styles9.default;
53
+ return _styles8.default;
60
54
  }
61
55
  });
62
56
  Object.defineProperty(exports, "Link", {
@@ -74,19 +68,19 @@ Object.defineProperty(exports, "List", {
74
68
  Object.defineProperty(exports, "Modal", {
75
69
  enumerable: true,
76
70
  get: function get() {
77
- return _styles10.default;
71
+ return _styles9.default;
78
72
  }
79
73
  });
80
74
  Object.defineProperty(exports, "Popover", {
81
75
  enumerable: true,
82
76
  get: function get() {
83
- return _styles8.default;
77
+ return _styles7.default;
84
78
  }
85
79
  });
86
80
  Object.defineProperty(exports, "Radio", {
87
81
  enumerable: true,
88
82
  get: function get() {
89
- return _styles11.default;
83
+ return _styles10.default;
90
84
  }
91
85
  });
92
86
  Object.defineProperty(exports, "Select", {
@@ -110,7 +104,7 @@ Object.defineProperty(exports, "Spinner", {
110
104
  Object.defineProperty(exports, "Switch", {
111
105
  enumerable: true,
112
106
  get: function get() {
113
- return _styles7.default;
107
+ return _styles6.default;
114
108
  }
115
109
  });
116
110
  Object.defineProperty(exports, "Table", {
@@ -158,18 +152,16 @@ var _styles4 = _interopRequireDefault(require("./Select/styles"));
158
152
 
159
153
  var _styles5 = _interopRequireDefault(require("./Checkbox/styles"));
160
154
 
161
- var _styles6 = _interopRequireDefault(require("./Alert/styles"));
162
-
163
- var _styles7 = _interopRequireDefault(require("./Switch/styles"));
155
+ var _styles6 = _interopRequireDefault(require("./Switch/styles"));
164
156
 
165
- var _styles8 = _interopRequireDefault(require("./Popover/styles"));
157
+ var _styles7 = _interopRequireDefault(require("./Popover/styles"));
166
158
 
167
- var _styles9 = _interopRequireDefault(require("./Input/styles"));
159
+ var _styles8 = _interopRequireDefault(require("./Input/styles"));
168
160
 
169
- var _styles10 = _interopRequireDefault(require("./Modal/styles"));
161
+ var _styles9 = _interopRequireDefault(require("./Modal/styles"));
170
162
 
171
- var _styles11 = _interopRequireDefault(require("./Radio/styles"));
163
+ var _styles10 = _interopRequireDefault(require("./Radio/styles"));
172
164
 
173
165
  var _Skeleton = _interopRequireDefault(require("./Skeleton/Skeleton.styles"));
174
166
 
175
- var _styles12 = _interopRequireDefault(require("./Badge/styles"));
167
+ var _styles11 = _interopRequireDefault(require("./Badge/styles"));
@@ -5,6 +5,12 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
+ Object.defineProperty(exports, "NOTIFICATION_STATUSES", {
9
+ enumerable: true,
10
+ get: function get() {
11
+ return _notifications.NOTIFICATION_STATUSES;
12
+ }
13
+ });
8
14
  Object.defineProperty(exports, "breakpoints", {
9
15
  enumerable: true,
10
16
  get: function get() {
@@ -35,6 +41,18 @@ Object.defineProperty(exports, "fonts", {
35
41
  return _typography.fonts;
36
42
  }
37
43
  });
44
+ Object.defineProperty(exports, "notificationBaseStyle", {
45
+ enumerable: true,
46
+ get: function get() {
47
+ return _notifications.notificationBaseStyle;
48
+ }
49
+ });
50
+ Object.defineProperty(exports, "notificationStatusStyles", {
51
+ enumerable: true,
52
+ get: function get() {
53
+ return _notifications.notificationStatusStyles;
54
+ }
55
+ });
38
56
  Object.defineProperty(exports, "sizes", {
39
57
  enumerable: true,
40
58
  get: function get() {
@@ -56,4 +74,6 @@ var _zindices = _interopRequireDefault(require("./zindices"));
56
74
 
57
75
  var _breakpoints = _interopRequireDefault(require("./breakpoints"));
58
76
 
59
- var _typography = require("./typography");
77
+ var _typography = require("./typography");
78
+
79
+ var _notifications = require("./notifications");