@primer/components 29.1.0 → 29.1.1-rc.cea79543

package/lib/__tests__/Portal.js

@@ -0,0 +1,124 @@
+"use strict";
+
+var _index = _interopRequireWildcard(require("../Portal/index"));
+
+var _react = require("@testing-library/react");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _BaseStyles = _interopRequireDefault(require("../BaseStyles"));
+
+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; }
+
+describe('Portal', () => {
+  it('renders a default portal into document.body (no BaseStyles present)', () => {
+    var _generatedRoot$textCo;
+
+    const {
+      baseElement
+    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_index.default, null, "123test123"));
+    const generatedRoot = baseElement.querySelector('#__primerPortalRoot__');
+    expect(generatedRoot).toBeInstanceOf(HTMLElement);
+    expect(generatedRoot === null || generatedRoot === void 0 ? void 0 : (_generatedRoot$textCo = generatedRoot.textContent) === null || _generatedRoot$textCo === void 0 ? void 0 : _generatedRoot$textCo.trim()).toEqual('123test123');
+    baseElement.innerHTML = '';
+  });
+  it('renders a default portal into nearest BaseStyles element', () => {
+    var _generatedRoot$textCo2;
+
+    const toRender = /*#__PURE__*/_react2.default.createElement("div", {
+      id: "renderedRoot"
+    }, /*#__PURE__*/_react2.default.createElement(_BaseStyles.default, null, /*#__PURE__*/_react2.default.createElement("div", {
+      id: "baseStylesRoot"
+    }, /*#__PURE__*/_react2.default.createElement(_index.default, null, "123test123"))));
+
+    const {
+      baseElement
+    } = (0, _react.render)(toRender);
+    const baseStylesRoot = baseElement.querySelector('#baseStylesRoot');
+    const baseStylesElement = baseStylesRoot === null || baseStylesRoot === void 0 ? void 0 : baseStylesRoot.parentElement;
+    const generatedRoot = baseStylesElement === null || baseStylesElement === void 0 ? void 0 : baseStylesElement.querySelector('#__primerPortalRoot__');
+    expect(baseStylesRoot).toBeInstanceOf(HTMLElement);
+    expect(baseStylesElement).toBeInstanceOf(HTMLElement);
+    expect(generatedRoot).toBeInstanceOf(HTMLElement);
+    expect(generatedRoot === null || generatedRoot === void 0 ? void 0 : (_generatedRoot$textCo2 = generatedRoot.textContent) === null || _generatedRoot$textCo2 === void 0 ? void 0 : _generatedRoot$textCo2.trim()).toEqual('123test123');
+    baseElement.innerHTML = '';
+  });
+  it('renders into the custom portal root (default root name - declarative)', () => {
+    var _portalRoot$textConte;
+
+    const toRender = /*#__PURE__*/_react2.default.createElement("div", {
+      id: "renderedRoot"
+    }, /*#__PURE__*/_react2.default.createElement("div", {
+      id: "__primerPortalRoot__"
+    }), /*#__PURE__*/_react2.default.createElement(_index.default, null, "123test123"));
+
+    const {
+      baseElement
+    } = (0, _react.render)(toRender);
+    const renderedRoot = baseElement.querySelector('#renderedRoot');
+    const portalRoot = renderedRoot === null || renderedRoot === void 0 ? void 0 : renderedRoot.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeInstanceOf(HTMLElement);
+    expect(portalRoot === null || portalRoot === void 0 ? void 0 : (_portalRoot$textConte = portalRoot.textContent) === null || _portalRoot$textConte === void 0 ? void 0 : _portalRoot$textConte.trim()).toEqual('123test123');
+    baseElement.innerHTML = '';
+  });
+  it('renders into the custom portal root (default root name - imperative)', () => {
+    var _portalRoot$textConte2;
+
+    const portalRootJSX = /*#__PURE__*/_react2.default.createElement("div", {
+      id: "myPortalRoot"
+    });
+
+    let {
+      baseElement
+    } = (0, _react.render)(portalRootJSX);
+    const portalRoot = baseElement.querySelector('#myPortalRoot');
+    expect(portalRoot).toBeInstanceOf(HTMLElement);
+    (0, _index.registerPortalRoot)(baseElement.querySelector('#myPortalRoot'));
+
+    const toRender = /*#__PURE__*/_react2.default.createElement(_index.default, null, "123test123");
+
+    ({
+      baseElement
+    } = (0, _react.render)(toRender));
+    expect(portalRoot === null || portalRoot === void 0 ? void 0 : (_portalRoot$textConte2 = portalRoot.textContent) === null || _portalRoot$textConte2 === void 0 ? void 0 : _portalRoot$textConte2.trim()).toEqual('123test123');
+    baseElement.innerHTML = '';
+  });
+  it('renders into multiple custom portal roots (named)', () => {
+    var _generatedRoot$textCo3, _fancyPortalRoot1$tex, _fancyPortalRoot2$tex;
+
+    const portalRootJSX = /*#__PURE__*/_react2.default.createElement("main", null, /*#__PURE__*/_react2.default.createElement("div", {
+      id: "myPortalRoot1"
+    }), /*#__PURE__*/_react2.default.createElement("div", {
+      id: "myPortalRoot2"
+    }));
+
+    let {
+      baseElement
+    } = (0, _react.render)(portalRootJSX);
+    const fancyPortalRoot1 = baseElement.querySelector('#myPortalRoot1');
+    const fancyPortalRoot2 = baseElement.querySelector('#myPortalRoot2');
+    expect(fancyPortalRoot1).toBeInstanceOf(HTMLElement);
+    expect(fancyPortalRoot2).toBeInstanceOf(HTMLElement);
+    (0, _index.registerPortalRoot)(baseElement.querySelector('#myPortalRoot1'), 'fancyPortal1');
+    (0, _index.registerPortalRoot)(baseElement.querySelector('#myPortalRoot2'), 'fancyPortal2');
+
+    const toRender = /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement(_index.default, null, "123test123"), /*#__PURE__*/_react2.default.createElement(_index.default, {
+      containerName: "fancyPortal1"
+    }, "456test456"), /*#__PURE__*/_react2.default.createElement(_index.default, {
+      containerName: "fancyPortal2"
+    }, "789test789"));
+
+    ({
+      baseElement
+    } = (0, _react.render)(toRender));
+    const generatedRoot = baseElement.querySelector('#__primerPortalRoot__');
+    expect(generatedRoot === null || generatedRoot === void 0 ? void 0 : (_generatedRoot$textCo3 = generatedRoot.textContent) === null || _generatedRoot$textCo3 === void 0 ? void 0 : _generatedRoot$textCo3.trim()).toEqual('123test123');
+    expect(fancyPortalRoot1 === null || fancyPortalRoot1 === void 0 ? void 0 : (_fancyPortalRoot1$tex = fancyPortalRoot1.textContent) === null || _fancyPortalRoot1$tex === void 0 ? void 0 : _fancyPortalRoot1$tex.trim()).toEqual('456test456');
+    expect(fancyPortalRoot2 === null || fancyPortalRoot2 === void 0 ? void 0 : (_fancyPortalRoot2$tex = fancyPortalRoot2.textContent) === null || _fancyPortalRoot2$tex === void 0 ? void 0 : _fancyPortalRoot2$tex.trim()).toEqual('789test789');
+    baseElement.innerHTML = '';
+  });
+});

package/lib/__tests__/Position.d.ts

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

package/lib/__tests__/Position.js

@@ -0,0 +1,149 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _constants = require("../constants");
+
+var _ = require("..");
+
+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('position components', () => {
+  describe('Absolute', () => {
+    (0, _testing.behavesAsComponent)({
+      Component: _.Absolute,
+      systemPropArray: [_constants.LAYOUT, _constants.POSITION]
+    });
+    (0, _testing.checkExports)('Position', {
+      default: _.Position,
+      Absolute: _.Absolute,
+      Fixed: _.Fixed,
+      Relative: _.Relative,
+      Sticky: _.Sticky
+    });
+    it('should have no axe violations', async () => {
+      const {
+        container
+      } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Absolute, null));
+      const results = await (0, _jestAxe.axe)(container);
+      expect(results).toHaveNoViolations();
+      (0, _react2.cleanup)();
+    });
+    it('sets position: absolute', () => {
+      expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Absolute, null))).toHaveStyleRule('position', 'absolute');
+    });
+    it('can render other components with the as prop', () => {
+      const result = (0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Absolute, {
+        as: _.Box,
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor: "border.default",
+        borderRadius: 2
+      }));
+      expect(result).toHaveStyleRule('position', 'absolute');
+      expect(result).toHaveStyleRule('border-width', '1px');
+      expect(result).toHaveStyleRule('border-style', 'solid');
+    });
+  });
+  describe('Fixed', () => {
+    (0, _testing.behavesAsComponent)({
+      Component: _.Fixed,
+      systemPropArray: [_constants.LAYOUT, _constants.POSITION]
+    });
+    it('respects the "as" prop', () => {
+      expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Fixed, {
+        as: "span"
+      })).type).toEqual('span');
+    });
+    it('should have no axe violations', async () => {
+      const {
+        container
+      } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Fixed, null));
+      const results = await (0, _jestAxe.axe)(container);
+      expect(results).toHaveNoViolations();
+      (0, _react2.cleanup)();
+    });
+    it('sets position: fixed', () => {
+      expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Fixed, null))).toHaveStyleRule('position', 'fixed');
+    });
+    it('can render other components with the as prop', () => {
+      const result = (0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Fixed, {
+        as: _.Box,
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor: "border.default",
+        borderRadius: 2
+      }));
+      expect(result).toHaveStyleRule('position', 'fixed');
+      expect(result).toHaveStyleRule('border-width', '1px');
+      expect(result).toHaveStyleRule('border-style', 'solid');
+    });
+  });
+  describe('Relative', () => {
+    (0, _testing.behavesAsComponent)({
+      Component: _.Relative,
+      systemPropArray: [_constants.LAYOUT, _constants.POSITION]
+    });
+    it('should have no axe violations', async () => {
+      const {
+        container
+      } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Relative, null));
+      const results = await (0, _jestAxe.axe)(container);
+      expect(results).toHaveNoViolations();
+      (0, _react2.cleanup)();
+    });
+    it('sets position: relative', () => {
+      expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Relative, null))).toHaveStyleRule('position', 'relative');
+    });
+    it('can render other components with the as prop', () => {
+      const result = (0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Relative, {
+        as: _.Box,
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor: "border.default",
+        borderRadius: 2
+      }));
+      expect(result).toHaveStyleRule('position', 'relative');
+      expect(result).toHaveStyleRule('border-width', '1px');
+      expect(result).toHaveStyleRule('border-style', 'solid');
+    });
+  });
+  describe('Sticky', () => {
+    (0, _testing.behavesAsComponent)({
+      Component: _.Sticky,
+      systemPropArray: [_constants.LAYOUT, _constants.POSITION]
+    });
+    it('should have no axe violations', async () => {
+      const {
+        container
+      } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Sticky, null));
+      const results = await (0, _jestAxe.axe)(container);
+      expect(results).toHaveNoViolations();
+      (0, _react2.cleanup)();
+    });
+    it('sets position: sticky', () => {
+      expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Sticky, null))).toHaveStyleRule('position', 'sticky');
+    });
+    it('can render other components with the as prop', () => {
+      const result = (0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Sticky, {
+        as: _.Box,
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor: "border.default",
+        borderRadius: 2
+      }));
+      expect(result).toHaveStyleRule('position', 'sticky');
+      expect(result).toHaveStyleRule('border-width', '1px');
+      expect(result).toHaveStyleRule('border-style', 'solid');
+    });
+  });
+});

package/lib/__tests__/ProgressBar.d.ts

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

package/lib/__tests__/ProgressBar.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+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);
+describe('ProgressBar', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _.ProgressBar,
+    systemPropArray: [_constants.COMMON]
+  });
+  (0, _testing.checkExports)('ProgressBar', {
+    default: _.ProgressBar
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.ProgressBar, {
+      progress: 80,
+      barSize: "small"
+    }));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react2.cleanup)();
+  });
+  it('respects the "barSize" prop', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.ProgressBar, {
+      progress: 80,
+      barSize: "small"
+    }))).toHaveStyleRule('height', '5px');
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.ProgressBar, {
+      progress: 80,
+      barSize: "default"
+    }))).toHaveStyleRule('height', '8px');
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.ProgressBar, {
+      progress: 80,
+      barSize: "large"
+    }))).toHaveStyleRule('height', '10px');
+  });
+  it('respects the "inline" prop', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.ProgressBar, {
+      progress: 80,
+      inline: true
+    }))).toHaveStyleRule('display', 'inline-flex');
+  });
+  it('respects the "width" prop', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.ProgressBar, {
+      progress: 80,
+      inline: true,
+      width: "100px"
+    }))).toHaveStyleRule('width', '100px');
+  });
+  it('respects the "progress" prop', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.ProgressBar, {
+      progress: 80
+    }))).toMatchSnapshot();
+  });
+});

package/lib/__tests__/SelectMenu.d.ts

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

package/lib/__tests__/SelectMenu.js

@@ -0,0 +1,155 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+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);
+
+const BasicSelectMenu = ({
+  onClick,
+  as,
+  align = 'left'
+}) => {
+  return /*#__PURE__*/_react.default.createElement(_.SelectMenu, {
+    as: as
+  }, /*#__PURE__*/_react.default.createElement(_.Button, {
+    as: "summary"
+  }, "Projects"), /*#__PURE__*/_react.default.createElement(_.SelectMenu.Modal, {
+    title: "Projects",
+    align: align
+  }, /*#__PURE__*/_react.default.createElement(_.SelectMenu.List, null, /*#__PURE__*/_react.default.createElement(_.SelectMenu.Item, {
+    selected: true,
+    href: "#"
+  }, "Primer Components bugs"), /*#__PURE__*/_react.default.createElement(_.SelectMenu.Item, {
+    onClick: onClick,
+    as: as,
+    "data-test": "menu-item",
+    href: "#"
+  }, "Primer Components roadmap"), /*#__PURE__*/_react.default.createElement(_.SelectMenu.Divider, null, "stuff"), /*#__PURE__*/_react.default.createElement(_.SelectMenu.Item, {
+    href: "#"
+  }, " Project 3"), /*#__PURE__*/_react.default.createElement(_.SelectMenu.Item, {
+    href: "#"
+  }, "Project 4"), /*#__PURE__*/_react.default.createElement(_.SelectMenu.Footer, null, "footer"))));
+};
+
+BasicSelectMenu.displayName = "BasicSelectMenu";
+
+const MenuWithTabs = ({
+  onClick
+}) => {
+  return /*#__PURE__*/_react.default.createElement(_.SelectMenu, {
+    initialTab: "Organization"
+  }, /*#__PURE__*/_react.default.createElement(_.Button, {
+    as: "summary"
+  }, "Projects"), /*#__PURE__*/_react.default.createElement(_.SelectMenu.Modal, {
+    title: "Projects"
+  }, /*#__PURE__*/_react.default.createElement(_.SelectMenu.Tabs, null, /*#__PURE__*/_react.default.createElement(_.SelectMenu.Tab, {
+    index: 0,
+    onClick: onClick,
+    "data-test": "repo-tab",
+    tabName: "Repository"
+  }), /*#__PURE__*/_react.default.createElement(_.SelectMenu.Tab, {
+    index: 1,
+    tabName: "Organization"
+  })), /*#__PURE__*/_react.default.createElement(_.SelectMenu.TabPanel, {
+    tabName: "Repository"
+  }, /*#__PURE__*/_react.default.createElement(_.SelectMenu.Item, {
+    href: "#"
+  }, "Primer Components bugs"), /*#__PURE__*/_react.default.createElement(_.SelectMenu.Item, {
+    href: "#"
+  }, "Primer Components roadmap"), /*#__PURE__*/_react.default.createElement(_.SelectMenu.Item, {
+    href: "#"
+  }, " Project 3"), /*#__PURE__*/_react.default.createElement(_.SelectMenu.Item, {
+    href: "#"
+  }, "Project 4")), /*#__PURE__*/_react.default.createElement(_.SelectMenu.TabPanel, {
+    tabName: "Organization"
+  }, /*#__PURE__*/_react.default.createElement(_.SelectMenu.Item, {
+    href: "#"
+  }, " Project 2")), /*#__PURE__*/_react.default.createElement(_.SelectMenu.Footer, null, "Showing 3 of 3")));
+};
+
+MenuWithTabs.displayName = "MenuWithTabs";
+describe('SelectMenu', () => {
+  (0, _testing.checkExports)('SelectMenu', {
+    default: _.SelectMenu
+  });
+
+  for (const Comp of [_.SelectMenu.List, _.SelectMenu.Divider, _.SelectMenu.Filter, _.SelectMenu.Item, _.SelectMenu.List, _.SelectMenu.Modal, _.SelectMenu.Tabs, _.SelectMenu.Tab, _.SelectMenu.TabPanel, _.SelectMenu.Header]) {
+    it('sets a valid displayName', () => {
+      expect(Comp.displayName).toMatch(_testing.COMPONENT_DISPLAY_NAME_REGEX);
+    });
+  }
+
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(BasicSelectMenu, null));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react2.cleanup)();
+  });
+  it('does not allow the "as" prop on SelectMenu', () => {
+    const component = (0, _testing.mount)( /*#__PURE__*/_react.default.createElement(BasicSelectMenu, {
+      as: "span"
+    }));
+    expect(component.find('details').length).toEqual(1);
+  });
+  it('shows correct initial tab', () => {
+    const testInstance = (0, _testing.renderRoot)( /*#__PURE__*/_react.default.createElement(MenuWithTabs, null));
+    expect(testInstance.findByProps({
+      'aria-selected': true
+    }).props.children).toBe('Organization');
+  });
+  it('clicking on a tab opens the tab', () => {
+    const component = (0, _testing.mount)( /*#__PURE__*/_react.default.createElement(MenuWithTabs, null));
+    const tab = component.find("[data-test='repo-tab']").first();
+    tab.simulate('click');
+    expect(tab.getDOMNode().attributes.getNamedItem('aria-selected')).toBeTruthy();
+  });
+  it('selected items have aria-checked', () => {
+    const testInstance = (0, _testing.renderRoot)( /*#__PURE__*/_react.default.createElement(BasicSelectMenu, null));
+    expect(testInstance.findByProps({
+      'aria-checked': true
+    }).props.children[1]).toBe('Primer Components bugs');
+  });
+  it('clicking on a list item calls user provided onClick handler', () => {
+    const mockClick = jest.fn();
+    const component = (0, _testing.mount)( /*#__PURE__*/_react.default.createElement(BasicSelectMenu, {
+      onClick: mockClick
+    }));
+    const item = component.find("[data-test='menu-item']").first();
+    item.simulate('click');
+    expect(mockClick.mock.calls.length).toEqual(1);
+  });
+  it('clicking on a tab calls user provided onClick handler', () => {
+    const mockClick = jest.fn();
+    const component = (0, _testing.mount)( /*#__PURE__*/_react.default.createElement(MenuWithTabs, {
+      onClick: mockClick
+    }));
+    const item = component.find("[data-test='repo-tab']").first();
+    item.simulate('click');
+    expect(mockClick.mock.calls.length).toEqual(1);
+  });
+  it('clicking on an item closes the modal', () => {
+    const component = (0, _testing.mount)( /*#__PURE__*/_react.default.createElement(BasicSelectMenu, null));
+    const item = component.find("[data-test='menu-item']").first();
+    item.simulate('click');
+    expect(component.getDOMNode().attributes.getNamedItem('open')).toBeFalsy();
+  });
+  it('right-aligned modal has right: 0px', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(BasicSelectMenu, {
+      align: "right"
+    }))).toMatchSnapshot();
+  });
+});

package/lib/__tests__/SelectPanel.d.ts

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

package/lib/__tests__/SelectPanel.js

@@ -0,0 +1,83 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+require("babel-polyfill");
+
+var _jestAxe = require("jest-axe");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _theme = _interopRequireDefault(require("../theme"));
+
+var _SelectPanel = require("../SelectPanel");
+
+var _constants = require("../constants");
+
+var _testing = require("../utils/testing");
+
+var _ = require("..");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+expect.extend(_jestAxe.toHaveNoViolations);
+const items = [{
+  text: 'Foo'
+}, {
+  text: 'Bar'
+}, {
+  text: 'Baz'
+}, {
+  text: 'Bon'
+}];
+
+function SimpleSelectPanel() {
+  const [selected, setSelected] = _react2.default.useState([]);
+
+  const [, setFilter] = _react2.default.useState('');
+
+  const [open, setOpen] = _react2.default.useState(false);
+
+  return /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+    theme: _theme.default
+  }, /*#__PURE__*/_react2.default.createElement(_.SSRProvider, null, /*#__PURE__*/_react2.default.createElement(_.BaseStyles, null, /*#__PURE__*/_react2.default.createElement(_SelectPanel.SelectPanel, {
+    items: items,
+    placeholder: "Select Items",
+    placeholderText: "Filter Items",
+    selected: selected,
+    onSelectedChange: setSelected,
+    onFilterChange: setFilter,
+    open: open,
+    onOpenChange: setOpen
+  }), /*#__PURE__*/_react2.default.createElement("div", {
+    id: "portal-root"
+  }))));
+}
+
+SimpleSelectPanel.displayName = "SimpleSelectPanel";
+describe('SelectPanel', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  (0, _testing.behavesAsComponent)({
+    Component: _SelectPanel.SelectPanel,
+    systemPropArray: [_constants.COMMON],
+    options: {
+      skipAs: true,
+      skipSx: true
+    },
+    toRender: () => /*#__PURE__*/_react2.default.createElement(SimpleSelectPanel, null)
+  });
+  (0, _testing.checkExports)('SelectPanel', {
+    default: undefined,
+    SelectPanel: _SelectPanel.SelectPanel
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(SimpleSelectPanel, null));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react.cleanup)();
+  });
+});

package/lib/__tests__/SideNav.d.ts

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

package/lib/__tests__/SideNav.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+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);
+describe('SideNav', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _.SideNav,
+    systemPropArray: [_constants.BORDER, _constants.LAYOUT, _constants.COMMON, _constants.FLEX]
+  });
+  (0, _testing.checkExports)('SideNav', {
+    default: _.SideNav
+  });
+  describe('SideNav.Link', () => {
+    (0, _testing.behavesAsComponent)({
+      Component: _.SideNav.Link,
+      systemPropArray: [_constants.COMMON, _constants.TYPOGRAPHY]
+    });
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.SideNav, null, /*#__PURE__*/_react.default.createElement(_.SideNav.Link, {
+      href: "#"
+    }, "One"), /*#__PURE__*/_react.default.createElement(_.SideNav.Link, {
+      href: "#",
+      selected: true
+    }, "Two")));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react2.cleanup)();
+  });
+  it('renders a <nav> and <a>', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.SideNav, null)).type).toEqual('nav');
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.SideNav.Link, null)).type).toEqual('a');
+  });
+  it('sets aria-label appropriately', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.SideNav, {
+      "aria-label": "foo"
+    })).props['aria-label']).toEqual('foo');
+  });
+  it('sets aria-current on a selected link', () => {
+    const elem = /*#__PURE__*/_react.default.createElement(_.SideNav, null, /*#__PURE__*/_react.default.createElement(_.SideNav.Link, {
+      href: "#one"
+    }, "One"), /*#__PURE__*/_react.default.createElement(_.SideNav.Link, {
+      href: "#two",
+      selected: true
+    }, "Two"));
+
+    const wrapper = (0, _testing.mount)(elem);
+    expect(wrapper.find('[aria-current="page"]').text()).toEqual('Two');
+  });
+  it('sets different styles for SideNavs with the lightweight variant', () => {
+    const regular = (0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.SideNav, null));
+    const lightweight = (0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.SideNav, {
+      variant: "lightweight"
+    }));
+    expect(regular.props.className).toEqual(expect.stringContaining('variant-normal'));
+    expect(lightweight.props.className).toEqual(expect.stringContaining('variant-lightweight'));
+  });
+});

package/lib/__tests__/Spinner.d.ts

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