@pingux/astro 1.42.2 → 2.0.0-alpha.4

package/lib/components/Messages/Message.js

@@ -4,24 +4,22 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["color"];
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
-import React, { forwardRef, useRef, useState, useLayoutEffect } from 'react';
+import React, { forwardRef, useLayoutEffect, useRef, useState } from 'react';
 import CloseIcon from 'mdi-react/CloseIcon';
 import PropTypes from 'prop-types';
-import { NoticeIcon } from '../Icon/NoticeIcon';
-import statuses from '../../utils/devUtils/constants/statuses';
-import useStatusClasses from '../../hooks/useStatusClasses';
 import { Box, Icon, IconButton, Text } from '../..';
+import useStatusClasses from '../../hooks/useStatusClasses';
+import statuses from '../../utils/devUtils/constants/statuses';
+import { NoticeIcon } from '../Icon/NoticeIcon';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var ARIA_STATUSES = {
   SUCCESS: 'Success Message',
   ERROR: 'Error Message',
   WARNING: 'Warning Message'
 };
-
 var CloseButton = function CloseButton(_ref) {
   var color = _ref.color,
-      others = _objectWithoutProperties(_ref, _excluded);
-
+    others = _objectWithoutProperties(_ref, _excluded);
   return ___EmotionJSX(IconButton, _extends({
     "aria-label": "Close"
   }, others), ___EmotionJSX(Icon, {
@@ -34,63 +32,55 @@ var CloseButton = function CloseButton(_ref) {
     }
   }));
 };
-
 CloseButton.propTypes = {
   color: PropTypes.string
 };
 var Message = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var className = _ref2.className,
-      item = _ref2.item,
-      onClose = _ref2.onClose;
+    item = _ref2.item,
+    onClose = _ref2.onClose;
   var key = item.key,
-      itemProps = item.props;
+    itemProps = item.props;
   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'];
-
+    _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 = useStatusClasses(className, _defineProperty({}, "is-".concat(status), true)),
-      statusClasses = _useStatusClasses.classNames;
-
+    statusClasses = _useStatusClasses.classNames;
   var onCloseHandler = function onCloseHandler() {
     if (onClose) {
       onClose(key);
     }
   };
-
   var innerRef = useRef(null);
-
   var _useState = useState(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      innerHeight = _useState2[0],
-      setInnerHeight = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    innerHeight = _useState2[0],
+    setInnerHeight = _useState2[1];
   useLayoutEffect(function () {
     setInnerHeight(innerRef.current.clientHeight);
   }, [children]);
-
   var _useStatusClasses3 = useStatusClasses(className, {
-    isHidden: isHidden
-  }),
-      wrapperClasses = _useStatusClasses3.classNames;
-
+      isHidden: isHidden
+    }),
+    wrapperClasses = _useStatusClasses3.classNames;
   var ariaStatus = function ariaStatus(ariaStatusClass) {
     if (ariaStatusClass === 'is-success') {
       return ARIA_STATUSES.SUCCESS;
-    } else if (ariaStatusClass === 'is-error') {
+    }
+    if (ariaStatusClass === 'is-error') {
       return ARIA_STATUSES.ERROR;
-    } else if (ariaStatusClass === 'is-warning') {
+    }
+    if (ariaStatusClass === 'is-warning') {
       return ARIA_STATUSES.WARNING;
     }
-
     return '';
   };
-
   var messageIconProps = {
     className: statusClasses,
     color: color,
@@ -103,7 +93,7 @@ var Message = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     status: status
   }, messageIconProps));
   return ___EmotionJSX(Box, {
-    variant: "messages.transition",
+    variant: "message.transition",
     className: wrapperClasses,
     sx: {
       maxHeight: !isHidden ? innerHeight : 0
@@ -117,7 +107,7 @@ var Message = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   }, ___EmotionJSX(Box, {
     ref: ref,
     isRow: true,
-    variant: "messages.item",
+    variant: "message.item",
     className: statusClasses,
     bg: bg
   }, messageIcon, ___EmotionJSX(Text, {
@@ -126,7 +116,7 @@ var Message = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     mr: "md"
   }, children), ___EmotionJSX(CloseButton, {
     onPress: onCloseHandler,
-    variant: "close",
+    variant: "messageCloseButton",
     className: statusClasses,
     color: color
   }))));
@@ -136,25 +126,19 @@ Message.propTypes = {
     key: PropTypes.string,
     props: PropTypes.shape({
       children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-
       /* status changes the background, text, and button color accordingly */
       status: PropTypes.oneOf(_Object$values(statuses)),
-
       /* Background color */
       bg: PropTypes.string,
-
       /* Text color */
       color: PropTypes.string,
-
       /* Message icon */
       icon: PropTypes.elementType,
-
       /* Hides the message with an animated transition */
       isHidden: PropTypes.bool,
       'data-id': PropTypes.string
     })
   }),
-
   /* Callback for clicking the message's close button */
   onClose: PropTypes.func
 };

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

@@ -0,0 +1,99 @@
+var wrapper = {
+  position: 'absolute',
+  right: 'lg',
+  bottom: 'lg',
+  left: 'lg',
+  alignItems: 'flex-end',
+  pointerEvents: 'none'
+};
+var transition = {
+  transition: 'opacity 200ms, max-height 200ms',
+  opacity: 1,
+  '&.is-hidden': {
+    opacity: 0
+  }
+};
+var item = {
+  maxWidth: 400,
+  pointerEvents: 'all',
+  mb: 'md',
+  p: 'md',
+  wordBreak: 'break-word',
+  alignItems: 'center',
+  bg: 'neutral.95',
+  color: 'neutral.10',
+  borderRadius: 4,
+  '&.is-success, > .is-success': {
+    bg: 'success.light',
+    color: 'success.dark'
+  },
+  '&.is-warning, > .is-warning': {
+    bg: 'warning.light',
+    color: 'warning.dark'
+  },
+  '&.is-error, > .is-error': {
+    bg: 'critical.light',
+    color: 'critical.dark'
+  }
+};
+export var messageCloseButton = {
+  p: 0,
+  ml: 'auto',
+  outline: 'none',
+  path: {
+    fill: 'neutral.10'
+  },
+  '&.is-hovered': {
+    bg: 'white',
+    boxShadow: 'standard'
+  },
+  '&.is-pressed': {
+    boxShadow: 'standard',
+    bg: 'neutral.10',
+    path: {
+      fill: 'white'
+    }
+  },
+  '&.is-success': {
+    path: {
+      fill: 'success.dark'
+    },
+    '&.is-pressed': {
+      boxShadow: 'standard',
+      bg: 'success.dark',
+      path: {
+        fill: 'white'
+      }
+    }
+  },
+  '&.is-warning': {
+    path: {
+      fill: 'warning.dark'
+    },
+    '&.is-pressed': {
+      boxShadow: 'standard',
+      bg: 'warning.dark',
+      path: {
+        fill: 'white'
+      }
+    }
+  },
+  '&.is-error': {
+    path: {
+      fill: 'critical.dark'
+    },
+    '&.is-pressed': {
+      boxShadow: 'standard',
+      bg: 'critical.dark',
+      path: {
+        fill: 'white'
+      }
+    }
+  }
+};
+export default {
+  wrapper: wrapper,
+  transition: transition,
+  item: item,
+  messageCloseButton: messageCloseButton
+};

package/lib/components/Messages/Messages.js

@@ -5,28 +5,26 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
 import { useListState } from '@react-stately/list';
+import PropTypes from 'prop-types';
 import statuses from '../../utils/devUtils/constants/statuses';
-import Message from './Message';
 import Box from '../Box';
+import Message from './Message';
+
 /**
  *Messages are intended to display non-critical alerts that
  attract the users’ attention, but do not interfere or temporarily block their work.
  */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Messages = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context;
-
   var items = props.items,
-      onClose = props.onClose,
-      others = _objectWithoutProperties(props, _excluded);
-
+    onClose = props.onClose,
+    others = _objectWithoutProperties(props, _excluded);
   var state = useListState(props);
   return ___EmotionJSX(Box, _extends({
     ref: ref,
-    variant: "messages.wrapper"
+    variant: "message.wrapper"
   }, others), _mapInstanceProperty(_context = _Array$from(state.collection)).call(_context, function (item) {
     return ___EmotionJSX(Message, {
       key: item.key,
@@ -43,7 +41,6 @@ Messages.propTypes = {
     status: PropTypes.oneOf(_Object$values(statuses)),
     node: PropTypes.node
   })),
-
   /* Callback for clicking the message's close button */
   onClose: PropTypes.func
 };

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

@@ -7,15 +7,11 @@ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-st
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-
 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) { _defineProperty(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; }
-
 import { messagesReducer as messagesReducerCore, multiMessagesReducer as multiMessagesReducerCore } from './utils';
 export var messagesReducer = messagesReducerCore;
 export var multiMessagesReducer = multiMessagesReducerCore;
-
 var makeShowMessage = function makeShowMessage(status, timeout) {
   return function (text) {
     return messagesReducer.actions.showMessage({
@@ -24,7 +20,6 @@ var makeShowMessage = function makeShowMessage(status, timeout) {
     }, timeout);
   };
 };
-
 var makeMultiShowMessage = function makeMultiShowMessage(status, timeout) {
   return function (container, text) {
     return multiMessagesReducer.actions.showMessage(container, {
@@ -33,7 +28,6 @@ var makeMultiShowMessage = function makeMultiShowMessage(status, timeout) {
     }, timeout);
   };
 };
-
 messagesReducer.actions = _objectSpread(_objectSpread({}, messagesReducer.actions), {}, {
   showSuccessMessage: makeShowMessage('success', 3000),
   showErrorMessage: makeShowMessage('error', -1),

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

@@ -8,21 +8,18 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-
 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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(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; }
-
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import React, { useEffect, useReducer, useState } from 'react';
-import { Item } from '@react-stately/collections';
+import { Item } from 'react-stately';
 import AccountIcon from 'mdi-react/AccountIcon';
-import statuses from '../../utils/devUtils/constants/statuses';
 import { Box, Button, Messages } from '../..';
+import statuses from '../../utils/devUtils/constants/statuses';
 import { messagesReducerStory as messagesReducer, multiMessagesReducerStory as multiMessagesReducer } from './index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -76,7 +73,8 @@ export var Default = function Default(args) {
   }, "Form saved successfully"));
 };
 export var DefaultDynamic = function DefaultDynamic(args) {
-  return (// messages = [{...}]
+  return (
+    // messages = [{...}]
     ___EmotionJSX(Messages, _extends({}, args, {
       items: messages
     }), function (item) {
@@ -87,28 +85,24 @@ export var DefaultDynamic = function DefaultDynamic(args) {
 export var Controlled = function Controlled(args) {
   // messages = [{...}]
   var _useState = useState([]),
-      _useState2 = _slicedToArray(_useState, 2),
-      items = _useState2[0],
-      setItems = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    items = _useState2[0],
+    setItems = _useState2[1];
   useEffect(function () {
     setItems(messages);
   }, []);
-
   var removeMessage = function removeMessage(key) {
     setItems(_mapInstanceProperty(items).call(items, function (item) {
       return item.key === key ? _objectSpread(_objectSpread({}, item), {}, {
         isHidden: true
       }) : item;
     }));
-
     _setTimeout(function () {
       return setItems(_filterInstanceProperty(items).call(items, function (item) {
         return item.key !== key;
       }));
     }, 200);
   };
-
   return ___EmotionJSX(Messages, _extends({}, args, {
     items: items,
     onClose: removeMessage
@@ -118,34 +112,29 @@ export var Controlled = function Controlled(args) {
 };
 export var ControlledWithButton = function ControlledWithButton(args) {
   var _useState3 = useState([]),
-      _useState4 = _slicedToArray(_useState3, 2),
-      items = _useState4[0],
-      setItems = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    items = _useState4[0],
+    setItems = _useState4[1];
   var addMessage = function addMessage() {
     var _context;
-
     setItems(_concatInstanceProperty(_context = []).call(_context, items, [{
       key: "message".concat(items.length + 1),
       text: messageText[Math.floor(Math.random() * 6)],
       status: _Object$values(statuses)[Math.floor(Math.random() * 4)]
     }]));
   };
-
   var removeMessage = function removeMessage(key) {
     setItems(_mapInstanceProperty(items).call(items, function (item) {
       return item.key === key ? _objectSpread(_objectSpread({}, item), {}, {
         isHidden: true
       }) : item;
     }));
-
     _setTimeout(function () {
       return setItems(_filterInstanceProperty(items).call(items, function (item) {
         return item.key !== key;
       }));
     }, 200);
   };
-
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Button, {
     onPress: addMessage
   }, "Click me!"), ___EmotionJSX(Messages, _extends({}, args, {
@@ -183,25 +172,22 @@ export var UseReducer = function UseReducer() {
   //   showErrorMessage: makeShowMessage('error', -1),
   //   showWarningMessage: makeShowMessage('warning', -1),
   // };
-  var _useReducer = useReducer(messagesReducer),
-      _useReducer2 = _slicedToArray(_useReducer, 2),
-      items = _useReducer2[0],
-      dispatch = _useReducer2[1];
 
+  var _useReducer = useReducer(messagesReducer),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    items = _useReducer2[0],
+    dispatch = _useReducer2[1];
   var showAMessage = function showAMessage() {
     var actionFn = [messagesReducer.actions.showSuccessMessage, messagesReducer.actions.showErrorMessage, messagesReducer.actions.showWarningMessage][Math.floor(Math.random() * 3)];
     var message = messageText[Math.floor(Math.random() * 6)];
     actionFn(message)(dispatch);
   };
-
   var removeMessage = function removeMessage(key) {
     dispatch(messagesReducer.actions.hideMessage(key));
-
     _setTimeout(function () {
       return dispatch(messagesReducer.actions.removeMessage(key));
     }, 200);
   };
-
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Button, {
     onPress: showAMessage
   }, "Add Message"), (items === null || items === void 0 ? void 0 : items.length) > 0 && ___EmotionJSX(Button, {
@@ -218,27 +204,23 @@ export var UseReducer = function UseReducer() {
 };
 export var UseReducerWithMultipleContainers = function UseReducerWithMultipleContainers() {
   var _useReducer3 = useReducer(multiMessagesReducer, {
-    'container-one': [],
-    'container-two': []
-  }),
-      _useReducer4 = _slicedToArray(_useReducer3, 2),
-      items = _useReducer4[0],
-      dispatch = _useReducer4[1];
-
+      'container-one': [],
+      'container-two': []
+    }),
+    _useReducer4 = _slicedToArray(_useReducer3, 2),
+    items = _useReducer4[0],
+    dispatch = _useReducer4[1];
   var showAMessage = function showAMessage(container) {
     var actionFn = [multiMessagesReducer.actions.showSuccessMessage, multiMessagesReducer.actions.showCriticalMessage, multiMessagesReducer.actions.showWarningMessage][Math.floor(Math.random() * 3)];
     var message = messageText[Math.floor(Math.random() * 6)];
     actionFn(container, message)(dispatch);
   };
-
   var removeMessage = function removeMessage(key, container) {
     dispatch(multiMessagesReducer.actions.hideMessage(container, key));
-
     _setTimeout(function () {
       return dispatch(multiMessagesReducer.actions.removeMessage(container, key));
     }, 200);
   };
-
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
     isRow: true
   }, ___EmotionJSX(Button, {

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

@@ -3,13 +3,13 @@ import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import React from 'react';
-import { Item } from '@react-stately/collections';
+import { Item } from 'react-stately';
 import userEvent from '@testing-library/user-event';
 import AccountIcon from 'mdi-react/AccountIcon';
 import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
+import { ARIA_STATUSES } from './Message';
 import Messages, { messagesReducerStory, multiMessagesReducerStory } from '.';
-import { ARIA_STATUSES } from '../Messages/Message';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 jest.mock('@react-aria/live-announcer', function () {
   return {
@@ -29,7 +29,6 @@ var items = [{
   text: 'Form saved successfully',
   status: 'success'
 }];
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var renderFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : render;
@@ -42,16 +41,15 @@ var getComponent = function getComponent() {
     status: "success"
   }, "Form saved successfully")));
 };
-
 var getWithDynamicList = function getWithDynamicList() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var renderFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : render;
   return renderFn(___EmotionJSX(Messages, _extends({}, defaultProps, props), function (item) {
     return ___EmotionJSX(Item, item, item.text);
   }));
-}; // Need to be added to each test file to test accessibility using axe.
-
+};
 
+// Need to be added to each test file to test accessibility using axe.
 axeTest(getComponent);
 test('renders Messages component in the default state', function () {
   getComponent();
@@ -63,10 +61,8 @@ test('message with prop `isHidden` has max-height: 0', function () {
   getWithDynamicList({
     items: items
   });
-
   var _screen$getByTestId = screen.getByTestId(testId),
-      firstMessage = _screen$getByTestId.firstChild;
-
+    firstMessage = _screen$getByTestId.firstChild;
   expect(firstMessage).toHaveStyle('max-height: 0');
 });
 test('renders Messages component in the default state with dynamic list', function () {
@@ -101,25 +97,20 @@ test('click on close button removes message after delay', function () {
   expect(messages.childElementCount).toBe(2);
   var buttons = screen.getAllByRole('button');
   userEvent.click(buttons[0]);
-
   _setTimeout(function () {
     expect(messages.childElementCount).toBe(1);
   }, 200);
 });
 test('Item accepts a data-id and the data-id can be found in the DOM', function () {
   getComponent();
-
   var _screen$getByTestId2 = screen.getByTestId(testId),
-      firstMessage = _screen$getByTestId2.firstChild;
-
+    firstMessage = _screen$getByTestId2.firstChild;
   expect(firstMessage).toHaveAttribute('data-id', 'message1');
 });
 test('message has role and aria-live attributes', function () {
   getComponent();
-
   var _screen$getByTestId3 = screen.getByTestId(testId),
-      firstMessage = _screen$getByTestId3.firstChild;
-
+    firstMessage = _screen$getByTestId3.firstChild;
   expect(firstMessage).toHaveAttribute('role', 'status');
   expect(firstMessage).toHaveAttribute('aria-live', 'polite');
 });
@@ -130,10 +121,8 @@ test('messages with a status have an aria-label announcing the status', function
 });
 test('messages without a status do not have an aria-label announcing the status', function () {
   var _context;
-
   getComponent();
   var statusMessage = screen.getAllByRole('status')[0];
-
   _mapInstanceProperty(_context = _Object$keys(ARIA_STATUSES)).call(_context, function (key) {
     return expect(statusMessage).not.toHaveAttribute('aria-label', ARIA_STATUSES[key]);
   });

package/lib/components/Messages/index.js

@@ -1,3 +1,3 @@
 export { default } from './Messages';
-export * from './utils';
-export { messagesReducer as messagesReducerStory, multiMessagesReducer as multiMessagesReducerStory } from './Messages.reducer';
+export { messagesReducer as messagesReducerStory, multiMessagesReducer as multiMessagesReducerStory } from './Messages.reducer';
+export * from './utils';