@pingux/astro 2.18.1-alpha.1 → 2.19.0-alpha.0

package/lib/cjs/experimental/ButtonBar/ButtonBar.js

@@ -6,55 +6,18 @@ _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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 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 _excluded = ["align", "children"];
 var ButtonBar = function ButtonBar(props) {
-  var _context2;
-  var saveButtonProps = props.saveButtonProps,
-    cancelButtonProps = props.cancelButtonProps,
-    refreshButtonProps = props.refreshButtonProps,
-    isJustifiedRight = props.isJustifiedRight,
+  var _props$align = props.align,
+    align = _props$align === void 0 ? 'left' : _props$align,
     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",
@@ -62,24 +25,12 @@ var ButtonBar = function ButtonBar(props) {
       bg: 'white',
       px: 'lg',
       py: 'md',
-      justifyContent: isJustifiedRight ? 'right' : 'left'
+      justifyContent: align === 'right' ? 'right' : 'left'
     }
-  }, others), children ? (0, _concat["default"])(_context2 = []).call(_context2, children) : (0, _react2.jsx)(Content, null));
+  }, others), children);
 };
 ButtonBar.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
+  align: _propTypes["default"].oneOf(['left', 'right'])
 };
 var _default = ButtonBar;
 exports["default"] = _default;

package/lib/cjs/experimental/ButtonBar/ButtonBar.mdx

@@ -6,8 +6,4 @@ import { Meta } from '@storybook/addon-docs';
 
 This is a composed component that renders children in a simplified, organized and consistent manner.
 
-The default children are controlled by three prop objects, **saveButtonProps**, **cancelButtonProps**, and **refreshButtonProps**. The SaveButton and the CancelButton will render by default. The RefreshButton will only render if **refreshButtonProps** are supplied.
-
-The **isJustifiedRight** prop will reverse the order of the children, and justify them to the right.
-
-Supplying the ButtonBar with children using default React syntax will override the default render and render the custom children.
+If the **align** prop is set to right it will justify the children to the right. Default is left justification.

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

@@ -5,8 +5,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _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"));
+exports["default"] = exports.RightAligned = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _ = require("../..");
@@ -24,77 +23,47 @@ var _default = {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_ButtonBar["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
       }
     }
+  },
+  argTypes: {
+    align: {
+      control: {
+        type: 'text'
+      }
+    }
   }
 };
 exports["default"] = _default;
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_.ButtonBar, (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');
-      }
+  return (0, _react2.jsx)(_.ButtonBar, args, (0, _react2.jsx)(_.Button, {
+    variant: "primary",
+    "data-id": "save-button",
+    onPress: function onPress() {
+      return alert('Save button pressed');
     }
-  }, args));
-};
-exports.Default = Default;
-var WithRefreshButton = function WithRefreshButton(args) {
-  return (0, _react2.jsx)(_.ButtonBar, (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');
-      }
+  }, "Save"), (0, _react2.jsx)(_.Button, {
+    variant: "link",
+    "data-id": "cancel-button",
+    onPress: function onPress() {
+      return alert('Cancel button pressed');
     }
-  }, args));
+  }, "Cancel"));
 };
-exports.WithRefreshButton = WithRefreshButton;
-var JustifiedRight = function JustifiedRight() {
+exports.Default = Default;
+var RightAligned = function RightAligned() {
   return (0, _react2.jsx)(_.ButtonBar, {
-    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)(_.ButtonBar, args, (0, _react2.jsx)(_.Button, null, "Custom Button!"), (0, _react2.jsx)(_.Button, {
-    variant: "link"
-  }, "Custom Link!"));
+    align: "right"
+  }, (0, _react2.jsx)(_.Button, {
+    variant: "primary",
+    "data-id": "next-button",
+    onPress: function onPress() {
+      return alert('Next button pressed');
+    }
+  }, "Next"), (0, _react2.jsx)(_.Button, {
+    variant: "link",
+    "data-id": "cancel-button",
+    onPress: function onPress() {
+      return alert('Cancel button pressed');
+    }
+  }, "Cancel"));
 };
-exports.WithChildren = WithChildren;
+exports.RightAligned = RightAligned;

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

@@ -8,35 +8,24 @@ var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 var _react2 = require("@emotion/react");
 var testId = 'test-ButtonBar';
-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
+  'data-testid': testId
 };
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _testWrapper.render)((0, _react2.jsx)(_.ButtonBar, (0, _extends2["default"])({}, defaultProps, props)));
+  return (0, _testWrapper.render)((0, _react2.jsx)(_.ButtonBar, (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_.Button, {
+    variant: "primary",
+    "data-id": "save-button",
+    onPress: function onPress() {
+      return alert('Save button pressed');
+    }
+  }, "Save"), (0, _react2.jsx)(_.Button, {
+    variant: "link",
+    "data-id": "cancel-button",
+    onPress: function onPress() {
+      return alert('Cancel button pressed');
+    }
+  }, "Cancel")));
 };
 var getComponentCustomChildren = function getComponentCustomChildren() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -55,22 +44,11 @@ test('ButtonBar does render', function () {
   var element = _testWrapper.screen.getByTestId(testId);
   expect(element).toBeInTheDocument();
 });
-test('renders save and cancel buttons', function () {
+test('renders child save and cancel buttons', function () {
   getComponent();
-  var saveButton = _testWrapper.screen.getByText(saveButtonProps.text);
+  var saveButton = _testWrapper.screen.getByText('Save');
   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);
+  var cancelButton = _testWrapper.screen.getByText('Cancel');
   expect(cancelButton).toBeInTheDocument();
 });
 test('renders custom children', function () {
@@ -85,10 +63,29 @@ test('renders custom text', function () {
   var firstText = _testWrapper.screen.getByText('custom text');
   expect(firstText).toBeInTheDocument();
 });
-test('isJustifiedRight reverses order of button', function () {
+test('justify-content right when align prop set to right', function () {
   getComponent({
-    isJustifiedRight: true
+    align: 'right'
   });
-  var buttons = _testWrapper.screen.getAllByRole('button');
-  expect(buttons[0]).toHaveAttribute('data-id', 'cancel-button');
+  var element = _testWrapper.screen.getByTestId(testId);
+  expect(element).toHaveStyleRule('justify-content', 'right');
+});
+test('justify-content left when align prop is set to left', function () {
+  getComponent({
+    align: 'left'
+  });
+  var element = _testWrapper.screen.getByTestId(testId);
+  expect(element).toHaveStyleRule('justify-content', 'left');
+});
+test('justify-content left when align prop is excluded', function () {
+  getComponent();
+  var element = _testWrapper.screen.getByTestId(testId);
+  expect(element).toHaveStyleRule('justify-content', 'left');
+});
+test('an error is thrown when align has invalid prop value', function () {
+  expect(function () {
+    return getComponent({
+      align: 'rihgt'
+    });
+  }).toThrow('Failed prop type');
 });

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

@@ -18,6 +18,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _react = _interopRequireDefault(require("react"));
 var _TrashIcon = _interopRequireDefault(require("@pingux/mdi-react/TrashIcon"));
 var _index = require("../index");
+var _figmaLinks = require("../utils/designUtils/figmaLinks.js");
 var _react2 = require("@emotion/react");
 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; }
@@ -198,6 +199,12 @@ var DisplaySectionHeader = function DisplaySectionHeader(_ref2) {
   }, ofTheConditionsAreTrueCopy));
 };
 exports.DisplaySectionHeader = DisplaySectionHeader;
+Display.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.conditionFilter.display
+  }
+};
 var Edit = function Edit() {
   var trashButton = (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "deleteButton",
@@ -494,4 +501,10 @@ var Edit = function Edit() {
     alignSelf: "start"
   }, trashButton))));
 };
-exports.Edit = Edit;
+exports.Edit = Edit;
+Edit.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.conditionFilter.edit
+  }
+};

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

@@ -39,6 +39,10 @@ var FIGMA_LINKS = {
   collapsiblePanel: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=14546-33229&t=VgqEexa1CXAXfPpp-0'
   },
+  conditionFilter: {
+    display: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=218%3A574&mode=dev',
+    edit: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=218%3A597&mode=dev'
+  },
   copyText: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=218-1442&t=8Wwd3tIBh3GEjCJB-0'
   },

package/lib/experimental/ButtonBar/ButtonBar.js

@@ -1,52 +1,15 @@
-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 _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["align", "children"];
 import React from 'react';
 import PropTypes from 'prop-types';
-import { buttonPropTypes } from '../../components/Button/buttonAttributes';
-import { Box, Button } from '../../index';
+import { Box } 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 ButtonBar = function ButtonBar(props) {
-  var _context2;
-  var saveButtonProps = props.saveButtonProps,
-    cancelButtonProps = props.cancelButtonProps,
-    refreshButtonProps = props.refreshButtonProps,
-    isJustifiedRight = props.isJustifiedRight,
+  var _props$align = props.align,
+    align = _props$align === void 0 ? 'left' : _props$align,
     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",
@@ -54,23 +17,11 @@ var ButtonBar = function ButtonBar(props) {
       bg: 'white',
       px: 'lg',
       py: 'md',
-      justifyContent: isJustifiedRight ? 'right' : 'left'
+      justifyContent: align === 'right' ? 'right' : 'left'
     }
-  }, others), children ? _concatInstanceProperty(_context2 = []).call(_context2, children) : ___EmotionJSX(Content, null));
+  }, others), children);
 };
 ButtonBar.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
+  align: PropTypes.oneOf(['left', 'right'])
 };
 export default ButtonBar;

package/lib/experimental/ButtonBar/ButtonBar.mdx

@@ -6,8 +6,4 @@ import { Meta } from '@storybook/addon-docs';
 
 This is a composed component that renders children in a simplified, organized and consistent manner.
 
-The default children are controlled by three prop objects, **saveButtonProps**, **cancelButtonProps**, and **refreshButtonProps**. The SaveButton and the CancelButton will render by default. The RefreshButton will only render if **refreshButtonProps** are supplied.
-
-The **isJustifiedRight** prop will reverse the order of the children, and justify them to the right.
-
-Supplying the ButtonBar with children using default React syntax will override the default render and render the custom children.
+If the **align** prop is set to right it will justify the children to the right. Default is left justification.

package/lib/experimental/ButtonBar/ButtonBar.stories.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Button, ButtonBar } from '../..';
@@ -16,72 +15,44 @@ export default {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ButtonBarReadme, null), ___EmotionJSX(DocsLayout, null));
       }
     }
+  },
+  argTypes: {
+    align: {
+      control: {
+        type: 'text'
+      }
+    }
   }
 };
 export var Default = function Default(args) {
-  return ___EmotionJSX(ButtonBar, _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');
-      }
+  return ___EmotionJSX(ButtonBar, args, ___EmotionJSX(Button, {
+    variant: "primary",
+    "data-id": "save-button",
+    onPress: function onPress() {
+      return alert('Save button pressed');
     }
-  }, args));
-};
-export var WithRefreshButton = function WithRefreshButton(args) {
-  return ___EmotionJSX(ButtonBar, _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');
-      }
+  }, "Save"), ___EmotionJSX(Button, {
+    variant: "link",
+    "data-id": "cancel-button",
+    onPress: function onPress() {
+      return alert('Cancel button pressed');
     }
-  }, args));
+  }, "Cancel"));
 };
-export var JustifiedRight = function JustifiedRight() {
+export var RightAligned = function RightAligned() {
   return ___EmotionJSX(ButtonBar, {
-    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(ButtonBar, args, ___EmotionJSX(Button, null, "Custom Button!"), ___EmotionJSX(Button, {
-    variant: "link"
-  }, "Custom Link!"));
+    align: "right"
+  }, ___EmotionJSX(Button, {
+    variant: "primary",
+    "data-id": "next-button",
+    onPress: function onPress() {
+      return alert('Next button pressed');
+    }
+  }, "Next"), ___EmotionJSX(Button, {
+    variant: "link",
+    "data-id": "cancel-button",
+    onPress: function onPress() {
+      return alert('Cancel button pressed');
+    }
+  }, "Cancel"));
 };

package/lib/experimental/ButtonBar/ButtonBar.test.js

@@ -1,39 +1,28 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
-import { ButtonBar } from '../..';
+import { Button, 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-ButtonBar';
-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
+  'data-testid': testId
 };
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(ButtonBar, _extends({}, defaultProps, props)));
+  return render(___EmotionJSX(ButtonBar, _extends({}, defaultProps, props), ___EmotionJSX(Button, {
+    variant: "primary",
+    "data-id": "save-button",
+    onPress: function onPress() {
+      return alert('Save button pressed');
+    }
+  }, "Save"), ___EmotionJSX(Button, {
+    variant: "link",
+    "data-id": "cancel-button",
+    onPress: function onPress() {
+      return alert('Cancel button pressed');
+    }
+  }, "Cancel")));
 };
 var getComponentCustomChildren = function getComponentCustomChildren() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -52,22 +41,11 @@ test('ButtonBar does render', function () {
   var element = screen.getByTestId(testId);
   expect(element).toBeInTheDocument();
 });
-test('renders save and cancel buttons', function () {
+test('renders child save and cancel buttons', function () {
   getComponent();
-  var saveButton = screen.getByText(saveButtonProps.text);
+  var saveButton = screen.getByText('Save');
   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);
+  var cancelButton = screen.getByText('Cancel');
   expect(cancelButton).toBeInTheDocument();
 });
 test('renders custom children', function () {
@@ -82,10 +60,29 @@ test('renders custom text', function () {
   var firstText = screen.getByText('custom text');
   expect(firstText).toBeInTheDocument();
 });
-test('isJustifiedRight reverses order of button', function () {
+test('justify-content right when align prop set to right', function () {
   getComponent({
-    isJustifiedRight: true
+    align: 'right'
   });
-  var buttons = screen.getAllByRole('button');
-  expect(buttons[0]).toHaveAttribute('data-id', 'cancel-button');
+  var element = screen.getByTestId(testId);
+  expect(element).toHaveStyleRule('justify-content', 'right');
+});
+test('justify-content left when align prop is set to left', function () {
+  getComponent({
+    align: 'left'
+  });
+  var element = screen.getByTestId(testId);
+  expect(element).toHaveStyleRule('justify-content', 'left');
+});
+test('justify-content left when align prop is excluded', function () {
+  getComponent();
+  var element = screen.getByTestId(testId);
+  expect(element).toHaveStyleRule('justify-content', 'left');
+});
+test('an error is thrown when align has invalid prop value', function () {
+  expect(function () {
+    return getComponent({
+      align: 'rihgt'
+    });
+  }).toThrow('Failed prop type');
 });

package/lib/recipes/ConditionFilter.stories.js

@@ -13,6 +13,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React from 'react';
 import TrashIcon from '@pingux/mdi-react/TrashIcon';
 import { Badge, Box, Bracket, Button, Icon, IconButton, Item, RockerButton, RockerButtonGroup, SelectField, Text, TextField } from '../index';
+import { FIGMA_LINKS } from '../utils/designUtils/figmaLinks.js';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Condition Filter'
@@ -187,6 +188,12 @@ export var DisplaySectionHeader = function DisplaySectionHeader(_ref2) {
     alignSelf: "center"
   }, ofTheConditionsAreTrueCopy));
 };
+Display.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.conditionFilter.display
+  }
+};
 export var Edit = function Edit() {
   var trashButton = ___EmotionJSX(IconButton, {
     "aria-label": "deleteButton",
@@ -482,4 +489,10 @@ export var Edit = function Edit() {
   }))), ___EmotionJSX(Box, {
     alignSelf: "start"
   }, trashButton))));
+};
+Edit.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.conditionFilter.edit
+  }
 };

package/lib/utils/designUtils/figmaLinks.js

@@ -32,6 +32,10 @@ export var FIGMA_LINKS = {
   collapsiblePanel: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=14546-33229&t=VgqEexa1CXAXfPpp-0'
   },
+  conditionFilter: {
+    display: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=218%3A574&mode=dev',
+    edit: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=218%3A597&mode=dev'
+  },
   copyText: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=218-1442&t=8Wwd3tIBh3GEjCJB-0'
   },

package/package.json

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