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

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

@@ -0,0 +1,239 @@
+"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.isPressed = exports["default"] = exports.Placement = exports.NotFlippable = exports.NotClosedOnSelect = exports.DisabledItem = exports.DefaultOpen = exports.Default = exports.Controlled = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _addonActions = require("@storybook/addon-actions");
+
+var _index = require("../../index");
+
+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; }
+
+var _default = {
+  title: 'PopoverMenu',
+  component: _index.PopoverMenu,
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  },
+  argTypes: {
+    align: {},
+    direction: {},
+    isDefaultOpen: {},
+    isNotClosedOnSelect: {},
+    isNotFlippable: {},
+    isOpen: {
+      onClick: {
+        action: 'clicked'
+      },
+      control: {
+        type: 'none'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var Default = function Default(args) {
+  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, args, (0, _react2.jsx)(_index.Button, null, "Click me"), (0, _react2.jsx)(_index.Menu, {
+      onAction: (0, _addonActions.action)('onAction')
+    }, (0, _react2.jsx)(_index.Item, {
+      key: "edit"
+    }, "Edit"), (0, _react2.jsx)(_index.Item, {
+      key: "duplicate"
+    }, "Duplicate"), (0, _react2.jsx)(_index.Item, {
+      key: "delete",
+      textValue: "delete"
+    }, (0, _react2.jsx)(_index.Text, {
+      color: "critical.bright"
+    }, "Delete")))))
+  );
+};
+
+exports.Default = Default;
+
+var DefaultOpen = function DefaultOpen() {
+  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, {
+      isDefaultOpen: true
+    }, (0, _react2.jsx)(_index.Button, null, "Click me"), (0, _react2.jsx)(_index.Menu, {
+      onAction: (0, _addonActions.action)('onAction')
+    }, (0, _react2.jsx)(_index.Item, {
+      key: "edit"
+    }, "Edit"), (0, _react2.jsx)(_index.Item, {
+      key: "duplicate"
+    }, "Duplicate"), (0, _react2.jsx)(_index.Item, {
+      key: "delete",
+      textValue: "delete"
+    }, (0, _react2.jsx)(_index.Text, {
+      color: "critical.bright"
+    }, "Delete")))))
+  );
+};
+
+exports.DefaultOpen = DefaultOpen;
+
+var Controlled = function Controlled() {
+  var _useState = (0, _react.useState)(true),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, {
+      isOpen: isOpen,
+      onOpenChange: setIsOpen
+    }, (0, _react2.jsx)(_index.Button, null, "Click me"), (0, _react2.jsx)(_index.Menu, {
+      onAction: (0, _addonActions.action)('onAction')
+    }, (0, _react2.jsx)(_index.Item, {
+      key: "edit"
+    }, "Edit"), (0, _react2.jsx)(_index.Item, {
+      key: "duplicate"
+    }, "Duplicate"), (0, _react2.jsx)(_index.Item, {
+      key: "delete",
+      textValue: "delete"
+    }, (0, _react2.jsx)(_index.Text, {
+      color: "critical.bright"
+    }, "Delete")))))
+  );
+};
+
+exports.Controlled = Controlled;
+
+var Placement = function Placement() {
+  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, {
+      direction: "left"
+    }, (0, _react2.jsx)(_index.Button, null, "Click me"), (0, _react2.jsx)(_index.Menu, {
+      onAction: (0, _addonActions.action)('onAction')
+    }, (0, _react2.jsx)(_index.Item, {
+      key: "edit"
+    }, "Edit"), (0, _react2.jsx)(_index.Item, {
+      key: "duplicate"
+    }, "Duplicate"), (0, _react2.jsx)(_index.Item, {
+      key: "delete",
+      textValue: "delete"
+    }, (0, _react2.jsx)(_index.Text, {
+      color: "critical.bright"
+    }, "Delete")))))
+  );
+};
+
+exports.Placement = Placement;
+
+var NotFlippable = function NotFlippable() {
+  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, {
+      direction: "left",
+      isNotFlippable: true
+    }, (0, _react2.jsx)(_index.Button, null, "Click me"), (0, _react2.jsx)(_index.Menu, {
+      onAction: (0, _addonActions.action)('onAction')
+    }, (0, _react2.jsx)(_index.Item, {
+      key: "edit"
+    }, "Edit"), (0, _react2.jsx)(_index.Item, {
+      key: "duplicate"
+    }, "Duplicate"), (0, _react2.jsx)(_index.Item, {
+      key: "delete",
+      textValue: "delete"
+    }, (0, _react2.jsx)(_index.Text, {
+      color: "critical.bright"
+    }, "Delete")))))
+  );
+};
+
+exports.NotFlippable = NotFlippable;
+
+var NotClosedOnSelect = function NotClosedOnSelect() {
+  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, {
+      isNotClosedOnSelect: true
+    }, (0, _react2.jsx)(_index.Button, null, "Click me"), (0, _react2.jsx)(_index.Menu, {
+      onAction: (0, _addonActions.action)('onAction')
+    }, (0, _react2.jsx)(_index.Item, {
+      key: "edit"
+    }, "Edit"), (0, _react2.jsx)(_index.Item, {
+      key: "duplicate"
+    }, "Duplicate"), (0, _react2.jsx)(_index.Item, {
+      key: "delete",
+      textValue: "delete"
+    }, (0, _react2.jsx)(_index.Text, {
+      color: "critical.bright"
+    }, "Delete")))))
+  );
+};
+
+exports.NotClosedOnSelect = NotClosedOnSelect;
+
+var DisabledItem = function DisabledItem() {
+  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, null, (0, _react2.jsx)(_index.Button, null, "Click me"), (0, _react2.jsx)(_index.Menu, {
+      onAction: (0, _addonActions.action)('onAction'),
+      disabledKeys: ['duplicate']
+    }, (0, _react2.jsx)(_index.Item, {
+      key: "edit"
+    }, "Edit"), (0, _react2.jsx)(_index.Item, {
+      key: "duplicate"
+    }, "Duplicate"), (0, _react2.jsx)(_index.Item, {
+      key: "delete",
+      textValue: "delete"
+    }, (0, _react2.jsx)(_index.Text, {
+      color: "critical.bright"
+    }, "Delete")))))
+  );
+};
+
+exports.DisabledItem = DisabledItem;
+
+var isPressed = function isPressed() {
+  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, null, (0, _react2.jsx)(_index.Button, null, "Click me"), (0, _react2.jsx)(_index.Menu, {
+      onAction: (0, _addonActions.action)('onAction'),
+      disabledKeys: ['duplicate']
+    }, (0, _react2.jsx)(_index.Item, {
+      key: "edit",
+      isPressed: true
+    }, "Edit"), (0, _react2.jsx)(_index.Item, {
+      key: "duplicate"
+    }, "Duplicate"), (0, _react2.jsx)(_index.Item, {
+      key: "delete",
+      textValue: "delete"
+    }, (0, _react2.jsx)(_index.Text, {
+      color: "critical.bright"
+    }, "Delete")))))
+  );
+};
+
+exports.isPressed = isPressed;

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

@@ -0,0 +1,214 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
+
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+
+var _index = require("../../index");
+
+var _react2 = require("@emotion/react");
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.PopoverMenu, props, (0, _react2.jsx)(_index.Button, null, "Mock Button"), (0, _react2.jsx)(_index.Menu, null, (0, _react2.jsx)(_index.Item, {
+    key: "a"
+  }, "A"), (0, _react2.jsx)(_index.Item, {
+    key: "b"
+  }, "B")))));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+(0, _testAxe["default"])(getComponent);
+test('renders a popover menu when trigger is clicked', function () {
+  getComponent();
+
+  var button = _testWrapper.screen.getByRole('button');
+
+  expect(_testWrapper.screen.queryByRole('presentation')).not.toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('menu')).not.toBeInTheDocument();
+
+  _userEvent["default"].click(button);
+
+  expect(_testWrapper.screen.queryByRole('presentation')).toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('presentation')).toBeVisible();
+  expect(_testWrapper.screen.queryByRole('presentation')).toHaveStyle({
+    top: '15px'
+  }); // Should have two accessible dismiss buttons applied (in addition to the trigger button)
+
+  expect(_testWrapper.screen.queryAllByRole('button')).toHaveLength(3);
+  expect(_testWrapper.screen.queryByRole('menu')).toBeInTheDocument();
+
+  _userEvent["default"].click(button);
+
+  expect(_testWrapper.screen.queryByRole('presentation')).not.toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('menu')).not.toBeInTheDocument();
+});
+test('should respond to keyboard events', function () {
+  getComponent();
+
+  var button = _testWrapper.screen.getByRole('button');
+
+  _testWrapper.fireEvent.keyDown(button, {
+    key: 'Enter',
+    code: 13
+  });
+
+  _testWrapper.fireEvent.keyUp(button, {
+    key: 'Enter',
+    code: 13
+  });
+
+  expect(_testWrapper.screen.queryByRole('presentation')).toBeInTheDocument();
+
+  _testWrapper.fireEvent.keyDown(button, {
+    key: 'Enter',
+    code: 13
+  });
+
+  _testWrapper.fireEvent.keyUp(button, {
+    key: 'Enter',
+    code: 13
+  });
+
+  expect(_testWrapper.screen.queryByRole('presentation')).not.toBeInTheDocument();
+});
+test('renders the correct popover menu placement', function () {
+  getComponent({
+    direction: 'right'
+  });
+
+  var button = _testWrapper.screen.getByRole('button');
+
+  _userEvent["default"].click(button);
+
+  expect(_testWrapper.screen.getByRole('presentation')).toHaveAttribute('data-popover-placement', 'right');
+});
+test('should close when a menu item is selected', function () {
+  getComponent();
+
+  var button = _testWrapper.screen.getByRole('button');
+
+  _userEvent["default"].click(button);
+
+  expect(_testWrapper.screen.queryByRole('presentation')).toBeInTheDocument();
+
+  var menuItem = _testWrapper.screen.getAllByRole('menuitem')[0]; // Click the item and ensure the popover closes
+
+
+  _userEvent["default"].click(menuItem);
+
+  expect(_testWrapper.screen.queryByRole('presentation')).not.toBeInTheDocument();
+});
+test('should not close when a menu item is selected when isNotClosedOnSelect is true', function () {
+  getComponent({
+    isNotClosedOnSelect: true
+  });
+
+  var button = _testWrapper.screen.getByRole('button');
+
+  _userEvent["default"].click(button);
+
+  expect(_testWrapper.screen.queryByRole('presentation')).toBeInTheDocument();
+
+  var menuItem = _testWrapper.screen.getAllByRole('menuitem')[0]; // Click the item and ensure the popover does not close
+
+
+  _userEvent["default"].click(menuItem);
+
+  expect(_testWrapper.screen.queryByRole('presentation')).toBeInTheDocument();
+});
+test('should be open when isDefaultOpen is true', function () {
+  getComponent({
+    isDefaultOpen: true
+  });
+
+  var button = _testWrapper.screen.getAllByRole('button')[0];
+
+  expect(_testWrapper.screen.queryByRole('presentation')).toBeInTheDocument();
+
+  _userEvent["default"].click(button);
+
+  expect(_testWrapper.screen.queryByRole('presentation')).not.toBeInTheDocument();
+});
+test('should be open when isOpen is true and not react to attempts to close it', function () {
+  getComponent({
+    isOpen: true
+  });
+
+  var button = _testWrapper.screen.getAllByRole('button')[0];
+
+  expect(_testWrapper.screen.queryByRole('presentation')).toBeInTheDocument();
+
+  _userEvent["default"].click(button);
+
+  expect(_testWrapper.screen.queryByRole('presentation')).toBeInTheDocument();
+});
+test('should respond to onOpenChange', function () {
+  var onOpenChange = jest.fn();
+  getComponent({
+    onOpenChange: onOpenChange
+  });
+
+  var button = _testWrapper.screen.getByRole('button');
+
+  expect(onOpenChange).not.toHaveBeenCalled();
+
+  _userEvent["default"].click(button);
+
+  expect(onOpenChange).toHaveBeenNthCalledWith(1, true);
+
+  _userEvent["default"].click(button);
+
+  expect(onOpenChange).toHaveBeenNthCalledWith(2, false);
+});
+test('two menus can not be open at the same time', function () {
+  (0, _testWrapper.render)((0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.PopoverMenu, null, (0, _react2.jsx)(_index.Button, null, "Mock Button"), (0, _react2.jsx)(_index.Menu, null, (0, _react2.jsx)(_index.Item, {
+    key: "a"
+  }, "A"), (0, _react2.jsx)(_index.Item, {
+    key: "b"
+  }, "B"))), (0, _react2.jsx)(_index.PopoverMenu, null, (0, _react2.jsx)(_index.Button, null, "Mock Button 2"), (0, _react2.jsx)(_index.Menu, null, (0, _react2.jsx)(_index.Item, {
+    key: "c"
+  }, "C"), (0, _react2.jsx)(_index.Item, {
+    key: "d"
+  }, "D"), (0, _react2.jsx)(_index.Item, {
+    key: "e"
+  }, "E")))));
+  expect(_testWrapper.screen.queryByRole('presentation')).not.toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('menu')).not.toBeInTheDocument();
+
+  var _screen$getAllByRole = _testWrapper.screen.getAllByRole('button'),
+      _screen$getAllByRole2 = (0, _slicedToArray2["default"])(_screen$getAllByRole, 2),
+      button1 = _screen$getAllByRole2[0],
+      button2 = _screen$getAllByRole2[1];
+
+  _userEvent["default"].click(button1);
+
+  expect(_testWrapper.screen.queryByRole('presentation')).toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('menu')).toBeInTheDocument();
+  expect(_testWrapper.screen.queryAllByRole('menuitem')).toHaveLength(2);
+  expect(_testWrapper.screen.queryByRole('menuitem', {
+    name: 'A'
+  })).toBeInTheDocument();
+
+  _userEvent["default"].click(button2);
+
+  expect(_testWrapper.screen.queryByRole('presentation')).not.toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('menu')).not.toBeInTheDocument();
+
+  _userEvent["default"].click(button2);
+
+  expect(_testWrapper.screen.queryByRole('presentation')).toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('menu')).toBeInTheDocument();
+  expect(_testWrapper.screen.queryAllByRole('menuitem')).toHaveLength(3);
+  expect(_testWrapper.screen.queryByRole('menuitem', {
+    name: 'C'
+  })).toBeInTheDocument();
+});

package/lib/cjs/components/PopoverMenu/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 _PopoverMenu["default"];
+  }
+});
+
+var _PopoverMenu = _interopRequireDefault(require("./PopoverMenu"));

package/lib/cjs/components/Radio/Radio.js

@@ -0,0 +1,46 @@
+"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 _react = _interopRequireWildcard(require("react"));
+
+var _themeUi = require("theme-ui");
+
+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; }
+
+/**
+ * Basic radio input wrapped in a label.
+ * Built on top of the [Radio from Theme-UI](https://theme-ui.com/components/radio/) and uses the
+ * available [props from Theme-UI](https://theme-ui.com/sx-prop).
+ *
+ * **Note: Requires a label. It's recommended to use `RadioGroupField` with `RadioField` for a**
+ * **solution.**
+ */
+var Radio = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return (0, _react2.jsx)(_themeUi.Radio, (0, _extends2["default"])({
+    ref: ref
+  }, props));
+});
+Radio.displayName = 'Radio';
+var _default = Radio;
+exports["default"] = _default;

package/lib/cjs/components/Radio/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 _Radio["default"];
+  }
+});
+
+var _Radio = _interopRequireDefault(require("./Radio"));