@primer/components 31.0.0 → 31.0.2-rc.c7dafefb

package/lib/__tests__/Dropdown.test.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _testing = require("../utils/testing");
+
+var _react2 = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+require("babel-polyfill");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+expect.extend(_jestAxe.toHaveNoViolations);
+describe('Dropdown', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _.Dropdown,
+    toRender: () => /*#__PURE__*/_react.default.createElement(_.Dropdown, null, "Hello!")
+  });
+  (0, _testing.checkExports)('Dropdown', {
+    default: _.Dropdown
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Dropdown, null));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react2.cleanup)();
+  });
+});
+describe('Dropdown.Item', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _.Dropdown.Item,
+    toRender: () => /*#__PURE__*/_react.default.createElement(_.Dropdown.Item, null, "Hello!")
+  });
+});
+describe('Dropdown.Button', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _.Dropdown.Button,
+    toRender: () => /*#__PURE__*/_react.default.createElement(_.Dropdown.Button, null, "Hello!")
+  });
+});
+describe('Dropdown.Caret', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _.Dropdown.Caret
+  });
+});
+describe('Dropdown.Menu', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _.Dropdown.Menu,
+    toRender: () => /*#__PURE__*/_react.default.createElement(_.Dropdown.Menu, null, /*#__PURE__*/_react.default.createElement("li", {
+      key: "a"
+    }, "1"), /*#__PURE__*/_react.default.createElement("li", {
+      key: "b"
+    }, "2"), /*#__PURE__*/_react.default.createElement("li", {
+      key: "c"
+    }, "3"))
+  });
+});

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

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

package/lib/__tests__/DropdownMenu.test.js

@@ -0,0 +1,150 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+require("babel-polyfill");
+
+var _jestAxe = require("jest-axe");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _theme = _interopRequireDefault(require("../theme"));
+
+var _DropdownMenu = require("../DropdownMenu");
+
+var _testing = require("../utils/testing");
+
+var _ = require("..");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+expect.extend(_jestAxe.toHaveNoViolations);
+const items = [{
+  text: 'Foo'
+}, {
+  text: 'Bar'
+}, {
+  text: 'Baz'
+}, {
+  text: 'Bon'
+}];
+
+function SimpleDropdownMenu() {
+  const [selectedItem, setSelectedItem] = _react2.default.useState();
+
+  return /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+    theme: _theme.default
+  }, /*#__PURE__*/_react2.default.createElement(_.SSRProvider, null, /*#__PURE__*/_react2.default.createElement(_.BaseStyles, null, /*#__PURE__*/_react2.default.createElement("div", {
+    id: "something-else"
+  }, "X"), /*#__PURE__*/_react2.default.createElement(_DropdownMenu.DropdownMenu, {
+    items: items,
+    placeholder: "Select an Option",
+    selectedItem: selectedItem,
+    onChange: setSelectedItem
+  }), /*#__PURE__*/_react2.default.createElement("div", {
+    id: "portal-root"
+  }))));
+}
+
+SimpleDropdownMenu.displayName = "SimpleDropdownMenu";
+describe('DropdownMenu', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  (0, _testing.behavesAsComponent)({
+    Component: _DropdownMenu.DropdownMenu,
+    options: {
+      skipAs: true,
+      skipSx: true
+    },
+    toRender: () => /*#__PURE__*/_react2.default.createElement(_.SSRProvider, null, /*#__PURE__*/_react2.default.createElement(_DropdownMenu.DropdownMenu, {
+      items: []
+    }))
+  });
+  (0, _testing.checkExports)('DropdownMenu', {
+    default: undefined,
+    DropdownMenu: _DropdownMenu.DropdownMenu,
+    DropdownButton: _DropdownMenu.DropdownButton
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(SimpleDropdownMenu, null));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react.cleanup)();
+  });
+  it('should trigger the overlay on trigger click', async () => {
+    var _portalRoot, _portalRoot$textConte;
+
+    const menu = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(SimpleDropdownMenu, null));
+    let portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeNull();
+    const anchor = await menu.findByText('Select an Option');
+    (0, _react.act)(() => {
+      _react.fireEvent.click(anchor);
+    });
+    portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeTruthy();
+    const itemText = items.map(i => {
+      if (i.hasOwnProperty('text')) {
+        return i.text;
+      }
+    }).join('');
+    expect((_portalRoot = portalRoot) === null || _portalRoot === void 0 ? void 0 : (_portalRoot$textConte = _portalRoot.textContent) === null || _portalRoot$textConte === void 0 ? void 0 : _portalRoot$textConte.trim()).toEqual(itemText);
+  });
+  it('should dismiss the overlay on dropdown item click', async () => {
+    var _portalRoot2;
+
+    const menu = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(SimpleDropdownMenu, null));
+    let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeNull();
+    const anchor = await menu.findByText('Select an Option');
+    (0, _react.act)(() => {
+      _react.fireEvent.click(anchor);
+    });
+    portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeTruthy();
+    const menuItem = await menu.queryByText('Baz');
+    (0, _react.act)(() => {
+      _react.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 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(SimpleDropdownMenu, null));
+    let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeNull();
+    const anchor = await menu.findByText('Select an Option');
+    (0, _react.act)(() => {
+      _react.fireEvent.click(anchor);
+    });
+    portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeTruthy();
+    const menuItem = await menu.queryByText('Baz');
+    (0, _react.act)(() => {
+      _react.fireEvent.click(menuItem);
+    });
+    expect(anchor.textContent).toEqual('Baz');
+  });
+  it('should dismiss the overlay on clicking outside overlay', async () => {
+    var _portalRoot3;
+
+    const menu = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(SimpleDropdownMenu, null));
+    let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeNull();
+    const anchor = await menu.findByText('Select an Option');
+    (0, _react.act)(() => {
+      _react.fireEvent.click(anchor);
+    });
+    portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeTruthy();
+    const somethingElse = await menu.baseElement.querySelector('#something-else');
+    (0, _react.act)(() => {
+      _react.fireEvent.mouseDown(somethingElse);
+    }); // portal is closed after click
+
+    expect((_portalRoot3 = portalRoot) === null || _portalRoot3 === void 0 ? void 0 : _portalRoot3.textContent).toEqual(''); // menu items are hidden
+  });
+});

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

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

package/lib/__tests__/FilterList.test.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _testing = require("../utils/testing");
+
+var _react2 = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+require("babel-polyfill");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+expect.extend(_jestAxe.toHaveNoViolations);
+describe('FilterList', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _.FilterList
+  });
+  (0, _testing.checkExports)('FilterList', {
+    default: _.FilterList
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.FilterList, null, "Hello"));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react2.cleanup)();
+  });
+  it('renders a <ul>', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.FilterList, null)).type).toEqual('ul');
+  });
+});

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

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

package/lib/__tests__/FilterListItem.test.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _testing = require("../utils/testing");
+
+var _react2 = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+require("babel-polyfill");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+expect.extend(_jestAxe.toHaveNoViolations);
+describe('FilterList.Item', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _.FilterList.Item
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.FilterList.Item, null, "stuff"));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react2.cleanup)();
+  });
+  it('renders an <a> by default', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.FilterList.Item, null)).type).toEqual('a');
+  });
+  it('respects the "selected" prop', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.FilterList.Item, {
+      selected: true
+    }))).toMatchSnapshot();
+  });
+  it('respects "count" prop', () => {
+    const {
+      getByText
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.FilterList.Item, {
+      count: 400
+    }));
+    expect(getByText('400')).toBeTruthy();
+  });
+});

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

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

package/lib/__tests__/FilteredSearch.test.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _testing = require("../utils/testing");
+
+var _react2 = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+require("babel-polyfill");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+expect.extend(_jestAxe.toHaveNoViolations);
+describe('FilteredSearch', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _.FilteredSearch
+  });
+  (0, _testing.checkExports)('FilteredSearch', {
+    default: _.FilteredSearch
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.FilteredSearch, null, "Hello"));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react2.cleanup)();
+  });
+  it('renders a <div>', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.FilteredSearch, null)).type).toEqual('div');
+  });
+});

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

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

package/lib/__tests__/Flash.test.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _theme = _interopRequireDefault(require("../theme"));
+
+var _testing = require("../utils/testing");
+
+var _react2 = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+require("babel-polyfill");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+expect.extend(_jestAxe.toHaveNoViolations);
+describe('Flash', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _.Flash
+  });
+  (0, _testing.checkExports)('Flash', {
+    default: _.Flash
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Flash, {
+      variant: "warning"
+    }));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react2.cleanup)();
+  });
+  it('respects the "full" prop', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Flash, {
+      full: true
+    }))).toHaveStyleRule('margin-top', '-1px');
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Flash, {
+      full: true
+    }))).toHaveStyleRule('border-radius', '0');
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.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((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Flash, {
+      variant: "warning"
+    }))).toHaveStyleRule('background-color', (_theme$colorSchemes$l = _theme.default.colorSchemes.light.colors.attention) === null || _theme$colorSchemes$l === void 0 ? void 0 : _theme$colorSchemes$l.subtle);
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Flash, {
+      variant: "danger"
+    }))).toHaveStyleRule('background-color', (_theme$colorSchemes$l2 = _theme.default.colorSchemes.light.colors.danger) === null || _theme$colorSchemes$l2 === void 0 ? void 0 : _theme$colorSchemes$l2.subtle);
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Flash, {
+      variant: "success"
+    }))).toHaveStyleRule('background-color', (_theme$colorSchemes$l3 = _theme.default.colorSchemes.light.colors.success) === null || _theme$colorSchemes$l3 === void 0 ? void 0 : _theme$colorSchemes$l3.subtle);
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Flash, null))).toHaveStyleRule('background-color', (_theme$colorSchemes$l4 = _theme.default.colorSchemes.light.colors.accent) === null || _theme$colorSchemes$l4 === void 0 ? void 0 : _theme$colorSchemes$l4.subtle);
+  });
+});

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

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

package/lib/__tests__/Flex.test.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _testing = require("../utils/testing");
+
+var _react2 = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+require("babel-polyfill");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+expect.extend(_jestAxe.toHaveNoViolations);
+describe('Flex', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _.Flex
+  });
+  (0, _testing.checkExports)('Flex', {
+    default: _.Flex
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Flex, null));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react2.cleanup)();
+  });
+  it('gets display: flex by default', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Flex, null))).toHaveStyleRule('display', 'flex');
+  });
+  it('respects flexWrap', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Flex, {
+      flexWrap: "nowrap"
+    }))).toMatchSnapshot();
+  });
+  it('respects flexDirection', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Flex, {
+      flexDirection: "row"
+    }))).toMatchSnapshot();
+  });
+  it('respects justifyContent', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Flex, {
+      justifyContent: "start"
+    }))).toMatchSnapshot();
+  });
+  it('respects alignItems', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Flex, {
+      alignItems: "start"
+    }))).toMatchSnapshot();
+  });
+  it('respects alignContent', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Flex, {
+      alignContent: "start"
+    }))).toMatchSnapshot();
+  });
+  it('respects display', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Flex, {
+      display: "inline-flex"
+    }))).toHaveStyleRule('display', 'inline-flex');
+  });
+  it('respects responsive display', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Flex, {
+      display: ['flex', 'inline-flex']
+    }))).toMatchSnapshot();
+  });
+  it('renders a div by default', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Flex, null)).type).toEqual('div');
+  });
+});

package/lib/__tests__/FormGroup.test.d.ts

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

package/lib/__tests__/FormGroup.test.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _testing = require("../utils/testing");
+
+var _react2 = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+require("babel-polyfill");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+expect.extend(_jestAxe.toHaveNoViolations);
+describe('FormGroup', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _.FormGroup
+  });
+  (0, _testing.checkExports)('FormGroup', {
+    default: _.FormGroup
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.FormGroup, null, /*#__PURE__*/_react.default.createElement(_.FormGroup.Label, {
+      htmlFor: "example-text"
+    }, "Example text"), /*#__PURE__*/_react.default.createElement("input", {
+      id: "example-text",
+      value: "Example Value",
+      readOnly: true
+    })));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react2.cleanup)();
+  });
+});
+describe('FormGroup.Label', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _.FormGroup.Label
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.FormGroup.Label, {
+      htmlFor: "example-text"
+    }, "Example text"));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react2.cleanup)();
+  });
+});

package/lib/__tests__/Grid.test.d.ts

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

package/lib/__tests__/Grid.test.js

@@ -0,0 +1,104 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _testing = require("../utils/testing");
+
+var _react2 = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+require("babel-polyfill");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+expect.extend(_jestAxe.toHaveNoViolations);
+describe('Grid', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _.Grid
+  });
+  (0, _testing.checkExports)('Grid', {
+    default: _.Grid
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Grid, null));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react2.cleanup)();
+  });
+  it('gets display: grid by default', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Grid, null))).toHaveStyleRule('display', 'grid');
+  });
+  it('respects gridGap', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Grid, {
+      gridGap: 1
+    }))).toMatchSnapshot();
+  });
+  it('respects gridColumnGap', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Grid, {
+      gridColumnGap: 2
+    }))).toMatchSnapshot();
+  });
+  it('respects gridRowGap', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Grid, {
+      gridRowGap: 2
+    }))).toMatchSnapshot();
+  });
+  it('respects gridColumn', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Grid, {
+      gridColumn: "1 / 2"
+    }))).toMatchSnapshot();
+  });
+  it('respects gridRow', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Grid, {
+      gridRow: "1 / 2"
+    }))).toMatchSnapshot();
+  });
+  it('respects gridArea', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Grid, {
+      gridArea: "sidebar"
+    }))).toMatchSnapshot();
+  });
+  it('respects gridAutoFlow', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Grid, {
+      gridAutoFlow: "row"
+    }))).toMatchSnapshot();
+  });
+  it('respects gridAutoRows', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Grid, {
+      gridAutoRows: "1fr"
+    }))).toMatchSnapshot();
+  });
+  it('respects gridAutoColumns', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Grid, {
+      gridAutoColumns: "1fr"
+    }))).toMatchSnapshot();
+  });
+  it('respects gridTemplateColumns', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Grid, {
+      gridTemplateColumns: "200px 1fr"
+    }))).toMatchSnapshot();
+  });
+  it('respects gridTemplateRows', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Grid, {
+      gridTemplateRows: " 200px 1fr"
+    }))).toMatchSnapshot();
+  });
+  it('respects gridTemplateAreas', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Grid, {
+      gridTemplateAreas: "sidebar  main"
+    }))).toMatchSnapshot();
+  });
+  it('respects responsive display', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Grid, {
+      display: ['grid', 'inline-grid']
+    }))).toMatchSnapshot();
+  });
+  it('renders a div by default', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Grid, null)).type).toEqual('div');
+  });
+});

package/lib/__tests__/Header.test.d.ts

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