@pingux/astro 2.174.2-alpha.0 → 2.175.0

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/navbar.js

@@ -98,13 +98,13 @@ var navBar = exports.navBar = {
   item: {
     px: '1rem',
     py: '.75rem',
-    color: 'text.primary',
+    color: 'textPrimary',
     fontFamily: 'standard',
     '&.is-hovered': {
       backgroundColor: 'background.hover'
     },
     '> div > svg': {
-      fill: 'text.primary'
+      fill: 'textPrimary'
     },
     '&.is-selected': _objectSpread(_objectSpread({}, navBarSelected), {}, {
       '> div > svg': {

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

@@ -170,6 +170,10 @@ var navBar = {
     '> div > svg': {
       fill: '#455469'
     },
+    '> div > span': {
+      color: '#455469',
+      fill: '#455469'
+    },
     '> svg': {
       fill: '#455469'
     },
@@ -180,8 +184,18 @@ var navBar = {
       '> div > svg': {
         fill: 'accent.40'
       },
+      '> div > span': {
+        color: 'accent.40'
+      },
+      '> span': {
+        color: 'accent.40',
+        fill: 'accent.40'
+      },
       '> svg': {
         fill: 'accent.40'
+      },
+      '&.is-hovered': {
+        backgroundColor: '#f6f8fa'
       }
     }),
     '&.is-focused': {
@@ -199,12 +213,18 @@ var navBar = {
     px: '1rem',
     borderRadius: '4px',
     py: '.75rem',
+    '&.is-hovered': {
+      backgroundColor: '#f6f8fa'
+    },
     '&.is-selected': _objectSpread(_objectSpread({}, navBarSelected), {}, {
       '> svg': {
         fill: 'accent.40'
       },
       '> div > svg': {
         fill: '#4462ED !important'
+      },
+      '&.is-hovered': {
+        backgroundColor: '#f6f8fa'
       }
     }),
     backgroundColor: 'transparent',
@@ -235,11 +255,25 @@ var separator = {
     my: '10px'
   }
 };
+var navItemLink = {
+  borderRadius: '4px',
+  '&.is-focused': {
+    outline: '2px solid',
+    outlineColor: 'active',
+    outlineOffset: '-2px',
+    boxShadow: 'none',
+    WebkitBoxShadow: 'none',
+    MozBoxShadow: 'none'
+  }
+};
 var _default = exports["default"] = {
   variants: {
     navBar: navBar,
     separator: separator
   },
+  links: {
+    navItem: _objectSpread({}, navItemLink)
+  },
   icons: _objectSpread(_objectSpread({}, _icons["default"]), {}, {
     test: 'test',
     MenuDown: _ChevronDownIcon["default"],

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

@@ -183,6 +183,7 @@ var variants = {
   navBar: {
     sectionButton: _objectSpread(_objectSpread({}, _theme["default"].variants.navBar.sectionButton), {}, {
       height: 'unset',
+      fontWeight: '500',
       minHeight: '36px',
       '&:not(.disabled):hover': _objectSpread({}, _theme["default"].variants.navBar.sectionButton),
       ':focus': {
@@ -192,9 +193,16 @@ var variants = {
     itemButton: _objectSpread(_objectSpread({
       height: 'unset'
     }, _theme["default"].variants.navBar.itemButton), {}, {
-      '&:not(.disabled):hover': _objectSpread({}, _theme["default"].variants.navBar.itemButton),
+      fontWeight: '500',
+      '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _theme["default"].variants.navBar.itemButton), {}, {
+        fontWeight: '500'
+      }),
       ':focus': {
         border: 'none'
+      },
+      ':hover': {
+        color: 'neutral.90',
+        fontWeight: '500'
       }
     })
   }

package/lib/cjs/styles/themes/next-gen/variants/links.js

@@ -116,10 +116,18 @@ var skip = {
   height: '40px',
   lineHeight: '24px'
 };
+var navItem = {
+  boxShadow: 'none !important',
+  '&.is-focused': _objectSpread(_objectSpread({}, navBarFocus), {}, {
+    borderRadius: '4px',
+    outlineOffset: '-2px'
+  })
+};
 var _default = exports["default"] = {
   app: app,
   skip: skip,
   nextGen: nextGen,
+  navItem: navItem,
   onyx: onyx,
   sideNav: sideNav,
   footerLinks: footerLinks,

package/lib/cjs/styles/themes/next-gen/variants/navbar.js

@@ -29,6 +29,14 @@ var navBarFocus = exports.navBarFocus = {
   outlineOffset: '-2px'
 };
 var navBar = exports.navBar = {
+  itemIcon: {
+    color: 'blue',
+    fill: 'blue'
+  },
+  itemIconSelected: {
+    color: 'darkblue',
+    fill: 'darkblue'
+  },
   container: {
     fontFamily: 'standard',
     width: '252px',
@@ -107,12 +115,21 @@ var navBar = exports.navBar = {
     '> div > svg': {
       fill: _onyxTokens.astroTokens.color.gray[700]
     },
+    '> div > span': {
+      color: 'gray-700'
+    },
     '&.is-pressed': {
       backgroundColor: _onyxTokens.astroTokens.color.gray[200]
     },
     '&.is-selected': _objectSpread(_objectSpread({}, navBarSelected), {}, {
       '> div > svg': {
         fill: 'darkblue'
+      },
+      '> div > span': {
+        color: 'darkblue'
+      },
+      '&.is-hovered': {
+        backgroundColor: 'light'
       }
     }),
     '&.is-focused': {
@@ -129,7 +146,20 @@ var navBar = exports.navBar = {
     maxWidth: '236px',
     px: '1rem',
     py: '.75rem',
-    '&.is-selected': _objectSpread({}, navBarSelected),
+    '&.is-selected': _objectSpread(_objectSpread({}, navBarSelected), {}, {
+      '> svg': {
+        fill: 'darkblue'
+      },
+      '> div > svg': {
+        fill: 'darkblue'
+      },
+      '> div > span': {
+        color: 'darkblue'
+      }
+    }),
+    '&.is-hovered': {
+      backgroundColor: 'light'
+    },
     backgroundColor: 'transparent',
     '> svg': {
       fill: _onyxTokens.astroTokens.color.gray[700]

package/lib/components/Link/Link.styles.js

@@ -9,6 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 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 { focus } from '../../styles/colors';
 import { focusWithCroppedOutline } from '../Button/Buttons.styles';
 var app = {
   color: 'active',
@@ -28,6 +29,14 @@ var app = {
     pointerEvents: 'none'
   }
 };
+var navItem = {
+  '&.is-focused': {
+    outline: 'none',
+    boxShadow: "0 0 0 1px ".concat(focus),
+    WebkitBoxShadow: "0 0 0 1px ".concat(focus),
+    MozBoxShadow: "0 0 0 1px ".concat(focus)
+  }
+};
 var web = _objectSpread(_objectSpread({}, app), {}, {
   textDecoration: 'underline',
   '&:visited': {
@@ -97,5 +106,6 @@ export default {
   web: web,
   copyRightLink: copyRightLink,
   footerLink: footerLink,
-  footerEALink: footerEALink
+  footerEALink: footerEALink,
+  navItem: navItem
 };

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

@@ -42,6 +42,9 @@ var itemHeaderContainer = {
   '&.is-selected': {
     backgroundColor: 'accent.5',
     boxShadow: 'inset 2px 0 0 0 white'
+  },
+  '&.is-hovered': {
+    bg: 'accent.10'
   }
 };
 var popUpItemHeaderContainer = _objectSpread(_objectSpread({}, itemHeaderContainer), {}, {
@@ -153,13 +156,13 @@ var itemButton = _objectSpread(_objectSpread({
     outline: '1px solid',
     outlineColor: 'focus'
   },
-  '&.is-hovered': {
-    bg: 'accent.10'
-  },
   '&.is-selected': {
     bg: 'accent.5',
     boxShadow: 'inset 2px 0 0 0 white'
   },
+  '&.is-hovered': {
+    bg: 'accent.10'
+  },
   '&.is-pressed': {
     bg: 'accent.5'
   }
@@ -215,6 +218,9 @@ var popUpHeaderText = _objectSpread(_objectSpread({}, headerText), {}, {
     color: 'white'
   }
 });
+var logoParent = {
+  p: 'md'
+};
 var headerNav = {
   cursor: 'pointer',
   minHeight: '40px',
@@ -247,7 +253,13 @@ var item = _objectSpread(_objectSpread({}, headerNav), {}, {
   px: 'md',
   '&.is-selected': {
     backgroundColor: 'accent.5',
-    boxShadow: 'inset 2px 0 0 0 white'
+    boxShadow: 'inset 2px 0 0 0 white',
+    '&.is-hovered': {
+      backgroundColor: 'accent.10'
+    }
+  },
+  '&.is-hovered': {
+    backgroundColor: 'accent.10'
   }
 });
 var popUpItem = _objectSpread(_objectSpread({}, headerNav), {}, {
@@ -264,7 +276,7 @@ var sectionButton = _objectSpread(_objectSpread({}, quiet), {}, {
     outlineColor: 'focus'
   },
   '&.is-hovered': {
-    backgroundColor: 'accent.10'
+    backgroundColor: 'accent.10 '
   },
   '&.is-pressed': {
     backgroundColor: 'accent.5'
@@ -323,6 +335,9 @@ var itemCustomIconSelected = _objectSpread(_objectSpread({}, itemCustomIcon), {}
   color: 'white',
   fill: 'white'
 });
+var sideNavItem = _objectSpread(_objectSpread({}, item), {}, {
+  p: 0
+});
 export default {
   container: container,
   popUpContainer: popUpContainer,
@@ -346,6 +361,8 @@ export default {
   popUpNavBarItemBody: popUpNavBarItemBody,
   itemLinkButtonColor: itemLinkButtonColor,
   sectionList: sectionList,
+  sideNavItem: sideNavItem,
+  logoParent: logoParent,
   itemIcon: itemIcon,
   itemIconSelected: itemIconSelected,
   itemCustomIcon: itemCustomIcon,

package/lib/components/NavBar/stories/NavBarNextGenComponent.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, NavBar, NavBarItem, NavBarItemButton, NavBarSection, Separator } from '../../..';
+import { Box, NavBar, NavBarItem, NavBarItemButton, NavBarSection, NavSideBarItem, Separator } from '../../..';
 import { useGetTheme } from '../../../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var NavBarNextGenComponent = function NavBarNextGenComponent() {
@@ -157,13 +157,15 @@ export var NavBarNextGenComponent = function NavBarNextGenComponent() {
     id: "GettingStarted",
     key: "GettingStarted",
     text: "Getting Started"
-  }), ___EmotionJSX(NavBarItem, {
-    "data-id": "nav-bar-item",
+  }), ___EmotionJSX(NavSideBarItem, {
+    key: "Overview",
     icon: icons.overviewIcon,
     id: "Overview",
-    key: "Overview",
-    text: "Overview"
-  }), ___EmotionJSX(NavBarSection, {
+    linkProps: {
+      href: 'https://www.pingidentity.com',
+      target: '_blank'
+    }
+  }, "Overview"), ___EmotionJSX(NavBarSection, {
     items: firstSectionData,
     "data-id": "nav-bar-section"
   }), ___EmotionJSX(Separator, {

package/lib/components/NavBarSection/NavBarItem.js

@@ -47,10 +47,10 @@ var NavBarItem = /*#__PURE__*/forwardRef(function (props, ref) {
     isPressed = _usePress.isPressed;
   var mergedProps = mergeProps(pressProps, hoverProps, focusWithinProps, focusProps, others);
   var _useStatusClasses = useStatusClasses(className, {
-      isPressed: isPressed,
-      isHovered: isHovered,
       isSelected: isSelected,
-      isFocused: isFocusVisible
+      isHovered: isHovered,
+      isFocused: isFocusVisible,
+      isPressed: isPressed
     }),
     classNames = _useStatusClasses.classNames;
   var color = isSelected ? 'white' : 'neutral.95';

package/lib/components/NavBarSection/NavBarItemHeader.js

@@ -1,7 +1,9 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import React, { useEffect } from 'react';
+import { useHover } from '@react-aria/interactions';
 import { useNavBarContext } from '../../context/NavBarContext';
 import { useStatusClasses } from '../../hooks';
 import useGetTheme from '../../hooks/useGetTheme';
@@ -39,6 +41,9 @@ var NavBarSectionItemHeader = function NavBarSectionItemHeader(_ref2) {
     return i.key;
   });
   var isChildSelected = array && _includesInstanceProperty(array).call(array, navBarState.selectedKey);
+  var _useHover = useHover({}),
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
   useEffect(function () {
     if (isChildSelected && isExpanded === false) {
       var _context2;
@@ -46,7 +51,8 @@ var NavBarSectionItemHeader = function NavBarSectionItemHeader(_ref2) {
     }
   }, [selectedKey]);
   var _useStatusClasses = useStatusClasses(className, {
-      isSelected: isChildSelected && !isExpanded
+      isSelected: isChildSelected && !isExpanded,
+      isHovered: isHovered
     }),
     classNames = _useStatusClasses.classNames;
   var getIconColor = function getIconColor() {
@@ -55,12 +61,12 @@ var NavBarSectionItemHeader = function NavBarSectionItemHeader(_ref2) {
     }
     return isChildSelected && !isExpanded ? 'white' : 'neutral.95';
   };
-  return ___EmotionJSX(Box, {
+  return ___EmotionJSX(Box, _extends({}, hoverProps, {
     variant: navStyles.navBarItemHeader,
     className: classNames,
     isRow: true,
     "data-testid": heading
-  }, icon && ___EmotionJSX(Icon, {
+  }), icon && ___EmotionJSX(Icon, {
     icon: icon,
     size: navBarIconSize || 18,
     sx: {

package/lib/components/NavSideBar/NavSideBarItem.js

@@ -11,12 +11,13 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var NavSideBarItem = function NavSideBarItem(props) {
   var children = props.children,
     linkProps = props.linkProps;
-  console.log(props);
   if (linkProps && linkProps !== null && linkProps !== void 0 && linkProps.href) {
     return ___EmotionJSX(Link, _extends({}, linkProps, {
       sx: {
-        textDecoration: 'none !important'
-      }
+        textDecoration: 'none !important',
+        outlineOffset: 'unset'
+      },
+      variant: "navItem"
     }), ___EmotionJSX(ChildWrapper, props, children));
   }
   return ___EmotionJSX(Button, {
@@ -71,10 +72,10 @@ var ChildWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
       isFocused: isFocusVisible
     }),
     classNames = _useStatusClasses.classNames;
-  console.log(state.navStyles.navBarItem);
   return ___EmotionJSX(Box, _extends({
     id: key,
     variant: state.navStyles.navBarItem,
+    mb: "0px",
     isRow: true,
     alignItems: "center",
     className: classNames,

package/lib/styles/themeOverrides/nextGenDarkMode/variants/navbar.js

@@ -91,13 +91,13 @@ export var navBar = {
   item: {
     px: '1rem',
     py: '.75rem',
-    color: 'text.primary',
+    color: 'textPrimary',
     fontFamily: 'standard',
     '&.is-hovered': {
       backgroundColor: 'background.hover'
     },
     '> div > svg': {
-      fill: 'text.primary'
+      fill: 'textPrimary'
     },
     '&.is-selected': _objectSpread(_objectSpread({}, navBarSelected), {}, {
       '> div > svg': {

package/lib/styles/themeOverrides/onyxSideNav.js

@@ -163,6 +163,10 @@ var navBar = {
     '> div > svg': {
       fill: '#455469'
     },
+    '> div > span': {
+      color: '#455469',
+      fill: '#455469'
+    },
     '> svg': {
       fill: '#455469'
     },
@@ -173,8 +177,18 @@ var navBar = {
       '> div > svg': {
         fill: 'accent.40'
       },
+      '> div > span': {
+        color: 'accent.40'
+      },
+      '> span': {
+        color: 'accent.40',
+        fill: 'accent.40'
+      },
       '> svg': {
         fill: 'accent.40'
+      },
+      '&.is-hovered': {
+        backgroundColor: '#f6f8fa'
       }
     }),
     '&.is-focused': {
@@ -192,12 +206,18 @@ var navBar = {
     px: '1rem',
     borderRadius: '4px',
     py: '.75rem',
+    '&.is-hovered': {
+      backgroundColor: '#f6f8fa'
+    },
     '&.is-selected': _objectSpread(_objectSpread({}, navBarSelected), {}, {
       '> svg': {
         fill: 'accent.40'
       },
       '> div > svg': {
         fill: '#4462ED !important'
+      },
+      '&.is-hovered': {
+        backgroundColor: '#f6f8fa'
       }
     }),
     backgroundColor: 'transparent',
@@ -228,11 +248,25 @@ var separator = {
     my: '10px'
   }
 };
+var navItemLink = {
+  borderRadius: '4px',
+  '&.is-focused': {
+    outline: '2px solid',
+    outlineColor: 'active',
+    outlineOffset: '-2px',
+    boxShadow: 'none',
+    WebkitBoxShadow: 'none',
+    MozBoxShadow: 'none'
+  }
+};
 export default {
   variants: {
     navBar: navBar,
     separator: separator
   },
+  links: {
+    navItem: _objectSpread({}, navItemLink)
+  },
   icons: _objectSpread(_objectSpread({}, icons), {}, {
     test: 'test',
     MenuDown: ChevronDownIcon,

package/lib/styles/themeOverrides/uiLibraryOverride.js

@@ -176,6 +176,7 @@ var variants = {
   navBar: {
     sectionButton: _objectSpread(_objectSpread({}, theme.variants.navBar.sectionButton), {}, {
       height: 'unset',
+      fontWeight: '500',
       minHeight: '36px',
       '&:not(.disabled):hover': _objectSpread({}, theme.variants.navBar.sectionButton),
       ':focus': {
@@ -185,9 +186,16 @@ var variants = {
     itemButton: _objectSpread(_objectSpread({
       height: 'unset'
     }, theme.variants.navBar.itemButton), {}, {
-      '&:not(.disabled):hover': _objectSpread({}, theme.variants.navBar.itemButton),
+      fontWeight: '500',
+      '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.variants.navBar.itemButton), {}, {
+        fontWeight: '500'
+      }),
       ':focus': {
         border: 'none'
+      },
+      ':hover': {
+        color: 'neutral.90',
+        fontWeight: '500'
       }
     })
   }

package/lib/styles/themes/next-gen/variants/links.js

@@ -106,10 +106,18 @@ var skip = {
   height: '40px',
   lineHeight: '24px'
 };
+var navItem = {
+  boxShadow: 'none !important',
+  '&.is-focused': _objectSpread(_objectSpread({}, navBarFocus), {}, {
+    borderRadius: '4px',
+    outlineOffset: '-2px'
+  })
+};
 export default {
   app: app,
   skip: skip,
   nextGen: nextGen,
+  navItem: navItem,
   onyx: onyx,
   sideNav: sideNav,
   footerLinks: footerLinks,

package/lib/styles/themes/next-gen/variants/navbar.js

@@ -23,6 +23,14 @@ export var navBarFocus = {
   outlineOffset: '-2px'
 };
 export var navBar = {
+  itemIcon: {
+    color: 'blue',
+    fill: 'blue'
+  },
+  itemIconSelected: {
+    color: 'darkblue',
+    fill: 'darkblue'
+  },
   container: {
     fontFamily: 'standard',
     width: '252px',
@@ -101,12 +109,21 @@ export var navBar = {
     '> div > svg': {
       fill: astroTokens.color.gray[700]
     },
+    '> div > span': {
+      color: 'gray-700'
+    },
     '&.is-pressed': {
       backgroundColor: astroTokens.color.gray[200]
     },
     '&.is-selected': _objectSpread(_objectSpread({}, navBarSelected), {}, {
       '> div > svg': {
         fill: 'darkblue'
+      },
+      '> div > span': {
+        color: 'darkblue'
+      },
+      '&.is-hovered': {
+        backgroundColor: 'light'
       }
     }),
     '&.is-focused': {
@@ -123,7 +140,20 @@ export var navBar = {
     maxWidth: '236px',
     px: '1rem',
     py: '.75rem',
-    '&.is-selected': _objectSpread({}, navBarSelected),
+    '&.is-selected': _objectSpread(_objectSpread({}, navBarSelected), {}, {
+      '> svg': {
+        fill: 'darkblue'
+      },
+      '> div > svg': {
+        fill: 'darkblue'
+      },
+      '> div > span': {
+        color: 'darkblue'
+      }
+    }),
+    '&.is-hovered': {
+      backgroundColor: 'light'
+    },
     backgroundColor: 'transparent',
     '> svg': {
       fill: astroTokens.color.gray[700]

package/package.json

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