@pingux/astro 1.2.0-alpha.1 → 1.2.0-alpha.13

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

@@ -63,15 +63,15 @@ var Default = function Default(args) {
     onAction: onAction
   }, args), (0, _react2.jsx)(_collections.Item, {
     key: "home",
-    variant: "text",
+    variant: "link",
     "data-id": "home"
   }, "Home"), (0, _react2.jsx)(_collections.Item, {
     key: "trendy",
-    variant: "text",
+    variant: "link",
     "data-id": "trendy"
   }, "Trendy"), (0, _react2.jsx)(_collections.Item, {
     key: "march 2020 assets",
-    variant: "text",
+    variant: "link",
     "data-id": "march"
   }, "March 2020 Assets"));
 };

package/lib/cjs/components/Button/Button.js

@@ -71,7 +71,8 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       onPressChange = props.onPressChange,
       onPressUp = props.onPressUp,
       children = props.children,
-      others = (0, _objectWithoutProperties2["default"])(props, ["className", "isDisabled", "isLoading", "onHoverStart", "onHoverChange", "onHoverEnd", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "children"]);
+      variant = props.variant,
+      others = (0, _objectWithoutProperties2["default"])(props, ["className", "isDisabled", "isLoading", "onHoverStart", "onHoverChange", "onHoverEnd", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "children", "variant"]);
   var buttonRef = (0, _react.useRef)();
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
@@ -102,7 +103,17 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }),
       classNames = _useStatusClasses.classNames;
 
+  (0, _hooks.useDeprecationWarning)('The "icon" variant for `Button` is deprecated in Astro-UI 1.0.0, use the `IconButton` component instead.', {
+    isActive: props.variant === 'icon'
+  });
+  (0, _hooks.useDeprecationWarning)('The "danger" variant for `Button` will be deprecated in Astro-UI 2.0.0, use the `critical` variant instead.', {
+    isActive: props.variant === 'danger'
+  });
+  (0, _hooks.useDeprecationWarning)('The "text" variant for `Button` will be deprecated in Astro-UI 2.0.0, use the `link` variant instead.', {
+    isActive: props.variant === 'text'
+  });
   var ariaLabel = props['aria-label'];
+  (0, _hooks.useAriaLabelWarning)('Button', ariaLabel, variant === 'filter');
   return (0, _react2.jsx)(_themeUi.Button, (0, _extends2["default"])({
     "aria-label": ariaLabel,
     ref: buttonRef,
@@ -113,7 +124,8 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center'
-    }
+    },
+    variant: variant
   }, others, (0, _utils.mergeProps)(hoverProps, focusProps, buttonProps)), isLoading ? (0, _react2.jsx)("span", {
     style: {
       visibility: 'hidden'

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

@@ -8,22 +8,24 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.InlineButton = exports.TextButton = exports.TextIconButton = exports.Disabled = exports.Default = exports["default"] = void 0;
+exports.FilterButton = exports.ColorBlockButton = exports.InlineButton = exports.TextIconButton = exports.Disabled = exports.Default = exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
-var _AddCircleIcon = _interopRequireDefault(require("mdi-react/AddCircleIcon"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 
-var _Box = _interopRequireDefault(require("../Box"));
+var _react = _interopRequireDefault(require("react"));
 
-var _ = _interopRequireDefault(require("."));
+var _AddCircleIcon = _interopRequireDefault(require("mdi-react/AddCircleIcon"));
 
-var _Icon = _interopRequireDefault(require("../Icon"));
+var _CreateIcon = _interopRequireDefault(require("mdi-react/CreateIcon"));
 
-var _Text = _interopRequireDefault(require("../Text"));
+var _FilterIcon = _interopRequireDefault(require("mdi-react/FilterIcon"));
 
 var _variants = require("../../utils/devUtils/constants/variants");
 
+var _index = require("../../index");
+
 var _react2 = require("@emotion/react");
 
 // removing the iconButton variants from this story.
@@ -35,7 +37,7 @@ delete variants.INVERTED; // add designer approved variants for devs to use here
 var variantOptions = ['critical', 'danger', 'default', 'inline', 'link', 'primary', 'success', 'text'];
 var _default = {
   title: 'Button',
-  component: _["default"],
+  component: _index.Button,
   argTypes: {
     variant: {
       control: {
@@ -56,18 +58,25 @@ var _default = {
         type: 'text'
       }
     }
+  },
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
   }
 };
 exports["default"] = _default;
 
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_["default"], args);
+  return (0, _react2.jsx)(_index.Button, args);
 };
 
 exports.Default = Default;
 
 var Disabled = function Disabled() {
-  return (0, _react2.jsx)(_["default"], {
+  return (0, _react2.jsx)(_index.Button, {
     isDisabled: true
   }, "Button Text");
 };
@@ -75,12 +84,12 @@ var Disabled = function Disabled() {
 exports.Disabled = Disabled;
 
 var TextIconButton = function TextIconButton() {
-  return (0, _react2.jsx)(_["default"], {
+  return (0, _react2.jsx)(_index.Button, {
     mb: "sm"
-  }, (0, _react2.jsx)(_Box["default"], {
+  }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignItems: "center"
-  }, (0, _react2.jsx)(_Icon["default"], {
+  }, (0, _react2.jsx)(_index.Icon, {
     icon: _AddCircleIcon["default"],
     mr: "sm",
     color: "active",
@@ -90,24 +99,56 @@ var TextIconButton = function TextIconButton() {
 
 exports.TextIconButton = TextIconButton;
 
-var TextButton = function TextButton() {
-  return (0, _react2.jsx)(_["default"], {
-    mb: "sm",
-    variant: "text",
-    "aria-label": "Add option"
-  }, (0, _react2.jsx)(_Text["default"], {
-    variant: "label",
-    color: "active"
-  }, " + Add Option"));
-};
-
-exports.TextButton = TextButton;
-
 var InlineButton = function InlineButton() {
-  return (0, _react2.jsx)(_["default"], {
+  return (0, _react2.jsx)(_index.Button, {
     mb: "sm",
     variant: "inline"
   }, "Inline");
 };
 
-exports.InlineButton = InlineButton;
+exports.InlineButton = InlineButton;
+
+var ColorBlockButton = function ColorBlockButton(args) {
+  // Change `isConfigured` property in storybook controls
+  var isConfigured = args.isConfigured,
+      props = (0, _objectWithoutProperties2["default"])(args, ["isConfigured"]);
+  return (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({}, props, {
+    variant: "colorBlock",
+    className: isConfigured ? 'is-configured' : ''
+  }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
+    variant: "buttonTitle"
+  }, "Title"), (0, _react2.jsx)(_index.Text, {
+    variant: "buttonSubtitle"
+  }, "Info")), (0, _react2.jsx)(_index.Icon, {
+    icon: _CreateIcon["default"]
+  }));
+};
+
+exports.ColorBlockButton = ColorBlockButton;
+ColorBlockButton.story = {
+  argTypes: {
+    isConfigured: {
+      control: {
+        type: 'boolean'
+      },
+      defaultValue: false
+    }
+  }
+};
+
+var FilterButton = function FilterButton() {
+  return (0, _react2.jsx)(_index.Box, {
+    p: "xx",
+    isRow: true,
+    gap: "md"
+  }, (0, _react2.jsx)(_index.SearchField, {
+    "aria-label": "search items"
+  }), (0, _react2.jsx)(_index.Button, {
+    variant: "filter",
+    "aria-label": "filter button"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _FilterIcon["default"]
+  })));
+};
+
+exports.FilterButton = FilterButton;

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

@@ -122,4 +122,30 @@ test('button renders children when not loading', function () {
   expect(childWrapper).toBeInTheDocument();
   expect(childWrapper).toBeVisible();
   expect(_testWrapper.screen.queryByRole('progressbar')).not.toBeInTheDocument();
+});
+test('color block button renders in default state', function () {
+  getComponent({
+    variant: 'colorBlock'
+  });
+
+  var button = _testWrapper.screen.getByRole('button');
+
+  expect(button).toBeInTheDocument();
+  expect(button).not.toHaveClass('is-configured');
+
+  _userEvent["default"].tab();
+
+  expect(button).toHaveClass('is-focused');
+  expect(button).toHaveFocus();
+});
+test('color block button renders in configured state', function () {
+  getComponent({
+    variant: 'colorBlock',
+    className: 'is-configured'
+  });
+
+  var button = _testWrapper.screen.getByRole('button');
+
+  expect(button).toBeInTheDocument();
+  expect(button).toHaveClass('is-configured');
 });

package/lib/cjs/components/CopyText/CopyButton.js

@@ -18,6 +18,10 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _ContentCopyIcon = _interopRequireDefault(require("mdi-react/ContentCopyIcon"));
 
+var _lodash = require("lodash");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _Icon = _interopRequireDefault(require("../Icon"));
 
 var _IconButton = _interopRequireDefault(require("../IconButton"));
@@ -29,10 +33,13 @@ var CopyButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: ref,
     "aria-label": "copy",
     variant: "buttons.copy"
-  }, props), (0, _react2.jsx)(_Icon["default"], {
+  }, (0, _lodash.omit)(props, 'iconProps')), (0, _react2.jsx)(_Icon["default"], (0, _extends2["default"])({
     icon: _ContentCopyIcon["default"],
     size: 15
-  }));
+  }, props === null || props === void 0 ? void 0 : props.iconProps)));
 });
+CopyButton.propTypes = {
+  iconProps: _propTypes["default"].shape({})
+};
 var _default = CopyButton;
 exports["default"] = _default;

package/lib/cjs/components/HelpHint/HelpHint.js

@@ -18,8 +18,6 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _HelpIcon = _interopRequireDefault(require("mdi-react/HelpIcon"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _IconButton = _interopRequireDefault(require("../IconButton"));
@@ -30,20 +28,40 @@ var _Icon = _interopRequireDefault(require("../Icon"));
 
 var _react2 = require("@emotion/react");
 
+var HelpIcon = function HelpIcon() {
+  return (0, _react2.jsx)("svg", {
+    width: "7",
+    height: "9",
+    viewBox: "0 0 7 9",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, (0, _react2.jsx)("path", {
+    d: "M2.56685 7.306V9H4.29385V7.306H2.56685ZM0.795848 3.676H2.41285C2.41285 3.478 2.43485 3.29467 2.47885 3.126C2.52285 2.95 2.58885 2.79967 2.67685 2.675C2.77218 2.543 2.88951 2.44033 3.02885 2.367C3.17551 2.28633 3.34785 2.246 3.54585 2.246C3.83918 2.246 4.06651 2.32667 4.22785 2.488C4.39651 2.64933 4.48085 2.89867 4.48085 3.236C4.48818 3.434 4.45151 3.599 4.37085 3.731C4.29751 3.863 4.19851 3.984 4.07385 4.094C3.94918 4.204 3.81351 4.314 3.66685 4.424C3.52018 4.534 3.38085 4.666 3.24885 4.82C3.11685 4.96667 2.99951 5.14633 2.89685 5.359C2.80151 5.57167 2.74285 5.83567 2.72085 6.151V6.646H4.20585V6.228C4.23518 6.008 4.30485 5.82467 4.41485 5.678C4.53218 5.53133 4.66418 5.403 4.81085 5.293C4.95751 5.17567 5.11151 5.062 5.27285 4.952C5.44151 4.83467 5.59185 4.69533 5.72385 4.534C5.86318 4.37267 5.97685 4.17833 6.06485 3.951C6.16018 3.72367 6.20785 3.434 6.20785 3.082C6.20785 2.86933 6.16018 2.642 6.06485 2.4C5.97685 2.15067 5.82651 1.91967 5.61385 1.707C5.40118 1.49433 5.11885 1.31833 4.76685 1.179C4.42218 1.03233 3.98951 0.959 3.46885 0.959C3.06551 0.959 2.69885 1.02867 2.36885 1.168C2.04618 1.3 1.76751 1.487 1.53285 1.729C1.30551 1.971 1.12585 2.257 0.993848 2.587C0.869181 2.917 0.803181 3.28 0.795848 3.676Z",
+    fill: "#3B4A58"
+  }));
+};
+/**
+ * A `HelpHint` is a composed component using tooltip trigger and icon button.
+ *
+ * For customization the trigger icon,
+ * please see the [TooltipTrigger](./?path=/docs/tooltiptrigger--default) docs.
+ */
+
+
 var HelpHint = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var children = props.children,
       tooltipProps = props.tooltipProps,
       iconButtonProps = props.iconButtonProps,
       others = (0, _objectWithoutProperties2["default"])(props, ["children", "tooltipProps", "iconButtonProps"]);
   return (0, _react2.jsx)(_TooltipTrigger["default"], (0, _extends2["default"])({
-    ref: ref
-  }, others), (0, _react2.jsx)(_IconButton["default"], (0, _extends2["default"])({
+    ref: ref,
+    direction: "top"
+  }, others, tooltipProps), (0, _react2.jsx)(_IconButton["default"], (0, _extends2["default"])({
     variant: "helpHint",
     "aria-label": "label help hint",
     "data-testid": "help-hint__button"
   }, iconButtonProps), (0, _react2.jsx)(_Icon["default"], {
-    icon: _HelpIcon["default"],
-    size: "11px"
+    icon: HelpIcon
   })), (0, _react2.jsx)(_TooltipTrigger.Tooltip, tooltipProps, children));
 });
 HelpHint.propTypes = {

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

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.WithTooltipAndIconButtonProps = exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = _interopRequireDefault(require("."));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'HelpHint',
+  component: _["default"],
+  argTypes: {
+    children: {
+      description: 'Tooltip content',
+      defaultValue: 'Text of the tooltip right here...',
+      control: {
+        type: 'text'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var Default = function Default(args) {
+  return (0, _react2.jsx)(_Box["default"], {
+    p: 50
+  }, (0, _react2.jsx)(_["default"], args));
+};
+
+exports.Default = Default;
+
+var WithTooltipAndIconButtonProps = function WithTooltipAndIconButtonProps() {
+  return (0, _react2.jsx)(_Box["default"], {
+    p: 50
+  }, (0, _react2.jsx)(_["default"], {
+    tooltipProps: {
+      direction: 'bottom'
+    },
+    iconButtonProps: {
+      'aria-label': 'Help hint'
+    }
+  }, "Text of the tooltip right here..."));
+};
+
+exports.WithTooltipAndIconButtonProps = WithTooltipAndIconButtonProps;

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

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+
+var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
+
+var _HelpHint = _interopRequireDefault(require("./HelpHint"));
+
+var _react2 = require("@emotion/react");
+
+var testId = 'help-hint__button';
+var tooltipValue = 'Some text';
+var defaultProps = {
+  children: tooltipValue
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_HelpHint["default"], (0, _extends2["default"])({}, defaultProps, props)));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+(0, _testAxe["default"])(getComponent);
+test('renders HelpHint component', function () {
+  getComponent();
+
+  var helpHintButton = _testWrapper.screen.getByTestId(testId);
+
+  expect(helpHintButton).toBeInTheDocument();
+});
+test('shows tooltip on hover', function () {
+  getComponent();
+
+  var helpHintButton = _testWrapper.screen.getByTestId(testId);
+
+  expect(_testWrapper.screen.queryByText(tooltipValue)).not.toBeInTheDocument();
+
+  _testWrapper.fireEvent.mouseMove(helpHintButton);
+
+  _testWrapper.fireEvent.mouseEnter(helpHintButton);
+
+  expect(_testWrapper.screen.getByText(tooltipValue)).toBeInTheDocument();
+});
+test('shows tooltip on focus', function () {
+  getComponent();
+
+  var helpHintButton = _testWrapper.screen.getByTestId(testId);
+
+  expect(_testWrapper.screen.queryByText(tooltipValue)).not.toBeInTheDocument();
+
+  _userEvent["default"].tab();
+
+  expect(helpHintButton).toHaveFocus();
+  expect(_testWrapper.screen.queryByText(tooltipValue)).toBeInTheDocument();
+});
+test('applies tooltipProps', function () {
+  getComponent({
+    tooltipProps: {
+      isOpen: true
+    }
+  });
+  expect(_testWrapper.screen.getByText(tooltipValue)).toBeInTheDocument();
+});
+test('applies iconButtonProps', function () {
+  var newLabel = 'New label';
+  getComponent({
+    iconButtonProps: {
+      'aria-label': newLabel
+    }
+  });
+  expect(_testWrapper.screen.getByLabelText(newLabel)).toBeInTheDocument();
+});

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

@@ -8,7 +8,7 @@ _Object$defineProperty2(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.multiMessagesReducer = void 0;
+exports["default"] = exports.multiMessagesReducer = exports.messagesReducer = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
 
@@ -35,6 +35,7 @@ function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(obje
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; (0, _forEach["default"])(_context = ownKeys(Object(source), true)).call(_context, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source))).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
 
 var messagesReducer = _utils.messagesReducer;
+exports.messagesReducer = messagesReducer;
 var multiMessagesReducer = _utils.multiMessagesReducer;
 exports.multiMessagesReducer = multiMessagesReducer;
 

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

@@ -52,7 +52,7 @@ var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/s
 
 var _ = require("../..");
 
-var _Messages = _interopRequireWildcard(require("./Messages.reducer"));
+var _index = require("./index");
 
 var _react2 = require("@emotion/react");
 
@@ -233,21 +233,21 @@ var UseReducer = function UseReducer() {
   //   showErrorMessage: makeShowMessage('error', -1),
   //   showWarningMessage: makeShowMessage('warning', -1),
   // };
-  var _useReducer = (0, _react.useReducer)(_Messages["default"]),
+  var _useReducer = (0, _react.useReducer)(_index.messagesReducerStory),
       _useReducer2 = (0, _slicedToArray2["default"])(_useReducer, 2),
       items = _useReducer2[0],
       dispatch = _useReducer2[1];
 
   var showAMessage = function showAMessage() {
-    var actionFn = [_Messages["default"].actions.showSuccessMessage, _Messages["default"].actions.showErrorMessage, _Messages["default"].actions.showWarningMessage][Math.floor(Math.random() * 3)];
+    var actionFn = [_index.messagesReducerStory.actions.showSuccessMessage, _index.messagesReducerStory.actions.showErrorMessage, _index.messagesReducerStory.actions.showWarningMessage][Math.floor(Math.random() * 3)];
     var message = messageText[Math.floor(Math.random() * 6)];
     actionFn(message)(dispatch);
   };
 
   var removeMessage = function removeMessage(key) {
-    dispatch(_Messages["default"].actions.hideMessage(key));
+    dispatch(_index.messagesReducerStory.actions.hideMessage(key));
     (0, _setTimeout2["default"])(function () {
-      return dispatch(_Messages["default"].actions.removeMessage(key));
+      return dispatch(_index.messagesReducerStory.actions.removeMessage(key));
     }, 200);
   };
 
@@ -256,7 +256,7 @@ var UseReducer = function UseReducer() {
   }, "Add Message"), (items === null || items === void 0 ? void 0 : items.length) > 0 && (0, _react2.jsx)(_.Button, {
     mt: "md",
     onPress: function onPress() {
-      return dispatch(_Messages["default"].actions.clearMessages());
+      return dispatch(_index.messagesReducerStory.actions.clearMessages());
     }
   }, "Clear messages"), (0, _react2.jsx)(_.Messages, {
     items: items,
@@ -269,7 +269,7 @@ var UseReducer = function UseReducer() {
 exports.UseReducer = UseReducer;
 
 var UseReducerWithMultipleContainers = function UseReducerWithMultipleContainers() {
-  var _useReducer3 = (0, _react.useReducer)(_Messages.multiMessagesReducer, {
+  var _useReducer3 = (0, _react.useReducer)(_index.multiMessagesReducerStory, {
     'container-one': [],
     'container-two': []
   }),
@@ -278,15 +278,15 @@ var UseReducerWithMultipleContainers = function UseReducerWithMultipleContainers
       dispatch = _useReducer4[1];
 
   var showAMessage = function showAMessage(container) {
-    var actionFn = [_Messages.multiMessagesReducer.actions.showSuccessMessage, _Messages.multiMessagesReducer.actions.showCriticalMessage, _Messages.multiMessagesReducer.actions.showWarningMessage][Math.floor(Math.random() * 3)];
+    var actionFn = [_index.multiMessagesReducerStory.actions.showSuccessMessage, _index.multiMessagesReducerStory.actions.showCriticalMessage, _index.multiMessagesReducerStory.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(_Messages.multiMessagesReducer.actions.hideMessage(container, key));
+    dispatch(_index.multiMessagesReducerStory.actions.hideMessage(container, key));
     (0, _setTimeout2["default"])(function () {
-      return dispatch(_Messages.multiMessagesReducer.actions.removeMessage(container, key));
+      return dispatch(_index.multiMessagesReducerStory.actions.removeMessage(container, key));
     }, 200);
   };
 

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

@@ -26,7 +26,7 @@ var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
 
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 
-var _ = _interopRequireDefault(require("."));
+var _ = _interopRequireWildcard(require("."));
 
 var _Button = _interopRequireDefault(require("../Button"));
 
@@ -211,4 +211,18 @@ describe('announcements', function () {
     expect(messages.childElementCount).toBe(1);
     expect(_liveAnnouncer.announce).toHaveBeenCalledWith('New message 1', 'polite');
   });
+});
+test('should render messages with messagesReducerStory', function () {
+  getComponent();
+
+  _.messagesReducerStory.actions.showSuccessMessage();
+
+  expect(_testWrapper.screen.getByTestId(testId)).toBeInTheDocument();
+});
+test('should render messages with multiMessagesReducerStory', function () {
+  getComponent();
+
+  _.multiMessagesReducerStory.actions.showSuccessMessage();
+
+  expect(_testWrapper.screen.getByTestId(testId)).toBeInTheDocument();
 });

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

@@ -14,7 +14,10 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _exportNames = {};
+var _exportNames = {
+  messagesReducerStory: true,
+  multiMessagesReducerStory: true
+};
 
 _Object$defineProperty(exports, "default", {
   enumerable: true,
@@ -23,6 +26,20 @@ _Object$defineProperty(exports, "default", {
   }
 });
 
+_Object$defineProperty(exports, "messagesReducerStory", {
+  enumerable: true,
+  get: function get() {
+    return _Messages2.messagesReducer;
+  }
+});
+
+_Object$defineProperty(exports, "multiMessagesReducerStory", {
+  enumerable: true,
+  get: function get() {
+    return _Messages2.multiMessagesReducer;
+  }
+});
+
 var _Messages = _interopRequireDefault(require("./Messages"));
 
 var _utils = require("./utils");
@@ -37,4 +54,6 @@ _forEachInstanceProperty(_context = _Object$keys(_utils)).call(_context, functio
       return _utils[key];
     }
   });
-});
+});
+
+var _Messages2 = require("./Messages.reducer");

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

@@ -163,7 +163,7 @@ var DarkVariant = function DarkVariant() {
       onPress: state.close,
       "aria-label": "Yes"
     }, "Yes"), (0, _react2.jsx)(_index.Button, {
-      variant: "text",
+      variant: "link",
       onPress: state.close,
       "aria-label": "Cancel"
     }, "Cancel"))))

package/lib/cjs/components/MultivaluesField/MultivaluesField.js

@@ -320,7 +320,9 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
           height: '100%',
           m: 5,
           mr: 10,
-          py: 2
+          ml: 0,
+          py: 3,
+          pr: 0
         },
         textProps: {
           sx: {

package/lib/cjs/components/NumberField/NumberField.js

@@ -50,6 +50,8 @@ var _i18n = require("@react-aria/i18n");
 
 var _utils = require("@react-aria/utils");
 
+var _omit = _interopRequireDefault(require("lodash/omit"));
+
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 
 var _index = require("../../index");
@@ -130,7 +132,7 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: inputRef // we don't want to merge this props, we want to
     // overwrite them like defaultValue, value, ect.
 
-  }, fieldControlProps, inputProps)), ControlArrows), helperText && (0, _react2.jsx)(_index.FieldHelperText, {
+  }, fieldControlProps, (0, _omit["default"])(inputProps, 'name'))), ControlArrows), helperText && (0, _react2.jsx)(_index.FieldHelperText, {
     status: status
   }, helperText)));
 });