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

package/lib/components/Avatar/Avatar.js

@@ -34,14 +34,16 @@ var Avatar = /*#__PURE__*/forwardRef(function (props, ref) {
     isSquare = props.isSquare,
     isLogo = props.isLogo,
     others = _objectWithoutProperties(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 = useMemo(function () {
     if (color) return color;
-    if (colorId) return getColorFromUUID(colorId, avatarColors);
-    return 'green';
-  }, [color, colorId, avatarColors]);
+    return getColorFromUUID(safeColorId, avatarColors);
+  }, [color, safeColorId]);
   var _useStatusClasses = useStatusClasses(className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "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/components/Avatar/Avatar.test.js

@@ -43,12 +43,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 = screen.getByText('KL');
   expect(avatar).toBeInTheDocument();
+  warnSpy.mockRestore();
 });
 describe('getColorFromUUID', function () {
   test('returns a consistent color for the same UUID', function () {
@@ -107,6 +109,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 = screen.getByTestId(datatestId);
+    var classList = _Array$from(avatar.classList);
+    var colorClass = _findInstanceProperty(classList).call(classList, function (cls) {
+      return _startsWithInstanceProperty(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 = render(___EmotionJSX(Avatar, {
+        "data-testid": "avatar-1"
+      })),
+      unmount = _render.unmount;
+    var avatar1 = screen.getByTestId('avatar-1');
+    var colorClass1 = _findInstanceProperty(_context = _Array$from(avatar1.classList)).call(_context, function (cls) {
+      return _startsWithInstanceProperty(cls).call(cls, 'is-');
+    });
+    unmount();
+    render(___EmotionJSX(Avatar, {
+      "data-testid": "avatar-2"
+    }));
+    var avatar2 = screen.getByTestId('avatar-2');
+    var colorClass2 = _findInstanceProperty(_context2 = _Array$from(avatar2.classList)).call(_context2, function (cls) {
+      return _startsWithInstanceProperty(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/components/Icon/Icon.stories.js

@@ -111,44 +111,44 @@ export var Sizes = function Sizes() {
       borderBottom: 'unset'
     }
   }, ___EmotionJSX(TableRow, {
-    height: "45px",
+    height: "auto",
     bg: "transparent !important"
   }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, "XXS | 9px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
     fontFamily: "monospace"
-  }, '<Icon icon={SearchIcon}/> size="xxs"/>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(Icon, {
+  }, '<Icon icon={SearchIcon} size="xxs"/>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(Icon, {
     icon: SearchIcon,
     size: "xxs",
     title: {
       name: 'Search Icon'
     }
   }))), ___EmotionJSX(TableRow, {
-    height: "45px",
+    height: "auto",
     bg: "transparent !important"
   }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, "XS | 15px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
     fontFamily: "monospace"
-  }, '<Icon icon={SearchIcon}/> size="xs"/>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(Icon, {
+  }, '<Icon icon={SearchIcon} size="xs"/>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(Icon, {
     icon: SearchIcon,
     size: "xs",
     title: {
       name: 'Search Icon'
     }
   }))), ___EmotionJSX(TableRow, {
-    height: "45px",
+    height: "auto",
     bg: "transparent !important"
   }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, "SM | 20px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
     fontFamily: "monospace"
-  }, '<Icon icon={SearchIcon}/> size="sm"/>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(Icon, {
+  }, '<Icon icon={SearchIcon} size="sm"/>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(Icon, {
     icon: SearchIcon,
     size: "sm",
     title: {
       name: 'Search Icon'
     }
   }))), ___EmotionJSX(TableRow, {
-    height: "45px",
+    height: "auto",
     bg: "transparent !important"
   }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, "MD | 25px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
     fontFamily: "monospace"
-  }, '<Icon icon={SearchIcon}/> size="md"/>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(Icon, {
+  }, '<Icon icon={SearchIcon} size="md"/>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(Icon, {
     icon: SearchIcon,
     size: "md",
     title: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.178.4-alpha.0",
+  "version": "2.180.1-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",
@@ -36,7 +36,6 @@
     "@babel/runtime-corejs3": "7.13.8",
     "@emotion/react": "^11.1.1",
     "@emotion/styled": "^11.1.1",
-    "@faker-js/faker": "~7.5.0",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-brands-svg-icons": "^6.7.2",
     "@fortawesome/free-regular-svg-icons": "^6.7.2",
@@ -44,7 +43,6 @@
     "@internationalized/date": "^3.5.3",
     "@internationalized/number": "^3.6.0",
     "@material-symbols/font-400": "^0.40.2",
-    "@mdx-js/react": "^2.0.0",
     "@monaco-editor/react": "4.4.2",
     "@pingux/mdi-react": "^1.2.0",
     "@pingux/onyx-tokens": "^0.18.0",
@@ -99,28 +97,23 @@
     "@react-types/combobox": "^3.13.8",
     "@react-types/slider": "^3.7.9",
     "@styled-system/prop-types": "^5.1.5",
-    "@styled-system/props": "^5.1.5",
     "@styled-system/should-forward-prop": "^5.1.5",
     "@styled-system/theme-get": "^5.1.2",
     "chroma-js": "^2.1.0",
-    "chromatic": "^6.5.3",
     "classnames": "^2.2.6",
     "countries-list": "^2.6.1",
     "deepmerge": "^4.3.1",
     "emotion-normalize": "^11.0.1",
-    "globals": "^13.19.0",
     "listbox-layout": "npm:@react-stately/layout@3.9.0",
     "listbox-virtualizer": "npm:@react-aria/virtualizer@3.6.0",
     "lodash": "^4.17.23",
     "markdown-to-jsx": "^7.7.4",
-    "moment": "^2.29.4",
     "monaco-editor": "0.34.1",
     "pluralize": "^8.0.0",
     "prism-react-renderer": "1.2.1",
     "prismjs": "^1.27.0",
     "prop-types": "^15.7.2",
     "react-aria": "~3.19.0",
-    "react-calendar": "^3.4.0",
     "react-color": "^2.19.3",
     "react-dropzone": "^11.4.2",
     "react-stately": "^3.31.0",
@@ -162,7 +155,6 @@
     "@storybook/addons": "^7.1.0",
     "@storybook/react": "^7.1.0",
     "@storybook/react-vite": "^7.1.0",
-    "@storybook/react-webpack5": "^7.1.0",
     "@storybook/theming": "^7.1.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "15.0.6",
@@ -199,7 +191,6 @@
     "storybook-addon-designs": "beta",
     "ts-jest": "^29.0.0",
     "typescript": "~5.5.2",
-    "use-resize-observer": "^8.0.0",
     "vite-plugin-dts": "~3.8.1",
     "vitest": "^1.3.1",
     "whatwg-fetch": "^3.2.0",
@@ -222,7 +213,11 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-testing-library": "^7.0.0",
-    "webpack": "^5.84.1"
+    "@faker-js/faker": "~7.5.0",
+    "@nx/vite": "20.0.5",
+    "globals": "^13.19.0",
+    "@mdx-js/react": "^2.0.0",
+    "chromatic": "^6.5.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",