@primer/components 32.1.0 → 33.0.0-rc.b495ba4a

package/lib-esm/__tests__/Dialog.test.js

@@ -0,0 +1,171 @@
+import React, { useState, useRef } from 'react';
+import { Dialog, Box, Text, Button } from '..';
+import { render as HTMLRender, cleanup, act, fireEvent } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import 'babel-polyfill';
+import { behavesAsComponent, checkExports } from '../utils/testing';
+expect.extend(toHaveNoViolations);
+const comp = /*#__PURE__*/React.createElement(Dialog, {
+  isOpen: true,
+  onDismiss: () => null,
+  "aria-labelledby": "header"
+}, /*#__PURE__*/React.createElement(Dialog.Header, {
+  id: "header"
+}, "Title"), /*#__PURE__*/React.createElement(Box, {
+  p: 3
+}, /*#__PURE__*/React.createElement(Text, {
+  fontFamily: "sans-serif"
+}, "Some content")));
+
+const Component = () => {
+  const [isOpen, setIsOpen] = useState(true);
+  const returnFocusRef = useRef(null);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+    "data-testid": "trigger-button",
+    ref: returnFocusRef,
+    onClick: () => setIsOpen(true)
+  }, "Show Dialog"), /*#__PURE__*/React.createElement(Dialog, {
+    returnFocusRef: returnFocusRef,
+    isOpen: isOpen,
+    onDismiss: () => setIsOpen(false),
+    "aria-labelledby": "header"
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-testid": "inner"
+  }, /*#__PURE__*/React.createElement(Dialog.Header, {
+    id: "header"
+  }, "Title"), /*#__PURE__*/React.createElement(Box, {
+    p: 3
+  }, /*#__PURE__*/React.createElement(Text, {
+    fontFamily: "sans-serif"
+  }, "Some content")))));
+};
+
+Component.displayName = "Component";
+
+const ClosedDialog = () => {
+  return /*#__PURE__*/React.createElement(Dialog, {
+    isOpen: false,
+    onDismiss: () => null,
+    "aria-labelledby": "header"
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-testid": "inner"
+  }, /*#__PURE__*/React.createElement(Dialog.Header, {
+    id: "header"
+  }, "Title"), /*#__PURE__*/React.createElement(Box, {
+    p: 3
+  }, /*#__PURE__*/React.createElement(Text, {
+    fontFamily: "sans-serif"
+  }, "Some content"))));
+};
+
+ClosedDialog.displayName = "ClosedDialog";
+
+const DialogWithCustomFocusRef = () => {
+  const buttonRef = useRef(null);
+  return /*#__PURE__*/React.createElement(Dialog, {
+    isOpen: true,
+    initialFocusRef: buttonRef,
+    onDismiss: () => null,
+    "aria-labelledby": "header"
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-testid": "inner"
+  }, /*#__PURE__*/React.createElement(Dialog.Header, {
+    id: "header"
+  }, "Title"), /*#__PURE__*/React.createElement(Box, {
+    p: 3
+  }, /*#__PURE__*/React.createElement(Text, {
+    fontFamily: "sans-serif"
+  }, "Some content"), /*#__PURE__*/React.createElement("button", {
+    "data-testid": "inner-button",
+    ref: buttonRef
+  }, "hi"))));
+};
+
+DialogWithCustomFocusRef.displayName = "DialogWithCustomFocusRef";
+describe('Dialog', () => {
+  // because Dialog returns a React fragment the as and sx tests fail always, so they are skipped
+  behavesAsComponent({
+    Component: Dialog,
+    toRender: () => comp,
+    options: {
+      skipAs: true,
+      skipSx: true
+    }
+  });
+  checkExports('Dialog', {
+    default: Dialog
+  });
+  describe('Dialog.Header', () => {
+    behavesAsComponent({
+      Component: Dialog.Header
+    });
+  });
+  it('should have no axe violations', async () => {
+    const spy = jest.spyOn(console, 'warn').mockImplementation();
+    const {
+      container
+    } = HTMLRender(comp);
+    spy.mockRestore();
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('Toggles when you click close button', async () => {
+    const {
+      getByLabelText,
+      getByTestId,
+      queryByTestId
+    } = HTMLRender( /*#__PURE__*/React.createElement(Component, null));
+    expect(getByTestId('inner')).toBeTruthy();
+    act(() => {
+      fireEvent.click(getByLabelText('Close'));
+    });
+    expect(queryByTestId('inner')).toBeNull();
+    cleanup();
+  });
+  it('Renders dialog when isOpen is true', async () => {
+    const {
+      getByTestId
+    } = HTMLRender( /*#__PURE__*/React.createElement(Component, null));
+    expect(getByTestId('inner')).toBeTruthy();
+    cleanup();
+  });
+  it('Does not render dialog when isOpen is false', async () => {
+    const {
+      queryByTestId
+    } = HTMLRender( /*#__PURE__*/React.createElement(ClosedDialog, null));
+    expect(queryByTestId('inner')).toBeNull();
+    cleanup();
+  });
+  it('Focuses close button when Dialog is opened', async () => {
+    const {
+      getByLabelText
+    } = HTMLRender( /*#__PURE__*/React.createElement(Component, null));
+    const closeButton = getByLabelText('Close');
+    expect(document.activeElement).toEqual(closeButton);
+    cleanup();
+  });
+  it('Focuses custom ref when Dialog is opened', async () => {
+    const {
+      getByTestId
+    } = HTMLRender( /*#__PURE__*/React.createElement(DialogWithCustomFocusRef, null));
+    const innerButton = getByTestId('inner-button');
+    expect(document.activeElement).toEqual(innerButton);
+    cleanup();
+  });
+  it('Returns focus to returnFocusRef', async () => {
+    const {
+      getByLabelText,
+      getByTestId,
+      queryByTestId
+    } = HTMLRender( /*#__PURE__*/React.createElement(Component, null));
+    expect(getByTestId('inner')).toBeTruthy();
+    act(() => {
+      fireEvent.click(getByLabelText('Close'));
+    });
+    expect(queryByTestId('inner')).toBeNull();
+    const triggerButton = getByTestId('trigger-button');
+    expect(document.activeElement).toEqual(triggerButton);
+    cleanup();
+  });
+});

package/lib-esm/__tests__/Dialog.types.test.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldNotAcceptSystemProps(): JSX.Element;

package/lib-esm/__tests__/Dialog.types.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Dialog from '../Dialog';
+export function shouldAcceptCallWithNoProps() {
+  return /*#__PURE__*/React.createElement(Dialog, null);
+}
+shouldAcceptCallWithNoProps.displayName = "shouldAcceptCallWithNoProps";
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return /*#__PURE__*/React.createElement(Dialog, {
+    backgroundColor: "thistle"
+  });
+}
+shouldNotAcceptSystemProps.displayName = "shouldNotAcceptSystemProps";

package/lib-esm/__tests__/Dialog2.types.test.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldNotAcceptSystemProps(): JSX.Element;

package/lib-esm/__tests__/Dialog2.types.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Dialog } from '../Dialog/Dialog';
+export function shouldAcceptCallWithNoProps() {
+  return /*#__PURE__*/React.createElement(Dialog, {
+    onClose: () => null
+  });
+}
+shouldAcceptCallWithNoProps.displayName = "shouldAcceptCallWithNoProps";
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return /*#__PURE__*/React.createElement(Dialog, {
+    onClose: () => null,
+    backgroundColor: "tomato"
+  });
+}
+shouldNotAcceptSystemProps.displayName = "shouldNotAcceptSystemProps";

package/lib-esm/__tests__/Dropdown.test.d.ts

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

package/lib-esm/__tests__/Dropdown.test.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Dropdown } from '..';
+import { behavesAsComponent, checkExports } from '../utils/testing';
+import { render as HTMLRender, cleanup } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import 'babel-polyfill';
+expect.extend(toHaveNoViolations);
+describe('Dropdown', () => {
+  behavesAsComponent({
+    Component: Dropdown,
+    toRender: () => /*#__PURE__*/React.createElement(Dropdown, null, "Hello!")
+  });
+  checkExports('Dropdown', {
+    default: Dropdown
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(Dropdown, null));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+});
+describe('Dropdown.Item', () => {
+  behavesAsComponent({
+    Component: Dropdown.Item,
+    toRender: () => /*#__PURE__*/React.createElement(Dropdown.Item, null, "Hello!")
+  });
+});
+describe('Dropdown.Button', () => {
+  behavesAsComponent({
+    Component: Dropdown.Button,
+    toRender: () => /*#__PURE__*/React.createElement(Dropdown.Button, null, "Hello!")
+  });
+});
+describe('Dropdown.Caret', () => {
+  behavesAsComponent({
+    Component: Dropdown.Caret
+  });
+});
+describe('Dropdown.Menu', () => {
+  behavesAsComponent({
+    Component: Dropdown.Menu,
+    toRender: () => /*#__PURE__*/React.createElement(Dropdown.Menu, null, /*#__PURE__*/React.createElement("li", {
+      key: "a"
+    }, "1"), /*#__PURE__*/React.createElement("li", {
+      key: "b"
+    }, "2"), /*#__PURE__*/React.createElement("li", {
+      key: "c"
+    }, "3"))
+  });
+});

package/lib-esm/__tests__/Dropdown.types.test.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldNotAcceptSystemProps(): JSX.Element;

package/lib-esm/__tests__/Dropdown.types.test.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import Dropdown from '../Dropdown';
+export function shouldAcceptCallWithNoProps() {
+  return /*#__PURE__*/React.createElement(Dropdown, null);
+}
+shouldAcceptCallWithNoProps.displayName = "shouldAcceptCallWithNoProps";
+export function shouldNotAcceptSystemProps() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown.Caret, {
+    backgroundColor: "thistle"
+  }), /*#__PURE__*/React.createElement(Dropdown.Menu, {
+    backgroundColor: "thistle"
+  }), /*#__PURE__*/React.createElement(Dropdown.Item, {
+    backgroundColor: "thistle"
+  }), /*#__PURE__*/React.createElement(Dropdown.Button, {
+    backgroundColor: "thistle"
+  }));
+}

package/lib-esm/__tests__/DropdownMenu.test.d.ts

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

package/lib-esm/__tests__/DropdownMenu.test.js

@@ -0,0 +1,137 @@
+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 { DropdownMenu, DropdownButton } from '../DropdownMenu';
+import { behavesAsComponent, checkExports } from '../utils/testing';
+import { BaseStyles, ThemeProvider, SSRProvider } from '..';
+expect.extend(toHaveNoViolations);
+const items = [{
+  text: 'Foo'
+}, {
+  text: 'Bar'
+}, {
+  text: 'Baz'
+}, {
+  text: 'Bon'
+}];
+
+function SimpleDropdownMenu() {
+  const [selectedItem, setSelectedItem] = React.useState();
+  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(DropdownMenu, {
+    items: items,
+    placeholder: "Select an Option",
+    selectedItem: selectedItem,
+    onChange: setSelectedItem
+  }), /*#__PURE__*/React.createElement("div", {
+    id: "portal-root"
+  }))));
+}
+
+SimpleDropdownMenu.displayName = "SimpleDropdownMenu";
+describe('DropdownMenu', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  behavesAsComponent({
+    Component: DropdownMenu,
+    options: {
+      skipAs: true,
+      skipSx: true
+    },
+    toRender: () => /*#__PURE__*/React.createElement(SSRProvider, null, /*#__PURE__*/React.createElement(DropdownMenu, {
+      items: []
+    }))
+  });
+  checkExports('DropdownMenu', {
+    default: undefined,
+    DropdownMenu,
+    DropdownButton
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(SimpleDropdownMenu, 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(SimpleDropdownMenu, null));
+    let portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeNull();
+    const anchor = await menu.findByText('Select an Option');
+    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 dropdown item click', async () => {
+    var _portalRoot2;
+
+    const menu = HTMLRender( /*#__PURE__*/React.createElement(SimpleDropdownMenu, null));
+    let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeNull();
+    const anchor = await menu.findByText('Select an Option');
+    act(() => {
+      fireEvent.click(anchor);
+    });
+    portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeTruthy();
+    const menuItem = await menu.queryByText('Baz');
+    act(() => {
+      fireEvent.click(menuItem);
+    }); // portal is closed after click
+
+    expect((_portalRoot2 = portalRoot) === null || _portalRoot2 === void 0 ? void 0 : _portalRoot2.textContent).toEqual(''); // menu items are hidden
+  });
+  it('option should be selected when chosen from the dropdown menu', async () => {
+    const menu = HTMLRender( /*#__PURE__*/React.createElement(SimpleDropdownMenu, null));
+    let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeNull();
+    const anchor = await menu.findByText('Select an Option');
+    act(() => {
+      fireEvent.click(anchor);
+    });
+    portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeTruthy();
+    const menuItem = await menu.queryByText('Baz');
+    act(() => {
+      fireEvent.click(menuItem);
+    });
+    expect(anchor.textContent).toEqual('Baz');
+  });
+  it('should dismiss the overlay on clicking outside overlay', async () => {
+    var _portalRoot3;
+
+    const menu = HTMLRender( /*#__PURE__*/React.createElement(SimpleDropdownMenu, null));
+    let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeNull();
+    const anchor = await menu.findByText('Select an Option');
+    act(() => {
+      fireEvent.click(anchor);
+    });
+    portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeTruthy();
+    const somethingElse = await menu.baseElement.querySelector('#something-else');
+    act(() => {
+      fireEvent.mouseDown(somethingElse);
+    }); // portal is closed after click
+
+    expect((_portalRoot3 = portalRoot) === null || _portalRoot3 === void 0 ? void 0 : _portalRoot3.textContent).toEqual(''); // menu items are hidden
+  });
+});

package/lib-esm/__tests__/FilterList.test.d.ts

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

package/lib-esm/__tests__/FilterList.test.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { FilterList } from '..';
+import { render, behavesAsComponent, checkExports } from '../utils/testing';
+import { render as HTMLRender, cleanup } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import 'babel-polyfill';
+expect.extend(toHaveNoViolations);
+describe('FilterList', () => {
+  behavesAsComponent({
+    Component: FilterList
+  });
+  checkExports('FilterList', {
+    default: FilterList
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(FilterList, null, "Hello"));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('renders a <ul>', () => {
+    expect(render( /*#__PURE__*/React.createElement(FilterList, null)).type).toEqual('ul');
+  });
+});

package/lib-esm/__tests__/FilterList.types.test.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldNotAcceptSystemProps(): JSX.Element;

package/lib-esm/__tests__/FilterList.types.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import FilterList from '../FilterList';
+export function shouldAcceptCallWithNoProps() {
+  return /*#__PURE__*/React.createElement(FilterList, null);
+}
+shouldAcceptCallWithNoProps.displayName = "shouldAcceptCallWithNoProps";
+export function shouldNotAcceptSystemProps() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FilterList, {
+    backgroundColor: "thistle"
+  }), /*#__PURE__*/React.createElement(FilterList.Item, {
+    backgroundColor: "thistle"
+  }));
+}

package/lib-esm/__tests__/FilterListItem.test.d.ts

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

package/lib-esm/__tests__/FilterListItem.test.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { FilterList } from '..';
+import { render, behavesAsComponent } from '../utils/testing';
+import { render as HTMLRender, cleanup } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import 'babel-polyfill';
+expect.extend(toHaveNoViolations);
+describe('FilterList.Item', () => {
+  behavesAsComponent({
+    Component: FilterList.Item
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(FilterList.Item, null, "stuff"));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('renders an <a> by default', () => {
+    expect(render( /*#__PURE__*/React.createElement(FilterList.Item, null)).type).toEqual('a');
+  });
+  it('respects the "selected" prop', () => {
+    expect(render( /*#__PURE__*/React.createElement(FilterList.Item, {
+      selected: true
+    }))).toMatchSnapshot();
+  });
+  it('respects "count" prop', () => {
+    const {
+      getByText
+    } = HTMLRender( /*#__PURE__*/React.createElement(FilterList.Item, {
+      count: 400
+    }));
+    expect(getByText('400')).toBeTruthy();
+  });
+});

package/lib-esm/__tests__/FilteredSearch.test.d.ts

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

package/lib-esm/__tests__/FilteredSearch.test.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { FilteredSearch } from '..';
+import { render, behavesAsComponent, checkExports } from '../utils/testing';
+import { render as HTMLRender, cleanup } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import 'babel-polyfill';
+expect.extend(toHaveNoViolations);
+describe('FilteredSearch', () => {
+  behavesAsComponent({
+    Component: FilteredSearch
+  });
+  checkExports('FilteredSearch', {
+    default: FilteredSearch
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(FilteredSearch, null, "Hello"));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('renders a <div>', () => {
+    expect(render( /*#__PURE__*/React.createElement(FilteredSearch, null)).type).toEqual('div');
+  });
+});

package/lib-esm/__tests__/FilteredSearch.types.test.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldNotAcceptSystemProps(): JSX.Element;

package/lib-esm/__tests__/FilteredSearch.types.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import FilteredSearch from '../FilteredSearch';
+export function shouldAcceptCallWithNoProps() {
+  return /*#__PURE__*/React.createElement(FilteredSearch, null);
+}
+shouldAcceptCallWithNoProps.displayName = "shouldAcceptCallWithNoProps";
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return /*#__PURE__*/React.createElement(FilteredSearch, {
+    backgroundColor: "rosybrown"
+  });
+}
+shouldNotAcceptSystemProps.displayName = "shouldNotAcceptSystemProps";

package/lib-esm/__tests__/Flash.test.d.ts

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

package/lib-esm/__tests__/Flash.test.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Flash } from '..';
+import theme from '../theme';
+import { render, behavesAsComponent, checkExports } from '../utils/testing';
+import { render as HTMLRender, cleanup } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import 'babel-polyfill';
+expect.extend(toHaveNoViolations);
+describe('Flash', () => {
+  behavesAsComponent({
+    Component: Flash
+  });
+  checkExports('Flash', {
+    default: Flash
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(Flash, {
+      variant: "warning"
+    }));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('respects the "full" prop', () => {
+    expect(render( /*#__PURE__*/React.createElement(Flash, {
+      full: true
+    }))).toHaveStyleRule('margin-top', '-1px');
+    expect(render( /*#__PURE__*/React.createElement(Flash, {
+      full: true
+    }))).toHaveStyleRule('border-radius', '0');
+    expect(render( /*#__PURE__*/React.createElement(Flash, {
+      full: true
+    }))).toHaveStyleRule('border-width', '1px 0px');
+  });
+  it('respects the "variant" prop', () => {
+    var _theme$colorSchemes$l, _theme$colorSchemes$l2, _theme$colorSchemes$l3, _theme$colorSchemes$l4;
+
+    expect(render( /*#__PURE__*/React.createElement(Flash, {
+      variant: "warning"
+    }))).toHaveStyleRule('background-color', (_theme$colorSchemes$l = theme.colorSchemes.light.colors.attention) === null || _theme$colorSchemes$l === void 0 ? void 0 : _theme$colorSchemes$l.subtle);
+    expect(render( /*#__PURE__*/React.createElement(Flash, {
+      variant: "danger"
+    }))).toHaveStyleRule('background-color', (_theme$colorSchemes$l2 = theme.colorSchemes.light.colors.danger) === null || _theme$colorSchemes$l2 === void 0 ? void 0 : _theme$colorSchemes$l2.subtle);
+    expect(render( /*#__PURE__*/React.createElement(Flash, {
+      variant: "success"
+    }))).toHaveStyleRule('background-color', (_theme$colorSchemes$l3 = theme.colorSchemes.light.colors.success) === null || _theme$colorSchemes$l3 === void 0 ? void 0 : _theme$colorSchemes$l3.subtle);
+    expect(render( /*#__PURE__*/React.createElement(Flash, null))).toHaveStyleRule('background-color', (_theme$colorSchemes$l4 = theme.colorSchemes.light.colors.accent) === null || _theme$colorSchemes$l4 === void 0 ? void 0 : _theme$colorSchemes$l4.subtle);
+  });
+});

package/lib-esm/__tests__/Flash.types.test.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldNotAcceptSystemProps(): JSX.Element;

package/lib-esm/__tests__/Flash.types.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Flash from '../Flash';
+export function shouldAcceptCallWithNoProps() {
+  return /*#__PURE__*/React.createElement(Flash, null);
+}
+shouldAcceptCallWithNoProps.displayName = "shouldAcceptCallWithNoProps";
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return /*#__PURE__*/React.createElement(Flash, {
+    backgroundColor: "thistle"
+  });
+}
+shouldNotAcceptSystemProps.displayName = "shouldNotAcceptSystemProps";

package/lib-esm/__tests__/Flex.test.d.ts

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