@primer/components 29.1.1 → 30.0.0-rc.48fd5c94

package/lib-esm/{Breadcrumb.js → Breadcrumbs.js}

@@ -9,27 +9,26 @@ import { COMMON, FLEX, get } from './constants';
 import sx from './sx';
 const SELECTED_CLASS = 'selected';
 const Wrapper = styled.li.withConfig({
-  displayName: "Breadcrumb__Wrapper",
-  componentId: "c1r3ff-0"
+  displayName: "Breadcrumbs__Wrapper",
+  componentId: "hwwoo0-0"
 })(["display:inline-block;white-space:nowrap;list-style:none;&::after{padding-right:0.5em;padding-left:0.5em;color:", ";font-size:", ";content:'/';}&:first-child{margin-left:0;}&:last-child{&::after{content:none;}}"], get('colors.fg.muted'), get('fontSizes.1'));
-const BreadcrumbBase = styled.nav.withConfig({
-  displayName: "Breadcrumb__BreadcrumbBase",
-  componentId: "c1r3ff-1"
+const BreadcrumbsBase = styled.nav.withConfig({
+  displayName: "Breadcrumbs__BreadcrumbsBase",
+  componentId: "hwwoo0-1"
 })(["display:flex;justify-content:space-between;", ";", ";", ";"], COMMON, FLEX, sx);
 
-function Breadcrumb({
+function Breadcrumbs({
   className,
   children,
   theme,
   ...rest
 }) {
-  const classes = classnames(className, 'Breadcrumb');
   const wrappedChildren = React.Children.map(children, child => /*#__PURE__*/React.createElement(Wrapper, {
     theme: theme
   }, child));
-  return /*#__PURE__*/React.createElement(BreadcrumbBase, _extends({
-    className: classes,
-    "aria-label": "breadcrumb",
+  return /*#__PURE__*/React.createElement(BreadcrumbsBase, _extends({
+    className: className,
+    "aria-label": "Breadcrumbs",
     theme: theme
   }, rest), /*#__PURE__*/React.createElement(Box, {
     as: "ol",
@@ -38,17 +37,27 @@ function Breadcrumb({
   }, wrappedChildren));
 }
 
-Breadcrumb.displayName = "Breadcrumb";
-const BreadcrumbItem = styled.a.attrs(props => ({
+Breadcrumbs.displayName = "Breadcrumbs";
+const BreadcrumbsItem = styled.a.attrs(props => ({
   activeClassName: typeof props.to === 'string' ? 'selected' : '',
   className: classnames(props.selected && SELECTED_CLASS, props.className),
   'aria-current': props.selected ? 'page' : null
 })).withConfig({
-  displayName: "Breadcrumb__BreadcrumbItem",
-  componentId: "c1r3ff-2"
+  displayName: "Breadcrumbs__BreadcrumbsItem",
+  componentId: "hwwoo0-2"
 })(["color:", ";display:inline-block;font-size:", ";text-decoration:none;&:hover{text-decoration:underline;}&.selected{color:", ";pointer-events:none;}", " ", ";"], get('colors.accent.fg'), get('fontSizes.1'), get('colors.fg.default'), COMMON, sx);
-Breadcrumb.displayName = 'Breadcrumb';
-BreadcrumbItem.displayName = 'Breadcrumb.Item';
-export default Object.assign(Breadcrumb, {
-  Item: BreadcrumbItem
-});
+Breadcrumbs.displayName = 'Breadcrumbs';
+BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
+export default Object.assign(Breadcrumbs, {
+  Item: BreadcrumbsItem
+});
+/**
+ * @deprecated Use the `Breadcrumbs` component instead (i.e. `<Breadcrumb>` → `<Breadcrumbs>`)
+ */
+
+export const Breadcrumb = Object.assign(Breadcrumbs, {
+  Item: BreadcrumbsItem
+});
+/**
+ * @deprecated Use the `BreadcrumbsProps` type instead
+ */

package/lib-esm/__tests__/ActionList.d.ts

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

package/lib-esm/__tests__/ActionList.js

@@ -0,0 +1,54 @@
+import { cleanup, render as HTMLRender } from '@testing-library/react';
+import 'babel-polyfill';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import React from 'react';
+import theme from '../theme';
+import { ActionList } from '../ActionList';
+import { COMMON } from '../constants';
+import { behavesAsComponent, checkExports } from '../utils/testing';
+import { BaseStyles, ThemeProvider } from '..';
+expect.extend(toHaveNoViolations);
+
+function SimpleActionList() {
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: theme
+  }, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(ActionList, {
+    items: [{
+      text: 'New file'
+    }, ActionList.Divider, {
+      text: 'Copy link'
+    }, {
+      text: 'Edit file'
+    }, {
+      text: 'Delete file',
+      variant: 'danger'
+    }]
+  })));
+}
+
+SimpleActionList.displayName = "SimpleActionList";
+describe('ActionList', () => {
+  behavesAsComponent({
+    Component: ActionList,
+    systemPropArray: [COMMON],
+    options: {
+      skipAs: true,
+      skipSx: true
+    },
+    toRender: () => /*#__PURE__*/React.createElement(ActionList, {
+      items: []
+    })
+  });
+  checkExports('ActionList', {
+    default: undefined,
+    ActionList
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(SimpleActionList, null));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+});

package/lib-esm/__tests__/ActionMenu.d.ts

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

package/lib-esm/__tests__/ActionMenu.js

@@ -0,0 +1,141 @@
+import { cleanup, render as HTMLRender, act, fireEvent } from '@testing-library/react';
+import 'babel-polyfill';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import React from 'react';
+import theme from '../theme';
+import { ActionMenu } from '../ActionMenu';
+import { COMMON } from '../constants';
+import { behavesAsComponent, checkExports } from '../utils/testing';
+import { BaseStyles, SSRProvider, ThemeProvider } from '..';
+expect.extend(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__*/React.createElement(ThemeProvider, {
+    theme: theme
+  }, /*#__PURE__*/React.createElement(SSRProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement("div", {
+    id: "something-else"
+  }, "X"), /*#__PURE__*/React.createElement(ActionMenu, {
+    onAction: mockOnActivate,
+    anchorContent: "Menu",
+    items: items
+  }), /*#__PURE__*/React.createElement("div", {
+    id: "portal-root"
+  }))));
+}
+
+SimpleActionMenu.displayName = "SimpleActionMenu";
+describe('ActionMenu', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  behavesAsComponent({
+    Component: ActionMenu,
+    systemPropArray: [COMMON],
+    options: {
+      skipAs: true,
+      skipSx: true
+    },
+    toRender: () => /*#__PURE__*/React.createElement(SSRProvider, null, /*#__PURE__*/React.createElement(ActionMenu, {
+      items: []
+    }))
+  });
+  checkExports('ActionMenu', {
+    default: undefined,
+    ActionMenu
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(SimpleActionMenu, null));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('should trigger the overlay on trigger click', async () => {
+    var _portalRoot, _portalRoot$textConte;
+
+    const menu = HTMLRender( /*#__PURE__*/React.createElement(SimpleActionMenu, null));
+    let portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeNull();
+    const anchor = await menu.findByText('Menu');
+    act(() => {
+      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 = HTMLRender( /*#__PURE__*/React.createElement(SimpleActionMenu, null));
+    let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeNull();
+    const anchor = await menu.findByText('Menu');
+    act(() => {
+      fireEvent.click(anchor);
+    });
+    portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeTruthy();
+    const menuItem = await menu.queryByText(items[0].text);
+    act(() => {
+      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 = HTMLRender( /*#__PURE__*/React.createElement(SimpleActionMenu, null));
+    let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeNull();
+    const anchor = await menu.findByText('Menu');
+    act(() => {
+      fireEvent.click(anchor);
+    });
+    portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeTruthy();
+    const somethingElse = await menu.baseElement.querySelector('#something-else');
+    act(() => {
+      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 = HTMLRender( /*#__PURE__*/React.createElement(SimpleActionMenu, null));
+    let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeNull();
+    const anchor = await menu.findByText('Menu');
+    act(() => {
+      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']"));
+    act(() => {
+      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-esm/__tests__/AnchoredOverlay.d.ts

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

package/lib-esm/__tests__/AnchoredOverlay.js

@@ -0,0 +1,135 @@
+import React, { useCallback, useState } from 'react';
+import { AnchoredOverlay } from '../AnchoredOverlay';
+import { behavesAsComponent, checkExports } from '../utils/testing';
+import { render as HTMLRender, cleanup, fireEvent } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import 'babel-polyfill';
+import { Button, SSRProvider } from '../index';
+import theme from '../theme';
+import BaseStyles from '../BaseStyles';
+import { ThemeProvider } from '../ThemeProvider';
+expect.extend(toHaveNoViolations);
+
+const AnchoredOverlayTestComponent = ({
+  initiallyOpen = false,
+  onOpenCallback,
+  onCloseCallback
+} = {}) => {
+  const [open, setOpen] = useState(initiallyOpen);
+  const onOpen = useCallback(gesture => {
+    setOpen(true);
+    onOpenCallback === null || onOpenCallback === void 0 ? void 0 : onOpenCallback(gesture);
+  }, [onOpenCallback]);
+  const onClose = useCallback(gesture => {
+    setOpen(true);
+    onCloseCallback === null || onCloseCallback === void 0 ? void 0 : onCloseCallback(gesture);
+  }, [onCloseCallback]);
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: theme
+  }, /*#__PURE__*/React.createElement(SSRProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(AnchoredOverlay, {
+    open: open,
+    onOpen: onOpen,
+    onClose: onClose,
+    renderAnchor: props => /*#__PURE__*/React.createElement(Button, props, "Anchor Button")
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button"
+  }, "Focusable Child")))));
+};
+
+AnchoredOverlayTestComponent.displayName = "AnchoredOverlayTestComponent";
+describe('AnchoredOverlay', () => {
+  behavesAsComponent({
+    Component: AnchoredOverlay,
+    systemPropArray: [],
+    options: {
+      skipAs: true,
+      skipSx: true
+    },
+    toRender: () => /*#__PURE__*/React.createElement(AnchoredOverlayTestComponent, null)
+  });
+  checkExports('AnchoredOverlay', {
+    default: undefined,
+    AnchoredOverlay
+  });
+  it('should have no axe violations when open', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(AnchoredOverlayTestComponent, {
+      initiallyOpen: true
+    }));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('should have no axe violations when closed', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(AnchoredOverlayTestComponent, null));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('should call onOpen when the anchor is clicked', () => {
+    const mockOpenCallback = jest.fn();
+    const mockCloseCallback = jest.fn();
+    const anchoredOverlay = HTMLRender( /*#__PURE__*/React.createElement(AnchoredOverlayTestComponent, {
+      onOpenCallback: mockOpenCallback,
+      onCloseCallback: mockCloseCallback
+    }));
+    const anchor = anchoredOverlay.baseElement.querySelector('[aria-haspopup="true"]');
+    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 = HTMLRender( /*#__PURE__*/React.createElement(AnchoredOverlayTestComponent, {
+      onOpenCallback: mockOpenCallback,
+      onCloseCallback: mockCloseCallback
+    }));
+    const anchor = anchoredOverlay.baseElement.querySelector('[aria-haspopup="true"]');
+    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 = HTMLRender( /*#__PURE__*/React.createElement(AnchoredOverlayTestComponent, {
+      initiallyOpen: true,
+      onOpenCallback: mockOpenCallback,
+      onCloseCallback: mockCloseCallback
+    }));
+    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 = HTMLRender( /*#__PURE__*/React.createElement(AnchoredOverlayTestComponent, {
+      initiallyOpen: true,
+      onOpenCallback: mockOpenCallback,
+      onCloseCallback: mockCloseCallback
+    }));
+    const overlay = await anchoredOverlay.findByRole('none');
+    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 = HTMLRender( /*#__PURE__*/React.createElement(AnchoredOverlayTestComponent, {
+      initiallyOpen: true
+    }));
+    expect(anchoredOverlay).toMatchSnapshot();
+  });
+});

package/lib-esm/__tests__/Avatar.d.ts

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

package/lib-esm/__tests__/Avatar.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Avatar } from '..';
+import theme from '../theme';
+import { px, render, behavesAsComponent, checkExports } from '../utils/testing';
+import { render as HTMLRender, cleanup } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import 'babel-polyfill';
+import { COMMON } from '../constants';
+expect.extend(toHaveNoViolations);
+describe('Avatar', () => {
+  behavesAsComponent({
+    Component: Avatar,
+    systemPropArray: [COMMON]
+  });
+  checkExports('Avatar', {
+    default: Avatar
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(Avatar, {
+      src: "primer.png"
+    }));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('renders small by default', () => {
+    const size = 20;
+    const result = render( /*#__PURE__*/React.createElement(Avatar, {
+      src: "primer.png"
+    }));
+    expect(result.props.width).toEqual(size);
+    expect(result.props.height).toEqual(size);
+  });
+  it('respects the size prop', () => {
+    const result = render( /*#__PURE__*/React.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(render( /*#__PURE__*/React.createElement(Avatar, {
+      src: "primer.png",
+      alt: ""
+    })).props.src).toEqual('primer.png');
+  });
+  it('respects margin props', () => {
+    expect(render( /*#__PURE__*/React.createElement(Avatar, {
+      m: 2,
+      src: "primer.png",
+      alt: ""
+    }))).toHaveStyleRule('margin', px(theme.space[2]));
+  });
+});

package/lib-esm/__tests__/AvatarStack.d.ts

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

package/lib-esm/__tests__/AvatarStack.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { AvatarStack } from '..';
+import { render, behavesAsComponent, checkExports } from '../utils/testing';
+import { COMMON } from '../constants';
+import { render as HTMLRender, cleanup } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import 'babel-polyfill';
+expect.extend(toHaveNoViolations);
+const avatarComp = /*#__PURE__*/React.createElement(AvatarStack, null, /*#__PURE__*/React.createElement("img", {
+  src: "https://avatars.githubusercontent.com/primer",
+  alt: ""
+}), /*#__PURE__*/React.createElement("img", {
+  src: "https://avatars.githubusercontent.com/github",
+  alt: ""
+}), /*#__PURE__*/React.createElement("img", {
+  src: "https://avatars.githubusercontent.com/primer",
+  alt: ""
+}), /*#__PURE__*/React.createElement("img", {
+  src: "https://avatars.githubusercontent.com/github",
+  alt: ""
+}));
+const rightAvatarComp = /*#__PURE__*/React.createElement(AvatarStack, {
+  alignRight: true
+}, /*#__PURE__*/React.createElement("img", {
+  src: "https://avatars.githubusercontent.com/primer",
+  alt: ""
+}), /*#__PURE__*/React.createElement("img", {
+  src: "https://avatars.githubusercontent.com/github",
+  alt: ""
+}), /*#__PURE__*/React.createElement("img", {
+  src: "https://avatars.githubusercontent.com/primer",
+  alt: ""
+}), /*#__PURE__*/React.createElement("img", {
+  src: "https://avatars.githubusercontent.com/github",
+  alt: ""
+}));
+describe('Avatar', () => {
+  behavesAsComponent({
+    Component: AvatarStack,
+    systemPropArray: [COMMON],
+    toRender: () => avatarComp
+  });
+  checkExports('AvatarStack', {
+    default: AvatarStack
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender(avatarComp);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('respects alignRight props', () => {
+    expect(render(rightAvatarComp)).toMatchSnapshot();
+  });
+});

package/lib-esm/__tests__/BorderBox.d.ts

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

package/lib-esm/__tests__/BorderBox.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import theme from '../theme';
+import { BorderBox } from '..';
+import { render, behavesAsComponent, checkExports } from '../utils/testing';
+import { LAYOUT, COMMON, BORDER, FLEX } from '../constants';
+import { render as HTMLRender, cleanup } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import 'babel-polyfill';
+expect.extend(toHaveNoViolations);
+describe('BorderBox', () => {
+  behavesAsComponent({
+    Component: BorderBox,
+    systemPropArray: [LAYOUT, COMMON, BORDER, FLEX]
+  });
+  checkExports('BorderBox', {
+    default: BorderBox
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(BorderBox, null));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('renders borders', () => {
+    var _theme$colorSchemes$l;
+
+    expect(render( /*#__PURE__*/React.createElement(BorderBox, {
+      borderColor: "success.emphasis"
+    }))).toHaveStyleRule('border-color', (_theme$colorSchemes$l = theme.colorSchemes.light.colors.border) === null || _theme$colorSchemes$l === void 0 ? void 0 : _theme$colorSchemes$l.success);
+    expect(render( /*#__PURE__*/React.createElement(BorderBox, {
+      borderBottom: 0
+    }))).toHaveStyleRule('border-bottom', '0');
+  });
+  it('renders border radius', () => {
+    expect(render( /*#__PURE__*/React.createElement(BorderBox, {
+      borderRadius: 2
+    }))).toHaveStyleRule('border-radius', theme.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(render( /*#__PURE__*/React.createElement(BorderBox, {
+      boxShadow: "shadow.small"
+    }))).toHaveStyleRule('box-shadow', (_theme$colorSchemes$l2 = theme.colorSchemes.light.shadows.shadow) === null || _theme$colorSchemes$l2 === void 0 ? void 0 : _theme$colorSchemes$l2.small);
+  });
+});

package/lib-esm/__tests__/Box.d.ts

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

package/lib-esm/__tests__/Box.js

@@ -0,0 +1,69 @@
+import { cleanup, render as HTMLRender } from '@testing-library/react';
+import 'babel-polyfill';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import React from 'react';
+import { Box } from '..';
+import { COMMON, FLEX, LAYOUT } from '../constants';
+import theme from '../theme';
+import { behavesAsComponent, checkExports, render } from '../utils/testing';
+expect.extend(toHaveNoViolations);
+describe('Box', () => {
+  behavesAsComponent({
+    Component: Box,
+    systemPropArray: [COMMON, LAYOUT, FLEX]
+  });
+  checkExports('Box', {
+    default: Box
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(Box, null));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('renders margin', () => {
+    expect(render( /*#__PURE__*/React.createElement(Box, {
+      m: 1,
+      theme: theme
+    }))).toMatchSnapshot();
+    expect(render( /*#__PURE__*/React.createElement(Box, {
+      m: [0, 1, 2, 3],
+      theme: theme
+    }))).toMatchSnapshot();
+    expect(render( /*#__PURE__*/React.createElement(Box, {
+      m: [1, 1, 1, 3],
+      theme: theme
+    }))).toMatchSnapshot();
+  });
+  it('renders padding', () => {
+    expect(render( /*#__PURE__*/React.createElement(Box, {
+      p: 1,
+      theme: theme
+    }))).toMatchSnapshot();
+    expect(render( /*#__PURE__*/React.createElement(Box, {
+      p: [0, 1, 2, 3],
+      theme: theme
+    }))).toMatchSnapshot();
+    expect(render( /*#__PURE__*/React.createElement(Box, {
+      p: [1, 1, 1, 3],
+      theme: theme
+    }))).toMatchSnapshot();
+  });
+  it('respects display', () => {
+    expect(render( /*#__PURE__*/React.createElement(Box, {
+      display: "inline"
+    }))).toMatchSnapshot();
+    expect(render( /*#__PURE__*/React.createElement(Box, {
+      display: "inline-block"
+    }))).toMatchSnapshot();
+    expect(render( /*#__PURE__*/React.createElement(Box, {
+      display: "none"
+    }))).toMatchSnapshot();
+    expect(render( /*#__PURE__*/React.createElement(Box, {
+      display: ['none', 'none', 'block'],
+      theme: theme
+    }))).toMatchSnapshot();
+  });
+});

package/lib-esm/__tests__/BranchName.d.ts

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