@primer/components 31.2.0-rc.c7f73427 → 31.2.1-rc.0e01900c

package/lib/__tests__/Portal.test.jsx

@@ -0,0 +1,102 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const index_1 = __importStar(require("../Portal/index"));
+const react_1 = require("@testing-library/react");
+const react_2 = __importDefault(require("react"));
+const BaseStyles_1 = __importDefault(require("../BaseStyles"));
+describe('Portal', () => {
+    it('renders a default portal into document.body (no BaseStyles present)', () => {
+        const { baseElement } = react_1.render(<index_1.default>123test123</index_1.default>);
+        const generatedRoot = baseElement.querySelector('#__primerPortalRoot__');
+        expect(generatedRoot).toBeInstanceOf(HTMLElement);
+        expect(generatedRoot?.textContent?.trim()).toEqual('123test123');
+        baseElement.innerHTML = '';
+    });
+    it('renders a default portal into nearest BaseStyles element', () => {
+        const toRender = (<div id="renderedRoot">
+        <BaseStyles_1.default>
+          <div id="baseStylesRoot">
+            <index_1.default>123test123</index_1.default>
+          </div>
+        </BaseStyles_1.default>
+      </div>);
+        const { baseElement } = react_1.render(toRender);
+        const baseStylesRoot = baseElement.querySelector('#baseStylesRoot');
+        const baseStylesElement = baseStylesRoot?.parentElement;
+        const generatedRoot = baseStylesElement?.querySelector('#__primerPortalRoot__');
+        expect(baseStylesRoot).toBeInstanceOf(HTMLElement);
+        expect(baseStylesElement).toBeInstanceOf(HTMLElement);
+        expect(generatedRoot).toBeInstanceOf(HTMLElement);
+        expect(generatedRoot?.textContent?.trim()).toEqual('123test123');
+        baseElement.innerHTML = '';
+    });
+    it('renders into the custom portal root (default root name - declarative)', () => {
+        const toRender = (<div id="renderedRoot">
+        <div id="__primerPortalRoot__"></div>
+        <index_1.default>123test123</index_1.default>
+      </div>);
+        const { baseElement } = react_1.render(toRender);
+        const renderedRoot = baseElement.querySelector('#renderedRoot');
+        const portalRoot = renderedRoot?.querySelector('#__primerPortalRoot__');
+        expect(portalRoot).toBeInstanceOf(HTMLElement);
+        expect(portalRoot?.textContent?.trim()).toEqual('123test123');
+        baseElement.innerHTML = '';
+    });
+    it('renders into the custom portal root (default root name - imperative)', () => {
+        const portalRootJSX = <div id="myPortalRoot"></div>;
+        let { baseElement } = react_1.render(portalRootJSX);
+        const portalRoot = baseElement.querySelector('#myPortalRoot');
+        expect(portalRoot).toBeInstanceOf(HTMLElement);
+        index_1.registerPortalRoot(baseElement.querySelector('#myPortalRoot'));
+        const toRender = <index_1.default>123test123</index_1.default>;
+        ({ baseElement } = react_1.render(toRender));
+        expect(portalRoot?.textContent?.trim()).toEqual('123test123');
+        baseElement.innerHTML = '';
+    });
+    it('renders into multiple custom portal roots (named)', () => {
+        const portalRootJSX = (<main>
+        <div id="myPortalRoot1"></div>
+        <div id="myPortalRoot2"></div>
+      </main>);
+        let { baseElement } = react_1.render(portalRootJSX);
+        const fancyPortalRoot1 = baseElement.querySelector('#myPortalRoot1');
+        const fancyPortalRoot2 = baseElement.querySelector('#myPortalRoot2');
+        expect(fancyPortalRoot1).toBeInstanceOf(HTMLElement);
+        expect(fancyPortalRoot2).toBeInstanceOf(HTMLElement);
+        index_1.registerPortalRoot(baseElement.querySelector('#myPortalRoot1'), 'fancyPortal1');
+        index_1.registerPortalRoot(baseElement.querySelector('#myPortalRoot2'), 'fancyPortal2');
+        const toRender = (<>
+        <index_1.default>123test123</index_1.default>
+        <index_1.default containerName="fancyPortal1">456test456</index_1.default>
+        <index_1.default containerName="fancyPortal2">789test789</index_1.default>
+      </>);
+        ({ baseElement } = react_1.render(toRender));
+        const generatedRoot = baseElement.querySelector('#__primerPortalRoot__');
+        expect(generatedRoot?.textContent?.trim()).toEqual('123test123');
+        expect(fancyPortalRoot1?.textContent?.trim()).toEqual('456test456');
+        expect(fancyPortalRoot2?.textContent?.trim()).toEqual('789test789');
+        baseElement.innerHTML = '';
+    });
+});

package/lib/__tests__/Position.test.jsx

@@ -0,0 +1,96 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const __1 = require("..");
+const testing_1 = require("../utils/testing");
+const react_2 = require("@testing-library/react");
+const jest_axe_1 = require("jest-axe");
+require("babel-polyfill");
+expect.extend(jest_axe_1.toHaveNoViolations);
+describe('position components', () => {
+    describe('Absolute', () => {
+        testing_1.behavesAsComponent({ Component: __1.Absolute });
+        testing_1.checkExports('Position', {
+            default: __1.Position,
+            Absolute: __1.Absolute,
+            Fixed: __1.Fixed,
+            Relative: __1.Relative,
+            Sticky: __1.Sticky
+        });
+        it('should have no axe violations', async () => {
+            const { container } = react_2.render(<__1.Absolute />);
+            const results = await jest_axe_1.axe(container);
+            expect(results).toHaveNoViolations();
+            react_2.cleanup();
+        });
+        it('sets position: absolute', () => {
+            expect(testing_1.render(<__1.Absolute />)).toHaveStyleRule('position', 'absolute');
+        });
+        it('can render other components with the as prop', () => {
+            const result = testing_1.render(<__1.Absolute as={__1.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', () => {
+        testing_1.behavesAsComponent({ Component: __1.Fixed });
+        it('respects the "as" prop', () => {
+            expect(testing_1.render(<__1.Fixed as="span"/>).type).toEqual('span');
+        });
+        it('should have no axe violations', async () => {
+            const { container } = react_2.render(<__1.Fixed />);
+            const results = await jest_axe_1.axe(container);
+            expect(results).toHaveNoViolations();
+            react_2.cleanup();
+        });
+        it('sets position: fixed', () => {
+            expect(testing_1.render(<__1.Fixed />)).toHaveStyleRule('position', 'fixed');
+        });
+        it('can render other components with the as prop', () => {
+            const result = testing_1.render(<__1.Fixed as={__1.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', () => {
+        testing_1.behavesAsComponent({ Component: __1.Relative });
+        it('should have no axe violations', async () => {
+            const { container } = react_2.render(<__1.Relative />);
+            const results = await jest_axe_1.axe(container);
+            expect(results).toHaveNoViolations();
+            react_2.cleanup();
+        });
+        it('sets position: relative', () => {
+            expect(testing_1.render(<__1.Relative />)).toHaveStyleRule('position', 'relative');
+        });
+        it('can render other components with the as prop', () => {
+            const result = testing_1.render(<__1.Relative as={__1.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', () => {
+        testing_1.behavesAsComponent({ Component: __1.Sticky });
+        it('should have no axe violations', async () => {
+            const { container } = react_2.render(<__1.Sticky />);
+            const results = await jest_axe_1.axe(container);
+            expect(results).toHaveNoViolations();
+            react_2.cleanup();
+        });
+        it('sets position: sticky', () => {
+            expect(testing_1.render(<__1.Sticky />)).toHaveStyleRule('position', 'sticky');
+        });
+        it('can render other components with the as prop', () => {
+            const result = testing_1.render(<__1.Sticky as={__1.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.test.jsx

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const __1 = require("..");
+const testing_1 = require("../utils/testing");
+const react_2 = require("@testing-library/react");
+const jest_axe_1 = require("jest-axe");
+require("babel-polyfill");
+expect.extend(jest_axe_1.toHaveNoViolations);
+describe('ProgressBar', () => {
+    testing_1.behavesAsComponent({ Component: __1.ProgressBar });
+    testing_1.checkExports('ProgressBar', {
+        default: __1.ProgressBar
+    });
+    it('should have no axe violations', async () => {
+        const { container } = react_2.render(<__1.ProgressBar progress={80} barSize="small"/>);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_2.cleanup();
+    });
+    it('respects the "barSize" prop', () => {
+        expect(testing_1.render(<__1.ProgressBar progress={80} barSize="small"/>)).toHaveStyleRule('height', '5px');
+        expect(testing_1.render(<__1.ProgressBar progress={80} barSize="default"/>)).toHaveStyleRule('height', '8px');
+        expect(testing_1.render(<__1.ProgressBar progress={80} barSize="large"/>)).toHaveStyleRule('height', '10px');
+    });
+    it('respects the "inline" prop', () => {
+        expect(testing_1.render(<__1.ProgressBar progress={80} inline/>)).toHaveStyleRule('display', 'inline-flex');
+    });
+    it('respects the "width" prop', () => {
+        expect(testing_1.render(<__1.ProgressBar progress={80} inline width="100px"/>)).toHaveStyleRule('width', '100px');
+    });
+    it('respects the "progress" prop', () => {
+        expect(testing_1.render(<__1.ProgressBar progress={80}/>)).toMatchSnapshot();
+    });
+});

package/lib/__tests__/SelectMenu.test.jsx

@@ -0,0 +1,120 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const __1 = require("..");
+const testing_1 = require("../utils/testing");
+const react_2 = require("@testing-library/react");
+const jest_axe_1 = require("jest-axe");
+require("babel-polyfill");
+expect.extend(jest_axe_1.toHaveNoViolations);
+const BasicSelectMenu = ({ onClick, as, align = 'left' }) => {
+    return (<__1.SelectMenu as={as}>
+      <__1.Button as="summary">Projects</__1.Button>
+      <__1.SelectMenu.Modal title="Projects" align={align}>
+        <__1.SelectMenu.List>
+          <__1.SelectMenu.Item selected href="#">
+            Primer Components bugs
+          </__1.SelectMenu.Item>
+          <__1.SelectMenu.Item onClick={onClick} as={as} data-test="menu-item" href="#">
+            Primer Components roadmap
+          </__1.SelectMenu.Item>
+          <__1.SelectMenu.Divider>stuff</__1.SelectMenu.Divider>
+          <__1.SelectMenu.Item href="#"> Project 3</__1.SelectMenu.Item>
+          <__1.SelectMenu.Item href="#">Project 4</__1.SelectMenu.Item>
+          <__1.SelectMenu.Footer>footer</__1.SelectMenu.Footer>
+        </__1.SelectMenu.List>
+      </__1.SelectMenu.Modal>
+    </__1.SelectMenu>);
+};
+const MenuWithTabs = ({ onClick }) => {
+    return (<__1.SelectMenu initialTab="Organization">
+      <__1.Button as="summary">Projects</__1.Button>
+      <__1.SelectMenu.Modal title="Projects">
+        <__1.SelectMenu.Tabs>
+          <__1.SelectMenu.Tab index={0} onClick={onClick} data-test="repo-tab" tabName="Repository"/>
+          <__1.SelectMenu.Tab index={1} tabName="Organization"/>
+        </__1.SelectMenu.Tabs>
+        <__1.SelectMenu.TabPanel tabName="Repository">
+          <__1.SelectMenu.Item href="#">Primer Components bugs</__1.SelectMenu.Item>
+          <__1.SelectMenu.Item href="#">Primer Components roadmap</__1.SelectMenu.Item>
+          <__1.SelectMenu.Item href="#"> Project 3</__1.SelectMenu.Item>
+          <__1.SelectMenu.Item href="#">Project 4</__1.SelectMenu.Item>
+        </__1.SelectMenu.TabPanel>
+        <__1.SelectMenu.TabPanel tabName="Organization">
+          <__1.SelectMenu.Item href="#"> Project 2</__1.SelectMenu.Item>
+        </__1.SelectMenu.TabPanel>
+        <__1.SelectMenu.Footer>Showing 3 of 3</__1.SelectMenu.Footer>
+      </__1.SelectMenu.Modal>
+    </__1.SelectMenu>);
+};
+describe('SelectMenu', () => {
+    testing_1.checkExports('SelectMenu', {
+        default: __1.SelectMenu
+    });
+    for (const Comp of [
+        __1.SelectMenu.List,
+        __1.SelectMenu.Divider,
+        __1.SelectMenu.Filter,
+        __1.SelectMenu.Item,
+        __1.SelectMenu.List,
+        __1.SelectMenu.Modal,
+        __1.SelectMenu.Tabs,
+        __1.SelectMenu.Tab,
+        __1.SelectMenu.TabPanel,
+        __1.SelectMenu.Header
+    ]) {
+        it('sets a valid displayName', () => {
+            expect(Comp.displayName).toMatch(testing_1.COMPONENT_DISPLAY_NAME_REGEX);
+        });
+    }
+    it('should have no axe violations', async () => {
+        const { container } = react_2.render(<BasicSelectMenu />);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_2.cleanup();
+    });
+    it('does not allow the "as" prop on SelectMenu', () => {
+        const component = testing_1.mount(<BasicSelectMenu as="span"/>);
+        expect(component.find('details').length).toEqual(1);
+    });
+    it('shows correct initial tab', () => {
+        const testInstance = testing_1.renderRoot(<MenuWithTabs />);
+        expect(testInstance.findByProps({ 'aria-selected': true }).props.children).toBe('Organization');
+    });
+    it('clicking on a tab opens the tab', () => {
+        const component = testing_1.mount(<MenuWithTabs />);
+        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 = testing_1.renderRoot(<BasicSelectMenu />);
+        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 = testing_1.mount(<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 = testing_1.mount(<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 = testing_1.mount(<BasicSelectMenu />);
+        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(testing_1.render(<BasicSelectMenu align="right"/>)).toMatchSnapshot();
+    });
+});

package/lib/__tests__/SelectPanel.test.jsx

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("@testing-library/react");
+require("babel-polyfill");
+const jest_axe_1 = require("jest-axe");
+const react_2 = __importDefault(require("react"));
+const theme_1 = __importDefault(require("../theme"));
+const SelectPanel_1 = require("../SelectPanel");
+const testing_1 = require("../utils/testing");
+const __1 = require("..");
+expect.extend(jest_axe_1.toHaveNoViolations);
+const items = [{ text: 'Foo' }, { text: 'Bar' }, { text: 'Baz' }, { text: 'Bon' }];
+function SimpleSelectPanel() {
+    const [selected, setSelected] = react_2.default.useState([]);
+    const [, setFilter] = react_2.default.useState('');
+    const [open, setOpen] = react_2.default.useState(false);
+    return (<__1.ThemeProvider theme={theme_1.default}>
+      <__1.SSRProvider>
+        <__1.BaseStyles>
+          <SelectPanel_1.SelectPanel items={items} placeholder="Select Items" placeholderText="Filter Items" selected={selected} onSelectedChange={setSelected} onFilterChange={setFilter} open={open} onOpenChange={setOpen}/>
+          <div id="portal-root"></div>
+        </__1.BaseStyles>
+      </__1.SSRProvider>
+    </__1.ThemeProvider>);
+}
+describe('SelectPanel', () => {
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+    testing_1.behavesAsComponent({
+        Component: SelectPanel_1.SelectPanel,
+        options: { skipAs: true, skipSx: true },
+        toRender: () => <SimpleSelectPanel />
+    });
+    testing_1.checkExports('SelectPanel', {
+        default: undefined,
+        SelectPanel: SelectPanel_1.SelectPanel
+    });
+    it('should have no axe violations', async () => {
+        const { container } = react_1.render(<SimpleSelectPanel />);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_1.cleanup();
+    });
+});

package/lib/__tests__/SideNav.test.jsx

@@ -0,0 +1,55 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const __1 = require("..");
+const testing_1 = require("../utils/testing");
+const react_2 = require("@testing-library/react");
+const jest_axe_1 = require("jest-axe");
+require("babel-polyfill");
+expect.extend(jest_axe_1.toHaveNoViolations);
+describe('SideNav', () => {
+    testing_1.behavesAsComponent({ Component: __1.SideNav });
+    testing_1.checkExports('SideNav', {
+        default: __1.SideNav
+    });
+    describe('SideNav.Link', () => {
+        testing_1.behavesAsComponent({ Component: __1.SideNav.Link });
+    });
+    it('should have no axe violations', async () => {
+        const { container } = react_2.render(<__1.SideNav>
+        <__1.SideNav.Link href="#">One</__1.SideNav.Link>
+        <__1.SideNav.Link href="#" selected>
+          Two
+        </__1.SideNav.Link>
+      </__1.SideNav>);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_2.cleanup();
+    });
+    it('renders a <nav> and <a>', () => {
+        expect(testing_1.render(<__1.SideNav />).type).toEqual('nav');
+        expect(testing_1.render(<__1.SideNav.Link />).type).toEqual('a');
+    });
+    it('sets aria-label appropriately', () => {
+        expect(testing_1.render(<__1.SideNav aria-label="foo"/>).props['aria-label']).toEqual('foo');
+    });
+    it('sets aria-current on a selected link', () => {
+        const elem = (<__1.SideNav>
+        <__1.SideNav.Link href="#one">One</__1.SideNav.Link>
+        <__1.SideNav.Link href="#two" selected>
+          Two
+        </__1.SideNav.Link>
+      </__1.SideNav>);
+        const wrapper = testing_1.mount(elem);
+        expect(wrapper.find('[aria-current="page"]').text()).toEqual('Two');
+    });
+    it('sets different styles for SideNavs with the lightweight variant', () => {
+        const regular = testing_1.render(<__1.SideNav />);
+        const lightweight = testing_1.render(<__1.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.test.jsx

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const __1 = require("..");
+const testing_1 = require("../utils/testing");
+const react_2 = require("@testing-library/react");
+const jest_axe_1 = require("jest-axe");
+require("babel-polyfill");
+expect.extend(jest_axe_1.toHaveNoViolations);
+describe('Spinner', () => {
+    afterEach(() => {
+        react_2.cleanup();
+    });
+    testing_1.behavesAsComponent({
+        Component: __1.Spinner
+    });
+    testing_1.checkExports('Spinner', {
+        default: __1.Spinner
+    });
+    it('should have no axe violations', async () => {
+        const { container } = react_2.render(<__1.Spinner />);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+    });
+    it('should respect size arguments', () => {
+        const expectSize = (input, expectedSize) => {
+            const { container } = react_2.render(<__1.Spinner size={input}/>);
+            const svg = container.querySelector('svg');
+            expect(svg.getAttribute('height')).toEqual(expectedSize);
+            expect(svg.getAttribute('width')).toEqual(expectedSize);
+        };
+        // default: medium
+        expectSize(undefined, '32px');
+        expectSize('small', '16px');
+        expectSize('medium', '32px');
+        expectSize('large', '64px');
+    });
+});

package/lib/__tests__/StateLabel.test.jsx

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const __1 = require("..");
+const testing_1 = require("../utils/testing");
+const react_2 = require("@testing-library/react");
+const jest_axe_1 = require("jest-axe");
+require("babel-polyfill");
+expect.extend(jest_axe_1.toHaveNoViolations);
+describe('StateLabel', () => {
+    testing_1.behavesAsComponent({
+        Component: __1.StateLabel,
+        toRender: () => <__1.StateLabel status="issueOpened">Open</__1.StateLabel>,
+        options: {
+            // Rendering a StyledOcticon seems to break getComputedStyles, which
+            // the sx prop implementation test uses to make sure the prop is working correctly.
+            // Despite my best efforts, I cannot figure out why this is happening. So,
+            // unfortunately, we will simply skip this test.
+            skipSx: true
+        }
+    });
+    testing_1.checkExports('StateLabel', {
+        default: __1.StateLabel
+    });
+    it('should have no axe violations', async () => {
+        const { container } = react_2.render(<__1.StateLabel status="issueOpened"/>);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_2.cleanup();
+    });
+    it('respects the status prop', () => {
+        expect(testing_1.render(<__1.StateLabel status="issueOpened"/>)).toMatchSnapshot();
+        expect(testing_1.render(<__1.StateLabel status="issueClosed"/>)).toMatchSnapshot();
+        expect(testing_1.render(<__1.StateLabel status="pullMerged"/>)).toMatchSnapshot();
+    });
+    it('respects the variant prop', () => {
+        expect(testing_1.render(<__1.StateLabel variant="small" status="issueOpened"/>)).toMatchSnapshot();
+        expect(testing_1.render(<__1.StateLabel variant="normal" status="issueOpened"/>)).toMatchSnapshot();
+    });
+    it('renders children', () => {
+        expect(testing_1.render(<__1.StateLabel status="issueOpened">hi</__1.StateLabel>)).toMatchSnapshot();
+    });
+});

package/lib/__tests__/StyledOcticon.test.jsx

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const octicons_react_1 = require("@primer/octicons-react");
+const __1 = require("..");
+const testing_1 = require("../utils/testing");
+const react_2 = require("@testing-library/react");
+const jest_axe_1 = require("jest-axe");
+require("babel-polyfill");
+expect.extend(jest_axe_1.toHaveNoViolations);
+describe('StyledOcticon', () => {
+    testing_1.behavesAsComponent({
+        Component: __1.StyledOcticon,
+        toRender: () => <__1.StyledOcticon icon={octicons_react_1.XIcon}/>
+    });
+    testing_1.checkExports('StyledOcticon', {
+        default: __1.StyledOcticon
+    });
+    it('should have no axe violations', async () => {
+        const { container } = react_2.render(<__1.StyledOcticon icon={octicons_react_1.XIcon}/>);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_2.cleanup();
+    });
+});

package/lib/__tests__/SubNav.test.jsx

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const __1 = require("..");
+const testing_1 = require("../utils/testing");
+const react_2 = require("@testing-library/react");
+const jest_axe_1 = require("jest-axe");
+require("babel-polyfill");
+expect.extend(jest_axe_1.toHaveNoViolations);
+describe('SubNav', () => {
+    testing_1.behavesAsComponent({ Component: __1.SubNav });
+    testing_1.checkExports('SubNav', {
+        default: __1.SubNav
+    });
+    it('should have no axe violations', async () => {
+        const { container } = react_2.render(<__1.SubNav />);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_2.cleanup();
+    });
+    it('renders a <nav>', () => {
+        expect(testing_1.render(<__1.SubNav />).type).toEqual('nav');
+    });
+    it('adds the SubNav class', () => {
+        expect(testing_1.rendersClass(<__1.SubNav />, 'SubNav')).toEqual(true);
+    });
+    it('sets aria-label to the "label" prop', () => {
+        expect(testing_1.render(<__1.SubNav label="foo"/>).props['aria-label']).toEqual('foo');
+    });
+    it('wraps its children in an "SubNav-body" div', () => {
+        const children = <b>yo</b>;
+        const wrapper = testing_1.mount(<__1.SubNav>{children}</__1.SubNav>);
+        const body = wrapper.find('.SubNav-body');
+        expect(body.exists()).toEqual(true);
+        expect(body.childAt(0).type()).toEqual('b');
+    });
+    it('respects the "actions" prop', () => {
+        const content = <h1>hi!</h1>;
+        const wrapper = testing_1.mount(<__1.SubNav actions={content}/>);
+        const actions = wrapper.find('.SubNav-actions');
+        expect(actions.exists()).toEqual(true);
+        expect(actions.text()).toEqual('hi!');
+    });
+});

package/lib/__tests__/SubNavLink.test.jsx

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const __1 = require("..");
+const testing_1 = require("../utils/testing");
+const react_2 = require("@testing-library/react");
+const jest_axe_1 = require("jest-axe");
+require("babel-polyfill");
+expect.extend(jest_axe_1.toHaveNoViolations);
+describe('SubNav.Link', () => {
+    testing_1.behavesAsComponent({ Component: __1.SubNav.Link });
+    it('renders an <a> by default', () => {
+        expect(testing_1.render(<__1.SubNav.Link />).type).toEqual('a');
+    });
+    it('should have no axe violations', async () => {
+        const { container } = react_2.render(<__1.SubNav.Link />);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_2.cleanup();
+    });
+    it('respects the "selected" prop', () => {
+        expect(testing_1.render(<__1.SubNav.Link selected/>)).toMatchSnapshot();
+    });
+    it('adds activeClassName={SELECTED_CLASS} when it gets a "to" prop', () => {
+        const Link = ({ theme: _ignoredTheme, ...props }) => <div {...props}/>;
+        expect(testing_1.render(<__1.SubNav.Link as={Link} to="#"/>)).toMatchSnapshot();
+    });
+});