@pingux/astro 2.54.0-alpha.2 → 2.54.0-alpha.4

package/lib/cjs/components/Messages/Message.js

@@ -1,9 +1,15 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 _Object$defineProperty(exports, "__esModule", {
   value: true
@@ -15,14 +21,17 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _CloseIcon = _interopRequireDefault(require("@pingux/mdi-react/CloseIcon"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ = require("../..");
 var _useStatusClasses4 = _interopRequireDefault(require("../../hooks/useStatusClasses"));
-var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+var _statusProp = require("../../utils/docUtils/statusProp");
 var _NoticeIcon = require("../Icon/NoticeIcon");
 var _react2 = require("@emotion/react");
 var _excluded = ["color"];
 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); }
 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; }
+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; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var ARIA_STATUSES = {
   SUCCESS: 'Success Message',
   ERROR: 'Error Message',
@@ -47,26 +56,28 @@ var CloseButton = function CloseButton(_ref) {
     }
   }));
 };
+CloseButton.propTypes = {
+  color: _propTypes["default"].string
+};
 var Message = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
   var className = _ref2.className,
     item = _ref2.item,
     onClose = _ref2.onClose;
   var key = item.key,
     itemProps = item.props;
-  var _ref3 = itemProps,
-    children = _ref3.children,
-    _ref3$status = _ref3.status,
-    status = _ref3$status === void 0 ? _statuses["default"].DEFAULT : _ref3$status,
-    bg = _ref3.bg,
-    color = _ref3.color,
-    icon = _ref3.icon,
-    _ref3$isHidden = _ref3.isHidden,
-    isHidden = _ref3$isHidden === void 0 ? false : _ref3$isHidden,
-    dataId = _ref3['data-id'];
+  var children = itemProps.children,
+    _itemProps$status = itemProps.status,
+    status = _itemProps$status === void 0 ? 'default' : _itemProps$status,
+    bg = itemProps.bg,
+    color = itemProps.color,
+    icon = itemProps.icon,
+    _itemProps$isHidden = itemProps.isHidden,
+    isHidden = _itemProps$isHidden === void 0 ? false : _itemProps$isHidden,
+    dataId = itemProps['data-id'];
   var _useStatusClasses = (0, _useStatusClasses4["default"])(className, (0, _defineProperty2["default"])({}, "is-".concat(status), true)),
     statusClasses = _useStatusClasses.classNames;
   var onCloseHandler = function onCloseHandler() {
-    if (onClose && key) {
+    if (onClose) {
       onClose(key);
     }
   };
@@ -76,8 +87,7 @@ var Message = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
     innerHeight = _useState2[0],
     setInnerHeight = _useState2[1];
   (0, _react.useLayoutEffect)(function () {
-    var _innerRef$current$cli, _innerRef$current;
-    setInnerHeight((_innerRef$current$cli = (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.clientHeight) !== null && _innerRef$current$cli !== void 0 ? _innerRef$current$cli : 0);
+    setInnerHeight(innerRef.current.clientHeight);
   }, [children]);
   var _useStatusClasses3 = (0, _useStatusClasses4["default"])(className, {
       isHidden: isHidden
@@ -135,5 +145,25 @@ var Message = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
     color: color
   }))));
 });
+Message.propTypes = {
+  item: _propTypes["default"].shape({
+    key: _propTypes["default"].string,
+    props: _propTypes["default"].shape({
+      children: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
+      /* Background color */
+      bg: _propTypes["default"].string,
+      /* Text color */
+      color: _propTypes["default"].string,
+      /* Message icon */
+      icon: _propTypes["default"].elementType,
+      /* Hides the message with an animated transition */
+      isHidden: _propTypes["default"].bool,
+      'data-id': _propTypes["default"].string,
+      status: _objectSpread({}, _statusProp.statusPropTypes).status
+    })
+  }),
+  /* Callback for clicking the message's close button */
+  onClose: _propTypes["default"].func
+};
 var _default = Message;
 exports["default"] = _default;

package/lib/cjs/components/Messages/Messages.js

@@ -26,16 +26,19 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 var _react = _interopRequireWildcard(require("react"));
 var _collections = require("@react-stately/collections");
 var _list = require("@react-stately/list");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _statusProp = require("../../utils/docUtils/statusProp");
 var _Box = _interopRequireDefault(require("../Box"));
 var _Message = _interopRequireDefault(require("./Message"));
 var _react2 = require("@emotion/react");
-var _excluded = ["onClose"];
+var _excluded = ["items", "onClose"];
 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); }
 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; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty2(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Messages = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var onClose = props.onClose,
+  var items = props.items,
+    onClose = props.onClose,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _useState = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -79,6 +82,16 @@ var Messages = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     });
   }));
 });
+Messages.propTypes = {
+  /* For use with [dynamic collections](https://react-spectrum.adobe.com/react-stately/collections.html#dynamic-collections). */
+  items: _propTypes["default"].arrayOf(_propTypes["default"].shape(_objectSpread({
+    key: _propTypes["default"].string,
+    text: _propTypes["default"].string,
+    node: _propTypes["default"].node
+  }, _statusProp.statusPropTypes))),
+  /* Callback for clicking the message's close button */
+  onClose: _propTypes["default"].func
+};
 Messages.defaultProps = {
   items: []
 };

package/lib/cjs/components/Messages/Messages.reducer.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.multiMessagesReducer = exports.messagesReducer = exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _utils = require("./utils");
+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; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var messagesReducer = _utils.messagesReducer;
+exports.messagesReducer = messagesReducer;
+var multiMessagesReducer = _utils.multiMessagesReducer;
+exports.multiMessagesReducer = multiMessagesReducer;
+var makeShowMessage = function makeShowMessage(status, timeout) {
+  return function (text) {
+    return messagesReducer.actions.showMessage({
+      text: text,
+      status: status
+    }, timeout);
+  };
+};
+var makeMultiShowMessage = function makeMultiShowMessage(status, timeout) {
+  return function (container, text) {
+    return multiMessagesReducer.actions.showMessage(container, {
+      text: text,
+      status: status
+    }, timeout);
+  };
+};
+messagesReducer.actions = _objectSpread(_objectSpread({}, messagesReducer.actions), {}, {
+  showSuccessMessage: makeShowMessage('success', 3000),
+  showErrorMessage: makeShowMessage('error', -1),
+  showWarningMessage: makeShowMessage('warning', -1)
+});
+multiMessagesReducer.actions = _objectSpread(_objectSpread({}, multiMessagesReducer.actions), {}, {
+  showSuccessMessage: makeMultiShowMessage('success', 3000),
+  showCriticalMessage: makeMultiShowMessage('error', -1),
+  showWarningMessage: makeMultiShowMessage('warning', -1)
+});
+var _default = messagesReducer;
+exports["default"] = _default;

package/lib/cjs/components/Messages/Messages.stories.js

@@ -29,7 +29,7 @@ var _AccountIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountIcon
 var _storybookAddonDesigns = require("storybook-addon-designs");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
-var _figmaLinks = require("../../utils/designUtils/figmaLinks");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks.ts");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _index2 = require("./index");
 var _Messages = _interopRequireDefault(require("./Messages.mdx"));
@@ -73,15 +73,15 @@ var messages = [{
 }, {
   key: 'message2',
   text: loremText,
-  status: _statuses["default"].SUCCESS
+  status: 'success'
 }, {
   key: 'message3',
   text: loremText,
-  status: _statuses["default"].WARNING
+  status: 'warning'
 }, {
   key: 'message4',
   text: loremText,
-  status: _statuses["default"].ERROR
+  status: 'error'
 }];
 var Default = function Default(args) {
   return (0, _react2.jsx)(_index.Messages, args, (0, _react2.jsx)(_reactStately.Item, {
@@ -90,7 +90,7 @@ var Default = function Default(args) {
   }, loremText), (0, _react2.jsx)(_reactStately.Item, {
     key: "message2",
     "data-id": "message2",
-    status: _statuses["default"].SUCCESS
+    status: "success"
   }, loremText));
 };
 exports.Default = Default;
@@ -101,26 +101,18 @@ Default.parameters = {
   }
 };
 var DefaultDynamic = function DefaultDynamic(args) {
-  return (0, _react2.jsx)(_index.Messages, (0, _extends2["default"])({}, args, {
-    items: messages
-  }), function (item) {
-    return (0, _react2.jsx)(_reactStately.Item, item, item.text);
-  });
+  return (
+    // messages = [{...}]
+    (0, _react2.jsx)(_index.Messages, (0, _extends2["default"])({}, args, {
+      items: messages
+    }), function (item) {
+      return (0, _react2.jsx)(_reactStately.Item, item, item.text);
+    })
+  );
 };
-
-// Added to bypass color contrast in safari
 exports.DefaultDynamic = DefaultDynamic;
-DefaultDynamic.parameters = {
-  a11y: {
-    config: {
-      rules: [{
-        id: 'color-contrast',
-        enabled: false
-      }]
-    }
-  }
-};
 var Controlled = function Controlled(args) {
+  // messages = [{...}]
   var _useState = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     items = _useState2[0],
@@ -147,19 +139,7 @@ var Controlled = function Controlled(args) {
     return (0, _react2.jsx)(_reactStately.Item, item, item.text);
   });
 };
-
-// Added to bypass color contrast in safari
 exports.Controlled = Controlled;
-Controlled.parameters = {
-  a11y: {
-    config: {
-      rules: [{
-        id: 'color-contrast',
-        enabled: false
-      }]
-    }
-  }
-};
 var ControlledWithButton = function ControlledWithButton(args) {
   var _useState3 = (0, _react.useState)([]),
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
@@ -194,19 +174,7 @@ var ControlledWithButton = function ControlledWithButton(args) {
     return (0, _react2.jsx)(_reactStately.Item, item, item.text);
   }));
 };
-
-// Added to bypass color contrast in safari
 exports.ControlledWithButton = ControlledWithButton;
-ControlledWithButton.parameters = {
-  a11y: {
-    config: {
-      rules: [{
-        id: 'color-contrast',
-        enabled: false
-      }]
-    }
-  }
-};
 var WithCustomColorsAndIcons = function WithCustomColorsAndIcons(args) {
   return (0, _react2.jsx)(_index.Messages, args, (0, _react2.jsx)(_reactStately.Item, {
     bg: "accent.99",
@@ -214,19 +182,7 @@ var WithCustomColorsAndIcons = function WithCustomColorsAndIcons(args) {
     icon: _AccountIcon["default"]
   }, loremText));
 };
-
-// Added to bypass color contrast in safari
 exports.WithCustomColorsAndIcons = WithCustomColorsAndIcons;
-WithCustomColorsAndIcons.parameters = {
-  a11y: {
-    config: {
-      rules: [{
-        id: 'color-contrast',
-        enabled: false
-      }]
-    }
-  }
-};
 var UseReducer = function UseReducer() {
   // import { messagesReducer as messagesReducerCore } from '@pingux/astro';
   // const messagesReducer = messagesReducerCore;
@@ -241,7 +197,7 @@ var UseReducer = function UseReducer() {
   //   showWarningMessage: makeShowMessage('warning', -1),
   // };
 
-  var _useReducer = (0, _react.useReducer)(_index2.messagesReducerStory, []),
+  var _useReducer = (0, _react.useReducer)(_index2.messagesReducerStory),
     _useReducer2 = (0, _slicedToArray2["default"])(_useReducer, 2),
     items = _useReducer2[0],
     dispatch = _useReducer2[1];
@@ -269,19 +225,7 @@ var UseReducer = function UseReducer() {
     return (0, _react2.jsx)(_reactStately.Item, item, item.text);
   }));
 };
-
-// Added to bypass color contrast in safari
 exports.UseReducer = UseReducer;
-UseReducer.parameters = {
-  a11y: {
-    config: {
-      rules: [{
-        id: 'color-contrast',
-        enabled: false
-      }]
-    }
-  }
-};
 var UseReducerWithMultipleContainers = function UseReducerWithMultipleContainers() {
   var _useReducer3 = (0, _react.useReducer)(_index2.multiMessagesReducerStory, {
       'container-one': [],
@@ -333,19 +277,7 @@ var UseReducerWithMultipleContainers = function UseReducerWithMultipleContainers
     return (0, _react2.jsx)(_reactStately.Item, item, item.text);
   }));
 };
-
-// Added to bypass color contrast in safari
 exports.UseReducerWithMultipleContainers = UseReducerWithMultipleContainers;
-UseReducerWithMultipleContainers.parameters = {
-  a11y: {
-    config: {
-      rules: [{
-        id: 'color-contrast',
-        enabled: false
-      }]
-    }
-  }
-};
 var WithTextStyling = function WithTextStyling(args) {
   var items = [{
     key: 'message1',
@@ -369,16 +301,4 @@ var WithTextStyling = function WithTextStyling(args) {
     return (0, _react2.jsx)(_reactStately.Item, item, item.node || item.text);
   });
 };
-
-// Added to bypass color contrast in safari
-exports.WithTextStyling = WithTextStyling;
-WithTextStyling.parameters = {
-  a11y: {
-    config: {
-      rules: [{
-        id: 'color-contrast',
-        enabled: false
-      }]
-    }
-  }
-};
+exports.WithTextStyling = WithTextStyling;

package/lib/cjs/components/Messages/Messages.test.js

@@ -13,7 +13,6 @@ var _testUtils = require("react-dom/test-utils");
 var _reactStately = require("react-stately");
 var _AccountIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountIcon"));
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
 var _Message = require("./Message");
@@ -37,7 +36,7 @@ var items = [{
 }, {
   key: 'message2',
   text: 'Form saved successfully',
-  status: _statuses["default"].SUCCESS
+  status: 'success'
 }];
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -48,7 +47,7 @@ var getComponent = function getComponent() {
   }, "Here is a very neutral thing"), (0, _react2.jsx)(_reactStately.Item, {
     key: "message2",
     "data-id": "message2",
-    status: _statuses["default"].SUCCESS
+    status: "success"
   }, "Form saved successfully")));
 };
 var getWithDynamicList = function getWithDynamicList() {
@@ -108,15 +107,16 @@ test('`onClose` get as first arg key of message', function () {
   expect(onClose).toHaveBeenCalledWith('message1');
 });
 test('click on close button removes message after delay', function () {
-  jest.useFakeTimers();
+  (0, _testUtils.act)(function () {
+    global.setTimeout = jest.fn(function (cb) {
+      return cb();
+    });
+  });
   getComponent();
   var messages = _testWrapper.screen.getByTestId(testId);
   expect(messages.childElementCount).toBe(2);
   var buttons = _testWrapper.screen.getAllByRole('button');
   _userEvent["default"].click(buttons[0]);
-  (0, _testUtils.act)(function () {
-    jest.runAllTimers();
-  });
   expect(messages.childElementCount).toBe(1);
 });
 test('Item accepts a data-id and the data-id can be found in the DOM', function () {
@@ -147,12 +147,12 @@ test('messages without a status do not have an aria-label announcing the status'
 });
 test('should render messages with messagesReducerStory', function () {
   getComponent();
-  _.messagesReducerStory.actions.showSuccessMessage('Some');
+  _.messagesReducerStory.actions.showSuccessMessage();
   expect(_testWrapper.screen.getByTestId(testId)).toBeInTheDocument();
 });
 test('should render messages with multiMessagesReducerStory', function () {
   getComponent();
-  _.multiMessagesReducerStory.actions.showSuccessMessage('some', 'container-one');
+  _.multiMessagesReducerStory.actions.showSuccessMessage();
   expect(_testWrapper.screen.getByTestId(testId)).toBeInTheDocument();
 });
 test('should render a custom icon', function () {

package/lib/cjs/components/Messages/index.js

@@ -21,16 +21,17 @@ _Object$defineProperty(exports, "default", {
 _Object$defineProperty(exports, "messagesReducerStory", {
   enumerable: true,
   get: function get() {
-    return _utils.messagesReducer;
+    return _Messages2.messagesReducer;
   }
 });
 _Object$defineProperty(exports, "multiMessagesReducerStory", {
   enumerable: true,
   get: function get() {
-    return _utils.multiMessagesReducer;
+    return _Messages2.multiMessagesReducer;
   }
 });
 var _Messages = _interopRequireDefault(require("./Messages"));
+var _Messages2 = require("./Messages.reducer");
 var _utils = require("./utils");
 _forEachInstanceProperty(_context = _Object$keys(_utils)).call(_context, function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/cjs/components/Messages/utils/messagesReducer.js

@@ -19,7 +19,6 @@ var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _uuid = require("uuid");
-var _statuses = _interopRequireDefault(require("../../../utils/devUtils/constants/statuses"));
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty2(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 /**
@@ -29,19 +28,14 @@ var messagesActions = {
   ADD_MESSAGE: 'ADD_MESSAGE',
   HIDE_MESSAGE: 'HIDE_MESSAGE',
   REMOVE_MESSAGE: 'REMOVE_MESSAGE',
-  CLEAR_MESSAGES: 'CLEAR_MESSAGES',
-  SHOW_SUCCESS_MESSAGE: 'SHOW_SUCCESS_MESSAGE',
-  SHOW_ERROR_MESSAGE: 'SHOW_ERROR_MESSAGE',
-  SHOW_WARNING_MESSAGE: 'SHOW_WARNING_MESSAGE',
-  MULTI_SHOW_SUCCESS_MESSAGE: 'MULTI_SHOW_SUCCESS_MESSAGE',
-  MULTI_SHOW_CRITICAL_MESSAGE: 'MULTI_SHOW_CRITICAL_MESSAGE',
-  MULTI_SHOW_WARNING_MESSAGE: 'MULTI_SHOW_WARNING_MESSAGE'
+  CLEAR_MESSAGES: 'CLEAR_MESSAGES'
 };
-exports.messagesActions = messagesActions;
+
 /**
  * Create an action to add a message
  * The message object to be added
  */
+exports.messagesActions = messagesActions;
 var addMessage = function addMessage(message) {
   return {
     type: messagesActions.ADD_MESSAGE,
@@ -102,26 +96,21 @@ var clearMessages = function clearMessages() {
   };
 };
 
-// eslint-disable-next-line max-len
-exports.clearMessages = clearMessages;
-var makeShowMessage = function makeShowMessage(status, timeout) {
-  return function (text) {
-    return messagesReducer.actions.showMessage({
-      text: text,
-      status: status
-    }, timeout);
-  };
-};
-
 /** Reducer to store a list of messages */
-var messagesReducer = function messagesReducer(state, action) {
+exports.clearMessages = clearMessages;
+var messagesReducer = function messagesReducer() {
   var _context;
-  switch (action.type) {
+  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    type = _ref.type,
+    message = _ref.message,
+    key = _ref.key;
+  switch (type) {
     case messagesActions.ADD_MESSAGE:
-      return (0, _concat["default"])(_context = []).call(_context, state, [_objectSpread({}, action.message)]);
+      return (0, _concat["default"])(_context = []).call(_context, state, [_objectSpread({}, message)]);
     case messagesActions.HIDE_MESSAGE:
       return (0, _map["default"])(state).call(state, function (search) {
-        if (search.key === action.key) {
+        if (search.key === key) {
           return _objectSpread(_objectSpread({}, search), {}, {
             isHidden: true
           });
@@ -130,7 +119,7 @@ var messagesReducer = function messagesReducer(state, action) {
       });
     case messagesActions.REMOVE_MESSAGE:
       return (0, _filter["default"])(state).call(state, function (search) {
-        return action.key !== search.key;
+        return key !== search.key;
       });
     case messagesActions.CLEAR_MESSAGES:
       return [];
@@ -143,10 +132,7 @@ messagesReducer.actions = {
   hideMessage: hideMessage,
   removeMessage: removeMessage,
   showMessage: showMessage,
-  clearMessages: clearMessages,
-  showSuccessMessage: makeShowMessage(_statuses["default"].SUCCESS, 3000),
-  showErrorMessage: makeShowMessage(_statuses["default"].ERROR, -1),
-  showWarningMessage: makeShowMessage(_statuses["default"].WARNING, -1)
+  clearMessages: clearMessages
 };
 var _default = messagesReducer;
 exports["default"] = _default;