@pingux/astro 1.27.0-alpha.24 → 1.27.0-alpha.26

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,95 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "icon", "iconProps", "onAction"];
+import React, { forwardRef, useRef, useImperativeHandle, useCallback } from 'react';
+import { useBreadcrumbs } from '@react-aria/breadcrumbs';
+import PropTypes from 'prop-types';
+import { mergeProps } from '@react-aria/utils';
+import { Box, Icon } from '../../index';
+import { usePropWarning } from '../../hooks/';
+import BreadcrumbItem from './BreadcrumbItem';
+/**
+ * Breadcrumbs component wrapping an array of `BreadcrumbItem` elements and icon,
+ * which will be rendered between each node, sans last-child
+ *
+ * Utilizes [useBreadcrumbs](https://react-spectrum.adobe.com/react-aria/useBreadcrumbs.html) from React-Aria.
+ * */
+
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var Breadcrumbs = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+      icon = props.icon,
+      iconProps = props.iconProps,
+      onAction = props.onAction,
+      others = _objectWithoutProperties(props, _excluded); // the following filters undefined values passed as a child
+
+
+  var filteredChildren = _Array$isArray(children) ? _filterInstanceProperty(children).call(children, function (child) {
+    return child;
+  }) : children;
+
+  var _useBreadcrumbs = useBreadcrumbs(props),
+      wrapperProps = _useBreadcrumbs.navProps;
+
+  var breadcrumbsRef = useRef();
+  usePropWarning(props, 'disabled', 'isDisabled');
+  /* istanbul ignore next */
+
+  useImperativeHandle(ref, function () {
+    return breadcrumbsRef.current;
+  });
+  var createBreadcrumb = useCallback(function (child, idx) {
+    var isCurrentItem = _Array$isArray(filteredChildren) && filteredChildren.length > 1 ? idx === children.length - 1 : true;
+    return ___EmotionJSX(Box, {
+      isRow: true,
+      sx: {
+        alignItems: 'center',
+        minHeight: 42
+      },
+      as: "li",
+      key: "li-".concat(child.key)
+    }, ___EmotionJSX(BreadcrumbItem, _extends({
+      "data-id": child['data-id'],
+      isCurrent: isCurrentItem,
+      onAction: onAction,
+      actionKey: child.key,
+      variant: "text.breadcrumbLink"
+    }, child.props), child.props.children), icon && !isCurrentItem && ___EmotionJSX(Icon, _extends({
+      "aria-hidden": "true",
+      icon: icon,
+      mx: 5,
+      size: 16
+    }, iconProps)));
+  }, [children.length, filteredChildren, icon, iconProps, onAction]);
+  return ___EmotionJSX("nav", null, ___EmotionJSX(Box, _extends({
+    ref: breadcrumbsRef,
+    isRow: true,
+    sx: {
+      paddingInlineStart: 'unset'
+    },
+    as: "ol"
+  }, mergeProps(wrapperProps, others)), _Array$isArray(filteredChildren) ? _mapInstanceProperty(filteredChildren).call(filteredChildren, createBreadcrumb) : createBreadcrumb(children)));
+});
+Breadcrumbs.propTypes = {
+  /** The icon to render in between each node. */
+  icon: PropTypes.elementType,
+
+  /** Props object passed along to the Icon component. */
+  iconProps: PropTypes.shape({}),
+
+  /** Whether the Breadcrumbs are disabled. */
+  isDisabled: PropTypes.bool,
+
+  /** Defines a string value that labels the current element. */
+  'aria-label': PropTypes.string,
+
+  /** Called when an item is acted upon (usually selection via press). */
+
+  /** (key: Key) => void. */
+  onAction: PropTypes.func
+};
+Breadcrumbs.displayName = 'Breadcrumbs';
+export default Breadcrumbs;

package/lib/components/Breadcrumbs/Breadcrumbs.stories.js

@@ -0,0 +1,72 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { Item } from '@react-stately/collections';
+import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
+import Breadcrumbs from './Breadcrumbs';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Breadcrumbs',
+  component: Breadcrumbs,
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  },
+  argTypes: {
+    icon: {
+      control: {
+        type: 'none'
+      },
+      defaultValue: ChevronRightIcon,
+      description: 'The icon to render. List of icons at https://materialdesignicons.com/'
+    },
+    iconProps: {
+      control: {
+        type: 'none'
+      }
+    }
+  }
+};
+export var Default = function Default(args) {
+  var onAction = function onAction(key) {
+    return action("onPress ".concat(key));
+  };
+
+  return ___EmotionJSX(Breadcrumbs, _extends({
+    onAction: onAction
+  }, args), ___EmotionJSX(Item, {
+    key: "home",
+    "aria-label": "home",
+    variant: "buttons.link",
+    "data-id": "home",
+    href: "https://www.pingidentity.com"
+  }, "Home"), ___EmotionJSX(Item, {
+    key: "trendy",
+    "aria-label": "trendy",
+    variant: "buttons.link",
+    "data-id": "trendy",
+    href: "https://www.pingidentity.com"
+  }, "Trendy"), ___EmotionJSX(Item, {
+    key: "march 2020 assets",
+    "aria-label": "march-2020-assets",
+    variant: "buttons.link",
+    "data-id": "march",
+    href: "https://www.pingidentity.com"
+  }, "March 2020 Assets"));
+};
+export var WithSpan = function WithSpan() {
+  return ___EmotionJSX(Breadcrumbs, {
+    icon: ChevronRightIcon
+  }, ___EmotionJSX(Item, {
+    key: "Parent",
+    "aria-label": "parent",
+    elementType: "span"
+  }, "Parent"), ___EmotionJSX(Item, {
+    key: "FonsVernall",
+    "aria-label": "fons-vernall",
+    elementType: "span"
+  }, "Fons Vernall"));
+};

package/lib/components/Breadcrumbs/Breadcrumbs.test.js

@@ -0,0 +1,101 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React from 'react';
+import { mergeProps } from '@react-aria/utils';
+import CreateIcon from 'mdi-react/CreateIcon';
+import { Item } from '@react-stately/collections';
+import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
+import userEvent from '@testing-library/user-event';
+import Breadcrumbs from './Breadcrumbs';
+import axeTest from '../../utils/testUtils/testAxe';
+import { render, screen } from '../../utils/testUtils/testWrapper';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testId = 'test-breadcrumbs';
+var testItemId = 'test-breadcrumb-item';
+var testIconId = 'test-icon-item';
+var defaultProps = {
+  'data-testid': testId,
+  icon: ChevronRightIcon
+};
+var testItemsArr = ['item1', 'item2', 'item3'];
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var itemProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return render(___EmotionJSX(Breadcrumbs, mergeProps(defaultProps, props), _mapInstanceProperty(testItemsArr).call(testItemsArr, function (testItem, idx) {
+    return ___EmotionJSX(Item, _extends({
+      key: testItem,
+      "data-id": testItem
+    }, itemProps, {
+      isCurrent: idx === testItemsArr.length - 1
+    }), testItem);
+  })));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+axeTest(getComponent);
+test('default breadcrumbs', function () {
+  getComponent();
+  expect(screen.getByTestId(testId)).toBeInTheDocument();
+});
+test('should render nodes from the children', function () {
+  getComponent();
+  expect(screen.getByText(testItemsArr[0])).toBeInTheDocument();
+  expect(screen.getByText(testItemsArr[1])).toBeInTheDocument();
+  expect(screen.getByText(testItemsArr[2])).toBeInTheDocument();
+});
+test('should render correct amount of icons', function () {
+  getComponent({
+    iconProps: {
+      'data-testid': testIconId
+    }
+  });
+  expect(screen.getAllByTestId(testIconId).length).toBe(testItemsArr.length - 1);
+});
+test('breadcrumbItem should render breadcrumbItem as a Text component when appropriate elementType passed', function () {
+  getComponent({}, {
+    elementType: 'Text',
+    'data-testid': testItemId
+  });
+  expect(screen.getAllByTestId(testItemId)[0]).toBeInstanceOf(HTMLSpanElement);
+});
+test('breadcrumbItem should render breadcrumbItem as a IconButton component when appropriate elementType passed', function () {
+  getComponent({}, {
+    elementType: 'IconButton',
+    'data-testid': testItemId,
+    icon: CreateIcon
+  });
+  expect(screen.getAllByTestId(testItemId)[0]).toBeInstanceOf(HTMLButtonElement);
+});
+test('breadcrumbItem should render breadcrumbItem as a html tag when appropriate elementType passed', function () {
+  getComponent({}, {
+    elementType: 'a',
+    'data-testid': testItemId,
+    icon: CreateIcon
+  });
+  expect(screen.getAllByTestId(testItemId)[0]).toBeInstanceOf(HTMLAnchorElement);
+});
+test('breadcrumbs will use onAction if provided', function () {
+  var mockOnAction = jest.fn();
+  getComponent({}, {
+    elementType: 'Link',
+    onAction: mockOnAction
+  });
+  userEvent.click(screen.getByText(testItemsArr[0]));
+  expect(mockOnAction).toHaveBeenCalled();
+});
+test('Item accepts a data-id and the data-id can be found in the DOM', function () {
+  getComponent();
+  var item = screen.getByText(testItemsArr[0]);
+  expect(item).toBeInTheDocument();
+  expect(item).toHaveAttribute('data-id', testItemsArr[0]);
+});
+test('will render correctly with single child item', function () {
+  render(___EmotionJSX(Breadcrumbs, mergeProps(defaultProps), ___EmotionJSX(Item, {
+    key: testItemsArr[0],
+    "data-id": testItemsArr[0],
+    isCurrent: true
+  }, testItemsArr[0])));
+  expect(screen.getByTestId(testId)).toBeInTheDocument();
+  expect(screen.getByText(testItemsArr[0])).toBeInTheDocument();
+});

package/lib/components/Breadcrumbs/index.js

@@ -0,0 +1,2 @@
+export { default } from './Breadcrumbs';
+export { default as BreadcrumbItem } from './BreadcrumbItem';

package/lib/components/Button/Button.js

@@ -0,0 +1,188 @@
+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 _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "isDisabled", "isLoading", "onHoverStart", "onHoverChange", "onHoverEnd", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "children", "variant", "tabIndex"];
+
+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 } from 'react';
+import PropTypes from 'prop-types';
+import { Button as ThemeUIButton } from 'theme-ui';
+import { useButton } from '@react-aria/button';
+import { useHover } from '@react-aria/interactions';
+import { useFocusRing } from '@react-aria/focus';
+import { mergeProps } from '@react-aria/utils';
+import { useStatusClasses, usePropWarning, useAriaLabelWarning, useDeprecationWarning } from '../../hooks';
+import Loader from '../Loader';
+/**
+ * Buttons are used to trigger actions or events.
+ * This component is based on the [Button - Theme-UI](https://theme-ui.com/components/button/)
+ * and includes a variety of styles, such as primary action, secondary action, or warning.
+ */
+
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var Button = /*#__PURE__*/forwardRef(function (props, ref) {
+  var className = props.className,
+      isDisabled = props.isDisabled,
+      isLoading = props.isLoading,
+      onHoverStart = props.onHoverStart,
+      onHoverChange = props.onHoverChange,
+      onHoverEnd = props.onHoverEnd,
+      onPress = props.onPress,
+      onPressStart = props.onPressStart,
+      onPressEnd = props.onPressEnd,
+      onPressChange = props.onPressChange,
+      onPressUp = props.onPressUp,
+      children = props.children,
+      variant = props.variant,
+      tabIndex = props.tabIndex,
+      others = _objectWithoutProperties(props, _excluded);
+
+  var buttonRef = useRef();
+  usePropWarning(props, 'disabled', 'isDisabled');
+  /* istanbul ignore next */
+
+  useImperativeHandle(ref, function () {
+    return buttonRef.current;
+  });
+
+  var _useFocusRing = useFocusRing(),
+      isFocusVisible = _useFocusRing.isFocusVisible,
+      focusProps = _useFocusRing.focusProps;
+
+  var _useButton = useButton(_objectSpread({
+    elementType: 'button'
+  }, props), buttonRef),
+      buttonProps = _useButton.buttonProps,
+      isPressed = _useButton.isPressed;
+
+  var _useHover = useHover(props),
+      hoverProps = _useHover.hoverProps,
+      isHovered = _useHover.isHovered;
+
+  var _useStatusClasses = useStatusClasses(className, {
+    isHovered: isHovered,
+    isPressed: isPressed,
+    isFocused: isFocusVisible,
+    isDisabled: isDisabled
+  }),
+      classNames = _useStatusClasses.classNames;
+
+  useDeprecationWarning('The "icon" variant for `Button` is deprecated in Astro-UI 1.0.0, use the `IconButton` component instead.', {
+    isActive: props.variant === 'icon'
+  });
+  useDeprecationWarning('The "danger" variant for `Button` will be deprecated in Astro-UI 2.0.0, use the `critical` variant instead.', {
+    isActive: props.variant === 'danger'
+  });
+  useDeprecationWarning('The "text" variant for `Button` will be deprecated in Astro-UI 2.0.0, use the `link` variant instead.', {
+    isActive: props.variant === 'text'
+  });
+  var ariaLabel = props['aria-label'];
+  useAriaLabelWarning('Button', ariaLabel, variant === 'filter');
+  return ___EmotionJSX(ThemeUIButton, _extends({
+    "aria-label": ariaLabel,
+    ref: buttonRef,
+    className: classNames,
+    role: "button",
+    tx: "buttons",
+    sx: isLoading && {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    },
+    variant: variant
+  }, others, mergeProps(_objectSpread(_objectSpread({}, buttonProps), {}, {
+    tabIndex: tabIndex
+  }), hoverProps, focusProps)), isLoading ? ___EmotionJSX("span", {
+    style: {
+      visibility: 'hidden'
+    }
+  }, children) : children, isLoading && ___EmotionJSX(Loader, {
+    size: "0.5em",
+    sx: {
+      position: 'absolute'
+    }
+  }));
+});
+Button.propTypes = {
+  /** Defines a string value that labels the current element. */
+  'aria-label': PropTypes.string,
+
+  /** Whether the button is disabled. */
+  isDisabled: PropTypes.bool,
+
+  /** Shows loader instead of children */
+  isLoading: PropTypes.bool,
+
+  /**
+   * Handler that is called when a hover interaction starts.
+   * (e: HoverEvent) => void
+   */
+  onHoverStart: PropTypes.func,
+
+  /**
+   * Handler that is called when a hover interaction ends.
+   * (e: HoverEvent) => void
+   */
+  onHoverEnd: PropTypes.func,
+
+  /**
+   * Handler that is called when the hover state changes.
+   * (isHovering: boolean) => void
+   */
+  onHoverChange: PropTypes.func,
+
+  /**
+   * Handler that is called when the press is released over the target.
+   * (e: PressEvent) => void
+   */
+  onPress: PropTypes.func,
+
+  /**
+   * Handler that is called when a press interaction starts.
+   * (e: PressEvent) => void
+   */
+  onPressStart: PropTypes.func,
+
+  /**
+   * Handler that is called when a press interaction ends, either over the target or when the
+   * pointer leaves the target.
+   * (e: PressEvent) => void
+   */
+  onPressEnd: PropTypes.func,
+
+  /**
+   * Handler that is called when the press state changes.
+   * (isPressed: boolean) => void
+   */
+  onPressChange: PropTypes.func,
+
+  /**
+   * Handler that is called when a press is released over the target, regardless of whether it
+   * started on the target or not.
+   * (e: PressEvent) => void
+   */
+  onPressUp: PropTypes.func,
+
+  /** The styling variation of the button. */
+  variant: PropTypes.string,
+
+  /** The focus variation of the button. */
+  tabIndex: PropTypes.number
+};
+Button.defaultProps = {
+  isDisabled: false,
+  variant: 'default'
+};
+Button.displayName = 'Button';
+export default Button;

package/lib/components/Button/Button.stories.js

@@ -0,0 +1,119 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["isConfigured"];
+import React from 'react';
+import AddCircleIcon from 'mdi-react/AddCircleIcon';
+import CreateIcon from 'mdi-react/CreateIcon';
+import FilterIcon from 'mdi-react/FilterIcon';
+import { buttonVariants } from '../../utils/devUtils/constants/variants';
+import { Box, Button, Icon, SearchField, Text } from '../../index'; // removing the iconButton variants from this story.
+
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var variants = buttonVariants;
+delete variants.ICON;
+delete variants.ICON_BUTTON;
+delete variants.INVERTED; // add designer approved variants for devs to use here
+
+var variantOptions = ['critical', 'danger', 'default', 'inline', 'inlinePrimary', 'link', 'primary', 'success', 'text'];
+export default {
+  title: 'Button',
+  component: Button,
+  argTypes: {
+    variant: {
+      control: {
+        type: 'select',
+        options: variantOptions
+      },
+      defaultValue: 'default'
+    },
+    children: {
+      description: 'Button text.',
+      defaultValue: 'Button Text',
+      table: {
+        type: {
+          summary: 'string'
+        }
+      },
+      control: {
+        type: 'text'
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  }
+};
+export var Default = function Default(args) {
+  return ___EmotionJSX(Button, args);
+};
+export var Disabled = function Disabled() {
+  return ___EmotionJSX(Button, {
+    isDisabled: true
+  }, "Button Text");
+};
+export var TextIconButton = function TextIconButton() {
+  return ___EmotionJSX(Button, {
+    mb: "sm"
+  }, ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center"
+  }, ___EmotionJSX(Icon, {
+    icon: AddCircleIcon,
+    mr: "sm",
+    color: "active",
+    size: 20
+  }), "Add a Form"));
+};
+export var InlineButton = function InlineButton() {
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Button, {
+    mb: "sm",
+    mr: "auto",
+    variant: "inline"
+  }, "Inline"), ___EmotionJSX(Button, {
+    mb: "sm",
+    mr: "auto",
+    variant: "inlinePrimary"
+  }, "Inline primary"));
+};
+export var ColorBlockButton = function ColorBlockButton(args) {
+  // Change `isConfigured` property in storybook controls
+  var isConfigured = args.isConfigured,
+      props = _objectWithoutProperties(args, _excluded);
+
+  return ___EmotionJSX(Button, _extends({}, props, {
+    variant: "colorBlock",
+    className: isConfigured ? 'is-configured' : ''
+  }), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
+    variant: "buttonTitle"
+  }, "Title"), ___EmotionJSX(Text, {
+    variant: "buttonSubtitle"
+  }, "Info")), ___EmotionJSX(Icon, {
+    icon: CreateIcon
+  }));
+};
+ColorBlockButton.argTypes = {
+  isConfigured: {
+    control: {
+      type: 'boolean'
+    },
+    defaultValue: false
+  }
+};
+export var FilterButton = function FilterButton() {
+  return ___EmotionJSX(Box, {
+    p: "xx",
+    isRow: true,
+    gap: "md"
+  }, ___EmotionJSX(SearchField, {
+    "aria-label": "search items"
+  }), ___EmotionJSX(Button, {
+    variant: "filter",
+    "aria-label": "filter button"
+  }, ___EmotionJSX(Icon, {
+    icon: FilterIcon
+  })));
+};