@primer/components 29.1.0 → 29.1.1-rc.cea79543

package/lib/__tests__/ActionMenu.d.ts

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

package/lib/__tests__/ActionMenu.js

@@ -0,0 +1,154 @@
+"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 _ActionMenu = require("../ActionMenu");
+
+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: 'New file'
+}, {
+  text: 'Copy link'
+}, {
+  text: 'Edit file'
+}, {
+  text: 'Delete file',
+  variant: 'danger'
+}];
+const mockOnActivate = jest.fn();
+
+function SimpleActionMenu() {
+  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("div", {
+    id: "something-else"
+  }, "X"), /*#__PURE__*/_react2.default.createElement(_ActionMenu.ActionMenu, {
+    onAction: mockOnActivate,
+    anchorContent: "Menu",
+    items: items
+  }), /*#__PURE__*/_react2.default.createElement("div", {
+    id: "portal-root"
+  }))));
+}
+
+SimpleActionMenu.displayName = "SimpleActionMenu";
+describe('ActionMenu', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  (0, _testing.behavesAsComponent)({
+    Component: _ActionMenu.ActionMenu,
+    systemPropArray: [_constants.COMMON],
+    options: {
+      skipAs: true,
+      skipSx: true
+    },
+    toRender: () => /*#__PURE__*/_react2.default.createElement(_.SSRProvider, null, /*#__PURE__*/_react2.default.createElement(_ActionMenu.ActionMenu, {
+      items: []
+    }))
+  });
+  (0, _testing.checkExports)('ActionMenu', {
+    default: undefined,
+    ActionMenu: _ActionMenu.ActionMenu
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(SimpleActionMenu, null));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react.cleanup)();
+  });
+  it('should trigger the overlay on trigger click', async () => {
+    var _portalRoot, _portalRoot$textConte;
+
+    const menu = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(SimpleActionMenu, null));
+    let portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeNull();
+    const anchor = await menu.findByText('Menu');
+    (0, _react.act)(() => {
+      _react.fireEvent.click(anchor);
+    });
+    portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeTruthy();
+    const itemText = items.map(i => {
+      if (i.hasOwnProperty('text')) {
+        return i.text;
+      }
+    }).join('');
+    expect((_portalRoot = portalRoot) === null || _portalRoot === void 0 ? void 0 : (_portalRoot$textConte = _portalRoot.textContent) === null || _portalRoot$textConte === void 0 ? void 0 : _portalRoot$textConte.trim()).toEqual(itemText);
+  });
+  it('should dismiss the overlay on menuitem click', async () => {
+    var _portalRoot2;
+
+    const menu = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(SimpleActionMenu, null));
+    let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeNull();
+    const anchor = await menu.findByText('Menu');
+    (0, _react.act)(() => {
+      _react.fireEvent.click(anchor);
+    });
+    portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeTruthy();
+    const menuItem = await menu.queryByText(items[0].text);
+    (0, _react.act)(() => {
+      _react.fireEvent.click(menuItem);
+    });
+    expect((_portalRoot2 = portalRoot) === null || _portalRoot2 === void 0 ? void 0 : _portalRoot2.textContent).toEqual(''); // menu items are hidden
+  });
+  it('should dismiss the overlay on clicking outside overlay', async () => {
+    var _portalRoot3;
+
+    const menu = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(SimpleActionMenu, null));
+    let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeNull();
+    const anchor = await menu.findByText('Menu');
+    (0, _react.act)(() => {
+      _react.fireEvent.click(anchor);
+    });
+    portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeTruthy();
+    const somethingElse = await menu.baseElement.querySelector('#something-else');
+    (0, _react.act)(() => {
+      _react.fireEvent.mouseDown(somethingElse);
+    });
+    expect((_portalRoot3 = portalRoot) === null || _portalRoot3 === void 0 ? void 0 : _portalRoot3.textContent).toEqual(''); // menu items are hidden
+  });
+  it('should pass correct values to onAction on menu click', async () => {
+    var _portalRoot4;
+
+    const menu = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(SimpleActionMenu, null));
+    let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeNull();
+    const anchor = await menu.findByText('Menu');
+    (0, _react.act)(() => {
+      _react.fireEvent.click(anchor);
+    });
+    portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeTruthy();
+    const menuItem = await ((_portalRoot4 = portalRoot) === null || _portalRoot4 === void 0 ? void 0 : _portalRoot4.querySelector("[role='menuitem']"));
+    (0, _react.act)(() => {
+      _react.fireEvent.click(menuItem);
+    }); // onAction has been called with correct argument
+
+    expect(mockOnActivate).toHaveBeenCalledTimes(1);
+    const arg = mockOnActivate.mock.calls[0][0];
+    expect(arg.text).toEqual(items[0].text);
+  });
+});

package/lib/__tests__/AnchoredOverlay.d.ts

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

package/lib/__tests__/AnchoredOverlay.js

@@ -0,0 +1,161 @@
+"use strict";
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _AnchoredOverlay = require("../AnchoredOverlay");
+
+var _testing = require("../utils/testing");
+
+var _react2 = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+require("babel-polyfill");
+
+var _index = require("../index");
+
+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 AnchoredOverlayTestComponent = ({
+  initiallyOpen = false,
+  onOpenCallback,
+  onCloseCallback
+} = {}) => {
+  const [open, setOpen] = (0, _react.useState)(initiallyOpen);
+  const onOpen = (0, _react.useCallback)(gesture => {
+    setOpen(true);
+    onOpenCallback === null || onOpenCallback === void 0 ? void 0 : onOpenCallback(gesture);
+  }, [onOpenCallback]);
+  const onClose = (0, _react.useCallback)(gesture => {
+    setOpen(true);
+    onCloseCallback === null || onCloseCallback === void 0 ? void 0 : onCloseCallback(gesture);
+  }, [onCloseCallback]);
+  return /*#__PURE__*/_react.default.createElement(_ThemeProvider.ThemeProvider, {
+    theme: _theme.default
+  }, /*#__PURE__*/_react.default.createElement(_index.SSRProvider, null, /*#__PURE__*/_react.default.createElement(_BaseStyles.default, null, /*#__PURE__*/_react.default.createElement(_AnchoredOverlay.AnchoredOverlay, {
+    open: open,
+    onOpen: onOpen,
+    onClose: onClose,
+    renderAnchor: props => /*#__PURE__*/_react.default.createElement(_index.Button, props, "Anchor Button")
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button"
+  }, "Focusable Child")))));
+};
+
+AnchoredOverlayTestComponent.displayName = "AnchoredOverlayTestComponent";
+describe('AnchoredOverlay', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _AnchoredOverlay.AnchoredOverlay,
+    systemPropArray: [],
+    options: {
+      skipAs: true,
+      skipSx: true
+    },
+    toRender: () => /*#__PURE__*/_react.default.createElement(AnchoredOverlayTestComponent, null)
+  });
+  (0, _testing.checkExports)('AnchoredOverlay', {
+    default: undefined,
+    AnchoredOverlay: _AnchoredOverlay.AnchoredOverlay
+  });
+  it('should have no axe violations when open', async () => {
+    const {
+      container
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(AnchoredOverlayTestComponent, {
+      initiallyOpen: true
+    }));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react2.cleanup)();
+  });
+  it('should have no axe violations when closed', async () => {
+    const {
+      container
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(AnchoredOverlayTestComponent, null));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react2.cleanup)();
+  });
+  it('should call onOpen when the anchor is clicked', () => {
+    const mockOpenCallback = jest.fn();
+    const mockCloseCallback = jest.fn();
+    const anchoredOverlay = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(AnchoredOverlayTestComponent, {
+      onOpenCallback: mockOpenCallback,
+      onCloseCallback: mockCloseCallback
+    }));
+    const anchor = anchoredOverlay.baseElement.querySelector('[aria-haspopup="true"]');
+
+    _react2.fireEvent.click(anchor);
+
+    expect(mockOpenCallback).toHaveBeenCalledTimes(1);
+    expect(mockOpenCallback).toHaveBeenCalledWith('anchor-click');
+    expect(mockCloseCallback).toHaveBeenCalledTimes(0);
+  });
+  it('should call onOpen when the anchor activated by a key press', () => {
+    const mockOpenCallback = jest.fn();
+    const mockCloseCallback = jest.fn();
+    const anchoredOverlay = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(AnchoredOverlayTestComponent, {
+      onOpenCallback: mockOpenCallback,
+      onCloseCallback: mockCloseCallback
+    }));
+    const anchor = anchoredOverlay.baseElement.querySelector('[aria-haspopup="true"]');
+
+    _react2.fireEvent.keyDown(anchor, {
+      key: ' '
+    });
+
+    expect(mockOpenCallback).toHaveBeenCalledTimes(1);
+    expect(mockOpenCallback).toHaveBeenCalledWith('anchor-key-press');
+    expect(mockCloseCallback).toHaveBeenCalledTimes(0);
+  });
+  it('should call onClose when the user clicks off of the overlay', () => {
+    const mockOpenCallback = jest.fn();
+    const mockCloseCallback = jest.fn();
+    const anchoredOverlay = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(AnchoredOverlayTestComponent, {
+      initiallyOpen: true,
+      onOpenCallback: mockOpenCallback,
+      onCloseCallback: mockCloseCallback
+    }));
+
+    _react2.fireEvent.mouseDown(anchoredOverlay.baseElement);
+
+    expect(mockOpenCallback).toHaveBeenCalledTimes(0);
+    expect(mockCloseCallback).toHaveBeenCalledTimes(1);
+    expect(mockCloseCallback).toHaveBeenCalledWith('click-outside');
+  });
+  it('should call onClose when the escape key is pressed', async () => {
+    const mockOpenCallback = jest.fn();
+    const mockCloseCallback = jest.fn();
+    const anchoredOverlay = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(AnchoredOverlayTestComponent, {
+      initiallyOpen: true,
+      onOpenCallback: mockOpenCallback,
+      onCloseCallback: mockCloseCallback
+    }));
+    const overlay = await anchoredOverlay.findByRole('none');
+
+    _react2.fireEvent.keyDown(overlay, {
+      key: 'Escape'
+    });
+
+    expect(mockOpenCallback).toHaveBeenCalledTimes(0);
+    expect(mockCloseCallback).toHaveBeenCalledTimes(1);
+    expect(mockCloseCallback).toHaveBeenCalledWith('escape');
+  });
+  it('should render consistently when open', () => {
+    const anchoredOverlay = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(AnchoredOverlayTestComponent, {
+      initiallyOpen: true
+    }));
+    expect(anchoredOverlay).toMatchSnapshot();
+  });
+});

package/lib/__tests__/Avatar.d.ts

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

package/lib/__tests__/Avatar.js

@@ -0,0 +1,70 @@
+"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");
+
+var _constants = require("../constants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+expect.extend(_jestAxe.toHaveNoViolations);
+describe('Avatar', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _.Avatar,
+    systemPropArray: [_constants.COMMON]
+  });
+  (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__/AvatarStack.d.ts

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

package/lib/__tests__/AvatarStack.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);
+
+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,
+    systemPropArray: [_constants.COMMON],
+    toRender: () => avatarComp
+  });
+  (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__/BorderBox.d.ts

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

package/lib/__tests__/BorderBox.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _theme = _interopRequireDefault(require("../theme"));
+
+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('BorderBox', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _.BorderBox,
+    systemPropArray: [_constants.LAYOUT, _constants.COMMON, _constants.BORDER, _constants.FLEX]
+  });
+  (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.border) === null || _theme$colorSchemes$l === void 0 ? void 0 : _theme$colorSchemes$l.success);
+    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__/Box.d.ts

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

package/lib/__tests__/Box.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+require("babel-polyfill");
+
+var _jestAxe = require("jest-axe");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _constants = require("../constants");
+
+var _theme = _interopRequireDefault(require("../theme"));
+
+var _testing = require("../utils/testing");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+expect.extend(_jestAxe.toHaveNoViolations);
+describe('Box', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _.Box,
+    systemPropArray: [_constants.COMMON, _constants.LAYOUT, _constants.FLEX]
+  });
+  (0, _testing.checkExports)('Box', {
+    default: _.Box
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.Box, null));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react.cleanup)();
+  });
+  it('renders margin', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react2.default.createElement(_.Box, {
+      m: 1,
+      theme: _theme.default
+    }))).toMatchSnapshot();
+    expect((0, _testing.render)( /*#__PURE__*/_react2.default.createElement(_.Box, {
+      m: [0, 1, 2, 3],
+      theme: _theme.default
+    }))).toMatchSnapshot();
+    expect((0, _testing.render)( /*#__PURE__*/_react2.default.createElement(_.Box, {
+      m: [1, 1, 1, 3],
+      theme: _theme.default
+    }))).toMatchSnapshot();
+  });
+  it('renders padding', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react2.default.createElement(_.Box, {
+      p: 1,
+      theme: _theme.default
+    }))).toMatchSnapshot();
+    expect((0, _testing.render)( /*#__PURE__*/_react2.default.createElement(_.Box, {
+      p: [0, 1, 2, 3],
+      theme: _theme.default
+    }))).toMatchSnapshot();
+    expect((0, _testing.render)( /*#__PURE__*/_react2.default.createElement(_.Box, {
+      p: [1, 1, 1, 3],
+      theme: _theme.default
+    }))).toMatchSnapshot();
+  });
+  it('respects display', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react2.default.createElement(_.Box, {
+      display: "inline"
+    }))).toMatchSnapshot();
+    expect((0, _testing.render)( /*#__PURE__*/_react2.default.createElement(_.Box, {
+      display: "inline-block"
+    }))).toMatchSnapshot();
+    expect((0, _testing.render)( /*#__PURE__*/_react2.default.createElement(_.Box, {
+      display: "none"
+    }))).toMatchSnapshot();
+    expect((0, _testing.render)( /*#__PURE__*/_react2.default.createElement(_.Box, {
+      display: ['none', 'none', 'block'],
+      theme: _theme.default
+    }))).toMatchSnapshot();
+  });
+});

package/lib/__tests__/BranchName.d.ts

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

package/lib/__tests__/BranchName.js

@@ -0,0 +1,39 @@
+"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('BranchName', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _.BranchName,
+    systemPropArray: [_constants.COMMON]
+  });
+  (0, _testing.checkExports)('BranchName', {
+    default: _.BranchName
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.BranchName, null));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react2.cleanup)();
+  });
+  it('renders an <a> by default', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.BranchName, null)).type).toEqual('a');
+  });
+});

package/lib/__tests__/Breadcrumb.d.ts

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