@pingux/astro 1.42.2 → 2.0.0-alpha.4

package/lib/components/Image/Image.js

@@ -11,115 +11,96 @@ import _taggedTemplateLiteral from "@babel/runtime-corejs3/helpers/esm/taggedTem
 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"];
-
 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, useMemo } from 'react';
+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 { useHover } from '@react-aria/interactions';
-import { keyframes } from '@emotion/react';
-import { usePropWarning, useStatusClasses, useFallbackImage, useAriaLabelWarning } from '../../hooks';
+import { useAriaLabelWarning, useFallbackImage, usePropWarning, useStatusClasses } 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/).
  * If you are looking to add an icon please use [Icon component](/icon--default).
  */
-
 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,
-      alt = props.alt,
-      sx = props.sx,
-      others = _objectWithoutProperties(props, _excluded);
-
+    fallbackImage = props.fallbackImage,
+    fallbackTimeout = props.fallbackTimeout,
+    isDisabled = props.isDisabled,
+    src = props.src,
+    alt = props.alt,
+    sx = props.sx,
+    others = _objectWithoutProperties(props, _excluded);
   var _useState = useState(true),
-      _useState2 = _slicedToArray(_useState, 2),
-      isLoading = _useState2[0],
-      setIsLoading = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isLoading = _useState2[0],
+    setIsLoading = _useState2[1];
   var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      loadedSuccessfully = _useState4[0],
-      setLoadedSuccessfully = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    loadedSuccessfully = _useState4[0],
+    setLoadedSuccessfully = _useState4[1];
   var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      shouldShowFallback = _useState6[0],
-      setShouldShowFallback = _useState6[1]; // we need to use useRef here with useState so it will be updated in setTimeout and onload
+    _useState6 = _slicedToArray(_useState5, 2),
+    shouldShowFallback = _useState6[0],
+    setShouldShowFallback = _useState6[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 setImgSrc = function setImgSrc() {
     if (!loadedSuccessfully && !(isLoadingRef !== null && isLoadingRef !== void 0 && isLoadingRef.current) || shouldShowFallback) {
       return fallbackImage;
     }
-
     return src;
   };
-
   var imgSrc = useMemo(function () {
     return setImgSrc();
   }, [src, isLoading, shouldShowFallback]);
   var imgRef = useRef();
-  /* istanbul ignore next */
 
+  /* istanbul ignore next */
   useImperativeHandle(ref, function () {
     return imgRef.current;
   });
   usePropWarning(props, 'disabled', 'isDisabled');
   var ariaLabel = props['aria-label'] || alt;
   useAriaLabelWarning('Image', ariaLabel);
-
   var _useHover = useHover(props),
-      hoverProps = _useHover.hoverProps,
-      isHovered = _useHover.isHovered;
-
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
   var _useStatusClasses = useStatusClasses(className, {
-    isDisabled: isDisabled,
-    isHovered: isHovered,
-    isLoading: isLoading
-  }),
-      classNames = _useStatusClasses.classNames;
-
+      isDisabled: isDisabled,
+      isHovered: isHovered,
+      isLoading: isLoading
+    }),
+    classNames = _useStatusClasses.classNames;
   var onImageLoad = function onImageLoad() {
     if (isLoadingRef !== null && isLoadingRef !== void 0 && isLoadingRef.current) {
       setIsLoadingWithRef(false);
       setLoadedSuccessfully(true);
     }
   };
-
   var onImageError = function onImageError() {
     setIsLoadingWithRef(false);
     setShouldShowFallback(true);
   };
-
   var onFallbackTimeout = function onFallbackTimeout() {
     if (isLoadingRef !== null && isLoadingRef !== void 0 && isLoadingRef.current) {
       setIsLoadingWithRef(false);
       setShouldShowFallback(true);
     }
   };
-
   useFallbackImage(_objectSpread({
     onImageLoad: onImageLoad,
     onImageError: onImageError,
@@ -134,7 +115,6 @@ var Image = /*#__PURE__*/forwardRef(function (props, ref) {
     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, {
@@ -142,7 +122,6 @@ var Image = /*#__PURE__*/forwardRef(function (props, ref) {
       "data-testid": "skeleton-image"
     }, children);
   };
-
   var themeUiImage = ___EmotionJSX(ThemeUIImage, _extends({
     alt: alt,
     className: classNames,
@@ -151,26 +130,20 @@ var Image = /*#__PURE__*/forwardRef(function (props, ref) {
     src: imgSrc,
     sx: sx
   }, others, hoverProps));
-
   if (isLoading || !loadedSuccessfully && !fallbackImage) {
     return ___EmotionJSX(Skeleton, null);
   }
-
   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].
@@ -178,15 +151,12 @@ Image.propTypes = {
    * 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,
-
   /** Defines a string value that labels the current element. */
   'aria-label': PropTypes.string
 };

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

@@ -1,11 +1,12 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { useState } from 'react';
 import isChromatic from 'chromatic/isChromatic';
-import Image from '.';
-import { chiefIdentityChampions, pingImg } from '../../utils/devUtils/constants/images';
-import { htmlElements } from '../../utils/devUtils/constants/htmlElements';
 import { Box, Button } from '../../index';
+import { htmlElements } from '../../utils/devUtils/constants/htmlElements';
+import { chiefIdentityChampions, pingImg } from '../../utils/devUtils/constants/images';
+import Image from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Image',
@@ -33,8 +34,7 @@ export default {
   }
 };
 export var Default = function Default(_ref) {
-  var args = _extends({}, _ref);
-
+  var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return ___EmotionJSX(Image, _extends({}, args, {
     alt: "Ping identity square logo"
   }));
@@ -103,15 +103,13 @@ export var WithSkeletonLoadTimeout = function WithSkeletonLoadTimeout() {
 };
 export var UpdatingImageSrc = function UpdatingImageSrc() {
   var _useState = useState(chiefIdentityChampions),
-      _useState2 = _slicedToArray(_useState, 2),
-      image = _useState2[0],
-      setImage = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    image = _useState2[0],
+    setImage = _useState2[1];
   var handleButtonPress = function handleButtonPress() {
     var src = image === pingImg ? chiefIdentityChampions : pingImg;
     setImage(src);
   };
-
   return ___EmotionJSX(Box, {
     sx: {
       width: '200px'

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

@@ -8,11 +8,8 @@ import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/obje
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-
 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 from 'react';
 import { act } from '@testing-library/react';
 import axeTest from '../../utils/testUtils/testAxe';
@@ -26,18 +23,15 @@ 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 ? render : _ref$renderFn;
-
+    _ref$renderFn = _ref.renderFn,
+    renderFn = _ref$renderFn === void 0 ? render : _ref$renderFn;
   return renderFn(___EmotionJSX(Image, _extends({}, defaultProps, props)));
-}; // Need to be added to each test file to test accessibility using axe.
-
+};
 
+// Need to be added to each test file to test accessibility using axe.
 axeTest(getComponent);
 var fallbackImageObj = null;
 jest.mock('../../hooks/useFallbackImage', function () {
@@ -87,10 +81,8 @@ test('image with alt text', function () {
 });
 test('image source is able to be changed', function () {
   var src2 = 'second-src';
-
   var _getComponent = getComponent(),
-      rerender = _getComponent.rerender;
-
+    rerender = _getComponent.rerender;
   act(function () {
     fallbackImageObj.onImageLoad();
   });

package/lib/components/ImageUploadField/ImagePreviewButton.js

@@ -2,49 +2,42 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["defaultPreviewImage", "defaultPreviewNode", "isImageType", "isLoading", "loaderSize", "isMenuOpen", "previewImage", "previewWidth", "widthHeightSx"];
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
-import ImageFilterHdrIcon from 'mdi-react/ImageFilterHdrIcon';
+import { mergeProps, useFocusRing } from 'react-aria';
+import { useHover } from '@react-aria/interactions';
 import CameraAltIcon from 'mdi-react/CameraAltIcon';
+import ImageFilterHdrIcon from 'mdi-react/ImageFilterHdrIcon';
 import PropTypes from 'prop-types';
-import { mergeProps } from '@react-aria/utils';
-import { useHover } from '@react-aria/interactions';
-import { useFocusRing } from '@react-aria/focus';
 import { Box, Button, Icon, Image } from '../../index';
 import Loader from '../Loader';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var ImagePreviewButton = /*#__PURE__*/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 = _objectWithoutProperties(props, _excluded);
-
+    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 = _objectWithoutProperties(props, _excluded);
   var buttonRef = useRef();
   /* istanbul ignore next */
-
   useImperativeHandle(ref, function () {
     return buttonRef.current;
   });
-
   var _useFocusRing = useFocusRing(),
-      focusProps = _useFocusRing.focusProps,
-      isFocusVisible = _useFocusRing.isFocusVisible;
-
+    focusProps = _useFocusRing.focusProps,
+    isFocusVisible = _useFocusRing.isFocusVisible;
   var _useHover = useHover(props),
-      hoverProps = _useHover.hoverProps,
-      isHovered = _useHover.isHovered;
-
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
   var noImagePreview = defaultPreviewNode || ___EmotionJSX(Icon, {
     icon: ImageFilterHdrIcon,
     color: "neutral.60",
     size: 24,
     "data-testid": "image-upload-no-image-preview"
   });
-
   var imagePreview = ___EmotionJSX(Image, {
     src: previewImage,
     sx: {
@@ -55,7 +48,6 @@ var ImagePreviewButton = /*#__PURE__*/forwardRef(function (props, ref) {
     alt: "uploaded file preview",
     "data-testid": "image-upload-image-preview"
   });
-
   var loadingPreview = ___EmotionJSX(Box, {
     variant: "imageUpload.hoveredPreview.wrapper",
     sx: widthHeightSx,
@@ -70,7 +62,6 @@ var ImagePreviewButton = /*#__PURE__*/forwardRef(function (props, ref) {
   }), (previewImage || previewImage === defaultPreviewImage || !isImageType) && ___EmotionJSX(Box, {
     variant: "imageUpload.hoveredPreview.shaded"
   }));
-
   var hoveredPreview = ___EmotionJSX(Box, {
     variant: "imageUpload.hoveredPreview.wrapper",
     sx: widthHeightSx,
@@ -85,13 +76,12 @@ var ImagePreviewButton = /*#__PURE__*/forwardRef(function (props, ref) {
   }), (previewImage || previewImage === defaultPreviewImage || !isImageType) && ___EmotionJSX(Box, {
     variant: "imageUpload.hoveredPreview.shaded"
   }));
-
   return ___EmotionJSX(Box, _extends({
     tabindex: 0,
     sx: widthHeightSx
   }, hoverProps), ___EmotionJSX(Button, _extends({
     ref: buttonRef,
-    variant: "imageUpload",
+    variant: "variants.imageUpload.button",
     sx: widthHeightSx,
     "data-testid": "image-preview-button",
     "aria-label": "Image preview"

package/lib/components/ImageUploadField/ImageUploadField.js

@@ -9,36 +9,33 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
-
 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, useCallback, useImperativeHandle, useRef } from 'react';
-import PropTypes from 'prop-types';
 import { VisuallyHidden } from '@react-aria/visually-hidden';
+import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
-import { Item, Menu } from '../../';
+import { Item, Menu } from '../..';
+import { useImageUploadState } from '../../hooks/useImageUploadState';
+import statuses from '../../utils/devUtils/constants/statuses';
 import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
+import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
 import ImagePreviewButton from './ImagePreviewButton';
 import ImageUploadFieldBase from './ImageUploadFieldBase';
-import statuses from '../../utils/devUtils/constants/statuses';
-import { useImageUploadState } from '../../hooks/useImageUploadState';
+
 /**
  * The Image Upload Field component gives users the ability to upload a file (image by default).
  */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var ImageUploadField = /*#__PURE__*/forwardRef(function (props, ref) {
   var isLoading = props.isLoading,
-      loaderSize = props.loaderSize,
-      onRemove = props.onRemove,
-      removeItemText = props.removeItemText,
-      uploadItemText = props.uploadItemText;
+    loaderSize = props.loaderSize,
+    onRemove = props.onRemove,
+    removeItemText = props.removeItemText,
+    uploadItemText = props.uploadItemText;
   var inputRef = useRef();
-  var state = useImageUploadState(props, inputRef);
+  var state = useImageUploadState(inputRef, props);
   /* istanbul ignore next */
-
   useImperativeHandle(ref, function () {
     return inputRef.current;
   });
@@ -51,15 +48,12 @@ var ImageUploadField = /*#__PURE__*/forwardRef(function (props, ref) {
           state.showFileDialog();
           break;
         }
-
       case 'remove':
         {
           state.removePreview();
-
           if (onRemove && typeof onRemove === 'function') {
             onRemove();
           }
-
           break;
         }
     }
@@ -100,56 +94,43 @@ var ImageUploadField = /*#__PURE__*/forwardRef(function (props, ref) {
     id: statusId
   }, state.isMenuOpen && 'Menu pop up expanded'));
 });
-ImageUploadField.propTypes = _objectSpread({
+ImageUploadField.propTypes = _objectSpread(_objectSpread({
   /** Image preview (controlled), used to represent the current image state. */
   previewImage: PropTypes.string,
-
   /** Text that renders in the upload menu item. */
   uploadItemText: PropTypes.string,
-
   /** Text that renders in the remove menu item. */
   removeItemText: PropTypes.string,
-
   /** Default image preview (uncontrolled), used when no previewImage is present. */
   defaultPreviewImage: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-
   /** An array of accepted file types.
    * (according to the https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#types ) */
   fileTypes: PropTypes.arrayOf(PropTypes.oneOf(['application', 'audio', 'example', 'application', 'image', 'model', 'text', 'video'])),
-
   /** Text to display after the radio group label. Useful for errors or other info. */
   helperText: PropTypes.node,
-
   /** Determines whether the loading indicator is shown. */
   isLoading: PropTypes.bool,
-
   /** Defines a string value that labels the current element. */
   label: PropTypes.string,
-
   /** The handler that is called when the input file is added.
    *
    * `(event: InputEvent) => void`
    * */
   onChange: PropTypes.func,
-
   /** Loading indicator size */
   loaderSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
   /** The handler that is called when the file is removed.
    *
    * `(event: InputEvent) => void`
    * */
   onRemove: PropTypes.func,
-
   /** Define component height */
   previewHeight: PropTypes.number,
-
   /** Define component height */
   previewWidth: PropTypes.number,
-
   /** Determines the helper text styling. */
   status: PropTypes.oneOf(_Object$values(statuses))
-}, ariaAttributesBasePropTypes);
+}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
 ImageUploadField.defaultProps = {
   fileTypes: ['image'],
   loaderSize: 10,