@pingux/astro 1.42.3 → 1.43.0-alpha.0

package/CHANGELOG.md

@@ -3,17 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [1.42.3](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.42.2...@pingux/astro@1.42.3) (2023-03-07)
-
-
-### Bug Fixes
-
-* [UIP-6181] DataTable error ([a99481e](https://gitlab.corp.pingidentity.com/ux/pingux/commit/a99481e31c31e74619cff883a7fde3c2da7a7ba5))
-
-
-
-
-
 ## [1.42.2](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.42.1...@pingux/astro@1.42.2) (2023-02-22)
 
 

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

@@ -38,6 +38,10 @@ var _TransitConnectionVariantIcon = _interopRequireDefault(require("mdi-react/Tr
 
 var _ViewDashboardIcon = _interopRequireDefault(require("mdi-react/ViewDashboardIcon"));
 
+var _ViewGridPlusOutlineIcon = _interopRequireDefault(require("mdi-react/ViewGridPlusOutlineIcon"));
+
+var _OpenInNewIcon = _interopRequireDefault(require("mdi-react/OpenInNewIcon"));
+
 var _index = require("../../index");
 
 var _react2 = require("@emotion/react");
@@ -299,6 +303,13 @@ var data = [{
   }, "Sender")]
 }];
 var secondData = [{
+  'data-id': 'da-vinci-data-id',
+  icon: _ViewGridPlusOutlineIcon["default"],
+  key: 'DaVinci',
+  heading: 'DaVinci',
+  customIcon: _OpenInNewIcon["default"],
+  href: 'https://pingidentity.com/'
+}, {
   'data-id': 'mfa-data-id',
   icon: _FingerprintIcon["default"],
   key: 'MFA',
@@ -374,7 +385,8 @@ var thirdData = [{
 
 var Default = function Default() {
   return (0, _react2.jsx)(_index.NavBar, null, (0, _react2.jsx)(_index.Box, {
-    padding: "md"
+    padding: "md",
+    key: "top-logo-parent"
   }, (0, _react2.jsx)(_index.Link, {
     "aria-label": "home link",
     href: "https://pingidentity.com",
@@ -384,7 +396,8 @@ var Default = function Default() {
     backgroundColor: "neutral.60"
   }), (0, _react2.jsx)(_index.Box, {
     variant: "navBar.sectionContainer",
-    paddingBottom: "xl"
+    paddingBottom: "xl",
+    key: "first-section-container"
   }, (0, _react2.jsx)(_index.NavBarItem, {
     "data-id": "nav-bar-item",
     icon: _GlobeIcon["default"],

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

@@ -36,6 +36,10 @@ var _ScaleBalanceIcon = _interopRequireDefault(require("mdi-react/ScaleBalanceIc
 
 var _VerifiedIcon = _interopRequireDefault(require("mdi-react/VerifiedIcon"));
 
+var _ViewGridPlusOutlineIcon = _interopRequireDefault(require("mdi-react/ViewGridPlusOutlineIcon"));
+
+var _OpenInNewIcon = _interopRequireDefault(require("mdi-react/OpenInNewIcon"));
+
 var _ = require("../../");
 
 var _NavBar = _interopRequireDefault(require("./NavBar"));
@@ -90,6 +94,13 @@ var data = [{
   children: ['Users', 'Group', 'Populations', 'Attributes', 'Roles']
 }];
 var secondData = [{
+  'data-id': 'da-vinci-data-id',
+  icon: _ViewGridPlusOutlineIcon["default"],
+  key: 'DaVinci',
+  heading: 'DaVinci',
+  customIcon: _OpenInNewIcon["default"],
+  href: 'https://pingidentity.com/'
+}, {
   icon: _FingerprintIcon["default"],
   key: 'MFA',
   heading: 'MFA',

package/lib/cjs/components/NavBarSection/NavBarItemHeader.js

@@ -43,6 +43,17 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var NavBarItemHeader = function NavBarItemHeader(props) {
+  var item = props.item;
+  var children = item.children,
+      href = item.href;
+  return !children && href ? (0, _react2.jsx)(NavBarPrimaryItemHeader, {
+    item: item
+  }) : (0, _react2.jsx)(NavBarSectionItemHeader, {
+    item: item
+  });
+};
+
+var NavBarSectionItemHeader = function NavBarSectionItemHeader(props) {
   var _context;
 
   var item = props.item;
@@ -82,7 +93,7 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
     icon: icon,
     size: "sm",
     sx: {
-      mr: '10px',
+      mr: 'sm',
       color: color,
       fill: color
     },
@@ -106,13 +117,66 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
   })));
 };
 
+var NavBarPrimaryItemHeader = function NavBarPrimaryItemHeader(_ref) {
+  var item = _ref.item;
+  var icon = item.icon,
+      className = item.className,
+      heading = item.heading,
+      customIcon = item.customIcon;
+  return (0, _react2.jsx)(_index.Box, {
+    variant: "navBar.itemHeaderContainer",
+    className: className,
+    isRow: true,
+    "data-testid": heading
+  }, icon && (0, _react2.jsx)(_index.Icon, {
+    icon: icon,
+    size: "sm",
+    sx: {
+      mr: 'sm',
+      color: 'neutral.95',
+      fill: 'neutral.95'
+    },
+    "aria-hidden": "true"
+  }), (0, _react2.jsx)(_index.Text, {
+    variant: "navBarHeaderText"
+  }, heading), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    alignItems: "center",
+    sx: {
+      ml: 'auto'
+    }
+  }, customIcon ? (0, _react2.jsx)(_index.Icon, {
+    icon: customIcon,
+    size: "sm",
+    sx: {
+      color: 'neutral.95',
+      fill: 'neutral.95'
+    }
+  }) : (0, _react2.jsx)(_react["default"].Fragment, null)));
+};
+
 NavBarItemHeader.propTypes = {
+  item: _propTypes["default"].shape({
+    children: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object])),
+    href: _propTypes["default"].string
+  })
+};
+NavBarSectionItemHeader.propTypes = {
   item: _propTypes["default"].shape({
     heading: _propTypes["default"].string,
     icon: _propTypes["default"].elementType,
     className: _propTypes["default"].string,
     children: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object])),
-    key: _propTypes["default"].string
+    key: _propTypes["default"].string,
+    href: _propTypes["default"].string
+  })
+};
+NavBarPrimaryItemHeader.propTypes = {
+  item: _propTypes["default"].shape({
+    heading: _propTypes["default"].string,
+    icon: _propTypes["default"].elementType,
+    className: _propTypes["default"].string,
+    customIcon: _propTypes["default"].elementType
   })
 };
 var _default = NavBarItemHeader;

package/lib/cjs/components/NavBarSection/NavBarSection.js

@@ -65,7 +65,7 @@ var NavBarSection = function NavBarSection(_ref) {
       others = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var ref = (0, _react.useRef)();
   var childrenItems = (0, _filter["default"])(items).call(items, function (item) {
-    return item.children;
+    return item.children || item.href;
   });
   return (0, _react2.jsx)(_react["default"].Fragment, null, hasSeparator && (0, _react2.jsx)(_.Separator, {
     variant: "separator.navBarSeparator"
@@ -82,7 +82,10 @@ var NavBarSection = function NavBarSection(_ref) {
   }, others), (0, _map["default"])(childrenItems).call(childrenItems, function (item) {
     return (0, _react2.jsx)("li", {
       key: item.key
-    }, (0, _react2.jsx)(SectionItem, {
+    }, !item.children && item.href ? (0, _react2.jsx)(PrimaryItem, {
+      key: item.key,
+      item: item
+    }) : (0, _react2.jsx)(SectionItem, {
       key: item.key,
       item: item
     }));
@@ -182,6 +185,17 @@ var SectionItem = function SectionItem(_ref2) {
   }));
 };
 
+var PrimaryItem = function PrimaryItem(_ref3) {
+  var item = _ref3.item;
+  return (0, _react2.jsx)(_.Link, {
+    variant: "buttons.navBarSectionButton",
+    href: item.href,
+    target: "_blank"
+  }, (0, _react2.jsx)(_NavBarItemHeader["default"], {
+    item: item
+  }));
+};
+
 NavBarSection.defaultProps = {
   hasSeparator: false
 };
@@ -215,5 +229,10 @@ SectionItem.propTypes = {
   }),
   menuProps: _propTypes["default"].shape({})
 };
+PrimaryItem.propTypes = {
+  item: _propTypes["default"].shape({
+    href: _propTypes["default"].string
+  })
+};
 var _default = NavBarSection;
 exports["default"] = _default;

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

@@ -9,6 +9,8 @@ import GlobeIcon from 'mdi-react/GlobeIcon';
 import ScaleBalance from 'mdi-react/ScaleBalanceIcon';
 import TransitConnection from 'mdi-react/TransitConnectionVariantIcon';
 import ViewDashboard from 'mdi-react/ViewDashboardIcon';
+import ViewGridPlusOutline from 'mdi-react/ViewGridPlusOutlineIcon';
+import OpenInNew from 'mdi-react/OpenInNewIcon';
 import { Box, Link, NavBar, NavBarItem, NavBarItemButton, NavBarItemLink, NavBarSection, Separator } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -264,6 +266,13 @@ var data = [{
   }, "Sender")]
 }];
 var secondData = [{
+  'data-id': 'da-vinci-data-id',
+  icon: ViewGridPlusOutline,
+  key: 'DaVinci',
+  heading: 'DaVinci',
+  customIcon: OpenInNew,
+  href: 'https://pingidentity.com/'
+}, {
   'data-id': 'mfa-data-id',
   icon: Fingerprint,
   key: 'MFA',
@@ -338,7 +347,8 @@ var thirdData = [{
 }];
 export var Default = function Default() {
   return ___EmotionJSX(NavBar, null, ___EmotionJSX(Box, {
-    padding: "md"
+    padding: "md",
+    key: "top-logo-parent"
   }, ___EmotionJSX(Link, {
     "aria-label": "home link",
     href: "https://pingidentity.com",
@@ -348,7 +358,8 @@ export var Default = function Default() {
     backgroundColor: "neutral.60"
   }), ___EmotionJSX(Box, {
     variant: "navBar.sectionContainer",
-    paddingBottom: "xl"
+    paddingBottom: "xl",
+    key: "first-section-container"
   }, ___EmotionJSX(NavBarItem, {
     "data-id": "nav-bar-item",
     icon: GlobeIcon,

package/lib/components/NavBar/NavBar.test.js

@@ -11,6 +11,8 @@ import EmoticonHappy from 'mdi-react/EmoticonHappyOutlineIcon';
 import Fingerprint from 'mdi-react/FingerprintIcon';
 import ScaleBalance from 'mdi-react/ScaleBalanceIcon';
 import Verify from 'mdi-react/VerifiedIcon';
+import ViewGridPlusOutline from 'mdi-react/ViewGridPlusOutlineIcon';
+import OpenInNew from 'mdi-react/OpenInNewIcon';
 import { Box, NavBarSection, NavBarItem, NavBarItemButton, NavBarItemLink, Link, Button } from '../../';
 import NavBar from './NavBar';
 import axeTest from '../../utils/testUtils/testAxe';
@@ -56,6 +58,13 @@ var data = [{
   children: ['Users', 'Group', 'Populations', 'Attributes', 'Roles']
 }];
 var secondData = [{
+  'data-id': 'da-vinci-data-id',
+  icon: ViewGridPlusOutline,
+  key: 'DaVinci',
+  heading: 'DaVinci',
+  customIcon: OpenInNew,
+  href: 'https://pingidentity.com/'
+}, {
   icon: Fingerprint,
   key: 'MFA',
   heading: 'MFA',

package/lib/components/NavBarSection/NavBarItemHeader.js

@@ -11,6 +11,17 @@ import { useStatusClasses } from '../../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
 var NavBarItemHeader = function NavBarItemHeader(props) {
+  var item = props.item;
+  var children = item.children,
+      href = item.href;
+  return !children && href ? ___EmotionJSX(NavBarPrimaryItemHeader, {
+    item: item
+  }) : ___EmotionJSX(NavBarSectionItemHeader, {
+    item: item
+  });
+};
+
+var NavBarSectionItemHeader = function NavBarSectionItemHeader(props) {
   var _context;
 
   var item = props.item;
@@ -54,7 +65,7 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
     icon: icon,
     size: "sm",
     sx: {
-      mr: '10px',
+      mr: 'sm',
       color: color,
       fill: color
     },
@@ -78,13 +89,66 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
   })));
 };
 
+var NavBarPrimaryItemHeader = function NavBarPrimaryItemHeader(_ref) {
+  var item = _ref.item;
+  var icon = item.icon,
+      className = item.className,
+      heading = item.heading,
+      customIcon = item.customIcon;
+  return ___EmotionJSX(Box, {
+    variant: "navBar.itemHeaderContainer",
+    className: className,
+    isRow: true,
+    "data-testid": heading
+  }, icon && ___EmotionJSX(Icon, {
+    icon: icon,
+    size: "sm",
+    sx: {
+      mr: 'sm',
+      color: 'neutral.95',
+      fill: 'neutral.95'
+    },
+    "aria-hidden": "true"
+  }), ___EmotionJSX(Text, {
+    variant: "navBarHeaderText"
+  }, heading), ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center",
+    sx: {
+      ml: 'auto'
+    }
+  }, customIcon ? ___EmotionJSX(Icon, {
+    icon: customIcon,
+    size: "sm",
+    sx: {
+      color: 'neutral.95',
+      fill: 'neutral.95'
+    }
+  }) : ___EmotionJSX(React.Fragment, null)));
+};
+
 NavBarItemHeader.propTypes = {
+  item: PropTypes.shape({
+    children: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
+    href: PropTypes.string
+  })
+};
+NavBarSectionItemHeader.propTypes = {
   item: PropTypes.shape({
     heading: PropTypes.string,
     icon: PropTypes.elementType,
     className: PropTypes.string,
     children: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
-    key: PropTypes.string
+    key: PropTypes.string,
+    href: PropTypes.string
+  })
+};
+NavBarPrimaryItemHeader.propTypes = {
+  item: PropTypes.shape({
+    heading: PropTypes.string,
+    icon: PropTypes.elementType,
+    className: PropTypes.string,
+    customIcon: PropTypes.elementType
   })
 };
 export default NavBarItemHeader;

package/lib/components/NavBarSection/NavBarSection.js

@@ -10,7 +10,7 @@ import React, { useRef } from 'react';
 import { useFocusManager } from '@react-aria/focus';
 import { useKeyboard } from '@react-aria/interactions';
 import PropTypes from 'prop-types';
-import { Button, Separator, Text } from '../../';
+import { Button, Link, Separator, Text } from '../../';
 import { useNavBarContext } from '../../context/NavBarContext';
 import NavBarItemBody from './NavBarItemBody';
 import NavBarItemHeader from './NavBarItemHeader';
@@ -31,7 +31,7 @@ var NavBarSection = function NavBarSection(_ref) {
   var ref = useRef();
 
   var childrenItems = _filterInstanceProperty(items).call(items, function (item) {
-    return item.children;
+    return item.children || item.href;
   });
 
   return ___EmotionJSX(React.Fragment, null, hasSeparator && ___EmotionJSX(Separator, {
@@ -49,7 +49,10 @@ var NavBarSection = function NavBarSection(_ref) {
   }, others), _mapInstanceProperty(childrenItems).call(childrenItems, function (item) {
     return ___EmotionJSX("li", {
       key: item.key
-    }, ___EmotionJSX(SectionItem, {
+    }, !item.children && item.href ? ___EmotionJSX(PrimaryItem, {
+      key: item.key,
+      item: item
+    }) : ___EmotionJSX(SectionItem, {
       key: item.key,
       item: item
     }));
@@ -153,6 +156,17 @@ var SectionItem = function SectionItem(_ref2) {
   }));
 };
 
+var PrimaryItem = function PrimaryItem(_ref3) {
+  var item = _ref3.item;
+  return ___EmotionJSX(Link, {
+    variant: "buttons.navBarSectionButton",
+    href: item.href,
+    target: "_blank"
+  }, ___EmotionJSX(NavBarItemHeader, {
+    item: item
+  }));
+};
+
 NavBarSection.defaultProps = {
   hasSeparator: false
 };
@@ -186,4 +200,9 @@ SectionItem.propTypes = {
   }),
   menuProps: PropTypes.shape({})
 };
+PrimaryItem.propTypes = {
+  item: PropTypes.shape({
+    href: PropTypes.string
+  })
+};
 export default NavBarSection;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.42.3",
+  "version": "1.43.0-alpha.0",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",