@pingux/astro 1.27.0-alpha.24 → 1.27.0-alpha.26

package/lib/cjs/components/TabPicker/TabPicker.js

@@ -0,0 +1,257 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
+
+var _findIndex = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find-index"));
+
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _some = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/some"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _collections = require("@react-stately/collections");
+
+var _ArrowDropUpIcon = _interopRequireDefault(require("mdi-react/ArrowDropUpIcon"));
+
+var _ArrowDropDownIcon = _interopRequireDefault(require("mdi-react/ArrowDropDownIcon"));
+
+var _interactions = require("@react-aria/interactions");
+
+var _hooks = require("../../hooks");
+
+var _ = require("../..");
+
+var _Tab = require("../Tab");
+
+var _react2 = require("@emotion/react");
+
+var _excluded = ["className", "items", "state", "item"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/* istanbul ignore next */
+var TabPicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var className = _ref.className,
+      items = _ref.items,
+      state = _ref.state,
+      item = _ref.item,
+      others = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(state.selectedKey),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      selectedItem = _useState4[0],
+      setSelectedItem = _useState4[1];
+
+  var selectionManager = state.selectionManager;
+
+  var _useState5 = (0, _react.useState)(selectionManager.focusedKey),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      focusedItem = _useState6[0],
+      setFocusedItem = _useState6[1];
+
+  var isTabFocused = selectionManager.focusedKey === item.key;
+  var isTabSelected = state.selectedKey === item.key;
+  var isListItemFocused = (0, _some["default"])(items).call(items, function (el) {
+    return el.key === selectionManager.focusedKey;
+  });
+  var isListItemSelected = (0, _some["default"])(items).call(items, function (el) {
+    return el.key === state.selectedKey;
+  });
+
+  var _useMemo = (0, _react.useMemo)(function () {
+    var _context, _tabs$prevIndex, _tabs$nextIndex;
+
+    var tabs = (0, _filter["default"])(_context = (0, _from["default"])(state.collection)).call(_context, function (tab) {
+      var _tab$value;
+
+      return !(tab !== null && tab !== void 0 && (_tab$value = tab.value) !== null && _tab$value !== void 0 && _tab$value.isListItem);
+    });
+    var prevIndex = (0, _findIndex["default"])(tabs).call(tabs, function (tab) {
+      return tab.key === item.key;
+    }) - 1;
+    var nextIndex = (0, _findIndex["default"])(tabs).call(tabs, function (tab) {
+      return tab.key === item.key;
+    }) + 1;
+    return {
+      prevKey: ((_tabs$prevIndex = tabs[prevIndex]) === null || _tabs$prevIndex === void 0 ? void 0 : _tabs$prevIndex.key) || tabs[tabs.length].key,
+      nextKey: ((_tabs$nextIndex = tabs[nextIndex]) === null || _tabs$nextIndex === void 0 ? void 0 : _tabs$nextIndex.key) || tabs[0].key
+    };
+  }, []),
+      prevKey = _useMemo.prevKey,
+      nextKey = _useMemo.nextKey;
+
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
+    isSelected: isListItemSelected
+  }),
+      classNames = _useStatusClasses.classNames;
+
+  var menuRef = (0, _react.useRef)();
+
+  var handleSelectedItem = function handleSelectedItem(currentItem) {
+    state.setSelectedKey(currentItem);
+    setFocusedItem(currentItem);
+  };
+
+  (0, _react.useEffect)(function () {
+    if (selectedItem) {
+      handleSelectedItem(selectedItem);
+    }
+  }, [selectedItem]);
+  (0, _react.useEffect)(function () {
+    if (focusedItem) {
+      selectionManager.setFocusedKey(focusedItem);
+    }
+  }, [focusedItem]);
+  (0, _react.useEffect)(function () {
+    if (isOpen && (isTabFocused || isListItemSelected) && menuRef.current) {
+      if (focusedItem) {
+        var _context2;
+
+        (0, _find["default"])(_context2 = (0, _from["default"])(menuRef.current.children)).call(_context2, function (el) {
+          return el.dataset.key === focusedItem;
+        }).focus();
+      } else {
+        menuRef.current.firstChild.focus();
+      }
+    }
+
+    if (!isOpen && isTabSelected && !selectedItem) {
+      setSelectedItem(selectionManager.focusedKey);
+    }
+  }, [isOpen]);
+  (0, _react.useEffect)(function () {
+    if (isOpen && isListItemFocused) {
+      setFocusedItem(selectionManager.focusedKey);
+    } else if (!isOpen && isListItemFocused) {
+      selectionManager.setFocusedKey(item.key);
+    }
+  }, [selectionManager.focusedKey]);
+  (0, _react.useEffect)(function () {
+    if (isTabSelected || isTabFocused) {
+      if (selectedItem) {
+        handleSelectedItem(selectedItem);
+      } else if (isListItemSelected && !selectedItem) {
+        setSelectedItem(state.selectedKey);
+      } else {
+        setFocusedItem(items[0].key);
+      }
+    } else if (!isListItemSelected && !isListItemFocused) {
+      setIsOpen(false);
+      setSelectedItem(null);
+      setFocusedItem(null);
+    }
+  }, [isTabSelected, isListItemSelected]);
+
+  var handleKeyNavigation = function handleKeyNavigation(e) {
+    switch (e.key) {
+      case 'ArrowRight':
+        {
+          selectionManager.setFocusedKey(nextKey);
+          break;
+        }
+
+      case 'ArrowLeft':
+        {
+          selectionManager.setFocusedKey(prevKey);
+          break;
+        }
+
+      default:
+        break;
+    }
+  };
+
+  var tabProps = others;
+  delete tabProps.onPointerDown;
+  delete tabProps.onKeyDown;
+  return (0, _react2.jsx)(_.PopoverMenu, {
+    onOpenChange: setIsOpen,
+    isOpen: isOpen,
+    isContainFocus: true
+  }, (0, _react2.jsx)(_interactions.Pressable, null, (0, _react2.jsx)(_.Box, {
+    isRow: true,
+    alignItems: "center",
+    className: classNames,
+    variant: "menuTab",
+    onKeyDown: handleKeyNavigation,
+    role: "tablist"
+  }, (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    className: classNames,
+    variant: "tab",
+    ref: ref
+  }, tabProps), (0, _react2.jsx)(_.Text, {
+    variant: "tabLabel"
+  }, item.props.name), selectedItem && (0, _react2.jsx)(_Tab.TabLine, null)), (0, _react2.jsx)(_.Icon, {
+    color: isTabFocused || (0, _includes["default"])(classNames).call(classNames, 'is-hovered') ? 'active' : 'neutral.40',
+    icon: isOpen ? _ArrowDropUpIcon["default"] : _ArrowDropDownIcon["default"]
+  }))), (0, _react2.jsx)(_.Menu, {
+    onAction: setSelectedItem,
+    selectionMode: "single",
+    selectedKeys: [selectionManager.focusedKey],
+    ref: menuRef
+  }, (0, _map["default"])(items).call(items, function (tab) {
+    return (0, _react2.jsx)(_collections.Item, {
+      key: tab.key
+    }, tab.name);
+  })));
+});
+TabPicker.propTypes = {
+  item: _propTypes["default"].shape({
+    key: _propTypes["default"].string,
+    props: _propTypes["default"].shape({
+      name: _propTypes["default"].string
+    })
+  }),
+  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    key: _propTypes["default"].string
+  })),
+  state: _propTypes["default"].shape({
+    collection: _propTypes["default"].shape({}),
+    selectedKey: _propTypes["default"].string,
+    setSelectedKey: _propTypes["default"].func,
+    selectionManager: _propTypes["default"].shape({
+      focusedKey: _propTypes["default"].string,
+      setFocusedKey: _propTypes["default"].func
+    })
+  })
+};
+var _default = TabPicker;
+exports["default"] = _default;

package/lib/cjs/components/TabPicker/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _TabPicker["default"];
+  }
+});
+
+var _TabPicker = _interopRequireDefault(require("./TabPicker"));

package/lib/cjs/components/Table/Table.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _react2 = require("@emotion/react");
+
+var _excluded = ["children"];
+
+/**
+ * Basic Table parent component.
+ *
+ * Renders an HTML `<table>`
+ *
+ * Accepts the `<TableBody>` component and/or the `<TableHead>` as children.
+ *
+ */
+var Table = function Table(props) {
+  var children = props.children,
+      others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    as: "table",
+    variant: "table.table"
+  }, others), children);
+};
+
+var _default = Table;
+exports["default"] = _default;

package/lib/cjs/components/Table/Table.stories.js

@@ -0,0 +1,102 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.Default = void 0;
+
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Table = _interopRequireDefault(require("./Table"));
+
+var _TableBody = _interopRequireDefault(require("../TableBody"));
+
+var _TableRow = _interopRequireDefault(require("../TableRow"));
+
+var _TableCell = _interopRequireDefault(require("../TableCell"));
+
+var _TableHead = _interopRequireDefault(require("../TableHead"));
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'Table',
+  component: _Table["default"]
+};
+exports["default"] = _default;
+var headers = ['Country', 'Population', 'Continent'];
+var objects = [{
+  country: 'USA',
+  population: '320,000,000',
+  continent: 'North America'
+}, {
+  country: 'Canada',
+  population: '37,000,000',
+  continent: 'North America'
+}, {
+  country: 'China',
+  population: '1,398,000,000',
+  continent: 'Asia'
+}, {
+  country: 'France',
+  population: '67,000,000',
+  continent: 'Europe'
+}];
+
+var Default = function Default() {
+  // const headers = [
+  //   'Country', 'Population', 'Continent',
+  // ];
+  //
+  // const objects = [
+  //   {
+  //     country: 'USA',
+  //     population: '320,000,000',
+  //     continent: 'North America',
+  //   },
+  //   {
+  //     country: 'Canada',
+  //     population: '37,000,000',
+  //     continent: 'North America',
+  //   },
+  //   {
+  //     country: 'China',
+  //     population: '1,398,000,000',
+  //     continent: 'Asia',
+  //   },
+  //   {
+  //     country: 'France',
+  //     population: '67,000,000',
+  //     continent: 'Europe',
+  //   },
+  // ];
+  return (0, _react2.jsx)(_Table["default"], null, (0, _react2.jsx)(_TableHead["default"], null, (0, _react2.jsx)(_TableRow["default"], {
+    key: "head"
+  }, (0, _map["default"])(headers).call(headers, function (head) {
+    return (0, _react2.jsx)(_TableCell["default"], {
+      isHeading: true,
+      key: head
+    }, head);
+  }))), (0, _react2.jsx)(_TableBody["default"], null, (0, _map["default"])(objects).call(objects, function (object) {
+    var _context;
+
+    return (0, _react2.jsx)(_TableRow["default"], {
+      key: object.country
+    }, (0, _map["default"])(_context = (0, _values["default"])(object)).call(_context, function (value) {
+      return (0, _react2.jsx)(_TableCell["default"], {
+        key: value
+      }, value);
+    }));
+  })));
+};
+
+exports.Default = Default;

package/lib/cjs/components/Table/Table.test.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Table = _interopRequireDefault(require("./Table"));
+
+var _TableBody = _interopRequireDefault(require("../TableBody"));
+
+var _TableRow = _interopRequireDefault(require("../TableRow"));
+
+var _TableCell = _interopRequireDefault(require("../TableCell"));
+
+var _TableHead = _interopRequireDefault(require("../TableHead"));
+
+var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
+
+var _react3 = require("@emotion/react");
+
+var testId = 'test-table';
+var defaultProps = {
+  'data-testid': testId
+};
+var headers = ['Country', 'Population', 'Continent'];
+var objects = [{
+  country: 'USA',
+  population: '320,000,000',
+  continent: 'North America'
+}, {
+  country: 'Canada',
+  population: '37,000,000',
+  continent: 'North America'
+}, {
+  country: 'China',
+  population: '1,398,000,000',
+  continent: 'Asia'
+}, {
+  country: 'France',
+  population: '67,000,000',
+  continent: 'Europe'
+}];
+
+var getComponent = function getComponent() {
+  return (0, _react2.render)((0, _react3.jsx)(_Table["default"], defaultProps, (0, _react3.jsx)(_TableHead["default"], null, (0, _react3.jsx)(_TableRow["default"], {
+    key: "head"
+  }, (0, _map["default"])(headers).call(headers, function (head) {
+    return (0, _react3.jsx)(_TableCell["default"], {
+      isHeading: true,
+      key: head
+    }, head);
+  }))), (0, _react3.jsx)(_TableBody["default"], null, (0, _map["default"])(objects).call(objects, function (object) {
+    var _context;
+
+    return (0, _react3.jsx)(_TableRow["default"], {
+      key: object.country
+    }, (0, _map["default"])(_context = (0, _values["default"])(object)).call(_context, function (value) {
+      return (0, _react3.jsx)(_TableCell["default"], {
+        key: value
+      }, value);
+    }));
+  }))));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+(0, _testAxe["default"])(getComponent);
+test('default table', function () {
+  getComponent();
+
+  var table = _react2.screen.getByTestId(testId);
+
+  expect(table).toBeInstanceOf(HTMLTableElement);
+  expect(table).toBeInTheDocument();
+});

package/lib/cjs/components/Table/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Table["default"];
+  }
+});
+
+var _Table = _interopRequireDefault(require("./Table"));

package/lib/cjs/components/TableBody/TableBody.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _react2 = require("@emotion/react");
+
+var _excluded = ["children"];
+
+/**
+ * Basic TableBody component.
+ *
+ * Renders HTML `<tbody>`
+ *
+ * Needs to be a child of the `<Table>` component. Accepts `<TableRow>` as children.
+ *
+ */
+var TableBody = function TableBody(props) {
+  var children = props.children,
+      others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    variant: "table.tableBody",
+    as: "tbody"
+  }, others), children);
+};
+
+var _default = TableBody;
+exports["default"] = _default;

package/lib/cjs/components/TableBody/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _TableBody["default"];
+  }
+});
+
+var _TableBody = _interopRequireDefault(require("./TableBody"));

package/lib/cjs/components/TableCell/TableCell.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _react2 = require("@emotion/react");
+
+var _excluded = ["children", "isHeading"];
+
+/**
+ * TableCell component.
+ *
+ * Renders either an `<th>` or a `<td>` HTML element, depending on the isHeading prop.
+ *
+ * Accepts text as children, and needs to have a `<TableRow>` as a parent.
+ *
+ */
+var TableCell = function TableCell(props) {
+  var children = props.children,
+      isHeading = props.isHeading,
+      others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    variant: isHeading ? 'table.tableHead' : 'table.tableData',
+    as: isHeading ? 'th' : 'td'
+  }, others), children);
+};
+
+TableCell.propTypes = {
+  /** Determines whether or not the html rendered is a th or td element. */
+  isHeading: _propTypes["default"].bool
+};
+var _default = TableCell;
+exports["default"] = _default;

package/lib/cjs/components/TableCell/TableCell.test.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _TableCell = _interopRequireDefault(require("./TableCell"));
+
+var _Table = _interopRequireDefault(require("../Table"));
+
+var _TableBody = _interopRequireDefault(require("../TableBody"));
+
+var _TableRow = _interopRequireDefault(require("../TableRow"));
+
+var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
+
+var _react3 = require("@emotion/react");
+
+var testId = 'test-cell';
+var defaultProps = {
+  'data-testid': testId
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _react2.render)((0, _react3.jsx)(_Table["default"], null, (0, _react3.jsx)(_TableBody["default"], null, (0, _react3.jsx)(_TableRow["default"], null, (0, _react3.jsx)(_TableCell["default"], (0, _extends2["default"])({}, props, defaultProps), "Here is text.")))));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+(0, _testAxe["default"])(getComponent);
+test('isHeading = true', function () {
+  var props = {
+    isHeading: true
+  };
+  getComponent(props);
+
+  var header = _react2.screen.getByRole('columnheader');
+
+  expect(header).toBeInTheDocument();
+});
+test('isHeading = false', function () {
+  var props = {
+    isHeading: false
+  };
+  getComponent(props);
+
+  var cell = _react2.screen.getByRole('cell');
+
+  expect(cell).toBeInTheDocument();
+});