@pingux/astro 2.33.0-alpha.8 → 2.33.0

package/lib/components/Badge/Badge.test.js

@@ -3,7 +3,7 @@ import React from 'react';
 import Earth from '@pingux/mdi-react/EarthIcon';
 import { render, screen } from '@testing-library/react';
 import { Badge, Button, Icon } from '../..';
-import axeTest from '../../utils/testUtils/testAxe';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-separator';
 var defaultProps = {
@@ -15,8 +15,12 @@ var getComponent = function getComponent() {
   return render(___EmotionJSX(Badge, _extends({}, defaultProps, props)));
 };
 
-// Need to be added to each test file to test accessibility using axe.
-axeTest(getComponent);
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(Badge, props);
+  }
+});
 test('renders Badge component', function () {
   getComponent();
   var badge = screen.getByTestId(testId);

package/lib/components/Box/Box.test.js

@@ -3,7 +3,7 @@ import React from 'react';
 import createCache from '@emotion/cache';
 import { CacheProvider } from '@emotion/react';
 import { render, screen } from '@testing-library/react';
-import axeTest from '../../utils/testUtils/testAxe';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import Box from '.';
 
 // Emotion Cache added as test fails otherwise, root cause of this failure is unknown.
@@ -24,9 +24,12 @@ var getComponent = function getComponent() {
     value: emotionCache
   }, ___EmotionJSX(Box, _extends({}, defaultProps, props))));
 };
-
-// Need to be added to each test file to test accessibility using axe.
-axeTest(getComponent);
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(Box, props);
+  }
+});
 test('default box', function () {
   getComponent();
   var box = screen.getByTestId(testId);

package/lib/components/Bracket/Bracket.js

@@ -28,7 +28,9 @@ var Bracket = /*#__PURE__*/forwardRef(function (props, ref) {
   }, []);
   return ___EmotionJSX(Box, _extends({
     variant: "bracket.base"
-  }, others), !isLast && ___EmotionJSX(Box, {
+  }, others, {
+    ref: bracketRef
+  }), !isLast && ___EmotionJSX(Box, {
     width: 15,
     sx: {
       position: 'absolute',

package/lib/components/Bracket/Bracket.test.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import axeTest from '../../utils/testUtils/testAxe';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import Bracket from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-bracket';
@@ -13,8 +13,12 @@ var getComponent = function getComponent() {
   return render(___EmotionJSX(Bracket, _extends({}, defaultProps, props)));
 };
 
-// // Need to be added to each test file to test accessibility using axe.
-axeTest(getComponent);
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(Bracket, props);
+  }
+});
 test('default bracket', function () {
   getComponent();
   var bracket = screen.getByTestId(testId);

package/lib/components/Breadcrumbs/Breadcrumbs.test.js

@@ -6,8 +6,8 @@ import { Item } from 'react-stately';
 import ChevronRightIcon from '@pingux/mdi-react/ChevronRightIcon';
 import CreateIcon from '@pingux/mdi-react/CreateIcon';
 import userEvent from '@testing-library/user-event';
-import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import Breadcrumbs from './Breadcrumbs';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-breadcrumbs';
@@ -31,8 +31,12 @@ var getComponent = function getComponent() {
   })));
 };
 
-// Need to be added to each test file to test accessibility using axe.
-axeTest(getComponent);
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(Breadcrumbs, mergeProps(defaultProps, props), ___EmotionJSX(Item, null, testItemsArr[0]));
+  }
+});
 test('default breadcrumbs', function () {
   getComponent();
   expect(screen.getByTestId(testId)).toBeInTheDocument();

package/lib/components/ButtonBar/ButtonBar.js

@@ -1,19 +1,20 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["align", "children"];
-import React from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { Box } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var ButtonBar = function ButtonBar(props) {
+var ButtonBar = /*#__PURE__*/forwardRef(function (props, ref) {
   var align = props.align,
     children = props.children,
     others = _objectWithoutProperties(props, _excluded);
   return ___EmotionJSX(Box, _extends({
+    ref: ref,
     isRow: true,
     variant: align === 'right' ? 'buttonBar.justifyRightContainer' : 'buttonBar.container'
   }, others), children);
-};
+});
 ButtonBar.propTypes = {
   /** Justifies the component's children. */
   align: PropTypes.oneOf(['left', 'right'])

package/lib/components/ButtonBar/ButtonBar.stories.js

@@ -50,12 +50,38 @@ export var RightAligned = function RightAligned() {
   return ___EmotionJSX(ButtonBar, {
     align: "right"
   }, ___EmotionJSX(Button, {
+    variant: "link",
+    "data-id": "cancel-button",
+    onPress: function onPress() {
+      return alert('Cancel button pressed');
+    }
+  }, "Cancel"), ___EmotionJSX(Button, {
     variant: "primary",
     "data-id": "next-button",
     onPress: function onPress() {
       return alert('Next button pressed');
     }
-  }, "Next"), ___EmotionJSX(Button, {
+  }, "Next"));
+};
+RightAligned.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.buttonBar.rightAligned
+  }
+};
+export var Secondary = function Secondary() {
+  return ___EmotionJSX(ButtonBar, null, ___EmotionJSX(Button, {
+    variant: "primary",
+    "data-id": "save-button",
+    onPress: function onPress() {
+      return alert('Save button pressed');
+    }
+  }, "Save"), ___EmotionJSX(Button, {
+    "data-id": "close-button",
+    onPress: function onPress() {
+      return alert('Close button pressed');
+    }
+  }, "Close"), ___EmotionJSX(Button, {
     variant: "link",
     "data-id": "cancel-button",
     onPress: function onPress() {
@@ -63,9 +89,37 @@ export var RightAligned = function RightAligned() {
     }
   }, "Cancel"));
 };
-RightAligned.parameters = {
+Secondary.parameters = {
   design: {
     type: 'figma',
-    url: FIGMA_LINKS.buttonBar.rightAligned
+    url: FIGMA_LINKS.buttonBar.secondary
+  }
+};
+export var SecondaryRightAligned = function SecondaryRightAligned() {
+  return ___EmotionJSX(ButtonBar, {
+    align: "right"
+  }, ___EmotionJSX(Button, {
+    variant: "link",
+    "data-id": "cancel-button",
+    onPress: function onPress() {
+      return alert('Cancel button pressed');
+    }
+  }, "Cancel"), ___EmotionJSX(Button, {
+    "data-id": "close-button",
+    onPress: function onPress() {
+      return alert('Close button pressed');
+    }
+  }, "Close"), ___EmotionJSX(Button, {
+    variant: "primary",
+    "data-id": "next-button",
+    onPress: function onPress() {
+      return alert('Next button pressed');
+    }
+  }, "Next"));
+};
+SecondaryRightAligned.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.buttonBar.secondaryRightAligned
   }
 };

package/lib/components/ButtonBar/ButtonBar.test.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { Button, ButtonBar } from '../../index';
-import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-ButtonBar';
 var defaultProps = {
@@ -26,13 +26,23 @@ var getComponent = function getComponent() {
 };
 var getComponentCustomChildren = function getComponentCustomChildren() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(ButtonBar, _extends({}, defaultProps, props), ___EmotionJSX("button", null, "custom text"), ___EmotionJSX("button", null, "Also custom text")));
+  return render(___EmotionJSX(ButtonBar, _extends({}, defaultProps, props), ___EmotionJSX("button", {
+    type: "button"
+  }, "custom text"), ___EmotionJSX("button", {
+    type: "button"
+  }, "Also custom text")));
 };
 var getComponentTextChildren = function getComponentTextChildren() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(ButtonBar, props, "custom text"));
 };
-axeTest(getComponent);
+
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(ButtonBar, props);
+  }
+});
 afterEach(function () {
   jest.resetAllMocks();
 });

package/lib/components/Callout/Callout.js

@@ -13,7 +13,7 @@ var _excluded = ["children", "status"];
 var _calloutProps;
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { Box } from '../..';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusProp';
@@ -45,11 +45,12 @@ var defaultIconProps = {
  or give warnings of unexpected events.
  */
 
-var Callout = function Callout(_ref) {
+var Callout = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     status = _ref.status,
     others = _objectWithoutProperties(_ref, _excluded);
   return ___EmotionJSX(Box, _extends({
+    ref: ref,
     "data-testid": CALLOUT_TEST_ID,
     isRow: true,
     role: "note",
@@ -59,7 +60,7 @@ var Callout = function Callout(_ref) {
     status: status,
     "aria-label": "".concat(status, "-icon")
   }, defaultIconProps)), children);
-};
+});
 Callout.propTypes = _objectSpread({}, statusPropTypes);
 Callout.defaultProps = _objectSpread({}, statusDefaultProp);
 Callout.displayName = 'Callout';

package/lib/components/Callout/Callout.test.js

@@ -4,11 +4,19 @@ import React from 'react';
 import { screen } from '@testing-library/react';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { render } from '../../utils/testUtils/testWrapper';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import { noticeIcons } from '../Icon/NoticeIcon';
 import Callout, { CALLOUT_TEST_ID } from './Callout';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var TEST_TEXT = 'test text';
 var testColors = (_testColors = {}, _defineProperty(_testColors, statuses.DEFAULT, 'var(--theme-ui-colors-text-secondary)'), _defineProperty(_testColors, statuses.ERROR, 'var(--theme-ui-colors-critical-bright)'), _defineProperty(_testColors, statuses.SUCCESS, 'var(--theme-ui-colors-success-bright)'), _defineProperty(_testColors, statuses.WARNING, 'var(--theme-ui-colors-warning-bright)'), _testColors);
+
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(Callout, props);
+  }
+});
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(Callout, props, TEST_TEXT));

package/lib/components/Card/Card.test.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import axeTest from '../../utils/testUtils/testAxe';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import Button from '../Button';
 import Card from './Card';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -15,9 +15,12 @@ var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(Card, _extends({}, defaultProps, props)));
 };
-
-// Need to be added to each test file to test accessibility using axe.
-axeTest(getComponent);
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(Card, props);
+  }
+});
 test('renders Card component', function () {
   getComponent();
   var separator = screen.getByTestId(testId);

package/lib/components/Checkbox/Checkbox.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import axeTest from '../../utils/testUtils/testAxe';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import Checkbox from './Checkbox';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var getComponent = function getComponent() {
@@ -8,9 +8,12 @@ var getComponent = function getComponent() {
   return render(___EmotionJSX(Checkbox, props));
 };
 
-// Need to be added to each test file to test accessibility using axe.
-axeTest(getComponent, {
-  // Checkbox with label provided by CheckboxField
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(Checkbox, props);
+  },
+  // Checkbox label is provided by CheckboxField
   rules: {
     'label': {
       enabled: false

package/lib/components/CheckboxField/CheckboxField.js

@@ -36,8 +36,6 @@ var CheckboxField = /*#__PURE__*/forwardRef(function (props, ref) {
     autoFocus: hasAutoFocus || controlProps.hasAutoFocus,
     defaultSelected: isDefaultSelected || controlProps.isDefaultSelected
   }, props), controlProps);
-  var _usePress = usePress(props),
-    containerPressProps = _usePress.pressProps;
   var state = useToggleState(checkboxProps);
   var checkboxRef = useRef();
   usePropWarning(props, 'disabled', 'isDisabled');
@@ -45,6 +43,10 @@ var CheckboxField = /*#__PURE__*/forwardRef(function (props, ref) {
   useImperativeHandle(ref, function () {
     return checkboxRef.current;
   });
+  var _usePress = usePress(_objectSpread(_objectSpread({}, props), {}, {
+      ref: checkboxRef
+    })),
+    containerPressProps = _usePress.pressProps;
   useEffect(function () {
     if (checkboxRef.current && isIndeterminate) {
       checkboxRef.current.indeterminate = true;

package/lib/components/CheckboxField/CheckboxField.test.js

@@ -2,8 +2,8 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import statuses from '../../utils/devUtils/constants/statuses';
-import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import CheckboxField from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testLabel = 'Test Label';
@@ -18,8 +18,12 @@ var getComponent = function getComponent() {
   return renderFn(___EmotionJSX(CheckboxField, _extends({}, defaultProps, props)));
 };
 
-// Need to be added to each test file to test accessibility using axe.
-axeTest(getComponent);
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(CheckboxField, _extends({}, defaultProps, props));
+  }
+});
 test('default checkbox', function () {
   getComponent();
   var input = screen.getByRole('checkbox');

package/lib/components/CodeView/CodeView.js

@@ -94,6 +94,7 @@ var CodeView = /*#__PURE__*/forwardRef(function (props, ref) {
     }, mergeProps(focusProps, hoverProps, others)), content);
   }
   return ___EmotionJSX(CopyText, {
+    ref: ref,
     mode: "link",
     textToCopy: children,
     tooltipProps: {

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

@@ -24,8 +24,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { CodeView } from '../..';
-import axeTest from '../../utils/testUtils/testAxe';
 import { act, fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-code-sample';
 var originalClipboard = _objectSpread({}, global.navigator.clipboard);
@@ -52,8 +52,12 @@ afterEach(function () {
   global.document.execCommand = originalExecCommand;
 });
 
-// Need to be added to each test file to test accessibility using axe.
-axeTest(getComponent);
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(CodeView, props, textValue);
+  }
+});
 test('renders component in the default state', function () {
   getComponent();
   var container = screen.getByTestId(testId);

package/lib/components/CollapsiblePanel/CollapsiblePanel.test.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
-import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import CollapsiblePanel from './CollapsiblePanel';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'collapsible-panel-item';
@@ -43,15 +43,10 @@ afterAll(function () {
   jest.restoreAllMocks();
 });
 
-// Need to be added to each test file to test accessibility using axe.
-axeTest(getComponent, {
-  rules: {
-    'aria-required-children': {
-      enabled: false
-    },
-    'aria-required-parent': {
-      enabled: false
-    }
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(CollapsiblePanel, _extends({}, defaultProps, props));
   }
 });
 test('default CollapsiblePanel', function () {

package/lib/components/CollapsiblePanelContainer/CollapsiblePanelBadge.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["selectedFilterCount"];
-import React from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import Badge from '../Badge';
 
@@ -9,10 +9,11 @@ import Badge from '../Badge';
  * The CollapsiblePanelBadge serves as a badge to display selected count.
  */
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var CollapsiblePanelBadge = function CollapsiblePanelBadge(props) {
+var CollapsiblePanelBadge = /*#__PURE__*/forwardRef(function (props, ref) {
   var selectedFilterCount = props.selectedFilterCount,
     others = _objectWithoutProperties(props, _excluded);
   return ___EmotionJSX(Badge, _extends({
+    ref: ref,
     as: "span",
     bg: "neutral.90",
     label: selectedFilterCount.toString(),
@@ -20,7 +21,7 @@ var CollapsiblePanelBadge = function CollapsiblePanelBadge(props) {
     variant: "variants.collapsiblePanel.badge",
     isUppercase: true
   }, others));
-};
+});
 CollapsiblePanelBadge.propTypes = {
   selectedFilterCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   margin: PropTypes.string

package/lib/components/CollapsiblePanelContainer/CollapsiblePanelBadge.test.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
-import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import CollapsiblePanelBadge from './CollapsiblePanelBadge';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-collapsiblePanelBadge';
@@ -17,8 +17,12 @@ afterEach(function () {
   jest.restoreAllMocks();
 });
 
-// Need to be added to each test file to test accessibility using axe.
-axeTest(getComponent);
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(CollapsiblePanelBadge, _extends({}, defaultProps, props));
+  }
+});
 test('default CollapsiblePanelBadge', function () {
   getComponent();
   var collapsiblePanelBadge = screen.getByTestId(testId);

package/lib/components/CollapsiblePanelContainer/CollapsiblePanelContainer.test.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import userEvent from '@testing-library/user-event';
-import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import CollapsiblePanelContainer from './CollapsiblePanelContainer';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-collapsiblePanelContainer';
@@ -22,8 +22,12 @@ afterEach(function () {
   jest.restoreAllMocks();
 });
 
-// Need to be added to each test file to test accessibility using axe.
-axeTest(getComponent);
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(CollapsiblePanelContainer, props);
+  }
+});
 test('default CollapsiblePanelContainer', function () {
   getComponent();
   var collapsiblePanelContainer = screen.getByTestId(testId);

package/lib/components/CollapsiblePanelItem/CollapsiblePanelItem.test.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import FilterIcon from '@pingux/mdi-react/FilterIcon';
-import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import CollapsiblePanelItem from './CollapsiblePanelItem';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'collapsible-panel-item';
@@ -18,8 +18,12 @@ afterEach(function () {
   jest.restoreAllMocks();
 });
 
-// Need to be added to each test file to test accessibility using axe.
-axeTest(getComponent);
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(CollapsiblePanelItem, props);
+  }
+});
 test('default collapsiblePanel', function () {
   getComponent();
   var collapsiblePanelItem = screen.getByTestId(testId);

package/lib/components/ColorField/ColorField.test.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import userEvent from '@testing-library/user-event';
-import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import ColorField from './ColorField';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-colorField';
@@ -20,8 +20,12 @@ var getComponent = function getComponent() {
   return render(___EmotionJSX(ColorField, _extends({}, defaultProps, props)));
 };
 
-// Need to be added to each test file to test accessibility using axe.
-axeTest(getComponent);
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(ColorField, _extends({}, defaultProps, props));
+  }
+});
 test('renders ColorField component', function () {
   getComponent();
   var container = screen.getByLabelText(testLabel);