@pingux/astro 1.8.0-alpha.0 → 1.8.0-alpha.3

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

@@ -20,17 +20,22 @@ var _testWrapper = require("../../utils/testUtils/testWrapper");
 
 var _ImageUploadField = _interopRequireDefault(require("./ImageUploadField"));
 
-var _index = require("../../index");
-
 var _react3 = require("@emotion/react");
 
+var imageUploadNoImagePreview = 'image-upload-no-image-preview';
+jest.mock('../Image', function () {
+  return function (props) {
+    return (0, _react3.jsx)("img", (0, _extends2["default"])({
+      alt: "mock"
+    }, props));
+  };
+});
 var testLabel = 'test-label';
 var testButtonId = 'image-preview-button';
 var testHelperText = 'test-helper-text';
 var testImageURL = 'test-image-url';
 var testImageURL2 = 'test-image-url2';
 var imageUploadImagePreview = 'image-upload-image-preview';
-var imageUploadNoImagePreview = 'image-upload-no-image-preview';
 var file = new File(['(⌐□_□)'], 'chucknorris.png', {
   type: 'image/png'
 });
@@ -224,10 +229,16 @@ test('should change image if the corresponding menu option clicked', /*#__PURE__
             }
           });
 
-          expect(imagePreview).toBeInTheDocument();
+          _context4.t0 = expect;
+          _context4.next = 14;
+          return _testWrapper.screen.findByTestId(imageUploadImagePreview);
+
+        case 14:
+          _context4.t1 = _context4.sent;
+          (0, _context4.t0)(_context4.t1).toBeInTheDocument();
           expect(imagePreview).toHaveAttribute('src');
 
-        case 13:
+        case 17:
         case "end":
           return _context4.stop();
       }
@@ -273,14 +284,20 @@ test('should call onRemove cb (when provided) when a file is uploaded', /*#__PUR
 
           _userEvent["default"].click(_testWrapper.screen.getByTestId(testButtonId));
 
-          expect(imagePreview).toBeInTheDocument();
+          _context5.t0 = expect;
+          _context5.next = 10;
+          return _testWrapper.screen.findByTestId(imageUploadImagePreview);
+
+        case 10:
+          _context5.t1 = _context5.sent;
+          (0, _context5.t0)(_context5.t1).toBeInTheDocument();
 
           _userEvent["default"].click(_testWrapper.screen.getByText('Remove Image'));
 
           expect(imagePreview).not.toBeInTheDocument();
           expect(testOnRemove).toHaveBeenCalledTimes(1);
 
-        case 11:
+        case 15:
         case "end":
           return _context5.stop();
       }
@@ -429,7 +446,9 @@ test('should show the menu if label clicked when preview image exists', /*#__PUR
 })));
 test('should render node element if passed as default image', function () {
   getComponent({
-    defaultPreviewImage: (0, _react3.jsx)(_index.Image, null)
+    defaultPreviewImage: (0, _react3.jsx)("img", {
+      alt: "mock"
+    })
   });
 
   var img = _testWrapper.screen.getByRole('img');

package/lib/cjs/hooks/index.js

@@ -36,6 +36,13 @@ _Object$defineProperty(exports, "useDeprecationWarning", {
   }
 });
 
+_Object$defineProperty(exports, "useFallbackImage", {
+  enumerable: true,
+  get: function get() {
+    return _useFallbackImage["default"];
+  }
+});
+
 _Object$defineProperty(exports, "useField", {
   enumerable: true,
   get: function get() {
@@ -123,4 +130,6 @@ var _useSelectField = _interopRequireDefault(require("./useSelectField"));
 
 var _useStatusClasses = _interopRequireDefault(require("./useStatusClasses"));
 
-var _useDebounce = _interopRequireDefault(require("./useDebounce"));
+var _useDebounce = _interopRequireDefault(require("./useDebounce"));
+
+var _useFallbackImage = _interopRequireDefault(require("./useFallbackImage"));

package/lib/cjs/hooks/useFallbackImage/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _useFallbackImage["default"];
+  }
+});
+
+var _useFallbackImage = _interopRequireDefault(require("./useFallbackImage"));

package/lib/cjs/hooks/useFallbackImage/useFallbackImage.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
+
+var _react = require("react");
+
+var useFallbackImage = function useFallbackImage(_ref) {
+  var imageSrc = _ref.src,
+      onImageLoad = _ref.onImageLoad,
+      onImageError = _ref.onImageError,
+      fallbackTimeout = _ref.fallbackTimeout,
+      onFallbackTimeout = _ref.onFallbackTimeout;
+  var displayImage = (0, _react.useMemo)(function () {
+    return document.createElement('img');
+  }, []);
+  (0, _react.useEffect)(function () {
+    displayImage.src = imageSrc;
+    displayImage.onload = onImageLoad;
+    displayImage.onerror = onImageError;
+    return function () {
+      displayImage.onload = null;
+      displayImage.onerror = null;
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    var timeoutId = 0;
+    timeoutId = (0, _setTimeout2["default"])(onFallbackTimeout, fallbackTimeout);
+    return function () {
+      return clearTimeout(timeoutId);
+    };
+  }, []);
+  return displayImage;
+};
+
+var _default = useFallbackImage;
+exports["default"] = _default;

package/lib/cjs/hooks/useFallbackImage/useFallbackImage.test.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _reactHooks = require("@testing-library/react-hooks");
+
+var _useFallbackImage = _interopRequireDefault(require("./useFallbackImage"));
+
+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 defaultProps = {
+  src: 'test-src',
+  fallbackImage: 'test-fallback-src',
+  onImageLoad: jest.fn(),
+  onImageError: jest.fn(),
+  fallbackTimeout: 5,
+  onFallbackTimeout: jest.fn()
+};
+test('should return node if all props are correct ', function () {
+  var _renderHook = (0, _reactHooks.renderHook)(function () {
+    return (0, _useFallbackImage["default"])(defaultProps);
+  }),
+      current = _renderHook.result.current;
+
+  expect(current).toBeInstanceOf(HTMLImageElement);
+});
+test('should not trigger onImageLoad if no fallback passed', function () {
+  (0, _reactHooks.renderHook)(function () {
+    return (0, _useFallbackImage["default"])(_objectSpread(_objectSpread({}, defaultProps), {}, {
+      fallbackImage: null
+    }));
+  });
+  expect(defaultProps.onImageLoad).not.toHaveBeenCalled();
+});
+test('should not trigger onImageLoad if component unmounted', function () {
+  var _renderHook2 = (0, _reactHooks.renderHook)(function () {
+    return (0, _useFallbackImage["default"])(_objectSpread(_objectSpread({}, defaultProps), {}, {
+      fallbackImage: null
+    }));
+  }),
+      unmount = _renderHook2.unmount;
+
+  unmount();
+  expect(defaultProps.onImageLoad).not.toHaveBeenCalled();
+});

package/lib/cjs/styles/variants/buttons.js

@@ -223,7 +223,7 @@ var close = _objectSpread(_objectSpread({}, iconButton), {}, {
 
 var accordionHeader = _objectSpread(_objectSpread({}, base), {}, {
   display: 'inline-flex',
-  bg: 'white',
+  bg: 'transparent',
   color: 'neutral.10',
   paddingLeft: '5px',
   paddingRight: '5px',

package/lib/components/CodeView/CodeView.js

@@ -11,7 +11,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _trimInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/trim";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "className", "hasLineNumbers", "hasNoCopyButton", "language"];
+var _excluded = ["children", "className", "hasLineNumbers", "hasNoCopyButton", "language", "Prism"];
 
 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; }
 
@@ -22,7 +22,7 @@ import PropTypes from 'prop-types';
 import { useFocusRing } from '@react-aria/focus';
 import { useHover } from '@react-aria/interactions';
 import { mergeProps } from '@react-aria/utils';
-import Highlight, { defaultProps } from 'prism-react-renderer';
+import Highlight, { defaultProps, Prism } from 'prism-react-renderer';
 import { useStatusClasses } from '../../hooks';
 import { Box, CopyText } from '../..';
 import codeView from '../../styles/variants/codeView';
@@ -38,6 +38,7 @@ var CodeView = /*#__PURE__*/forwardRef(function (props, ref) {
       hasLineNumbers = props.hasLineNumbers,
       hasNoCopyButton = props.hasNoCopyButton,
       language = props.language,
+      customPrism = props.Prism,
       others = _objectWithoutProperties(props, _excluded);
 
   var _useFocusRing = useFocusRing(),
@@ -64,7 +65,8 @@ var CodeView = /*#__PURE__*/forwardRef(function (props, ref) {
   var content = ___EmotionJSX(Highlight, _extends({}, defaultProps, {
     theme: codeView.theme,
     code: (children === null || children === void 0 ? void 0 : _trimInstanceProperty(children).call(children)) || '',
-    language: language
+    language: language,
+    Prism: customPrism || Prism
   }), function (_ref) {
     var className = _ref.className,
         style = _ref.style,
@@ -128,9 +130,14 @@ CodeView.propTypes = {
    * Which programming language the CodeView should use for highlighting. A list of default languages is listed [here](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js).
    *
    *
-   * Additional languages may be added, see [this guidance](https://github.com/FormidableLabs/prism-react-renderer#faq) for more information.
+   * Additional languages may be added, see
+   * [CodeView with additional language](./?path=/docs/codeview--with-additional-language)
+   * for more information.
   */
-  language: PropTypes.string
+  language: PropTypes.string,
+
+  /* Prism object for using instead of Prism from "react-prism-renderer" */
+  Prism: PropTypes.shape({})
 };
 CodeView.defaultProps = {
   language: 'json',

package/lib/components/CodeView/CodeView.stories.js

@@ -1,4 +1,7 @@
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/trim";
 import React from 'react';
+import Prism from 'prismjs';
+import 'prismjs/components/prism-powershell';
 import CodeView from './CodeView';
 import { Text } from '../..';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -15,6 +18,9 @@ export default {
       control: {
         type: 'text'
       }
+    },
+    Prism: {
+      control: 'none'
     }
   },
   parameters: {
@@ -62,4 +68,24 @@ export var WithCustomSize = function WithCustomSize() {
     },
     hasNoCopyButton: true
   }, "\nexport const ChipWithIcon = () => (\n  <>\n    <Chip label=\"Chip with Icon Button\" bg=\"navy\">\n      <IconButton aria-label=\"Clear Chip with Icon Button\" variant=\"inverted\">\n        <Icon icon={Clear} ml=\"xs\" size=\"14px\" />\n      </IconButton>\n    </Chip>\n\n    <div style={{ padding: '5px' }} />\n\n    <Chip label=\"Chip with Icon Button\">\n      <IconButton aria-label=\"Clear Chip with Icon Button\" variant=\"inverted\">\n        <Icon icon={Earth} ml=\"xs\" size=\"14px\" />\n      </IconButton>\n    </Chip>\n\n    <div style={{ padding: '5px' }} />\n\n    <Chip label=\"Chip with Icon\" bg=\"green\">\n      <Icon icon={ContentCopy} ml=\"xs\" size=\"14px\" color=\"white\" />\n    </Chip>\n  </>\n);\n    "));
+};
+export var WithAdditionalLanguage = function WithAdditionalLanguage() {
+  var _context;
+
+  /**
+   * import { CodeView } from "@pingux/astro";
+   * import Prism from 'prismjs';
+   * import 'prismjs/components/prism-powershell';
+   */
+  var powershellCode = _trimInstanceProperty(_context = "\n   Get-WinEvent -FilterHashtable @{\n     LogName='Application'\n     ProviderName='*defrag'\n   }\n ").call(_context);
+
+  return ___EmotionJSX(CodeView, {
+    language: "powershell",
+    Prism: Prism
+  }, powershellCode);
+};
+WithAdditionalLanguage.parameters = {
+  docs: {
+    storyDescription: 'All available languages are listed [here](https://github.com/PrismJS/prism/tree/master/components).'
+  }
 };

package/lib/components/Image/Image.js

@@ -1,11 +1,33 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 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 _excluded = ["className", "isDisabled"];
-import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+
+var _templateObject;
+
+var _excluded = ["className", "fallbackImage", "fallbackTimeout", "isDisabled", "src", "sx"];
+
+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, useRef, useImperativeHandle, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Image as ThemeUIImage } from 'theme-ui';
 import { useHover } from '@react-aria/interactions';
-import { usePropWarning, useStatusClasses } from '../../hooks';
+import { keyframes } from '@emotion/react';
+import { usePropWarning, useStatusClasses, useFallbackImage } from '../../hooks';
+import { Box } from '../../index';
+import { neutral } from '../../styles/colors';
 /**
  * Basic image component.
  * Built on top of [Image from Theme-UI](https://theme-ui.com/components/image/).
@@ -15,9 +37,37 @@ import { usePropWarning, useStatusClasses } from '../../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Image = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
+      fallbackImage = props.fallbackImage,
+      fallbackTimeout = props.fallbackTimeout,
       isDisabled = props.isDisabled,
+      src = props.src,
+      sx = props.sx,
       others = _objectWithoutProperties(props, _excluded);
 
+  var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      isLoading = _useState2[0],
+      setIsLoading = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      loadedSuccessfully = _useState4[0],
+      setLoadedSuccessfully = _useState4[1]; // we need to use useRef here with useState so it will be updated in setTimeout and onload
+  // https://github.com/facebook/react/issues/14010#issuecomment-433788147
+
+
+  var isLoadingRef = useRef(isLoading);
+
+  var setIsLoadingWithRef = function setIsLoadingWithRef(newState) {
+    setIsLoading(newState);
+    isLoadingRef.current = newState;
+  };
+
+  var _useState5 = useState(fallbackImage || src),
+      _useState6 = _slicedToArray(_useState5, 2),
+      imgSrc = _useState6[0],
+      setImgSrc = _useState6[1];
+
   var imgRef = useRef();
   /* istanbul ignore next */
 
@@ -32,16 +82,68 @@ var Image = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var _useStatusClasses = useStatusClasses(className, {
     isDisabled: isDisabled,
-    isHovered: isHovered
+    isHovered: isHovered,
+    isLoading: isLoading
   }),
       classNames = _useStatusClasses.classNames;
 
-  return ___EmotionJSX(ThemeUIImage, _extends({
+  var onImageLoad = function onImageLoad() {
+    if (isLoadingRef !== null && isLoadingRef !== void 0 && isLoadingRef.current) {
+      setIsLoadingWithRef(false);
+      setImgSrc(src);
+      setLoadedSuccessfully(true);
+    }
+  };
+
+  var onImageError = function onImageError() {
+    setIsLoadingWithRef(false);
+    setImgSrc(fallbackImage || null);
+  };
+
+  var onFallbackTimeout = function onFallbackTimeout() {
+    if (isLoadingRef !== null && isLoadingRef !== void 0 && isLoadingRef.current) {
+      setIsLoadingWithRef(false);
+      setImgSrc(fallbackImage || null);
+    }
+  };
+
+  useFallbackImage(_objectSpread({
+    onImageLoad: onImageLoad,
+    onImageError: onImageError,
+    onFallbackTimeout: onFallbackTimeout
+  }, props));
+  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 = {
+    backgroundColor: neutral[90],
+    // 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;
+    return ___EmotionJSX(Box, {
+      sx: skeletonSx,
+      "data-testid": "skeleton-image"
+    }, children);
+  };
+
+  var themeUiImage = ___EmotionJSX(ThemeUIImage, _extends({
     className: classNames,
     ref: imgRef,
     alt: "Image",
-    role: "img"
+    role: "img",
+    src: imgSrc,
+    sx: sx
   }, others, hoverProps));
+
+  if (isLoading || !loadedSuccessfully && !fallbackImage) {
+    return ___EmotionJSX(Skeleton, null);
+  }
+
+  return themeUiImage;
 });
 Image.propTypes = {
   /** The styling variation of the image. */
@@ -53,12 +155,24 @@ Image.propTypes = {
   /**  The HTML element used to render the image. */
   as: PropTypes.string,
 
-  /**  Source of image. */
-  src: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
+  /**  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
 };
 Image.defaultProps = {
   isDisabled: false,
-  as: 'img'
+  as: 'img',
+  fallbackTimeout: 5000
 };
 Image.displayName = 'Image';
 export default Image;

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

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
+import isChromatic from 'chromatic/isChromatic';
 import Image from '.';
+import { chiefIdentityChampions, pingImg } from './imageConstants';
 import { htmlElements } from '../../utils/devUtils/constants/htmlElements';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -24,7 +26,7 @@ export default {
       control: {
         type: 'none'
       },
-      defaultValue: 'data:image/png;base64,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'
+      defaultValue: pingImg
     }
   }
 };
@@ -35,13 +37,13 @@ export var Default = function Default(_ref) {
 };
 export var Avatar = function Avatar() {
   return ___EmotionJSX(Image, {
-    src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAkFBMVEW4Iy/////78/O1Ahu3GSfIam+0ABfqx8mzAA+3HiuyAAD25ufkt7rARE22EiK1Ch68LjnWj5TdqqzOd3yzAA357e79+fm9OEHx3d7mvcDszM7FWWDw19nMcHb14+SzABPUi4/HX2bBRk/Zmp7QfYLJZmzeq63CT1fYlpq+PUbdoqbEVFy8Mj3ATFPRg4flury38LwjAAANQklEQVR4nO2d6XaqOhiGwUQgSBNtgTpQ0ao4tfb+726TMIc5WrV75f2zz1KweUhIvik5iiIlJSUlJSUlJSUlJSUlJSUlJSUlJSUlJSUlJSUlJSUlJSUlJSUlJSUlJSUlJSUlJSUlJSUlJSUlJSUlJSUlJSUlJSUlJSUldSMhDDQCH92K3xPyvw4zPfgw8KNb8kuCiq4yuVvj0W35FeGFqyYK/Ee3plmoTo03HdWcDuBejRUReqnS19dYwZqhAVwNqo3yhOqx8XE8WECt08AZ6cHlbGtlSnwpXjrTHtH0jgKDWsRY8y0GHKM95a555vm0nTCcLl8Jyd+DIH/F+YmXxS6EoQ5+rhvhgv/68sSd2JFQnX5lEHDIfzv5DwhVdZ2OVHTmv9v+/VFKtUsQy+/hyxMvFz0I1UXSU3ZxOVQHz7zk9yF0lbir8Kb4xStp/iMPVR9C1bOjmxByC583m3gPVi9CdRvPmXib//TtiWfSvoQDM77NOGUfTp7ZZisRHiaxTpbX1ImKsY0HqrN7bkCeUCE4EgH2OCgTTlN3F6PVfOrNtuCJl0ImjnCcmzOQf3ZLiJmjhLDm+0/P10gY9tNnifCZ7bNqNRIqYMUT6g9+6/oH95oJFdvhCB279BPVqyH+DSsA2dak7++2EOIJ34n5P4AgBr6pfPKICNvKJQD5C4nmG75PYIttEP5ieCW9VCO4dDEG88ywuhEhGldPNYxN+1pMAm+gzgpmKQT+94YGAXbxgELEf387zb2p5wXbsV8/zBA2lPAXdc9bep4eTM6KkZ/JoP1BGzvrGb1sIVQ0fphG7YbrleUlt1opIcK+PbSc/CuLfOW0zN0/39e0EBrjDb8GL62drYV9iRAG5i7+dt3vVWwj9OfcHx3S3weFZSQlRO+r/OXUAMLjGT8KZqiiicg4838pln5YvBz3WyttqNMvPttGCKxKwsJdKSEsmKuh14js4ieRBscSIvmq4avSqZez1kZIeMOmiZBzjbeAlDow0js/ZV+qr6tRr/hsK+GJ+/UmQi7MePnkX+JETvFdtPmB0iLPVLqrjZAP/qp71EBYHNOVtnukwkCza3q6XtsellUrIf8iHZsIS8+jVrlVzeeHSbvmPd7E3n1IyndlhLAUhatTZt/CXW/AWZ/ZtO97GPnAdYRlA6FOXtJIhHv54CrNWJYtxysIDW4Wj1pWR6jAsr9Vo6SVZNN+bV7LCezn3rRZbV/cHwgaR2nZBKpV8pc0/gv9bWyaaFdyv8+Ly2T1odg1CT9RQlvn/s4HbCQs+SKRnGWpb/fRX+KMBNX5tpnBDQHkRs/AxhgLONzNhLiUoYjmwFpCv2KF8LbANswzxx7b5ZxV6GQMyOQQT2L+WLOP/8U/+rlfcVcj4fIcVWvw8YJhhFK0cLOwOkXExe/c2xDCJI0fOmrmsDS24hRMd8KNnaYCil9FhOi7+AALsyR4Lf7Wh1BQiCP8TjL5n+tLwGUn6GM0q+7KzzTce7vOgh6chRsRwrfiAyxMk3ye0hJKj/SLCG9IL0L3JddiznaICLkMyFfhJeFzXFOhspZehINkpu5IuMxbyFx3RYScQcENQ7P4lgx6rfRChGmCoiPhKO9CcJnjmLAwdF1uLeezeH1cCiFC3a6+6xrCPn3464QDWHPX7QjHje+h+9uEx18gxMWQ81uhE+G62ICKWO1NCfe47q4rCDmI4nroc56x96tz6SA/8d+OkHe3zrm/Al+4NoiZbR0J5xDW33UFoWIvC58OlBSRvPNN6xko7UV4sVHDXdcQ8h62uzUBTV/6Wikp1DNO2ofwFfM+5+0Iy1EBxzpsJyfeawu1EUvstRIuDwpfmnhLQkX7aWlAIlcwr8cRuoNEjjOd/2yGuNKnviEh6hr4EK344AhPJohl274GygmumxOWVr0a9U051RF2rG66JaECPjoAekKr/ZMQKmTROt15mnDZ1TMQKhC3JC4CWxjwOQgVBMav9XFIZ33Njo7nIFSgYXyUgybRj1yMq4p2noIQGYuKFZ51X7Cwr6zgeQZCXE4AW1ZwOq3WY/v6oqsnICSlsLOFNQBIRbnJ3yQs7W1wvv1bkFW39RGEfDLHa6i4EdHDCSFv0ZQSfFfq4YSlcpaxAVIRfP27+HDCUkmSqlupTpvLYnxlEevjCfl9cCU51tq8gvHxhA01KdkPDcU3Gz+cENRYM5x04RXk4YS4YzWNIzrHPpywcwmO07dE4VkIy1tu67QkQoiPJ0R8aLtW+i3yFo+wvPG+a+7kQ8SRegJCBeJNjffLyRFJ5D8DIa3tf98G81Fr5PRNYOV/CkKF7VegOxCUY1IMsh5erFLPiuTXnoUwJU3reSAG9p43eARexFsQ/lyTmWk8bASaXAFfzXNpbGtx7AfdCIk3yuTkMpfEyn0xmueTKXDt5G+KkoH4M3feSGnvTSiz2IuH/p2IdsO8vjsuqr6RU/6pkPwXxWwRzH9lVJREuRXmNRfjECmLggXdecty0bGYV+XPzALho7fO9RVCheb/VHWQsfzThPv2IVisi/prhFypW+UoLR4RpD/z6Q0V4kqgnYqaJ66iseNcX5BtVgRBMOgZ/am8ARHQ/Mi5PixUCMfyi9HUVf/Vgg6CUu0t3ljWrg8inlTcgMaWZY2bbuPD3ctSmtDkyqL2/Sd7ap2UDAV/2XPTtjavuAG9qy3xXXZF4U0keS8XEX7LlyvgIVYTTvsS6kKE/BgMESZjG7BTD4hmvx94x3EmMNE8lpBwtepU09lpMplsgnlFUrjiRW3VYwmRUqZokCcSNX0sYWnDQbO+RULfDyZUtGUrVyqxIyg7EELNBnZa24awRtg/hu+nlxQIEYwimwVCRKqfGEKd94IJjVGOEBHDNA2C8oTIfNOdwcg6RtMYGl/00LDA5LQczOMqCWzSZetihgIUcLGi+yYMk5Zpg/DDsGVACXKlhaGVYaZPTOkWhVJHV0SEE0LyRbfJLE/QzAjxS9KAFbMawYxWCfqxvz6gNb34kDUjtBupuxP6skbWNwODzpnLdC2z6Yfv2aDoNFA9sXhwgVBLrET3PSXELObusNa+0dHJ9rQes9Mywvk7f3ZG2HmU8CUkzLrmRNhDSAYsi+NnvAoCHXY6n4xrMjPxxgAKGAyHB091RzEhq29dvpvmmBoX0TZ42lP0b06Z9zqwFfgx18NHMNP1+QYoCSGxdPqpHn76gtiJrsnBfKwsOF+zjexdy0idv4h7TSkhnRfcbx9CbLOtx4yQJmgdalMj8xQHluwosLNRbAPR9G14M9TMkNnUNI3eExMqhH0KfY0W3dFy7sTBNeijKYZLoPbWkL2Y7YU7ME9IN/zG5waCXUzIUgpRKB1hNTLR2S7R6Zi2FpmD+EnQuTRxfRLC6NN4aNJ+G0RzIVvlSzXb0D4evIqIsPPzRrSrs9yUEH2GfRQ3koHRltMJwo2fPO1OahZSn1uPfQAaZulGSH8+HuWs+KLCnUfYJ8ft5mfuTZ3RyGHnt+wU7eqiqISQPuRkPk8JKUESZqYXjOyIMMmQpC5FKyGzsaPJixVf1GwsoMfeaL5hh6o+g+cKQmOanSSbEbrZ06beqhv3YZI+SBf6dkIQJFts2TAX2sEkppRQzdkfMSELhZ3MWOPoaEhBQlrNzTbfsWn1ngGlmJDNpKnZlRDyDipdpgUJFcONxibbyyWSQ7qSkMYT0lNIf4WQLus0K8IyG31Ps7oF4bAT4VGckE6hUztKlAja0NcTpqfoJoTUorHec6kTRXimiXaOYMRMtrse3Je8h9+5I2bTuVQLG/WqFdNfooRsQd1CZrLduvywEyE1ND55QrqE8DFYYUIa27UANdnYAZpVB379ipLVgm4qTs4dZwYIbTldnPkz84UJqd03tanxR61uogzvxJgQUvMkgWHvH205dZW4Q6vECdkwZZucQqsbbNT5cneX1zEhZMtUnGcGw2Q2MMJvL8kwheQ6QupHnk9sw3IIejnsdP5Qs18lZPbLFJDQezJZXTJrOeV23xkZsreW1kSYuLS1hNSaOUyZHUiC0+ZFXdwlk5R6Tyyu50wW61WUl41mdBrfdy+hMWy86FFAtpbwCKO5OCME0S0pozZQp5HVTYJLoJ9fvHsYb5mPnz8eyE0cDaSwwPpyyr6kU1ElIXWzdGKOxwVCGrvwsKkk2ZmoUIOa72gfHD7Or3c5jp+aGPHG8a80S0B34cY+BVLSVLuzIPGDSAkT74nNvqoTzcrpuhPZRE56eXS8AJvP8G6P3yZ3SXfCUxDEEQUEo0zPYGse3EFy6Buy17PRYDCafcShw00QnOOBhy9BECXVQBRvoyzEeg3iKYRE+7EviVfGjtWKOi70/NCdLBucJbQQgMPV6qzhcNrMndcLgU9IVjCfu4H+d9I/+Ht1iTbTk+wCjD+TT6nYSR73rvcoKvSxBeOudEWvuhXld7rTSPP8yf/vUNdJs+7rGt5dyHYzB+Z/FKLZjb934nl3QeNH+GyLPyHIjqr+/I/fQhrFcPf/8RgNl8npK/yPe5AKiGYApaSkpKSkpKSkpP6K/gG8zOuuFcJIQAAAAABJRU5ErkJggg==",
+    src: pingImg,
     variant: "images.avatar"
   });
 };
 export var CustomSizeAndRadius = function CustomSizeAndRadius() {
   return ___EmotionJSX(Image, {
-    src: "https://images.pingidentity.com/image/upload/f_auto,q_auto,w_auto,c_scale/ping_dam/content/dam/ping-6-2-assets/images/company/our-company/chief-identity-champions.png",
+    src: chiefIdentityChampions,
     sx: {
       width: '70px',
       height: '70px',
@@ -52,7 +54,40 @@ export var CustomSizeAndRadius = function CustomSizeAndRadius() {
 };
 export var Disabled = function Disabled() {
   return ___EmotionJSX(Image, {
-    src: "data:image/png;base64,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",
+    src: pingImg,
     isDisabled: true
   });
+};
+export var FallbackImage = function FallbackImage() {
+  return ___EmotionJSX(Image, {
+    fallbackImage: pingImg,
+    src: "https://deelay.me/7000/https://picsum.photos/150/150",
+    sx: {
+      width: '150px',
+      height: '150px'
+    }
+  });
+};
+export var WithSkeletonLoadSuccess = function WithSkeletonLoadSuccess(_ref2) {
+  var useLocalSrc = _ref2.useLocalSrc;
+  var imageSrc = useLocalSrc ? pingImg : 'https://deelay.me/3000/https://picsum.photos/150/150';
+  return ___EmotionJSX(Image, {
+    src: imageSrc,
+    sx: {
+      width: '150px',
+      height: '150px'
+    }
+  });
+};
+WithSkeletonLoadSuccess.args = {
+  useLocalSrc: isChromatic()
+};
+export var WithSkeletonLoadTimeout = function WithSkeletonLoadTimeout() {
+  return ___EmotionJSX(Image, {
+    src: "https://deelay.me/7000/https://picsum.photos/150/150",
+    sx: {
+      width: '150px',
+      height: '150px'
+    }
+  });
 };