@pingux/astro 1.38.0-alpha.6 → 1.38.0-alpha.8

package/lib/cjs/components/Bulletin/Bulletin.js

@@ -0,0 +1,93 @@
+"use strict";
+
+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["default"] = exports.BULLETIN_TEST_ID = void 0;
+
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ = require("../..");
+
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
+var _NoticeIcon = require("../Icon/NoticeIcon");
+
+var _react2 = require("@emotion/react");
+
+var _excluded = ["children", "status"];
+
+var _bulletinProps;
+
+var BULLETIN_TEST_ID = 'bulletinTestId';
+exports.BULLETIN_TEST_ID = BULLETIN_TEST_ID;
+var bulletinProps = (_bulletinProps = {}, (0, _defineProperty2["default"])(_bulletinProps, _statuses["default"].DEFAULT, {
+  color: 'text.secondary',
+  variant: 'bulletin.base'
+}), (0, _defineProperty2["default"])(_bulletinProps, _statuses["default"].ERROR, {
+  color: 'critical.bright',
+  variant: 'bulletin.error'
+}), (0, _defineProperty2["default"])(_bulletinProps, _statuses["default"].SUCCESS, {
+  color: 'success.bright',
+  variant: 'bulletin.success'
+}), (0, _defineProperty2["default"])(_bulletinProps, _statuses["default"].WARNING, {
+  color: 'warning.bright',
+  variant: 'bulletin.warning'
+}), _bulletinProps);
+var defaultIconProps = {
+  mr: 'md',
+  ml: 'md',
+  size: 'md'
+};
+/**
+ *Bulletin is composed of the Box, Icon, and Text components. It's a persistent component
+ that should be placed at the top of panels or above related content. If the Bulletins
+ status is error or warning, the text should include a direct link to instructions on resolving the
+ issue or error.
+ *
+ *Please note, Bulletin is a static component, the [Messages](./?path=/docs/messages) component is
+ recommended if you need to interrupt and notify users of successful/failed actions or
+ give warnings of unexpected events.
+ */
+
+var Bulletin = function Bulletin(_ref) {
+  var children = _ref.children,
+      status = _ref.status,
+      others = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    "data-testid": BULLETIN_TEST_ID,
+    isRow: true,
+    role: "note",
+    variant: bulletinProps[status].variant
+  }, others), (0, _react2.jsx)(_NoticeIcon.NoticeIcon, (0, _extends2["default"])({
+    color: bulletinProps[status].color,
+    status: status,
+    "aria-label": "".concat(status, "-icon")
+  }, defaultIconProps)), children);
+};
+
+Bulletin.propTypes = {
+  /** Determines the icon and color  */
+  status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"]))
+};
+Bulletin.defaultProps = {
+  status: _statuses["default"].DEFAULT
+};
+Bulletin.displayName = 'Bulletin';
+var _default = Bulletin;
+exports["default"] = _default;

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

@@ -0,0 +1,90 @@
+"use strict";
+
+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["default"] = exports.Warning = exports.Success = exports.ErrorStatus = exports.Default = void 0;
+
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("../..");
+
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
+var _Bulletin = _interopRequireDefault(require("./Bulletin"));
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'Bulletin',
+  component: _Bulletin["default"],
+  argTypes: {
+    status: {
+      control: {
+        type: 'select',
+        options: (0, _values["default"])(_statuses["default"])
+      }
+    }
+  }
+}; // main
+
+exports["default"] = _default;
+
+var Default = function Default(args) {
+  return (0, _react2.jsx)(_Bulletin["default"], args, (0, _react2.jsx)(_.Text, null, "You should be aware of this. It might be good or bad, I don\u2019t know. You may already be aware of it, but I want to be sure", (0, _react2.jsx)(_.Link, {
+    href: "https://pingidentity.com",
+    target: "_blank",
+    "aria-label": "".concat(_statuses["default"].DEFAULT, "-bulletin"),
+    variant: "app"
+  }, " Read More")));
+};
+
+exports.Default = Default;
+
+var ErrorStatus = function ErrorStatus() {
+  return (0, _react2.jsx)(_Bulletin["default"], {
+    status: _statuses["default"].ERROR
+  }, (0, _react2.jsx)(_.Text, null, "You\u2019ve got problems. Allow me to tell you about them in some detail so that you can address them", (0, _react2.jsx)(_.Link, {
+    href: "https://pingidentity.com",
+    target: "_blank",
+    "aria-label": "".concat(_statuses["default"].ERROR, "-bulletin"),
+    variant: "app"
+  }, " Read More")));
+}; // Avoiding using Error as the function name due to it being a JS built-in method
+
+
+exports.ErrorStatus = ErrorStatus;
+ErrorStatus.storyName = 'Error';
+
+var Success = function Success() {
+  return (0, _react2.jsx)(_Bulletin["default"], {
+    status: _statuses["default"].SUCCESS
+  }, (0, _react2.jsx)(_.Text, null, "It Worked! Maybe there is something else related to it working that I need to explain", (0, _react2.jsx)(_.Link, {
+    href: "https://pingidentity.com",
+    target: "_blank",
+    "aria-label": "".concat(_statuses["default"].SUCCESS, "-bulletin"),
+    variant: "app"
+  }, " Read More")));
+};
+
+exports.Success = Success;
+
+var Warning = function Warning() {
+  return (0, _react2.jsx)(_Bulletin["default"], {
+    status: _statuses["default"].WARNING
+  }, (0, _react2.jsx)(_.Text, null, "You\u2019ve got issues. Allow me to tell you about them in some detail so that you can address them. I\u2019ll continue to type enough text to demonstrate that the Bulletin box will grow in height with the content", (0, _react2.jsx)(_.Link, {
+    href: "https://pingidentity.com",
+    target: "_blank",
+    "aria-label": "".concat(_statuses["default"].WARNING, "-bulletin"),
+    variant: "app"
+  }, " Read More")));
+};
+
+exports.Warning = Warning;

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

@@ -0,0 +1,70 @@
+"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$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+
+var _NoticeIcon = require("../Icon/NoticeIcon");
+
+var _Bulletin = _interopRequireWildcard(require("./Bulletin"));
+
+var _react3 = require("@emotion/react");
+
+var _testColors;
+
+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; }
+
+var TEST_TEXT = 'test text';
+var testColors = (_testColors = {}, (0, _defineProperty2["default"])(_testColors, _statuses["default"].DEFAULT, 'var(--theme-ui-colors-text-secondary)'), (0, _defineProperty2["default"])(_testColors, _statuses["default"].ERROR, 'var(--theme-ui-colors-critical-bright)'), (0, _defineProperty2["default"])(_testColors, _statuses["default"].SUCCESS, 'var(--theme-ui-colors-success-bright)'), (0, _defineProperty2["default"])(_testColors, _statuses["default"].WARNING, 'var(--theme-ui-colors-warning-bright)'), _testColors);
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react3.jsx)(_Bulletin["default"], props, TEST_TEXT));
+};
+
+describe('Bulletin', function () {
+  test('renders', function () {
+    getComponent();
+
+    _react2.screen.getByText(TEST_TEXT);
+  });
+  test('renders the default color', function () {
+    getComponent();
+    expect(_react2.screen.getByTestId(_Bulletin.BULLETIN_TEST_ID)).toHaveStyle({
+      'border-color': testColors[_statuses["default"].DEFAULT]
+    });
+  });
+  test.each([[_statuses["default"].DEFAULT, testColors[_statuses["default"].DEFAULT]], [_statuses["default"].ERROR, testColors[_statuses["default"].ERROR]], [_statuses["default"].SUCCESS, testColors[_statuses["default"].SUCCESS]], [_statuses["default"].WARNING, testColors[_statuses["default"].WARNING]]])('when given status %s it renders Bulletin with color %s', function (status, expected) {
+    getComponent({
+      status: status
+    });
+    expect(_react2.screen.getByTestId(_Bulletin.BULLETIN_TEST_ID)).toHaveStyle({
+      'border-color': expected
+    });
+  });
+  test.each([[_statuses["default"].DEFAULT, _NoticeIcon.noticeIcons[_statuses["default"].DEFAULT].testid], [_statuses["default"].ERROR, _NoticeIcon.noticeIcons[_statuses["default"].ERROR].testid], [_statuses["default"].SUCCESS, _NoticeIcon.noticeIcons[_statuses["default"].SUCCESS].testid], [_statuses["default"].WARNING, _NoticeIcon.noticeIcons[_statuses["default"].WARNING].testid]])('when given status %s it renders %s', function (status, icon) {
+    getComponent({
+      status: status
+    });
+
+    _react2.screen.getByTestId(icon);
+  });
+});

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

@@ -0,0 +1,18 @@
+"use strict";
+
+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
+});
+
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Bulletin["default"];
+  }
+});
+
+var _Bulletin = _interopRequireDefault(require("./Bulletin"));

package/lib/cjs/components/Icon/NoticeIcon.js

@@ -0,0 +1,71 @@
+"use strict";
+
+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.noticeIcons = exports.NoticeIcon = void 0;
+
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _AlertCircleIcon = _interopRequireDefault(require("mdi-react/AlertCircleIcon"));
+
+var _AlertIcon = _interopRequireDefault(require("mdi-react/AlertIcon"));
+
+var _CheckCircleIcon = _interopRequireDefault(require("mdi-react/CheckCircleIcon"));
+
+var _InformationIcon = _interopRequireDefault(require("mdi-react/InformationIcon"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ = require("../..");
+
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
+var _react2 = require("@emotion/react");
+
+var _excluded = ["status"];
+
+var _noticeIcons;
+
+var noticeIcons = (_noticeIcons = {}, (0, _defineProperty2["default"])(_noticeIcons, _statuses["default"].DEFAULT, {
+  icon: _InformationIcon["default"],
+  testid: 'default-icon-testid'
+}), (0, _defineProperty2["default"])(_noticeIcons, _statuses["default"].ERROR, {
+  icon: _AlertCircleIcon["default"],
+  testid: 'error-icon-testid'
+}), (0, _defineProperty2["default"])(_noticeIcons, _statuses["default"].SUCCESS, {
+  icon: _CheckCircleIcon["default"],
+  testid: 'success-icon-testid'
+}), (0, _defineProperty2["default"])(_noticeIcons, _statuses["default"].WARNING, {
+  icon: _AlertIcon["default"],
+  testid: 'warning-icon-testid'
+}), _noticeIcons);
+exports.noticeIcons = noticeIcons;
+
+var NoticeIcon = function NoticeIcon(_ref) {
+  var _ref$status = _ref.status,
+      status = _ref$status === void 0 ? _statuses["default"].DEFAULT : _ref$status,
+      others = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return (0, _react2.jsx)(_.Icon, (0, _extends2["default"])({
+    "data-testid": noticeIcons[status].testid,
+    icon: noticeIcons[status].icon
+  }, others));
+};
+
+exports.NoticeIcon = NoticeIcon;
+NoticeIcon.propTypes = {
+  status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"]))
+};

package/lib/cjs/components/Icon/NoticeIcon.test.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+
+var _NoticeIcon = require("./NoticeIcon");
+
+var _react3 = require("@emotion/react");
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react3.jsx)(_NoticeIcon.NoticeIcon, props));
+};
+
+describe('NoticeIcon', function () {
+  test('renders', function () {
+    getComponent();
+
+    _react2.screen.getByTestId(_NoticeIcon.noticeIcons[_statuses["default"].DEFAULT].testid);
+  });
+  test.each([[_statuses["default"].DEFAULT, _NoticeIcon.noticeIcons[_statuses["default"].DEFAULT].testid], [_statuses["default"].ERROR, _NoticeIcon.noticeIcons[_statuses["default"].ERROR].testid], [_statuses["default"].SUCCESS, _NoticeIcon.noticeIcons[_statuses["default"].SUCCESS].testid], [_statuses["default"].WARNING, _NoticeIcon.noticeIcons[_statuses["default"].WARNING].testid]])('when given status %s it renders icon with %s', function (status, icon) {
+    getComponent({
+      status: status
+    });
+
+    _react2.screen.getByTestId(icon);
+  });
+});

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

@@ -14,7 +14,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.icons = exports["default"] = exports.ARIA_STATUSES = void 0;
+exports["default"] = exports.ARIA_STATUSES = void 0;
 
 var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
 
@@ -28,29 +28,17 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _AlertCircleIcon = _interopRequireDefault(require("mdi-react/AlertCircleIcon"));
-
-var _CheckCircleIcon = _interopRequireDefault(require("mdi-react/CheckCircleIcon"));
-
 var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
 
-var _AlertIcon = _interopRequireDefault(require("mdi-react/AlertIcon"));
-
-var _InformationIcon = _interopRequireDefault(require("mdi-react/InformationIcon"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _useStatusClasses4 = _interopRequireDefault(require("../../hooks/useStatusClasses"));
+var _NoticeIcon = require("../Icon/NoticeIcon");
 
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 
-var _Box = _interopRequireDefault(require("../Box"));
-
-var _Icon = _interopRequireDefault(require("../Icon"));
-
-var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _useStatusClasses4 = _interopRequireDefault(require("../../hooks/useStatusClasses"));
 
-var _Text = _interopRequireDefault(require("../Text"));
+var _ = require("../..");
 
 var _react2 = require("@emotion/react");
 
@@ -60,13 +48,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 
 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; }
 
-var icons = {
-  "default": _InformationIcon["default"],
-  success: _CheckCircleIcon["default"],
-  error: _AlertCircleIcon["default"],
-  warning: _AlertIcon["default"]
-};
-exports.icons = icons;
 var ARIA_STATUSES = {
   SUCCESS: 'Success Message',
   ERROR: 'Error Message',
@@ -77,9 +58,9 @@ exports.ARIA_STATUSES = ARIA_STATUSES;
 var CloseButton = function CloseButton(_ref) {
   var color = _ref.color,
       others = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return (0, _react2.jsx)(_IconButton["default"], (0, _extends2["default"])({
+  return (0, _react2.jsx)(_.IconButton, (0, _extends2["default"])({
     "aria-label": "Close"
-  }, others), (0, _react2.jsx)(_Icon["default"], {
+  }, others), (0, _react2.jsx)(_.Icon, {
     color: color,
     icon: _CloseIcon["default"],
     sx: {
@@ -93,10 +74,10 @@ var CloseButton = function CloseButton(_ref) {
 CloseButton.propTypes = {
   color: _propTypes["default"].string
 };
-var Message = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var className = props.className,
-      item = props.item,
-      onClose = props.onClose;
+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 children = itemProps.children,
@@ -104,8 +85,7 @@ var Message = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       status = _itemProps$status === void 0 ? 'default' : _itemProps$status,
       bg = itemProps.bg,
       color = itemProps.color,
-      _itemProps$icon = itemProps.icon,
-      icon = _itemProps$icon === void 0 ? icons[status] : _itemProps$icon,
+      icon = itemProps.icon,
       _itemProps$isHidden = itemProps.isHidden,
       isHidden = _itemProps$isHidden === void 0 ? false : _itemProps$isHidden,
       dataId = itemProps['data-id'];
@@ -147,7 +127,18 @@ var Message = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return '';
   };
 
-  return (0, _react2.jsx)(_Box["default"], {
+  var messageIconProps = {
+    className: statusClasses,
+    color: color,
+    mr: 'md'
+  };
+  var messageIcon = icon ? (0, _react2.jsx)(_.Icon, (0, _extends2["default"])({
+    icon: icon,
+    "data-testid": "custom-icon-testid"
+  }, messageIconProps)) : (0, _react2.jsx)(_NoticeIcon.NoticeIcon, (0, _extends2["default"])({
+    status: status
+  }, messageIconProps));
+  return (0, _react2.jsx)(_.Box, {
     variant: "messages.transition",
     className: wrapperClasses,
     sx: {
@@ -157,20 +148,15 @@ var Message = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     role: "status",
     "aria-live": "polite",
     "aria-label": ariaStatus(statusClasses)
-  }, (0, _react2.jsx)(_Box["default"], {
+  }, (0, _react2.jsx)(_.Box, {
     ref: innerRef
-  }, (0, _react2.jsx)(_Box["default"], {
+  }, (0, _react2.jsx)(_.Box, {
     ref: ref,
     isRow: true,
     variant: "messages.item",
     className: statusClasses,
     bg: bg
-  }, icon && (0, _react2.jsx)(_Icon["default"], {
-    icon: icon,
-    className: statusClasses,
-    color: color,
-    mr: "md"
-  }), (0, _react2.jsx)(_Text["default"], {
+  }, messageIcon, (0, _react2.jsx)(_.Text, {
     className: statusClasses,
     color: color,
     mr: "md"

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

@@ -24,6 +24,8 @@ var _collections = require("@react-stately/collections");
 
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
+var _AccountIcon = _interopRequireDefault(require("mdi-react/AccountIcon"));
+
 var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
 
 var _testWrapper = require("../../utils/testUtils/testWrapper");
@@ -195,4 +197,15 @@ test('should render messages with multiMessagesReducerStory', function () {
   _.multiMessagesReducerStory.actions.showSuccessMessage();
 
   expect(_testWrapper.screen.getByTestId(testId)).toBeInTheDocument();
+});
+test('should render a custom icon', function () {
+  getWithDynamicList({
+    items: [{
+      key: 'message1',
+      text: 'test text',
+      icon: _AccountIcon["default"]
+    }]
+  });
+
+  _testWrapper.screen.getByTestId('custom-icon-testid');
 });