@pingux/astro 2.18.1-alpha.0 → 2.18.1-alpha.2

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

@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Edit = exports.Display = void 0;
+exports["default"] = exports.Edit = exports.DisplaySectionHeader = exports.DisplayRow = exports.Display = void 0;
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
@@ -25,67 +25,77 @@ var _default = {
   title: 'Recipes/Condition Filter'
 };
 exports["default"] = _default;
-var customBadgeStyles = {
-  marginRight: 'sm',
-  '& > span': {
-    fontWeight: 1,
-    textTransform: 'none'
-  },
-  ml: '3px',
-  minWidth: '65px',
-  height: '20px',
-  'z-index': '1'
+var borderBox = {
+  borderColor: 'neutral.80',
+  borderRadius: '3px 4px 4px 3px',
+  borderStyle: 'solid',
+  borderWidth: '1px 1px 1px 0px',
+  width: '100%',
+  '&::after': {
+    bg: 'decorative.4',
+    width: '2px'
+  }
 };
 var sx = {
-  equalBadgeStyles: _objectSpread(_objectSpread({}, customBadgeStyles), {}, {
-    bg: 'accent.95',
-    textColor: 'neutral.10',
-    alignSelf: 'center',
-    height: '21px',
-    minWidth: '51px'
-  }),
-  borderedBoxStyles: {
-    '&::after': {
-      bg: 'decorative.4',
-      width: '2px',
-      display: 'block'
+  badge: {
+    condition: {
+      height: '20px',
+      minWidth: '65px'
     },
-    borderColor: 'neutral.80',
-    borderRadius: '3px 4px 4px 3px',
-    borderStyle: 'solid',
-    borderWidth: '1px 1px 1px 0px',
-    padding: 'sm',
-    width: '100%'
+    equal: {
+      alignSelf: 'center',
+      bg: 'accent.95'
+    }
   },
-  allConditionsBox: {
-    '&::after': {
-      bg: 'decorative.4',
-      width: '2px'
+  borderedBoxStyles: _objectSpread(_objectSpread({}, borderBox), {}, {
+    padding: 'sm'
+  }),
+  display: {
+    borderBox: _objectSpread(_objectSpread({}, borderBox), {}, {
+      ml: '20px',
+      mt: 'md',
+      p: 'sm',
+      pl: 0
+    }),
+    bracket: {
+      position: 'absolute',
+      height: '56px'
+    },
+    container: {
+      bg: 'accent.99',
+      maxWidth: '318px',
+      p: 'sm',
+      pl: 0
     },
-    alignItems: 'center',
-    borderRadius: '4px',
-    marginTop: 'md',
-    fontWeight: 1
+    rowBox: {
+      alignItems: 'center',
+      bg: 'white',
+      borderRadius: '4px',
+      fontWeight: 1,
+      marginTop: 'md',
+      minHeight: '25px',
+      ml: '20px',
+      pl: '13px'
+    }
   },
   defaultText: {
-    textTransform: 'none',
     color: 'inherit',
     fontSize: 'sm',
     fontWeight: '3'
-  },
-  textStyles: {
-    pl: 'md',
-    pr: 'sm'
   }
 };
 var allConditions = [{
   field1: 'Family Name',
+  field3: 'Smith',
+  key: 'familyNameField'
+}, {
+  field1: 'Given Name',
   field3: 'John',
-  key: 'FamilyNameField'
+  key: 'givenNameField'
 }, {
-  field1: 'Full Name',
-  field3: 'Alex Smith',
-  key: 'FullNameField'
+  field1: 'Email',
+  field3: 'jsmith@company.com',
+  key: 'emailField'
 }];
 var anyConditions = [{
   field1: 'Group',
@@ -105,124 +115,89 @@ var noneConditions = [{
   field3: 'Banana',
   key: 'Miscellaneous2'
 }];
+var ofTheConditionsAreTrueCopy = ' of the conditions are true';
 var Display = function Display() {
-  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
-    bg: "accent.99",
-    maxWidth: "318px",
-    p: "sm"
-  }, (0, _react2.jsx)(_index.Box, {
-    isRow: true
-  }), (0, _react2.jsx)(_index.Box, {
-    isRow: true
-  }, (0, _react2.jsx)(_index.Badge, {
-    label: "All",
-    bg: "decorative.4",
-    sx: customBadgeStyles
-  }), (0, _react2.jsx)(_index.Text, null, " of the conditions are true")), (0, _map["default"])(allConditions).call(allConditions, function (item) {
-    return (0, _react2.jsx)(_index.Box, {
-      isRow: true,
+  return (0, _react2.jsx)(_index.Box, {
+    sx: sx.display.container
+  }, (0, _react2.jsx)(DisplaySectionHeader, null), (0, _map["default"])(allConditions).call(allConditions, function (item) {
+    return (0, _react2.jsx)(DisplayRow, {
+      item: item,
       key: item.key
-    }, (0, _react2.jsx)(_index.Bracket, null), (0, _react2.jsx)(_index.Box, {
-      width: "100%"
-    }, (0, _react2.jsx)(_index.Box, {
-      variant: "forms.input.fieldControlWrapper",
-      bg: "white",
-      isRow: true,
-      sx: sx.allConditionsBox
-    }, (0, _react2.jsx)(_index.Text, {
-      sx: sx.textStyles
-    }, item.field1), (0, _react2.jsx)(_index.Badge, {
-      label: "Equals",
-      sx: sx.equalBadgeStyles,
-      textColor: "neutral.10"
-    }), (0, _react2.jsx)(_index.Text, null, item.field3))));
+    });
   }), (0, _react2.jsx)(_index.Box, {
-    isRow: true
-  }, (0, _react2.jsx)(_index.Bracket, null), (0, _react2.jsx)(_index.Box, {
-    variant: "forms.input.fieldControlWrapper",
-    mt: "md",
-    sx: sx.borderedBoxStyles
-  }, (0, _react2.jsx)(_index.Box, {
-    isRow: true
-  }, (0, _react2.jsx)(_index.Badge, {
-    label: "Any",
-    bg: "decorative.7",
-    sx: customBadgeStyles,
-    alignSelf: "center"
-  }), (0, _react2.jsx)(_index.Text, null, " of the conditions are true")), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
     ml: "xs"
-  }, (0, _map["default"])(anyConditions).call(anyConditions, function (item, index) {
-    return (0, _react2.jsx)(_index.Box, {
-      isRow: true,
-      key: item.key
-    }, (0, _react2.jsx)(_index.Bracket, {
-      ml: 0,
-      isLast: index === anyConditions.length - 1
-    }), (0, _react2.jsx)(_index.Box, {
-      mt: "md",
-      variant: "forms.input.fieldControlWrapper",
-      bg: "white",
-      isRow: true,
-      width: "100%",
-      sx: _objectSpread(_objectSpread({}, sx.allConditionsBox), {}, {
-        '&::after': {
-          bg: 'decorative.7',
-          width: '2px'
-        }
-      })
-    }, (0, _react2.jsx)(_index.Text, {
-      sx: sx.textStyles
-    }, item.field1), (0, _react2.jsx)(_index.Badge, {
-      label: "Equals",
-      textColor: "neutral.10",
-      sx: sx.equalBadgeStyles
-    }), (0, _react2.jsx)(_index.Text, null, item.field3)));
-  })))), (0, _react2.jsx)(_index.Box, {
-    isRow: true
   }, (0, _react2.jsx)(_index.Bracket, {
+    sx: _objectSpread(_objectSpread({}, sx.display.bracket), {}, {
+      height: '148px'
+    }),
     isLast: true
   }), (0, _react2.jsx)(_index.Box, {
-    variant: "forms.input.fieldControlWrapper",
-    mt: "md",
-    sx: sx.borderedBoxStyles
+    sx: sx.display.borderBox,
+    variant: "forms.input.fieldControlWrapper"
+  }, (0, _react2.jsx)(DisplaySectionHeader, {
+    badgeColor: "decorative.7",
+    label: "Any"
+  }), (0, _map["default"])(anyConditions).call(anyConditions, function (item, index) {
+    return (0, _react2.jsx)(DisplayRow, {
+      barColor: "decorative.7",
+      isLast: index === anyConditions.length - 1,
+      item: item,
+      key: item.key
+    });
+  }))));
+};
+exports.Display = Display;
+var DisplayRow = function DisplayRow(_ref) {
+  var _ref$item = _ref.item,
+    item = _ref$item === void 0 ? allConditions[0] : _ref$item,
+    _ref$isLast = _ref.isLast,
+    isLast = _ref$isLast === void 0 ? false : _ref$isLast,
+    _ref$barColor = _ref.barColor,
+    barColor = _ref$barColor === void 0 ? 'decorative.4' : _ref$barColor;
+  return (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    ml: "xs"
+  }, (0, _react2.jsx)(_index.Bracket, {
+    sx: sx.display.bracket,
+    isLast: isLast
+  }), (0, _react2.jsx)(_index.Box, {
+    width: "100%"
   }, (0, _react2.jsx)(_index.Box, {
-    isRow: true
+    gap: "sm",
+    isRow: true,
+    sx: _objectSpread(_objectSpread({}, sx.display.rowBox), {}, {
+      '&::after': {
+        bg: barColor,
+        width: '2px'
+      }
+    }),
+    variant: "forms.input.fieldControlWrapper"
+  }, (0, _react2.jsx)(_index.Text, null, item.field1), (0, _react2.jsx)(_index.Badge, {
+    label: "Equals",
+    sx: sx.badge.equal,
+    textColor: "neutral.10"
+  }), (0, _react2.jsx)(_index.Text, null, item.field3))));
+};
+exports.DisplayRow = DisplayRow;
+var DisplaySectionHeader = function DisplaySectionHeader(_ref2) {
+  var _ref2$badgeColor = _ref2.badgeColor,
+    badgeColor = _ref2$badgeColor === void 0 ? 'decorative.4' : _ref2$badgeColor,
+    _ref2$label = _ref2.label,
+    label = _ref2$label === void 0 ? 'All' : _ref2$label;
+  return (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    ml: "sm"
   }, (0, _react2.jsx)(_index.Badge, {
-    label: "None",
-    bg: "accent.20",
-    sx: customBadgeStyles,
+    bg: badgeColor,
+    label: label,
+    sx: sx.badge.condition
+  }), (0, _react2.jsx)(_index.Text, {
+    ml: "sm",
     alignSelf: "center"
-  }), (0, _react2.jsx)(_index.Text, null, " of the conditions are true")), (0, _react2.jsx)(_index.Box, {
-    ml: "xs"
-  }, (0, _map["default"])(noneConditions).call(noneConditions, function (item, index) {
-    return (0, _react2.jsx)(_index.Box, {
-      isRow: true,
-      key: item.key
-    }, (0, _react2.jsx)(_index.Bracket, {
-      ml: 0,
-      isLast: index === noneConditions.length - 1
-    }), (0, _react2.jsx)(_index.Box, {
-      mt: "md",
-      variant: "forms.input.fieldControlWrapper",
-      bg: "white",
-      isRow: true,
-      width: "100%",
-      sx: _objectSpread(_objectSpread({}, sx.allConditionsBox), {}, {
-        '&::after': {
-          bg: 'accent.20',
-          width: '2px'
-        }
-      })
-    }, (0, _react2.jsx)(_index.Text, {
-      sx: sx.textStyles
-    }, item.field1), (0, _react2.jsx)(_index.Badge, {
-      label: "Equals",
-      textColor: "neutral.10",
-      sx: sx.equalBadgeStyles
-    }), (0, _react2.jsx)(_index.Text, null, item.field3)));
-  }))))));
+  }, ofTheConditionsAreTrueCopy));
 };
-exports.Display = Display;
+exports.DisplaySectionHeader = DisplaySectionHeader;
 var Edit = function Edit() {
   var trashButton = (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "deleteButton",
@@ -277,7 +252,7 @@ var Edit = function Edit() {
     }
   }, (0, _react2.jsx)(_index.Text, {
     sx: sx.defaultText
-  }, "NONE"))), (0, _react2.jsx)(_index.Text, null, " of the conditions are true"), (0, _react2.jsx)(_index.Button, {
+  }, "NONE"))), (0, _react2.jsx)(_index.Text, null, ofTheConditionsAreTrueCopy), (0, _react2.jsx)(_index.Button, {
     variant: "inline",
     width: "fit-content",
     role: "button",
@@ -368,7 +343,7 @@ var Edit = function Edit() {
     }
   }, (0, _react2.jsx)(_index.Text, {
     sx: sx.defaultText
-  }, "NONE"))), (0, _react2.jsx)(_index.Text, null, " of the conditions are true"), (0, _react2.jsx)(_index.Button, {
+  }, "NONE"))), (0, _react2.jsx)(_index.Text, null, ofTheConditionsAreTrueCopy), (0, _react2.jsx)(_index.Button, {
     variant: "inline",
     width: "fit-content",
     role: "button",
@@ -464,7 +439,7 @@ var Edit = function Edit() {
     }
   }, (0, _react2.jsx)(_index.Text, {
     sx: sx.defaultText
-  }, "NONE"))), (0, _react2.jsx)(_index.Text, null, " of the conditions are true"), (0, _react2.jsx)(_index.Button, {
+  }, "NONE"))), (0, _react2.jsx)(_index.Text, null, ofTheConditionsAreTrueCopy), (0, _react2.jsx)(_index.Button, {
     variant: "inline",
     width: "fit-content",
     role: "button",

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');
 });