@primer/components 29.1.0 → 29.1.1-rc.cea79543

package/lib/__tests__/Overlay.js

@@ -0,0 +1,145 @@
+"use strict";
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ = require("..");
+
+var _react2 = require("@testing-library/react");
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _jestAxe = require("jest-axe");
+
+var _theme = _interopRequireDefault(require("../theme"));
+
+var _BaseStyles = _interopRequireDefault(require("../BaseStyles"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+
+expect.extend(_jestAxe.toHaveNoViolations);
+
+const TestComponent = ({
+  initialFocus,
+  callback
+}) => {
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const buttonRef = (0, _react.useRef)(null);
+  const confirmButtonRef = (0, _react.useRef)(null);
+  const anchorRef = (0, _react.useRef)(null);
+
+  const closeOverlay = () => {
+    setIsOpen(false);
+
+    if (callback) {
+      callback();
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_ThemeProvider.ThemeProvider, {
+    theme: _theme.default
+  }, /*#__PURE__*/_react.default.createElement(_BaseStyles.default, null, /*#__PURE__*/_react.default.createElement(_.Box, {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    ref: anchorRef
+  }, /*#__PURE__*/_react.default.createElement(_.Button, {
+    ref: buttonRef,
+    onClick: () => setIsOpen(!isOpen)
+  }, "open overlay"), /*#__PURE__*/_react.default.createElement(_.Button, null, "outside"), isOpen ? /*#__PURE__*/_react.default.createElement(_.Overlay, {
+    initialFocusRef: initialFocus === 'button' ? confirmButtonRef : undefined,
+    returnFocusRef: buttonRef,
+    ignoreClickRefs: [buttonRef],
+    onEscape: closeOverlay,
+    onClickOutside: closeOverlay,
+    width: "small"
+  }, /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    flexDirection: "column",
+    p: 2
+  }, /*#__PURE__*/_react.default.createElement(_.Text, null, "Are you sure?"), /*#__PURE__*/_react.default.createElement(_.ButtonDanger, {
+    onClick: closeOverlay
+  }, "Cancel"), /*#__PURE__*/_react.default.createElement(_.Button, {
+    onClick: closeOverlay,
+    ref: confirmButtonRef
+  }, "Confirm"))) : null)));
+};
+
+TestComponent.displayName = "TestComponent";
+describe('Overlay', () => {
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(TestComponent, null));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react2.cleanup)();
+  });
+  it('should focus element passed into function', async () => {
+    const {
+      getByText
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(TestComponent, {
+      initialFocus: "button"
+    }));
+
+    _userEvent.default.click(getByText('open overlay'));
+
+    await (0, _react2.waitFor)(() => getByText('Confirm'));
+    const confirmButton = getByText('Confirm');
+    expect(document.activeElement).toEqual(confirmButton);
+  });
+  it('should focus first element when nothing is passed', async () => {
+    const {
+      getByText
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(TestComponent, null));
+
+    _userEvent.default.click(getByText('open overlay'));
+
+    await (0, _react2.waitFor)(() => getByText('Cancel'));
+    const cancelButton = getByText('Cancel');
+    expect(document.activeElement).toEqual(cancelButton);
+  });
+  it('should call function when user clicks outside container', () => {
+    const mockFunction = jest.fn();
+    const {
+      getByText,
+      queryAllByText
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(TestComponent, {
+      callback: mockFunction
+    }));
+    (0, _react2.act)(() => _userEvent.default.click(getByText('open overlay')));
+    (0, _react2.act)(() => _userEvent.default.click(getByText('outside')));
+    expect(mockFunction).toHaveBeenCalledTimes(1);
+    const cancelButtons = queryAllByText('Cancel');
+    expect(cancelButtons).toHaveLength(0);
+  });
+  it('should call function when user presses escape', () => {
+    const mockFunction = jest.fn();
+    const {
+      getByText,
+      queryAllByText
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(TestComponent, {
+      callback: mockFunction
+    }));
+    (0, _react2.act)(() => _userEvent.default.click(getByText('open overlay')));
+    const domNode = getByText('Are you sure?');
+
+    _react2.fireEvent.keyDown(domNode, {
+      key: 'Escape',
+      code: 'Escape',
+      keyCode: 27,
+      charCode: 27
+    });
+
+    expect(mockFunction).toHaveBeenCalledTimes(1);
+    const cancelButtons = queryAllByText('Cancel');
+    expect(cancelButtons).toHaveLength(0);
+  });
+});

package/lib/__tests__/Pagehead.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib/__tests__/Pagehead.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _constants = require("../constants");
+
+var _theme = _interopRequireDefault(require("../theme"));
+
+var _testing = require("../utils/testing");
+
+var _react2 = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+require("babel-polyfill");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+expect.extend(_jestAxe.toHaveNoViolations);
+describe('Pagehead', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _.Pagehead,
+    systemPropArray: [_constants.COMMON]
+  });
+  (0, _testing.checkExports)('Pagehead', {
+    default: _.Pagehead
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Pagehead, {
+      theme: _theme.default
+    }, "Pagehead"));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react2.cleanup)();
+  });
+});

package/lib/__tests__/Pagination/Pagination.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib/__tests__/Pagination/Pagination.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Pagination = _interopRequireDefault(require("../../Pagination"));
+
+var _testing = require("../../utils/testing");
+
+var _constants = require("../../constants");
+
+var _react2 = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+require("babel-polyfill");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+expect.extend(_jestAxe.toHaveNoViolations);
+const reqProps = {
+  pageCount: 10,
+  currentPage: 1
+};
+
+const comp = /*#__PURE__*/_react.default.createElement(_Pagination.default, reqProps);
+
+describe('Pagination', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _Pagination.default,
+    systemPropArray: [_constants.COMMON],
+    toRender: () => comp
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react2.render)(comp);
+    const results = await (0, _jestAxe.axe)(container, {
+      rules: {
+        // The skip-link rule has to do with entire documents
+        // and is not relevant to this component.
+        // See https://dequeuniversity.com/rules/axe/3.3/skip-link?application=axeAPI
+        'skip-link': {
+          enabled: false
+        }
+      }
+    });
+    expect(results).toHaveNoViolations();
+    (0, _react2.cleanup)();
+  });
+});

package/lib/__tests__/Pagination/PaginationModel.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib/__tests__/Pagination/PaginationModel.js

@@ -0,0 +1,186 @@
+"use strict";
+
+require("babel-polyfill");
+
+var _model = require("../../Pagination/model");
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function first(array, count = 1) {
+  const slice = array.slice(0, count);
+  return count === 1 ? slice[0] : slice;
+} // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+function last(array, count = 1) {
+  const len = array.length;
+  const slice = array.slice(len - count, len);
+  return count === 1 ? slice[0] : slice;
+}
+
+describe('Pagination model', () => {
+  it('sets disabled on prev links', () => {
+    const model1 = (0, _model.buildPaginationModel)(10, 1, true, 1, 2);
+    expect(first(model1).type).toEqual('PREV');
+    expect(first(model1).disabled).toBe(true);
+    const model2 = (0, _model.buildPaginationModel)(10, 2, true, 1, 2);
+    expect(first(model2).type).toEqual('PREV');
+    expect(first(model2).disabled).toBe(false);
+  });
+  it('sets disabled on next links', () => {
+    const model1 = (0, _model.buildPaginationModel)(10, 10, true, 1, 2);
+    expect(last(model1).type).toEqual('NEXT');
+    expect(last(model1).disabled).toBe(true);
+    const model2 = (0, _model.buildPaginationModel)(10, 9, true, 1, 2);
+    expect(last(model2).type).toEqual('NEXT');
+    expect(last(model2).disabled).toBe(false);
+  });
+  it('sets the page number for prev and next links', () => {
+    const model = (0, _model.buildPaginationModel)(10, 5, true, 1, 2);
+    expect(first(model).num).toEqual(4);
+    expect(last(model).num).toEqual(6);
+  });
+  it('ensures margin pages on the left', () => {
+    const model = (0, _model.buildPaginationModel)(10, 10, true, 2, 0);
+    const slice = first(model, 5);
+    const expected = [{
+      type: 'PREV',
+      num: 9
+    }, {
+      type: 'NUM',
+      num: 1
+    }, {
+      type: 'NUM',
+      num: 2
+    }, {
+      type: 'BREAK'
+    }, {
+      type: 'NUM'
+    }];
+    expect(slice).toMatchObject(expected);
+  });
+  it('ensures margin pages on the right', () => {
+    const model = (0, _model.buildPaginationModel)(10, 1, true, 2, 0);
+    const slice = last(model, 5);
+    const expected = [{
+      type: 'NUM'
+    }, {
+      type: 'BREAK'
+    }, {
+      type: 'NUM',
+      num: 9
+    }, {
+      type: 'NUM',
+      num: 10
+    }, {
+      type: 'NEXT',
+      num: 2
+    }];
+    expect(slice).toMatchObject(expected);
+  });
+  it('ensures that the current page is surrounded by the right number of pages', () => {
+    const model = (0, _model.buildPaginationModel)(10, 5, true, 1, 1);
+    const expected = [{
+      type: 'PREV',
+      num: 4
+    }, {
+      type: 'NUM',
+      num: 1
+    }, {
+      type: 'BREAK'
+    }, {
+      type: 'NUM',
+      num: 4
+    }, {
+      type: 'NUM',
+      num: 5,
+      selected: true
+    }, {
+      type: 'NUM',
+      num: 6
+    }, {
+      type: 'BREAK'
+    }, {
+      type: 'NUM',
+      num: 10
+    }, {
+      type: 'NEXT',
+      num: 6
+    }];
+    expect(model).toMatchObject(expected);
+  });
+  it('adds items to the right if it hits bounds to the left', () => {
+    const model = (0, _model.buildPaginationModel)(15, 2, true, 1, 1);
+    const expected = [{
+      type: 'PREV',
+      num: 1
+    }, {
+      type: 'NUM',
+      num: 1
+    }, {
+      type: 'NUM',
+      num: 2,
+      selected: true
+    }, {
+      type: 'NUM',
+      num: 3
+    }, // normally with a surround of 1, only 1 and 3 would be shown
+    // however, since 1 was already shown, we extend to 4
+    {
+      type: 'NUM',
+      num: 4
+    }, {
+      type: 'BREAK'
+    }];
+    expect(first(model, 6)).toMatchObject(expected);
+  });
+  it('adds items to the left if it hits bounds to the right', () => {
+    const model = (0, _model.buildPaginationModel)(15, 14, true, 1, 1);
+    const expected = [// normally with a surround of 1, only 13 and 15 would be shown
+    // however, since 15 was already shown, we extend to 12
+    {
+      type: 'BREAK'
+    }, {
+      type: 'NUM',
+      num: 12
+    }, {
+      type: 'NUM',
+      num: 13
+    }, {
+      type: 'NUM',
+      num: 14,
+      selected: true
+    }, {
+      type: 'NUM',
+      num: 15
+    }, {
+      type: 'NEXT',
+      num: 15
+    }];
+    expect(last(model, 6)).toMatchObject(expected);
+  });
+  it('correctly creates breaks next to the next/prev links when margin is 0', () => {
+    const model = (0, _model.buildPaginationModel)(10, 5, true, 0, 1);
+    const expected = [{
+      type: 'PREV'
+    }, {
+      type: 'BREAK',
+      num: 1
+    }, {
+      type: 'NUM',
+      num: 4
+    }, {
+      type: 'NUM',
+      num: 5,
+      selected: true
+    }, {
+      type: 'NUM',
+      num: 6
+    }, {
+      type: 'BREAK',
+      num: 10
+    }, {
+      type: 'NEXT'
+    }];
+    expect(model).toMatchObject(expected);
+  });
+});

package/lib/__tests__/PointerBox.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib/__tests__/PointerBox.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _constants = require("../constants");
+
+var _testing = require("../utils/testing");
+
+var _react2 = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+require("babel-polyfill");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+expect.extend(_jestAxe.toHaveNoViolations);
+describe('PointerBox', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _.PointerBox,
+    systemPropArray: [_constants.COMMON, _constants.LAYOUT, _constants.BORDER, _constants.FLEX]
+  });
+  (0, _testing.checkExports)('PointerBox', {
+    default: _.PointerBox
+  });
+  it('renders a <Caret> in <BorderBox> with relative positioning', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.PointerBox, null))).toMatchSnapshot();
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.PointerBox, null));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react2.cleanup)();
+  });
+  it('passes the "borderColor" prop to both <BorderBox> and <Caret>', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.PointerBox, {
+      borderColor: "danger.emphasis"
+    }))).toMatchSnapshot();
+  });
+  it('passes the "bg" prop to both <BorderBox> and <Caret>', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.PointerBox, {
+      bg: "danger.subtle"
+    }))).toMatchSnapshot();
+  });
+});

package/lib/__tests__/Popover.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib/__tests__/Popover.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Popover = _interopRequireDefault(require("../Popover"));
+
+var _testing = require("../utils/testing");
+
+var _constants = require("../constants");
+
+var _react2 = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+require("babel-polyfill");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+expect.extend(_jestAxe.toHaveNoViolations);
+
+const comp = /*#__PURE__*/_react.default.createElement(_Popover.default, {
+  caret: "top",
+  open: true
+}, /*#__PURE__*/_react.default.createElement(_Popover.default.Content, null, "Hello!"));
+
+describe('Popover', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _Popover.default,
+    systemPropArray: [_constants.COMMON, _constants.LAYOUT, _constants.POSITION],
+    toRender: () => comp
+  });
+  (0, _testing.checkExports)('Popover', {
+    default: _Popover.default
+  });
+  describe('Popover.Content', () => {
+    (0, _testing.behavesAsComponent)({
+      Component: _Popover.default.Content,
+      systemPropArray: [_constants.COMMON, _constants.LAYOUT, _constants.BORDER],
+      toRender: () => comp
+    });
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Popover.default, {
+      caret: "top",
+      open: true
+    }, /*#__PURE__*/_react.default.createElement(_Popover.default.Content, null, "Hello!")));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react2.cleanup)();
+  });
+  const CARET_POSITIONS = ['top', 'bottom', 'left', 'right', 'bottom-left', 'bottom-right', 'top-left', 'top-right', 'left-bottom', 'left-top', 'right-bottom', 'right-top'];
+
+  for (const pos of CARET_POSITIONS) {
+    it(`renders correctly for a caret position of ${pos}`, () => {
+      const element = /*#__PURE__*/_react.default.createElement(_Popover.default, {
+        caret: pos,
+        open: true
+      }, /*#__PURE__*/_react.default.createElement(_Popover.default.Content, null, "Hello!"));
+
+      expect((0, _testing.render)(element)).toMatchSnapshot();
+    });
+  }
+
+  it('renders both elements as a <div>', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_Popover.default, null)).type).toEqual('div');
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_Popover.default.Content, null)).type).toEqual('div');
+  });
+});

package/lib/__tests__/Portal.d.ts

@@ -0,0 +1 @@
+export {};