@pingux/astro 2.7.1-alpha.2 → 2.8.0-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.7.1](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@2.7.0...@pingux/astro@2.7.1) (2023-07-11)
+
+
+### Bug Fixes
+
+* [UIP-6391] check for navigator before accessing it ([a64af4a](https://gitlab.corp.pingidentity.com/ux/pingux/commit/a64af4a57396a025f684adf9c69b5bd7f6930290))
+
+
+
+
+
 # [2.7.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@2.6.0...@pingux/astro@2.7.0) (2023-07-06)
 
 

package/lib/cjs/components/Button/Button.js

@@ -21,10 +21,10 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _interactions = require("@react-aria/interactions");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _themeUi = require("theme-ui");
 var _hooks = require("../../hooks");
 var _Loader = _interopRequireDefault(require("../Loader"));
+var _buttonAttributes = require("./buttonAttributes");
 var _react2 = require("@emotion/react");
 var _excluded = ["className", "isDisabled", "isLoading", "onHoverStart", "onHoverChange", "onHoverEnd", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "children", "variant", "tabIndex"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -101,60 +101,7 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   })));
 });
-Button.propTypes = {
-  /** Defines a string value that labels the current element. */
-  'aria-label': _propTypes["default"].string,
-  /** Whether the button is disabled. */
-  isDisabled: _propTypes["default"].bool,
-  /** Shows loader instead of children */
-  isLoading: _propTypes["default"].bool,
-  /**
-   * Handler that is called when a hover interaction starts.
-   * (e: HoverEvent) => void
-   */
-  onHoverStart: _propTypes["default"].func,
-  /**
-   * Handler that is called when a hover interaction ends.
-   * (e: HoverEvent) => void
-   */
-  onHoverEnd: _propTypes["default"].func,
-  /**
-   * Handler that is called when the hover state changes.
-   * (isHovering: boolean) => void
-   */
-  onHoverChange: _propTypes["default"].func,
-  /**
-   * Handler that is called when the press is released over the target.
-   * (e: PressEvent) => void
-   */
-  onPress: _propTypes["default"].func,
-  /**
-   * Handler that is called when a press interaction starts.
-   * (e: PressEvent) => void
-   */
-  onPressStart: _propTypes["default"].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["default"].func,
-  /**
-   * Handler that is called when the press state changes.
-   * (isPressed: boolean) => void
-   */
-  onPressChange: _propTypes["default"].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["default"].func,
-  /** The styling variation of the button. */
-  variant: _propTypes["default"].string,
-  /** The focus variation of the button. */
-  tabIndex: _propTypes["default"].number
-};
+Button.propTypes = _buttonAttributes.buttonPropTypes;
 Button.defaultProps = {
   isDisabled: false,
   variant: 'default'

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

@@ -1,5 +1,12 @@
 "use strict";
 
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
 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", {
@@ -8,6 +15,7 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = exports.TextIconButton = exports.Primary = exports.InlineButton = exports.FilterButton = exports.Disabled = exports.Default = exports.Critical = exports.ColorBlockButton = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _AddCircleIcon = _interopRequireDefault(require("@pingux/mdi-react/AddCircleIcon"));
 var _CreateIcon = _interopRequireDefault(require("@pingux/mdi-react/CreateIcon"));
@@ -16,43 +24,17 @@ var _storybookAddonDesigns = require("storybook-addon-designs");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
 var _figmaLinks = require("../../utils/designUtils/figmaLinks.js");
-var _variants = require("../../utils/devUtils/constants/variants");
 var _Button = _interopRequireDefault(require("./Button.mdx"));
+var _buttonAttributes = require("./buttonAttributes");
 var _react2 = require("@emotion/react");
 var _excluded = ["isConfigured"];
-// removing the iconButton variants from this story.
-var variants = _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'];
+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) { (0, _defineProperty2["default"])(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; }
 var _default = {
   title: 'Components/Button',
   component: _index.Button,
   decorators: [_storybookAddonDesigns.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({}, _buttonAttributes.buttonArgTypes),
   parameters: {
     docs: {
       source: {

package/lib/cjs/components/Button/buttonAttributes.js

@@ -0,0 +1,109 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+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.buttonPropTypes = exports.buttonArgTypes = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
+var _docArgTypes = require("../../utils/docUtils/docArgTypes");
+var _hoverProps = require("../../utils/docUtils/hoverProps");
+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) { (0, _defineProperty2["default"])(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; }
+// 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.'
+};
+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
+  }, _docArgTypes.funcArg),
+  onPressStart: _objectSpread({
+    description: descriptions.onPressStart
+  }, _docArgTypes.funcArg),
+  onPressEnd: _objectSpread({
+    description: descriptions.onPressEnd
+  }, _docArgTypes.funcArg),
+  onPressChange: _objectSpread({
+    description: descriptions.onPressChange
+  }, _docArgTypes.funcArg),
+  onPressUp: _objectSpread({
+    description: descriptions.onPressUp
+  }, _docArgTypes.funcArg)
+}, _hoverProps.onHoverArgTypes), {}, {
+  isLoading: _objectSpread(_objectSpread({}, _docArgTypes.booleanArg), {}, {
+    description: descriptions.isLoading
+  }),
+  isDisabled: _objectSpread(_objectSpread({}, _docArgTypes.booleanArg), {}, {
+    description: descriptions.isDisabled
+  }),
+  tabIndex: {
+    description: descriptions.tabIndex
+  },
+  'aria-label': {
+    control: {
+      type: 'text'
+    },
+    description: _ariaAttributes.descriptions.ariaLabel
+  }
+});
+exports.buttonArgTypes = buttonArgTypes;
+var buttonPropTypes = {
+  'aria-label': _propTypes["default"].string,
+  isDisabled: _propTypes["default"].bool,
+  isLoading: _propTypes["default"].bool,
+  onHoverStart: _propTypes["default"].func,
+  onHoverEnd: _propTypes["default"].func,
+  onHoverChange: _propTypes["default"].func,
+  onPress: _propTypes["default"].func,
+  onPressStart: _propTypes["default"].func,
+  onPressEnd: _propTypes["default"].func,
+  onPressChange: _propTypes["default"].func,
+  onPressUp: _propTypes["default"].func,
+  variant: _propTypes["default"].string,
+  tabIndex: _propTypes["default"].number
+};
+exports.buttonPropTypes = buttonPropTypes;

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

@@ -127,7 +127,7 @@ test('should be able to select dates', function () {
   _userEvent["default"].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'
@@ -138,10 +138,10 @@ test('should be able to navigate and select shown previous month dates', functio
   var previousDate = disabledGridCells[0];
   expect((0, _testWrapper.within)(previousDate).getByText(31)).toHaveAttribute('aria-label', 'Sunday, July 31, 2022');
   _userEvent["default"].click(previousDate);
-  var selectedDate = _testWrapper.screen.queryByText(31);
-  expect(selectedDate).toHaveAttribute('aria-label', 'Sunday, July 31, 2022 selected');
+  var selectedMonth = _testWrapper.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'
@@ -152,8 +152,8 @@ test('should be able to navigate and select shown next month dates', function ()
   var NextDate = disabledGridCells[34];
   expect((0, _testWrapper.within)(NextDate).getByText(3)).toHaveAttribute('aria-label', 'Saturday, September 3, 2022');
   _userEvent["default"].click(NextDate);
-  var selectedDate = _testWrapper.screen.queryByText(3);
-  expect(selectedDate).toHaveAttribute('aria-label', 'Saturday, September 3, 2022 selected');
+  var selectedMonth = _testWrapper.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/cjs/components/Calendar/CalendarCell.js

@@ -50,8 +50,8 @@ var CalendarCell = /*#__PURE__*/(0, _react.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
@@ -61,13 +61,13 @@ var CalendarCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var handleDisableClick = (0, _react.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 = (0, _interactions.useHover)({}),
     hoverProps = _useHover.hoverProps,
     isHovered = _useHover.isHovered;
@@ -116,6 +116,7 @@ CalendarCell.propTypes = {
     focusPreviousPage: _propTypes["default"].func,
     setValue: _propTypes["default"].func,
     focusNextPage: _propTypes["default"].func,
+    setFocused: _propTypes["default"].func,
     setFocusedDate: _propTypes["default"].func,
     isDisabled: _propTypes["default"].bool
   }),

package/lib/cjs/experimental/SaveBar/SaveBar.js

@@ -0,0 +1,85 @@
+"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["default"] = void 0;
+var _reverse = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/reverse"));
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+var _splice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/splice"));
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _buttonAttributes = require("../../components/Button/buttonAttributes");
+var _index = require("../../index");
+var _react2 = require("@emotion/react");
+var _excluded = ["saveButtonProps", "cancelButtonProps", "refreshButtonProps", "isJustifiedRight", "children"];
+var SaveButton = function SaveButton(props) {
+  return (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
+    variant: "primary",
+    "data-id": "save-button"
+  }, props), props.text);
+};
+var CancelButton = function CancelButton(props) {
+  return (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
+    variant: "link",
+    "data-id": "cancel-button"
+  }, props), props.text);
+};
+var RefreshButton = function RefreshButton(props) {
+  return (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
+    "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 = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var ButtonArray = [(0, _react2.jsx)(SaveButton, saveButtonProps), (0, _react2.jsx)(CancelButton, cancelButtonProps)];
+  var Content = function Content() {
+    var _context;
+    var content = isJustifiedRight ? (0, _reverse["default"])(_context = (0, _slice["default"])(ButtonArray).call(ButtonArray)).call(_context) : ButtonArray;
+    if (refreshButtonProps) {
+      (0, _splice["default"])(content).call(content, 1, 0, (0, _react2.jsx)(RefreshButton, refreshButtonProps));
+    }
+    return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _map["default"])(content).call(content, function (child) {
+      return child;
+    }));
+  };
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    isRow: true,
+    gap: "md",
+    sx: {
+      bg: 'white',
+      px: 'lg',
+      py: 'md',
+      justifyContent: isJustifiedRight ? 'right' : 'left'
+    }
+  }, others), children ? (0, _concat["default"])(_context2 = []).call(_context2, children) : (0, _react2.jsx)(Content, null));
+};
+SaveBar.propTypes = {
+  saveButtonProps: _propTypes["default"].shape(_buttonAttributes.buttonPropTypes),
+  cancelButtonProps: _propTypes["default"].shape(_buttonAttributes.buttonPropTypes),
+  refreshButtonProps: _propTypes["default"].shape(_buttonAttributes.buttonPropTypes),
+  isJustifiedRight: _propTypes["default"].bool
+};
+SaveButton.propTypes = {
+  text: _propTypes["default"].string
+};
+CancelButton.propTypes = {
+  text: _propTypes["default"].string
+};
+RefreshButton.propTypes = {
+  text: _propTypes["default"].string
+};
+var _default = SaveBar;
+exports["default"] = _default;

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

@@ -0,0 +1,101 @@
+"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["default"] = exports.WithRefreshButton = exports.WithChildren = exports.JustifiedRight = exports.Default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+var _index = require("../../index");
+var _SaveBar = _interopRequireDefault(require("./SaveBar"));
+var _SaveBar2 = _interopRequireDefault(require("./SaveBar.mdx"));
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Experimental/SaveBar',
+  component: _SaveBar["default"],
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      },
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_SaveBar2["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      }
+    }
+  }
+};
+exports["default"] = _default;
+var Default = function Default(args) {
+  return (0, _react2.jsx)(_SaveBar["default"], (0, _extends2["default"])({
+    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));
+};
+exports.Default = Default;
+var WithRefreshButton = function WithRefreshButton(args) {
+  return (0, _react2.jsx)(_SaveBar["default"], (0, _extends2["default"])({
+    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));
+};
+exports.WithRefreshButton = WithRefreshButton;
+var JustifiedRight = function JustifiedRight() {
+  return (0, _react2.jsx)(_SaveBar["default"], {
+    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
+  });
+};
+exports.JustifiedRight = JustifiedRight;
+var WithChildren = function WithChildren(args) {
+  return (0, _react2.jsx)(_SaveBar["default"], args, (0, _react2.jsx)(_index.Button, null, "Custom Button!"), (0, _react2.jsx)(_index.Button, {
+    variant: "link"
+  }, "Custom Link!"));
+};
+exports.WithChildren = WithChildren;

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

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+var _ = _interopRequireDefault(require("."));
+var _react2 = require("@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 (0, _testWrapper.render)((0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props)));
+};
+var getComponentCustomChildren = function getComponentCustomChildren() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)("button", null, "custom text"), (0, _react2.jsx)("button", null, "Also custom text")));
+};
+var getComponentTextChildren = function getComponentTextChildren() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_["default"], props, "custom text"));
+};
+(0, _testAxe["default"])(getComponent);
+afterEach(function () {
+  jest.resetAllMocks();
+});
+test('SaveBar does render', function () {
+  getComponent({});
+  var element = _testWrapper.screen.getByTestId(testId);
+  expect(element).toBeInTheDocument();
+});
+test('renders save and cancel buttons', function () {
+  getComponent();
+  var saveButton = _testWrapper.screen.getByText(saveButtonProps.text);
+  expect(saveButton).toBeInTheDocument();
+  var cancelButton = _testWrapper.screen.getByText(cancelButtonProps.text);
+  expect(cancelButton).toBeInTheDocument();
+});
+test('renders all three buttons', function () {
+  getComponent({
+    refreshButtonProps: refreshButtonProps
+  });
+  var saveButton = _testWrapper.screen.getByText(saveButtonProps.text);
+  expect(saveButton).toBeInTheDocument();
+  var refreshButton = _testWrapper.screen.getByText(refreshButtonProps.text);
+  expect(refreshButton).toBeInTheDocument();
+  var cancelButton = _testWrapper.screen.getByText(cancelButtonProps.text);
+  expect(cancelButton).toBeInTheDocument();
+});
+test('renders custom children', function () {
+  getComponentCustomChildren();
+  var firstButton = _testWrapper.screen.getByText('custom text');
+  var secondButton = _testWrapper.screen.getByText('Also custom text');
+  expect(firstButton).toBeInTheDocument();
+  expect(secondButton).toBeInTheDocument();
+});
+test('renders custom text', function () {
+  getComponentTextChildren();
+  var firstText = _testWrapper.screen.getByText('custom text');
+  expect(firstText).toBeInTheDocument();
+});
+test('isJustifiedRight reverses order of button', function () {
+  getComponent({
+    isJustifiedRight: true
+  });
+  var buttons = _testWrapper.screen.getAllByRole('button');
+  expect(buttons[0]).toHaveAttribute('data-id', 'cancel-button');
+});

package/lib/cjs/experimental/SaveBar/index.js

@@ -0,0 +1,14 @@
+"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
+});
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _SaveBar["default"];
+  }
+});
+var _SaveBar = _interopRequireDefault(require("./SaveBar"));

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

@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getAriaAttributeProps = exports.ariaAttributesBasePropTypes = exports.ariaAttributeBaseDocSettings = exports.ariaAttributeBaseArgTypes = void 0;
+exports.getAriaAttributeProps = exports.descriptions = exports.ariaAttributesBasePropTypes = exports.ariaAttributeBaseDocSettings = exports.ariaAttributeBaseArgTypes = void 0;
 var _reduce = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/reduce"));
 var _entries = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/entries"));
 var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
@@ -30,6 +30,7 @@ var descriptions = {
   ariaLabel: 'Defines a string value that labels the current element.',
   ariaLabelledby: 'Identifies the element (or elements) that labels the current element.'
 };
+exports.descriptions = descriptions;
 var ariaAttributeBaseDocSettings = {
   type: {
     summary: 'string'