@pingux/astro 2.34.0 → 2.35.0-alpha.1

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

@@ -116,12 +116,14 @@ Default.parameters = {
   }
 };
 var CountBadge = function CountBadge() {
-  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Badge, {
-    label: "1",
-    variant: "countBadge",
-    mb: "12px"
+  return (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    gap: "xs"
+  }, (0, _react2.jsx)(_index.Badge, {
+    label: "4",
+    variant: "countBadge"
   }), (0, _react2.jsx)(_index.Badge, {
-    label: "1",
+    label: "4",
     variant: "countNeutral"
   }));
 };

package/lib/cjs/components/Badge/Badge.styles.js

@@ -137,7 +137,7 @@ var countDefault = _objectSpread(_objectSpread({}, baseBadge), {}, {
   width: 'fit-content',
   minWidth: '17px',
   minHeight: '17px',
-  px: '0',
+  px: '5px',
   py: '2px',
   '& span': {
     fontSize: '11px',

package/lib/cjs/components/Image/Image.js

@@ -73,7 +73,7 @@ var Image = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var imgAlt = (0, _react.useMemo)(function () {
     return setImgAttribute(alt, fallbackAlt);
   }, [alt, isLoading, shouldShowFallback]);
-  var imgRef = (0, _react.useRef)();
+  var imgRef = (0, _hooks.useLocalOrForwardRef)(ref);
 
   /* istanbul ignore next */
   (0, _react.useImperativeHandle)(ref, function () {

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

@@ -13,8 +13,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
 var _testWrapper = require("../../utils/testUtils/testWrapper");
+var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
 var _ = _interopRequireDefault(require("."));
 var _react3 = require("@emotion/react");
 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; }
@@ -37,7 +37,12 @@ var getComponent = function getComponent() {
 };
 
 // Need to be added to each test file to test accessibility using axe.
-(0, _testAxe["default"])(getComponent);
+
+(0, _universalComponentTest.universalComponentTests)({
+  renderComponent: function renderComponent(props) {
+    return (0, _react3.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props));
+  }
+});
 var fallbackImageObj = null;
 jest.mock('../../hooks/useFallbackImage', function () {
   return function (props) {

package/lib/components/Badge/Badge.stories.js

@@ -106,12 +106,14 @@ Default.parameters = {
   }
 };
 export var CountBadge = function CountBadge() {
-  return ___EmotionJSX(Box, null, ___EmotionJSX(Badge, {
-    label: "1",
-    variant: "countBadge",
-    mb: "12px"
+  return ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "xs"
+  }, ___EmotionJSX(Badge, {
+    label: "4",
+    variant: "countBadge"
   }), ___EmotionJSX(Badge, {
-    label: "1",
+    label: "4",
     variant: "countNeutral"
   }));
 };

package/lib/components/Badge/Badge.styles.js

@@ -126,7 +126,7 @@ var countDefault = _objectSpread(_objectSpread({}, baseBadge), {}, {
   width: 'fit-content',
   minWidth: '17px',
   minHeight: '17px',
-  px: '0',
+  px: '5px',
   py: '2px',
   '& span': {
     fontSize: '11px',

package/lib/components/Image/Image.js

@@ -20,7 +20,7 @@ import { keyframes } from '@emotion/react';
 import { useHover } from '@react-aria/interactions';
 import PropTypes from 'prop-types';
 import { Image as ThemeUIImage } from 'theme-ui';
-import { useAriaLabelWarning, useDevelopmentWarning, useFallbackImage, usePropWarning, useStatusClasses } from '../../hooks';
+import { useAriaLabelWarning, useDevelopmentWarning, useFallbackImage, useLocalOrForwardRef, usePropWarning, useStatusClasses } from '../../hooks';
 import { Box } from '../../index';
 import { neutral } from '../../styles/colors';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -63,7 +63,7 @@ var Image = /*#__PURE__*/forwardRef(function (props, ref) {
   var imgAlt = useMemo(function () {
     return setImgAttribute(alt, fallbackAlt);
   }, [alt, isLoading, shouldShowFallback]);
-  var imgRef = useRef();
+  var imgRef = useLocalOrForwardRef(ref);
 
   /* istanbul ignore next */
   useImperativeHandle(ref, function () {

package/lib/components/Image/Image.test.js

@@ -12,8 +12,8 @@ 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 { act } from '@testing-library/react';
-import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import Image from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testSrc = 'test-src';
@@ -34,7 +34,12 @@ var getComponent = function getComponent() {
 };
 
 // Need to be added to each test file to test accessibility using axe.
-axeTest(getComponent);
+
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(Image, _extends({}, defaultProps, props));
+  }
+});
 var fallbackImageObj = null;
 jest.mock('../../hooks/useFallbackImage', function () {
   return function (props) {

package/package.json

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