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

package/lib/cjs/components/OverlayPanel/OverlayPanel.js

@@ -18,8 +18,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -52,14 +50,8 @@ var OverlayPanel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       onClose = _useOverlayPanelState.onClose;
 
   var overlayPanelRef = (0, _react.useRef)();
-
-  var _useState = (0, _react.useState)(true),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      contain = _useState2[0],
-      setIsContained = _useState2[1];
   /* istanbul ignore next */
 
-
   (0, _react.useImperativeHandle)(ref, function () {
     return overlayPanelRef.current;
   });
@@ -73,18 +65,12 @@ var OverlayPanel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     e.stopPropagation();
 
     if (e.key === 'Escape') {
-      setIsContained(false);
+      onClose(state, triggerRef, onCloseProp);
     }
   };
 
-  (0, _react.useEffect)(function () {
-    if (!contain && onClose) {
-      onClose(state, triggerRef, onCloseProp);
-    }
-  }, [contain]);
   return (0, _react2.jsx)(_focus.FocusScope, {
-    autoFocus: true,
-    contain: contain
+    autoFocus: true
   }, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     variant: "overlayPanel.overlayPanel",
     ref: overlayPanelRef

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

@@ -79,6 +79,15 @@ test('onClose callback fires when provided', function () {
 
   expect(onClose).toHaveBeenCalled();
 });
+test('custom classname can be passed', function () {
+  getComponent({
+    className: 'testing-class'
+  });
+
+  var overlayPanel = _testWrapper.screen.getByTestId(testId);
+
+  expect(overlayPanel).toHaveClass('testing-class');
+});
 test('neither callback fires when not provided', function () {
   var onClose = jest.fn();
   getComponent({
@@ -137,4 +146,39 @@ test('triggerRef.current.focus() fires when provided', function () {
   });
 
   expect(focusFunction).toHaveBeenCalled();
+});
+test('triggerRef.current.focus() does not fire when key other than esc is pressed', function () {
+  var onClose = jest.fn();
+  var focusFunction = jest.fn();
+  var state = {
+    close: onClose
+  };
+  var triggerRef = {
+    current: {
+      focus: focusFunction
+    }
+  };
+  getComponent({
+    state: state,
+    children: (0, _react2.jsx)("div", null, "Test"),
+    triggerRef: triggerRef
+  });
+
+  var overlayPanel = _testWrapper.screen.getByTestId(testId);
+
+  _testWrapper.fireEvent.keyDown(overlayPanel, {
+    key: 'KeyA',
+    code: 'KeyA',
+    keyCode: 65,
+    charCode: 65
+  });
+
+  _testWrapper.fireEvent.keyUp(overlayPanel, {
+    key: 'KeyA',
+    code: 'KeyA',
+    keyCode: 65,
+    charCode: 65
+  });
+
+  expect(focusFunction).not.toHaveBeenCalled();
 });

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

@@ -10,7 +10,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.MaxLength = exports.WithoutStatusIndicator = exports.WithHelpHint = exports.Warning = exports.Success = exports.Error = exports.DynamicRequired = exports.Required = exports.ReadOnly = exports.Disabled = exports.Password = exports.Controlled = exports.LeftLabel = exports.FloatLabel = exports.SmallVariant = exports.Default = exports["default"] = void 0;
+exports.WithSlots = exports.MaxLength = exports.WithoutStatusIndicator = exports.WithHelpHint = exports.Warning = exports.Success = exports.Error = exports.DynamicRequired = exports.Required = exports.ReadOnly = exports.Disabled = exports.Password = exports.Controlled = exports.LeftLabel = exports.FloatLabel = exports.SmallVariant = exports.Default = exports["default"] = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
@@ -32,6 +32,10 @@ var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/s
 
 var _Box = _interopRequireDefault(require("../Box"));
 
+var _useCopyToClipboard = _interopRequireDefault(require("../../hooks/useCopyToClipboard"));
+
+var _CopyButton = _interopRequireDefault(require("../CopyText/CopyButton"));
+
 var _react2 = require("@emotion/react");
 
 var _default = {
@@ -259,4 +263,77 @@ var MaxLength = function MaxLength() {
   });
 };
 
-exports.MaxLength = MaxLength;
+exports.MaxLength = MaxLength;
+
+var WithSlots = function WithSlots() {
+  var _useState5 = (0, _react.useState)("[{ 'type': 'work', 'streetAddress': 'San Antonio MI 47096' },{ 'type': 'home', 'streetAddress': 'Santa Rosa MN 98804' }]"),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      addressesValue = _useState6[0],
+      setAddressesValue = _useState6[1];
+
+  var _useState7 = (0, _react.useState)("[{ 'status': 'inactive', 'subject': 'example@pingidentity.com' },{ 'status': 'active', 'subject': 'john@pingidentity.com' }]"),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      jsonValue = _useState8[0],
+      setJsonValue = _useState8[1];
+
+  var copyAddressesToClipboard = (0, _useCopyToClipboard["default"])(addressesValue);
+  var copyJsonToClipboard = (0, _useCopyToClipboard["default"])(jsonValue);
+  var buttonSx = {
+    position: 'absolute',
+    right: 0,
+    top: '5px'
+  };
+  var containerSx = {
+    sx: {
+      '& input': {
+        paddingRight: '40px'
+      }
+    }
+  };
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_["default"], {
+    label: "Multiple Addresses",
+    labelMode: "float",
+    onChange: function onChange(e) {
+      return setAddressesValue(e.target.value);
+    },
+    value: addressesValue,
+    containerProps: containerSx,
+    slots: {
+      inContainer: (0, _react2.jsx)(_CopyButton["default"], {
+        onPress: copyAddressesToClipboard,
+        sx: buttonSx,
+        iconProps: {
+          sx: {
+            path: {
+              fill: 'active'
+            }
+          }
+        }
+      })
+    },
+    mb: 30
+  }), (0, _react2.jsx)(_["default"], {
+    label: "Example JSON",
+    labelMode: "float",
+    onChange: function onChange(e) {
+      return setJsonValue(e.target.value);
+    },
+    value: jsonValue,
+    containerProps: containerSx,
+    slots: {
+      inContainer: (0, _react2.jsx)(_CopyButton["default"], {
+        onPress: copyJsonToClipboard,
+        sx: buttonSx,
+        iconProps: {
+          sx: {
+            path: {
+              fill: 'active'
+            }
+          }
+        }
+      })
+    }
+  }));
+};
+
+exports.WithSlots = WithSlots;

package/lib/cjs/hooks/useAriaLabelWarning/useAriaLabelWarning.js

@@ -17,8 +17,9 @@ var _react = require("react");
  * e.g. "\`Component\` requires an aria-label."
 */
 var useAriaLabelWarning = function useAriaLabelWarning(component, ariaLabel) {
+  var condition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   (0, _react.useEffect)(function () {
-    if (process.env.NODE_ENV === 'development' && !ariaLabel) {
+    if (process.env.NODE_ENV === 'development' && condition && !ariaLabel) {
       // eslint-disable-next-line no-console
       console.warn("".concat(component, " requires an aria-label"), '\n', '\n', 'NOTE: This is a development-only warning and will not display in production.');
     }

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

@@ -317,6 +317,11 @@ var helpHint = _objectSpread(_objectSpread({}, iconButton), {}, {
   ml: '5px',
   maxWidth: '13px',
   maxHeight: '14px',
+  borderRadius: '5.5px',
+  'svg': {
+    'height': '100%',
+    mb: 0.75
+  },
   'path': {
     fill: 'neutral.20'
   },
@@ -376,7 +381,7 @@ var chipDeleteButton = {
   borderRadius: '50%',
   cursor: 'pointer',
   height: 14,
-  ml: 'xs',
+  mx: '3px !important',
   p: 0,
   width: 14,
   '&.is-focused, &.is-hovered': {
@@ -556,6 +561,75 @@ var tooltipInline = _objectSpread(_objectSpread({}, text), {}, {
   }
 });
 
+var defaultVariant = _objectSpread(_objectSpread({}, base), {}, {
+  bg: 'white',
+  border: '1px solid',
+  borderColor: 'active',
+  '&.is-hovered': _objectSpread({}, defaultHover),
+  '&.is-pressed': _objectSpread({}, defaultActive),
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+
+var filter = _objectSpread(_objectSpread({}, defaultVariant), {}, {
+  px: 'sm',
+  borderColor: 'neutral.80',
+  height: 40,
+  color: 'active',
+  display: 'flex'
+});
+
+var colorBlock = {
+  bg: 'neutral.95',
+  border: '1px solid',
+  borderColor: 'neutral.90',
+  borderRadius: 10,
+  outline: 'none',
+  cursor: 'pointer',
+  width: 150,
+  minHeight: 40,
+  p: '5px 15px',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  '&.is-hovered': {
+    bg: 'neutral.80'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-pressed': {
+    bg: 'neutral.60',
+    borderColor: 'neutral.60'
+  },
+  '& span': {
+    color: 'text.primary',
+    textAlign: 'left'
+  },
+  '&>div': {
+    alignItems: 'baseline'
+  },
+  '&>svg': {
+    color: 'text.secondary',
+    fill: 'text.secondary'
+  },
+  '&.is-configured': {
+    bg: 'active',
+    borderColor: 'active',
+    '& span': {
+      color: 'white'
+    },
+    '&>svg': {
+      color: 'white',
+      fill: 'white'
+    }
+  },
+  '&.is-configured.is-hovered': {
+    bg: 'accent.40',
+    borderColor: 'accent.40'
+  },
+  '&.is-configured.is-pressed': {
+    bg: 'accent.20',
+    borderColor: 'accent.20'
+  }
+};
 var _default = {
   accordionHeader: accordionHeader,
   chipDeleteButton: chipDeleteButton,
@@ -576,6 +650,7 @@ var _default = {
   environmentBreadcrumb: environmentBreadcrumb,
   expandableRow: expandableRow,
   fileInputField: fileInputField,
+  filter: filter,
   iconButton: iconButton,
   imageUpload: imageUpload,
   inline: inline,
@@ -595,6 +670,7 @@ var _default = {
   invertedSquare: invertedSquare,
   tooltipChip: tooltipChip,
   tooltipIconButton: tooltipIconButton,
-  tooltipInline: tooltipInline
+  tooltipInline: tooltipInline,
+  colorBlock: colorBlock
 };
 exports["default"] = _default;

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

@@ -178,6 +178,20 @@ var text = {
     color: 'accent.30',
     fontFamily: 'standard'
   }),
+  buttonTitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontSize: 'xs',
+    fontWeight: 0,
+    color: 'text.primary',
+    fontFamily: 'standard',
+    lineHeight: '13px'
+  }),
+  buttonSubtitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontSize: 'sm',
+    fontWeight: 3,
+    color: 'text.primary',
+    fontFamily: 'standard',
+    lineHeight: '16px'
+  }),
   capsLabel: _objectSpread(_objectSpread({}, wordWrap), {}, {
     color: 'text.secondary',
     textTransform: 'uppercase',

package/lib/components/Button/Button.js

@@ -21,7 +21,7 @@ import { useButton } from '@react-aria/button';
 import { useHover } from '@react-aria/interactions';
 import { useFocusRing } from '@react-aria/focus';
 import { mergeProps } from '@react-aria/utils';
-import { useStatusClasses, usePropWarning } from '../../hooks';
+import { useStatusClasses, usePropWarning, useAriaLabelWarning } from '../../hooks';
 import Loader from '../Loader';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Button = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -37,7 +37,8 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
       onPressChange = props.onPressChange,
       onPressUp = props.onPressUp,
       children = props.children,
-      others = _objectWithoutProperties(props, ["className", "isDisabled", "isLoading", "onHoverStart", "onHoverChange", "onHoverEnd", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "children"]);
+      variant = props.variant,
+      others = _objectWithoutProperties(props, ["className", "isDisabled", "isLoading", "onHoverStart", "onHoverChange", "onHoverEnd", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "children", "variant"]);
 
   var buttonRef = useRef();
   usePropWarning(props, 'disabled', 'isDisabled');
@@ -70,6 +71,7 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
       classNames = _useStatusClasses.classNames;
 
   var ariaLabel = props['aria-label'];
+  useAriaLabelWarning('Button', ariaLabel, variant === 'filter');
   return ___EmotionJSX(ThemeUIButton, _extends({
     "aria-label": ariaLabel,
     ref: buttonRef,
@@ -80,7 +82,8 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center'
-    }
+    },
+    variant: variant
   }, others, mergeProps(hoverProps, focusProps, buttonProps)), isLoading ? ___EmotionJSX("span", {
     style: {
       visibility: 'hidden'

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

@@ -1,10 +1,11 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 import React from 'react';
 import AddCircleIcon from 'mdi-react/AddCircleIcon';
-import Box from '../Box';
-import Button from '.';
-import Icon from '../Icon';
-import Text from '../Text';
-import { buttonVariants } from '../../utils/devUtils/constants/variants'; // removing the iconButton variants from this story.
+import CreateIcon from 'mdi-react/CreateIcon';
+import FilterIcon from 'mdi-react/FilterIcon';
+import { buttonVariants } from '../../utils/devUtils/constants/variants';
+import { Box, Button, Icon, SearchField, Text } from '../../index'; // removing the iconButton variants from this story.
 
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var variants = buttonVariants;
@@ -36,6 +37,13 @@ export default {
         type: 'text'
       }
     }
+  },
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
   }
 };
 export var Default = function Default(args) {
@@ -74,4 +82,44 @@ export var InlineButton = function InlineButton() {
     mb: "sm",
     variant: "inline"
   }, "Inline");
+};
+export var ColorBlockButton = function ColorBlockButton(args) {
+  // Change `isConfigured` property in storybook controls
+  var isConfigured = args.isConfigured,
+      props = _objectWithoutProperties(args, ["isConfigured"]);
+
+  return ___EmotionJSX(Button, _extends({}, props, {
+    variant: "colorBlock",
+    className: isConfigured ? 'is-configured' : ''
+  }), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
+    variant: "buttonTitle"
+  }, "Title"), ___EmotionJSX(Text, {
+    variant: "buttonSubtitle"
+  }, "Info")), ___EmotionJSX(Icon, {
+    icon: CreateIcon
+  }));
+};
+ColorBlockButton.story = {
+  argTypes: {
+    isConfigured: {
+      control: {
+        type: 'boolean'
+      },
+      defaultValue: false
+    }
+  }
+};
+export var FilterButton = function FilterButton() {
+  return ___EmotionJSX(Box, {
+    p: "xx",
+    isRow: true,
+    gap: "md"
+  }, ___EmotionJSX(SearchField, {
+    "aria-label": "search items"
+  }), ___EmotionJSX(Button, {
+    variant: "filter",
+    "aria-label": "filter button"
+  }, ___EmotionJSX(Icon, {
+    icon: FilterIcon
+  })));
 };

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

@@ -89,4 +89,24 @@ test('button renders children when not loading', function () {
   expect(childWrapper).toBeInTheDocument();
   expect(childWrapper).toBeVisible();
   expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
+});
+test('color block button renders in default state', function () {
+  getComponent({
+    variant: 'colorBlock'
+  });
+  var button = screen.getByRole('button');
+  expect(button).toBeInTheDocument();
+  expect(button).not.toHaveClass('is-configured');
+  userEvent.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 = screen.getByRole('button');
+  expect(button).toBeInTheDocument();
+  expect(button).toHaveClass('is-configured');
 });

package/lib/components/CopyText/CopyButton.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { forwardRef } from 'react';
 import ContentCopy from 'mdi-react/ContentCopyIcon';
+import { omit } from 'lodash';
+import PropTypes from 'prop-types';
 import Icon from '../Icon';
 import IconButton from '../IconButton';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -9,9 +11,12 @@ var CopyButton = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: ref,
     "aria-label": "copy",
     variant: "buttons.copy"
-  }, props), ___EmotionJSX(Icon, {
+  }, omit(props, 'iconProps')), ___EmotionJSX(Icon, _extends({
     icon: ContentCopy,
     size: 15
-  }));
+  }, props === null || props === void 0 ? void 0 : props.iconProps)));
 });
+CopyButton.propTypes = {
+  iconProps: PropTypes.shape({})
+};
 export default CopyButton;

package/lib/components/HelpHint/HelpHint.js

@@ -1,12 +1,32 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 import React, { forwardRef } from 'react';
-import HelpIcon from 'mdi-react/HelpIcon';
 import PropTypes from 'prop-types';
 import IconButton from '../IconButton';
 import TooltipTrigger, { Tooltip } from '../TooltipTrigger';
 import Icon from '../Icon';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var HelpIcon = function HelpIcon() {
+  return ___EmotionJSX("svg", {
+    width: "7",
+    height: "9",
+    viewBox: "0 0 7 9",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, ___EmotionJSX("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__*/forwardRef(function (props, ref) {
   var children = props.children,
       tooltipProps = props.tooltipProps,
@@ -14,14 +34,14 @@ var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
       others = _objectWithoutProperties(props, ["children", "tooltipProps", "iconButtonProps"]);
 
   return ___EmotionJSX(TooltipTrigger, _extends({
-    ref: ref
-  }, others), ___EmotionJSX(IconButton, _extends({
+    ref: ref,
+    direction: "top"
+  }, others, tooltipProps), ___EmotionJSX(IconButton, _extends({
     variant: "helpHint",
     "aria-label": "label help hint",
     "data-testid": "help-hint__button"
   }, iconButtonProps), ___EmotionJSX(Icon, {
-    icon: HelpIcon,
-    size: "11px"
+    icon: HelpIcon
   })), ___EmotionJSX(Tooltip, tooltipProps, children));
 });
 HelpHint.propTypes = {

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import HelpHint from '.';
+import Box from '../Box';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'HelpHint',
+  component: HelpHint,
+  argTypes: {
+    children: {
+      description: 'Tooltip content',
+      defaultValue: 'Text of the tooltip right here...',
+      control: {
+        type: 'text'
+      }
+    }
+  }
+};
+export var Default = function Default(args) {
+  return ___EmotionJSX(Box, {
+    p: 50
+  }, ___EmotionJSX(HelpHint, args));
+};
+export var WithTooltipAndIconButtonProps = function WithTooltipAndIconButtonProps() {
+  return ___EmotionJSX(Box, {
+    p: 50
+  }, ___EmotionJSX(HelpHint, {
+    tooltipProps: {
+      direction: 'bottom'
+    },
+    iconButtonProps: {
+      'aria-label': 'Help hint'
+    }
+  }, "Text of the tooltip right here..."));
+};

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

@@ -0,0 +1,58 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
+import axeTest from '../../utils/testUtils/testAxe';
+import HelpHint from './HelpHint';
+import { jsx as ___EmotionJSX } from "@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 render(___EmotionJSX(HelpHint, _extends({}, defaultProps, props)));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+axeTest(getComponent);
+test('renders HelpHint component', function () {
+  getComponent();
+  var helpHintButton = screen.getByTestId(testId);
+  expect(helpHintButton).toBeInTheDocument();
+});
+test('shows tooltip on hover', function () {
+  getComponent();
+  var helpHintButton = screen.getByTestId(testId);
+  expect(screen.queryByText(tooltipValue)).not.toBeInTheDocument();
+  fireEvent.mouseMove(helpHintButton);
+  fireEvent.mouseEnter(helpHintButton);
+  expect(screen.getByText(tooltipValue)).toBeInTheDocument();
+});
+test('shows tooltip on focus', function () {
+  getComponent();
+  var helpHintButton = screen.getByTestId(testId);
+  expect(screen.queryByText(tooltipValue)).not.toBeInTheDocument();
+  userEvent.tab();
+  expect(helpHintButton).toHaveFocus();
+  expect(screen.queryByText(tooltipValue)).toBeInTheDocument();
+});
+test('applies tooltipProps', function () {
+  getComponent({
+    tooltipProps: {
+      isOpen: true
+    }
+  });
+  expect(screen.getByText(tooltipValue)).toBeInTheDocument();
+});
+test('applies iconButtonProps', function () {
+  var newLabel = 'New label';
+  getComponent({
+    iconButtonProps: {
+      'aria-label': newLabel
+    }
+  });
+  expect(screen.getByLabelText(newLabel)).toBeInTheDocument();
+});

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

@@ -13,7 +13,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 import { messagesReducer as messagesReducerCore, multiMessagesReducer as multiMessagesReducerCore } from './utils';
-var messagesReducer = messagesReducerCore;
+export var messagesReducer = messagesReducerCore;
 export var multiMessagesReducer = multiMessagesReducerCore;
 
 var makeShowMessage = function makeShowMessage(status, timeout) {

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

@@ -23,7 +23,7 @@ import { Item } from '@react-stately/collections';
 import AccountIcon from 'mdi-react/AccountIcon';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { Box, Button, Messages } from '../..';
-import messagesReducer, { multiMessagesReducer } from './Messages.reducer';
+import { messagesReducerStory as messagesReducer, multiMessagesReducerStory as multiMessagesReducer } from './index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Messages',