@pingux/astro 2.33.0-alpha.1 → 2.33.0-alpha.11

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/useField/useField.js

@@ -15,6 +15,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { useEffect, useState } from 'react';
 import { mergeProps, useFocusRing, useLabel } from 'react-aria';
 import { useFocusWithin } from '@react-aria/interactions';
+// eslint-disable-next-line import/no-unresolved
+
 import noop from 'lodash/noop';
 import omit from 'lodash/omit';
 import { modes as labelModes } from '../../components/Label/constants';

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/hooks/usePropWarning/usePropWarning.js

@@ -2,14 +2,6 @@ import _Set from "@babel/runtime-corejs3/core-js-stable/set";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import { useEffect } from 'react';
 var alreadyShown = new _Set();
-
-/**
- * Provides a development-only console warning for props that we don't want consumers to use
- * @param {Object} props - The whole props object
- * @param {String} propToWarn - Specify prop to warn not to use
- * @param {String} propToUse - Specify prop that should be used instead
- * @param {Boolean} [allowDuplicates] - If allow duplicate warning messages
- */
 var usePropWarning = function usePropWarning(props, propToWarn, propToUse, allowDuplicates) {
   useEffect(function () {
     if (!allowDuplicates && alreadyShown.has(propToWarn)) {

package/lib/hooks/usePropWarning/usePropWarning.test.js

@@ -4,7 +4,7 @@ describe('usePropWarning', function () {
   beforeEach(function () {
     process.env.NODE_ENV = 'development';
     global.console.warn = function () {
-      return jest.mock();
+      return jest.fn();
     }; // eslint-disable-line no-console
   });
 
@@ -13,8 +13,9 @@ describe('usePropWarning', function () {
     jest.clearAllMocks();
   });
   test('default', function () {
-    var props = {};
-    props.disabled = true;
+    var props = {
+      disabled: true
+    };
     var spy = jest.spyOn(console, 'warn');
     expect(spy).not.toHaveBeenCalled();
     renderHook(function () {
@@ -23,8 +24,9 @@ describe('usePropWarning', function () {
     expect(spy).toHaveBeenCalledTimes(1);
   });
   test('does not warn if prop does not exist', function () {
-    var props = {};
-    props.isDisabled = true;
+    var props = {
+      isDisabled: true
+    };
     var spy = jest.spyOn(console, 'warn');
     expect(spy).not.toHaveBeenCalled();
     renderHook(function () {
@@ -33,8 +35,9 @@ describe('usePropWarning', function () {
     expect(spy).not.toHaveBeenCalled();
   });
   test('showns duplicated messages if explicitly allowed', function () {
-    var props = {};
-    props.disabled = true;
+    var props = {
+      disabled: true
+    };
     var spy = jest.spyOn(console, 'warn');
     renderHook(function () {
       return usePropWarning(props, 'disabled', 'isDisabled', true);
@@ -46,8 +49,9 @@ describe('usePropWarning', function () {
   });
   test('does not warn if it is in production environment', function () {
     process.env.NODE_ENV = 'production';
-    var props = {};
-    props.disabled = true;
+    var props = {
+      disabled: true
+    };
     var spy = jest.spyOn(console, 'warn');
     expect(spy).not.toHaveBeenCalled();
     renderHook(function () {

package/lib/hooks/useSelectField/useSelectField.js

@@ -16,8 +16,10 @@ import React, { useCallback, useImperativeHandle, useLayoutEffect, useRef, useSt
 import { DismissButton, FocusScope, useOverlayPosition, useSelect } from 'react-aria';
 import { useSelectState } from 'react-stately';
 import { useResizeObserver } from '@react-aria/utils';
+// eslint-disable-next-line import/no-unresolved
+
 import { modes } from '../../components/Label/constants';
-import ListBox from '../../components/ListBox';
+import ListBox from '../../components/ListBox/ListBox';
 import PopoverContainer from '../../components/PopoverContainer';
 import ScrollBox from '../../components/ScrollBox';
 import { useColumnStyles, useDeprecationWarning, useField } from '..';
@@ -53,8 +55,7 @@ var useSelectField = function useSelectField(props, ref) {
   // We use falsy booleans as defaults, but React Aria has this as true by default so we need to
   // negate this.
   var shouldFlip = !isNotFlippable;
-  var selectProps = _objectSpread({
-    children: children,
+  var selectProps = _objectSpread(_objectSpread({
     defaultSelectedKey: defaultSelectedKey,
     defaultText: defaultText,
     disabledKeys: disabledKeys,
@@ -76,13 +77,14 @@ var useSelectField = function useSelectField(props, ref) {
     disallowEmptySelection: disallowEmptySelection,
     // must match React Aria API
     shouldFlip: shouldFlip
-  }, controlProps);
+  }, controlProps), {}, {
+    children: children
+  });
   // Create state based on the incoming props
   var state = useSelectState(selectProps);
   var popoverRef = useRef();
-  var triggerRef = useRef();
   var listBoxRef = useRef();
-
+  var triggerRef = useRef();
   /* istanbul ignore next */
   useImperativeHandle(ref, function () {
     return triggerRef.current;
@@ -109,7 +111,7 @@ var useSelectField = function useSelectField(props, ref) {
       placeholder: props.labelMode === modes.FLOAT ? '' : placeholder,
       labelProps: _objectSpread(_objectSpread({}, props.labelProps), labelProps),
       containerProps: _objectSpread({
-        isFloatLabelActive: state.selectedItem
+        isFloatLabelActive: !!state.selectedItem
       }, props.containerProps)
     })),
     fieldContainerProps = _useField.fieldContainerProps,
@@ -141,7 +143,7 @@ var useSelectField = function useSelectField(props, ref) {
   }, [state.isOpen, updatePosition]);
 
   // Measure the width of the input to inform the width of the listbox (below).
-  var _useState = useState(null),
+  var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     buttonWidth = _useState2[0],
     setButtonWidth = _useState2[1];
@@ -150,7 +152,7 @@ var useSelectField = function useSelectField(props, ref) {
     if (triggerRef.current) {
       setButtonWidth(triggerRef.current.offsetWidth);
     }
-  }, [triggerRef, setButtonWidth, state.isOpen]);
+  }, [triggerRef, setButtonWidth]);
   useResizeObserver({
     ref: triggerRef,
     onResize: onResize

package/lib/utils/designUtils/figmaLinks.js

@@ -29,8 +29,10 @@ export var FIGMA_LINKS = {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=0-1&t=8Wwd3tIBh3GEjCJB-0'
   },
   buttonBar: {
-    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=3660%3A20551&mode=dev',
-    rightAligned: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=3660%3A20657&mode=dev'
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=46080%3A753&mode=dev',
+    rightAligned: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=46080%3A770&mode=dev',
+    secondary: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=46080%3A778&mode=dev',
+    secondaryRightAligned: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=46080%3A788&mode=dev'
   },
   calendar: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=6373%3A25490&t=BoHXzVpQq9Lf7MaU-1'

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.1",
+  "version": "2.33.0-alpha.11",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",