@pingux/astro 1.1.1-alpha.1 → 1.1.1-alpha.2

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

@@ -0,0 +1,212 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+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.WithCustomSize = exports.Controlled = exports.Uncontrolled = exports.WithDisabledKeys = exports.WithCustomValues = exports.Default = exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ = require("../..");
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'Form/MultivaluesField',
+  component: _.MultivaluesField,
+  argTypes: {
+    direction: {},
+    hasAutoFocus: {},
+    hasNoStatusIndicator: {},
+    isDisabled: {},
+    isNotFlippable: {},
+    isReadOnly: {},
+    isRequired: {},
+    label: {
+      defaultValue: 'Field Label'
+    },
+    mode: {},
+    placeholder: {},
+    defaultSelectedKeys: {
+      control: {
+        type: 'none'
+      }
+    },
+    disabledKeys: {
+      control: {
+        type: 'none'
+      }
+    },
+    items: {
+      control: {
+        type: 'none'
+      }
+    },
+    selectedKeys: {
+      control: {
+        type: 'none'
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+var items = [{
+  id: 1,
+  name: 'Aardvark',
+  key: 'Aardvark'
+}, {
+  id: 2,
+  name: 'Kangaroo',
+  key: 'Kangaroo'
+}, {
+  id: 3,
+  name: 'Snake',
+  key: 'Snake'
+}, {
+  id: 4,
+  name: 'Frog',
+  key: 'Frog'
+}, {
+  id: 5,
+  name: 'Seal',
+  key: 'Seal'
+}, {
+  id: 6,
+  name: 'Orangutan',
+  key: 'Orangutan'
+}, {
+  id: 7,
+  name: 'Shark',
+  key: 'Shark'
+}];
+
+var Default = function Default(args) {
+  return (// const items = [
+    // { id: 1, name: 'Aardvark', key: 'Aardvark' },
+    // { id: 2, name: 'Kangaroo', key: 'Kangaroo' },
+    // { id: 3, name: 'Snake', key: 'Snake' },
+    // { id: 4, name: 'Frog', key: 'Frog' },
+    // { id: 5, name: 'Seal', key: 'Seal' },
+    // { id: 6, name: 'Orangutan', key: 'Orangutan' },
+    // { id: 7, name: 'Shark', key: 'Shark' },
+    // ];
+    (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+      items: items
+    }, args), function (item) {
+      return (0, _react2.jsx)(_.Item, {
+        key: item.key,
+        "data-id": item.name
+      }, item.name);
+    }))
+  );
+};
+
+exports.Default = Default;
+
+var WithCustomValues = function WithCustomValues(args) {
+  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+    items: items,
+    mode: "non-restrictive"
+  }, args), function (item) {
+    return (0, _react2.jsx)(_.Item, {
+      key: item.key,
+      "data-id": item.name
+    }, item.name);
+  }));
+};
+
+exports.WithCustomValues = WithCustomValues;
+WithCustomValues.argTypes = {
+  mode: {
+    defaultValue: 'non-restrictive'
+  }
+};
+
+var WithDisabledKeys = function WithDisabledKeys(args) {
+  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+    disabledKeys: ['Aardvark'],
+    items: items
+  }, args), function (item) {
+    return (0, _react2.jsx)(_.Item, {
+      key: item.key,
+      "data-id": item.name
+    }, item.name);
+  }));
+};
+
+exports.WithDisabledKeys = WithDisabledKeys;
+
+var Uncontrolled = function Uncontrolled(args) {
+  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+    defaultSelectedKeys: ['Aardvark', 'Snake'],
+    items: items
+  }, args), function (item) {
+    return (0, _react2.jsx)(_.Item, {
+      key: item.key,
+      "data-id": item.name
+    }, item.name);
+  }));
+};
+
+exports.Uncontrolled = Uncontrolled;
+
+var Controlled = function Controlled(args) {
+  var _useState = (0, _react.useState)(['Aardvark', 'Snake']),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      selectedKeys = _useState2[0],
+      setSelectedKeys = _useState2[1];
+
+  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+    label: "Field Label"
+  }, args, {
+    items: items,
+    onSelectionChange: setSelectedKeys,
+    selectedKeys: selectedKeys
+  }), function (item) {
+    return (0, _react2.jsx)(_.Item, {
+      key: item.key,
+      "data-id": item.name
+    }, item.name);
+  }));
+};
+
+exports.Controlled = Controlled;
+
+var WithCustomSize = function WithCustomSize(args) {
+  return (0, _react2.jsx)(_.Box, {
+    sx: {
+      width: '100%',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }, (0, _react2.jsx)(_.Box, {
+    width: 300
+  }, (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+    items: items
+  }, args), function (item) {
+    return (0, _react2.jsx)(_.Item, {
+      key: item.key,
+      "data-id": item.name
+    }, item.name);
+  }))));
+};
+
+exports.WithCustomSize = WithCustomSize;

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

@@ -0,0 +1,387 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime-corejs3/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _jestAxe = require("jest-axe");
+
+var _index = require("../../index");
+
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+
+var _react2 = require("@emotion/react");
+
+var items = [{
+  id: 1,
+  name: 'Aardvark',
+  key: 'Aardvark'
+}, {
+  id: 2,
+  name: 'Kangaroo',
+  key: 'Kangaroo'
+}, {
+  id: 3,
+  name: 'Snake',
+  key: 'Snake'
+}];
+var defaultProps = {
+  items: items,
+  label: 'Field Label'
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref$renderFn = _ref.renderFn,
+      renderFn = _ref$renderFn === void 0 ? _testWrapper.render : _ref$renderFn;
+
+  return renderFn((0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.MultivaluesField, (0, _extends2["default"])({}, defaultProps, props), function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.key,
+      "data-id": item.name
+    }, item.name);
+  })));
+};
+
+beforeAll(function () {
+  jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(function () {
+    return 1000;
+  });
+  jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(function () {
+    return 1000;
+  });
+  window.HTMLElement.prototype.scrollIntoView = jest.fn();
+  jest.spyOn(window.screen, 'width', 'get').mockImplementation(function () {
+    return 1024;
+  });
+  jest.spyOn(window, 'requestAnimationFrame').mockImplementation(function (cb) {
+    return cb();
+  });
+  jest.useFakeTimers();
+});
+afterEach(function () {
+  jest.clearAllMocks();
+});
+afterAll(function () {
+  jest.restoreAllMocks();
+});
+test('renders MultivaluesField component', function () {
+  getComponent();
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  var label = _testWrapper.screen.getByText(defaultProps.label);
+
+  expect(input).toBeInTheDocument();
+  expect(label).toBeInTheDocument();
+});
+test('opens listbox on focus and fires "onFocus', function () {
+  var onFocus = jest.fn();
+  getComponent({
+    onFocus: onFocus
+  });
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  input.focus();
+  expect(_testWrapper.screen.getByRole('listbox')).toBeInTheDocument();
+
+  var options = _testWrapper.screen.getAllByRole('option');
+
+  expect(options.length).toBe(items.length);
+  expect(options[0]).toHaveTextContent(items[0].name);
+  expect(onFocus).toBeCalled();
+});
+test('closes listbox on blur and fires "onBlur"', function () {
+  var onBlur = jest.fn();
+  getComponent({
+    onBlur: onBlur
+  });
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  input.focus();
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+  input.blur();
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(onBlur).toBeCalled();
+});
+test('opening and closing listbox fires "onOpenChange"', function () {
+  var onOpenChange = jest.fn();
+  getComponent({
+    onOpenChange: onOpenChange
+  });
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  input.focus();
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+  expect(onOpenChange).toHaveBeenCalledWith(true);
+  input.blur();
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(onOpenChange).toHaveBeenCalledWith(false);
+});
+test('multiple selection is enabled, option disappears after selection', function () {
+  getComponent();
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  input.focus();
+
+  var listbox = _testWrapper.screen.getByRole('listbox');
+
+  expect(listbox).toHaveAttribute('aria-multiselectable', 'true');
+  var options = (0, _testWrapper.within)(listbox).getAllByRole('option');
+  var firstOption = options[0];
+  firstOption.click();
+  expect(firstOption).not.toBeInTheDocument();
+  var secondOption = options[1];
+  secondOption.click();
+  expect(secondOption).not.toBeInTheDocument();
+});
+test('clicking an option renders chip with option name', function () {
+  getComponent();
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  input.focus();
+
+  var options = _testWrapper.screen.getAllByRole('option');
+
+  var firstOption = options[0];
+  firstOption.click();
+  expect(firstOption).not.toBeInTheDocument();
+
+  var chip = _testWrapper.screen.getByText(items[0].name);
+
+  expect(chip).toBeInTheDocument();
+  var chipContainer = chip.parentElement;
+  expect(chipContainer).toHaveAttribute('role', 'presentation');
+});
+test('clicking on delete button deletes selection, and re-adds option to list', function () {
+  getComponent();
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  input.focus();
+
+  var options = _testWrapper.screen.getAllByRole('option');
+
+  var firstOption = options[0];
+  firstOption.click();
+  expect(firstOption).not.toBeInTheDocument();
+
+  var chip = _testWrapper.screen.getByText(items[0].name);
+
+  expect(chip).toBeInTheDocument();
+  var deleteButton = chip.nextSibling;
+  deleteButton.click();
+  expect(chip).not.toBeInTheDocument();
+  input.focus();
+
+  var updatedOptions = _testWrapper.screen.getAllByRole('option');
+
+  expect(updatedOptions[0]).toBeInTheDocument();
+  expect(updatedOptions[0]).toHaveTextContent(items[0].name);
+});
+test('clicking an option fires "onSelectionChange"', function () {
+  var onSelectionChange = jest.fn();
+  getComponent({
+    onSelectionChange: onSelectionChange
+  });
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  input.focus();
+
+  var listbox = _testWrapper.screen.getByRole('listbox');
+
+  var options = (0, _testWrapper.within)(listbox).getAllByRole('option');
+  var firstOption = options[0];
+  firstOption.click();
+  expect(firstOption).not.toBeInTheDocument();
+  var secondOption = options[1];
+  secondOption.click();
+  expect(secondOption).not.toBeInTheDocument();
+  expect(onSelectionChange).toBeCalledTimes(2);
+  expect(onSelectionChange.mock.calls[0][0].has(items[0].name)).toBeTruthy();
+  expect(onSelectionChange.mock.calls[1][0].has(items[1].name)).toBeTruthy();
+});
+test('changing the input value opens listbox, filters options, and fires "onInputChange"', function () {
+  var onInputChange = jest.fn();
+  getComponent({
+    onInputChange: onInputChange
+  });
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  var value = 'aa';
+
+  _userEvent["default"].type(input, value);
+
+  var listbox = _testWrapper.screen.getByRole('listbox');
+
+  expect(listbox).toBeInTheDocument();
+  var options = (0, _testWrapper.within)(listbox).getAllByRole('option');
+  expect(options.length).toBe(1);
+  expect(onInputChange).toBeCalledTimes(value.length);
+  expect(onInputChange).toHaveBeenCalledWith(value);
+});
+test('changing the input value and hitting enter by default do nothing', function () {
+  getComponent();
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  expect(input).toHaveValue('');
+  var value = 'custom';
+
+  _userEvent["default"].type(input, value);
+
+  _userEvent["default"].type(input, '{enter}');
+
+  expect(input).toHaveValue(value);
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+});
+test('changing the input value and hitting enter creates new value in non-restrictive mode', function () {
+  getComponent({
+    mode: 'non-restrictive'
+  });
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  expect(input).toHaveValue('');
+  var value = 'custom';
+
+  _userEvent["default"].type(input, value);
+
+  expect(input).toHaveValue(value);
+
+  _userEvent["default"].type(input, '{enter}');
+
+  expect(input).toHaveValue('');
+
+  var chip = _testWrapper.screen.queryByText(value);
+
+  expect(chip).toBeInTheDocument();
+  var chipContainer = chip.parentElement;
+  expect(chipContainer).toHaveAttribute('role', 'presentation');
+});
+test('options can be focused via keyboard', function () {
+  getComponent();
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  input.focus();
+
+  var listbox = _testWrapper.screen.getByRole('listbox');
+
+  expect(listbox).toBeInTheDocument();
+  var options = (0, _testWrapper.within)(listbox).getAllByRole('option');
+
+  _userEvent["default"].type(listbox, '{arrowdown}', {
+    skipClick: true
+  });
+
+  expect(options[0]).toHaveClass('is-focused');
+
+  _userEvent["default"].type(listbox, '{arrowdown}', {
+    skipClick: true
+  });
+
+  expect(options[1]).toHaveClass('is-focused');
+});
+test('options can be selected via keyboard', function () {
+  getComponent();
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  input.focus();
+
+  var listbox = _testWrapper.screen.getByRole('listbox');
+
+  expect(listbox).toBeInTheDocument();
+  var options = (0, _testWrapper.within)(listbox).getAllByRole('option');
+
+  _userEvent["default"].type(listbox, '{arrowdown}', {
+    skipClick: true
+  });
+
+  expect(options[0]).toHaveClass('is-focused');
+
+  _userEvent["default"].type(options[0], '{enter}');
+
+  expect(options[0]).not.toBeInTheDocument();
+
+  var chip = _testWrapper.screen.getByText(items[0].name);
+
+  expect(chip).toBeInTheDocument();
+  var chipContainer = chip.parentElement;
+  expect(chipContainer).toHaveAttribute('role', 'presentation');
+});
+test('default selected keys', function () {
+  getComponent({
+    defaultSelectedKeys: [items[1].key, items[2].key]
+  });
+
+  var listbox = _testWrapper.screen.queryByRole('listbox');
+
+  expect(listbox).not.toBeInTheDocument();
+
+  var firstChip = _testWrapper.screen.getByText(items[1].name);
+
+  expect(firstChip).toBeInTheDocument();
+
+  var secondChip = _testWrapper.screen.getByText(items[2].name);
+
+  expect(secondChip).toBeInTheDocument();
+});
+test('selected keys', function () {
+  getComponent({
+    selectedKeys: [items[1].key, items[2].key]
+  });
+
+  var listbox = _testWrapper.screen.queryByRole('listbox');
+
+  expect(listbox).not.toBeInTheDocument();
+
+  var firstChip = _testWrapper.screen.getByText(items[1].name);
+
+  expect(firstChip).toBeInTheDocument();
+
+  var secondChip = _testWrapper.screen.getByText(items[2].name);
+
+  expect(secondChip).toBeInTheDocument();
+});
+test('should have no accessibility violations', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+  var _getComponent, container, results;
+
+  return _regenerator["default"].wrap(function _callee$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          jest.useRealTimers();
+          _getComponent = getComponent(), container = _getComponent.container;
+          _context.next = 4;
+          return (0, _jestAxe.axe)(container);
+
+        case 4:
+          results = _context.sent;
+          expect(results).toHaveNoViolations();
+
+        case 6:
+        case "end":
+          return _context.stop();
+      }
+    }
+  }, _callee);
+})));

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

package/lib/cjs/components/NavBar/NavBar.js

@@ -0,0 +1,38 @@
+"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"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Box = _interopRequireDefault(require("../Box/Box"));
+
+var _react2 = require("@emotion/react");
+
+/**
+ * Composed component that spreads children.
+ *
+ * This component is built to have the NavBarSection component passed into it.
+ *
+ * NavBarSection is an iterative component that
+ * will build an AccordionGridGroup using
+ * the array of objects that is passed into it.
+ *
+ */
+var NavBar = function NavBar(props) {
+  return (0, _react2.jsx)(_Box["default"], {
+    variant: "boxes.navBar",
+    role: "navigation",
+    as: "nav"
+  }, props.children);
+};
+
+var _default = NavBar;
+exports["default"] = _default;