@pingux/astro 2.178.4-alpha.0 → 2.180.1-alpha.0

package/lib/cjs/components/Avatar/Avatar.js

@@ -44,14 +44,16 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     isSquare = props.isSquare,
     isLogo = props.isLogo,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-
-  // this will use color prop if provided,
-  // else will map colorId to a color, else defaults to 'green'
+  var safeColorId = colorId || '_INTERNAL_DEFAULT_ID_';
+  if (process.env.NODE_ENV !== 'production') {
+    if (!src && !color && !colorId) {
+      console.warn("[Astro] Avatar: No 'src', 'color', or 'colorId' provided. " + 'The component is falling back to a default generated color.');
+    }
+  }
   var finalColor = (0, _react.useMemo)(function () {
     if (color) return color;
-    if (colorId) return (0, _getColorFromUuid["default"])(colorId, _constants.avatarColors);
-    return 'green';
-  }, [color, colorId, _constants.avatarColors]);
+    return (0, _getColorFromUuid["default"])(safeColorId, _constants.avatarColors);
+  }, [color, safeColorId]);
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, "is-".concat(finalColor), finalColor), "size-".concat(size), size), "font-size-".concat(size), src ? false : size), 'is-square', isSquare), 'is-image', src), 'is-logo', isLogo)),
     classNames = _useStatusClasses.classNames;
   if (src) {

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

@@ -46,12 +46,14 @@ test('an avatar is rendered with custom alt', function () {
   expect(img).toHaveAttribute('alt', 'Custom Alt');
 });
 test('an avatar is rendered with custom alt', function () {
+  var warnSpy = jest.spyOn(console, 'warn').mockImplementation();
   getComponent({
     src: undefined,
     defaultText: 'KL'
   });
   var avatar = _testWrapper.screen.getByText('KL');
   expect(avatar).toBeInTheDocument();
+  warnSpy.mockRestore();
 });
 describe('getColorFromUUID', function () {
   test('returns a consistent color for the same UUID', function () {
@@ -110,6 +112,61 @@ describe('getColorFromUUID', function () {
     expect(avatar).toHaveClass('is-green');
   });
 });
+describe('Avatar fallback behavior', function () {
+  test('warns in development when no src, color, or colorId is provided', function () {
+    var warnSpy = jest.spyOn(console, 'warn').mockImplementation();
+    getComponent({
+      src: undefined
+    });
+    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining("No 'src', 'color', or 'colorId' provided"));
+    warnSpy.mockRestore();
+  });
+  test('does not crash when colorId is null', function () {
+    var warnSpy = jest.spyOn(console, 'warn').mockImplementation();
+    getComponent({
+      src: undefined,
+      colorId: null
+    });
+    var avatar = _testWrapper.screen.getByTestId(datatestId);
+    var classList = (0, _from["default"])(avatar.classList);
+    var colorClass = (0, _find["default"])(classList).call(classList, function (cls) {
+      return (0, _startsWith["default"])(cls).call(cls, 'is-');
+    });
+    expect(colorClass).toBeDefined();
+    warnSpy.mockRestore();
+  });
+  test('two avatars with missing colorId get the same color class', function () {
+    var _context, _context2;
+    var warnSpy = jest.spyOn(console, 'warn').mockImplementation();
+    var _render = (0, _testWrapper.render)((0, _react2.jsx)(_["default"], {
+        "data-testid": "avatar-1"
+      })),
+      unmount = _render.unmount;
+    var avatar1 = _testWrapper.screen.getByTestId('avatar-1');
+    var colorClass1 = (0, _find["default"])(_context = (0, _from["default"])(avatar1.classList)).call(_context, function (cls) {
+      return (0, _startsWith["default"])(cls).call(cls, 'is-');
+    });
+    unmount();
+    (0, _testWrapper.render)((0, _react2.jsx)(_["default"], {
+      "data-testid": "avatar-2"
+    }));
+    var avatar2 = _testWrapper.screen.getByTestId('avatar-2');
+    var colorClass2 = (0, _find["default"])(_context2 = (0, _from["default"])(avatar2.classList)).call(_context2, function (cls) {
+      return (0, _startsWith["default"])(cls).call(cls, 'is-');
+    });
+    expect(colorClass1).toBe(colorClass2);
+    warnSpy.mockRestore();
+  });
+  test('does not warn when color prop is provided', function () {
+    var warnSpy = jest.spyOn(console, 'warn').mockImplementation();
+    getComponent({
+      src: undefined,
+      color: 'blue'
+    });
+    expect(warnSpy).not.toHaveBeenCalled();
+    warnSpy.mockRestore();
+  });
+});
 describe('getColorFromUUID Distribution', function () {
   test('distributes 10,000 UUIDs evenly across 10 colors', function () {
     var iterations = 10000;

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

@@ -118,44 +118,44 @@ var Sizes = exports.Sizes = function Sizes() {
       borderBottom: 'unset'
     }
   }, (0, _react2.jsx)(_index.TableRow, {
-    height: "45px",
+    height: "auto",
     bg: "transparent !important"
   }, (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, null, "XXS | 9px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
     fontFamily: "monospace"
-  }, '<Icon icon={SearchIcon}/> size="xxs"/>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Icon, {
+  }, '<Icon icon={SearchIcon} size="xxs"/>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Icon, {
     icon: _SearchIcon["default"],
     size: "xxs",
     title: {
       name: 'Search Icon'
     }
   }))), (0, _react2.jsx)(_index.TableRow, {
-    height: "45px",
+    height: "auto",
     bg: "transparent !important"
   }, (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, null, "XS | 15px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
     fontFamily: "monospace"
-  }, '<Icon icon={SearchIcon}/> size="xs"/>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Icon, {
+  }, '<Icon icon={SearchIcon} size="xs"/>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Icon, {
     icon: _SearchIcon["default"],
     size: "xs",
     title: {
       name: 'Search Icon'
     }
   }))), (0, _react2.jsx)(_index.TableRow, {
-    height: "45px",
+    height: "auto",
     bg: "transparent !important"
   }, (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, null, "SM | 20px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
     fontFamily: "monospace"
-  }, '<Icon icon={SearchIcon}/> size="sm"/>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Icon, {
+  }, '<Icon icon={SearchIcon} size="sm"/>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Icon, {
     icon: _SearchIcon["default"],
     size: "sm",
     title: {
       name: 'Search Icon'
     }
   }))), (0, _react2.jsx)(_index.TableRow, {
-    height: "45px",
+    height: "auto",
     bg: "transparent !important"
   }, (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, null, "MD | 25px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
     fontFamily: "monospace"
-  }, '<Icon icon={SearchIcon}/> size="md"/>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Icon, {
+  }, '<Icon icon={SearchIcon} size="md"/>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Icon, {
     icon: _SearchIcon["default"],
     size: "md",
     title: {

package/lib/cjs/libs/astro/src/types/avatar.d.ts

@@ -10,7 +10,7 @@ export interface AvatarProps extends ThemeUIAvatarProps {
     defaultText?: string;
     size?: string;
     color?: string;
-    colorId?: string;
+    colorId?: string | null;
     isSquare?: boolean;
     isLogo?: boolean;
     'data-testid'?: string;