@pingux/astro 1.12.0 → 1.13.0-alpha.2

package/lib/cjs/recipes/OneWayToBidirectionalArrow.stories.js

@@ -0,0 +1,160 @@
+"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["default"] = exports.Default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _DragVerticalIcon = _interopRequireDefault(require("mdi-react/DragVerticalIcon"));
+
+var _DeleteIcon = _interopRequireDefault(require("mdi-react/DeleteIcon"));
+
+var _CogsIcon = _interopRequireDefault(require("mdi-react/CogsIcon"));
+
+var _Box = _interopRequireDefault(require("../components/Box"));
+
+var _index = require("../index");
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'Recipes/OneWayToBidirectionalArrow'
+};
+exports["default"] = _default;
+var items = [{
+  name: 'Last Name',
+  id: '1'
+}, {
+  name: 'First Name',
+  id: '2'
+}, {
+  name: 'Third Option',
+  id: '3'
+}];
+
+var Default = function Default() {
+  var CustomOnSvg = function CustomOnSvg() {
+    return (0, _react2.jsx)("svg", {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, (0, _react2.jsx)("path", {
+      d: "M8 10V13H14V18H8V21L2 15.5L8 10Z",
+      fill: "#CACED3"
+    }), (0, _react2.jsx)("path", {
+      d: "M9.83325 10.6251V6.37511H15.4999V2.94678L21.0533 8.50011L15.4999 14.0534V10.6251H9.83325Z",
+      fill: "#4462ED"
+    }), (0, _react2.jsx)("path", {
+      d: "M8 10V13H14V18H8V21L2 15.5L8 10ZM22 8.5L16 3V6H10V11H16V14L22 8.5Z",
+      fill: "#515F6B"
+    }));
+  };
+
+  var CustomOffSvg = function CustomOffSvg() {
+    return (0, _react2.jsx)("svg", {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, (0, _react2.jsx)("path", {
+      d: "M8 10V13H14V18H8V21L2 15.5L8 10Z",
+      fill: "#CACED3"
+    }), (0, _react2.jsx)("path", {
+      d: "M9.83331 10.6251V6.37511H15.5V2.94678L21.0533 8.50011L15.5 14.0534V10.6251H9.83331Z",
+      fill: "#4462ED"
+    }));
+  };
+
+  return (0, _react2.jsx)(_Box["default"], {
+    sx: {
+      alignItems: 'center'
+    },
+    isRow: true
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _DragVerticalIcon["default"],
+    size: 25,
+    color: "neutral.50"
+  }), (0, _react2.jsx)(_index.ComboBoxField, {
+    items: items,
+    defaultSelectedKey: "Last Name",
+    containerProps: {
+      width: '275px'
+    },
+    labelProps: {
+      mb: 0
+    },
+    "aria-label": "Row one value",
+    controlProps: {
+      'aria-label': 'test'
+    }
+  }, function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.name,
+      "data-id": item.name
+    }, item.name);
+  }), (0, _react2.jsx)(_Box["default"], {
+    sx: {
+      ml: '5px',
+      mr: '5px',
+      flexShrink: 0
+    }
+  }, (0, _react2.jsx)(_index.IconButtonToggle, {
+    toggledIcon: CustomOnSvg,
+    defaultIcon: CustomOffSvg,
+    title: "Bidirectional/ Outbound toggle",
+    iconProps: {
+      size: 20
+    },
+    buttonProps: {
+      variant: 'svgIconButton'
+    }
+  })), (0, _react2.jsx)(_index.ComboBoxField, {
+    items: items,
+    defaultSelectedKey: "First Name",
+    containerProps: {
+      width: '275px'
+    },
+    labelProps: {
+      mb: 0
+    },
+    controlProps: {
+      'aria-label': 'Row one Pingone value'
+    }
+  }, function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.name,
+      "data-id": item.name
+    }, item.name);
+  }), (0, _react2.jsx)(_Box["default"], {
+    isRow: true,
+    alignItems: "center",
+    sx: {
+      marginLeft: '12px',
+      marginRight: '12px'
+    }
+  }, (0, _react2.jsx)(_index.IconButton, null, (0, _react2.jsx)(_index.Icon, {
+    icon: _CogsIcon["default"],
+    color: "neutral.30",
+    size: 20,
+    title: "edit icon"
+  })), (0, _react2.jsx)(_index.IconButton, {
+    ml: "5px"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _DeleteIcon["default"],
+    color: "neutral.30",
+    size: 20,
+    title: "delete icon"
+  }))));
+};
+
+exports.Default = Default;

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

@@ -319,6 +319,7 @@ var fileInputFieldWrapper = {
   }
 };
 var floatLabelWrapper = {
+  width: 'calc(100% - 4px)',
   backgroundColor: 'white',
   position: 'relative',
   height: '17px',

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

@@ -136,6 +136,12 @@ var iconButton = {
   }
 };
 
+var svgIconButton = _objectSpread(_objectSpread({}, iconButton), {}, {
+  path: {
+    fill: 'default'
+  }
+});
+
 var square = _objectSpread(_objectSpread({}, iconButton), {}, {
   borderRadius: '2px'
 });
@@ -721,6 +727,7 @@ var _default = {
   colorBlock: colorBlock,
   menuTab: menuTab,
   collapsiblePanelToggle: collapsiblePanelToggle,
-  neutralText: neutralText
+  neutralText: neutralText,
+  svgIconButton: svgIconButton
 };
 exports["default"] = _default;

package/lib/components/Avatar/Avatar.js

@@ -10,13 +10,18 @@ import { Avatar as ThemeUIAvatar } from 'theme-ui';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Avatar = /*#__PURE__*/forwardRef(function (props, ref) {
   return ___EmotionJSX(ThemeUIAvatar, _extends({
-    ref: ref,
-    alt: "Avatar"
+    ref: ref
   }, props));
 });
 Avatar.propTypes = {
   /**  Source of avatar. */
-  src: PropTypes.string.isRequired
+  src: PropTypes.string.isRequired,
+
+  /** Alternative text for avatar. */
+  alt: PropTypes.string
+};
+Avatar.defaultProps = {
+  alt: 'Avatar'
 };
 Avatar.displayName = 'Avatar';
 export default Avatar;

package/lib/components/Avatar/Avatar.test.js

@@ -21,4 +21,12 @@ test('an avatar is rendered', function () {
   var img = screen.getByRole('img');
   expect(img).toBeInstanceOf(HTMLImageElement);
   expect(img).toBeInTheDocument();
+  expect(img).toHaveAttribute('alt', 'Avatar');
+});
+test('an avatar is rendered with custom alt', function () {
+  getComponent({
+    alt: 'Custom Alt'
+  });
+  var img = screen.getByRole('img');
+  expect(img).toHaveAttribute('alt', 'Custom Alt');
 });

package/lib/components/Button/Button.js

@@ -9,7 +9,7 @@ import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "isDisabled", "isLoading", "onHoverStart", "onHoverChange", "onHoverEnd", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "children", "variant"];
+var _excluded = ["className", "isDisabled", "isLoading", "onHoverStart", "onHoverChange", "onHoverEnd", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "children", "variant", "tabIndex"];
 
 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; }
 
@@ -39,6 +39,7 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
       onPressUp = props.onPressUp,
       children = props.children,
       variant = props.variant,
+      tabIndex = props.tabIndex,
       others = _objectWithoutProperties(props, _excluded);
 
   var buttonRef = useRef();
@@ -94,7 +95,9 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
       alignItems: 'center'
     },
     variant: variant
-  }, others, mergeProps(hoverProps, focusProps, buttonProps)), isLoading ? ___EmotionJSX("span", {
+  }, others, mergeProps(hoverProps, focusProps, _objectSpread(_objectSpread({}, buttonProps), {}, {
+    tabIndex: tabIndex
+  }))), isLoading ? ___EmotionJSX("span", {
     style: {
       visibility: 'hidden'
     }
@@ -166,7 +169,10 @@ Button.propTypes = {
   onPressUp: PropTypes.func,
 
   /** The styling variation of the button. */
-  variant: PropTypes.string
+  variant: PropTypes.string,
+
+  /** The focus variation of the button. */
+  tabIndex: PropTypes.number
 };
 Button.defaultProps = {
   isDisabled: false,

package/lib/components/CodeView/CodeView.test.js

@@ -60,7 +60,7 @@ test('renders component in the default state', function () {
 });
 test('copy button is hovered and renders tooltip via mouse', function () {
   getComponent();
-  var copyBtn = screen.getByLabelText('copy');
+  var copyBtn = screen.getByLabelText('copy to clipboard');
   expect(copyBtn).not.toHaveFocus();
   userEvent.hover(copyBtn);
   expect(copyBtn).toHaveClass('is-hovered');
@@ -69,7 +69,7 @@ test('copy button is hovered and renders tooltip via mouse', function () {
 });
 test('copy button is focused and renders tooltip via keyboard', function () {
   getComponent();
-  var copyBtn = screen.getByLabelText('copy');
+  var copyBtn = screen.getByLabelText('copy to clipboard');
   expect(copyBtn).not.toHaveFocus();
   userEvent.tab();
   expect(copyBtn).toHaveFocus();
@@ -105,7 +105,7 @@ test('click on copy button copies data to the clipboard', /*#__PURE__*/_asyncToG
       switch (_context2.prev = _context2.next) {
         case 0:
           getComponent();
-          button = screen.getByLabelText('copy');
+          button = screen.getByLabelText('copy to clipboard');
           _context2.next = 4;
           return act( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
             return _regeneratorRuntime.wrap(function _callee$(_context) {
@@ -140,7 +140,7 @@ test('after button click, the tooltip renders with the text "Copied!"', /*#__PUR
       switch (_context4.prev = _context4.next) {
         case 0:
           getComponent();
-          button = screen.getByLabelText('copy');
+          button = screen.getByLabelText('copy to clipboard');
           _context4.next = 4;
           return act( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
             return _regeneratorRuntime.wrap(function _callee3$(_context3) {

package/lib/components/ComboBox/ComboBoxInput.js

@@ -117,7 +117,8 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "comboBox"
   }, triggerProps, {
     ref: triggerRef,
-    isDisabled: isDisabled || isReadOnly
+    isDisabled: isDisabled || isReadOnly,
+    tabIndex: -1
   }), ___EmotionJSX(Icon, {
     icon: MenuDown,
     sx: isOpen ? {

package/lib/components/CopyText/CopyButton.js

@@ -9,7 +9,7 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var CopyButton = /*#__PURE__*/forwardRef(function (props, ref) {
   return ___EmotionJSX(IconButton, _extends({
     ref: ref,
-    "aria-label": "copy",
+    "aria-label": "copy to clipboard",
     variant: "buttons.copy"
   }, omit(props, 'iconProps')), ___EmotionJSX(Icon, _extends({
     icon: ContentCopy,

package/lib/components/CopyText/CopyText.js

@@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
 import { useFocusRing } from '@react-aria/focus';
 import { Pressable, useHover } from '@react-aria/interactions';
 import { mergeProps } from '@react-aria/utils';
+import { announce } from '@react-aria/live-announcer';
 import { Box, Button, Tooltip, TooltipTrigger } from '../../index';
 import CopyButton from './CopyButton';
 import useCopyToClipboard from '../../hooks/useCopyToClipboard';
@@ -68,6 +69,8 @@ var CopyText = /*#__PURE__*/forwardRef(function (props, ref) {
 
   useEffect(function () {
     if (isCopied) {
+      announce('Copied!', 'polite');
+
       var timer = _setTimeout(function () {
         setIsCopied(false);
       }, 1000);
@@ -83,7 +86,8 @@ var CopyText = /*#__PURE__*/forwardRef(function (props, ref) {
   var content = mode === 'link' || mode === 'nonClickableContent' ? children : ___EmotionJSX(Button, _extends({
     variant: "quiet",
     onPress: copyToClipboard,
-    "aria-label": "copy-content"
+    "aria-label": "copy-content",
+    tabIndex: -1
   }, focusProps), children);
   var tooltip = isCopied ? 'Copied!' : tooltipText;
   var isTooltipOpen = isFocusVisible || isHovered || isCopied;

package/lib/components/CopyText/CopyText.test.js

@@ -60,14 +60,9 @@ describe('Text mode', function () {
     expect(screen.queryByRole('tooltip')).toBeInTheDocument();
     expect(screen.queryByRole('tooltip')).toHaveTextContent('Copy to clipboard');
   });
-  test('content and copy buttons are focused with keyboard', function () {
+  test('copy button is focused with keyboard', function () {
     getComponent();
-    var contentBtn = screen.getByLabelText('copy-content');
-    expect(contentBtn).not.toHaveFocus();
-    userEvent.tab();
-    expect(contentBtn).toHaveFocus();
-    expect(contentBtn).toHaveClass('is-focused');
-    var copyBtn = screen.getByLabelText('copy');
+    var copyBtn = screen.getByLabelText('copy to clipboard');
     expect(copyBtn).not.toHaveFocus();
     userEvent.tab();
     expect(copyBtn).toHaveFocus();
@@ -128,7 +123,7 @@ describe('Text mode', function () {
         switch (_context4.prev = _context4.next) {
           case 0:
             getComponent();
-            button = screen.getByLabelText('copy');
+            button = screen.getByLabelText('copy to clipboard');
             _context4.next = 4;
             return act( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
               return _regeneratorRuntime.wrap(function _callee3$(_context3) {
@@ -166,7 +161,7 @@ describe('Text mode', function () {
             getComponent({
               textToCopy: textToCopy
             });
-            button = screen.getByLabelText('copy');
+            button = screen.getByLabelText('copy to clipboard');
             _context6.next = 5;
             return act( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
               return _regeneratorRuntime.wrap(function _callee5$(_context5) {
@@ -202,7 +197,7 @@ describe('Text mode', function () {
           case 0:
             global.navigator.clipboard = undefined;
             getComponent();
-            button = screen.getByLabelText('copy');
+            button = screen.getByLabelText('copy to clipboard');
             _context8.next = 5;
             return act( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
               return _regeneratorRuntime.wrap(function _callee7$(_context7) {
@@ -247,7 +242,7 @@ describe('Text mode', function () {
             getComponent();
             spy = jest.spyOn(console, 'error');
             expect(spy).not.toHaveBeenCalled();
-            button = screen.getByLabelText('copy');
+            button = screen.getByLabelText('copy to clipboard');
             _context10.next = 9;
             return act( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
               return _regeneratorRuntime.wrap(function _callee9$(_context9) {
@@ -283,7 +278,7 @@ describe('Text mode', function () {
         switch (_context12.prev = _context12.next) {
           case 0:
             getComponent();
-            button = screen.getByLabelText('copy');
+            button = screen.getByLabelText('copy to clipboard');
             _context12.next = 4;
             return act( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
               return _regeneratorRuntime.wrap(function _callee11$(_context11) {
@@ -318,7 +313,7 @@ describe('Text mode', function () {
         switch (_context14.prev = _context14.next) {
           case 0:
             getComponent();
-            button = screen.getByLabelText('copy');
+            button = screen.getByLabelText('copy to clipboard');
             _context14.next = 4;
             return act( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee13() {
               return _regeneratorRuntime.wrap(function _callee13$(_context13) {
@@ -374,14 +369,14 @@ describe('Link mode', function () {
     fireEvent.mouseMove(container);
     fireEvent.mouseEnter(container);
     expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
-    var button = screen.getByLabelText('copy');
+    var button = screen.getByLabelText('copy to clipboard');
     fireEvent.mouseMove(button);
     fireEvent.mouseEnter(button);
     expect(screen.queryByRole('tooltip')).toBeInTheDocument();
   });
   test('copy button is focused with keyboard', function () {
     getComponent();
-    var copyBtn = screen.getByLabelText('copy');
+    var copyBtn = screen.getByLabelText('copy to clipboard');
     expect(copyBtn).not.toHaveFocus();
     userEvent.tab();
     userEvent.tab();
@@ -405,7 +400,7 @@ describe('Link mode', function () {
         switch (_context16.prev = _context16.next) {
           case 0:
             getComponent();
-            button = screen.getByLabelText('copy');
+            button = screen.getByLabelText('copy to clipboard');
             _context16.next = 4;
             return act( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee15() {
               return _regeneratorRuntime.wrap(function _callee15$(_context15) {

package/lib/components/IconButtonToggle/IconButtonToggle.js

@@ -0,0 +1,59 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import PropTypes from 'prop-types';
+import IconButton from '../IconButton';
+import Icon from '../Icon';
+import { useComponentToggle } from '../../hooks';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var IconButtonToggle = function IconButtonToggle(props) {
+  var toggledIcon = props.toggledIcon,
+      defaultIcon = props.defaultIcon,
+      buttonProps = props.buttonProps,
+      iconProps = props.iconProps,
+      isToggled = props.isToggled,
+      onToggle = props.onToggle,
+      title = props.title;
+  var conditionalRenderProps = {
+    ComponentToRenderIfTrue: toggledIcon,
+    ComponentToRenderIfFalse: defaultIcon,
+    condition: isToggled,
+    onConditionChange: onToggle
+  };
+
+  var _useComponentToggle = useComponentToggle(conditionalRenderProps),
+      handleConditionChange = _useComponentToggle.handleConditionChange,
+      RenderedComponent = _useComponentToggle.RenderedComponent;
+
+  return ___EmotionJSX(IconButton, _extends({
+    onPress: handleConditionChange
+  }, buttonProps, {
+    title: title
+  }), ___EmotionJSX(Icon, _extends({
+    icon: RenderedComponent
+  }, iconProps)));
+};
+
+IconButtonToggle.propTypes = {
+  /** Props object that is spread into the icon element. */
+  iconProps: PropTypes.shape({}),
+
+  /** Props object that is spread into the button element. */
+  buttonProps: PropTypes.shape({}),
+
+  /** The icon that will render by default. */
+  defaultIcon: PropTypes.elementType.isRequired,
+
+  /** The icon that will render after toggling the icon. */
+  toggledIcon: PropTypes.elementType.isRequired,
+
+  /** Whether or not the icon is toggled. (use only when controlled) */
+  isToggled: PropTypes.bool,
+
+  /** Function that is passed into the IconButton within this component. */
+  onToggle: PropTypes.func,
+
+  /** Content will be displayed in a tooltip on hover or focus. */
+  title: PropTypes.string
+};
+export default IconButtonToggle;

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

@@ -0,0 +1,40 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React, { useState } from 'react';
+import EyeIcon from 'mdi-react/EyeOutlineIcon';
+import EyeOffIcon from 'mdi-react/EyeOffOutlineIcon';
+import IconButtonToggle from '.';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'IconButtonToggle',
+  component: IconButtonToggle
+};
+export var Default = function Default(args) {
+  return ___EmotionJSX(IconButtonToggle, _extends({}, args, {
+    toggledIcon: EyeIcon,
+    defaultIcon: EyeOffIcon,
+    buttonProps: {
+      'aria-label': 'eye icon'
+    }
+  }));
+};
+export var Controlled = function Controlled(args) {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isToggled = _useState2[0],
+      onToggledChange = _useState2[1];
+
+  var handleToggleChange = function handleToggleChange() {
+    onToggledChange(!isToggled);
+  };
+
+  return ___EmotionJSX(IconButtonToggle, _extends({}, args, {
+    toggledIcon: EyeIcon,
+    defaultIcon: EyeOffIcon,
+    onToggle: handleToggleChange,
+    isToggled: isToggled,
+    buttonProps: {
+      'aria-label': 'eye icon'
+    }
+  }));
+};

package/lib/components/IconButtonToggle/IconButtonToggle.test.js

@@ -0,0 +1,46 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import EyeIcon from 'mdi-react/EyeOutlineIcon';
+import EyeOffIcon from 'mdi-react/EyeOffOutlineIcon';
+import axeTest from '../../utils/testUtils/testAxe';
+import { render, screen } from '../../utils/testUtils/testWrapper';
+import IconButtonToggle from '.';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var iconTestId = 'test-icon';
+
+var OnIcon = function OnIcon(props) {
+  return ___EmotionJSX(EyeIcon, _extends({
+    "data-testid": iconTestId
+  }, props));
+};
+
+var OffIcon = function OffIcon(props) {
+  return ___EmotionJSX(EyeOffIcon, _extends({
+    "data-testid": iconTestId
+  }, props));
+};
+
+var testId = 'test-button';
+var defaultProps = {
+  buttonProps: {
+    'data-testid': testId,
+    'aria-label': 'Eye'
+  },
+  defaultIcon: OffIcon,
+  toggledIcon: OnIcon
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(IconButtonToggle, _extends({}, defaultProps, props)));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+axeTest(getComponent);
+test('default icon button', function () {
+  getComponent();
+  var button = screen.getByRole('button');
+  expect(button).toHaveAttribute('data-testid', testId);
+  expect(button).toBeInstanceOf(HTMLButtonElement);
+  expect(button).toBeInTheDocument();
+});

package/lib/components/IconButtonToggle/index.js

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

package/lib/components/Menu/Menu.js

@@ -27,6 +27,7 @@ import { MenuContext } from '../../context/MenuContext';
 import { usePropWarning } from '../../hooks';
 import MenuItem from '../MenuItem';
 import Box from '../Box';
+import ORIENTATION from '../../utils/devUtils/constants/orientation';
 /**
  * Menu component intended to be used as a wrapper for MenuItem.
  * This component is typically used alongside others such as PopoverMenu.
@@ -71,7 +72,8 @@ var Menu = /*#__PURE__*/forwardRef(function (props, ref) {
   return ___EmotionJSX(Box, _extends({
     as: "ul",
     ref: menuRef,
-    variant: "menu"
+    variant: "menu",
+    "aria-orientation": ORIENTATION.VERTICAL
   }, others, mergeProps(focusProps, menuProps)), _mapInstanceProperty(_context = _Array$from(state.collection)).call(_context, function (item) {
     return ___EmotionJSX(MenuItem, {
       key: item.key,

package/lib/components/Menu/Menu.test.js

@@ -7,6 +7,7 @@ import userEvent from '@testing-library/user-event';
 import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen, fireEvent } from '../../utils/testUtils/testWrapper';
 import { Menu, Item } from '../../index';
+import ORIENTATION from '../../utils/devUtils/constants/orientation';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testTitle = 'Test Title';
 var defaultProps = {
@@ -41,6 +42,7 @@ test('should render basic menu with children', function () {
   expect(menu).toBeInTheDocument();
   var menuItems = screen.queryAllByRole('menuitem');
   expect(menuItems).toHaveLength(3);
+  expect(menu).toHaveAttribute('aria-orientation', ORIENTATION.VERTICAL);
 });
 test('should render items when selectionMode is set to single', function () {
   getComponent({

package/lib/hooks/index.js

@@ -6,6 +6,8 @@ export { default as useLabelHeight } from './useLabelHeight';
 export { default as useModalState } from './useModalState';
 export { default as useOverlayPanelState } from './useOverlayPanelState';
 export { default as usePropWarning } from './usePropWarning';
+export { default as useProgressiveState } from './useProgressiveState';
+export { default as useComponentToggle } from './useComponentToggle';
 export { default as useNavBarPress } from './useNavBarPress';
 export { default as useRockerButton } from './useRockerButton';
 export { default as useSelectField } from './useSelectField';

package/lib/hooks/useComponentToggle/index.js

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