@pingux/astro 2.221.6 → 2.234.0-alpha.0

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

@@ -8,10 +8,12 @@ import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/obje
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 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) { _defineProperty(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; }
 import React from 'react';
 import GroupIcon from '@pingux/mdi-react/AccountGroupIcon';
+import AccountMultipleOutlineIcon from '@pingux/mdi-react/AccountMultipleOutlineIcon';
 import ArrowIcon from '@pingux/mdi-react/ArrowTopRightThickIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { useGetTheme } from '../../hooks';
@@ -20,6 +22,19 @@ import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
 import IconBadgeReadme from './IconBadge.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+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'];
 export default {
   title: 'Components/IconBadge',
   component: IconBadge,
@@ -48,6 +63,12 @@ export 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'
+      }
     }
   }, ariaAttributeBaseArgTypes)
 };
@@ -56,33 +77,55 @@ export var 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 ___EmotionJSX(Box, {
+      flexWrap: "wrap",
+      gap: "md"
+    }, _mapInstanceProperty(twotoneColorNames).call(twotoneColorNames, function (colorName) {
+      return ___EmotionJSX(IconBadge, {
+        key: colorName,
+        baseSize: 24,
+        circleSize: 10,
+        colorId: colorIdToHashTo[colorName]
+      }, ___EmotionJSX(Icon, {
+        icon: AccountMultipleOutlineIcon,
+        title: {
+          name: "".concat(colorName, " icon")
+        }
+      }), ___EmotionJSX(Icon, {
+        icon: ArrowIcon,
+        size: "xxs",
+        title: {
+          name: "".concat(colorName, " badge icon")
+        }
+      }));
+    }));
+  }
   return ___EmotionJSX(Box, null, ___EmotionJSX(IconBadge, _extends({}, args, {
     baseSize: 25,
     circleSize: 15,
-    circleColor: circleColor
+    circleColor: circleColor()
   }), ___EmotionJSX(Icon, {
     icon: GroupIcon,
     size: "25px",
-    color: iconColor,
+    color: iconColor(),
     title: {
       name: 'Group Icon'
     }
   }), ___EmotionJSX(Icon, {
     icon: ArrowIcon,
     size: "13px",
-    color: iconColor,
+    color: iconColor(),
     title: {
       name: 'Arrow Icon'
     }

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

@@ -0,0 +1,20 @@
+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%'
+};
+export default {
+  container: container,
+  badgeCircle: badgeCircle
+};

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

@@ -1,8 +1,10 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
-import { render, screen } from '@testing-library/react';
 import { Icon, IconBadge } from '../../index';
+import { render, screen } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import getColorFromUUID from '../Avatar/getColorFromUuid';
+import { injectTwotoneColor, resolveTwotonePath } from './IconBadge';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-icon';
 var defaultProps = {
@@ -68,4 +70,55 @@ test('iconbadge borderRadius renders correctly', function () {
   var icons = 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 = resolveTwotonePath('uuid-1', colorNames);
+    expect(path).not.toBeNull();
+    expect(path('text')).toBe("twoTone.text.".concat(getColorFromUUID('uuid-1', colorNames)));
+    expect(path('secondary')).toBe("twoTone.secondary.".concat(getColorFromUUID('uuid-1', colorNames)));
+    expect(path('bg')).toBe("twoTone.bg.".concat(getColorFromUUID('uuid-1', colorNames)));
+  });
+  test('returns the same color for the same colorId', function () {
+    var firstPath = resolveTwotonePath('uuid-1', colorNames);
+    var secondPath = resolveTwotonePath('uuid-1', colorNames);
+    expect(firstPath('text')).toBe(secondPath('text'));
+  });
+  test('returns null when colorId is missing', function () {
+    expect(resolveTwotonePath(undefined, colorNames)).toBeNull();
+    expect(resolveTwotonePath('', colorNames)).toBeNull();
+  });
+  test('returns null when twotone color names are missing', function () {
+    expect(resolveTwotonePath('uuid-1', undefined)).toBeNull();
+  });
+});
+describe('injectTwotoneColor', function () {
+  var colorNames = ['orange', 'cyan', 'green'];
+  var twotonePath = resolveTwotonePath('uuid-1', colorNames);
+  test('injects a twotone color into an icon without a color prop', function () {
+    var icon = ___EmotionJSX(Icon, {
+      icon: ThisIcon
+    });
+    var result = injectTwotoneColor(icon, 'text', twotonePath);
+    expect(result).toHaveProperty('props.color', twotonePath('text'));
+  });
+  test('does not override an existing color prop', function () {
+    var icon = ___EmotionJSX(Icon, {
+      icon: ThisIcon,
+      color: "accent.40"
+    });
+    var result = 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 = ___EmotionJSX(Icon, {
+      icon: ThisIcon
+    });
+    expect(injectTwotoneColor(icon, 'text', null)).toBe(icon);
+  });
+  test('returns non-element children unchanged', function () {
+    expect(injectTwotoneColor('text', 'text', twotonePath)).toBe('text');
+    expect(injectTwotoneColor(null, 'text', twotonePath)).toBeNull();
+  });
 });

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

@@ -10,6 +10,7 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 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) { _defineProperty(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; }
 import tShirtSizes from '../../styles/themes/astro/customProperties/tShirtSizes';
+import { arrayFieldDeleteButton } from '../ArrayField/ArrayFieldDeleteButton.styles';
 import { badgeDeleteButton, deleteButton, invertedBadgeDeleteButton } from '../Badge/Badge.styles';
 import { defaultActive, defaultFocus, defaultHover } from '../Button/Buttons.styles';
 import { toggle } from '../CollapsiblePanel/CollapsiblePanel.styles';
@@ -175,6 +176,9 @@ var filter = _objectSpread(_objectSpread({}, base), {}, {
 export default {
   base: base,
   bidirectional: bidirectional,
+  arrayField: {
+    deleteButton: arrayFieldDeleteButton.deleteButton
+  },
   badge: {
     deleteButton: deleteButton
   },

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

@@ -82,6 +82,7 @@ export var WithLabelIcon = function WithLabelIcon(args) {
   });
   return ___EmotionJSX(LabelValuePairs, args, ___EmotionJSX(Pair, null, ___EmotionJSX(PairLabel, null, "Status", ___EmotionJSX(Box, {
     isRow: true,
+    ml: "xs",
     gap: "xs",
     alignItems: "center"
   }, icon, ___EmotionJSX(Text, {

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

@@ -32,8 +32,9 @@ function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymb
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context5, _context6; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context5 = ownKeys(Object(t), !0)).call(_context5, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context6 = ownKeys(Object(t))).call(_context6, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
 import InformationIcon from '@pingux/mdi-react/InformationIcon';
+import { astroTokens, astroTokensDark } from '@pingux/onyx-tokens';
 import userEvent from '@testing-library/user-event';
-import { Icon } from '../../index';
+import { AstroProvider, Icon, OnyxDarkTheme, OnyxTheme } from '../../index';
 import { act, render, screen } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import LabelValuePairs, { Pair, PairLabel, PairSubvalue, PairValue, ValueTypes } from '.';
@@ -42,6 +43,12 @@ var originalClipboard = _objectSpread({}, global.navigator.clipboard);
 var getComponent = function getComponent(children) {
   return render(___EmotionJSX(LabelValuePairs, null, children));
 };
+var getThemedComponent = function getThemedComponent(theme, children) {
+  return render(___EmotionJSX(AstroProvider, {
+    themeOverrides: [theme]
+  }, ___EmotionJSX(LabelValuePairs, null, children)));
+};
+var valuePair = ___EmotionJSX(Pair, null, ___EmotionJSX(PairLabel, null, "Username"), ___EmotionJSX(PairValue, null, "jsmith"));
 
 // Needs to be added to each components test file
 universalComponentTests({
@@ -50,10 +57,20 @@ universalComponentTests({
   }
 });
 test('renders a row for each field with a value', function () {
-  getComponent(___EmotionJSX(Pair, null, ___EmotionJSX(PairLabel, null, "Username"), ___EmotionJSX(PairValue, null, "jsmith")));
+  getComponent(valuePair);
   expect(screen.getByText('Username')).toBeInTheDocument();
   expect(screen.getByText('jsmith')).toBeInTheDocument();
 });
+describe('value color', function () {
+  test('uses the primary Onyx light text color', function () {
+    getThemedComponent(OnyxTheme, valuePair);
+    expect(screen.getByText('jsmith')).toHaveStyleRule('color', astroTokens.color.font.base);
+  });
+  test('uses the primary Onyx dark text color', function () {
+    getThemedComponent(OnyxDarkTheme, valuePair);
+    expect(screen.getByText('jsmith')).toHaveStyleRule('color', astroTokensDark.color.font.base);
+  });
+});
 test('rows with falsy value are not rendered unless isLoading is true', function () {
   getComponent(___EmotionJSX(React.Fragment, null, ___EmotionJSX(Pair, null, ___EmotionJSX(PairLabel, null, "Empty Field"), ___EmotionJSX(PairValue, null)), ___EmotionJSX(Pair, null, ___EmotionJSX(PairLabel, null, "Null Field"), ___EmotionJSX(PairValue, null, null)), ___EmotionJSX(Pair, null, ___EmotionJSX(PairLabel, null, "Visible Field"), ___EmotionJSX(PairValue, null, "some value"))));
   expect(screen.queryByText('Empty Field')).not.toBeInTheDocument();

package/lib/components/LabelValuePairs/LabelValuePairsLabel.js

@@ -32,8 +32,7 @@ var PairLabel = /*#__PURE__*/forwardRef(function (props, ref) {
   return ___EmotionJSX(Box, _extends({
     ref: ref,
     isRow: true,
-    alignItems: "center",
-    gap: "sm"
+    alignItems: "center"
   }, others, containerProps), ___EmotionJSX(Text, _extends({}, defaultTextProps, textProps), label), icon, helpHint && ___EmotionJSX(HelpHint, _extends({
     iconButtonProps: {
       'aria-label': "".concat(label, " help hint")

package/lib/components/ListView/ListView.js

@@ -10,7 +10,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-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 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) { _defineProperty(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; }
 import React, { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react';
@@ -19,9 +19,11 @@ import { useTreeState } from 'react-stately';
 import { useCollator } from '@react-aria/i18n';
 import { Virtualizer, VirtualizerItem } from '@react-aria/virtualizer';
 import { ListLayout } from '@react-stately/layout';
+import { useGetTheme } from '../../hooks';
 import useLoadPrev from '../../hooks/useLoadPrev';
 import { Box } from '../../index';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
+import EmptyState from '../EmptyState';
 import Loader from '../Loader';
 import { ListViewContext } from './ListViewContext';
 import ListViewExpandableItem from './ListViewExpandableItem';
@@ -38,12 +40,14 @@ export 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 = useMemo(function () {
     return new ListLayout({
       estimatedRowHeight: ROW_HEIGHT,
       estimatedHeadingHeight: 26,
       loaderHeight: ROW_HEIGHT,
-      placeholderHeight: ROW_HEIGHT,
       collator: collator
     });
   }, [collator, state.collection]);
@@ -67,11 +71,14 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
     selectionStyle = props.selectionStyle,
     items = props.items,
     onFocus = props.onFocus,
+    renderEmptyState = props.renderEmptyState,
     others = _objectWithoutProperties(props, _excluded);
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     hoveredItem = _useState2[0],
     setHoveredItem = _useState2[1];
+  var _useGetTheme = useGetTheme(),
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var isLoading = loadingState === loadingStates.LOADING_MORE || loadingState === loadingStates.LOADING;
   var isFocusable = selectionMode !== 'none';
   var renderWrapper = function renderWrapper(parent, reusableView) {
@@ -81,6 +88,16 @@ var ListView = /*#__PURE__*/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 ? ___EmotionJSX(EmptyState, null) : null;
+  };
   var listViewRef = useRef(null);
 
   /* istanbul ignore next */
@@ -164,10 +181,14 @@ var ListView = /*#__PURE__*/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') {
@@ -194,6 +215,9 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
         }
       });
     }
+    if (type === collectionTypes.PLACEHOLDER) {
+      return renderEmpty();
+    }
     return null;
   })));
 });