@pingux/astro 2.7.1 → 2.8.0-alpha.0

package/lib/cjs/utils/docUtils/docArgTypes.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.stringOrStringArray = exports.funcArg = exports.docArgTypes = exports.booleanArg = void 0;
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _context;
+var docArgTypes = {
+  bool: 'boolean',
+  node: 'node',
+  string: 'string',
+  stringArray: 'string[]',
+  text: 'text',
+  func: 'func',
+  object: 'object'
+};
+exports.docArgTypes = docArgTypes;
+var stringOrStringArray = (0, _concat["default"])(_context = "".concat(docArgTypes.string, " | ")).call(_context, docArgTypes.stringArray);
+exports.stringOrStringArray = stringOrStringArray;
+var booleanArg = {
+  control: {
+    type: docArgTypes.bool
+  },
+  defaultValue: false,
+  type: {
+    summary: docArgTypes.bool
+  }
+};
+exports.booleanArg = booleanArg;
+var funcArg = {
+  control: {
+    type: null
+  },
+  type: {
+    summary: docArgTypes.func
+  }
+};
+exports.funcArg = funcArg;

package/lib/components/Button/Button.js

@@ -15,10 +15,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import { mergeProps, useButton, useFocusRing } from 'react-aria';
 import { Pressable, useHover, usePress } from '@react-aria/interactions';
-import PropTypes from 'prop-types';
 import { Button as ThemeUIButton } from 'theme-ui';
 import { useAriaLabelWarning, usePropWarning, useStatusClasses } from '../../hooks';
 import Loader from '../Loader';
+import { buttonPropTypes } from './buttonAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Button = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
@@ -90,60 +90,7 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   })));
 });
-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.propTypes = buttonPropTypes;
 Button.defaultProps = {
   isDisabled: false,
   variant: 'default'

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

@@ -1,6 +1,17 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 var _excluded = ["isConfigured"];
+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 AddCircleIcon from '@pingux/mdi-react/AddCircleIcon';
 import CreateIcon from '@pingux/mdi-react/CreateIcon';
@@ -9,43 +20,14 @@ import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Button, Icon, SearchField, Text } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.js';
-import { buttonVariants } from '../../utils/devUtils/constants/variants';
 import ButtonReadme from './Button.mdx';
-
-// removing the iconButton variants from this story.
+import { buttonArgTypes } from './buttonAttributes';
 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', 'default', 'inline', 'inlinePrimary', 'link', 'primary'];
 export default {
   title: 'Components/Button',
   component: Button,
   decorators: [withDesign],
-  argTypes: {
-    variant: {
-      control: {
-        type: 'select',
-        options: variantOptions
-      },
-      defaultValue: 'default'
-    },
-    children: {
-      description: 'Button text.',
-      defaultValue: 'Button Text',
-      table: {
-        type: {
-          summary: 'string'
-        }
-      },
-      control: {
-        type: 'text'
-      }
-    }
-  },
+  argTypes: _objectSpread({}, buttonArgTypes),
   parameters: {
     docs: {
       source: {

package/lib/components/Button/buttonAttributes.js

@@ -0,0 +1,101 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+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 PropTypes from 'prop-types';
+import { descriptions as ariaDescriptions } from '../../utils/docUtils/ariaAttributes';
+import { booleanArg, funcArg } from '../../utils/docUtils/docArgTypes';
+import { onHoverArgTypes } from '../../utils/docUtils/hoverProps';
+
+// add designer approved variants for devs to use here
+var variantOptions = ['critical', 'default', 'inline', 'inlinePrimary', 'link', 'primary'];
+var descriptions = {
+  isDisabled: 'Whether the button is disabled.',
+  isLoading: 'Shows loader instead of children',
+  onHoverStart: 'Handler that is called when a hover interaction starts. (e: HoverEvent) => void',
+  onHoverEnd: 'Handler that is called when the hover state changes. (isHovering: boolean) => void',
+  onHoverChange: 'Handler that is called when the press is released over the target. (e: PressEvent) => void',
+  onPress: 'Handler that is called when the press is released over the target. (e: PressEvent) => void',
+  onPressChange: 'Handler that is called when the press state changes. (isPressed: boolean) => void',
+  onPressEnd: 'Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. (e: PressEvent) => void',
+  onPressStart: 'Handler that is called when a press interaction starts. (e: PressEvent) => void',
+  onPressUp: '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',
+  variant: 'The styling variation of the button.',
+  tabIndex: 'The focus variation of button',
+  children: 'Button text.'
+};
+export var buttonArgTypes = _objectSpread(_objectSpread({
+  variant: {
+    control: {
+      type: 'select',
+      options: variantOptions
+    },
+    defaultValue: 'default',
+    description: descriptions.variant
+  },
+  children: {
+    defaultValue: 'Button Text',
+    table: {
+      type: {
+        summary: 'string'
+      }
+    },
+    control: {
+      type: 'text'
+    },
+    description: descriptions.children
+  },
+  onPress: _objectSpread({
+    description: descriptions.onPress
+  }, funcArg),
+  onPressStart: _objectSpread({
+    description: descriptions.onPressStart
+  }, funcArg),
+  onPressEnd: _objectSpread({
+    description: descriptions.onPressEnd
+  }, funcArg),
+  onPressChange: _objectSpread({
+    description: descriptions.onPressChange
+  }, funcArg),
+  onPressUp: _objectSpread({
+    description: descriptions.onPressUp
+  }, funcArg)
+}, onHoverArgTypes), {}, {
+  isLoading: _objectSpread(_objectSpread({}, booleanArg), {}, {
+    description: descriptions.isLoading
+  }),
+  isDisabled: _objectSpread(_objectSpread({}, booleanArg), {}, {
+    description: descriptions.isDisabled
+  }),
+  tabIndex: {
+    description: descriptions.tabIndex
+  },
+  'aria-label': {
+    control: {
+      type: 'text'
+    },
+    description: ariaDescriptions.ariaLabel
+  }
+});
+export var buttonPropTypes = {
+  'aria-label': PropTypes.string,
+  isDisabled: PropTypes.bool,
+  isLoading: PropTypes.bool,
+  onHoverStart: PropTypes.func,
+  onHoverEnd: PropTypes.func,
+  onHoverChange: PropTypes.func,
+  onPress: PropTypes.func,
+  onPressStart: PropTypes.func,
+  onPressEnd: PropTypes.func,
+  onPressChange: PropTypes.func,
+  onPressUp: PropTypes.func,
+  variant: PropTypes.string,
+  tabIndex: PropTypes.number
+};

package/lib/components/Calendar/Calendar.test.js

@@ -124,7 +124,7 @@ test('should be able to select dates', function () {
   userEvent.click(dateButtons[4]);
   expect(dateButtons[4]).toHaveClass('is-selected');
 });
-test('should be able to navigate and select shown previous month dates', function () {
+test('should be able to navigate to previous month dates without selection', function () {
   var _context3;
   getComponent({
     defaultValue: '2022-08-10'
@@ -135,10 +135,10 @@ test('should be able to navigate and select shown previous month dates', functio
   var previousDate = disabledGridCells[0];
   expect(within(previousDate).getByText(31)).toHaveAttribute('aria-label', 'Sunday, July 31, 2022');
   userEvent.click(previousDate);
-  var selectedDate = screen.queryByText(31);
-  expect(selectedDate).toHaveAttribute('aria-label', 'Sunday, July 31, 2022 selected');
+  var selectedMonth = screen.queryByRole('grid');
+  expect(selectedMonth).toHaveAttribute('aria-label', 'July 2022');
 });
-test('should be able to navigate and select shown next month dates', function () {
+test('should be able to navigate to next month dates without selection', function () {
   var _context4;
   getComponent({
     defaultValue: '2022-08-10'
@@ -149,8 +149,8 @@ test('should be able to navigate and select shown next month dates', function ()
   var NextDate = disabledGridCells[34];
   expect(within(NextDate).getByText(3)).toHaveAttribute('aria-label', 'Saturday, September 3, 2022');
   userEvent.click(NextDate);
-  var selectedDate = screen.queryByText(3);
-  expect(selectedDate).toHaveAttribute('aria-label', 'Saturday, September 3, 2022 selected');
+  var selectedMonth = screen.queryByRole('grid');
+  expect(selectedMonth).toHaveAttribute('aria-label', 'September 2022');
 });
 test('allows users to open calendar item with enter / space key', function () {
   getComponent({

package/lib/components/Calendar/CalendarCell.js

@@ -37,8 +37,8 @@ var CalendarCell = /*#__PURE__*/forwardRef(function (props, ref) {
     formattedDate = _useCalendarCell.formattedDate,
     isDisabled = _useCalendarCell.isDisabled;
   var focusPreviousPage = state.focusPreviousPage,
-    setValue = state.setValue,
-    focusNextPage = state.focusNextPage;
+    focusNextPage = state.focusNextPage,
+    setFocused = state.setFocused;
 
   /**
    * Function handles the navigation and adds focus to previous or next month dates
@@ -48,13 +48,13 @@ var CalendarCell = /*#__PURE__*/forwardRef(function (props, ref) {
   var handleDisableClick = useCallback(function () {
     var _cellRef$current, _cellRef$current2;
     if ((_cellRef$current = cellRef.current) !== null && _cellRef$current !== void 0 && _cellRef$current.hidden && !state.isDisabled && formattedDate > 20) {
+      setFocused(undefined);
       focusPreviousPage();
-      setValue(date);
     } else if ((_cellRef$current2 = cellRef.current) !== null && _cellRef$current2 !== void 0 && _cellRef$current2.hidden && !state.isDisabled && formattedDate < 15) {
+      setFocused(undefined);
       focusNextPage();
-      setValue(date);
     }
-  }, [date, focusNextPage, focusPreviousPage, formattedDate, setValue, state]);
+  }, [date, focusNextPage, focusPreviousPage, formattedDate, state, setFocused]);
   var _useHover = useHover({}),
     hoverProps = _useHover.hoverProps,
     isHovered = _useHover.isHovered;
@@ -103,6 +103,7 @@ CalendarCell.propTypes = {
     focusPreviousPage: PropTypes.func,
     setValue: PropTypes.func,
     focusNextPage: PropTypes.func,
+    setFocused: PropTypes.func,
     setFocusedDate: PropTypes.func,
     isDisabled: PropTypes.bool
   }),

package/lib/experimental/SaveBar/SaveBar.js

@@ -0,0 +1,76 @@
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+var _excluded = ["saveButtonProps", "cancelButtonProps", "refreshButtonProps", "isJustifiedRight", "children"];
+import _reverseInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reverse";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/splice";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { buttonPropTypes } from '../../components/Button/buttonAttributes';
+import { Box, Button } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var SaveButton = function SaveButton(props) {
+  return ___EmotionJSX(Button, _extends({
+    variant: "primary",
+    "data-id": "save-button"
+  }, props), props.text);
+};
+var CancelButton = function CancelButton(props) {
+  return ___EmotionJSX(Button, _extends({
+    variant: "link",
+    "data-id": "cancel-button"
+  }, props), props.text);
+};
+var RefreshButton = function RefreshButton(props) {
+  return ___EmotionJSX(Button, _extends({
+    "data-id": "refresh-button"
+  }, props), props.text);
+};
+var SaveBar = function SaveBar(props) {
+  var _context2;
+  var saveButtonProps = props.saveButtonProps,
+    cancelButtonProps = props.cancelButtonProps,
+    refreshButtonProps = props.refreshButtonProps,
+    isJustifiedRight = props.isJustifiedRight,
+    children = props.children,
+    others = _objectWithoutProperties(props, _excluded);
+  var ButtonArray = [___EmotionJSX(SaveButton, saveButtonProps), ___EmotionJSX(CancelButton, cancelButtonProps)];
+  var Content = function Content() {
+    var _context;
+    var content = isJustifiedRight ? _reverseInstanceProperty(_context = _sliceInstanceProperty(ButtonArray).call(ButtonArray)).call(_context) : ButtonArray;
+    if (refreshButtonProps) {
+      _spliceInstanceProperty(content).call(content, 1, 0, ___EmotionJSX(RefreshButton, refreshButtonProps));
+    }
+    return ___EmotionJSX(React.Fragment, null, _mapInstanceProperty(content).call(content, function (child) {
+      return child;
+    }));
+  };
+  return ___EmotionJSX(Box, _extends({
+    isRow: true,
+    gap: "md",
+    sx: {
+      bg: 'white',
+      px: 'lg',
+      py: 'md',
+      justifyContent: isJustifiedRight ? 'right' : 'left'
+    }
+  }, others), children ? _concatInstanceProperty(_context2 = []).call(_context2, children) : ___EmotionJSX(Content, null));
+};
+SaveBar.propTypes = {
+  saveButtonProps: PropTypes.shape(buttonPropTypes),
+  cancelButtonProps: PropTypes.shape(buttonPropTypes),
+  refreshButtonProps: PropTypes.shape(buttonPropTypes),
+  isJustifiedRight: PropTypes.bool
+};
+SaveButton.propTypes = {
+  text: PropTypes.string
+};
+CancelButton.propTypes = {
+  text: PropTypes.string
+};
+RefreshButton.propTypes = {
+  text: PropTypes.string
+};
+export default SaveBar;

package/lib/experimental/SaveBar/SaveBar.stories.js

@@ -0,0 +1,88 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import { Button } from '../../index';
+import SaveBar from './SaveBar';
+import SaveBarReadme from './SaveBar.mdx';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Experimental/SaveBar',
+  component: SaveBar,
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      },
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(SaveBarReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    }
+  }
+};
+export var Default = function Default(args) {
+  return ___EmotionJSX(SaveBar, _extends({
+    saveButtonProps: {
+      key: 'save button',
+      text: 'Save',
+      onPress: function onPress() {
+        return alert('Save button pressed');
+      }
+    },
+    cancelButtonProps: {
+      key: 'cancel button',
+      text: 'Cancel',
+      onPress: function onPress() {
+        return alert('Cancel button pressed');
+      }
+    }
+  }, args));
+};
+export var WithRefreshButton = function WithRefreshButton(args) {
+  return ___EmotionJSX(SaveBar, _extends({
+    saveButtonProps: {
+      key: 'save button',
+      text: 'Save',
+      onPress: function onPress() {
+        return alert('Save button pressed');
+      }
+    },
+    cancelButtonProps: {
+      key: 'cancel button',
+      text: 'Cancel',
+      onPress: function onPress() {
+        return alert('Cancel button pressed');
+      }
+    },
+    refreshButtonProps: {
+      key: 'refresh button',
+      text: 'Refresh',
+      onPress: function onPress() {
+        return alert('Refresh button pressed');
+      }
+    }
+  }, args));
+};
+export var JustifiedRight = function JustifiedRight() {
+  return ___EmotionJSX(SaveBar, {
+    saveButtonProps: {
+      key: 'next button',
+      text: 'Next',
+      onPress: function onPress() {
+        return alert('Save button pressed');
+      }
+    },
+    cancelButtonProps: {
+      key: 'cancel button',
+      text: 'Cancel',
+      onPress: function onPress() {
+        return alert('Cancel button pressed');
+      }
+    },
+    isJustifiedRight: true
+  });
+};
+export var WithChildren = function WithChildren(args) {
+  return ___EmotionJSX(SaveBar, args, ___EmotionJSX(Button, null, "Custom Button!"), ___EmotionJSX(Button, {
+    variant: "link"
+  }, "Custom Link!"));
+};

package/lib/experimental/SaveBar/SaveBar.test.js

@@ -0,0 +1,91 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import axeTest from '../../utils/testUtils/testAxe';
+import { render, screen } from '../../utils/testUtils/testWrapper';
+import SaveBar from '.';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testId = 'test-SaveBar';
+var saveButtonProps = {
+  key: 'save button',
+  text: 'Save',
+  onPress: function onPress() {
+    return alert('Save button pressed');
+  }
+};
+var cancelButtonProps = {
+  key: 'cancel button',
+  text: 'Cancel',
+  onPress: function onPress() {
+    return alert('Cancel button pressed');
+  }
+};
+var refreshButtonProps = {
+  key: 'refresh button',
+  text: 'Refresh',
+  onPress: function onPress() {
+    return alert('Refresh button pressed');
+  }
+};
+var defaultProps = {
+  'data-testid': testId,
+  saveButtonProps: saveButtonProps,
+  cancelButtonProps: cancelButtonProps
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(SaveBar, _extends({}, defaultProps, props)));
+};
+var getComponentCustomChildren = function getComponentCustomChildren() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(SaveBar, _extends({}, defaultProps, props), ___EmotionJSX("button", null, "custom text"), ___EmotionJSX("button", null, "Also custom text")));
+};
+var getComponentTextChildren = function getComponentTextChildren() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(SaveBar, props, "custom text"));
+};
+axeTest(getComponent);
+afterEach(function () {
+  jest.resetAllMocks();
+});
+test('SaveBar does render', function () {
+  getComponent({});
+  var element = screen.getByTestId(testId);
+  expect(element).toBeInTheDocument();
+});
+test('renders save and cancel buttons', function () {
+  getComponent();
+  var saveButton = screen.getByText(saveButtonProps.text);
+  expect(saveButton).toBeInTheDocument();
+  var cancelButton = screen.getByText(cancelButtonProps.text);
+  expect(cancelButton).toBeInTheDocument();
+});
+test('renders all three buttons', function () {
+  getComponent({
+    refreshButtonProps: refreshButtonProps
+  });
+  var saveButton = screen.getByText(saveButtonProps.text);
+  expect(saveButton).toBeInTheDocument();
+  var refreshButton = screen.getByText(refreshButtonProps.text);
+  expect(refreshButton).toBeInTheDocument();
+  var cancelButton = screen.getByText(cancelButtonProps.text);
+  expect(cancelButton).toBeInTheDocument();
+});
+test('renders custom children', function () {
+  getComponentCustomChildren();
+  var firstButton = screen.getByText('custom text');
+  var secondButton = screen.getByText('Also custom text');
+  expect(firstButton).toBeInTheDocument();
+  expect(secondButton).toBeInTheDocument();
+});
+test('renders custom text', function () {
+  getComponentTextChildren();
+  var firstText = screen.getByText('custom text');
+  expect(firstText).toBeInTheDocument();
+});
+test('isJustifiedRight reverses order of button', function () {
+  getComponent({
+    isJustifiedRight: true
+  });
+  var buttons = screen.getAllByRole('button');
+  expect(buttons[0]).toHaveAttribute('data-id', 'cancel-button');
+});

package/lib/experimental/SaveBar/index.js

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

package/lib/utils/docUtils/ariaAttributes.js

@@ -14,7 +14,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import omit from 'lodash/omit';
 import PropTypes from 'prop-types';
-var descriptions = {
+export var descriptions = {
   ariaControls: 'Identifies the element (or elements) whose contents or presence are controlled by the current element.',
   ariaDescribedby: 'Identifies the element (or elements) that describes the object.',
   ariaDetails: 'Identifies the element (or elements) that provide a detailed, extended description for the object.',

package/lib/utils/docUtils/docArgTypes.js

@@ -0,0 +1,29 @@
+var _context;
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+export var docArgTypes = {
+  bool: 'boolean',
+  node: 'node',
+  string: 'string',
+  stringArray: 'string[]',
+  text: 'text',
+  func: 'func',
+  object: 'object'
+};
+export var stringOrStringArray = _concatInstanceProperty(_context = "".concat(docArgTypes.string, " | ")).call(_context, docArgTypes.stringArray);
+export var booleanArg = {
+  control: {
+    type: docArgTypes.bool
+  },
+  defaultValue: false,
+  type: {
+    summary: docArgTypes.bool
+  }
+};
+export var funcArg = {
+  control: {
+    type: null
+  },
+  type: {
+    summary: docArgTypes.func
+  }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.7.1",
+  "version": "2.8.0-alpha.0",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",