@primer/components 29.1.0 → 29.1.1-rc.cea79543

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

package/lib-esm/__tests__/BranchName.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { BranchName } 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);
+describe('BranchName', () => {
+  behavesAsComponent({
+    Component: BranchName,
+    systemPropArray: [COMMON]
+  });
+  checkExports('BranchName', {
+    default: BranchName
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(BranchName, null));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('renders an <a> by default', () => {
+    expect(render( /*#__PURE__*/React.createElement(BranchName, null)).type).toEqual('a');
+  });
+});

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

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

package/lib-esm/__tests__/Breadcrumb.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Breadcrumb } from '..';
+import { render, rendersClass, 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);
+describe('Breadcrumb', () => {
+  behavesAsComponent({
+    Component: Breadcrumb,
+    systemPropArray: [COMMON]
+  });
+  checkExports('Breadcrumb', {
+    default: Breadcrumb
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(Breadcrumb, null));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('renders a <nav>', () => {
+    expect(render( /*#__PURE__*/React.createElement(Breadcrumb, null)).type).toEqual('nav');
+  });
+  it('adds the Breadcrumb class', () => {
+    expect(rendersClass( /*#__PURE__*/React.createElement(Breadcrumb, null), 'Breadcrumb')).toEqual(true);
+  });
+});

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

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

package/lib-esm/__tests__/BreadcrumbItem.js

@@ -0,0 +1,41 @@
+import { cleanup, render as HTMLRender } from '@testing-library/react';
+import 'babel-polyfill';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import React from 'react';
+import { Breadcrumb } from '..';
+import { COMMON } from '../constants';
+import { behavesAsComponent, render } from '../utils/testing';
+expect.extend(toHaveNoViolations);
+describe('Breadcrumb.Item', () => {
+  behavesAsComponent({
+    Component: Breadcrumb.Item,
+    systemPropArray: [COMMON]
+  });
+  it('renders an <a> by default', () => {
+    expect(render( /*#__PURE__*/React.createElement(Breadcrumb.Item, null)).type).toEqual('a');
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(Breadcrumb.Item, null));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('respects the "selected" prop', () => {
+    expect(render( /*#__PURE__*/React.createElement(Breadcrumb.Item, {
+      selected: true
+    }))).toMatchSnapshot();
+  });
+  it('adds activeClassName={SELECTED_CLASS} when it gets a "to" prop', () => {
+    const Link = ({
+      theme: _ignoredTheme,
+      ...props
+    }) => /*#__PURE__*/React.createElement("div", props);
+
+    expect(render( /*#__PURE__*/React.createElement(Breadcrumb.Item, {
+      as: Link,
+      to: "#"
+    }))).toMatchSnapshot();
+  });
+});

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

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

package/lib-esm/__tests__/Button.js

@@ -0,0 +1,141 @@
+import React from 'react';
+import { Button, ButtonPrimary, ButtonClose, ButtonDanger, ButtonOutline, ButtonInvisible, ButtonGroup, ButtonTableList } from '..';
+import { render, behavesAsComponent, checkExports } from '../utils/testing';
+import { COMMON, FLEX, LAYOUT, TYPOGRAPHY } from '../constants';
+import { render as HTMLRender, cleanup } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import 'babel-polyfill';
+expect.extend(toHaveNoViolations); // eslint-disable-next-line @typescript-eslint/no-empty-function
+
+function noop() {}
+
+describe('Button', () => {
+  behavesAsComponent({
+    Component: Button,
+    systemPropArray: [COMMON, LAYOUT]
+  });
+  checkExports('Button', {
+    default: Button,
+    ButtonPrimary,
+    ButtonDanger,
+    ButtonOutline,
+    ButtonInvisible,
+    ButtonGroup,
+    ButtonTableList,
+    ButtonClose
+  });
+  it('renders a <button>', () => {
+    expect(render( /*#__PURE__*/React.createElement(Button, null)).type).toEqual('button');
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(Button, null, "Click here"));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('preserves "onClick" prop', () => {
+    expect(render( /*#__PURE__*/React.createElement(Button, {
+      onClick: noop
+    })).props.onClick).toEqual(noop);
+  });
+  it('respects width props', () => {
+    expect(render( /*#__PURE__*/React.createElement(Button, {
+      width: 200
+    }))).toHaveStyleRule('width', '200px');
+  });
+  it('respects the "disabled" prop', () => {
+    const item = render( /*#__PURE__*/React.createElement(Button, {
+      disabled: true
+    }));
+    expect(item.props.disabled).toEqual(true);
+    expect(item).toMatchSnapshot();
+  });
+  it('respects the "variant" prop', () => {
+    expect(render( /*#__PURE__*/React.createElement(Button, {
+      variant: "small"
+    }))).toHaveStyleRule('font-size', '12px');
+    expect(render( /*#__PURE__*/React.createElement(Button, {
+      variant: "large"
+    }))).toHaveStyleRule('font-size', '16px');
+  });
+  it('respects the "fontSize" prop over the "variant" prop', () => {
+    expect(render( /*#__PURE__*/React.createElement(Button, {
+      variant: "small",
+      fontSize: 20
+    }))).toHaveStyleRule('font-size', '20px');
+  });
+});
+describe('ButtonPrimary', () => {
+  behavesAsComponent({
+    Component: ButtonPrimary,
+    systemPropArray: [COMMON, LAYOUT]
+  });
+  it('renders a <button>', () => {
+    expect(render( /*#__PURE__*/React.createElement(ButtonPrimary, null)).type).toEqual('button');
+  });
+  it('renders correct disabled styles', () => {
+    const item = render( /*#__PURE__*/React.createElement(ButtonPrimary, {
+      disabled: true
+    }));
+    expect(item).toMatchSnapshot();
+  });
+});
+describe('ButtonDanger', () => {
+  behavesAsComponent({
+    Component: ButtonDanger,
+    systemPropArray: [COMMON, LAYOUT]
+  });
+  it('renders a <button>', () => {
+    expect(render( /*#__PURE__*/React.createElement(ButtonDanger, null)).type).toEqual('button');
+  });
+  it('renders correct disabled styles', () => {
+    const item = render( /*#__PURE__*/React.createElement(ButtonDanger, {
+      disabled: true
+    }));
+    expect(item).toMatchSnapshot();
+  });
+});
+describe('ButtonOutline', () => {
+  behavesAsComponent({
+    Component: ButtonOutline,
+    systemPropArray: [COMMON, LAYOUT]
+  });
+  it('renders a <button> by default', () => {
+    expect(render( /*#__PURE__*/React.createElement(ButtonOutline, null)).type).toEqual('button');
+  });
+  it('renders correct disabled styles', () => {
+    const item = render( /*#__PURE__*/React.createElement(ButtonOutline, {
+      disabled: true
+    }));
+    expect(item).toMatchSnapshot();
+  });
+});
+describe('ButtonInvisible', () => {
+  behavesAsComponent({
+    Component: ButtonOutline,
+    systemPropArray: [COMMON, LAYOUT]
+  });
+  it('renders a <button> by default', () => {
+    expect(render( /*#__PURE__*/React.createElement(ButtonInvisible, null)).type).toEqual('button');
+  });
+  it('renders correct disabled styles', () => {
+    const item = render( /*#__PURE__*/React.createElement(ButtonInvisible, {
+      disabled: true
+    }));
+    expect(item).toMatchSnapshot();
+  });
+});
+describe('ButtonGroup', () => {
+  behavesAsComponent({
+    Component: ButtonGroup,
+    systemPropArray: [COMMON, FLEX, LAYOUT]
+  });
+});
+describe('ButtonTableList', () => {
+  behavesAsComponent({
+    Component: ButtonTableList,
+    systemPropArray: [COMMON, TYPOGRAPHY, LAYOUT]
+  });
+});

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

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