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

package/lib/__tests__/Autocomplete.test.jsx

@@ -0,0 +1,299 @@
+"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 testing_1 = require("../utils/testing");
+const react_2 = require("@testing-library/react");
+const jest_axe_1 = require("jest-axe");
+require("babel-polyfill");
+const Autocomplete_1 = __importDefault(require("../Autocomplete"));
+const index_1 = require("../index");
+const theme_1 = __importDefault(require("../theme"));
+const BaseStyles_1 = __importDefault(require("../BaseStyles"));
+const ThemeProvider_1 = require("../ThemeProvider");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
+expect.extend(jest_axe_1.toHaveNoViolations);
+const mockItems = [
+    { text: 'zero', id: 0 },
+    { text: 'one', id: 1 },
+    { text: 'two', id: 2 },
+    { text: 'three', id: 3 },
+    { text: 'four', id: 4 },
+    { text: 'five', id: 5 },
+    { text: 'six', id: 6 },
+    { text: 'seven', id: 7 },
+    { text: 'twenty', id: 20 },
+    { text: 'twentyone', id: 21 }
+];
+const AUTOCOMPLETE_LABEL = 'Autocomplete field';
+const LabelledAutocomplete = ({ inputProps = {}, menuProps }) => {
+    const { ['aria-labelledby']: ariaLabelledBy = 'autocompleteLabel', ...menuPropsRest } = menuProps;
+    const { id = 'autocompleteInput', ...inputPropsRest } = inputProps;
+    return (<ThemeProvider_1.ThemeProvider theme={theme_1.default}>
+      <index_1.SSRProvider>
+        <BaseStyles_1.default>
+          {/* eslint-disable-next-line jsx-a11y/label-has-for */}
+          <label htmlFor={id} id={ariaLabelledBy}>
+            Autocomplete field
+          </label>
+          <Autocomplete_1.default id="autocompleteId">
+            <Autocomplete_1.default.Input id={id} {...inputPropsRest}/>
+            <Autocomplete_1.default.Overlay>
+              <Autocomplete_1.default.Menu aria-labelledby={ariaLabelledBy} {...menuPropsRest}/>
+            </Autocomplete_1.default.Overlay>
+          </Autocomplete_1.default>
+        </BaseStyles_1.default>
+      </index_1.SSRProvider>
+    </ThemeProvider_1.ThemeProvider>);
+};
+describe('Autocomplete', () => {
+    describe('snapshots', () => {
+        it('renders a single select input', () => {
+            expect(testing_1.render(<index_1.SSRProvider>
+            <Autocomplete_1.default id="autocompleteId">
+              <Autocomplete_1.default.Input />
+              <Autocomplete_1.default.Menu aria-labelledby="labelId" items={mockItems} selectedItemIds={[]}/>
+            </Autocomplete_1.default>
+          </index_1.SSRProvider>)).toMatchSnapshot();
+        });
+        it('renders a multiselect input', () => {
+            expect(testing_1.render(<index_1.SSRProvider>
+            <Autocomplete_1.default id="autocompleteId">
+              <Autocomplete_1.default.Input />
+              <Autocomplete_1.default.Menu aria-labelledby="labelId" items={mockItems} selectedItemIds={[]} selectionVariant="multiple"/>
+            </Autocomplete_1.default>
+          </index_1.SSRProvider>)).toMatchSnapshot();
+        });
+        it('renders a multiselect input with selected menu items', () => {
+            expect(testing_1.render(<index_1.SSRProvider>
+            <Autocomplete_1.default id="autocompleteId">
+              <Autocomplete_1.default.Input />
+              <Autocomplete_1.default.Menu aria-labelledby="labelId" items={mockItems} selectedItemIds={[0, 1, 2]} selectionVariant="multiple"/>
+            </Autocomplete_1.default>
+          </index_1.SSRProvider>)).toMatchSnapshot();
+        });
+        it('renders a menu that contains an item to add to the menu', () => {
+            const handleAddItemMock = jest.fn();
+            expect(testing_1.render(<index_1.SSRProvider>
+            <Autocomplete_1.default id="autocompleteId">
+              <Autocomplete_1.default.Input />
+              <Autocomplete_1.default.Menu aria-labelledby="labelId" items={mockItems} selectionVariant="multiple" selectedItemIds={[]} addNewItem={{
+                    text: 'Add new item',
+                    handleAddItem: handleAddItemMock
+                }}/>
+            </Autocomplete_1.default>
+          </index_1.SSRProvider>)).toMatchSnapshot();
+        });
+        it('renders a custom empty state message', () => {
+            expect(testing_1.render(<index_1.SSRProvider>
+            <Autocomplete_1.default id="autocompleteId">
+              <Autocomplete_1.default.Input />
+              <Autocomplete_1.default.Menu aria-labelledby="labelId" items={[]} selectedItemIds={[]} emptyStateText="No results"/>
+            </Autocomplete_1.default>
+          </index_1.SSRProvider>)).toMatchSnapshot();
+        });
+        it('renders a loading state', () => {
+            expect(testing_1.render(<index_1.SSRProvider>
+            <Autocomplete_1.default id="autocompleteId">
+              <Autocomplete_1.default.Input />
+              <Autocomplete_1.default.Menu aria-labelledby="labelId" loading items={[]} selectedItemIds={[]}/>
+            </Autocomplete_1.default>
+          </index_1.SSRProvider>)).toMatchSnapshot();
+        });
+        it('renders with a custom text input component', () => {
+            expect(testing_1.render(<index_1.SSRProvider>
+            <Autocomplete_1.default id="autocompleteId">
+              <Autocomplete_1.default.Input as={() => <input type="text" id="customInput"/>}/>
+              <Autocomplete_1.default.Menu aria-labelledby="labelId" items={mockItems} selectedItemIds={[]}/>
+            </Autocomplete_1.default>
+          </index_1.SSRProvider>)).toMatchSnapshot();
+        });
+        it('renders with an input value', () => {
+            expect(testing_1.render(<index_1.SSRProvider>
+            <Autocomplete_1.default id="autocompleteId">
+              <Autocomplete_1.default.Input value="test"/>
+              <Autocomplete_1.default.Menu aria-labelledby="labelId" items={mockItems} selectedItemIds={[]}/>
+            </Autocomplete_1.default>
+          </index_1.SSRProvider>)).toMatchSnapshot();
+        });
+    });
+    describe('Autocomplete.Input', () => {
+        it('calls onChange', () => {
+            const onChangeMock = jest.fn();
+            const { container } = react_2.render(<LabelledAutocomplete inputProps={{ onChange: onChangeMock }} menuProps={{ items: mockItems, selectedItemIds: [] }}/>);
+            const inputNode = container.querySelector('#autocompleteInput');
+            expect(onChangeMock).not.toHaveBeenCalled();
+            inputNode && user_event_1.default.type(inputNode, 'z');
+            expect(onChangeMock).toHaveBeenCalled();
+        });
+        it('calls onFocus', () => {
+            const onFocusMock = jest.fn();
+            const { container } = react_2.render(<LabelledAutocomplete inputProps={{ onFocus: onFocusMock }} menuProps={{ items: mockItems, selectedItemIds: [] }}/>);
+            const inputNode = container.querySelector('#autocompleteInput');
+            expect(onFocusMock).not.toHaveBeenCalled();
+            inputNode && react_2.fireEvent.focus(inputNode);
+            expect(onFocusMock).toHaveBeenCalled();
+        });
+        it('calls onKeyDown', () => {
+            const onKeyDownMock = jest.fn();
+            const { getByLabelText } = react_2.render(<LabelledAutocomplete inputProps={{ onKeyDown: onKeyDownMock }} menuProps={{ items: [], selectedItemIds: [] }}/>);
+            const inputNode = getByLabelText(AUTOCOMPLETE_LABEL);
+            expect(onKeyDownMock).not.toHaveBeenCalled();
+            react_2.fireEvent.keyDown(inputNode, { key: 'Shift' });
+            expect(onKeyDownMock).toHaveBeenCalled();
+        });
+        it('calls onKeyUp', () => {
+            const onKeyUpMock = jest.fn();
+            const { getByLabelText } = react_2.render(<LabelledAutocomplete inputProps={{ onKeyUp: onKeyUpMock }} menuProps={{ items: [], selectedItemIds: [] }}/>);
+            const inputNode = getByLabelText(AUTOCOMPLETE_LABEL);
+            expect(onKeyUpMock).not.toHaveBeenCalled();
+            react_2.fireEvent.keyUp(inputNode, { key: 'Shift' });
+            expect(onKeyUpMock).toHaveBeenCalled();
+        });
+        it('calls onKeyPress', () => {
+            const onKeyPressMock = jest.fn();
+            const { getByLabelText } = react_2.render(<LabelledAutocomplete inputProps={{ onKeyPress: onKeyPressMock }} menuProps={{ items: [], selectedItemIds: [] }}/>);
+            const inputNode = getByLabelText(AUTOCOMPLETE_LABEL);
+            expect(onKeyPressMock).not.toHaveBeenCalled();
+            user_event_1.default.type(inputNode, '{enter}');
+            expect(onKeyPressMock).toHaveBeenCalled();
+        });
+        it('opens the menu when the input is focused', () => {
+            const { getByLabelText } = react_2.render(<LabelledAutocomplete menuProps={{ items: [], selectedItemIds: [] }}/>);
+            const inputNode = getByLabelText(AUTOCOMPLETE_LABEL);
+            expect(inputNode.getAttribute('aria-expanded')).not.toBe('true');
+            react_2.fireEvent.focus(inputNode);
+            expect(inputNode.getAttribute('aria-expanded')).toBe('true');
+        });
+        it('closes the menu when the input is blurred', () => {
+            const { getByLabelText } = react_2.render(<LabelledAutocomplete menuProps={{ items: [], selectedItemIds: [] }}/>);
+            const inputNode = getByLabelText(AUTOCOMPLETE_LABEL);
+            expect(inputNode.getAttribute('aria-expanded')).not.toBe('true');
+            react_2.fireEvent.focus(inputNode);
+            expect(inputNode.getAttribute('aria-expanded')).toBe('true');
+            // eslint-disable-next-line github/no-blur
+            react_2.fireEvent.blur(inputNode);
+            // wait a tick for blur to finish
+            setTimeout(() => {
+                expect(inputNode.getAttribute('aria-expanded')).not.toBe('true');
+            }, 0);
+        });
+        it('sets the input value to the suggested item text and highlights the untyped part of the word', () => {
+            const { container, getByDisplayValue } = react_2.render(<LabelledAutocomplete menuProps={{ items: mockItems, selectedItemIds: [] }}/>);
+            const inputNode = container.querySelector('#autocompleteInput');
+            inputNode && user_event_1.default.type(inputNode, 'ze');
+            expect(getByDisplayValue('zero')).toBeDefined();
+        });
+        it('does not show or highlight suggestion text after the user hits Backspace until they hit another key', () => {
+            const { container, getByDisplayValue } = react_2.render(<LabelledAutocomplete menuProps={{ items: mockItems, selectedItemIds: [] }}/>);
+            const inputNode = container.querySelector('#autocompleteInput');
+            expect(inputNode.selectionStart).toBe(0);
+            inputNode && user_event_1.default.type(inputNode, 'ze');
+            expect(getByDisplayValue('zero')).toBeDefined();
+            expect(inputNode.selectionStart).toBe(2);
+            expect(inputNode.selectionEnd).toBe(4);
+            inputNode && user_event_1.default.type(inputNode, '{backspace}');
+            expect(inputNode.selectionStart).toBe(2);
+            expect(getByDisplayValue('ze')).toBeDefined();
+            inputNode && user_event_1.default.type(inputNode, 'r');
+            expect(inputNode.selectionStart).toBe(3);
+            expect(inputNode.selectionEnd).toBe(4);
+            expect(getByDisplayValue('zero')).toBeDefined();
+        });
+        it('clears the input value when when the user hits Escape', () => {
+            const { container } = react_2.render(<LabelledAutocomplete menuProps={{ items: mockItems, selectedItemIds: [] }}/>);
+            const inputNode = container.querySelector('#autocompleteInput');
+            expect(inputNode?.getAttribute('aria-expanded')).not.toBe('true');
+            inputNode && user_event_1.default.type(inputNode, 'ze');
+            expect(inputNode?.getAttribute('aria-expanded')).toBe('true');
+            inputNode && user_event_1.default.type(inputNode, '{esc}');
+            expect(inputNode?.getAttribute('aria-expanded')).not.toBe('true');
+        });
+    });
+    describe('Autocomplete.Menu', () => {
+        it('calls a custom filter function', () => {
+            const filterFnMock = jest.fn();
+            const { container } = react_2.render(<LabelledAutocomplete menuProps={{ items: mockItems, selectedItemIds: [], filterFn: filterFnMock }}/>);
+            const inputNode = container.querySelector('#autocompleteInput');
+            inputNode && user_event_1.default.type(inputNode, 'ze');
+            expect(filterFnMock).toHaveBeenCalled();
+        });
+        it('calls a custom sort function when the menu closes', () => {
+            const sortOnCloseFnMock = jest.fn();
+            const { container } = react_2.render(<LabelledAutocomplete menuProps={{ items: mockItems, selectedItemIds: [], sortOnCloseFn: sortOnCloseFnMock }}/>);
+            const inputNode = container.querySelector('#autocompleteInput');
+            // `sortOnCloseFnMock` will be called in a `.sort()` on render to check if the
+            // current sort order matches the result of `sortOnCloseFnMock`
+            expect(sortOnCloseFnMock).toHaveBeenCalledTimes(mockItems.length - 1);
+            if (inputNode) {
+                user_event_1.default.type(inputNode, 'ze');
+                // eslint-disable-next-line github/no-blur
+                react_2.fireEvent.blur(inputNode);
+            }
+            // wait a tick for blur to finish
+            setTimeout(() => {
+                expect(sortOnCloseFnMock).toHaveBeenCalledTimes(mockItems.length);
+            }, 0);
+        });
+        it("calls onOpenChange with the menu's open state", () => {
+            const onOpenChangeMock = jest.fn();
+            const { container } = react_2.render(<LabelledAutocomplete menuProps={{ items: mockItems, selectedItemIds: [], onOpenChange: onOpenChangeMock }}/>);
+            const inputNode = container.querySelector('#autocompleteInput');
+            inputNode && user_event_1.default.type(inputNode, 'ze');
+            expect(onOpenChangeMock).toHaveBeenCalled();
+        });
+        it('calls onSelectedChange with the data for the selected items', () => {
+            const onSelectedChangeMock = jest.fn();
+            const { container } = react_2.render(<LabelledAutocomplete menuProps={{ items: mockItems, selectedItemIds: [], onSelectedChange: onSelectedChangeMock }}/>);
+            const inputNode = container.querySelector('#autocompleteInput');
+            expect(onSelectedChangeMock).not.toHaveBeenCalled();
+            if (inputNode) {
+                react_2.fireEvent.focus(inputNode);
+                user_event_1.default.type(inputNode, '{enter}');
+            }
+            // wait a tick for the keyboard event to be dispatched to the menu item
+            setTimeout(() => {
+                expect(onSelectedChangeMock).toHaveBeenCalledWith([mockItems[0]]);
+            }, 0);
+        });
+        it('does not close the menu when clicking an item in the menu if selectionVariant=multiple', () => {
+            const { getByText, container } = react_2.render(<LabelledAutocomplete menuProps={{ items: mockItems, selectedItemIds: [], selectionVariant: 'multiple' }}/>);
+            const inputNode = container.querySelector('#autocompleteInput');
+            const itemToClickNode = getByText(mockItems[1].text);
+            expect(inputNode?.getAttribute('aria-expanded')).not.toBe('true');
+            inputNode && react_2.fireEvent.focus(inputNode);
+            expect(inputNode?.getAttribute('aria-expanded')).toBe('true');
+            react_2.fireEvent.click(itemToClickNode);
+            inputNode && user_event_1.default.type(inputNode, '{enter}');
+            expect(inputNode?.getAttribute('aria-expanded')).toBe('true');
+        });
+        it('closes the menu when clicking an item in the menu if selectionVariant=single', () => {
+            const { getByText, container } = react_2.render(<LabelledAutocomplete menuProps={{ items: mockItems, selectedItemIds: [], selectionVariant: 'single' }}/>);
+            const inputNode = container.querySelector('#autocompleteInput');
+            const itemToClickNode = getByText(mockItems[1].text);
+            expect(inputNode?.getAttribute('aria-expanded')).not.toBe('true');
+            inputNode && react_2.fireEvent.focus(inputNode);
+            expect(inputNode?.getAttribute('aria-expanded')).toBe('true');
+            react_2.fireEvent.click(itemToClickNode);
+            expect(inputNode?.getAttribute('aria-expanded')).not.toBe('true');
+        });
+        it('calls handleAddItem with new item data when passing addNewItem', () => {
+            const handleAddItemMock = jest.fn();
+            const { getByText } = react_2.render(<LabelledAutocomplete menuProps={{
+                    items: mockItems,
+                    selectedItemIds: [],
+                    selectionVariant: 'multiple',
+                    addNewItem: {
+                        text: 'Add new item',
+                        handleAddItem: handleAddItemMock
+                    }
+                }}/>);
+            const addNewItemNode = getByText('Add new item');
+            expect(handleAddItemMock).not.toHaveBeenCalled();
+            react_2.fireEvent.click(addNewItemNode);
+            expect(handleAddItemMock).toHaveBeenCalled();
+        });
+    });
+});

package/lib/__tests__/Avatar.test.d.ts

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

package/lib/__tests__/Avatar.test.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+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('Avatar', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _.Avatar
+  });
+  (0, _testing.checkExports)('Avatar', {
+    default: _.Avatar
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Avatar, {
+      src: "primer.png"
+    }));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react2.cleanup)();
+  });
+  it('renders small by default', () => {
+    const size = 20;
+    const result = (0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Avatar, {
+      src: "primer.png"
+    }));
+    expect(result.props.width).toEqual(size);
+    expect(result.props.height).toEqual(size);
+  });
+  it('respects the size prop', () => {
+    const result = (0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Avatar, {
+      size: 40,
+      src: "primer.png",
+      alt: "github"
+    }));
+    expect(result.props.width).toEqual(40);
+    expect(result.props.height).toEqual(40);
+  });
+  it('passes through the src prop', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Avatar, {
+      src: "primer.png",
+      alt: ""
+    })).props.src).toEqual('primer.png');
+  });
+  it('respects margin props', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Avatar, {
+      m: 2,
+      src: "primer.png",
+      alt: ""
+    }))).toHaveStyleRule('margin', (0, _testing.px)(_theme.default.space[2]));
+  });
+});

package/lib/__tests__/Avatar.test.jsx

@@ -0,0 +1,42 @@
+"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 theme_1 = __importDefault(require("../theme"));
+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('Avatar', () => {
+    testing_1.behavesAsComponent({ Component: __1.Avatar });
+    testing_1.checkExports('Avatar', {
+        default: __1.Avatar
+    });
+    it('should have no axe violations', async () => {
+        const { container } = react_2.render(<__1.Avatar src="primer.png"/>);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_2.cleanup();
+    });
+    it('renders small by default', () => {
+        const size = 20;
+        const result = testing_1.render(<__1.Avatar src="primer.png"/>);
+        expect(result.props.width).toEqual(size);
+        expect(result.props.height).toEqual(size);
+    });
+    it('respects the size prop', () => {
+        const result = testing_1.render(<__1.Avatar size={40} src="primer.png" alt="github"/>);
+        expect(result.props.width).toEqual(40);
+        expect(result.props.height).toEqual(40);
+    });
+    it('passes through the src prop', () => {
+        expect(testing_1.render(<__1.Avatar src="primer.png" alt=""/>).props.src).toEqual('primer.png');
+    });
+    it('respects margin props', () => {
+        expect(testing_1.render(<__1.Avatar m={2} src="primer.png" alt=""/>)).toHaveStyleRule('margin', testing_1.px(theme_1.default.space[2]));
+    });
+});

package/lib/__tests__/AvatarStack.test.d.ts

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

package/lib/__tests__/AvatarStack.test.js

@@ -0,0 +1,71 @@
+"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 avatarComp = /*#__PURE__*/_react.default.createElement(_.AvatarStack, null, /*#__PURE__*/_react.default.createElement("img", {
+  src: "https://avatars.githubusercontent.com/primer",
+  alt: ""
+}), /*#__PURE__*/_react.default.createElement("img", {
+  src: "https://avatars.githubusercontent.com/github",
+  alt: ""
+}), /*#__PURE__*/_react.default.createElement("img", {
+  src: "https://avatars.githubusercontent.com/primer",
+  alt: ""
+}), /*#__PURE__*/_react.default.createElement("img", {
+  src: "https://avatars.githubusercontent.com/github",
+  alt: ""
+}));
+
+const rightAvatarComp = /*#__PURE__*/_react.default.createElement(_.AvatarStack, {
+  alignRight: true
+}, /*#__PURE__*/_react.default.createElement("img", {
+  src: "https://avatars.githubusercontent.com/primer",
+  alt: ""
+}), /*#__PURE__*/_react.default.createElement("img", {
+  src: "https://avatars.githubusercontent.com/github",
+  alt: ""
+}), /*#__PURE__*/_react.default.createElement("img", {
+  src: "https://avatars.githubusercontent.com/primer",
+  alt: ""
+}), /*#__PURE__*/_react.default.createElement("img", {
+  src: "https://avatars.githubusercontent.com/github",
+  alt: ""
+}));
+
+describe('Avatar', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _.AvatarStack,
+    toRender: () => avatarComp,
+    options: {
+      skipAs: true
+    }
+  });
+  (0, _testing.checkExports)('AvatarStack', {
+    default: _.AvatarStack
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react2.render)(avatarComp);
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react2.cleanup)();
+  });
+  it('respects alignRight props', () => {
+    expect((0, _testing.render)(rightAvatarComp)).toMatchSnapshot();
+  });
+});

package/lib/__tests__/AvatarStack.test.jsx

@@ -0,0 +1,43 @@
+"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 avatarComp = (<__1.AvatarStack>
+    <img src="https://avatars.githubusercontent.com/primer" alt=""/>
+    <img src="https://avatars.githubusercontent.com/github" alt=""/>
+    <img src="https://avatars.githubusercontent.com/primer" alt=""/>
+    <img src="https://avatars.githubusercontent.com/github" alt=""/>
+  </__1.AvatarStack>);
+const rightAvatarComp = (<__1.AvatarStack alignRight>
+    <img src="https://avatars.githubusercontent.com/primer" alt=""/>
+    <img src="https://avatars.githubusercontent.com/github" alt=""/>
+    <img src="https://avatars.githubusercontent.com/primer" alt=""/>
+    <img src="https://avatars.githubusercontent.com/github" alt=""/>
+  </__1.AvatarStack>);
+describe('Avatar', () => {
+    testing_1.behavesAsComponent({
+        Component: __1.AvatarStack,
+        toRender: () => avatarComp,
+        options: { skipAs: true }
+    });
+    testing_1.checkExports('AvatarStack', {
+        default: __1.AvatarStack
+    });
+    it('should have no axe violations', async () => {
+        const { container } = react_2.render(avatarComp);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_2.cleanup();
+    });
+    it('respects alignRight props', () => {
+        expect(testing_1.render(rightAvatarComp)).toMatchSnapshot();
+    });
+});

package/lib/__tests__/BorderBox.test.d.ts

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

package/lib/__tests__/BorderBox.test.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _theme = _interopRequireDefault(require("../theme"));
+
+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('BorderBox', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _.BorderBox
+  });
+  (0, _testing.checkExports)('BorderBox', {
+    default: _.BorderBox
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.BorderBox, null));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react2.cleanup)();
+  });
+  it('renders borders', () => {
+    var _theme$colorSchemes$l;
+
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.BorderBox, {
+      borderColor: "success.emphasis"
+    }))).toHaveStyleRule('border-color', (_theme$colorSchemes$l = _theme.default.colorSchemes.light.colors.success) === null || _theme$colorSchemes$l === void 0 ? void 0 : _theme$colorSchemes$l.emphasis);
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.BorderBox, {
+      borderBottom: 0
+    }))).toHaveStyleRule('border-bottom', '0');
+  });
+  it('renders border radius', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.BorderBox, {
+      borderRadius: 2
+    }))).toHaveStyleRule('border-radius', _theme.default.radii[2]);
+  }); // the test returns the box shadow value without spaces, so had to manually provide the expected string here
+
+  it('renders box shadow', () => {
+    var _theme$colorSchemes$l2;
+
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.BorderBox, {
+      boxShadow: "shadow.small"
+    }))).toHaveStyleRule('box-shadow', (_theme$colorSchemes$l2 = _theme.default.colorSchemes.light.shadows.shadow) === null || _theme$colorSchemes$l2 === void 0 ? void 0 : _theme$colorSchemes$l2.small);
+  });
+});

package/lib/__tests__/BorderBox.test.jsx

@@ -0,0 +1,36 @@
+"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 theme_1 = __importDefault(require("../theme"));
+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('BorderBox', () => {
+    testing_1.behavesAsComponent({ Component: __1.BorderBox });
+    testing_1.checkExports('BorderBox', {
+        default: __1.BorderBox
+    });
+    it('should have no axe violations', async () => {
+        const { container } = react_2.render(<__1.BorderBox />);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_2.cleanup();
+    });
+    it('renders borders', () => {
+        expect(testing_1.render(<__1.BorderBox borderColor="success.emphasis"/>)).toHaveStyleRule('border-color', theme_1.default.colorSchemes.light.colors.success?.emphasis);
+        expect(testing_1.render(<__1.BorderBox borderBottom={0}/>)).toHaveStyleRule('border-bottom', '0');
+    });
+    it('renders border radius', () => {
+        expect(testing_1.render(<__1.BorderBox borderRadius={2}/>)).toHaveStyleRule('border-radius', theme_1.default.radii[2]);
+    });
+    // the test returns the box shadow value without spaces, so had to manually provide the expected string here
+    it('renders box shadow', () => {
+        expect(testing_1.render(<__1.BorderBox boxShadow="shadow.small"/>)).toHaveStyleRule('box-shadow', theme_1.default.colorSchemes.light.shadows.shadow?.small);
+    });
+});

package/lib/__tests__/Box.test.d.ts

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