@pingux/astro 2.33.0-alpha.9 → 2.33.0

package/lib/components/Table/Table.test.js

@@ -3,7 +3,7 @@ import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values"
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Text } from '../../index';
-import axeTest from '../../utils/testUtils/testAxe';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import TableBody from '../TableBody';
 import TableCaption from '../TableCaption';
 import TableCell from '../TableCell';
@@ -57,8 +57,31 @@ 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(Table, props, ___EmotionJSX(TableCaption, null, ___EmotionJSX(Text, {
+      fontWeight: 3,
+      fontSize: "lg"
+    }, caption)), ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {
+      key: "head"
+    }, _mapInstanceProperty(headers).call(headers, function (head) {
+      return ___EmotionJSX(TableCell, {
+        isHeading: true,
+        key: head
+      }, head);
+    }))), ___EmotionJSX(TableBody, null, _mapInstanceProperty(objects).call(objects, function (object) {
+      var _context2;
+      return ___EmotionJSX(TableRow, {
+        key: object.country
+      }, _mapInstanceProperty(_context2 = _Object$values(object)).call(_context2, function (value) {
+        return ___EmotionJSX(TableCell, {
+          key: value
+        }, value);
+      }));
+    })));
+  }
+});
 test('default table', function () {
   getComponent();
   var table = screen.getByTestId(testId);

package/lib/components/TableBody/TableBody.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 = ["children"];
-import React from 'react';
+import React, { forwardRef } from 'react';
 import Box from '../Box';
 
 /**
@@ -13,12 +13,13 @@ import Box from '../Box';
  *
  */
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var TableBody = function TableBody(props) {
+var TableBody = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
     others = _objectWithoutProperties(props, _excluded);
   return ___EmotionJSX(Box, _extends({
+    ref: ref,
     variant: "table.body",
     as: "tbody"
   }, others), children);
-};
+});
 export default TableBody;

package/lib/components/TableBody/TableBody.test.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Table, TableBody } from '../../index';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+
+// Needs to be added to each components test file
+import { jsx as ___EmotionJSX } from "@emotion/react";
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(Table, null, ___EmotionJSX(TableBody, props));
+  }
+});

package/lib/components/TableCaption/TableCaption.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 = ["children"];
-import React from 'react';
+import React, { forwardRef } from 'react';
 import Box from '../Box';
 
 /**
@@ -13,12 +13,13 @@ import Box from '../Box';
  *
  */
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var TableCaption = function TableCaption(props) {
+var TableCaption = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
     others = _objectWithoutProperties(props, _excluded);
   return ___EmotionJSX(Box, _extends({
+    ref: ref,
     variant: "table.caption",
     as: "caption"
   }, others), children);
-};
+});
 export default TableCaption;

package/lib/components/TableCaption/TableCaption.test.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Table, TableCaption } from '../../index';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+
+// Needs to be added to each components test file
+import { jsx as ___EmotionJSX } from "@emotion/react";
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(Table, null, ___EmotionJSX(TableCaption, props));
+  }
+});

package/lib/components/TableCell/TableCell.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 = ["children", "isHeading"];
-import React from 'react';
+import React, { forwardRef } from 'react';
 import Box from '../Box';
 
 /**
@@ -13,13 +13,14 @@ import Box from '../Box';
  *
  */
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var TableCell = function TableCell(props) {
+var TableCell = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
     isHeading = props.isHeading,
     others = _objectWithoutProperties(props, _excluded);
   return ___EmotionJSX(Box, _extends({
+    ref: ref,
     variant: isHeading ? 'table.head' : 'table.data',
     as: isHeading ? 'th' : 'td'
   }, others), children);
-};
+});
 export default TableCell;

package/lib/components/TableCell/TableCell.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 Table from '../Table';
 import TableBody from '../TableBody';
 import TableRow from '../TableRow';
@@ -16,8 +16,12 @@ var getComponent = function getComponent() {
   return render(___EmotionJSX(Table, null, ___EmotionJSX(TableBody, null, ___EmotionJSX(TableRow, null, ___EmotionJSX(TableCell, _extends({}, props, defaultProps), "Here is text.")))));
 };
 
-// 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(Table, null, ___EmotionJSX(TableBody, null, ___EmotionJSX(TableRow, null, ___EmotionJSX(TableCell, props, "Here is text."))));
+  }
+});
 test('isHeading = true', function () {
   var props = {
     isHeading: true

package/lib/components/TableHead/TableHead.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 = ["children"];
-import React from 'react';
+import React, { forwardRef } from 'react';
 import Box from '../Box';
 
 /**
@@ -13,11 +13,12 @@ import Box from '../Box';
  *
  */
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var TableHead = function TableHead(props) {
+var TableHead = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
     others = _objectWithoutProperties(props, _excluded);
   return ___EmotionJSX(Box, _extends({
+    ref: ref,
     as: "thead"
   }, others), children);
-};
+});
 export default TableHead;

package/lib/components/TableHead/TableHead.test.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Table, TableHead } from '../../index';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+
+// Needs to be added to each components test file
+import { jsx as ___EmotionJSX } from "@emotion/react";
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(Table, null, ___EmotionJSX(TableHead, props));
+  }
+});

package/lib/components/TableRow/TableRow.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 = ["children"];
-import React from 'react';
+import React, { forwardRef } from 'react';
 import Box from '../Box';
 
 /**
@@ -13,12 +13,13 @@ import Box from '../Box';
  *
  */
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var TableRow = function TableRow(props) {
+var TableRow = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
     others = _objectWithoutProperties(props, _excluded);
   return ___EmotionJSX(Box, _extends({
+    ref: ref,
     variant: "table.row",
     as: "tr"
   }, others), children);
-};
+});
 export default TableRow;

package/lib/components/TableRow/TableRow.test.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Table, TableBody, TableRow } from '../../index';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+
+// Needs to be added to each components test file
+import { jsx as ___EmotionJSX } from "@emotion/react";
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(Table, null, ___EmotionJSX(TableBody, null, ___EmotionJSX(TableRow, props)));
+  }
+});

package/lib/components/Tabs/Tabs.test.js

@@ -21,8 +21,8 @@ import React from 'react';
 import createCache from '@emotion/cache';
 import { CacheProvider } from '@emotion/react';
 import userEvent from '@testing-library/user-event';
-import axeTest from '../../utils/testUtils/testAxe';
 import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import Tab from '../Tab';
 import Tabs from './Tabs';
 
@@ -133,8 +133,15 @@ 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(Tabs, props, ___EmotionJSX(Tab, {
+      key: "key",
+      title: "title"
+    }, "Content"));
+  }
+});
 test('default tabs', function () {
   getComponent();
   var tabList = screen.getByRole('tablist');

package/lib/components/Text/Text.test.js

@@ -12,9 +12,9 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 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 { ThemeProvider } from 'theme-ui';
-import axeTest from '../../utils/testUtils/testAxe';
 import testTheme from '../../utils/testUtils/testTheme';
 import { render, screen } from '../../utils/testUtils/testWrapper';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import Text from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-text';
@@ -29,8 +29,12 @@ var getComponent = function getComponent() {
   }, ___EmotionJSX(Text, _extends({}, defaultProps, props), children)));
 };
 
-// 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(Text, props, "text");
+  }
+});
 test('default text', function () {
   getComponent();
   var text = screen.getByTestId(testId);

package/lib/components/TextArea/TextArea.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 TextArea from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'textAreaField';
@@ -13,8 +13,13 @@ var getComponent = function getComponent() {
   return render(___EmotionJSX(TextArea, _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(TextArea, _extends({
+      label: "label"
+    }, props));
+  },
   // TextArea with label provided by TextAreaField
   rules: {
     'label': {

package/lib/components/TextAreaField/TextAreaField.test.js

@@ -6,8 +6,8 @@ import React from 'react';
 import { fireEvent } from '@testing-library/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 TextAreaField from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-textAreaField';
@@ -21,8 +21,12 @@ var getComponent = function getComponent() {
 };
 var mockfunction = jest.fn();
 
-// 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(TextAreaField, _extends({}, defaultProps, props));
+  }
+});
 test('disabled prop disables input', function () {
   getComponent({
     isDisabled: true

package/lib/components/TextField/TextField.test.js

@@ -6,7 +6,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import statuses from '../../utils/devUtils/constants/statuses';
-import axeTest from '../../utils/testUtils/testAxe';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import TextField from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-text-field';
@@ -20,8 +20,12 @@ var getComponent = function getComponent() {
   return render(___EmotionJSX(TextField, _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(TextField, _extends({}, defaultProps, props));
+  }
+});
 test('default text field', function () {
   getComponent();
   var field = screen.getByTestId(testId);

package/lib/components/TimeZonePicker/TimeZonePicker.test.js

@@ -3,6 +3,7 @@ import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { OverlayProvider, TimeZonePicker } from '../../index';
 import { render, screen } from '../../utils/testUtils/testWrapper';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testTimeZoneJuba = 'Africa/Juba';
 var testTimeZoneApia = 'Pacific/Apia';
@@ -73,4 +74,11 @@ test('shows custom empty search state text when no items are found', function ()
   var input = screen.queryByRole('combobox');
   userEvent.type(input, 'awdasrf213');
   expect(screen.getByText(testEmptyText)).toBeInTheDocument();
+});
+
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(TimeZonePicker, _extends({}, defaultProps, props));
+  }
 });

package/lib/components/TooltipTrigger/TooltipTrigger.test.js

@@ -14,16 +14,20 @@ import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { Button, Tooltip, TooltipTrigger } from '../../index';
 import theme from '../../styles/theme';
-import axeTest from '../../utils/testUtils/testAxe';
 import { fireEvent, render, screen, waitFor } from '../../utils/testUtils/testWrapper';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(TooltipTrigger, props, ___EmotionJSX(Button, props.buttonProps, "Mock Button"), ___EmotionJSX(Tooltip, null, "Tooltip Content")));
 };
 
-// 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(TooltipTrigger, props, ___EmotionJSX(Button, null, "Mock Button"), ___EmotionJSX(Tooltip, null, "Tooltip Content"));
+  }
+});
 test('tooltip doesnt show by default and is rendered when trigger is hovered', function () {
   getComponent();
   var button = screen.getByRole('button');

package/lib/hooks/useComponentToggle/useComponentToggle.js

@@ -6,9 +6,7 @@ var useComponentToggle = function useComponentToggle(props) {
     ComponentToRenderIfFalse = props.ComponentToRenderIfFalse,
     condition = props.condition,
     onConditionChange = props.onConditionChange;
-  var _useProgressiveState = useProgressiveState(condition, function () {
-      return null;
-    }),
+  var _useProgressiveState = useProgressiveState(condition, false),
     _useProgressiveState2 = _slicedToArray(_useProgressiveState, 2),
     isToggled = _useProgressiveState2[0],
     setIsToggled = _useProgressiveState2[1];

package/lib/hooks/useProgressiveState/useProgressiveState.js

@@ -1,15 +1,11 @@
 import { useState } from 'react';
-
-/**
- * A custom hook that provides stateful capabilities when the associated prop is not supplied
- * @param {*} prop The intended prop to be controlled by state
- * @param {*} initial The initial state value, used only if the given prop is undefined
- */
 var useProgressiveState = function useProgressiveState(prop, initial) {
   var controlledState = useState(initial);
   if (prop === undefined) {
     return controlledState;
   }
-  return [prop, function () {}];
+  return [prop, function () {
+    return undefined;
+  }];
 };
 export default useProgressiveState;

package/lib/hooks/useProgressiveState/useProgressiveState.test.js

@@ -1,26 +1,16 @@
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["count"];
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { renderHook } from '@testing-library/react-hooks';
 import userEvent from '@testing-library/user-event';
 import useProgressiveState from './useProgressiveState';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var testId = 'test';
-var defaultProps = {
-  'data-testid': testId
-};
 var hookProps = {
   prop: 'count',
   initial: 0
 };
-
-/* eslint-disable react/prop-types */
 var TestComponent = function TestComponent(_ref) {
-  var count = _ref.count,
-    others = _objectWithoutProperties(_ref, _excluded);
+  var count = _ref.count;
   var _useProgressiveState = useProgressiveState(count, 0),
     _useProgressiveState2 = _slicedToArray(_useProgressiveState, 2),
     countVal = _useProgressiveState2[0],
@@ -28,18 +18,19 @@ var TestComponent = function TestComponent(_ref) {
   var handleClick = function handleClick() {
     return setCountVal(countVal + 1);
   };
-  return ___EmotionJSX("button", _extends({}, others, {
+  return ___EmotionJSX("button", {
+    type: "button",
     onClick: handleClick
-  }), countVal);
+  }, countVal);
 };
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(TestComponent, _extends({}, props, defaultProps)));
+  return render(___EmotionJSX(TestComponent, props));
 };
 describe('State Utils', function () {
   it('should update the state when no prop is provided', function () {
     getComponent();
-    var component = screen.getByTestId(testId);
+    var component = screen.getByRole('button');
     expect(component).toHaveTextContent('0');
     userEvent.click(component);
     expect(component).toHaveTextContent('1');
@@ -50,7 +41,7 @@ describe('State Utils', function () {
     getComponent({
       count: 5
     });
-    var component = screen.getByTestId(testId);
+    var component = screen.getByRole('button');
     expect(component).toHaveTextContent('5');
     userEvent.click(component);
     expect(component).toHaveTextContent('5');

package/lib/utils/testUtils/universalComponentTest.js

@@ -33,20 +33,22 @@ var ComponentWithRef = function ComponentWithRef(_ref) {
 };
 export var universalComponentTests = /*#__PURE__*/function () {
   var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(_ref2) {
-    var renderComponent, props, _ref2$rules, rules;
+    var renderComponent, _ref2$rules, rules;
     return _regeneratorRuntime().wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
-          renderComponent = _ref2.renderComponent, props = _ref2.props, _ref2$rules = _ref2.rules, rules = _ref2$rules === void 0 ? {} : _ref2$rules;
+          renderComponent = _ref2.renderComponent, _ref2$rules = _ref2.rules, rules = _ref2$rules === void 0 ? {} : _ref2$rules;
           test('should have no accessibility violations', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
             var _render, container, results;
             return _regeneratorRuntime().wrap(function _callee$(_context) {
               while (1) switch (_context.prev = _context.next) {
                 case 0:
                   jest.useRealTimers();
-                  _render = render(renderComponent(props)), container = _render.container;
+                  _render = render(renderComponent()), container = _render.container;
                   _context.next = 4;
-                  return axe(container, rules);
+                  return axe(container, {
+                    rules: rules
+                  });
                 case 4:
                   results = _context.sent;
                   expect(results).toHaveNoViolations();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.33.0-alpha.9",
+  "version": "2.33.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",