@pingux/astro 2.36.0-alpha.2 → 2.36.0-alpha.4

package/lib/cjs/types/index.d.ts

@@ -1,3 +1,4 @@
+export * from './badge';
 export * from './box';
 export * from './button';
 export * from './icon';

package/lib/cjs/types/index.js

@@ -1,14 +1,25 @@
 "use strict";
 
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9;
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10;
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
 var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
+var _badge = require("./badge");
+_forEachInstanceProperty(_context = _Object$keys(_badge)).call(_context, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _badge[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _badge[key];
+    }
+  });
+});
 var _box = require("./box");
-_forEachInstanceProperty(_context = _Object$keys(_box)).call(_context, function (key) {
+_forEachInstanceProperty(_context2 = _Object$keys(_box)).call(_context2, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _box[key]) return;
   _Object$defineProperty(exports, key, {
@@ -19,7 +30,7 @@ _forEachInstanceProperty(_context = _Object$keys(_box)).call(_context, function
   });
 });
 var _button = require("./button");
-_forEachInstanceProperty(_context2 = _Object$keys(_button)).call(_context2, function (key) {
+_forEachInstanceProperty(_context3 = _Object$keys(_button)).call(_context3, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _button[key]) return;
   _Object$defineProperty(exports, key, {
@@ -30,7 +41,7 @@ _forEachInstanceProperty(_context2 = _Object$keys(_button)).call(_context2, func
   });
 });
 var _icon = require("./icon");
-_forEachInstanceProperty(_context3 = _Object$keys(_icon)).call(_context3, function (key) {
+_forEachInstanceProperty(_context4 = _Object$keys(_icon)).call(_context4, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _icon[key]) return;
   _Object$defineProperty(exports, key, {
@@ -41,7 +52,7 @@ _forEachInstanceProperty(_context3 = _Object$keys(_icon)).call(_context3, functi
   });
 });
 var _item = require("./item");
-_forEachInstanceProperty(_context4 = _Object$keys(_item)).call(_context4, function (key) {
+_forEachInstanceProperty(_context5 = _Object$keys(_item)).call(_context5, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _item[key]) return;
   _Object$defineProperty(exports, key, {
@@ -52,7 +63,7 @@ _forEachInstanceProperty(_context4 = _Object$keys(_item)).call(_context4, functi
   });
 });
 var _loader = require("./loader");
-_forEachInstanceProperty(_context5 = _Object$keys(_loader)).call(_context5, function (key) {
+_forEachInstanceProperty(_context6 = _Object$keys(_loader)).call(_context6, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _loader[key]) return;
   _Object$defineProperty(exports, key, {
@@ -63,7 +74,7 @@ _forEachInstanceProperty(_context5 = _Object$keys(_loader)).call(_context5, func
   });
 });
 var _popoverContainer = require("./popoverContainer");
-_forEachInstanceProperty(_context6 = _Object$keys(_popoverContainer)).call(_context6, function (key) {
+_forEachInstanceProperty(_context7 = _Object$keys(_popoverContainer)).call(_context7, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _popoverContainer[key]) return;
   _Object$defineProperty(exports, key, {
@@ -74,7 +85,7 @@ _forEachInstanceProperty(_context6 = _Object$keys(_popoverContainer)).call(_cont
   });
 });
 var _shared = require("./shared");
-_forEachInstanceProperty(_context7 = _Object$keys(_shared)).call(_context7, function (key) {
+_forEachInstanceProperty(_context8 = _Object$keys(_shared)).call(_context8, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _shared[key]) return;
   _Object$defineProperty(exports, key, {
@@ -85,7 +96,7 @@ _forEachInstanceProperty(_context7 = _Object$keys(_shared)).call(_context7, func
   });
 });
 var _tableCell = require("./tableCell");
-_forEachInstanceProperty(_context8 = _Object$keys(_tableCell)).call(_context8, function (key) {
+_forEachInstanceProperty(_context9 = _Object$keys(_tableCell)).call(_context9, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tableCell[key]) return;
   _Object$defineProperty(exports, key, {
@@ -96,7 +107,7 @@ _forEachInstanceProperty(_context8 = _Object$keys(_tableCell)).call(_context8, f
   });
 });
 var _text = require("./text");
-_forEachInstanceProperty(_context9 = _Object$keys(_text)).call(_context9, function (key) {
+_forEachInstanceProperty(_context10 = _Object$keys(_text)).call(_context10, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _text[key]) return;
   _Object$defineProperty(exports, key, {

package/lib/cjs/utils/testUtils/universalComponentTest.js

@@ -49,33 +49,35 @@ var universalComponentTests = /*#__PURE__*/function () {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
           renderComponent = _ref2.renderComponent, _ref2$rules = _ref2.rules, rules = _ref2$rules === void 0 ? {} : _ref2$rules;
-          test('should have no accessibility violations', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-            var _render, container, results;
-            return _regeneratorRuntime().wrap(function _callee$(_context) {
-              while (1) switch (_context.prev = _context.next) {
-                case 0:
-                  jest.useRealTimers();
-                  _render = (0, _react2.render)(renderComponent()), container = _render.container;
-                  _context.next = 4;
-                  return (0, _jestAxe.axe)(container, {
-                    rules: rules
-                  });
-                case 4:
-                  results = _context.sent;
-                  expect(results).toHaveNoViolations();
-                case 6:
-                case "end":
-                  return _context.stop();
-              }
-            }, _callee);
-          })));
-          test('should forward refs properly', function () {
-            (0, _react2.render)((0, _react3.jsx)(ComponentWithRef, {
-              renderComponent: renderComponent
-            }));
-            _react2.screen.getByText(HAS_REF);
+          describe('Universal Component Tests', function () {
+            test('should have no accessibility violations', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+              var _render, container, results;
+              return _regeneratorRuntime().wrap(function _callee$(_context) {
+                while (1) switch (_context.prev = _context.next) {
+                  case 0:
+                    jest.useRealTimers();
+                    _render = (0, _react2.render)(renderComponent()), container = _render.container;
+                    _context.next = 4;
+                    return (0, _jestAxe.axe)(container, {
+                      rules: rules
+                    });
+                  case 4:
+                    results = _context.sent;
+                    expect(results).toHaveNoViolations();
+                  case 6:
+                  case "end":
+                    return _context.stop();
+                }
+              }, _callee);
+            })));
+            test('should forward refs properly', function () {
+              (0, _react2.render)((0, _react3.jsx)(ComponentWithRef, {
+                renderComponent: renderComponent
+              }));
+              _react2.screen.getByText(HAS_REF);
+            });
           });
-        case 3:
+        case 2:
         case "end":
           return _context2.stop();
       }

package/lib/components/Badge/Badge.js

@@ -14,7 +14,6 @@ import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/ins
 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) { _defineProperty(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; }
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Badge as ThemeUIBadge } from 'theme-ui';
 import { Box, Text } from '../..';
 import { BadgeContext } from '../../context/BadgeContext';
@@ -49,49 +48,24 @@ var Badge = /*#__PURE__*/React.forwardRef(function (props, ref) {
   // The following is to correct a visual regression released in 1.39.0 https://jira.pingidentity.com/browse/UIP-5907.
   // TODO : Remove in Astro V2 with theme remapping roll out.
   var oldVariantPaths = ['boxes.countBadge', 'boxes.countNeutral', 'boxes.itemBadgeWithSlot', 'collapsiblePanel.collapsiblePanelBadge', 'boxes.environmentBadge', 'boxes.readOnlyBadge', 'boxes.selectedItemBadge'];
-  var fixedVariant = _includesInstanceProperty(oldVariantPaths).call(oldVariantPaths, props.variant) ? "variants.".concat(props.variant) : props.variant;
+  var fixedVariant = variant && _includesInstanceProperty(oldVariantPaths).call(oldVariantPaths, variant) ? "variants.".concat(variant) : variant;
   return ___EmotionJSX(BadgeContext.Provider, {
     value: {
       bg: bg
     }
-  }, ___EmotionJSX(ThemeUIBadge, _extends({
-    isRow: true
-  }, badgeProps, {
-    variant: props.variant ? fixedVariant : 'baseBadge'
+  }, ___EmotionJSX(ThemeUIBadge, _extends({}, badgeProps, {
+    variant: variant ? fixedVariant : 'baseBadge'
   }), (slots === null || slots === void 0 ? void 0 : slots.leftIcon) && ___EmotionJSX(Box, {
     mr: "xs"
   }, slots.leftIcon), ___EmotionJSX(Text, _extends({
     variant: "label",
     color: textColor,
-    sx: isUppercase && {
+    sx: isUppercase ? {
       textTransform: 'uppercase',
       fontSize: '11px'
-    }
+    } : {}
   }, textProps), label), children));
 });
-Badge.propTypes = {
-  /** The text color of the badge. */
-  textColor: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  /** The background color of the badge. */
-  bg: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  /** Provides a way to insert markup in specified places. */
-  slots: PropTypes.shape({
-    /** The given node will be inserted into left side of the badge. */
-    leftIcon: PropTypes.node
-  }),
-  /** The label of the badge. */
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  /** Props object that is spread directly into the text. */
-  textProps: PropTypes.shape({}),
-  /** When true, display badge label as uppercase. */
-  isUppercase: PropTypes.bool,
-  /** Alignment of badge relative to parent container. */
-  align: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
-  /** JSX styling that is passed into the component. */
-  sx: PropTypes.shape({}),
-  /** The variant of the badge */
-  variant: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
-};
 Badge.defaultProps = {
   textColor: 'white',
   bg: colors.neutral[10],

package/lib/components/Badge/Badge.stories.js

@@ -9,7 +9,7 @@ import Earth from '@pingux/mdi-react/EarthIcon';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Badge, Box, Icon, IconButton } from '../../index';
-import { flatColorList } from '../../styles/colors.js';
+import { flatColorList } from '../../styles/colors';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.ts';
 import BadgeReadme from './Badge.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";

package/lib/components/Box/Box.stories.js

@@ -5,7 +5,7 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 import React from 'react';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Image, Text } from '../../index';
-import { flatColorList } from '../../styles/colors.js';
+import { flatColorList } from '../../styles/colors';
 import { htmlElements } from '../../utils/devUtils/constants/htmlElements';
 import { pingImg } from '../../utils/devUtils/constants/images';
 import BoxReadme from './Box.mdx';

package/lib/components/DataTable/DataTable.js

@@ -26,7 +26,7 @@ import { TableLayout } from '@react-stately/layout';
 import { TableColumnLayout, useTableState } from '@react-stately/table';
 import PropTypes from 'prop-types';
 import { DataTableContext, useDataTableContext } from '../../context/DataTableContext';
-import { useStatusClasses } from '../../hooks';
+import { useLocalOrForwardRef, useStatusClasses } from '../../hooks';
 import { Box, Icon, Loader } from '../../index';
 import DataTableVirtualizer from './DataTableVirtualizer';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -77,7 +77,7 @@ var DataTable = /*#__PURE__*/forwardRef(function (props, ref) {
   // entering resizing/exiting resizing doesn't trigger a render
   // with table layout, so we need to track it here
   var state = useTableState(_objectSpread({}, props));
-  var domRef = useRef(ref);
+  var domRef = useLocalOrForwardRef(ref);
   var headerRef = useRef();
   var bodyRef = useRef();
   var density = props.density || 'regular';

package/lib/components/DataTable/DataTable.test.js

@@ -36,6 +36,7 @@ import { useCollator } from '@react-aria/i18n';
 import { act, fireEvent, render, screen, within } from '@testing-library/react';
 import { act as actHooks, renderHook } from '@testing-library/react-hooks';
 import { DataTableBody, DataTableCell, DataTableColumn, DataTableHeader, DataTableRow } from '../../index';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import DataTable from './DataTable';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var offsetWidth;
@@ -1138,4 +1139,23 @@ describe('Empty DataTable', function () {
     expect(staticTable).toBeVisible();
     expect(tRows).toBeInTheDocument();
   });
+});
+
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(DataTable, _extends({}, props, {
+      "aria-label": "label"
+    }), ___EmotionJSX(DataTableHeader, {
+      columns: [columns[0]]
+    }, ___EmotionJSX(DataTableColumn, {
+      align: "center"
+    }, columns[0].name)), ___EmotionJSX(DataTableBody, {
+      items: rows
+    }, function (item) {
+      return ___EmotionJSX(DataTableRow, null, function (columnKey) {
+        return ___EmotionJSX(DataTableCell, null, item[columnKey]);
+      });
+    }));
+  }
 });

package/lib/components/DataTable/DataTableVirtualizer.js

@@ -103,7 +103,6 @@ var DataTableVirtualizer = /*#__PURE__*/forwardRef(function (_ref, ref) {
     },
     ref: headerRef
   }, state.visibleViews[0]), ___EmotionJSX(ScrollView, {
-    role: "presentation",
     variant: "dataTable.tableBody",
     style: {
       flex: 1

package/lib/styles/ColorDocumentation.js

@@ -14,7 +14,7 @@ import Box from '../components/Box';
 import SelectField from '../components/SelectField';
 import Text from '../components/Text';
 import TextField from '../components/TextField';
-import { flatColorList } from './colors.js';
+import { flatColorList } from './colors';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var exactMatchThreshold = 0.02;
 function Color(_ref) {

package/lib/types/badge.js

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

package/lib/types/index.js

@@ -1,3 +1,4 @@
+export * from './badge';
 export * from './box';
 export * from './button';
 export * from './icon';

package/lib/utils/testUtils/universalComponentTest.js

@@ -38,33 +38,35 @@ export var universalComponentTests = /*#__PURE__*/function () {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
           renderComponent = _ref2.renderComponent, _ref2$rules = _ref2.rules, rules = _ref2$rules === void 0 ? {} : _ref2$rules;
-          test('should have no accessibility violations', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-            var _render, container, results;
-            return _regeneratorRuntime().wrap(function _callee$(_context) {
-              while (1) switch (_context.prev = _context.next) {
-                case 0:
-                  jest.useRealTimers();
-                  _render = render(renderComponent()), container = _render.container;
-                  _context.next = 4;
-                  return axe(container, {
-                    rules: rules
-                  });
-                case 4:
-                  results = _context.sent;
-                  expect(results).toHaveNoViolations();
-                case 6:
-                case "end":
-                  return _context.stop();
-              }
-            }, _callee);
-          })));
-          test('should forward refs properly', function () {
-            render(___EmotionJSX(ComponentWithRef, {
-              renderComponent: renderComponent
-            }));
-            screen.getByText(HAS_REF);
+          describe('Universal Component Tests', function () {
+            test('should have no accessibility violations', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+              var _render, container, results;
+              return _regeneratorRuntime().wrap(function _callee$(_context) {
+                while (1) switch (_context.prev = _context.next) {
+                  case 0:
+                    jest.useRealTimers();
+                    _render = render(renderComponent()), container = _render.container;
+                    _context.next = 4;
+                    return axe(container, {
+                      rules: rules
+                    });
+                  case 4:
+                    results = _context.sent;
+                    expect(results).toHaveNoViolations();
+                  case 6:
+                  case "end":
+                    return _context.stop();
+                }
+              }, _callee);
+            })));
+            test('should forward refs properly', function () {
+              render(___EmotionJSX(ComponentWithRef, {
+                renderComponent: renderComponent
+              }));
+              screen.getByText(HAS_REF);
+            });
           });
-        case 3:
+        case 2:
         case "end":
           return _context2.stop();
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.36.0-alpha.2",
+  "version": "2.36.0-alpha.4",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",
@@ -139,6 +139,7 @@
     "@testing-library/react": "^11.0.4",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^12.8.3",
+    "@types/chroma-js": "^2.4.3",
     "@types/jest": "^29.5.3",
     "@types/jest-axe": "^3.5.8",
     "@types/mdx": "^2.0.5",