@pingux/astro 1.27.0-alpha.25 → 1.27.0-alpha.26

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

@@ -0,0 +1,184 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
+
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+
+var _OverlayPanel = _interopRequireDefault(require("./OverlayPanel"));
+
+var _react2 = require("@emotion/react");
+
+var testId = 'test-overlayPanel';
+var defaultProps = {
+  'data-testid': testId
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_OverlayPanel["default"], (0, _extends2["default"])({}, defaultProps, props)));
+};
+
+afterEach(function () {
+  jest.restoreAllMocks();
+}); // Need to be added to each test file to test accessibility using axe.
+
+(0, _testAxe["default"])(getComponent);
+test('default overlayPanel', function () {
+  getComponent({
+    children: (0, _react2.jsx)("div", null, "Test")
+  });
+
+  var overlayPanel = _testWrapper.screen.getByTestId(testId);
+
+  var child = _testWrapper.screen.queryByText('Test');
+
+  expect(overlayPanel).toBeInTheDocument();
+  expect(child).toBeInTheDocument();
+});
+test('custom overlayPanel gets custom width', function () {
+  getComponent({
+    children: (0, _react2.jsx)("div", null, "Test"),
+    sx: {
+      width: '240px'
+    }
+  });
+
+  var overlayPanel = _testWrapper.screen.getByTestId(testId);
+
+  expect(overlayPanel).toBeInTheDocument();
+  expect(overlayPanel).toHaveStyleRule('width', '240px');
+});
+test('onClose callback fires when provided', function () {
+  var onClose = jest.fn();
+  getComponent({
+    onClose: onClose,
+    children: (0, _react2.jsx)("div", null, "Test")
+  });
+
+  var overlayPanel = _testWrapper.screen.getByTestId(testId);
+
+  _testWrapper.fireEvent.keyDown(overlayPanel, {
+    key: 'Escape',
+    code: 'Escape',
+    keyCode: 27,
+    charCode: 27
+  });
+
+  _testWrapper.fireEvent.keyUp(overlayPanel, {
+    key: 'Escape',
+    code: 'Escape',
+    keyCode: 27,
+    charCode: 27
+  });
+
+  expect(onClose).toHaveBeenCalled();
+});
+test('custom classname can be passed', function () {
+  getComponent({
+    className: 'testing-class'
+  });
+
+  var overlayPanel = _testWrapper.screen.getByTestId(testId);
+
+  expect(overlayPanel).toHaveClass('testing-class');
+});
+test('neither callback fires when not provided', function () {
+  var onClose = jest.fn();
+  getComponent({
+    children: (0, _react2.jsx)("div", null, "Test")
+  });
+
+  var overlayPanel = _testWrapper.screen.getByTestId(testId);
+
+  _testWrapper.fireEvent.keyDown(overlayPanel, {
+    key: 'Escape',
+    code: 'Escape',
+    keyCode: 27,
+    charCode: 27
+  });
+
+  _testWrapper.fireEvent.keyUp(overlayPanel, {
+    key: 'Escape',
+    code: 'Escape',
+    keyCode: 27,
+    charCode: 27
+  });
+
+  expect(onClose).not.toHaveBeenCalled();
+});
+test('triggerRef.current.focus() fires when provided', function () {
+  var onClose = jest.fn();
+  var focusFunction = jest.fn();
+  var state = {
+    close: onClose
+  };
+  var triggerRef = {
+    current: {
+      focus: focusFunction
+    }
+  };
+  getComponent({
+    state: state,
+    children: (0, _react2.jsx)("div", null, "Test"),
+    triggerRef: triggerRef
+  });
+
+  var overlayPanel = _testWrapper.screen.getByTestId(testId);
+
+  _testWrapper.fireEvent.keyDown(overlayPanel, {
+    key: 'Escape',
+    code: 'Escape',
+    keyCode: 27,
+    charCode: 27
+  });
+
+  _testWrapper.fireEvent.keyUp(overlayPanel, {
+    key: 'Escape',
+    code: 'Escape',
+    keyCode: 27,
+    charCode: 27
+  });
+
+  expect(focusFunction).toHaveBeenCalled();
+});
+test('triggerRef.current.focus() does not fire when key other than esc is pressed', function () {
+  var onClose = jest.fn();
+  var focusFunction = jest.fn();
+  var state = {
+    close: onClose
+  };
+  var triggerRef = {
+    current: {
+      focus: focusFunction
+    }
+  };
+  getComponent({
+    state: state,
+    children: (0, _react2.jsx)("div", null, "Test"),
+    triggerRef: triggerRef
+  });
+
+  var overlayPanel = _testWrapper.screen.getByTestId(testId);
+
+  _testWrapper.fireEvent.keyDown(overlayPanel, {
+    key: 'KeyA',
+    code: 'KeyA',
+    keyCode: 65,
+    charCode: 65
+  });
+
+  _testWrapper.fireEvent.keyUp(overlayPanel, {
+    key: 'KeyA',
+    code: 'KeyA',
+    keyCode: 65,
+    charCode: 65
+  });
+
+  expect(focusFunction).not.toHaveBeenCalled();
+});

package/lib/cjs/components/OverlayPanel/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _OverlayPanel["default"];
+  }
+});
+
+var _OverlayPanel = _interopRequireDefault(require("./OverlayPanel"));

package/lib/cjs/components/PageHeader/PageHeader.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Text = _interopRequireDefault(require("../Text/Text"));
+
+var _Box = _interopRequireDefault(require("../Box/Box"));
+
+var _hooks = require("../../hooks");
+
+var _react2 = require("@emotion/react");
+
+var _excluded = ["title", "children"];
+
+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; }
+
+/**
+ * A `Page Header` is a composed component using text and icon button.
+ * The component is separated from the body and appears at the top.
+ * For customization,
+ * please see [Page Header](./?path=/story/recipes-page-header--default) recipe docs.
+ */
+var PageHeader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var title = props.title,
+      children = props.children,
+      others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  (0, _hooks.useDeprecationWarning)('The Page Header component will be deprecated in Astro-UI 2.0.0. Use Page Header recipe instead.');
+  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    isRow: true,
+    justifyContent: "space-between",
+    role: "heading",
+    "aria-level": "1",
+    ref: ref
+  }, others), (0, _react2.jsx)(_Text["default"], {
+    variant: "title",
+    mb: "md"
+  }, title), children);
+});
+PageHeader.displayName = 'PageHeader';
+var _default = PageHeader;
+exports["default"] = _default;
+PageHeader.propTypes = {
+  /** Title for the Page Header. */
+  title: _propTypes["default"].string
+};

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

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.Default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _PageHeader = _interopRequireDefault(require("../PageHeader/PageHeader"));
+
+var _Button = _interopRequireDefault(require("../Button/Button"));
+
+var _withDeprecationWarning = _interopRequireDefault(require("../../utils/devUtils/decorators/withDeprecationWarning"));
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'Deprecated/PageHeader',
+  component: _PageHeader["default"],
+  decorators: [function (Story, context) {
+    return (0, _withDeprecationWarning["default"])(Story, context, 'The `PageHeader` component will be deprecated in Astro-UI 2.0.0.');
+  }],
+  argTypes: {
+    title: {
+      control: {
+        type: 'text'
+      },
+      defaultValue: 'Forms'
+    }
+  }
+};
+exports["default"] = _default;
+
+var Default = function Default(_ref) {
+  var args = (0, _extends2["default"])({}, _ref);
+  return (0, _react2.jsx)(_PageHeader["default"], args, (0, _react2.jsx)(_Button["default"], null, "Add a Form"));
+};
+
+exports.Default = Default;

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

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _PageHeader = _interopRequireDefault(require("./PageHeader"));
+
+var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
+
+var _react3 = require("@emotion/react");
+
+var testTitle = 'Test Title';
+var defaultProps = {
+  title: testTitle
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _react2.render)((0, _react3.jsx)(_PageHeader["default"], (0, _extends2["default"])({}, defaultProps, props)));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+(0, _testAxe["default"])(getComponent);
+test('renders pageheader and title', function () {
+  getComponent();
+
+  var title = _react2.screen.getByRole('heading');
+
+  expect(title).toBeInTheDocument();
+});

package/lib/cjs/components/PageHeader/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _PageHeader["default"];
+  }
+});
+
+var _PageHeader = _interopRequireDefault(require("./PageHeader"));