@primer/components 29.0.0 → 29.1.1-rc.cea79543

package/lib-esm/Timeline.js

@@ -15,7 +15,7 @@ const TimelineItem = styled(Box).attrs(props => ({
 })).withConfig({
   displayName: "Timeline__TimelineItem",
   componentId: "c4dq2e-1"
-})(["display:flex;position:relative;padding:", " 0;margin-left:", ";&::before{position:absolute;top:0;bottom:0;left:0;display:block;width:2px;content:'';background-color:", ";}", " ", ";", ";"], get('space.3'), get('space.3'), get('colors.border.secondary'), props => props.condensed && css(["padding-top:", ";padding-bottom:0;&:last-child{padding-bottom:", ";}.TimelineItem-Badge{height:16px;margin-top:", ";margin-bottom:", ";color:", ";background-color:", ";border:0;}"], get('space.1'), get('space.3'), get('space.2'), get('space.2'), get('colors.icon.tertiary'), get('colors.bg.canvas')), COMMON, sx);
+})(["display:flex;position:relative;padding:", " 0;margin-left:", ";&::before{position:absolute;top:0;bottom:0;left:0;display:block;width:2px;content:'';background-color:", ";}", " ", ";", ";"], get('space.3'), get('space.3'), get('colors.border.muted'), props => props.condensed && css(["padding-top:", ";padding-bottom:0;&:last-child{padding-bottom:", ";}.TimelineItem-Badge{height:16px;margin-top:", ";margin-bottom:", ";color:", ";background-color:", ";border:0;}"], get('space.1'), get('space.3'), get('space.2'), get('space.2'), get('colors.fg.muted'), get('colors.canvas.default')), COMMON, sx);
 
 const TimelineBadge = props => {
   return /*#__PURE__*/React.createElement(Box, {
@@ -28,9 +28,9 @@ const TimelineBadge = props => {
     borderRadius: "50%",
     borderWidth: "2px",
     borderStyle: "solid",
-    borderColor: "bg.canvas",
+    borderColor: "canvas.default",
     overflow: "hidden",
-    color: "icon.secondary",
+    color: "fg.muted",
     bg: "timeline.badgeBg",
     width: "32px",
     height: "32px",
@@ -45,11 +45,11 @@ TimelineBadge.displayName = "TimelineBadge";
 const TimelineBody = styled(Box).withConfig({
   displayName: "Timeline__TimelineBody",
   componentId: "c4dq2e-2"
-})(["min-width:0;max-width:100%;margin-top:", ";color:", ";flex:auto;font-size:", ";", ";"], get('space.1'), get('colors.timeline.text'), get('fontSizes.1'), sx);
+})(["min-width:0;max-width:100%;margin-top:", ";color:", ";flex:auto;font-size:", ";", ";"], get('space.1'), get('colors.fg.muted'), get('fontSizes.1'), sx);
 const TimelineBreak = styled(Box).withConfig({
   displayName: "Timeline__TimelineBreak",
   componentId: "c4dq2e-3"
-})(["position:relative z-index:1;height:24px;margin:0;margin-bottom:-", ";margin-left:0;background-color:", ";border:0;border-top:", " solid ", ";", ";"], get('space.3'), get('colors.bg.canvas'), get('space.1'), get('colors.border.primary'), sx);
+})(["position:relative z-index:1;height:24px;margin:0;margin-bottom:-", ";margin-left:0;background-color:", ";border:0;border-top:", " solid ", ";", ";"], get('space.3'), get('colors.canvas.default'), get('space.1'), get('colors.border.default'), sx);
 TimelineItem.displayName = 'Timeline.Item';
 TimelineBadge.displayName = 'Timeline.Badge';
 TimelineBody.displayName = 'Timeline.Body';

package/lib-esm/Tooltip.js

@@ -8,7 +8,7 @@ import sx from './sx';
 const TooltipBase = styled.span.withConfig({
   displayName: "Tooltip__TooltipBase",
   componentId: "kp39nc-0"
-})(["position:relative;&::before{position:absolute;z-index:1000001;display:none;width:0px;height:0px;color:", ";pointer-events:none;content:'';border:6px solid transparent;opacity:0;}&::after{position:absolute;z-index:1000000;display:none;padding:0.5em 0.75em;font:normal normal 11px/1.5 ", ";-webkit-font-smoothing:subpixel-antialiased;color:", ";text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:", ";border-radius:", ";opacity:0;}@keyframes tooltip-appear{from{opacity:0;}to{opacity:1;}}&:hover,&:active,&:focus{&::before,&::after{display:inline-block;text-decoration:none;animation-name:tooltip-appear;animation-duration:0.1s;animation-fill-mode:forwards;animation-timing-function:ease-in;animation-delay:0.4s;}}&.tooltipped-no-delay:hover,&.tooltipped-no-delay:active,&.tooltipped-no-delay:focus{&::before,&::after{animation-delay:0s;}}&.tooltipped-multiline:hover,&.tooltipped-multiline:active,&.tooltipped-multiline:focus{&::after{display:table-cell;}}&.tooltipped-s,&.tooltipped-se,&.tooltipped-sw{&::after{top:100%;right:50%;margin-top:6px;}&::before{top:auto;right:50%;bottom:-7px;margin-right:-6px;border-bottom-color:", ";}}&.tooltipped-se{&::after{right:auto;left:50%;margin-left:-", ";}}&.tooltipped-sw::after{margin-right:-", ";}&.tooltipped-n,&.tooltipped-ne,&.tooltipped-nw{&::after{right:50%;bottom:100%;margin-bottom:6px;}&::before{top:-7px;right:50%;bottom:auto;margin-right:-6px;border-top-color:", ";}}&.tooltipped-ne{&::after{right:auto;left:50%;margin-left:-", ";}}&.tooltipped-nw::after{margin-right:-", ";}&.tooltipped-s::after,&.tooltipped-n::after{transform:translateX(50%);}&.tooltipped-w{&::after{right:100%;bottom:50%;margin-right:6px;transform:translateY(50%);}&::before{top:50%;bottom:50%;left:-7px;margin-top:-6px;border-left-color:", ";}}&.tooltipped-e{&::after{bottom:50%;left:100%;margin-left:6px;transform:translateY(50%);}&::before{top:50%;right:-7px;bottom:50%;margin-top:-6px;border-right-color:", ";}}&.tooltipped-multiline{&::after{width:max-content;max-width:250px;word-wrap:break-word;white-space:pre-line;border-collapse:separate;}&.tooltipped-s::after,&.tooltipped-n::after{right:auto;left:50%;transform:translateX(-50%);}&.tooltipped-w::after,&.tooltipped-e::after{right:100%;}}&.tooltipped-align-right-2::after{right:0;margin-right:0;}&.tooltipped-align-right-2::before{right:15px;}&.tooltipped-align-left-2::after{left:0;margin-left:0;}&.tooltipped-align-left-2::before{left:10px;}", ";", ";"], get('colors.tooltip.bg'), get('fonts.normal'), get('colors.tooltip.text'), get('colors.tooltip.bg'), get('radii.1'), get('colors.tooltip.bg'), get('space.3'), get('space.3'), get('colors.tooltip.bg'), get('space.3'), get('space.3'), get('colors.tooltip.bg'), get('colors.tooltip.bg'), COMMON, sx);
+})(["position:relative;&::before{position:absolute;z-index:1000001;display:none;width:0px;height:0px;color:", ";pointer-events:none;content:'';border:6px solid transparent;opacity:0;}&::after{position:absolute;z-index:1000000;display:none;padding:0.5em 0.75em;font:normal normal 11px/1.5 ", ";-webkit-font-smoothing:subpixel-antialiased;color:", ";text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:", ";border-radius:", ";opacity:0;}@keyframes tooltip-appear{from{opacity:0;}to{opacity:1;}}&:hover,&:active,&:focus{&::before,&::after{display:inline-block;text-decoration:none;animation-name:tooltip-appear;animation-duration:0.1s;animation-fill-mode:forwards;animation-timing-function:ease-in;animation-delay:0.4s;}}&.tooltipped-no-delay:hover,&.tooltipped-no-delay:active,&.tooltipped-no-delay:focus{&::before,&::after{animation-delay:0s;}}&.tooltipped-multiline:hover,&.tooltipped-multiline:active,&.tooltipped-multiline:focus{&::after{display:table-cell;}}&.tooltipped-s,&.tooltipped-se,&.tooltipped-sw{&::after{top:100%;right:50%;margin-top:6px;}&::before{top:auto;right:50%;bottom:-7px;margin-right:-6px;border-bottom-color:", ";}}&.tooltipped-se{&::after{right:auto;left:50%;margin-left:-", ";}}&.tooltipped-sw::after{margin-right:-", ";}&.tooltipped-n,&.tooltipped-ne,&.tooltipped-nw{&::after{right:50%;bottom:100%;margin-bottom:6px;}&::before{top:-7px;right:50%;bottom:auto;margin-right:-6px;border-top-color:", ";}}&.tooltipped-ne{&::after{right:auto;left:50%;margin-left:-", ";}}&.tooltipped-nw::after{margin-right:-", ";}&.tooltipped-s::after,&.tooltipped-n::after{transform:translateX(50%);}&.tooltipped-w{&::after{right:100%;bottom:50%;margin-right:6px;transform:translateY(50%);}&::before{top:50%;bottom:50%;left:-7px;margin-top:-6px;border-left-color:", ";}}&.tooltipped-e{&::after{bottom:50%;left:100%;margin-left:6px;transform:translateY(50%);}&::before{top:50%;right:-7px;bottom:50%;margin-top:-6px;border-right-color:", ";}}&.tooltipped-multiline{&::after{width:max-content;max-width:250px;word-wrap:break-word;white-space:pre-line;border-collapse:separate;}&.tooltipped-s::after,&.tooltipped-n::after{right:auto;left:50%;transform:translateX(-50%);}&.tooltipped-w::after,&.tooltipped-e::after{right:100%;}}&.tooltipped-align-right-2::after{right:0;margin-right:0;}&.tooltipped-align-right-2::before{right:15px;}&.tooltipped-align-left-2::after{left:0;margin-left:0;}&.tooltipped-align-left-2::before{left:10px;}", ";", ";"], get('colors.neutral.emphasisPlus'), get('fonts.normal'), get('colors.fg.onEmphasis'), get('colors.neutral.emphasisPlus'), get('radii.1'), get('colors.neutral.emphasisPlus'), get('space.3'), get('space.3'), get('colors.neutral.emphasisPlus'), get('space.3'), get('space.3'), get('colors.neutral.emphasisPlus'), get('colors.neutral.emphasisPlus'), COMMON, sx);
 
 function Tooltip({
   direction = 'n',

package/lib-esm/UnderlineNav.js

@@ -11,7 +11,7 @@ const SELECTED_CLASS = 'selected';
 const UnderlineNavBase = styled.nav.withConfig({
   displayName: "UnderlineNav__UnderlineNavBase",
   componentId: "zrnxqt-0"
-})(["display:flex;justify-content:space-between;border-bottom:1px solid ", ";&.UnderlineNav--right{justify-content:flex-end;.UnderlineNav-item{margin-right:0;margin-left:", ";}.UnderlineNav-actions{flex:1 1 auto;}}&.UnderlineNav--full{display:block;}.UnderlineNav-body{display:flex;margin-bottom:-1px;}.UnderlineNav-actions{align-self:center;}", ";", ";"], get('colors.border.secondary'), get('space.3'), COMMON, sx);
+})(["display:flex;justify-content:space-between;border-bottom:1px solid ", ";&.UnderlineNav--right{justify-content:flex-end;.UnderlineNav-item{margin-right:0;margin-left:", ";}.UnderlineNav-actions{flex:1 1 auto;}}&.UnderlineNav--full{display:block;}.UnderlineNav-body{display:flex;margin-bottom:-1px;}.UnderlineNav-actions{align-self:center;}", ";", ";"], get('colors.border.muted'), get('space.3'), COMMON, sx);
 
 function UnderlineNav({
   actions,
@@ -42,7 +42,7 @@ const UnderlineNavLink = styled.a.attrs(props => ({
 })).withConfig({
   displayName: "UnderlineNav__UnderlineNavLink",
   componentId: "zrnxqt-1"
-})(["padding:", " ", ";margin-right:", ";font-size:", ";line-height:", ";color:", ";text-align:center;border-bottom:2px solid transparent;text-decoration:none;&:hover,&:focus{color:", ";text-decoration:none;border-bottom-color:", ";transition:0.2s ease;.UnderlineNav-octicon{color:", ";}}&.selected{color:", ";border-bottom-color:", ";.UnderlineNav-octicon{color:", ";}}", ";", ";"], get('space.3'), get('space.2'), get('space.3'), get('fontSizes.1'), get('lineHeights.default'), get('colors.underlinenav.text'), get('colors.underlinenav.textHover'), get('colors.border.tertiary'), get('colors.text.tertiary'), get('colors.underlinenav.textActive'), get('colors.underlinenav.borderActive'), get('colors.underlinenav.iconActive'), COMMON, sx);
+})(["padding:", " ", ";margin-right:", ";font-size:", ";line-height:", ";color:", ";text-align:center;border-bottom:2px solid transparent;text-decoration:none;&:hover,&:focus{color:", ";text-decoration:none;border-bottom-color:", ";transition:0.2s ease;.UnderlineNav-octicon{color:", ";}}&.selected{color:", ";border-bottom-color:", ";.UnderlineNav-octicon{color:", ";}}", ";", ";"], get('space.3'), get('space.2'), get('space.3'), get('fontSizes.1'), get('lineHeights.default'), get('colors.fg.default'), get('colors.fg.default'), get('colors.neutral.muted'), get('colors.fg.muted'), get('colors.fg.default'), get('colors.primer.border.active'), get('colors.fg.default'), COMMON, sx);
 UnderlineNavLink.displayName = 'UnderlineNav.Link';
 export default Object.assign(UnderlineNav, {
   Link: UnderlineNavLink

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';