@pingux/astro 2.178.3 → 2.179.0-alpha.0

package/lib/cjs/styles/themeOverrides/onyxSideNav.js

@@ -38,9 +38,6 @@ var navBar = {
     boxShadow: '0 2px 11px rgba(0, 0, 0, .13)',
     zIndex: 2
   },
-  logoParent: {
-    p: '8px'
-  },
   sectionContainer: {
     pt: '0'
   },
@@ -272,7 +269,16 @@ var _default = exports["default"] = {
     separator: separator
   },
   links: {
-    navItem: _objectSpread({}, navItemLink)
+    navItem: _objectSpread({}, navItemLink),
+    pingLogo: {
+      padding: '15px',
+      borderRadius: '4px',
+      '&.is-focused': {
+        outline: '2px solid',
+        outlineColor: 'active',
+        outlineOffset: '-2px'
+      }
+    }
   },
   icons: _objectSpread(_objectSpread({}, _icons["default"]), {}, {
     test: 'test',

package/lib/cjs/styles/themeOverrides/uiLibraryOverride.js

@@ -146,6 +146,35 @@ var forms = {
 var links = {
   app: {
     '&:hover': _objectSpread({}, _theme["default"].links.app)
+  },
+  skip: {
+    '&:hover': {
+      color: 'white',
+      textDecoration: 'none',
+      '&:focus': {
+        outline: '2px solid',
+        outlineColor: 'active',
+        color: 'white',
+        textDecoration: 'none'
+      }
+    },
+    '&:visited': {
+      color: 'white',
+      textDecoration: 'none'
+    },
+    '&.is-pressed': {
+      color: 'white',
+      textDecoration: 'none'
+    }
+  },
+  pingLogo: {
+    '&:hover': {
+      '&.is-focused': {
+        outline: '2px solid',
+        outlineColor: 'active',
+        outlineOffset: '-2px'
+      }
+    }
   }
 };
 var variants = {

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/Link/Link.styles.js

@@ -99,9 +99,13 @@ var skip = {
     top: '10px'
   }
 };
+var pingLogo = _objectSpread(_objectSpread({}, app), {}, {
+  padding: '15px'
+});
 export default {
   app: app,
   skip: skip,
+  pingLogo: pingLogo,
   popover: popover,
   web: web,
   copyRightLink: copyRightLink,

package/lib/components/NavBar/NavBar.styles.js

@@ -218,9 +218,6 @@ var popUpHeaderText = _objectSpread(_objectSpread({}, headerText), {}, {
     color: 'white'
   }
 });
-var logoParent = {
-  p: 'md'
-};
 var headerNav = {
   cursor: 'pointer',
   minHeight: '40px',
@@ -362,7 +359,6 @@ export default {
   itemLinkButtonColor: itemLinkButtonColor,
   sectionList: sectionList,
   sideNavItem: sideNavItem,
-  logoParent: logoParent,
   itemIcon: itemIcon,
   itemIconSelected: itemIconSelected,
   itemCustomIcon: itemCustomIcon,

package/lib/styles/themeOverrides/onyxSideNav.js

@@ -31,9 +31,6 @@ var navBar = {
     boxShadow: '0 2px 11px rgba(0, 0, 0, .13)',
     zIndex: 2
   },
-  logoParent: {
-    p: '8px'
-  },
   sectionContainer: {
     pt: '0'
   },
@@ -265,7 +262,16 @@ export default {
     separator: separator
   },
   links: {
-    navItem: _objectSpread({}, navItemLink)
+    navItem: _objectSpread({}, navItemLink),
+    pingLogo: {
+      padding: '15px',
+      borderRadius: '4px',
+      '&.is-focused': {
+        outline: '2px solid',
+        outlineColor: 'active',
+        outlineOffset: '-2px'
+      }
+    }
   },
   icons: _objectSpread(_objectSpread({}, icons), {}, {
     test: 'test',

package/lib/styles/themeOverrides/uiLibraryOverride.js

@@ -139,6 +139,35 @@ var forms = {
 var links = {
   app: {
     '&:hover': _objectSpread({}, theme.links.app)
+  },
+  skip: {
+    '&:hover': {
+      color: 'white',
+      textDecoration: 'none',
+      '&:focus': {
+        outline: '2px solid',
+        outlineColor: 'active',
+        color: 'white',
+        textDecoration: 'none'
+      }
+    },
+    '&:visited': {
+      color: 'white',
+      textDecoration: 'none'
+    },
+    '&.is-pressed': {
+      color: 'white',
+      textDecoration: 'none'
+    }
+  },
+  pingLogo: {
+    '&:hover': {
+      '&.is-focused': {
+        outline: '2px solid',
+        outlineColor: 'active',
+        outlineOffset: '-2px'
+      }
+    }
   }
 };
 var variants = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.178.3",
+  "version": "2.179.0-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",