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

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