@pingux/astro 2.129.0 → 2.130.0-alpha.2

package/lib/cjs/components/TableBase/TableBase.styles.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _Text = require("../Text/Text.styles");
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var defaultFocus = {
+  outline: '1px',
+  outlineStyle: 'solid',
+  outlineColor: 'focus',
+  outlineOffset: '-1px'
+};
+var container = {
+  width: '100%',
+  borderSpacing: '0',
+  borderCollapse: 'collapse'
+};
+var caption = {
+  fontFamily: 'standard',
+  fontSize: 'lg',
+  fontWeight: '2',
+  p: 'sm',
+  textAlign: 'left'
+};
+var thead = {};
+var head = _objectSpread(_objectSpread({}, _Text.text.label), {}, {
+  fontWeight: 500,
+  textAlign: 'left',
+  p: 'sm',
+  cursor: 'default',
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+var tbody = {
+  borderTop: '1px solid',
+  borderTopColor: 'neutral.40',
+  borderBottom: '1px solid',
+  borderBottomColor: 'neutral.80'
+};
+var row = {
+  '&:nth-of-type(odd) ': {
+    bg: 'neutral.95'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-hovered': {
+    // This is the hover state for the row
+  },
+  '&.is-selected': {
+    // This is the selected state for the row
+  }
+};
+var data = _objectSpread(_objectSpread({}, _Text.text.tableData), {}, {
+  p: 'sm',
+  '&.no-wrap': {
+    whiteSpace: 'nowrap'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+var _default = {
+  thead: thead,
+  tbody: tbody,
+  caption: caption,
+  container: container,
+  data: data,
+  head: head,
+  row: row
+};
+exports["default"] = _default;

package/lib/cjs/components/TableBase/TableBase.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,122 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _index = require("../../index");
+var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
+var _TableBase = _interopRequireDefault(require("./TableBase"));
+var _react3 = require("@emotion/react");
+var testId = 'test-table';
+var defaultProps = {
+  'aria-label': 'table',
+  'data-testid': testId,
+  caption: 'Populations of Countries'
+};
+var headers = [{
+  key: 'country',
+  name: 'Country'
+}, {
+  key: 'population',
+  name: 'Population'
+}, {
+  key: 'continent',
+  name: 'Continent'
+}];
+var objects = [{
+  key: '1',
+  country: 'USA',
+  population: '320,000,000',
+  continent: 'South America',
+  cellProps: {
+    noWrap: true
+  }
+}, {
+  key: '2',
+  country: 'Canada',
+  population: '37,000,000',
+  continent: 'North America'
+}, {
+  key: '3',
+  country: 'China',
+  population: '1,398,000,000',
+  continent: 'Asia'
+}, {
+  key: '4',
+  country: 'France',
+  population: '67,000,000',
+  continent: 'Europe'
+}];
+var getComponent = function getComponent() {
+  return (0, _react2.render)((0, _react3.jsx)(_TableBase["default"], defaultProps, (0, _react3.jsx)(_index.THead, {
+    columns: headers
+  }, function (head) {
+    return (0, _react3.jsx)(_index.Column, {
+      key: head.key
+    }, head.name);
+  }), (0, _react3.jsx)(_index.TBody, {
+    items: objects
+  }, function (row) {
+    return (0, _react3.jsx)(_index.Row, {
+      key: row.key
+    }, function (columnKey) {
+      return (0, _react3.jsx)(_index.Cell, row.cellProps || {}, row[columnKey]);
+    });
+  })));
+};
+
+// Needs to be added to each components test file
+(0, _universalComponentTest.universalComponentTests)({
+  renderComponent: function renderComponent(props) {
+    return (0, _react3.jsx)(_TableBase["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react3.jsx)(_index.THead, {
+      columns: headers
+    }, function (head) {
+      return (0, _react3.jsx)(_index.Column, {
+        key: head.key
+      }, head.name);
+    }), (0, _react3.jsx)(_index.TBody, {
+      items: objects
+    }, function (row) {
+      return (0, _react3.jsx)(_index.Row, {
+        key: row.key
+      }, function (columnKey) {
+        return (0, _react3.jsx)(_index.Cell, null, row[columnKey]);
+      });
+    }));
+  }
+});
+test('default table', function () {
+  getComponent();
+  var table = _react2.screen.getByTestId(testId);
+  expect(table).toBeInTheDocument();
+});
+test('renders caption', function () {
+  getComponent();
+  var caption = _react2.screen.getByText(defaultProps.caption);
+  expect(caption).toBeInTheDocument();
+});
+test('renders table headers', function () {
+  getComponent();
+  var headerCells = _react2.screen.getAllByRole('columnheader');
+  expect(headerCells).toHaveLength(headers.length);
+  (0, _forEach["default"])(headers).call(headers, function (header) {
+    expect(_react2.screen.getByText(header.name)).toBeInTheDocument();
+  });
+});
+test('renders table rows', function () {
+  getComponent();
+  var rows = _react2.screen.getAllByRole('row');
+  expect(rows).toHaveLength(objects.length + 1);
+  (0, _forEach["default"])(objects).call(objects, function (object) {
+    expect(_react2.screen.getByText(object.country)).toBeInTheDocument();
+    expect(_react2.screen.getByText(object.population)).toBeInTheDocument();
+    expect(_react2.screen.getByText(object.continent)).toBeInTheDocument();
+  });
+});
+test('renders cell with noWrap prop', function () {
+  getComponent();
+  var cell = _react2.screen.getByText('South America');
+  expect(cell).toHaveClass('no-wrap');
+});

package/lib/cjs/components/TableBase/index.d.ts

@@ -0,0 +1 @@
+export { default } from './TableBase';

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

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

package/lib/cjs/components/TableBase/stories/NextGenDarkTableBase.chromatic.stories.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;

package/lib/cjs/components/TableBase/stories/NextGenDarkTableBase.chromatic.stories.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../../..");
+var _NextGenTableBase = _interopRequireDefault(require("./NextGenTableBase"));
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Chromatic Only Onyx Dark TableBase'
+};
+exports["default"] = _default;
+var Default = function Default() {
+  return (0, _react2.jsx)(_.AstroProvider, {
+    themeOverrides: [_.NextGenDarkTheme]
+  }, (0, _react2.jsx)(_NextGenTableBase["default"], null));
+};
+exports.Default = Default;

package/lib/cjs/components/TableBase/stories/NextGenTableBase.chromatic.stories.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;

package/lib/cjs/components/TableBase/stories/NextGenTableBase.chromatic.stories.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../../..");
+var _NextGenTableBase = _interopRequireDefault(require("./NextGenTableBase"));
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Chromatic Only Onyx TableBase'
+};
+exports["default"] = _default;
+var Default = function Default() {
+  return (0, _react2.jsx)(_.AstroProvider, {
+    themeOverrides: [_.NextGenTheme]
+  }, (0, _react2.jsx)(_NextGenTableBase["default"], null));
+};
+exports.Default = Default;

package/lib/cjs/components/TableBase/stories/NextGenTableBase.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const NextGenTableBase: () => React.JSX.Element;
+export default NextGenTableBase;

package/lib/cjs/components/TableBase/stories/NextGenTableBase.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../../..");
+var _react2 = require("@emotion/react");
+var NextGenTableBase = function NextGenTableBase() {
+  var headers = [{
+    key: 'type',
+    name: 'Type'
+  }, {
+    key: 'date',
+    name: 'Date'
+  }, {
+    key: 'additional_grant',
+    name: 'Additional Grant'
+  }, {
+    key: 'total_grant',
+    name: 'Total Grant'
+  }];
+  var objects = [{
+    id: 1,
+    type: 'Lorem ipsum',
+    date: '2020-06-12',
+    additional_grant: '+25,000',
+    total_grant: '25,000'
+  }, {
+    id: 2,
+    type: 'Lorem ipsum',
+    date: '2020-10-01',
+    additional_grant: '+25,000',
+    total_grant: '50,000'
+  }, {
+    id: 3,
+    type: 'Lorem ipsum',
+    date: '2021-01-01',
+    additional_grant: '+25,000',
+    total_grant: '75,000'
+  }];
+  return (0, _react2.jsx)(_.Card, {
+    variant: "cards.tableWrapper"
+  }, (0, _react2.jsx)(_.TableBase, {
+    caption: "Lorem ipsum",
+    "aria-label": "table"
+  }, (0, _react2.jsx)(_.THead, {
+    columns: headers
+  }, function (column) {
+    return (0, _react2.jsx)(_.Column, {
+      key: column.key
+    }, column.name);
+  }), (0, _react2.jsx)(_.TBody, {
+    items: objects
+  }, function (item) {
+    return (0, _react2.jsx)(_.Row, {
+      key: item.id
+    }, function (columnKey) {
+      return (0, _react2.jsx)(_.Cell, null, item[columnKey]);
+    });
+  })));
+};
+var _default = NextGenTableBase;
+exports["default"] = _default;

package/lib/cjs/hooks/useGetTheme/useGetTheme.d.ts

@@ -6,9 +6,6 @@ export declare const baseState: {
     isCustom: boolean;
 };
 declare const useGetTheme: () => {
-    styles: {
-        navButtonEstHeight: number;
-    };
     icons: {
         [x: number]: import("@pingux/mdi-react").MdiReactIconComponentType;
         MenuDown: import("@pingux/mdi-react").MdiReactIconComponentType;
@@ -16,49 +13,14 @@ declare const useGetTheme: () => {
         pingLogoHorizontalSmall: import("react").JSX.Element;
         listViewMenu: import("@pingux/mdi-react").MdiReactIconComponentType;
     };
+    styles: {
+        navButtonEstHeight: number;
+    };
     tShirtSizes: {
         xxs: string;
-        'icon-100': string;
         xs: string;
-        'icon-200': string;
         sm: string;
-        'icon-300': string;
         md: string;
-        'icon-400': string;
-        'icon-500': string;
-        'icon-600': string;
-        'icon-700': string;
-        'icon-800': string;
-        'icon-900': string;
-    };
-    iconWrapperSizes: {
-        sm: number;
-        md: number;
-        lg: number;
-    };
-    themeState: {
-        isOnyx: boolean;
-        isAstro: boolean;
-        isOnyxDark: boolean;
-        isCustom: boolean;
-    };
-    name: string;
-} | {
-    icons: {
-        [x: number]: import("@pingux/mdi-react").MdiReactIconComponentType;
-        MenuDown: import("@pingux/mdi-react").MdiReactIconComponentType;
-        MenuUp: import("@pingux/mdi-react").MdiReactIconComponentType;
-        pingLogoHorizontalSmall: import("react").JSX.Element;
-        listViewMenu: import("@pingux/mdi-react").MdiReactIconComponentType;
-    };
-    styles: {
-        navButtonEstHeight: number;
-    };
-    tShirtSizes: {
-        xxs: number;
-        xs: number;
-        sm: number;
-        md: number;
     };
     iconWrapperSizes: {
         sm: number;

package/lib/cjs/index.d.ts

@@ -184,6 +184,8 @@ export { default as Tab } from './components/Tab';
 export * from './components/Tab';
 export { default as Table } from './components/Table';
 export * from './components/Table';
+export * from './components/TableBase';
+export { default as TableBase } from './components/TableBase';
 export { default as TableBody } from './components/TableBody';
 export * from './components/TableBody';
 export { default as TableCaption } from './components/TableCaption';
@@ -218,5 +220,4 @@ export { default as NextGenTheme } from './styles/themes/next-gen';
 export { default as OnyxTheme } from './styles/themes/next-gen';
 export * from './types';
 export { OverlayProvider, useOverlayPosition, useOverlayTrigger } from 'react-aria';
-export { Item, Section, useOverlayTriggerState, useTreeData } from 'react-stately';
-export { TableBody as DataTableBody, Cell as DataTableCell, Column as DataTableColumn, TableHeader as DataTableHeader, Row as DataTableRow, } from 'react-stately';
+export { Cell, Column, TableBody as DataTableBody, Cell as DataTableCell, Column as DataTableColumn, TableHeader as DataTableHeader, Row as DataTableRow, Item, Row, Section, TableBody as TBody, TableHeader as THead, useOverlayTriggerState, useTreeData, } from 'react-stately';