@pingux/astro 1.38.1 → 1.39.0-alpha.1

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

@@ -152,18 +152,20 @@ var Header = function Header(props) {
   }, (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "create-icon",
     sx: {
-      mr: '4px',
-      height: '26px',
-      width: '26px'
+      mr: '4px'
     }
-  }, (0, _react2.jsx)(_CreateIcon["default"], null)), (0, _react2.jsx)(_index.IconButton, {
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _CreateIcon["default"],
+    size: "sm"
+  })), (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "vertical-lines-icon",
     sx: {
-      mr: '4px',
-      height: '26px',
-      width: '26px'
+      mr: '4px'
     }
-  }, (0, _react2.jsx)(_MoreVertIcon["default"], null)))));
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _MoreVertIcon["default"],
+    size: "sm"
+  })))));
 };
 
 var Body = function Body(props) {

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/CollapsiblePanel/CollapsiblePanel.stories.js

@@ -256,7 +256,7 @@ var CollapsiblePanelWithBadge = function CollapsiblePanelWithBadge(args) {
     }
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _CloseIcon["default"],
-    size: 20
+    size: "sm"
   }))))), (0, _react2.jsx)(_index.Box, {
     pl: "md",
     pt: "25px"

package/lib/cjs/components/ComboBox/ComboBoxInput.js

@@ -147,7 +147,7 @@ var ComboBoxInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, [isLoading, showLoading, inputValue]); // END - minimum delay time for loading indicator = 500ms
 
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
-  var button = (0, _react2.jsx)(_.Box, {
+  var button = !isReadOnly && (0, _react2.jsx)(_.Box, {
     isRow: true,
     variant: "boxes.inputInContainerSlot"
   }, // Render loader after delay if filtering or loading

package/lib/cjs/components/ComboBoxField/ComboBoxField.js

@@ -76,7 +76,7 @@ var _ScrollBox = _interopRequireDefault(require("../ScrollBox"));
 
 var _react2 = require("@emotion/react");
 
-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"];
 
 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); }
@@ -108,6 +108,7 @@ var ComboBoxField = /*#__PURE__*/(0, _react.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,
@@ -183,7 +184,7 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       contains = _useFilter.contains;
 
   var state = (0, _combobox2.useComboBoxState)(_objectSpread(_objectSpread({}, comboBoxOptions), {}, {
-    defaultItems: defaultItems,
+    defaultItems: isReadOnly ? [] : defaultItems,
     items: items,
     onSelectionChange: hasAddOption || hasCustomValue ? onSelectionChangeHandler : onSelectionChange,
     defaultFilter: typeof defaultFilter !== 'undefined' ? defaultFilter : contains
@@ -254,7 +255,16 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     minWidth: menuWidth
   });
 
-  var listbox = (0, _react2.jsx)(_focus.FocusScope, {
+  var listBox = !isReadOnly && (0, _react2.jsx)(_PopoverContainer["default"], {
+    hasNoArrow: true,
+    isDismissable: true,
+    isNonModal: true,
+    isOpen: state.isOpen,
+    onClose: state.close,
+    placement: placement,
+    ref: popoverRef,
+    style: style
+  }, (0, _react2.jsx)(_focus.FocusScope, {
     restoreFocus: true
   }, (0, _react2.jsx)(_overlays.DismissButton, {
     onDismiss: state.close
@@ -270,7 +280,7 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     isSelectedOnPressUp: shouldSelectOnPressUp
   }, otherListBoxProps))), (0, _react2.jsx)(_overlays.DismissButton, {
     onDismiss: state.close
-  }));
+  })));
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_ComboBox["default"], (0, _extends2["default"])({}, props, {
     isOpen: state.isOpen,
     inputProps: inputProps,
@@ -281,16 +291,7 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     triggerRef: buttonRef,
     controlProps: controlProps,
     "aria-invalid": status === 'error' && true
-  })), (0, _react2.jsx)(_PopoverContainer["default"], {
-    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/cjs/components/ComboBoxField/ComboBoxField.stories.js

@@ -26,7 +26,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.WithoutStatusIndicator = exports.WithSections = exports.WithCustomInputValue = exports.WithCustomHeight = exports.Required = exports.HelperText = exports.FocusMenuTrigger = exports.DisabledKeys = exports.Disabled = exports.Default = exports.CustomDefaultFilter = exports.ControlledWithCustomValue = exports.ControlledWithAddOption = exports.ControlledSelection = exports.ControlledMenu = exports.ControlledInput = exports.ControlledFiltering = exports.AsyncLoading = exports.AllowCustomValue = void 0;
+exports["default"] = exports.WithoutStatusIndicator = exports.WithSections = exports.WithCustomInputValue = exports.WithCustomHeight = exports.Required = exports.ReadOnly = exports.HelperText = exports.FocusMenuTrigger = exports.DisabledKeys = exports.Disabled = exports.Default = exports.CustomDefaultFilter = exports.ControlledWithCustomValue = exports.ControlledWithAddOption = exports.ControlledSelection = exports.ControlledMenu = exports.ControlledInput = exports.ControlledFiltering = exports.AsyncLoading = exports.AllowCustomValue = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime-corejs3/regenerator"));
 
@@ -567,6 +567,20 @@ var HelperText = function HelperText() {
 
 exports.HelperText = HelperText;
 
+var ReadOnly = function ReadOnly() {
+  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
+    label: "Example label",
+    defaultItems: items,
+    isReadOnly: true
+  }, actions), function (item) {
+    return (0, _react2.jsx)(_.Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
+
+exports.ReadOnly = ReadOnly;
+
 var Required = function Required() {
   return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
     label: "Example label",

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

@@ -1215,4 +1215,40 @@ test('popover closes on input blur', function () {
 
   expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
   expect(_testWrapper.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(_testWrapper.screen.queryByRole('button', {
+      name: "".concat(defaultProps.label, " Show suggestions")
+    })).not.toBeInTheDocument();
+  });
+  test('it has attribute readonly', function () {
+    getComponent(testProp);
+    expect(_testWrapper.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(_testWrapper.screen.getByRole('combobox', {
+      name: defaultProps.label
+    })).toHaveValue(TEST_DEFAULT_INPUT_VALUE);
+  });
+  test('the dropdown does not open when clicked', function () {
+    getComponent(testProp);
+
+    _userEvent["default"].click(_testWrapper.screen.getByRole('combobox', {
+      name: defaultProps.label
+    }));
+
+    expect(_testWrapper.screen.queryByRole('listbox', {
+      name: 'Test Label Suggestions'
+    })).not.toBeInTheDocument();
+  });
 });

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/IconButton/IconButton.stories.js

@@ -63,6 +63,13 @@ var _default = {
         options: ['iconButton', 'inverted', 'square', 'invertedSquare']
       },
       defaultValue: 'iconButton'
+    },
+    size: {
+      control: {
+        type: 'select',
+        options: ['xs', 'sm', 'md']
+      },
+      defaultValue: 'sm'
     }
   }
 };
@@ -72,7 +79,8 @@ var Default = function Default(args) {
   return (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({
     "aria-label": "default icon button"
   }, args), (0, _react2.jsx)(_index.Icon, {
-    icon: _CreateIcon["default"]
+    icon: _CreateIcon["default"],
+    size: args.size
   }));
 };
 
@@ -83,7 +91,8 @@ var WithTooltip = function WithTooltip() {
     "aria-label": "icon button with tooltip",
     title: "Edit"
   }, (0, _react2.jsx)(_index.Icon, {
-    icon: _CreateIcon["default"]
+    icon: _CreateIcon["default"],
+    size: "sm"
   }));
 };
 

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

@@ -69,6 +69,9 @@ var Controlled = function Controlled(args) {
     isToggled: isToggled,
     buttonProps: {
       'aria-label': 'eye icon'
+    },
+    iconProps: {
+      size: 'sm'
     }
   }));
 };

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

@@ -55,11 +55,9 @@ var Default = function Default(args) {
   }, "Fons Vernall")), (0, _react2.jsx)(_Box["default"], {
     isRow: true,
     alignSelf: "center"
-  }, (0, _react2.jsx)(_IconButton["default"], {
-    size: 26
-  }, (0, _react2.jsx)(_Icon["default"], {
+  }, (0, _react2.jsx)(_IconButton["default"], null, (0, _react2.jsx)(_Icon["default"], {
     icon: _MoreVertIcon["default"],
-    size: 20,
+    size: "sm",
     color: "neutral.20"
   })))), (0, _react2.jsx)(_Separator["default"], {
     margin: 0
@@ -89,11 +87,9 @@ var WithSubtitle = function WithSubtitle(args) {
   }, "fvernall0@google.it"))), (0, _react2.jsx)(_Box["default"], {
     isRow: true,
     alignSelf: "center"
-  }, (0, _react2.jsx)(_IconButton["default"], {
-    size: 26
-  }, (0, _react2.jsx)(_Icon["default"], {
+  }, (0, _react2.jsx)(_IconButton["default"], null, (0, _react2.jsx)(_Icon["default"], {
     icon: _MoreVertIcon["default"],
-    size: 20,
+    size: "sm",
     color: "neutral.20"
   })))), (0, _react2.jsx)(_Separator["default"], {
     margin: 0