@pingux/astro 2.42.0 → 2.43.0-alpha.0

package/lib/cjs/components/Image/Image.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ImageProps } from '../../types/image';
+declare const Image: React.ForwardRefExoticComponent<Omit<ImageProps, "ref"> & React.RefAttributes<HTMLImageElement>>;
+export default Image;

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

@@ -1,15 +1,9 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
-var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
-var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
-var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
-var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 _Object$defineProperty(exports, "__esModule", {
   value: true
@@ -17,13 +11,11 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/taggedTemplateLiteral"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _interactions = require("@react-aria/interactions");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _themeUi = require("theme-ui");
 var _hooks = require("../../hooks");
 var _index = require("../../index");
@@ -32,12 +24,11 @@ var _templateObject;
 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; }
-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 Image = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var className = props.className,
     fallbackImage = props.fallbackImage,
-    fallbackTimeout = props.fallbackTimeout,
+    _props$fallbackTimeou = props.fallbackTimeout,
+    fallbackTimeout = _props$fallbackTimeou === void 0 ? 5000 : _props$fallbackTimeou,
     isDisabled = props.isDisabled,
     src = props.src,
     alt = props.alt,
@@ -111,29 +102,28 @@ var Image = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       setShouldShowFallback(true);
     }
   };
-  (0, _hooks.useFallbackImage)(_objectSpread({
+  (0, _hooks.useFallbackImage)({
     onImageLoad: onImageLoad,
     onImageError: onImageError,
-    onFallbackTimeout: onFallbackTimeout
-  }, props));
+    onFallbackTimeout: onFallbackTimeout,
+    fallbackTimeout: fallbackTimeout,
+    src: src || ''
+  });
   var skeletonFrames = (0, _react2.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  0% {\n    background-color: ", ";\n  }\n  100% {\n    background-color: ", ";\n  }\n"])), _colors.neutral[90], _colors.neutral[70]);
   var skeletonSx = {
     backgroundImage: !isLoading && 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'150\' height=\'150\'%3E%3Crect x=\'0\' y=\'0\' width=\'150\' height=\'150\' fill=\'%23e4e6e9\' /%3E%3C/svg%3E")',
-    // eslint-disable-next-line react/prop-types
     width: (sx === null || sx === void 0 ? void 0 : sx.width) || '100%',
-    // eslint-disable-next-line react/prop-types
     height: (sx === null || sx === void 0 ? void 0 : sx.height) || '100%',
     animation: isLoading && "".concat(skeletonFrames, " 1.5s ease-in-out 0.5s infinite alternate")
   };
-  var Skeleton = function Skeleton(_ref) {
-    var children = _ref.children;
+  var Skeleton = function Skeleton() {
     return (0, _react2.jsx)(_index.Box, {
       role: "img",
       sx: skeletonSx,
       "data-testid": "skeleton-image",
       "aria-busy": isLoading,
       "aria-label": isLoading ? 'Image is loading' : 'Loading of image timed out'
-    }, children);
+    });
   };
   var themeUiImage = (0, _react2.jsx)(_themeUi.Image, (0, _extends2["default"])({
     alt: imgAlt,
@@ -149,37 +139,9 @@ var Image = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }
   return themeUiImage;
 });
-Image.propTypes = {
-  /** The styling variation of the image. */
-  variant: _propTypes["default"].string,
-  /** Whether the image is disabled; applies disabled styling. */
-  isDisabled: _propTypes["default"].bool,
-  /**  The HTML element used to render the image. */
-  as: _propTypes["default"].string,
-  /**  Source of image(Image path). */
-  src: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
-  /**  Load failure fault-tolerant src
-   * We do recommend using JS File or Blob object as an src for the "fallbackImage".
-   * Here is some documentation on how to create a blob image [https://developer.mozilla.org/en-US/docs/Web/API/Blob].
-   * Also please note that URLs are accepted, but if the URL cannot be loaded,
-   * the fallback image will not be rendered so it's not recommended.
-   * */
-  fallbackImage: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
-  /**  Time in milliseconds that component should wait for a response from src address. */
-  fallbackTimeout: _propTypes["default"].number,
-  /** Descriptive text for an image. This is *highly* recommended in most cases.
-   * 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
-};
 Image.defaultProps = {
   isDisabled: false,
-  as: 'img',
-  fallbackTimeout: 5000
+  as: 'img'
 };
 Image.displayName = 'Image';
 var _default = Image;

package/lib/cjs/components/Image/Image.stories.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<Omit<import("../../types/image").ImageProps, "ref"> & React.RefAttributes<HTMLImageElement>>;
+    parameters: {
+        docs: {
+            page: () => React.JSX.Element;
+        };
+    };
+    argTypes: {
+        isDisabled: {};
+        variant: {
+            control: {
+                type: string;
+            };
+        };
+        as: {
+            control: {
+                type: string;
+                options: any;
+            };
+        };
+        src: {
+            control: {
+                type: string;
+            };
+        };
+    };
+    args: {
+        as: string;
+        src: string;
+    };
+};
+export default _default;
+export declare const Default: StoryFn;
+export declare const Avatar: StoryFn;
+export declare const CustomSizeAndRadius: StoryFn;
+export declare const Disabled: StoryFn;
+export declare const FallbackImage: StoryFn;
+export declare const WithSkeletonLoadSuccess: StoryFn;
+export declare const WithSkeletonLoadTimeout: StoryFn;
+export declare const UpdatingImageSrc: StoryFn;

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

@@ -106,9 +106,8 @@ var FallbackImage = function FallbackImage() {
   });
 };
 exports.FallbackImage = FallbackImage;
-var WithSkeletonLoadSuccess = function WithSkeletonLoadSuccess(_ref2) {
-  var useLocalSrc = _ref2.useLocalSrc;
-  var imageSrc = useLocalSrc ? _images.pingImg : 'https://app.requestly.io/delay/3000/https://picsum.photos/150/150';
+var WithSkeletonLoadSuccess = function WithSkeletonLoadSuccess() {
+  var imageSrc = (0, _isChromatic["default"])() ? _images.pingImg : 'https://app.requestly.io/delay/3000/https://picsum.photos/150/150';
   return (0, _react2.jsx)(_index.Image, {
     src: imageSrc,
     sx: {
@@ -119,9 +118,6 @@ var WithSkeletonLoadSuccess = function WithSkeletonLoadSuccess(_ref2) {
   });
 };
 exports.WithSkeletonLoadSuccess = WithSkeletonLoadSuccess;
-WithSkeletonLoadSuccess.args = {
-  useLocalSrc: (0, _isChromatic["default"])()
-};
 var WithSkeletonLoadTimeout = function WithSkeletonLoadTimeout() {
   return (0, _react2.jsx)(_index.Image, {
     src: "https://app.requestly.io/delay/7000/https://picsum.photos/150/150",

package/lib/cjs/components/Image/Image.styles.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+    avatar: {
+        cursor: string;
+        borderRadius: string;
+        width: string;
+        height: string;
+    };
+};
+export default _default;

package/lib/cjs/components/Image/Image.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -53,7 +53,9 @@ jest.mock('../../hooks/useFallbackImage', function () {
 test('an image is rendered', function () {
   getComponent();
   (0, _react2.act)(function () {
-    fallbackImageObj.onImageLoad();
+    if (fallbackImageObj) {
+      fallbackImageObj.onImageLoad();
+    }
   });
   var img = _testWrapper.screen.getByRole('img');
   expect(img).toBeInstanceOf(HTMLImageElement);
@@ -61,10 +63,12 @@ test('an image is rendered', function () {
 });
 test('an image is rendered with no fallback', function () {
   getComponent({
-    fallbackImage: null
+    fallbackImage: undefined
   });
   (0, _react2.act)(function () {
-    fallbackImageObj.onImageLoad();
+    if (fallbackImageObj) {
+      fallbackImageObj.onImageLoad();
+    }
   });
   var img = _testWrapper.screen.getByRole('img');
   expect(img).toBeInstanceOf(HTMLImageElement);
@@ -75,7 +79,9 @@ test('image shows disabled status', function () {
     isDisabled: true
   });
   (0, _react2.act)(function () {
-    fallbackImageObj.onImageLoad();
+    if (fallbackImageObj) {
+      fallbackImageObj.onImageLoad();
+    }
   });
   var img = _testWrapper.screen.getByRole('img');
   expect(img).toHaveClass('is-disabled');
@@ -85,7 +91,9 @@ test('image with alt text', function () {
     alt: 'Test'
   });
   (0, _react2.act)(function () {
-    fallbackImageObj.onImageLoad();
+    if (fallbackImageObj) {
+      fallbackImageObj.onImageLoad();
+    }
   });
   expect(_testWrapper.screen.getByAltText('Test')).toBeInTheDocument();
 });
@@ -94,16 +102,18 @@ test('image source is able to be changed', function () {
   var _getComponent = getComponent(),
     rerender = _getComponent.rerender;
   (0, _react2.act)(function () {
-    fallbackImageObj.onImageLoad();
+    if (fallbackImageObj) {
+      fallbackImageObj.onImageLoad();
+    }
   });
   expect(_testWrapper.screen.getByRole('img')).toHaveAttribute('src', testSrc);
-  getComponent({
+  rerender((0, _react3.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, {
     src: src2
-  }, {
-    renderFn: rerender
-  });
+  })));
   (0, _react2.act)(function () {
-    fallbackImageObj.onImageLoad();
+    if (fallbackImageObj) {
+      fallbackImageObj.onImageLoad();
+    }
   });
   expect(_testWrapper.screen.getByRole('img')).toHaveAttribute('src', src2);
 });
@@ -111,14 +121,18 @@ describe('test Image component with useFallbackImage hook', function () {
   test('image component will use src if loaded correctly', function () {
     getComponent();
     (0, _react2.act)(function () {
-      fallbackImageObj.onImageLoad();
+      if (fallbackImageObj) {
+        fallbackImageObj.onImageLoad();
+      }
     });
     expect(_testWrapper.screen.getByRole('img')).toHaveAttribute('src', testSrc);
   });
   test('image component will use fallbackImg and fallbackAlt if src loaded with error', function () {
     getComponent();
     (0, _react2.act)(function () {
-      fallbackImageObj.onImageError();
+      if (fallbackImageObj) {
+        fallbackImageObj.onImageError();
+      }
     });
     var img = _testWrapper.screen.getByRole('img');
     expect(img).toHaveAttribute('src', testFallbackSrc);
@@ -127,7 +141,9 @@ describe('test Image component with useFallbackImage hook', function () {
   test('image component will use fallbackImg and fallbackAlt if src timed out', function () {
     getComponent();
     (0, _react2.act)(function () {
-      fallbackImageObj.onFallbackTimeout();
+      if (fallbackImageObj) {
+        fallbackImageObj.onFallbackTimeout();
+      }
     });
     var img = _testWrapper.screen.getByRole('img');
     expect(img).toHaveAttribute('src', testFallbackSrc);
@@ -136,8 +152,10 @@ describe('test Image component with useFallbackImage hook', function () {
   test('if image loads after timeout src and alt still be the fallback', function () {
     getComponent();
     (0, _react2.act)(function () {
-      fallbackImageObj.onFallbackTimeout();
-      fallbackImageObj.onImageLoad();
+      if (fallbackImageObj) {
+        fallbackImageObj.onFallbackTimeout();
+        fallbackImageObj.onImageLoad();
+      }
     });
     var img = _testWrapper.screen.getByRole('img');
     expect(img).toHaveAttribute('src', testFallbackSrc);
@@ -146,36 +164,44 @@ describe('test Image component with useFallbackImage hook', function () {
   test('if image loads before timeout src still be the the origin one', function () {
     getComponent();
     (0, _react2.act)(function () {
-      fallbackImageObj.onImageLoad();
-      fallbackImageObj.onFallbackTimeout();
+      if (fallbackImageObj) {
+        fallbackImageObj.onImageLoad();
+        fallbackImageObj.onFallbackTimeout();
+      }
     });
     expect(_testWrapper.screen.getByRole('img')).toHaveAttribute('src', testSrc);
   });
   test('the skeleton loading will appear if no fallback image is given', function () {
     getComponent({
-      fallbackImage: null
+      fallbackImage: undefined
     });
     expect(_testWrapper.screen.getByTestId(skeletonImageId)).toBeInTheDocument();
     (0, _react2.act)(function () {
-      fallbackImageObj.onImageLoad();
+      if (fallbackImageObj) {
+        fallbackImageObj.onImageLoad();
+      }
     });
     expect(_testWrapper.screen.getByRole('img')).toHaveAttribute('src', testSrc);
   });
   test('the skeleton will be shown instead of img if no fallback image is given and image load failed', function () {
     getComponent({
-      fallbackImage: null
+      fallbackImage: undefined
     });
     (0, _react2.act)(function () {
-      fallbackImageObj.onImageError();
+      if (fallbackImageObj) {
+        fallbackImageObj.onImageError();
+      }
     });
     expect(_testWrapper.screen.getByTestId(skeletonImageId)).toBeInTheDocument();
   });
   test('the skeleton will be shown instead of img if no fallback image is given and image load timed out', function () {
     getComponent({
-      fallbackImage: null
+      fallbackImage: undefined
     });
     (0, _react2.act)(function () {
-      fallbackImageObj.onFallbackTimeout();
+      if (fallbackImageObj) {
+        fallbackImageObj.onFallbackTimeout();
+      }
     });
     expect(_testWrapper.screen.getByTestId(skeletonImageId)).toBeInTheDocument();
   });

package/lib/cjs/components/Image/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Image';

package/lib/cjs/types/image.d.ts

@@ -0,0 +1,18 @@
+import { ImageProps as ThemeUIImageProps, ThemeUICSSObject } from 'theme-ui';
+export interface ImageProps extends ThemeUIImageProps {
+    /** Whether the image is disabled; applies disabled styling. */
+    isDisabled?: boolean;
+    /**  Load failure fault-tolerant src
+     * We do recommend using JS File or Blob object as an src for the "fallbackImage".
+     * Here is some documentation on how to create a blob image [https://developer.mozilla.org/en-US/docs/Web/API/Blob].
+     * Also please note that URLs are accepted, but if the URL cannot be loaded,
+     * the fallback image will not be rendered so it's not recommended.
+     * */
+    fallbackImage?: string | object;
+    /**  Load failure fault-tolerant alt */
+    fallbackAlt?: string;
+    /**  Time in milliseconds that component should wait for a response from src address. */
+    fallbackTimeout?: number;
+    /** Inline styling prop for item */
+    sx?: ThemeUICSSObject;
+}

package/lib/cjs/types/image.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/Image/Image.js

@@ -1,24 +1,12 @@
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
-import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _taggedTemplateLiteral from "@babel/runtime-corejs3/helpers/esm/taggedTemplateLiteral";
-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", "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';
 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, useLocalOrForwardRef, usePropWarning, useStatusClasses } from '../../hooks';
 import { Box } from '../../index';
@@ -27,7 +15,8 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var Image = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
     fallbackImage = props.fallbackImage,
-    fallbackTimeout = props.fallbackTimeout,
+    _props$fallbackTimeou = props.fallbackTimeout,
+    fallbackTimeout = _props$fallbackTimeou === void 0 ? 5000 : _props$fallbackTimeou,
     isDisabled = props.isDisabled,
     src = props.src,
     alt = props.alt,
@@ -101,29 +90,28 @@ var Image = /*#__PURE__*/forwardRef(function (props, ref) {
       setShouldShowFallback(true);
     }
   };
-  useFallbackImage(_objectSpread({
+  useFallbackImage({
     onImageLoad: onImageLoad,
     onImageError: onImageError,
-    onFallbackTimeout: onFallbackTimeout
-  }, props));
+    onFallbackTimeout: onFallbackTimeout,
+    fallbackTimeout: fallbackTimeout,
+    src: src || ''
+  });
   var skeletonFrames = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    background-color: ", ";\n  }\n  100% {\n    background-color: ", ";\n  }\n"])), neutral[90], neutral[70]);
   var skeletonSx = {
     backgroundImage: !isLoading && 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'150\' height=\'150\'%3E%3Crect x=\'0\' y=\'0\' width=\'150\' height=\'150\' fill=\'%23e4e6e9\' /%3E%3C/svg%3E")',
-    // eslint-disable-next-line react/prop-types
     width: (sx === null || sx === void 0 ? void 0 : sx.width) || '100%',
-    // eslint-disable-next-line react/prop-types
     height: (sx === null || sx === void 0 ? void 0 : sx.height) || '100%',
     animation: isLoading && "".concat(skeletonFrames, " 1.5s ease-in-out 0.5s infinite alternate")
   };
-  var Skeleton = function Skeleton(_ref) {
-    var children = _ref.children;
+  var Skeleton = function Skeleton() {
     return ___EmotionJSX(Box, {
       role: "img",
       sx: skeletonSx,
       "data-testid": "skeleton-image",
       "aria-busy": isLoading,
       "aria-label": isLoading ? 'Image is loading' : 'Loading of image timed out'
-    }, children);
+    });
   };
   var themeUiImage = ___EmotionJSX(ThemeUIImage, _extends({
     alt: imgAlt,
@@ -139,37 +127,9 @@ var Image = /*#__PURE__*/forwardRef(function (props, ref) {
   }
   return themeUiImage;
 });
-Image.propTypes = {
-  /** The styling variation of the image. */
-  variant: PropTypes.string,
-  /** Whether the image is disabled; applies disabled styling. */
-  isDisabled: PropTypes.bool,
-  /**  The HTML element used to render the image. */
-  as: PropTypes.string,
-  /**  Source of image(Image path). */
-  src: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  /**  Load failure fault-tolerant src
-   * We do recommend using JS File or Blob object as an src for the "fallbackImage".
-   * Here is some documentation on how to create a blob image [https://developer.mozilla.org/en-US/docs/Web/API/Blob].
-   * Also please note that URLs are accepted, but if the URL cannot be loaded,
-   * the fallback image will not be rendered so it's not recommended.
-   * */
-  fallbackImage: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  /**  Time in milliseconds that component should wait for a response from src address. */
-  fallbackTimeout: PropTypes.number,
-  /** Descriptive text for an image. This is *highly* recommended in most cases.
-   * 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
-};
 Image.defaultProps = {
   isDisabled: false,
-  as: 'img',
-  fallbackTimeout: 5000
+  as: 'img'
 };
 Image.displayName = 'Image';
 export default Image;

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

@@ -87,9 +87,8 @@ export var FallbackImage = function FallbackImage() {
     alt: "Random image"
   });
 };
-export var WithSkeletonLoadSuccess = function WithSkeletonLoadSuccess(_ref2) {
-  var useLocalSrc = _ref2.useLocalSrc;
-  var imageSrc = useLocalSrc ? pingImg : 'https://app.requestly.io/delay/3000/https://picsum.photos/150/150';
+export var WithSkeletonLoadSuccess = function WithSkeletonLoadSuccess() {
+  var imageSrc = isChromatic() ? pingImg : 'https://app.requestly.io/delay/3000/https://picsum.photos/150/150';
   return ___EmotionJSX(Image, {
     src: imageSrc,
     sx: {
@@ -99,9 +98,6 @@ export var WithSkeletonLoadSuccess = function WithSkeletonLoadSuccess(_ref2) {
     alt: "Random image"
   });
 };
-WithSkeletonLoadSuccess.args = {
-  useLocalSrc: isChromatic()
-};
 export var WithSkeletonLoadTimeout = function WithSkeletonLoadTimeout() {
   return ___EmotionJSX(Image, {
     src: "https://app.requestly.io/delay/7000/https://picsum.photos/150/150",

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

@@ -50,7 +50,9 @@ jest.mock('../../hooks/useFallbackImage', function () {
 test('an image is rendered', function () {
   getComponent();
   act(function () {
-    fallbackImageObj.onImageLoad();
+    if (fallbackImageObj) {
+      fallbackImageObj.onImageLoad();
+    }
   });
   var img = screen.getByRole('img');
   expect(img).toBeInstanceOf(HTMLImageElement);
@@ -58,10 +60,12 @@ test('an image is rendered', function () {
 });
 test('an image is rendered with no fallback', function () {
   getComponent({
-    fallbackImage: null
+    fallbackImage: undefined
   });
   act(function () {
-    fallbackImageObj.onImageLoad();
+    if (fallbackImageObj) {
+      fallbackImageObj.onImageLoad();
+    }
   });
   var img = screen.getByRole('img');
   expect(img).toBeInstanceOf(HTMLImageElement);
@@ -72,7 +76,9 @@ test('image shows disabled status', function () {
     isDisabled: true
   });
   act(function () {
-    fallbackImageObj.onImageLoad();
+    if (fallbackImageObj) {
+      fallbackImageObj.onImageLoad();
+    }
   });
   var img = screen.getByRole('img');
   expect(img).toHaveClass('is-disabled');
@@ -82,7 +88,9 @@ test('image with alt text', function () {
     alt: 'Test'
   });
   act(function () {
-    fallbackImageObj.onImageLoad();
+    if (fallbackImageObj) {
+      fallbackImageObj.onImageLoad();
+    }
   });
   expect(screen.getByAltText('Test')).toBeInTheDocument();
 });
@@ -91,16 +99,18 @@ test('image source is able to be changed', function () {
   var _getComponent = getComponent(),
     rerender = _getComponent.rerender;
   act(function () {
-    fallbackImageObj.onImageLoad();
+    if (fallbackImageObj) {
+      fallbackImageObj.onImageLoad();
+    }
   });
   expect(screen.getByRole('img')).toHaveAttribute('src', testSrc);
-  getComponent({
+  rerender(___EmotionJSX(Image, _extends({}, defaultProps, {
     src: src2
-  }, {
-    renderFn: rerender
-  });
+  })));
   act(function () {
-    fallbackImageObj.onImageLoad();
+    if (fallbackImageObj) {
+      fallbackImageObj.onImageLoad();
+    }
   });
   expect(screen.getByRole('img')).toHaveAttribute('src', src2);
 });
@@ -108,14 +118,18 @@ describe('test Image component with useFallbackImage hook', function () {
   test('image component will use src if loaded correctly', function () {
     getComponent();
     act(function () {
-      fallbackImageObj.onImageLoad();
+      if (fallbackImageObj) {
+        fallbackImageObj.onImageLoad();
+      }
     });
     expect(screen.getByRole('img')).toHaveAttribute('src', testSrc);
   });
   test('image component will use fallbackImg and fallbackAlt if src loaded with error', function () {
     getComponent();
     act(function () {
-      fallbackImageObj.onImageError();
+      if (fallbackImageObj) {
+        fallbackImageObj.onImageError();
+      }
     });
     var img = screen.getByRole('img');
     expect(img).toHaveAttribute('src', testFallbackSrc);
@@ -124,7 +138,9 @@ describe('test Image component with useFallbackImage hook', function () {
   test('image component will use fallbackImg and fallbackAlt if src timed out', function () {
     getComponent();
     act(function () {
-      fallbackImageObj.onFallbackTimeout();
+      if (fallbackImageObj) {
+        fallbackImageObj.onFallbackTimeout();
+      }
     });
     var img = screen.getByRole('img');
     expect(img).toHaveAttribute('src', testFallbackSrc);
@@ -133,8 +149,10 @@ describe('test Image component with useFallbackImage hook', function () {
   test('if image loads after timeout src and alt still be the fallback', function () {
     getComponent();
     act(function () {
-      fallbackImageObj.onFallbackTimeout();
-      fallbackImageObj.onImageLoad();
+      if (fallbackImageObj) {
+        fallbackImageObj.onFallbackTimeout();
+        fallbackImageObj.onImageLoad();
+      }
     });
     var img = screen.getByRole('img');
     expect(img).toHaveAttribute('src', testFallbackSrc);
@@ -143,36 +161,44 @@ describe('test Image component with useFallbackImage hook', function () {
   test('if image loads before timeout src still be the the origin one', function () {
     getComponent();
     act(function () {
-      fallbackImageObj.onImageLoad();
-      fallbackImageObj.onFallbackTimeout();
+      if (fallbackImageObj) {
+        fallbackImageObj.onImageLoad();
+        fallbackImageObj.onFallbackTimeout();
+      }
     });
     expect(screen.getByRole('img')).toHaveAttribute('src', testSrc);
   });
   test('the skeleton loading will appear if no fallback image is given', function () {
     getComponent({
-      fallbackImage: null
+      fallbackImage: undefined
     });
     expect(screen.getByTestId(skeletonImageId)).toBeInTheDocument();
     act(function () {
-      fallbackImageObj.onImageLoad();
+      if (fallbackImageObj) {
+        fallbackImageObj.onImageLoad();
+      }
     });
     expect(screen.getByRole('img')).toHaveAttribute('src', testSrc);
   });
   test('the skeleton will be shown instead of img if no fallback image is given and image load failed', function () {
     getComponent({
-      fallbackImage: null
+      fallbackImage: undefined
     });
     act(function () {
-      fallbackImageObj.onImageError();
+      if (fallbackImageObj) {
+        fallbackImageObj.onImageError();
+      }
     });
     expect(screen.getByTestId(skeletonImageId)).toBeInTheDocument();
   });
   test('the skeleton will be shown instead of img if no fallback image is given and image load timed out', function () {
     getComponent({
-      fallbackImage: null
+      fallbackImage: undefined
     });
     act(function () {
-      fallbackImageObj.onFallbackTimeout();
+      if (fallbackImageObj) {
+        fallbackImageObj.onFallbackTimeout();
+      }
     });
     expect(screen.getByTestId(skeletonImageId)).toBeInTheDocument();
   });

package/lib/types/image.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.42.0",
+  "version": "2.43.0-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",
@@ -26,6 +26,7 @@
     "chromatic": "npx chromatic",
     "coverage": "yarn test --coverage",
     "coverage-ci": "yarn test --coverage --ci",
+    "coverage-jenkins": "yarn coverage-ci --maxWorkers=25%",
     "demo": "rm -rf ./demo && storybook build -o demo",
     "lint": "eslint --ext .js,.jsx,.ts,.tsx .",
     "start": "storybook dev -p 6006",