@pingux/astro 2.13.0-alpha.9 → 2.14.0-alpha.0

package/lib/cjs/components/Badge/Badge.styles.js

@@ -19,7 +19,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 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 baseBadge = {
   cursor: 'default',
-  p: '3px 5px 4px 5px',
+  p: '3px 5px 3px 5px',
   alignItems: 'center',
   justifyContent: 'center',
   minWidth: '50px',

package/lib/cjs/experimental/{SaveBar/SaveBar.js → ButtonBar/ButtonBar.js}

@@ -36,7 +36,7 @@ var RefreshButton = function RefreshButton(props) {
     "data-id": "refresh-button"
   }, props), props.text);
 };
-var SaveBar = function SaveBar(props) {
+var ButtonBar = function ButtonBar(props) {
   var _context2;
   var saveButtonProps = props.saveButtonProps,
     cancelButtonProps = props.cancelButtonProps,
@@ -66,7 +66,7 @@ var SaveBar = function SaveBar(props) {
     }
   }, others), children ? (0, _concat["default"])(_context2 = []).call(_context2, children) : (0, _react2.jsx)(Content, null));
 };
-SaveBar.propTypes = {
+ButtonBar.propTypes = {
   saveButtonProps: _propTypes["default"].shape(_buttonAttributes.buttonPropTypes),
   cancelButtonProps: _propTypes["default"].shape(_buttonAttributes.buttonPropTypes),
   refreshButtonProps: _propTypes["default"].shape(_buttonAttributes.buttonPropTypes),
@@ -81,5 +81,5 @@ CancelButton.propTypes = {
 RefreshButton.propTypes = {
   text: _propTypes["default"].string
 };
-var _default = SaveBar;
+var _default = ButtonBar;
 exports["default"] = _default;

package/lib/cjs/experimental/{SaveBar/SaveBar.mdx → ButtonBar/ButtonBar.mdx}

@@ -1,8 +1,8 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Experimental/SaveBar/SaveBar" />
+<Meta title="Experimental/ButtonBar/ButtonBar" />
 
-# SaveBar
+# ButtonBar
 
 This is a composed component that renders children in a simplified, organized and consistent manner.
 
@@ -10,4 +10,4 @@ The default children are controlled by three prop objects, **saveButtonProps**,
 
 The **isJustifiedRight** prop will reverse the order of the children, and justify them to the right.
 
-Supplying the SaveBar with children using default React syntax will override the default render and render the custom children.
+Supplying the ButtonBar with children using default React syntax will override the default render and render the custom children.

package/lib/cjs/experimental/{SaveBar/SaveBar.stories.js → ButtonBar/ButtonBar.stories.js}

@@ -10,25 +10,25 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 var _react = _interopRequireDefault(require("react"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _ = require("../..");
-var _SaveBar = _interopRequireDefault(require("./SaveBar.mdx"));
+var _ButtonBar = _interopRequireDefault(require("./ButtonBar.mdx"));
 var _react2 = require("@emotion/react");
 var _default = {
-  title: 'Experimental/SaveBar',
-  component: _.SaveBar,
+  title: 'Experimental/ButtonBar',
+  component: _.ButtonBar,
   parameters: {
     docs: {
       source: {
         type: 'code'
       },
       page: function page() {
-        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_SaveBar["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_ButtonBar["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
       }
     }
   }
 };
 exports["default"] = _default;
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_.SaveBar, (0, _extends2["default"])({
+  return (0, _react2.jsx)(_.ButtonBar, (0, _extends2["default"])({
     saveButtonProps: {
       key: 'save button',
       text: 'Save',
@@ -47,7 +47,7 @@ var Default = function Default(args) {
 };
 exports.Default = Default;
 var WithRefreshButton = function WithRefreshButton(args) {
-  return (0, _react2.jsx)(_.SaveBar, (0, _extends2["default"])({
+  return (0, _react2.jsx)(_.ButtonBar, (0, _extends2["default"])({
     saveButtonProps: {
       key: 'save button',
       text: 'Save',
@@ -73,7 +73,7 @@ var WithRefreshButton = function WithRefreshButton(args) {
 };
 exports.WithRefreshButton = WithRefreshButton;
 var JustifiedRight = function JustifiedRight() {
-  return (0, _react2.jsx)(_.SaveBar, {
+  return (0, _react2.jsx)(_.ButtonBar, {
     saveButtonProps: {
       key: 'next button',
       text: 'Next',
@@ -93,7 +93,7 @@ var JustifiedRight = function JustifiedRight() {
 };
 exports.JustifiedRight = JustifiedRight;
 var WithChildren = function WithChildren(args) {
-  return (0, _react2.jsx)(_.SaveBar, args, (0, _react2.jsx)(_.Button, null, "Custom Button!"), (0, _react2.jsx)(_.Button, {
+  return (0, _react2.jsx)(_.ButtonBar, args, (0, _react2.jsx)(_.Button, null, "Custom Button!"), (0, _react2.jsx)(_.Button, {
     variant: "link"
   }, "Custom Link!"));
 };

package/lib/cjs/experimental/{SaveBar/SaveBar.test.js → ButtonBar/ButtonBar.test.js}

@@ -7,7 +7,7 @@ var _ = require("../..");
 var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 var _react2 = require("@emotion/react");
-var testId = 'test-SaveBar';
+var testId = 'test-ButtonBar';
 var saveButtonProps = {
   key: 'save button',
   text: 'Save',
@@ -36,21 +36,21 @@ var defaultProps = {
 };
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _testWrapper.render)((0, _react2.jsx)(_.SaveBar, (0, _extends2["default"])({}, defaultProps, props)));
+  return (0, _testWrapper.render)((0, _react2.jsx)(_.ButtonBar, (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)(_.SaveBar, (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)("button", null, "custom text"), (0, _react2.jsx)("button", null, "Also custom text")));
+  return (0, _testWrapper.render)((0, _react2.jsx)(_.ButtonBar, (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)(_.SaveBar, props, "custom text"));
+  return (0, _testWrapper.render)((0, _react2.jsx)(_.ButtonBar, props, "custom text"));
 };
 (0, _testAxe["default"])(getComponent);
 afterEach(function () {
   jest.resetAllMocks();
 });
-test('SaveBar does render', function () {
+test('ButtonBar does render', function () {
   getComponent({});
   var element = _testWrapper.screen.getByTestId(testId);
   expect(element).toBeInTheDocument();

package/lib/cjs/experimental/{SaveBar → ButtonBar}/index.js

@@ -8,7 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
 _Object$defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _SaveBar["default"];
+    return _ButtonBar["default"];
   }
 });
-var _SaveBar = _interopRequireDefault(require("./SaveBar"));
+var _ButtonBar = _interopRequireDefault(require("./ButtonBar"));

package/lib/cjs/experimental/ListViewItem/ListViewItem.mdx

@@ -10,6 +10,14 @@ The ListViewItem allows easy creation of list items. Styles have been included t
 This component is intended to be used inside a ListView component. See the [ListAndPanel](./?path=/story/experimental-recipes-listandpanel--list-and-panel) and [ScrollableListView](./?path=/story/experimental-recipes-scrollablelistview--scrollable-list-view)
 recipes for a more detailed examples.
 
+#### Commonly Used Components
+There are a few commonly used components we've created which have the correct styling pre-applied and we recommend you use these over their defaults. These go into the children of the ListViewItem component. These components are:
+* `ListViewItemSwitchField` - Use in place of SwitchField. This control is used to activate / deactivate an item in a list. Apply an aria-label to this component which describes the action when used, e.g. `aria-label={item.isActive ? 'deactivate item' : 'activate item'}` .
+
+* `ListViewItemEditButton` - Use in place of IconButton when editing is a primary action.
+
+* `ListViewItemMenu` - Use in place of Menu. This control is used to offer a popup menu of several actions which are less important / less commonly used.
+
 #### Icons and Images
 Add an icon by passing an mdi or svg icon to the `data.icon` prop. Default size is 25px.
 

package/lib/cjs/index.d.ts

@@ -161,6 +161,7 @@ export * from './types';
 export { OverlayProvider, useOverlayPosition, useOverlayTrigger } from 'react-aria';
 export { Item, Section, useOverlayTriggerState } from 'react-stately';
 export { TableBody as DataTableBody, Cell as DataTableCell, Column as DataTableColumn, TableHeader as DataTableHeader, Row as DataTableRow, } from 'react-stately';
+export { default as ButtonBar } from './experimental/ButtonBar/ButtonBar';
 export { default as EditButton } from './experimental/EditButton';
 export { default as ListViewItemEditButton } from './experimental/ListViewItem/controls/ListViewItemEditButton';
 export { default as ListViewItemMenu } from './experimental/ListViewItem/controls/ListViewItemMenu';
@@ -170,4 +171,3 @@ export { default as PanelHeader } from './experimental/PanelHeader';
 export { default as PanelHeaderCloseButton } from './experimental/PanelHeader/controls/PanelHeaderCloseButton';
 export { default as PanelHeaderMenu } from './experimental/PanelHeader/controls/PanelHeaderMenu';
 export { default as PanelHeaderSwitchField } from './experimental/PanelHeader/controls/PanelHeaderSwitchField';
-export { default as SaveBar } from './experimental/SaveBar/SaveBar';

package/lib/cjs/index.js

@@ -110,6 +110,7 @@ var _exportNames = {
   DataTableColumn: true,
   DataTableHeader: true,
   DataTableRow: true,
+  ButtonBar: true,
   EditButton: true,
   ListViewItemEditButton: true,
   ListViewItemMenu: true,
@@ -118,8 +119,7 @@ var _exportNames = {
   PanelHeader: true,
   PanelHeaderCloseButton: true,
   PanelHeaderMenu: true,
-  PanelHeaderSwitchField: true,
-  SaveBar: true
+  PanelHeaderSwitchField: true
 };
 _Object$defineProperty(exports, "AccordionGridGroup", {
   enumerable: true,
@@ -199,6 +199,12 @@ _Object$defineProperty(exports, "Button", {
     return _Button["default"];
   }
 });
+_Object$defineProperty(exports, "ButtonBar", {
+  enumerable: true,
+  get: function get() {
+    return _ButtonBar["default"];
+  }
+});
 _Object$defineProperty(exports, "Calendar", {
   enumerable: true,
   get: function get() {
@@ -607,12 +613,6 @@ _Object$defineProperty(exports, "RockerButtonGroup", {
     return _RockerButtonGroup["default"];
   }
 });
-_Object$defineProperty(exports, "SaveBar", {
-  enumerable: true,
-  get: function get() {
-    return _SaveBar["default"];
-  }
-});
 _Object$defineProperty(exports, "ScrollBox", {
   enumerable: true,
   get: function get() {
@@ -1671,6 +1671,7 @@ _forEachInstanceProperty(_context74 = _Object$keys(_types)).call(_context74, fun
 });
 var _reactAria = require("react-aria");
 var _reactStately = require("react-stately");
+var _ButtonBar = _interopRequireDefault(require("./experimental/ButtonBar/ButtonBar"));
 var _EditButton = _interopRequireDefault(require("./experimental/EditButton"));
 var _ListViewItemEditButton = _interopRequireDefault(require("./experimental/ListViewItem/controls/ListViewItemEditButton"));
 var _ListViewItemMenu = _interopRequireDefault(require("./experimental/ListViewItem/controls/ListViewItemMenu"));
@@ -1680,6 +1681,5 @@ var _PanelHeader = _interopRequireDefault(require("./experimental/PanelHeader"))
 var _PanelHeaderCloseButton = _interopRequireDefault(require("./experimental/PanelHeader/controls/PanelHeaderCloseButton"));
 var _PanelHeaderMenu = _interopRequireDefault(require("./experimental/PanelHeader/controls/PanelHeaderMenu"));
 var _PanelHeaderSwitchField = _interopRequireDefault(require("./experimental/PanelHeader/controls/PanelHeaderSwitchField"));
-var _SaveBar = _interopRequireDefault(require("./experimental/SaveBar/SaveBar"));
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/lib/cjs/recipes/AttributeMapping.stories.js

@@ -22,6 +22,8 @@ var _CreateIcon = _interopRequireDefault(require("@pingux/mdi-react/CreateIcon")
 var _DeleteIcon = _interopRequireDefault(require("@pingux/mdi-react/DeleteIcon"));
 var _uuid = require("uuid");
 var _index = require("../index");
+var _figmaLinks = require("../utils/designUtils/figmaLinks.js");
+var _statuses = _interopRequireDefault(require("../utils/devUtils/constants/statuses"));
 var _react2 = require("@emotion/react");
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -61,6 +63,11 @@ var sx = {
       color: '#253746'
     }
   },
+  calloutSx: {
+    width: '450px',
+    marginBottom: 'xs',
+    paddingRight: 'md'
+  },
   createIconButton: {
     marginLeft: 'xs'
   },
@@ -268,37 +275,23 @@ var Display = function Display() {
   })));
 };
 exports.Display = Display;
+Display.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.attributeMappings.display
+  }
+};
 var DisplayWithError = function DisplayWithError() {
   var withError = true;
-  var withErrorSx = {
-    errorBox: {
-      flexDirection: 'row !important',
-      alignItems: 'center',
-      padding: '13px 12px 13px 15px',
-      gap: 'md',
-      border: '1px solid #A31300',
-      width: '450px',
-      marginBottom: 'xs'
-    },
-    text: {
-      fontSize: 'sm',
-      lineHeight: '15px'
-    }
-  };
-  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(Title, null), withError && (0, _react2.jsx)(_index.Box, {
-    sx: withErrorSx.errorBox
-  }, (0, _react2.jsx)(_index.Icon, {
-    size: 24,
-    icon: _AlertCircleIcon["default"],
-    color: "#A31300",
-    title: {
-      name: 'Alert Circle Icon'
-    }
-  }), (0, _react2.jsx)(_index.Text, {
-    sx: withErrorSx.text,
-    id: helperTextId,
-    role: "alert"
-  }, "This attribute is unavailable. Please map the attribute again or re-map to a different attribute.")), (0, _react2.jsx)(_index.Box, {
+  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(Title, null), (0, _react2.jsx)(_index.Callout, {
+    status: _statuses["default"].ERROR,
+    sx: sx.calloutSx
+  }, (0, _react2.jsx)(_index.Text, null, "You\u2019ve got problems. Allow me to tell you about them in some detail so that you can address them.", (0, _react2.jsx)(_index.Link, {
+    href: "https://pingidentity.com",
+    target: "_blank",
+    "aria-label": "".concat(_statuses["default"].ERROR, "-callout"),
+    variant: "app"
+  }, ' ', "Read More"))), (0, _react2.jsx)(_index.Box, {
     sx: sx.defaultFieldsWrapperBox
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
@@ -421,6 +414,12 @@ var Edit = function Edit() {
   })))));
 };
 exports.Edit = Edit;
+Edit.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.attributeMappings.edit
+  }
+};
 var EditRow = /*#__PURE__*/(0, _react.memo)(function (props) {
   var isDisabled = props.isDisabled,
     isNewRow = props.isNewRow,

package/lib/cjs/utils/designUtils/figmaLinks.js

@@ -9,6 +9,11 @@ var FIGMA_LINKS = {
   accordionGroup: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=446-1808&t=8Wwd3tIBh3GEjCJB-0'
   },
+  attributeMappings: {
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=15076%3A33905&mode=dev',
+    display: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=15077-33982&t=VgqEexa1CXAXfPpp-0',
+    edit: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=15077-35822&t=VgqEexa1CXAXfPpp-0'
+  },
   badge: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=1899-11550&t=VgqEexa1CXAXfPpp-0',
     countBadge: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=4255%3A12558&t=3b86het2R9G2Zyo2-1'

package/lib/components/Badge/Badge.styles.js

@@ -12,7 +12,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { focusWithCroppedOutline } from '../Button/Buttons.styles';
 export var baseBadge = {
   cursor: 'default',
-  p: '3px 5px 4px 5px',
+  p: '3px 5px 3px 5px',
   alignItems: 'center',
   justifyContent: 'center',
   minWidth: '50px',

package/lib/experimental/{SaveBar/SaveBar.js → ButtonBar/ButtonBar.js}

@@ -28,7 +28,7 @@ var RefreshButton = function RefreshButton(props) {
     "data-id": "refresh-button"
   }, props), props.text);
 };
-var SaveBar = function SaveBar(props) {
+var ButtonBar = function ButtonBar(props) {
   var _context2;
   var saveButtonProps = props.saveButtonProps,
     cancelButtonProps = props.cancelButtonProps,
@@ -58,7 +58,7 @@ var SaveBar = function SaveBar(props) {
     }
   }, others), children ? _concatInstanceProperty(_context2 = []).call(_context2, children) : ___EmotionJSX(Content, null));
 };
-SaveBar.propTypes = {
+ButtonBar.propTypes = {
   saveButtonProps: PropTypes.shape(buttonPropTypes),
   cancelButtonProps: PropTypes.shape(buttonPropTypes),
   refreshButtonProps: PropTypes.shape(buttonPropTypes),
@@ -73,4 +73,4 @@ CancelButton.propTypes = {
 RefreshButton.propTypes = {
   text: PropTypes.string
 };
-export default SaveBar;
+export default ButtonBar;

package/lib/experimental/{SaveBar/SaveBar.mdx → ButtonBar/ButtonBar.mdx}

@@ -1,8 +1,8 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Experimental/SaveBar/SaveBar" />
+<Meta title="Experimental/ButtonBar/ButtonBar" />
 
-# SaveBar
+# ButtonBar
 
 This is a composed component that renders children in a simplified, organized and consistent manner.
 
@@ -10,4 +10,4 @@ The default children are controlled by three prop objects, **saveButtonProps**,
 
 The **isJustifiedRight** prop will reverse the order of the children, and justify them to the right.
 
-Supplying the SaveBar with children using default React syntax will override the default render and render the custom children.
+Supplying the ButtonBar with children using default React syntax will override the default render and render the custom children.

package/lib/experimental/{SaveBar/SaveBar.stories.js → ButtonBar/ButtonBar.stories.js}

@@ -1,25 +1,25 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Button, SaveBar } from '../..';
-import SaveBarReadme from './SaveBar.mdx';
+import { Button, ButtonBar } from '../..';
+import ButtonBarReadme from './ButtonBar.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Experimental/SaveBar',
-  component: SaveBar,
+  title: 'Experimental/ButtonBar',
+  component: ButtonBar,
   parameters: {
     docs: {
       source: {
         type: 'code'
       },
       page: function page() {
-        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(SaveBarReadme, null), ___EmotionJSX(DocsLayout, null));
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ButtonBarReadme, null), ___EmotionJSX(DocsLayout, null));
       }
     }
   }
 };
 export var Default = function Default(args) {
-  return ___EmotionJSX(SaveBar, _extends({
+  return ___EmotionJSX(ButtonBar, _extends({
     saveButtonProps: {
       key: 'save button',
       text: 'Save',
@@ -37,7 +37,7 @@ export var Default = function Default(args) {
   }, args));
 };
 export var WithRefreshButton = function WithRefreshButton(args) {
-  return ___EmotionJSX(SaveBar, _extends({
+  return ___EmotionJSX(ButtonBar, _extends({
     saveButtonProps: {
       key: 'save button',
       text: 'Save',
@@ -62,7 +62,7 @@ export var WithRefreshButton = function WithRefreshButton(args) {
   }, args));
 };
 export var JustifiedRight = function JustifiedRight() {
-  return ___EmotionJSX(SaveBar, {
+  return ___EmotionJSX(ButtonBar, {
     saveButtonProps: {
       key: 'next button',
       text: 'Next',
@@ -81,7 +81,7 @@ export var JustifiedRight = function JustifiedRight() {
   });
 };
 export var WithChildren = function WithChildren(args) {
-  return ___EmotionJSX(SaveBar, args, ___EmotionJSX(Button, null, "Custom Button!"), ___EmotionJSX(Button, {
+  return ___EmotionJSX(ButtonBar, args, ___EmotionJSX(Button, null, "Custom Button!"), ___EmotionJSX(Button, {
     variant: "link"
   }, "Custom Link!"));
 };

package/lib/experimental/{SaveBar/SaveBar.test.js → ButtonBar/ButtonBar.test.js}

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
-import { SaveBar } from '../..';
+import { ButtonBar } from '../..';
 import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var testId = 'test-SaveBar';
+var testId = 'test-ButtonBar';
 var saveButtonProps = {
   key: 'save button',
   text: 'Save',
@@ -33,21 +33,21 @@ var defaultProps = {
 };
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(SaveBar, _extends({}, defaultProps, props)));
+  return render(___EmotionJSX(ButtonBar, _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")));
+  return render(___EmotionJSX(ButtonBar, _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"));
+  return render(___EmotionJSX(ButtonBar, props, "custom text"));
 };
 axeTest(getComponent);
 afterEach(function () {
   jest.resetAllMocks();
 });
-test('SaveBar does render', function () {
+test('ButtonBar does render', function () {
   getComponent({});
   var element = screen.getByTestId(testId);
   expect(element).toBeInTheDocument();

package/lib/experimental/ButtonBar/index.js

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

package/lib/experimental/ListViewItem/ListViewItem.mdx

@@ -10,6 +10,14 @@ The ListViewItem allows easy creation of list items. Styles have been included t
 This component is intended to be used inside a ListView component. See the [ListAndPanel](./?path=/story/experimental-recipes-listandpanel--list-and-panel) and [ScrollableListView](./?path=/story/experimental-recipes-scrollablelistview--scrollable-list-view)
 recipes for a more detailed examples.
 
+#### Commonly Used Components
+There are a few commonly used components we've created which have the correct styling pre-applied and we recommend you use these over their defaults. These go into the children of the ListViewItem component. These components are:
+* `ListViewItemSwitchField` - Use in place of SwitchField. This control is used to activate / deactivate an item in a list. Apply an aria-label to this component which describes the action when used, e.g. `aria-label={item.isActive ? 'deactivate item' : 'activate item'}` .
+
+* `ListViewItemEditButton` - Use in place of IconButton when editing is a primary action.
+
+* `ListViewItemMenu` - Use in place of Menu. This control is used to offer a popup menu of several actions which are less important / less commonly used.
+
 #### Icons and Images
 Add an icon by passing an mdi or svg icon to the `data.icon` prop. Default size is 25px.
 

package/lib/index.js

@@ -170,6 +170,7 @@ export { Item, Section, useOverlayTriggerState } from 'react-stately';
 export { TableBody as DataTableBody, Cell as DataTableCell, Column as DataTableColumn, TableHeader as DataTableHeader, Row as DataTableRow } from 'react-stately';
 
 // Experimental
+export { default as ButtonBar } from './experimental/ButtonBar/ButtonBar';
 export { default as EditButton } from './experimental/EditButton';
 export { default as ListViewItemEditButton } from './experimental/ListViewItem/controls/ListViewItemEditButton';
 export { default as ListViewItemMenu } from './experimental/ListViewItem/controls/ListViewItemMenu';
@@ -178,5 +179,4 @@ export { default as ListViewItem } from './experimental/ListViewItem/ListViewIte
 export { default as PanelHeader } from './experimental/PanelHeader';
 export { default as PanelHeaderCloseButton } from './experimental/PanelHeader/controls/PanelHeaderCloseButton';
 export { default as PanelHeaderMenu } from './experimental/PanelHeader/controls/PanelHeaderMenu';
-export { default as PanelHeaderSwitchField } from './experimental/PanelHeader/controls/PanelHeaderSwitchField';
-export { default as SaveBar } from './experimental/SaveBar/SaveBar';
+export { default as PanelHeaderSwitchField } from './experimental/PanelHeader/controls/PanelHeaderSwitchField';

package/lib/recipes/AttributeMapping.stories.js

@@ -10,7 +10,9 @@ import CogsIcon from '@pingux/mdi-react/CogsIcon';
 import CreateIcon from '@pingux/mdi-react/CreateIcon';
 import DeleteIcon from '@pingux/mdi-react/DeleteIcon';
 import { v4 as uuid } from 'uuid';
-import { Badge, Box, Button, ComboBoxField, HelpHint, Icon, IconButton, Item, ScrollBox, Separator, Text, TextField } from '../index';
+import { Badge, Box, Button, Callout, ComboBoxField, HelpHint, Icon, IconButton, Item, Link, ScrollBox, Separator, Text, TextField } from '../index';
+import { FIGMA_LINKS } from '../utils/designUtils/figmaLinks.js';
+import statuses from '../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Attribute Mappings'
@@ -47,6 +49,11 @@ var sx = {
       color: '#253746'
     }
   },
+  calloutSx: {
+    width: '450px',
+    marginBottom: 'xs',
+    paddingRight: 'md'
+  },
   createIconButton: {
     marginLeft: 'xs'
   },
@@ -253,37 +260,23 @@ export var Display = function Display() {
     rightValue: "password"
   })));
 };
+Display.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.attributeMappings.display
+  }
+};
 export var DisplayWithError = function DisplayWithError() {
   var withError = true;
-  var withErrorSx = {
-    errorBox: {
-      flexDirection: 'row !important',
-      alignItems: 'center',
-      padding: '13px 12px 13px 15px',
-      gap: 'md',
-      border: '1px solid #A31300',
-      width: '450px',
-      marginBottom: 'xs'
-    },
-    text: {
-      fontSize: 'sm',
-      lineHeight: '15px'
-    }
-  };
-  return ___EmotionJSX(Box, null, ___EmotionJSX(Title, null), withError && ___EmotionJSX(Box, {
-    sx: withErrorSx.errorBox
-  }, ___EmotionJSX(Icon, {
-    size: 24,
-    icon: AlertCircleIcon,
-    color: "#A31300",
-    title: {
-      name: 'Alert Circle Icon'
-    }
-  }), ___EmotionJSX(Text, {
-    sx: withErrorSx.text,
-    id: helperTextId,
-    role: "alert"
-  }, "This attribute is unavailable. Please map the attribute again or re-map to a different attribute.")), ___EmotionJSX(Box, {
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Title, null), ___EmotionJSX(Callout, {
+    status: statuses.ERROR,
+    sx: sx.calloutSx
+  }, ___EmotionJSX(Text, null, "You\u2019ve got problems. Allow me to tell you about them in some detail so that you can address them.", ___EmotionJSX(Link, {
+    href: "https://pingidentity.com",
+    target: "_blank",
+    "aria-label": "".concat(statuses.ERROR, "-callout"),
+    variant: "app"
+  }, ' ', "Read More"))), ___EmotionJSX(Box, {
     sx: sx.defaultFieldsWrapperBox
   }, ___EmotionJSX(Box, {
     isRow: true,
@@ -404,6 +397,12 @@ export var Edit = function Edit() {
     }));
   })))));
 };
+Edit.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.attributeMappings.edit
+  }
+};
 var EditRow = /*#__PURE__*/memo(function (props) {
   var isDisabled = props.isDisabled,
     isNewRow = props.isNewRow,

package/lib/utils/designUtils/figmaLinks.js

@@ -2,6 +2,11 @@ export var FIGMA_LINKS = {
   accordionGroup: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=446-1808&t=8Wwd3tIBh3GEjCJB-0'
   },
+  attributeMappings: {
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=15076%3A33905&mode=dev',
+    display: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=15077-33982&t=VgqEexa1CXAXfPpp-0',
+    edit: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=15077-35822&t=VgqEexa1CXAXfPpp-0'
+  },
   badge: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=1899-11550&t=VgqEexa1CXAXfPpp-0',
     countBadge: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=4255%3A12558&t=3b86het2R9G2Zyo2-1'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.13.0-alpha.9",
+  "version": "2.14.0-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",

package/lib/experimental/SaveBar/index.js

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