@pingux/astro 2.221.6-alpha.0 → 2.234.0-alpha.0

package/lib/cjs/components/IconBadge/IconBadge.js

@@ -14,55 +14,74 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.resolveTwotonePath = exports.injectTwotoneColor = exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("../../hooks");
 var _index = require("../../index");
+var _getColorFromUuid = _interopRequireDefault(require("../Avatar/getColorFromUuid"));
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "sx", "circleColor", "baseSize", "circleSize"];
+var _excluded = ["children", "sx", "circleColor", "baseSize", "circleSize", "colorId"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+var resolveTwotonePath = exports.resolveTwotonePath = function resolveTwotonePath(colorId, twotoneColorNames) {
+  if (!colorId || !twotoneColorNames) return null;
+  var twotoneColor = (0, _getColorFromUuid["default"])(colorId, twotoneColorNames);
+  return function (slot) {
+    var _context;
+    return (0, _concat["default"])(_context = "twoTone.".concat(slot, ".")).call(_context, twotoneColor);
+  };
+};
+var injectTwotoneColor = exports.injectTwotoneColor = function injectTwotoneColor(icon, slot, twotonePath) {
+  if (!twotonePath || ! /*#__PURE__*/_react["default"].isValidElement(icon)) return icon;
+  if ('color' in icon.props) return icon;
+  return /*#__PURE__*/_react["default"].cloneElement(icon, {
+    color: twotonePath(slot)
+  });
+};
 var IconBadge = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var children = props.children,
     sx = props.sx,
     circleColor = props.circleColor,
     baseSize = props.baseSize,
     circleSize = props.circleSize,
+    colorId = props.colorId,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _React$Children$toArr = _react["default"].Children.toArray(children),
     _React$Children$toArr2 = (0, _slicedToArray2["default"])(_React$Children$toArr, 2),
     firstIcon = _React$Children$toArr2[0],
     secondIcon = _React$Children$toArr2[1];
   var _useGetTheme = (0, _hooks.useGetTheme)(),
-    iconBadgeCircleColor = _useGetTheme.iconBadgeCircleColor;
+    iconBadgeCircleColor = _useGetTheme.iconBadgeCircleColor,
+    iconBadgeTwotoneColorNames = _useGetTheme.iconBadgeTwotoneColorNames;
+  var twotonePath = resolveTwotonePath(colorId, iconBadgeTwotoneColorNames);
+  var baseIcon = injectTwotoneColor(firstIcon, 'text', twotonePath);
+  var badgeIcon = injectTwotoneColor(secondIcon, 'secondary', twotonePath);
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     ref: ref,
     as: "span",
-    sx: _objectSpread({
-      position: 'relative',
+    variant: "iconBadge.container",
+    sx: _objectSpread(_objectSpread(_objectSpread({}, baseSize !== undefined && {
       height: "".concat(baseSize, "px"),
-      width: "".concat(baseSize, "px"),
-      display: 'flex',
-      alignItems: 'top'
-    }, sx)
-  }, others), firstIcon, (0, _react2.jsx)(_index.Box, {
+      width: "".concat(baseSize, "px")
+    }), twotonePath && {
+      backgroundColor: twotonePath('bg')
+    }), sx)
+  }, others), baseIcon, (0, _react2.jsx)(_index.Box, {
     as: "span",
-    sx: {
-      position: 'absolute',
-      bottom: '-5.5px',
-      right: '1px',
-      borderRadius: "".concat(circleSize !== undefined && circleSize / 2, "px"),
+    variant: "iconBadge.badgeCircle",
+    sx: _objectSpread(_objectSpread({}, circleSize !== undefined && {
       height: "".concat(circleSize, "px"),
       width: "".concat(circleSize, "px"),
-      alignItems: 'center',
-      justifyContent: 'center',
+      borderRadius: "".concat(circleSize / 2, "px")
+    }), {}, {
       backgroundColor: circleColor || iconBadgeCircleColor
-    }
-  }, secondIcon));
+    })
+  }, badgeIcon));
 });
 var _default = exports["default"] = IconBadge;

package/lib/cjs/components/IconBadge/IconBadge.mdx

@@ -12,4 +12,8 @@ The component follows the same pattern as icons. Check [Icon](./?path=/docs/comp
 
 ### Required Components
 
-This component requires the [Icon](./?path=/story/components-icon--default) component. 
+This component requires the [Icon](./?path=/story/components-icon--default) component.
+
+### colorId (Onyx themes)
+
+On Onyx and Onyx dark themes, pass a `colorId` to have the child icons colored with the Onyx twotone palette: the base icon container is filled with `color/twotone/<color>/bg`, the base icon uses `color/twotone/<color>/text`, and the small badge icon uses `color/twotone/<color>/secondary`. The color is assigned deterministically from the id with the same FNV-1a hashing approach as [IconWrapper](./?path=/docs/components-iconwrapper--default) and Avatar. A `color` already set on a child icon takes precedence. See the `Onyx Color Variants` story for the full palette in both themes. 

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

@@ -13,10 +13,12 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.Default = void 0;
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _AccountGroupIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountGroupIcon"));
+var _AccountMultipleOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountMultipleOutlineIcon"));
 var _ArrowTopRightThickIcon = _interopRequireDefault(require("@pingux/mdi-react/ArrowTopRightThickIcon"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _hooks = require("../../hooks");
@@ -27,6 +29,19 @@ var _IconBadge = _interopRequireDefault(require("./IconBadge.mdx"));
 var _react2 = require("@emotion/react");
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+var colorIdToHashTo = {
+  blue: 'color-13',
+  green: 'color-6',
+  purple: 'color-7',
+  cyan: 'color-5',
+  pink: 'color-8',
+  orange: 'color-4',
+  red: 'color-9',
+  yellow: 'color-11',
+  teal: 'color-10',
+  indigo: 'color-12'
+};
+var twotoneColorNames = ['blue', 'green', 'purple', 'pink', 'red', 'orange', 'yellow', 'teal', 'cyan', 'indigo'];
 var _default = exports["default"] = {
   title: 'Components/IconBadge',
   component: _index.IconBadge,
@@ -55,6 +70,12 @@ var _default = exports["default"] = {
       control: {
         type: 'number'
       }
+    },
+    colorId: {
+      description: 'A unique id used to deterministically assign a twotone color to the child icons (Onyx themes only). Resolved with the same FNV-1a hashing approach as IconWrapper and Avatar.',
+      control: {
+        type: 'text'
+      }
     }
   }, _ariaAttributes.ariaAttributeBaseArgTypes)
 };
@@ -63,33 +84,55 @@ var Default = exports.Default = function Default(args) {
     _useGetTheme$themeSta = _useGetTheme.themeState,
     isOnyx = _useGetTheme$themeSta.isOnyx,
     isOnyxDark = _useGetTheme$themeSta.isOnyxDark;
-  var getIconColor = function getIconColor() {
+  var iconColor = function iconColor() {
     if (isOnyxDark) return 'gray-400';
     if (isOnyx) return 'gray-800';
     return 'badge.iconBadgeFill';
   };
-  var getCircleColor = function getCircleColor() {
+  var circleColor = function circleColor() {
     if (isOnyxDark) return 'gray-700';
     if (isOnyx) return 'gray-100';
     return undefined;
   };
-  var iconColor = getIconColor();
-  var circleColor = getCircleColor();
+  if (isOnyx) {
+    return (0, _react2.jsx)(_index.Box, {
+      flexWrap: "wrap",
+      gap: "md"
+    }, (0, _map["default"])(twotoneColorNames).call(twotoneColorNames, function (colorName) {
+      return (0, _react2.jsx)(_index.IconBadge, {
+        key: colorName,
+        baseSize: 24,
+        circleSize: 10,
+        colorId: colorIdToHashTo[colorName]
+      }, (0, _react2.jsx)(_index.Icon, {
+        icon: _AccountMultipleOutlineIcon["default"],
+        title: {
+          name: "".concat(colorName, " icon")
+        }
+      }), (0, _react2.jsx)(_index.Icon, {
+        icon: _ArrowTopRightThickIcon["default"],
+        size: "xxs",
+        title: {
+          name: "".concat(colorName, " badge icon")
+        }
+      }));
+    }));
+  }
   return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.IconBadge, (0, _extends2["default"])({}, args, {
     baseSize: 25,
     circleSize: 15,
-    circleColor: circleColor
+    circleColor: circleColor()
   }), (0, _react2.jsx)(_index.Icon, {
     icon: _AccountGroupIcon["default"],
     size: "25px",
-    color: iconColor,
+    color: iconColor(),
     title: {
       name: 'Group Icon'
     }
   }), (0, _react2.jsx)(_index.Icon, {
     icon: _ArrowTopRightThickIcon["default"],
     size: "13px",
-    color: iconColor,
+    color: iconColor(),
     title: {
       name: 'Arrow Icon'
     }

package/lib/cjs/components/IconBadge/IconBadge.styles.d.ts

@@ -0,0 +1,19 @@
+declare const _default: {
+    container: {
+        position: string;
+        display: string;
+        alignItems: string;
+        borderRadius: string;
+    };
+    badgeCircle: {
+        position: string;
+        bottom: string;
+        right: string;
+        alignItems: string;
+        justifyContent: string;
+        height: string;
+        width: string;
+        borderRadius: string;
+    };
+};
+export default _default;

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

@@ -0,0 +1,27 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var container = {
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'top',
+  borderRadius: '50%'
+};
+var badgeCircle = {
+  position: 'absolute',
+  bottom: '-5.5px',
+  right: '1px',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: '15px',
+  width: '15px',
+  borderRadius: '50%'
+};
+var _default = exports["default"] = {
+  container: container,
+  badgeCircle: badgeCircle
+};

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

@@ -3,47 +3,49 @@
 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 _index = require("../../index");
+var _testWrapper = require("../../utils/testUtils/testWrapper");
 var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
-var _react3 = require("@emotion/react");
+var _getColorFromUuid = _interopRequireDefault(require("../Avatar/getColorFromUuid"));
+var _IconBadge = require("./IconBadge");
+var _react2 = require("@emotion/react");
 var testId = 'test-icon';
 var defaultProps = {
   'data-testid': testId
 };
 var ThisIcon = function ThisIcon(args) {
-  return (0, _react3.jsx)("svg", (0, _extends2["default"])({
+  return (0, _react2.jsx)("svg", (0, _extends2["default"])({
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     "aria-labelledby": "this-icon-title"
-  }, args), (0, _react3.jsx)("title", {
+  }, args), (0, _react2.jsx)("title", {
     id: "this-icon-title"
-  }, "This Icon"), (0, _react3.jsx)("path", {
+  }, "This Icon"), (0, _react2.jsx)("path", {
     d: "M12.5 7.28125C14.1979 7.28125 15.6979 7.6875 16.9167 8.21875C18.0417 8.71875 18.75 9.84375 18.75 11.0625V12.75H6.25V11.0729C6.25 9.84375 6.95833 8.71875 8.08333 8.22917C9.30208 7.6875 10.8021 7.28125 12.5 7.28125ZM4.16667 7.54167C5.3125 7.54167 6.25 6.60417 6.25 5.45833C6.25 4.3125 5.3125 3.375 4.16667 3.375C3.02083 3.375 2.08333 4.3125 2.08333 5.45833C2.08333 6.60417 3.02083 7.54167 4.16667 7.54167ZM5.34375 8.6875C4.95833 8.625 4.57292 8.58333 4.16667 8.58333C3.13542 8.58333 2.15625 8.80208 1.27083 9.1875C0.5 9.52083 0 10.2708 0 11.1146V12.75H4.6875V11.0729C4.6875 10.2083 4.92708 9.39583 5.34375 8.6875ZM20.8333 7.54167C21.9792 7.54167 22.9167 6.60417 22.9167 5.45833C22.9167 4.3125 21.9792 3.375 20.8333 3.375C19.6875 3.375 18.75 4.3125 18.75 5.45833C18.75 6.60417 19.6875 7.54167 20.8333 7.54167ZM25 11.1146C25 10.2708 24.5 9.52083 23.7292 9.1875C22.8437 8.80208 21.8646 8.58333 20.8333 8.58333C20.4271 8.58333 20.0417 8.625 19.6563 8.6875C20.0729 9.39583 20.3125 10.2083 20.3125 11.0729V12.75H25V11.1146ZM12.5 0.25C14.2292 0.25 15.625 1.64583 15.625 3.375C15.625 5.10417 14.2292 6.5 12.5 6.5C10.7708 6.5 9.375 5.10417 9.375 3.375C9.375 1.64583 10.7708 0.25 12.5 0.25Z",
     fill: "currentColor"
   }));
 };
 var ThisSecondIcon = function ThisSecondIcon(args) {
-  return (0, _react3.jsx)("svg", (0, _extends2["default"])({
+  return (0, _react2.jsx)("svg", (0, _extends2["default"])({
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     "aria-labelledby": "this-second-icon-title"
-  }, args), (0, _react3.jsx)("title", {
+  }, args), (0, _react2.jsx)("title", {
     id: "this-second-icon-title"
-  }, "This Second Icon"), (0, _react3.jsx)("path", {
+  }, "This Second Icon"), (0, _react2.jsx)("path", {
     d: "M1.71875 0.624999L7.96875 0.625L7.96875 6.875L6.09375 6.875L6.09375 3.89375L1.73125 8.125L0.46875 6.85625L4.75 2.5L1.71875 2.5L1.71875 0.624999Z",
     fill: "currentColor"
   }));
 };
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _react2.render)((0, _react3.jsx)(_index.IconBadge, (0, _extends2["default"])({}, props, {
+  return (0, _testWrapper.render)((0, _react2.jsx)(_index.IconBadge, (0, _extends2["default"])({}, props, {
     backgroundColor: "white"
-  }, defaultProps), (0, _react3.jsx)(_index.Icon, {
+  }, defaultProps), (0, _react2.jsx)(_index.Icon, {
     icon: ThisIcon,
     size: "25px",
     color: "accent.40"
-  }), (0, _react3.jsx)(_index.Icon, {
+  }), (0, _react2.jsx)(_index.Icon, {
     icon: ThisSecondIcon,
     size: "9px",
     color: "accent.40"
@@ -53,14 +55,14 @@ var getComponent = function getComponent() {
 // Needs to be added to each components test file
 (0, _universalComponentTest.universalComponentTests)({
   renderComponent: function renderComponent(props) {
-    return (0, _react3.jsx)(_index.IconBadge, (0, _extends2["default"])({}, props, defaultProps), (0, _react3.jsx)(_index.Icon, {
+    return (0, _react2.jsx)(_index.IconBadge, (0, _extends2["default"])({}, props, defaultProps), (0, _react2.jsx)(_index.Icon, {
       icon: ThisIcon
     }));
   }
 });
 test('default iconbadge render', function () {
   getComponent();
-  var iconButton = _react2.screen.getByTestId(testId);
+  var iconButton = _testWrapper.screen.getByTestId(testId);
   expect(iconButton).toBeInTheDocument();
 });
 test('iconbadge borderRadius renders correctly', function () {
@@ -68,7 +70,58 @@ test('iconbadge borderRadius renders correctly', function () {
   getComponent({
     circleSize: 20
   });
-  var icons = _react2.screen.getAllByRole('img');
+  var icons = _testWrapper.screen.getAllByRole('img');
   var secondIcon = icons[1].closest('span');
   expect(secondIcon).toHaveStyle("border-radius: ".concat(circleSize / 2, "px"));
+});
+describe('resolveTwotonePath', function () {
+  var colorNames = ['orange', 'cyan', 'green'];
+  test('returns a path factory for a valid colorId', function () {
+    var path = (0, _IconBadge.resolveTwotonePath)('uuid-1', colorNames);
+    expect(path).not.toBeNull();
+    expect(path('text')).toBe("twoTone.text.".concat((0, _getColorFromUuid["default"])('uuid-1', colorNames)));
+    expect(path('secondary')).toBe("twoTone.secondary.".concat((0, _getColorFromUuid["default"])('uuid-1', colorNames)));
+    expect(path('bg')).toBe("twoTone.bg.".concat((0, _getColorFromUuid["default"])('uuid-1', colorNames)));
+  });
+  test('returns the same color for the same colorId', function () {
+    var firstPath = (0, _IconBadge.resolveTwotonePath)('uuid-1', colorNames);
+    var secondPath = (0, _IconBadge.resolveTwotonePath)('uuid-1', colorNames);
+    expect(firstPath('text')).toBe(secondPath('text'));
+  });
+  test('returns null when colorId is missing', function () {
+    expect((0, _IconBadge.resolveTwotonePath)(undefined, colorNames)).toBeNull();
+    expect((0, _IconBadge.resolveTwotonePath)('', colorNames)).toBeNull();
+  });
+  test('returns null when twotone color names are missing', function () {
+    expect((0, _IconBadge.resolveTwotonePath)('uuid-1', undefined)).toBeNull();
+  });
+});
+describe('injectTwotoneColor', function () {
+  var colorNames = ['orange', 'cyan', 'green'];
+  var twotonePath = (0, _IconBadge.resolveTwotonePath)('uuid-1', colorNames);
+  test('injects a twotone color into an icon without a color prop', function () {
+    var icon = (0, _react2.jsx)(_index.Icon, {
+      icon: ThisIcon
+    });
+    var result = (0, _IconBadge.injectTwotoneColor)(icon, 'text', twotonePath);
+    expect(result).toHaveProperty('props.color', twotonePath('text'));
+  });
+  test('does not override an existing color prop', function () {
+    var icon = (0, _react2.jsx)(_index.Icon, {
+      icon: ThisIcon,
+      color: "accent.40"
+    });
+    var result = (0, _IconBadge.injectTwotoneColor)(icon, 'text', twotonePath);
+    expect(result).toHaveProperty('props.color', 'accent.40');
+  });
+  test('returns the icon unchanged when the twotone path is null', function () {
+    var icon = (0, _react2.jsx)(_index.Icon, {
+      icon: ThisIcon
+    });
+    expect((0, _IconBadge.injectTwotoneColor)(icon, 'text', null)).toBe(icon);
+  });
+  test('returns non-element children unchanged', function () {
+    expect((0, _IconBadge.injectTwotoneColor)('text', 'text', twotonePath)).toBe('text');
+    expect((0, _IconBadge.injectTwotoneColor)(null, 'text', twotonePath)).toBeNull();
+  });
 });

package/lib/cjs/components/IconButton/IconButton.styles.d.ts

@@ -126,6 +126,9 @@ declare const _default: {
             outlineOffset: string;
         };
     };
+    arrayField: {
+        deleteButton: import("theme-ui").ThemeUICSSObject;
+    };
     badge: {
         deleteButton: {
             borderRadius: string;

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

@@ -15,6 +15,7 @@ _Object$defineProperty(exports, "__esModule", {
 exports.square = exports["default"] = exports.base = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _tShirtSizes = _interopRequireDefault(require("../../styles/themes/astro/customProperties/tShirtSizes"));
+var _ArrayFieldDeleteButton = require("../ArrayField/ArrayFieldDeleteButton.styles");
 var _Badge = require("../Badge/Badge.styles");
 var _Buttons = require("../Button/Buttons.styles");
 var _CollapsiblePanel = require("../CollapsiblePanel/CollapsiblePanel.styles");
@@ -182,6 +183,9 @@ var filter = _objectSpread(_objectSpread({}, base), {}, {
 var _default = exports["default"] = {
   base: base,
   bidirectional: bidirectional,
+  arrayField: {
+    deleteButton: _ArrayFieldDeleteButton.arrayFieldDeleteButton.deleteButton
+  },
   badge: {
     deleteButton: _Badge.deleteButton
   },

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

@@ -89,6 +89,7 @@ var WithLabelIcon = exports.WithLabelIcon = function WithLabelIcon(args) {
   });
   return (0, _react2.jsx)(_.LabelValuePairs, args, (0, _react2.jsx)(_.Pair, null, (0, _react2.jsx)(_.PairLabel, null, "Status", (0, _react2.jsx)(_.Box, {
     isRow: true,
+    ml: "xs",
     gap: "xs",
     alignItems: "center"
   }, icon, (0, _react2.jsx)(_.Text, {

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

@@ -26,6 +26,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/
 var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _InformationIcon = _interopRequireDefault(require("@pingux/mdi-react/InformationIcon"));
+var _onyxTokens = require("@pingux/onyx-tokens");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 var _index = require("../../index");
 var _testWrapper = require("../../utils/testUtils/testWrapper");
@@ -48,6 +49,12 @@ var originalClipboard = _objectSpread({}, global.navigator.clipboard);
 var getComponent = function getComponent(children) {
   return (0, _testWrapper.render)((0, _react2.jsx)(_["default"], null, children));
 };
+var getThemedComponent = function getThemedComponent(theme, children) {
+  return (0, _testWrapper.render)((0, _react2.jsx)(_index.AstroProvider, {
+    themeOverrides: [theme]
+  }, (0, _react2.jsx)(_["default"], null, children)));
+};
+var valuePair = (0, _react2.jsx)(_.Pair, null, (0, _react2.jsx)(_.PairLabel, null, "Username"), (0, _react2.jsx)(_.PairValue, null, "jsmith"));
 
 // Needs to be added to each components test file
 (0, _universalComponentTest.universalComponentTests)({
@@ -56,10 +63,20 @@ var getComponent = function getComponent(children) {
   }
 });
 test('renders a row for each field with a value', function () {
-  getComponent((0, _react2.jsx)(_.Pair, null, (0, _react2.jsx)(_.PairLabel, null, "Username"), (0, _react2.jsx)(_.PairValue, null, "jsmith")));
+  getComponent(valuePair);
   expect(_testWrapper.screen.getByText('Username')).toBeInTheDocument();
   expect(_testWrapper.screen.getByText('jsmith')).toBeInTheDocument();
 });
+describe('value color', function () {
+  test('uses the primary Onyx light text color', function () {
+    getThemedComponent(_index.OnyxTheme, valuePair);
+    expect(_testWrapper.screen.getByText('jsmith')).toHaveStyleRule('color', _onyxTokens.astroTokens.color.font.base);
+  });
+  test('uses the primary Onyx dark text color', function () {
+    getThemedComponent(_index.OnyxDarkTheme, valuePair);
+    expect(_testWrapper.screen.getByText('jsmith')).toHaveStyleRule('color', _onyxTokens.astroTokensDark.color.font.base);
+  });
+});
 test('rows with falsy value are not rendered unless isLoading is true', function () {
   getComponent((0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.Pair, null, (0, _react2.jsx)(_.PairLabel, null, "Empty Field"), (0, _react2.jsx)(_.PairValue, null)), (0, _react2.jsx)(_.Pair, null, (0, _react2.jsx)(_.PairLabel, null, "Null Field"), (0, _react2.jsx)(_.PairValue, null, null)), (0, _react2.jsx)(_.Pair, null, (0, _react2.jsx)(_.PairLabel, null, "Visible Field"), (0, _react2.jsx)(_.PairValue, null, "some value"))));
   expect(_testWrapper.screen.queryByText('Empty Field')).not.toBeInTheDocument();

package/lib/cjs/components/LabelValuePairs/LabelValuePairsLabel.js

@@ -44,8 +44,7 @@ var PairLabel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     ref: ref,
     isRow: true,
-    alignItems: "center",
-    gap: "sm"
+    alignItems: "center"
   }, others, containerProps), (0, _react2.jsx)(_index.Text, (0, _extends2["default"])({}, defaultTextProps, textProps), label), icon, helpHint && (0, _react2.jsx)(_index.HelpHint, (0, _extends2["default"])({
     iconButtonProps: {
       'aria-label': "".concat(label, " help hint")

package/lib/cjs/components/ListView/ListView.js

@@ -26,15 +26,17 @@ var _reactStately = require("react-stately");
 var _i18n = require("@react-aria/i18n");
 var _virtualizer = require("@react-aria/virtualizer");
 var _layout = require("@react-stately/layout");
+var _hooks = require("../../hooks");
 var _useLoadPrev = _interopRequireDefault(require("../../hooks/useLoadPrev"));
 var _index = require("../../index");
 var _loadingStates = _interopRequireDefault(require("../../utils/devUtils/constants/loadingStates"));
+var _EmptyState = _interopRequireDefault(require("../EmptyState"));
 var _Loader = _interopRequireDefault(require("../Loader"));
 var _ListViewContext = require("./ListViewContext");
 var _ListViewExpandableItem = _interopRequireDefault(require("./ListViewExpandableItem"));
 var _ListViewItem = _interopRequireDefault(require("./ListViewItem"));
 var _react2 = require("@emotion/react");
-var _excluded = ["containerProps", "disabledKeys", "isHoverable", "loadingState", "onLoadMore", "onLoadPrev", "onSelectionChange", "onExpandedChange", "expandedKeys", "selectedKeys", "selectionMode", "selectionStyle", "items", "onFocus"];
+var _excluded = ["containerProps", "disabledKeys", "isHoverable", "loadingState", "onLoadMore", "onLoadPrev", "onSelectionChange", "onExpandedChange", "expandedKeys", "selectedKeys", "selectionMode", "selectionStyle", "items", "onFocus", "renderEmptyState"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -49,12 +51,14 @@ function useListLayout(state) {
     usage: 'search',
     sensitivity: 'base'
   });
+  // placeholderHeight is intentionally omitted: ListLayout falls back to the
+  // full visible height for the empty-state placeholder, so the EmptyState
+  // can fill and center within the list instead of being clipped to a row.
   var layout = (0, _react.useMemo)(function () {
     return new _layout.ListLayout({
       estimatedRowHeight: ROW_HEIGHT,
       estimatedHeadingHeight: 26,
       loaderHeight: ROW_HEIGHT,
-      placeholderHeight: ROW_HEIGHT,
       collator: collator
     });
   }, [collator, state.collection]);
@@ -78,11 +82,14 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     selectionStyle = props.selectionStyle,
     items = props.items,
     onFocus = props.onFocus,
+    renderEmptyState = props.renderEmptyState,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     hoveredItem = _useState2[0],
     setHoveredItem = _useState2[1];
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var isLoading = loadingState === _loadingStates["default"].LOADING_MORE || loadingState === _loadingStates["default"].LOADING;
   var isFocusable = selectionMode !== 'none';
   var renderWrapper = function renderWrapper(parent, reusableView) {
@@ -92,6 +99,16 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       parent: parent
     });
   };
+  var renderEmpty = function renderEmpty() {
+    // A loading state takes precedence over the empty state. The layout
+    // emits a loader node before the placeholder, so this is a defensive
+    // guard only.
+    /* istanbul ignore if */
+    if (isLoading) return null;
+    if (renderEmptyState) return renderEmptyState();
+    // Default empty state is rendered in the Onyx theme only.
+    return isOnyx ? (0, _react2.jsx)(_EmptyState["default"], null) : null;
+  };
   var listViewRef = (0, _react.useRef)(null);
 
   /* istanbul ignore next */
@@ -175,10 +192,14 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     onScroll: resetHoverState,
     tabIndex: isFocusable ? 0 : -1,
     shouldUseVirtualFocus: !isFocusable
-    // added to remove the outline when using keyboard navigation encountered during UIP-7501
+    // added to remove the outline when using keyboard navigation encountered during UIP-7501.
+    // height: '100%' gives the scroll container a definite height even when
+    // the collection is empty, so the virtualizer's visibleRect is non-zero
+    // and the empty-state placeholder (sized to visibleRect.height) renders.
     ,
     style: {
-      outline: 'none'
+      outline: 'none',
+      height: '100%'
     }
   }), function (type, item) {
     if (type === 'item') {
@@ -205,6 +226,9 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         }
       });
     }
+    if (type === collectionTypes.PLACEHOLDER) {
+      return renderEmpty();
+    }
     return null;
   })));
 });