@pingux/astro 1.1.1-alpha.1 → 1.1.1-alpha.5

package/lib/components/IconButton/IconButton.stories.js

@@ -0,0 +1,67 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import CreateIcon from 'mdi-react/CreateIcon';
+import IconButton from '.';
+import Icon from '../Icon';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Icon Button',
+  component: IconButton,
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  },
+  argTypes: {
+    icon: {
+      control: {
+        type: 'none'
+      },
+      defaultValue: CreateIcon,
+      description: 'The icon to render. List of icons at https://materialdesignicons.com/'
+    },
+    title: {
+      control: {
+        type: 'text'
+      }
+    },
+    'aria-label': {
+      control: {
+        type: 'text'
+      }
+    },
+    isDisabled: {},
+    variant: {
+      control: {
+        type: 'select',
+        options: ['iconButton', 'inverted', 'square', 'invertedSquare']
+      },
+      defaultValue: 'iconButton'
+    }
+  }
+};
+export var Default = function Default(args) {
+  return ___EmotionJSX(IconButton, _extends({
+    "aria-label": "default icon button"
+  }, args), ___EmotionJSX(Icon, {
+    icon: CreateIcon
+  }));
+};
+export var WithTooltip = function WithTooltip() {
+  return ___EmotionJSX(IconButton, {
+    "aria-label": "icon button with tooltip",
+    title: "Edit"
+  }, ___EmotionJSX(Icon, {
+    icon: CreateIcon
+  }));
+};
+export var Disabled = function Disabled() {
+  return ___EmotionJSX(IconButton, {
+    "aria-label": "disabled icon button",
+    isDisabled: true
+  }, ___EmotionJSX(Icon, {
+    icon: CreateIcon
+  }));
+};

package/lib/components/IconButton/IconButton.test.js

@@ -0,0 +1,132 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import CreateIcon from 'mdi-react/CreateIcon';
+import axeTest from '../../utils/testUtils/testAxe';
+import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
+import IconButton from '.';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var iconTestId = 'test-icon';
+
+var Icon = function Icon(props) {
+  return ___EmotionJSX(CreateIcon, _extends({
+    "data-testid": iconTestId
+  }, props));
+};
+
+var testId = 'test-button';
+var defaultProps = {
+  'data-testid': testId,
+  icon: Icon,
+  'aria-label': 'Create'
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(IconButton, _extends({}, defaultProps, props)));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+axeTest(getComponent);
+test('default icon button', function () {
+  getComponent();
+  var button = screen.getByRole('button');
+  expect(button).toHaveAttribute('data-testid', testId);
+  expect(button).toBeInstanceOf(HTMLButtonElement);
+  expect(button).toBeInTheDocument();
+});
+test('icon button hover', function () {
+  getComponent();
+  var button = screen.getByRole('button');
+  expect(button).not.toHaveClass('is-hovered');
+  userEvent.hover(button);
+  expect(button).toHaveClass('is-hovered');
+  userEvent.unhover(button);
+  expect(button).not.toHaveClass('is-hovered');
+});
+test('icon button press', function () {
+  var onPress = jest.fn();
+  getComponent({
+    onPress: onPress
+  });
+  var button = screen.getByRole('button');
+  expect(onPress).not.toHaveBeenCalled(); // Hold down the button to see pressed styles
+
+  fireEvent.mouseDown(button);
+  expect(button).toHaveClass('is-pressed'); // Finish the click to fire the event handler
+
+  fireEvent.mouseUp(button);
+  expect(button).not.toHaveClass('is-pressed');
+  expect(onPress).toHaveBeenCalledTimes(1);
+});
+test('keyboard icon button press', function () {
+  var onPress = jest.fn();
+  getComponent({
+    onPress: onPress
+  });
+  var button = screen.getByRole('button');
+  expect(onPress).not.toHaveBeenCalled();
+  fireEvent.keyDown(button, {
+    key: 'Enter',
+    code: 13
+  });
+  expect(button).toHaveClass('is-pressed');
+  fireEvent.keyUp(button, {
+    key: 'Enter',
+    code: 13
+  });
+  expect(button).not.toHaveClass('is-pressed');
+  expect(onPress).toHaveBeenCalledTimes(1);
+});
+test('button focus', function () {
+  getComponent();
+  var button = screen.getByRole('button');
+  expect(button).not.toHaveFocus();
+  expect(button).not.toHaveClass('is-focused');
+  userEvent.tab();
+  expect(button).toHaveFocus();
+  expect(button).toHaveClass('is-focused');
+});
+test('tooltip is shown on focus when the prop is passed and not show by default', function () {
+  getComponent({
+    title: 'Test Tooltip'
+  });
+  expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+  userEvent.tab();
+  expect(screen.queryByRole('tooltip')).toBeInTheDocument();
+});
+test('tooltip is shown on hover when the prop is passed and not show by default', function () {
+  getComponent({
+    title: 'Test Tooltip'
+  });
+  expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+  var button = screen.getByRole('button');
+  fireEvent.mouseMove(button);
+  fireEvent.mouseEnter(button);
+  expect(screen.queryByRole('tooltip')).toBeInTheDocument();
+});
+test('tooltip is not shown on hover or focus when prop is not passed', function () {
+  getComponent();
+  var button = screen.getByRole('button');
+  expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+  userEvent.tab();
+  expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+  fireEvent.mouseMove(button);
+  fireEvent.mouseEnter(button);
+  expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+});
+test('the button should be getting aria label attribute', function () {
+  var testLabel = defaultProps['aria-label'];
+  getComponent();
+  expect(screen.getByLabelText(testLabel)).toBeInTheDocument();
+});
+test('show button isDisabled status', function () {
+  var onPress = jest.fn();
+  getComponent({
+    onPress: onPress,
+    isDisabled: true
+  });
+  var button = screen.getByTestId(testId);
+  expect(button).toHaveClass('is-disabled');
+  expect(onPress).not.toHaveBeenCalled();
+});

package/lib/components/IconButton/index.js

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

package/lib/components/Image/Image.js

@@ -0,0 +1,63 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+import React, { forwardRef, useRef, useImperativeHandle } 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';
+/**
+ * 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,
+      isDisabled = props.isDisabled,
+      others = _objectWithoutProperties(props, ["className", "isDisabled"]);
+
+  var imgRef = useRef();
+  /* istanbul ignore next */
+
+  useImperativeHandle(ref, function () {
+    return imgRef.current;
+  });
+  usePropWarning(props, 'disabled', 'isDisabled');
+
+  var _useHover = useHover(props),
+      hoverProps = _useHover.hoverProps,
+      isHovered = _useHover.isHovered;
+
+  var _useStatusClasses = useStatusClasses(className, {
+    isDisabled: isDisabled,
+    isHovered: isHovered
+  }),
+      classNames = _useStatusClasses.classNames;
+
+  return ___EmotionJSX(ThemeUIImage, _extends({
+    className: classNames,
+    ref: imgRef,
+    alt: "Image",
+    role: "img"
+  }, others, hoverProps));
+});
+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. */
+  src: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
+};
+Image.defaultProps = {
+  isDisabled: false,
+  as: 'img'
+};
+Image.displayName = 'Image';
+export default Image;

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

@@ -0,0 +1,58 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import Image from '.';
+import { htmlElements } from '../../utils/devUtils/constants/htmlElements';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Image',
+  component: Image,
+  argTypes: {
+    isDisabled: {},
+    variant: {
+      control: {
+        type: 'none'
+      }
+    },
+    as: {
+      control: {
+        type: 'none',
+        options: htmlElements
+      },
+      defaultValue: 'img'
+    },
+    src: {
+      control: {
+        type: 'none'
+      },
+      defaultValue: 'data:image/png;base64,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'
+    }
+  }
+};
+export var Default = function Default(_ref) {
+  var args = _extends({}, _ref);
+
+  return ___EmotionJSX(Image, args);
+};
+export var Avatar = function Avatar() {
+  return ___EmotionJSX(Image, {
+    src: "data:image/png;base64,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",
+    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",
+    sx: {
+      width: '70px',
+      height: '70px',
+      borderRadius: 8,
+      bg: 'neutral.90'
+    }
+  });
+};
+export var Disabled = function Disabled() {
+  return ___EmotionJSX(Image, {
+    src: "data:image/png;base64,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",
+    isDisabled: true
+  });
+};

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import axeTest from '../../utils/testUtils/testAxe';
+import { render, screen } from '../../utils/testUtils/testWrapper';
+import Image from '.';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(Image, props));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+axeTest(getComponent);
+test('an image is rendered', function () {
+  getComponent();
+  var img = screen.getByRole('img');
+  expect(img).toBeInstanceOf(HTMLImageElement);
+  expect(img).toBeInTheDocument();
+});
+test('image shows disabled status', function () {
+  getComponent({
+    isDisabled: true
+  });
+  var img = screen.getByRole('img');
+  expect(img).toHaveClass('is-disabled');
+});

package/lib/components/Image/index.js

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

package/lib/components/ImageUploadField/ImagePreviewButton.js

@@ -0,0 +1,114 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import ImageFilterHdrIcon from 'mdi-react/ImageFilterHdrIcon';
+import CameraAltIcon from 'mdi-react/CameraAltIcon';
+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, ["defaultPreviewImage", "defaultPreviewNode", "isImageType", "isLoading", "loaderSize", "isMenuOpen", "previewImage", "previewWidth", "widthHeightSx"]);
+
+  var buttonRef = useRef();
+  /* istanbul ignore next */
+
+  useImperativeHandle(ref, function () {
+    return buttonRef.current;
+  });
+
+  var _useFocusRing = useFocusRing(),
+      focusProps = _useFocusRing.focusProps,
+      isFocusVisible = _useFocusRing.isFocusVisible;
+
+  var _useHover = useHover(props),
+      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: {
+      width: previewWidth,
+      height: 'auto',
+      maxHeight: '100%'
+    },
+    alt: "uploaded file preview",
+    "data-testid": "image-upload-image-preview"
+  });
+
+  var loadingPreview = ___EmotionJSX(Box, {
+    variant: "imageUpload.hoveredPreview.wrapper",
+    sx: widthHeightSx,
+    "data-testid": "image-upload-hovered-preview"
+  }, ___EmotionJSX(Loader, {
+    color: isFocusVisible || isMenuOpen ? 'active' : 'white',
+    size: loaderSize,
+    sx: {
+      zIndex: 1
+    },
+    "data-testid": "image-preview-button__loader"
+  }), (previewImage || previewImage === defaultPreviewImage || !isImageType) && ___EmotionJSX(Box, {
+    variant: "imageUpload.hoveredPreview.shaded"
+  }));
+
+  var hoveredPreview = ___EmotionJSX(Box, {
+    variant: "imageUpload.hoveredPreview.wrapper",
+    sx: widthHeightSx,
+    "data-testid": "image-upload-hovered-preview"
+  }, ___EmotionJSX(Icon, {
+    icon: CameraAltIcon,
+    color: isFocusVisible || isMenuOpen ? 'active' : 'white',
+    size: 24,
+    sx: {
+      zIndex: 1
+    }
+  }), (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",
+    sx: widthHeightSx,
+    "data-testid": "image-preview-button",
+    "aria-label": "Image preview"
+  }, mergeProps(focusProps, others)), previewImage && isImageType ? imagePreview : noImagePreview, isLoading && loadingPreview, (isHovered || isFocusVisible) && !isLoading && hoveredPreview));
+});
+ImagePreviewButton.propTypes = {
+  defaultPreviewImage: PropTypes.string,
+  defaultPreviewNode: PropTypes.node,
+  isImageType: PropTypes.bool,
+  isLoading: PropTypes.bool,
+  isMenuOpen: PropTypes.bool,
+  loaderSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  previewImage: PropTypes.string,
+  previewWidth: PropTypes.number,
+  widthHeightSx: PropTypes.shape({
+    height: PropTypes.number,
+    width: PropTypes.number
+  })
+};
+ImagePreviewButton.displayName = 'ImagePreviewButton';
+export default ImagePreviewButton;

package/lib/components/ImageUploadField/ImageUploadField.js

@@ -0,0 +1,136 @@
+import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
+import PropTypes from 'prop-types';
+import ImageUploadFieldBase from './ImageUploadFieldBase';
+import { Item, Menu } from '../../index';
+import { useImageUploadState } from '../../hooks/useImageUploadState';
+import ImagePreviewButton from './ImagePreviewButton';
+import statuses from '../../utils/devUtils/constants/statuses';
+/**
+ * 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;
+  var inputRef = useRef();
+  var state = useImageUploadState(props, inputRef);
+  /* istanbul ignore next */
+
+  useImperativeHandle(ref, function () {
+    return inputRef.current;
+  });
+  var onAction = useCallback(function (action) {
+    // eslint-disable-next-line default-case
+    switch (action) {
+      case 'upload':
+        {
+          state.showFileDialog();
+          break;
+        }
+
+      case 'remove':
+        {
+          state.removePreview();
+
+          if (onRemove && typeof onRemove === 'function') {
+            onRemove();
+          }
+
+          break;
+        }
+    }
+  }, [state.showFileDialog, props === null || props === void 0 ? void 0 : props.onRemove, state.removePreview]);
+  return ___EmotionJSX(ImageUploadFieldBase, _extends({
+    fileName: state.fileName,
+    handleInputChange: state.handleInputChange,
+    handleLabelClick: state.handleLabelClick,
+    handleOpenMenuChange: state.handleOpenMenuChange,
+    isImageType: state.isImageType,
+    isMenuOpen: state.isMenuOpen,
+    ref: inputRef,
+    widthHeightSx: state.widthHeightSx
+  }, props), ___EmotionJSX(ImagePreviewButton, {
+    isLoading: isLoading,
+    loaderSize: loaderSize,
+    previewImage: state.previewImage,
+    defaultPreviewImage: state.defaultPreviewImage,
+    defaultPreviewNode: state.defaultPreviewNode,
+    isImageType: state.isImageType,
+    onPress: state.pressPreviewButton,
+    previewHeight: props === null || props === void 0 ? void 0 : props.previewHeight,
+    previewWidth: props === null || props === void 0 ? void 0 : props.previewWidth,
+    widthHeightSx: state.widthHeightSx
+  }), ___EmotionJSX(Menu, {
+    onAction: onAction
+  }, ___EmotionJSX(Item, {
+    key: "upload"
+  }, uploadItemText), ___EmotionJSX(Item, {
+    key: "remove"
+  }, removeItemText)));
+});
+ImageUploadField.propTypes = {
+  /** 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))
+};
+ImageUploadField.defaultProps = {
+  fileTypes: ['image'],
+  loaderSize: 10,
+  previewHeight: 50,
+  previewWidth: 50,
+  uploadItemText: 'Upload New Image',
+  removeItemText: 'Remove Image'
+};
+ImageUploadField.displayName = 'ImageUploadField';
+export default ImageUploadField;