@pingux/astro 2.1.2-alpha.0 → 2.1.2-alpha.2

package/lib/cjs/components/HelpHint/HelpHint.js

@@ -12,6 +12,8 @@ exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
+var _reactAria = require("react-aria");
+var _interactions = require("@react-aria/interactions");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _uuid = require("uuid");
 var _ = require("../..");
@@ -39,15 +41,26 @@ var HelpHint = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     iconButtonProps = props.iconButtonProps,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var tooltipId = (0, _uuid.v4)();
+  var buttonRef = (0, _react.useRef)();
+  var _useFocusRing = (0, _reactAria.useFocusRing)(),
+    focusProps = _useFocusRing.focusProps,
+    isFocusVisible = _useFocusRing.isFocusVisible;
+  var _useHover = (0, _interactions.useHover)({}),
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
+  var isTooltipOpen = isFocusVisible || isHovered;
   return (0, _react2.jsx)(_TooltipTrigger["default"], (0, _extends2["default"])({
     ref: ref,
     direction: "top"
-  }, others, tooltipProps), (0, _react2.jsx)(_IconButton["default"], (0, _extends2["default"])({
+  }, others, {
+    isOpen: isTooltipOpen
+  }, tooltipProps), (0, _react2.jsx)(_IconButton["default"], (0, _extends2["default"])({
+    ref: buttonRef,
     variant: "hintButton",
     "aria-label": "label help hint",
     "data-testid": "help-hint__button",
-    "aria-describedby": tooltipId
-  }, iconButtonProps), (0, _react2.jsx)(_.Icon, {
+    "aria-describedby": isTooltipOpen ? tooltipId : null
+  }, iconButtonProps, hoverProps, focusProps), (0, _react2.jsx)(_.Icon, {
     icon: HelpIcon
   })), (0, _react2.jsx)(_TooltipTrigger.Tooltip, (0, _extends2["default"])({}, tooltipProps, {
     role: "tooltip",

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

@@ -31,7 +31,10 @@ test('shows tooltip on hover', function () {
   expect(_testWrapper.screen.queryByText(tooltipValue)).not.toBeInTheDocument();
   _testWrapper.fireEvent.mouseMove(helpHintButton);
   _testWrapper.fireEvent.mouseEnter(helpHintButton);
-  expect(_testWrapper.screen.getByText(tooltipValue)).toBeInTheDocument();
+  var tooltip = _testWrapper.screen.getByRole('tooltip');
+  var tooltipId = tooltip.getAttribute('id');
+  expect(tooltip).toBeInTheDocument();
+  expect(helpHintButton).toHaveAttribute('aria-describedby', tooltipId);
 });
 test('shows tooltip on focus', function () {
   getComponent();
@@ -39,7 +42,10 @@ test('shows tooltip on focus', function () {
   expect(_testWrapper.screen.queryByText(tooltipValue)).not.toBeInTheDocument();
   _userEvent["default"].tab();
   expect(helpHintButton).toHaveFocus();
-  expect(_testWrapper.screen.queryByText(tooltipValue)).toBeInTheDocument();
+  var tooltip = _testWrapper.screen.getByRole('tooltip');
+  var tooltipId = tooltip.getAttribute('id');
+  expect(tooltip).toBeInTheDocument();
+  expect(helpHintButton).toHaveAttribute('aria-describedby', tooltipId);
 });
 test('applies tooltipProps', function () {
   getComponent({

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

@@ -29,7 +29,7 @@ var _hooks = require("../../hooks");
 var _index = require("../../index");
 var _colors = require("../../styles/colors");
 var _templateObject;
-var _excluded = ["className", "fallbackImage", "fallbackTimeout", "isDisabled", "src", "alt", "sx"];
+var _excluded = ["className", "fallbackImage", "fallbackTimeout", "isDisabled", "src", "alt", "sx", "fallbackAlt"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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; }
@@ -48,6 +48,7 @@ var Image = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     src = props.src,
     alt = props.alt,
     sx = props.sx,
+    fallbackAlt = props.fallbackAlt,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _useState = (0, _react.useState)(true),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -68,15 +69,16 @@ var Image = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     setIsLoading(newState);
     isLoadingRef.current = newState;
   };
-  var setImgSrc = function setImgSrc() {
-    if (!loadedSuccessfully && !(isLoadingRef !== null && isLoadingRef !== void 0 && isLoadingRef.current) || shouldShowFallback) {
-      return fallbackImage;
-    }
-    return src;
+  var shouldUseFallbackProps = !loadedSuccessfully && !(isLoadingRef !== null && isLoadingRef !== void 0 && isLoadingRef.current) || shouldShowFallback;
+  var setImgAttribute = function setImgAttribute(attribute, fallbackAttribute) {
+    return shouldUseFallbackProps ? fallbackAttribute : attribute;
   };
   var imgSrc = (0, _react.useMemo)(function () {
-    return setImgSrc();
+    return setImgAttribute(src, fallbackImage);
   }, [src, isLoading, shouldShowFallback]);
+  var imgAlt = (0, _react.useMemo)(function () {
+    return setImgAttribute(alt, fallbackAlt);
+  }, [alt, isLoading, shouldShowFallback]);
   var imgRef = (0, _react.useRef)();
 
   /* istanbul ignore next */
@@ -86,6 +88,10 @@ var Image = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
   var ariaLabel = props['aria-label'] || alt;
   (0, _hooks.useAriaLabelWarning)('Image', ariaLabel);
+  (0, _hooks.useDevelopmentWarning)({
+    message: 'Use fallbackAlt to proivide alt attribute for fallback image',
+    shouldTrigger: shouldUseFallbackProps && !fallbackAlt
+  });
   var _useHover = (0, _interactions.useHover)(props),
     hoverProps = _useHover.hoverProps,
     isHovered = _useHover.isHovered;
@@ -133,7 +139,7 @@ var Image = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }, children);
   };
   var themeUiImage = (0, _react2.jsx)(_themeUi.Image, (0, _extends2["default"])({
-    alt: alt,
+    alt: imgAlt,
     className: classNames,
     ref: imgRef,
     role: "img",
@@ -167,6 +173,8 @@ Image.propTypes = {
    * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-alt).
    * */
   alt: _propTypes["default"].string,
+  /**  Load failure fault-tolerant alt */
+  fallbackAlt: _propTypes["default"].string,
   /** Defines a string value that labels the current element. */
   'aria-label': _propTypes["default"].string
 };

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

@@ -85,6 +85,7 @@ exports.Disabled = Disabled;
 var FallbackImage = function FallbackImage() {
   return (0, _react2.jsx)(_index.Image, {
     fallbackImage: _images.pingImg,
+    fallbackAlt: "Ping Identity",
     src: "https://deelay.me/7000/https://picsum.photos/150/150",
     sx: {
       width: '150px',

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

@@ -21,10 +21,12 @@ 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) { (0, _defineProperty2["default"])(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; }
 var testSrc = 'test-src';
 var testFallbackSrc = 'test-fallback-src';
+var testFallbackAlt = 'test-fallback-alt';
 var skeletonImageId = 'skeleton-image';
 var defaultProps = {
   src: testSrc,
-  fallbackImage: testFallbackSrc
+  fallbackImage: testFallbackSrc,
+  fallbackAlt: testFallbackAlt
 };
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -108,23 +110,25 @@ describe('test Image component with useFallbackImage hook', function () {
     });
     expect(_testWrapper.screen.getByRole('img')).toHaveAttribute('src', testSrc);
   });
-  test('image component will use fallbackImg if src loaded with error', function () {
+  test('image component will use fallbackImg and fallbackAlt if src loaded with error', function () {
     getComponent();
     (0, _react2.act)(function () {
       fallbackImageObj.onImageError();
     });
     var img = _testWrapper.screen.getByRole('img');
     expect(img).toHaveAttribute('src', testFallbackSrc);
+    expect(img).toHaveAttribute('alt', testFallbackAlt);
   });
-  test('image component will use fallbackImg if src timed out', function () {
+  test('image component will use fallbackImg and fallbackAlt if src timed out', function () {
     getComponent();
     (0, _react2.act)(function () {
       fallbackImageObj.onFallbackTimeout();
     });
     var img = _testWrapper.screen.getByRole('img');
     expect(img).toHaveAttribute('src', testFallbackSrc);
+    expect(img).toHaveAttribute('alt', testFallbackAlt);
   });
-  test('if image loads after timeout src still be the fallback', function () {
+  test('if image loads after timeout src and alt still be the fallback', function () {
     getComponent();
     (0, _react2.act)(function () {
       fallbackImageObj.onFallbackTimeout();
@@ -132,6 +136,7 @@ describe('test Image component with useFallbackImage hook', function () {
     });
     var img = _testWrapper.screen.getByRole('img');
     expect(img).toHaveAttribute('src', testFallbackSrc);
+    expect(img).toHaveAttribute('alt', testFallbackAlt);
   });
   test('if image loads before timeout src still be the the origin one', function () {
     getComponent();

package/lib/cjs/hooks/index.js

@@ -41,6 +41,12 @@ _Object$defineProperty(exports, "useDeprecationWarning", {
     return _useDeprecationWarning["default"];
   }
 });
+_Object$defineProperty(exports, "useDevelopmentWarning", {
+  enumerable: true,
+  get: function get() {
+    return _useDevelopmentWarning["default"];
+  }
+});
 _Object$defineProperty(exports, "useFallbackImage", {
   enumerable: true,
   get: function get() {
@@ -131,6 +137,7 @@ var _useComponentToggle = _interopRequireDefault(require("./useComponentToggle")
 var _useCopyToClipboard = _interopRequireDefault(require("./useCopyToClipboard"));
 var _useDebounce = _interopRequireDefault(require("./useDebounce"));
 var _useDeprecationWarning = _interopRequireDefault(require("./useDeprecationWarning"));
+var _useDevelopmentWarning = _interopRequireDefault(require("./useDevelopmentWarning"));
 var _useFallbackImage = _interopRequireDefault(require("./useFallbackImage"));
 var _useField = _interopRequireDefault(require("./useField"));
 var _useLabelHeight = _interopRequireDefault(require("./useLabelHeight"));

package/lib/components/HelpHint/HelpHint.js

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["children", "tooltipProps", "iconButtonProps"];
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useRef } from 'react';
+import { useFocusRing } from 'react-aria';
+import { useHover } from '@react-aria/interactions';
 import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
 import { Icon } from '../..';
@@ -26,15 +28,26 @@ var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
     iconButtonProps = props.iconButtonProps,
     others = _objectWithoutProperties(props, _excluded);
   var tooltipId = uuid();
+  var buttonRef = useRef();
+  var _useFocusRing = useFocusRing(),
+    focusProps = _useFocusRing.focusProps,
+    isFocusVisible = _useFocusRing.isFocusVisible;
+  var _useHover = useHover({}),
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
+  var isTooltipOpen = isFocusVisible || isHovered;
   return ___EmotionJSX(TooltipTrigger, _extends({
     ref: ref,
     direction: "top"
-  }, others, tooltipProps), ___EmotionJSX(IconButton, _extends({
+  }, others, {
+    isOpen: isTooltipOpen
+  }, tooltipProps), ___EmotionJSX(IconButton, _extends({
+    ref: buttonRef,
     variant: "hintButton",
     "aria-label": "label help hint",
     "data-testid": "help-hint__button",
-    "aria-describedby": tooltipId
-  }, iconButtonProps), ___EmotionJSX(Icon, {
+    "aria-describedby": isTooltipOpen ? tooltipId : null
+  }, iconButtonProps, hoverProps, focusProps), ___EmotionJSX(Icon, {
     icon: HelpIcon
   })), ___EmotionJSX(Tooltip, _extends({}, tooltipProps, {
     role: "tooltip",

package/lib/components/HelpHint/HelpHint.test.js

@@ -28,7 +28,10 @@ test('shows tooltip on hover', function () {
   expect(screen.queryByText(tooltipValue)).not.toBeInTheDocument();
   fireEvent.mouseMove(helpHintButton);
   fireEvent.mouseEnter(helpHintButton);
-  expect(screen.getByText(tooltipValue)).toBeInTheDocument();
+  var tooltip = screen.getByRole('tooltip');
+  var tooltipId = tooltip.getAttribute('id');
+  expect(tooltip).toBeInTheDocument();
+  expect(helpHintButton).toHaveAttribute('aria-describedby', tooltipId);
 });
 test('shows tooltip on focus', function () {
   getComponent();
@@ -36,7 +39,10 @@ test('shows tooltip on focus', function () {
   expect(screen.queryByText(tooltipValue)).not.toBeInTheDocument();
   userEvent.tab();
   expect(helpHintButton).toHaveFocus();
-  expect(screen.queryByText(tooltipValue)).toBeInTheDocument();
+  var tooltip = screen.getByRole('tooltip');
+  var tooltipId = tooltip.getAttribute('id');
+  expect(tooltip).toBeInTheDocument();
+  expect(helpHintButton).toHaveAttribute('aria-describedby', tooltipId);
 });
 test('applies tooltipProps', function () {
   getComponent({

package/lib/components/Image/Image.js

@@ -12,7 +12,7 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _templateObject;
-var _excluded = ["className", "fallbackImage", "fallbackTimeout", "isDisabled", "src", "alt", "sx"];
+var _excluded = ["className", "fallbackImage", "fallbackTimeout", "isDisabled", "src", "alt", "sx", "fallbackAlt"];
 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, { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react';
@@ -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, useFallbackImage, usePropWarning, useStatusClasses } from '../../hooks';
+import { useAriaLabelWarning, useDevelopmentWarning, useFallbackImage, usePropWarning, useStatusClasses } from '../../hooks';
 import { Box } from '../../index';
 import { neutral } from '../../styles/colors';
 
@@ -38,6 +38,7 @@ var Image = /*#__PURE__*/forwardRef(function (props, ref) {
     src = props.src,
     alt = props.alt,
     sx = props.sx,
+    fallbackAlt = props.fallbackAlt,
     others = _objectWithoutProperties(props, _excluded);
   var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
@@ -58,15 +59,16 @@ var Image = /*#__PURE__*/forwardRef(function (props, ref) {
     setIsLoading(newState);
     isLoadingRef.current = newState;
   };
-  var setImgSrc = function setImgSrc() {
-    if (!loadedSuccessfully && !(isLoadingRef !== null && isLoadingRef !== void 0 && isLoadingRef.current) || shouldShowFallback) {
-      return fallbackImage;
-    }
-    return src;
+  var shouldUseFallbackProps = !loadedSuccessfully && !(isLoadingRef !== null && isLoadingRef !== void 0 && isLoadingRef.current) || shouldShowFallback;
+  var setImgAttribute = function setImgAttribute(attribute, fallbackAttribute) {
+    return shouldUseFallbackProps ? fallbackAttribute : attribute;
   };
   var imgSrc = useMemo(function () {
-    return setImgSrc();
+    return setImgAttribute(src, fallbackImage);
   }, [src, isLoading, shouldShowFallback]);
+  var imgAlt = useMemo(function () {
+    return setImgAttribute(alt, fallbackAlt);
+  }, [alt, isLoading, shouldShowFallback]);
   var imgRef = useRef();
 
   /* istanbul ignore next */
@@ -76,6 +78,10 @@ var Image = /*#__PURE__*/forwardRef(function (props, ref) {
   usePropWarning(props, 'disabled', 'isDisabled');
   var ariaLabel = props['aria-label'] || alt;
   useAriaLabelWarning('Image', ariaLabel);
+  useDevelopmentWarning({
+    message: 'Use fallbackAlt to proivide alt attribute for fallback image',
+    shouldTrigger: shouldUseFallbackProps && !fallbackAlt
+  });
   var _useHover = useHover(props),
     hoverProps = _useHover.hoverProps,
     isHovered = _useHover.isHovered;
@@ -123,7 +129,7 @@ var Image = /*#__PURE__*/forwardRef(function (props, ref) {
     }, children);
   };
   var themeUiImage = ___EmotionJSX(ThemeUIImage, _extends({
-    alt: alt,
+    alt: imgAlt,
     className: classNames,
     ref: imgRef,
     role: "img",
@@ -157,6 +163,8 @@ Image.propTypes = {
    * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-alt).
    * */
   alt: PropTypes.string,
+  /**  Load failure fault-tolerant alt */
+  fallbackAlt: PropTypes.string,
   /** Defines a string value that labels the current element. */
   'aria-label': PropTypes.string
 };

package/lib/components/Image/Image.stories.js

@@ -67,6 +67,7 @@ export var Disabled = function Disabled() {
 export var FallbackImage = function FallbackImage() {
   return ___EmotionJSX(Image, {
     fallbackImage: pingImg,
+    fallbackAlt: "Ping Identity",
     src: "https://deelay.me/7000/https://picsum.photos/150/150",
     sx: {
       width: '150px',

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

@@ -18,10 +18,12 @@ import Image from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testSrc = 'test-src';
 var testFallbackSrc = 'test-fallback-src';
+var testFallbackAlt = 'test-fallback-alt';
 var skeletonImageId = 'skeleton-image';
 var defaultProps = {
   src: testSrc,
-  fallbackImage: testFallbackSrc
+  fallbackImage: testFallbackSrc,
+  fallbackAlt: testFallbackAlt
 };
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -105,23 +107,25 @@ describe('test Image component with useFallbackImage hook', function () {
     });
     expect(screen.getByRole('img')).toHaveAttribute('src', testSrc);
   });
-  test('image component will use fallbackImg if src loaded with error', function () {
+  test('image component will use fallbackImg and fallbackAlt if src loaded with error', function () {
     getComponent();
     act(function () {
       fallbackImageObj.onImageError();
     });
     var img = screen.getByRole('img');
     expect(img).toHaveAttribute('src', testFallbackSrc);
+    expect(img).toHaveAttribute('alt', testFallbackAlt);
   });
-  test('image component will use fallbackImg if src timed out', function () {
+  test('image component will use fallbackImg and fallbackAlt if src timed out', function () {
     getComponent();
     act(function () {
       fallbackImageObj.onFallbackTimeout();
     });
     var img = screen.getByRole('img');
     expect(img).toHaveAttribute('src', testFallbackSrc);
+    expect(img).toHaveAttribute('alt', testFallbackAlt);
   });
-  test('if image loads after timeout src still be the fallback', function () {
+  test('if image loads after timeout src and alt still be the fallback', function () {
     getComponent();
     act(function () {
       fallbackImageObj.onFallbackTimeout();
@@ -129,6 +133,7 @@ describe('test Image component with useFallbackImage hook', function () {
     });
     var img = screen.getByRole('img');
     expect(img).toHaveAttribute('src', testFallbackSrc);
+    expect(img).toHaveAttribute('alt', testFallbackAlt);
   });
   test('if image loads before timeout src still be the the origin one', function () {
     getComponent();

package/lib/hooks/index.js

@@ -4,6 +4,7 @@ export { default as useComponentToggle } from './useComponentToggle';
 export { default as useCopyToClipboard } from './useCopyToClipboard';
 export { default as useDebounce } from './useDebounce';
 export { default as useDeprecationWarning } from './useDeprecationWarning';
+export { default as useDevelopmentWarning } from './useDevelopmentWarning';
 export { default as useFallbackImage } from './useFallbackImage';
 export { default as useField } from './useField';
 export { default as useLabelHeight } from './useLabelHeight';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.1.2-alpha.0",
+  "version": "2.1.2-alpha.2",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",