@pingux/astro 1.27.0-alpha.21 → 1.27.0-alpha.22

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

@@ -1,185 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-
-exports["default"] = exports.WithSkeletonLoadTimeout = exports.WithSkeletonLoadSuccess = exports.UpdatingImageSrc = exports.FallbackImage = exports.Disabled = exports.Default = exports.CustomSizeAndRadius = exports.Avatar = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _isChromatic = _interopRequireDefault(require("chromatic/isChromatic"));
-
-var _ = _interopRequireDefault(require("."));
-
-var _images = require("../../utils/devUtils/constants/images");
-
-var _htmlElements = require("../../utils/devUtils/constants/htmlElements");
-
-var _index = require("../../index");
-
-var _react2 = require("@emotion/react");
-
-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; }
-
-var _default = {
-  title: 'Image',
-  component: _["default"],
-  argTypes: {
-    isDisabled: {},
-    variant: {
-      control: {
-        type: 'none'
-      }
-    },
-    as: {
-      control: {
-        type: 'none',
-        options: _htmlElements.htmlElements
-      },
-      defaultValue: 'img'
-    },
-    src: {
-      control: {
-        type: 'none'
-      },
-      defaultValue: _images.pingImg
-    }
-  }
-};
-exports["default"] = _default;
-
-var Default = function Default(_ref) {
-  var args = (0, _extends2["default"])({}, _ref);
-  return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, args, {
-    alt: "Ping identity square logo"
-  }));
-};
-
-exports.Default = Default;
-
-var Avatar = function Avatar() {
-  return (0, _react2.jsx)(_["default"], {
-    src: _images.pingImg,
-    variant: "images.avatar",
-    alt: "Ping identity round avatar"
-  });
-};
-
-exports.Avatar = Avatar;
-
-var CustomSizeAndRadius = function CustomSizeAndRadius() {
-  return (0, _react2.jsx)(_["default"], {
-    src: _images.chiefIdentityChampions,
-    sx: {
-      width: '70px',
-      height: '70px',
-      borderRadius: 8,
-      bg: 'neutral.90'
-    },
-    alt: "Terry Crews in a red suite"
-  });
-};
-
-exports.CustomSizeAndRadius = CustomSizeAndRadius;
-
-var Disabled = function Disabled() {
-  return (0, _react2.jsx)(_["default"], {
-    src: _images.pingImg,
-    isDisabled: true,
-    alt: "Ping identity square logo"
-  });
-};
-
-exports.Disabled = Disabled;
-
-var FallbackImage = function FallbackImage() {
-  return (0, _react2.jsx)(_["default"], {
-    fallbackImage: _images.pingImg,
-    src: "https://deelay.me/7000/https://picsum.photos/150/150",
-    sx: {
-      width: '150px',
-      height: '150px'
-    },
-    alt: "Random image"
-  });
-};
-
-exports.FallbackImage = FallbackImage;
-
-var WithSkeletonLoadSuccess = function WithSkeletonLoadSuccess(_ref2) {
-  var useLocalSrc = _ref2.useLocalSrc;
-  var imageSrc = useLocalSrc ? _images.pingImg : 'https://deelay.me/3000/https://picsum.photos/150/150';
-  return (0, _react2.jsx)(_["default"], {
-    src: imageSrc,
-    sx: {
-      width: '150px',
-      height: '150px'
-    },
-    alt: "Random image"
-  });
-};
-
-exports.WithSkeletonLoadSuccess = WithSkeletonLoadSuccess;
-WithSkeletonLoadSuccess.args = {
-  useLocalSrc: (0, _isChromatic["default"])()
-};
-
-var WithSkeletonLoadTimeout = function WithSkeletonLoadTimeout() {
-  return (0, _react2.jsx)(_["default"], {
-    src: "https://deelay.me/7000/https://picsum.photos/150/150",
-    sx: {
-      width: '150px',
-      height: '150px'
-    },
-    alt: "Random image"
-  });
-};
-
-exports.WithSkeletonLoadTimeout = WithSkeletonLoadTimeout;
-
-var UpdatingImageSrc = function UpdatingImageSrc() {
-  var _useState = (0, _react.useState)(_images.chiefIdentityChampions),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      image = _useState2[0],
-      setImage = _useState2[1];
-
-  var handleButtonPress = function handleButtonPress() {
-    var src = image === _images.pingImg ? _images.chiefIdentityChampions : _images.pingImg;
-    setImage(src);
-  };
-
-  return (0, _react2.jsx)(_index.Box, {
-    sx: {
-      width: '200px'
-    }
-  }, (0, _react2.jsx)(_index.Button, {
-    onPress: handleButtonPress
-  }, "Change Image"), (0, _react2.jsx)(_["default"], {
-    src: image,
-    sx: {
-      width: '200px',
-      height: '200px',
-      mt: '25px'
-    },
-    alt: image === _images.pingImg ? 'Ping identity square logo' : 'Terry Crews in a red suite'
-  }));
-};
-
-exports.UpdatingImageSrc = UpdatingImageSrc;

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

@@ -1,208 +0,0 @@
-"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 _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 _ = _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; }
-
-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 skeletonImageId = 'skeleton-image';
-var defaultProps = {
-  src: testSrc,
-  fallbackImage: testFallbackSrc
-};
-
-var getComponent = function getComponent() {
-  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      _ref$renderFn = _ref.renderFn,
-      renderFn = _ref$renderFn === void 0 ? _testWrapper.render : _ref$renderFn;
-
-  return renderFn((0, _react3.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props)));
-}; // Need to be added to each test file to test accessibility using axe.
-
-
-(0, _testAxe["default"])(getComponent);
-var fallbackImageObj = null;
-jest.mock('../../hooks/useFallbackImage', function () {
-  return function (props) {
-    fallbackImageObj = _objectSpread({}, props);
-    return [];
-  };
-});
-test('an image is rendered', function () {
-  getComponent();
-  (0, _react2.act)(function () {
-    fallbackImageObj.onImageLoad();
-  });
-
-  var img = _testWrapper.screen.getByRole('img');
-
-  expect(img).toBeInstanceOf(HTMLImageElement);
-  expect(img).toBeInTheDocument();
-});
-test('an image is rendered with no fallback', function () {
-  getComponent({
-    fallbackImage: null
-  });
-  (0, _react2.act)(function () {
-    fallbackImageObj.onImageLoad();
-  });
-
-  var img = _testWrapper.screen.getByRole('img');
-
-  expect(img).toBeInstanceOf(HTMLImageElement);
-  expect(img).toBeInTheDocument();
-});
-test('image shows disabled status', function () {
-  getComponent({
-    isDisabled: true
-  });
-  (0, _react2.act)(function () {
-    fallbackImageObj.onImageLoad();
-  });
-
-  var img = _testWrapper.screen.getByRole('img');
-
-  expect(img).toHaveClass('is-disabled');
-});
-test('image with alt text', function () {
-  getComponent({
-    alt: 'Test'
-  });
-  (0, _react2.act)(function () {
-    fallbackImageObj.onImageLoad();
-  });
-  expect(_testWrapper.screen.getByAltText('Test')).toBeInTheDocument();
-});
-test('image source is able to be changed', function () {
-  var src2 = 'second-src';
-
-  var _getComponent = getComponent(),
-      rerender = _getComponent.rerender;
-
-  (0, _react2.act)(function () {
-    fallbackImageObj.onImageLoad();
-  });
-  expect(_testWrapper.screen.getByRole('img')).toHaveAttribute('src', testSrc);
-  getComponent({
-    src: src2
-  }, {
-    renderFn: rerender
-  });
-  (0, _react2.act)(function () {
-    fallbackImageObj.onImageLoad();
-  });
-  expect(_testWrapper.screen.getByRole('img')).toHaveAttribute('src', src2);
-});
-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();
-    });
-    expect(_testWrapper.screen.getByRole('img')).toHaveAttribute('src', testSrc);
-  });
-  test('image component will use fallbackImg if src loaded with error', function () {
-    getComponent();
-    (0, _react2.act)(function () {
-      fallbackImageObj.onImageError();
-    });
-
-    var img = _testWrapper.screen.getByRole('img');
-
-    expect(img).toHaveAttribute('src', testFallbackSrc);
-  });
-  test('image component will use fallbackImg if src timed out', function () {
-    getComponent();
-    (0, _react2.act)(function () {
-      fallbackImageObj.onFallbackTimeout();
-    });
-
-    var img = _testWrapper.screen.getByRole('img');
-
-    expect(img).toHaveAttribute('src', testFallbackSrc);
-  });
-  test('if image loads after timeout src still be the fallback', function () {
-    getComponent();
-    (0, _react2.act)(function () {
-      fallbackImageObj.onFallbackTimeout();
-      fallbackImageObj.onImageLoad();
-    });
-
-    var img = _testWrapper.screen.getByRole('img');
-
-    expect(img).toHaveAttribute('src', testFallbackSrc);
-  });
-  test('if image loads before timeout src still be the the origin one', function () {
-    getComponent();
-    (0, _react2.act)(function () {
-      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
-    });
-    expect(_testWrapper.screen.getByTestId(skeletonImageId)).toBeInTheDocument();
-    (0, _react2.act)(function () {
-      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
-    });
-    (0, _react2.act)(function () {
-      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
-    });
-    (0, _react2.act)(function () {
-      fallbackImageObj.onFallbackTimeout();
-    });
-    expect(_testWrapper.screen.getByTestId(skeletonImageId)).toBeInTheDocument();
-  });
-});

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

@@ -1,18 +0,0 @@
-"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 _Image["default"];
-  }
-});
-
-var _Image = _interopRequireDefault(require("./Image"));

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

@@ -1,146 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-
-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 _ImageFilterHdrIcon = _interopRequireDefault(require("mdi-react/ImageFilterHdrIcon"));
-
-var _CameraAltIcon = _interopRequireDefault(require("mdi-react/CameraAltIcon"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _utils = require("@react-aria/utils");
-
-var _interactions = require("@react-aria/interactions");
-
-var _focus = require("@react-aria/focus");
-
-var _index = require("../../index");
-
-var _Loader = _interopRequireDefault(require("../Loader"));
-
-var _react2 = require("@emotion/react");
-
-var _excluded = ["defaultPreviewImage", "defaultPreviewNode", "isImageType", "isLoading", "loaderSize", "isMenuOpen", "previewImage", "previewWidth", "widthHeightSx"];
-
-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; }
-
-var ImagePreviewButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var defaultPreviewImage = props.defaultPreviewImage,
-      defaultPreviewNode = props.defaultPreviewNode,
-      isImageType = props.isImageType,
-      isLoading = props.isLoading,
-      loaderSize = props.loaderSize,
-      isMenuOpen = props.isMenuOpen,
-      previewImage = props.previewImage,
-      previewWidth = props.previewWidth,
-      widthHeightSx = props.widthHeightSx,
-      others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var buttonRef = (0, _react.useRef)();
-  /* istanbul ignore next */
-
-  (0, _react.useImperativeHandle)(ref, function () {
-    return buttonRef.current;
-  });
-
-  var _useFocusRing = (0, _focus.useFocusRing)(),
-      focusProps = _useFocusRing.focusProps,
-      isFocusVisible = _useFocusRing.isFocusVisible;
-
-  var _useHover = (0, _interactions.useHover)(props),
-      hoverProps = _useHover.hoverProps,
-      isHovered = _useHover.isHovered;
-
-  var noImagePreview = defaultPreviewNode || (0, _react2.jsx)(_index.Icon, {
-    icon: _ImageFilterHdrIcon["default"],
-    color: "neutral.60",
-    size: 24,
-    "data-testid": "image-upload-no-image-preview"
-  });
-  var imagePreview = (0, _react2.jsx)(_index.Image, {
-    src: previewImage,
-    sx: {
-      width: previewWidth,
-      height: 'auto',
-      maxHeight: '100%'
-    },
-    alt: "uploaded file preview",
-    "data-testid": "image-upload-image-preview"
-  });
-  var loadingPreview = (0, _react2.jsx)(_index.Box, {
-    variant: "imageUpload.hoveredPreview.wrapper",
-    sx: widthHeightSx,
-    "data-testid": "image-upload-hovered-preview"
-  }, (0, _react2.jsx)(_Loader["default"], {
-    color: isFocusVisible || isMenuOpen ? 'active' : 'white',
-    size: loaderSize,
-    sx: {
-      zIndex: 1
-    },
-    "data-testid": "image-preview-button__loader"
-  }), (previewImage || previewImage === defaultPreviewImage || !isImageType) && (0, _react2.jsx)(_index.Box, {
-    variant: "imageUpload.hoveredPreview.shaded"
-  }));
-  var hoveredPreview = (0, _react2.jsx)(_index.Box, {
-    variant: "imageUpload.hoveredPreview.wrapper",
-    sx: widthHeightSx,
-    "data-testid": "image-upload-hovered-preview"
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: _CameraAltIcon["default"],
-    color: isFocusVisible || isMenuOpen ? 'active' : 'white',
-    size: 24,
-    sx: {
-      zIndex: 1
-    }
-  }), (previewImage || previewImage === defaultPreviewImage || !isImageType) && (0, _react2.jsx)(_index.Box, {
-    variant: "imageUpload.hoveredPreview.shaded"
-  }));
-  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
-    tabindex: 0,
-    sx: widthHeightSx
-  }, hoverProps), (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
-    ref: buttonRef,
-    variant: "imageUpload",
-    sx: widthHeightSx,
-    "data-testid": "image-preview-button",
-    "aria-label": "Image preview"
-  }, (0, _utils.mergeProps)(focusProps, others)), previewImage && isImageType ? imagePreview : noImagePreview, isLoading && loadingPreview, (isHovered || isFocusVisible) && !isLoading && hoveredPreview));
-});
-ImagePreviewButton.propTypes = {
-  defaultPreviewImage: _propTypes["default"].string,
-  defaultPreviewNode: _propTypes["default"].node,
-  isImageType: _propTypes["default"].bool,
-  isLoading: _propTypes["default"].bool,
-  isMenuOpen: _propTypes["default"].bool,
-  loaderSize: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
-  previewImage: _propTypes["default"].string,
-  previewWidth: _propTypes["default"].number,
-  widthHeightSx: _propTypes["default"].shape({
-    height: _propTypes["default"].number,
-    width: _propTypes["default"].number
-  })
-};
-ImagePreviewButton.displayName = 'ImagePreviewButton';
-var _default = ImagePreviewButton;
-exports["default"] = _default;