@pingux/astro 1.38.0-alpha.7 → 1.38.0-alpha.9

package/lib/cjs/styles/variants/variants.js

@@ -76,6 +76,8 @@ var _tooltip = _interopRequireDefault(require("./tooltip"));
 
 var _collapsiblePanel = _interopRequireDefault(require("./collapsiblePanel"));
 
+var _bulletin = _interopRequireDefault(require("./bulletin"));
+
 var _DataTable = _interopRequireDefault(require("./../../components/DataTable/DataTable.styles"));
 
 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); }
@@ -89,6 +91,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var _default = _objectSpread(_objectSpread({
   accordion: _accordion["default"],
   boxes: _boxes["default"],
+  bulletin: _bulletin["default"],
   codeView: _codeView["default"],
   images: _images["default"],
   imageUpload: _imageUpload["default"],

package/lib/components/Bulletin/Bulletin.js

@@ -0,0 +1,70 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+var _excluded = ["children", "status"];
+
+var _bulletinProps;
+
+import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Box } from '../..';
+import statuses from '../../utils/devUtils/constants/statuses';
+import { NoticeIcon } from '../Icon/NoticeIcon';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var BULLETIN_TEST_ID = 'bulletinTestId';
+var bulletinProps = (_bulletinProps = {}, _defineProperty(_bulletinProps, statuses.DEFAULT, {
+  color: 'text.secondary',
+  variant: 'bulletin.base'
+}), _defineProperty(_bulletinProps, statuses.ERROR, {
+  color: 'critical.bright',
+  variant: 'bulletin.error'
+}), _defineProperty(_bulletinProps, statuses.SUCCESS, {
+  color: 'success.bright',
+  variant: 'bulletin.success'
+}), _defineProperty(_bulletinProps, statuses.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 = _objectWithoutProperties(_ref, _excluded);
+
+  return ___EmotionJSX(Box, _extends({
+    "data-testid": BULLETIN_TEST_ID,
+    isRow: true,
+    role: "note",
+    variant: bulletinProps[status].variant
+  }, others), ___EmotionJSX(NoticeIcon, _extends({
+    color: bulletinProps[status].color,
+    status: status,
+    "aria-label": "".concat(status, "-icon")
+  }, defaultIconProps)), children);
+};
+
+Bulletin.propTypes = {
+  /** Determines the icon and color  */
+  status: PropTypes.oneOf(_Object$values(statuses))
+};
+Bulletin.defaultProps = {
+  status: statuses.DEFAULT
+};
+Bulletin.displayName = 'Bulletin';
+export default Bulletin;

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

@@ -0,0 +1,59 @@
+import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
+import React from 'react';
+import { Link, Text } from '../..';
+import statuses from '../../utils/devUtils/constants/statuses';
+import Bulletin from './Bulletin';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Bulletin',
+  component: Bulletin,
+  argTypes: {
+    status: {
+      control: {
+        type: 'select',
+        options: _Object$values(statuses)
+      }
+    }
+  }
+}; // main
+
+export var Default = function Default(args) {
+  return ___EmotionJSX(Bulletin, args, ___EmotionJSX(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", ___EmotionJSX(Link, {
+    href: "https://pingidentity.com",
+    target: "_blank",
+    "aria-label": "".concat(statuses.DEFAULT, "-bulletin"),
+    variant: "app"
+  }, " Read More")));
+};
+export var ErrorStatus = function ErrorStatus() {
+  return ___EmotionJSX(Bulletin, {
+    status: statuses.ERROR
+  }, ___EmotionJSX(Text, null, "You\u2019ve got problems. Allow me to tell you about them in some detail so that you can address them", ___EmotionJSX(Link, {
+    href: "https://pingidentity.com",
+    target: "_blank",
+    "aria-label": "".concat(statuses.ERROR, "-bulletin"),
+    variant: "app"
+  }, " Read More")));
+}; // Avoiding using Error as the function name due to it being a JS built-in method
+
+ErrorStatus.storyName = 'Error';
+export var Success = function Success() {
+  return ___EmotionJSX(Bulletin, {
+    status: statuses.SUCCESS
+  }, ___EmotionJSX(Text, null, "It Worked! Maybe there is something else related to it working that I need to explain", ___EmotionJSX(Link, {
+    href: "https://pingidentity.com",
+    target: "_blank",
+    "aria-label": "".concat(statuses.SUCCESS, "-bulletin"),
+    variant: "app"
+  }, " Read More")));
+};
+export var Warning = function Warning() {
+  return ___EmotionJSX(Bulletin, {
+    status: statuses.WARNING
+  }, ___EmotionJSX(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", ___EmotionJSX(Link, {
+    href: "https://pingidentity.com",
+    target: "_blank",
+    "aria-label": "".concat(statuses.WARNING, "-bulletin"),
+    variant: "app"
+  }, " Read More")));
+};

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

@@ -0,0 +1,45 @@
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+var _testColors;
+
+import React from 'react';
+import { screen } from '@testing-library/react';
+import statuses from '../../utils/devUtils/constants/statuses';
+import { render } from '../../utils/testUtils/testWrapper';
+import { noticeIcons } from '../Icon/NoticeIcon';
+import Bulletin, { BULLETIN_TEST_ID } from './Bulletin';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var TEST_TEXT = 'test text';
+var testColors = (_testColors = {}, _defineProperty(_testColors, statuses.DEFAULT, 'var(--theme-ui-colors-text-secondary)'), _defineProperty(_testColors, statuses.ERROR, 'var(--theme-ui-colors-critical-bright)'), _defineProperty(_testColors, statuses.SUCCESS, 'var(--theme-ui-colors-success-bright)'), _defineProperty(_testColors, statuses.WARNING, 'var(--theme-ui-colors-warning-bright)'), _testColors);
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(Bulletin, props, TEST_TEXT));
+};
+
+describe('Bulletin', function () {
+  test('renders', function () {
+    getComponent();
+    screen.getByText(TEST_TEXT);
+  });
+  test('renders the default color', function () {
+    getComponent();
+    expect(screen.getByTestId(BULLETIN_TEST_ID)).toHaveStyle({
+      'border-color': testColors[statuses.DEFAULT]
+    });
+  });
+  test.each([[statuses.DEFAULT, testColors[statuses.DEFAULT]], [statuses.ERROR, testColors[statuses.ERROR]], [statuses.SUCCESS, testColors[statuses.SUCCESS]], [statuses.WARNING, testColors[statuses.WARNING]]])('when given status %s it renders Bulletin with color %s', function (status, expected) {
+    getComponent({
+      status: status
+    });
+    expect(screen.getByTestId(BULLETIN_TEST_ID)).toHaveStyle({
+      'border-color': expected
+    });
+  });
+  test.each([[statuses.DEFAULT, noticeIcons[statuses.DEFAULT].testid], [statuses.ERROR, noticeIcons[statuses.ERROR].testid], [statuses.SUCCESS, noticeIcons[statuses.SUCCESS].testid], [statuses.WARNING, noticeIcons[statuses.WARNING].testid]])('when given status %s it renders %s', function (status, icon) {
+    getComponent({
+      status: status
+    });
+    screen.getByTestId(icon);
+  });
+});

package/lib/components/Bulletin/index.js

@@ -0,0 +1 @@
+export { default } from './Bulletin';

package/lib/components/ComboBox/ComboBoxInput.js

@@ -104,7 +104,7 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
 
   usePropWarning(props, 'disabled', 'isDisabled');
 
-  var button = ___EmotionJSX(Box, {
+  var button = !isReadOnly && ___EmotionJSX(Box, {
     isRow: true,
     variant: "boxes.inputInContainerSlot"
   }, // Render loader after delay if filtering or loading

package/lib/components/ComboBoxField/ComboBoxField.js

@@ -10,7 +10,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["hasAutoFocus", "hasAddOption", "hasCustomValue", "hasNoEmptySelection", "selectedKey", "onSelectionChange", "defaultItems", "items", "loadingState", "onLoadMore", "inputValue", "menuTrigger", "isNotFlippable", "direction", "scrollBoxProps", "controlProps", "defaultFilter", "status", "helperText"],
+var _excluded = ["hasAutoFocus", "hasAddOption", "hasCustomValue", "hasNoEmptySelection", "selectedKey", "onSelectionChange", "defaultItems", "items", "loadingState", "onLoadMore", "inputValue", "isReadOnly", "menuTrigger", "isNotFlippable", "direction", "scrollBoxProps", "controlProps", "defaultFilter", "status", "helperText"],
     _excluded2 = ["shouldFocusOnHover", "shouldSelectOnPressUp"];
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
@@ -59,6 +59,7 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
       loadingState = props.loadingState,
       onLoadMore = props.onLoadMore,
       inputValue = props.inputValue,
+      isReadOnly = props.isReadOnly,
       menuTrigger = props.menuTrigger,
       isNotFlippable = props.isNotFlippable,
       direction = props.direction,
@@ -135,7 +136,7 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
       contains = _useFilter.contains;
 
   var state = useComboBoxState(_objectSpread(_objectSpread({}, comboBoxOptions), {}, {
-    defaultItems: defaultItems,
+    defaultItems: isReadOnly ? [] : defaultItems,
     items: items,
     onSelectionChange: hasAddOption || hasCustomValue ? onSelectionChangeHandler : onSelectionChange,
     defaultFilter: typeof defaultFilter !== 'undefined' ? defaultFilter : contains
@@ -206,7 +207,16 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
     minWidth: menuWidth
   });
 
-  var listbox = ___EmotionJSX(FocusScope, {
+  var listBox = !isReadOnly && ___EmotionJSX(PopoverContainer, {
+    hasNoArrow: true,
+    isDismissable: true,
+    isNonModal: true,
+    isOpen: state.isOpen,
+    onClose: state.close,
+    placement: placement,
+    ref: popoverRef,
+    style: style
+  }, ___EmotionJSX(FocusScope, {
     restoreFocus: true
   }, ___EmotionJSX(DismissButton, {
     onDismiss: state.close
@@ -222,7 +232,7 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
     isSelectedOnPressUp: shouldSelectOnPressUp
   }, otherListBoxProps))), ___EmotionJSX(DismissButton, {
     onDismiss: state.close
-  }));
+  })));
 
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ComboBoxInput, _extends({}, props, {
     isOpen: state.isOpen,
@@ -234,16 +244,7 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
     triggerRef: buttonRef,
     controlProps: controlProps,
     "aria-invalid": status === 'error' && true
-  })), ___EmotionJSX(PopoverContainer, {
-    hasNoArrow: true,
-    isDismissable: true,
-    isNonModal: true,
-    isOpen: state.isOpen,
-    onClose: state.close,
-    placement: placement,
-    ref: popoverRef,
-    style: style
-  }, listbox));
+  })), listBox);
 });
 ComboBoxField.propTypes = _objectSpread({
   /* Whether or not adding new options to the list is enabled. */

package/lib/components/ComboBoxField/ComboBoxField.stories.js

@@ -478,6 +478,17 @@ export var HelperText = function HelperText() {
     }, item.name);
   }));
 };
+export var ReadOnly = function ReadOnly() {
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
+    label: "Example label",
+    defaultItems: items,
+    isReadOnly: true
+  }, actions), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
 export var Required = function Required() {
   return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
     label: "Example label",

package/lib/components/ComboBoxField/ComboBoxField.test.js

@@ -1008,4 +1008,38 @@ test('popover closes on input blur', function () {
   userEvent.click(document.body);
   expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
   expect(screen.queryByRole('option')).not.toBeInTheDocument();
+});
+describe('when isReadOnly is true', function () {
+  var testProp = {
+    isReadOnly: true
+  };
+  var TEST_DEFAULT_INPUT_VALUE = 'test default input value';
+  test('it does not have the show suggestions button', function () {
+    getComponent(testProp);
+    expect(screen.queryByRole('button', {
+      name: "".concat(defaultProps.label, " Show suggestions")
+    })).not.toBeInTheDocument();
+  });
+  test('it has attribute readonly', function () {
+    getComponent(testProp);
+    expect(screen.getByRole('combobox', {
+      name: defaultProps.label
+    })).toHaveAttribute('readonly');
+  });
+  test('the default selected value is selected', function () {
+    testProp.defaultInputValue = TEST_DEFAULT_INPUT_VALUE;
+    getComponent(testProp);
+    expect(screen.getByRole('combobox', {
+      name: defaultProps.label
+    })).toHaveValue(TEST_DEFAULT_INPUT_VALUE);
+  });
+  test('the dropdown does not open when clicked', function () {
+    getComponent(testProp);
+    userEvent.click(screen.getByRole('combobox', {
+      name: defaultProps.label
+    }));
+    expect(screen.queryByRole('listbox', {
+      name: 'Test Label Suggestions'
+    })).not.toBeInTheDocument();
+  });
 });

package/lib/components/Icon/NoticeIcon.js

@@ -0,0 +1,43 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+var _excluded = ["status"];
+
+var _noticeIcons;
+
+import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
+import React from 'react';
+import AlertCircleIcon from 'mdi-react/AlertCircleIcon';
+import AlertIcon from 'mdi-react/AlertIcon';
+import CheckCircleIcon from 'mdi-react/CheckCircleIcon';
+import InformationIcon from 'mdi-react/InformationIcon';
+import PropTypes from 'prop-types';
+import { Icon } from '../..';
+import statuses from '../../utils/devUtils/constants/statuses';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var noticeIcons = (_noticeIcons = {}, _defineProperty(_noticeIcons, statuses.DEFAULT, {
+  icon: InformationIcon,
+  testid: 'default-icon-testid'
+}), _defineProperty(_noticeIcons, statuses.ERROR, {
+  icon: AlertCircleIcon,
+  testid: 'error-icon-testid'
+}), _defineProperty(_noticeIcons, statuses.SUCCESS, {
+  icon: CheckCircleIcon,
+  testid: 'success-icon-testid'
+}), _defineProperty(_noticeIcons, statuses.WARNING, {
+  icon: AlertIcon,
+  testid: 'warning-icon-testid'
+}), _noticeIcons);
+export var NoticeIcon = function NoticeIcon(_ref) {
+  var _ref$status = _ref.status,
+      status = _ref$status === void 0 ? statuses.DEFAULT : _ref$status,
+      others = _objectWithoutProperties(_ref, _excluded);
+
+  return ___EmotionJSX(Icon, _extends({
+    "data-testid": noticeIcons[status].testid,
+    icon: noticeIcons[status].icon
+  }, others));
+};
+NoticeIcon.propTypes = {
+  status: PropTypes.oneOf(_Object$values(statuses))
+};

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import statuses from '../../utils/devUtils/constants/statuses';
+import { render } from '../../utils/testUtils/testWrapper';
+import { NoticeIcon, noticeIcons } from './NoticeIcon';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(NoticeIcon, props));
+};
+
+describe('NoticeIcon', function () {
+  test('renders', function () {
+    getComponent();
+    screen.getByTestId(noticeIcons[statuses.DEFAULT].testid);
+  });
+  test.each([[statuses.DEFAULT, noticeIcons[statuses.DEFAULT].testid], [statuses.ERROR, noticeIcons[statuses.ERROR].testid], [statuses.SUCCESS, noticeIcons[statuses.SUCCESS].testid], [statuses.WARNING, noticeIcons[statuses.WARNING].testid]])('when given status %s it renders icon with %s', function (status, icon) {
+    getComponent({
+      status: status
+    });
+    screen.getByTestId(icon);
+  });
+});

package/lib/components/Messages/Message.js

@@ -5,25 +5,13 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 var _excluded = ["color"];
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import React, { forwardRef, useRef, useState, useLayoutEffect } from 'react';
-import PropTypes from 'prop-types';
-import AlertCircleIcon from 'mdi-react/AlertCircleIcon';
-import CheckCircleIcon from 'mdi-react/CheckCircleIcon';
 import CloseIcon from 'mdi-react/CloseIcon';
-import AlertIcon from 'mdi-react/AlertIcon';
-import InformationIcon from 'mdi-react/InformationIcon';
-import useStatusClasses from '../../hooks/useStatusClasses';
+import PropTypes from 'prop-types';
+import { NoticeIcon } from '../Icon/NoticeIcon';
 import statuses from '../../utils/devUtils/constants/statuses';
-import Box from '../Box';
-import Icon from '../Icon';
-import IconButton from '../IconButton';
-import Text from '../Text';
+import useStatusClasses from '../../hooks/useStatusClasses';
+import { Box, Icon, IconButton, Text } from '../..';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var icons = {
-  "default": InformationIcon,
-  success: CheckCircleIcon,
-  error: AlertCircleIcon,
-  warning: AlertIcon
-};
 export var ARIA_STATUSES = {
   SUCCESS: 'Success Message',
   ERROR: 'Error Message',
@@ -50,10 +38,10 @@ var CloseButton = function CloseButton(_ref) {
 CloseButton.propTypes = {
   color: PropTypes.string
 };
-var Message = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      item = props.item,
-      onClose = props.onClose;
+var Message = /*#__PURE__*/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,
@@ -61,8 +49,7 @@ var Message = /*#__PURE__*/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'];
@@ -104,6 +91,17 @@ var Message = /*#__PURE__*/forwardRef(function (props, ref) {
     return '';
   };
 
+  var messageIconProps = {
+    className: statusClasses,
+    color: color,
+    mr: 'md'
+  };
+  var messageIcon = icon ? ___EmotionJSX(Icon, _extends({
+    icon: icon,
+    "data-testid": "custom-icon-testid"
+  }, messageIconProps)) : ___EmotionJSX(NoticeIcon, _extends({
+    status: status
+  }, messageIconProps));
   return ___EmotionJSX(Box, {
     variant: "messages.transition",
     className: wrapperClasses,
@@ -122,12 +120,7 @@ var Message = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "messages.item",
     className: statusClasses,
     bg: bg
-  }, icon && ___EmotionJSX(Icon, {
-    icon: icon,
-    className: statusClasses,
-    color: color,
-    mr: "md"
-  }), ___EmotionJSX(Text, {
+  }, messageIcon, ___EmotionJSX(Text, {
     className: statusClasses,
     color: color,
     mr: "md"

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

@@ -5,6 +5,7 @@ import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import React from 'react';
 import { Item } from '@react-stately/collections';
 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 Messages, { messagesReducerStory, multiMessagesReducerStory } from '.';
@@ -146,4 +147,14 @@ test('should render messages with multiMessagesReducerStory', function () {
   getComponent();
   multiMessagesReducerStory.actions.showSuccessMessage();
   expect(screen.getByTestId(testId)).toBeInTheDocument();
+});
+test('should render a custom icon', function () {
+  getWithDynamicList({
+    items: [{
+      key: 'message1',
+      text: 'test text',
+      icon: AccountIcon
+    }]
+  });
+  screen.getByTestId('custom-icon-testid');
 });

package/lib/components/TextField/TextField.stories.js

@@ -57,7 +57,7 @@ export var Default = function Default(_ref) {
       args = _objectWithoutProperties(_ref, _excluded);
 
   return ___EmotionJSX(TextField, _extends({
-    id: "custom-id",
+    id: "default-id",
     name: "custom-name",
     label: "Example Label"
   }, variant && {
@@ -68,7 +68,7 @@ export var Default = function Default(_ref) {
 };
 export var SmallVariant = function SmallVariant() {
   return ___EmotionJSX(TextField, {
-    id: "custom-id",
+    id: "small-variant-id",
     name: "custom-name",
     label: "Example Label",
     controlProps: {
@@ -187,7 +187,7 @@ export var Warning = function Warning() {
 };
 export var WithHelpHint = function WithHelpHint() {
   return ___EmotionJSX(TextField, {
-    id: "custom-id",
+    id: "with-help-hint-id",
     name: "custom-name",
     hintText: "Example Hint",
     label: "Example Label"

package/lib/index.js

@@ -22,6 +22,8 @@ export { default as Bracket } from './components/Bracket';
 export * from './components/Bracket';
 export { default as Breadcrumbs } from './components/Breadcrumbs';
 export * from './components/Breadcrumbs';
+export { default as Bulletin } from './components/Bulletin';
+export * from './components/Bulletin';
 export { default as Button } from './components/Button';
 export * from './components/Button';
 export { default as Card } from './components/Card';

package/lib/styles/variants/bulletin.js

@@ -0,0 +1,41 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+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; }
+
+var base = {
+  alignItems: 'center',
+  border: '1px solid',
+  borderColor: 'text.secondary',
+  fontSize: 'md',
+  p: '15px 12px 15px 0',
+  width: '600px'
+};
+
+var error = _objectSpread(_objectSpread({}, base), {}, {
+  borderColor: 'critical.bright'
+});
+
+var success = _objectSpread(_objectSpread({}, base), {}, {
+  borderColor: 'success.bright'
+});
+
+var warning = _objectSpread(_objectSpread({}, base), {}, {
+  borderColor: 'warning.bright'
+});
+
+export default {
+  base: base,
+  error: error,
+  success: success,
+  warning: warning
+};

package/lib/styles/variants/variants.js

@@ -35,10 +35,12 @@ import table from './table';
 import * as tabs from './tabs';
 import tooltip from './tooltip';
 import collapsiblePanel from './collapsiblePanel';
+import bulletin from './bulletin';
 import dataTable from './../../components/DataTable/DataTable.styles';
 export default _objectSpread(_objectSpread({
   accordion: accordion,
   boxes: boxes,
+  bulletin: bulletin,
   codeView: codeView,
   images: images,
   imageUpload: imageUpload,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.38.0-alpha.7",
+  "version": "1.38.0-alpha.9",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",