@pingux/astro 1.42.2 → 2.0.0-alpha.4

package/lib/components/Breadcrumbs/BreadcrumbItem.js

@@ -9,55 +9,42 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["children", "elementType", "onAction", "actionKey", "isCurrent"];
-
 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, Fragment, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
-import { useBreadcrumbItem } from '@react-aria/breadcrumbs';
-import PropTypes from 'prop-types';
-import { mergeProps } from '@react-aria/utils';
+import { mergeProps, useBreadcrumbItem } from 'react-aria';
 import { omit } from 'lodash/object';
-import { usePropWarning } from '../../hooks/';
-import { Button, IconButton, Text, Link } from '../../index';
+import PropTypes from 'prop-types';
+import { usePropWarning } from '../../hooks';
+import { Button, IconButton, Link, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var BreadcrumbItem = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
-      elementType = props.elementType,
-      onAction = props.onAction,
-      actionKey = props.actionKey,
-      isCurrent = props.isCurrent,
-      others = _objectWithoutProperties(props, _excluded);
-
+    elementType = props.elementType,
+    onAction = props.onAction,
+    actionKey = props.actionKey,
+    isCurrent = props.isCurrent,
+    others = _objectWithoutProperties(props, _excluded);
   var itemRef = useRef();
   usePropWarning(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
-
   useImperativeHandle(ref, function () {
     return itemRef.current;
   });
-
   var _useBreadcrumbItem = useBreadcrumbItem(_objectSpread({}, props), itemRef),
-      itemProps = _useBreadcrumbItem.itemProps;
-
+    itemProps = _useBreadcrumbItem.itemProps;
   var ElementType = useMemo(function () {
     switch (elementType) {
       case 'Button':
         return Button;
-
       case 'IconButton':
         return IconButton;
-
       case 'Text':
         return Text;
-
       case 'Link':
         return Link;
-
       case 'Fragment':
         return Fragment;
-
       default:
         return elementType;
     }
@@ -69,17 +56,13 @@ var BreadcrumbItem = /*#__PURE__*/forwardRef(function (props, ref) {
   }, [onAction, actionKey]);
   var elementProps = useMemo(function () {
     var _ElementType$propType;
-
     var elementTypeProps = _objectSpread({}, mergeProps(itemProps, others));
-
     if ((_ElementType$propType = ElementType.propTypes) !== null && _ElementType$propType !== void 0 && _ElementType$propType.onPress) {
       elementTypeProps.onPress = onPressHandler;
     }
-
     if (isCurrent) {
       elementTypeProps.className = elementTypeProps.className ? "".concat(elementTypeProps.className, " is-current") : 'is-current';
     }
-
     return omit(elementTypeProps, 'onClick', 'onKeyDown', 'onKeyUp');
   }, [elementType, itemProps, others, onPressHandler]);
   return /*#__PURE__*/React.cloneElement(___EmotionJSX(ElementType, null), _objectSpread(_objectSpread({}, elementProps), {}, {
@@ -88,16 +71,13 @@ var BreadcrumbItem = /*#__PURE__*/forwardRef(function (props, ref) {
 });
 BreadcrumbItem.propTypes = {
   actionKey: PropTypes.string,
-
   /** Whether the breadcrumb item represents the current page. */
   isCurrent: PropTypes.bool,
-
   /** The HTML element used to render the breadcrumb link, e.g. 'a', or 'span'.
    * Also can be passed 'Button', 'Icon', 'IconButton', 'Text' - will be used
    * appropriate component from Astro library.
    * */
   elementType: PropTypes.elementType,
-
   /** Whether the breadcrumb item is disabled. */
   isDisabled: PropTypes.bool,
   onAction: PropTypes.func

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -4,33 +4,28 @@ var _excluded = ["children", "icon", "iconProps", "onAction"];
 import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import React, { forwardRef, useRef, useImperativeHandle, useCallback } from 'react';
-import { useBreadcrumbs } from '@react-aria/breadcrumbs';
+import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
+import { mergeProps, useBreadcrumbs } from 'react-aria';
 import PropTypes from 'prop-types';
-import { mergeProps } from '@react-aria/utils';
+import { usePropWarning } from '../../hooks';
 import { Box, Icon } from '../../index';
-import { usePropWarning } from '../../hooks/';
 import BreadcrumbItem from './BreadcrumbItem';
 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
-
-
+    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;
-
+    wrapperProps = _useBreadcrumbs.navProps;
   var breadcrumbsRef = useRef();
   usePropWarning(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
-
   useImperativeHandle(ref, function () {
     return breadcrumbsRef.current;
   });
@@ -44,13 +39,13 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function (props, ref) {
       },
       as: "li",
       key: "li-".concat(child.key),
-      variant: "text.breadcrumbLi"
+      variant: "variants.breadcrumb.containerLi"
     }, ___EmotionJSX(BreadcrumbItem, _extends({
       "data-id": child['data-id'],
       isCurrent: isCurrentItem,
       onAction: onAction,
       actionKey: child.key,
-      variant: "text.breadcrumbLink"
+      variant: "variants.breadcrumb.link"
     }, child.props), child.props.children), icon && !isCurrentItem && ___EmotionJSX(Icon, _extends({
       "aria-hidden": "true",
       icon: icon,
@@ -72,18 +67,13 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function (props, ref) {
 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
 };

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

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
+import { Item } from 'react-stately';
 import { action } from '@storybook/addon-actions';
-import { Item } from '@react-stately/collections';
 import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
-import Breadcrumbs from './Breadcrumbs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import Breadcrumbs from './Breadcrumbs';
 import BreadcrumbsReadme from './Breadcrumbs.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -39,7 +39,6 @@ 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, {

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

@@ -1,14 +1,14 @@
 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 { mergeProps } from 'react-aria';
+import { Item } from 'react-stately';
 import userEvent from '@testing-library/user-event';
-import Breadcrumbs from './Breadcrumbs';
+import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
+import CreateIcon from 'mdi-react/CreateIcon';
 import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
+import Breadcrumbs from './Breadcrumbs';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-breadcrumbs';
 var testItemId = 'test-breadcrumb-item';
@@ -18,7 +18,6 @@ var defaultProps = {
   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] : {};
@@ -30,9 +29,9 @@ var getComponent = function getComponent() {
       isCurrent: idx === testItemsArr.length - 1
     }), testItem);
   })));
-}; // 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);
 test('default breadcrumbs', function () {
   getComponent();

package/lib/components/Breadcrumbs/index.js

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

package/lib/components/Button/Button.js

@@ -10,82 +10,62 @@ 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 React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import { mergeProps, useButton, useFocusRing } from 'react-aria';
+import { Pressable, useHover } from '@react-aria/interactions';
 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 { useAriaLabelWarning, usePropWarning, useStatusClasses } from '../../hooks';
 import Loader from '../Loader';
 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);
-
+    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;
-
+    isFocusVisible = _useFocusRing.isFocusVisible,
+    focusProps = _useFocusRing.focusProps;
   var _useButton = useButton(_objectSpread({
-    elementType: 'button'
-  }, props), buttonRef),
-      buttonProps = _useButton.buttonProps,
-      isPressed = _useButton.isPressed;
-
+      elementType: 'button'
+    }, props), buttonRef),
+    buttonProps = _useButton.buttonProps,
+    isPressed = _useButton.isPressed;
   var _useHover = useHover(props),
-      hoverProps = _useHover.hoverProps,
-      isHovered = _useHover.isHovered;
-
+    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'
-  });
+      isHovered: isHovered,
+      isPressed: isPressed,
+      isFocused: isFocusVisible,
+      isDisabled: isDisabled
+    }),
+    classNames = _useStatusClasses.classNames;
   var ariaLabel = props['aria-label'];
   useAriaLabelWarning('Button', ariaLabel, variant === 'filter');
-  return ___EmotionJSX(ThemeUIButton, _extends({
+  return ___EmotionJSX(Pressable, {
+    ref: buttonRef
+  }, ___EmotionJSX(ThemeUIButton, _extends({
     "aria-label": ariaLabel,
-    ref: buttonRef,
     className: classNames,
     role: "button",
     tx: "buttons",
@@ -106,71 +86,59 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
     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
 };

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

@@ -5,18 +5,20 @@ 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 DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Button, Icon, SearchField, Text } from '../../index';
-import ButtonReadme from './Button.mdx'; // removing the iconButton variants from this story.
+import { buttonVariants } from '../../utils/devUtils/constants/variants';
+import ButtonReadme from './Button.mdx';
 
+// 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
+delete variants.INVERTED;
 
-var variantOptions = ['critical', 'danger', 'default', 'inline', 'inlinePrimary', 'link', 'primary', 'success', 'text'];
+// add designer approved variants for devs to use here
+var variantOptions = ['critical', 'default', 'inline', 'inlinePrimary', 'link', 'primary', 'success'];
 export default {
   title: 'Components/Button',
   component: Button,
@@ -87,8 +89,7 @@ export var InlineButton = function InlineButton() {
 export var ColorBlockButton = function ColorBlockButton(args) {
   // Change `isConfigured` property in storybook controls
   var isConfigured = args.isConfigured,
-      props = _objectWithoutProperties(args, _excluded);
-
+    props = _objectWithoutProperties(args, _excluded);
   return ___EmotionJSX(Button, _extends({}, props, {
     variant: "colorBlock",
     className: isConfigured ? 'is-configured' : ''

package/lib/components/Button/Button.test.js

@@ -10,13 +10,12 @@ var defaultProps = {
   'data-testid': testId,
   'aria-label': 'Test button'
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(Button, _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);
 test('default button', function () {
   getComponent();
@@ -41,11 +40,13 @@ test('icon button press', function () {
   });
   var button = screen.getByRole('button');
   expect(button).not.toHaveClass('is-pressed');
-  expect(onPress).not.toHaveBeenCalled(); // Hold down the button to see pressed styles
+  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
+  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);