@pingux/astro 1.35.0-alpha.1 → 1.35.0-alpha.2

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

@@ -14,34 +14,34 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _react = _interopRequireDefault(require("react"));
 
-var _GlobeIcon = _interopRequireDefault(require("mdi-react/GlobeIcon"));
-
-var _ViewDashboardIcon = _interopRequireDefault(require("mdi-react/ViewDashboardIcon"));
-
 var _AccountMultipleIcon = _interopRequireDefault(require("mdi-react/AccountMultipleIcon"));
 
-var _TransitConnectionVariantIcon = _interopRequireDefault(require("mdi-react/TransitConnectionVariantIcon"));
+var _EarthIcon = _interopRequireDefault(require("mdi-react/EarthIcon"));
 
 var _EmoticonHappyOutlineIcon = _interopRequireDefault(require("mdi-react/EmoticonHappyOutlineIcon"));
 
 var _FingerprintIcon = _interopRequireDefault(require("mdi-react/FingerprintIcon"));
 
+var _GlobeIcon = _interopRequireDefault(require("mdi-react/GlobeIcon"));
+
 var _ScaleBalanceIcon = _interopRequireDefault(require("mdi-react/ScaleBalanceIcon"));
 
-var _EarthIcon = _interopRequireDefault(require("mdi-react/EarthIcon"));
+var _TransitConnectionVariantIcon = _interopRequireDefault(require("mdi-react/TransitConnectionVariantIcon"));
+
+var _ViewDashboardIcon = _interopRequireDefault(require("mdi-react/ViewDashboardIcon"));
 
 var _index = require("../../index");
 
 var _react2 = require("@emotion/react");
 
 var _default = {
-  title: 'NavBar',
   component: _index.NavBar,
   subcomponents: {
     NavBarSection: _index.NavBarSection,
     NavBarItemLink: _index.NavBarItemLink,
     NavBarItemButton: _index.NavBarItemButton
-  }
+  },
+  title: 'NavBar'
 };
 exports["default"] = _default;
 
@@ -150,36 +150,138 @@ var data = [{
     id: "Identities Link Users",
     href: "https://pingidentity.com/"
   }, "Users"), (0, _react2.jsx)(_index.NavBarItemLink, {
-    key: "Identities Link Group",
-    id: "Identities Link Group",
+    key: "Identities Link Groups",
+    id: "Identities Link Groups",
     href: "https://pingidentity.com/"
-  }, "Group")]
+  }, "Groups"), (0, _react2.jsx)(_index.NavBarItemLink, {
+    key: "Identities Link Populations",
+    id: "Identities Link Populations",
+    href: "https://pingidentity.com/"
+  }, "Populations"), (0, _react2.jsx)(_index.NavBarItemLink, {
+    key: "Identities Link Attributes",
+    id: "Identities Link Attributes",
+    href: "https://pingidentity.com/"
+  }, "Attributes"), (0, _react2.jsx)(_index.NavBarItemLink, {
+    key: "Identities Link Roles",
+    id: "Identities Link Roles",
+    href: "https://pingidentity.com/"
+  }, "Roles")]
 }, {
   icon: _TransitConnectionVariantIcon["default"],
   key: 'Connections',
   heading: 'Connections',
-  children: [(0, _react2.jsx)(_index.NavBarItemLink, {
-    key: "Connection Link Users",
-    id: "Connection Link Users",
+  children: [{
+    hasSeparator: false,
+    subTitle: 'Applications'
+  }, (0, _react2.jsx)(_index.NavBarItemLink, {
+    key: "Connections Applications",
+    id: "Connections Applications",
     href: "https://pingidentity.com/"
-  }, "Users"), (0, _react2.jsx)(_index.NavBarItemLink, {
-    key: "Connections Link Group",
-    id: "Connections Link Group",
+  }, "Applications"), (0, _react2.jsx)(_index.NavBarItemLink, {
+    key: "Connections Application Catalog",
+    id: "Connections Application Catalog",
     href: "https://pingidentity.com/"
-  }, "Group")]
+  }, "Application Catalog"), (0, _react2.jsx)(_index.NavBarItemLink, {
+    key: "Connections Application Portal",
+    id: "Connections Application Portal",
+    href: "https://pingidentity.com/"
+  }, "Application Portal"), {
+    subTitle: 'Identity Providers'
+  }, (0, _react2.jsx)(_index.NavBarItemLink, {
+    key: "Connections External IDPs",
+    id: "Connections External IDPs",
+    href: "https://pingidentity.com/"
+  }, "External IDPs"), {
+    subTitle: 'Ping Products'
+  }, (0, _react2.jsx)(_index.NavBarItemLink, {
+    key: "Connections PingFederate",
+    id: "Connections PingFederate",
+    href: "https://pingidentity.com/"
+  }, "PingFederate"), (0, _react2.jsx)(_index.NavBarItemLink, {
+    key: "Connections PingIntelligence",
+    id: "Connections PingIntelligence",
+    href: "https://pingidentity.com/"
+  }, "PingIntelligence"), (0, _react2.jsx)(_index.Separator, {
+    variant: "separator.navBarSubtitleSeparator"
+  }), (0, _react2.jsx)(_index.NavBarItemLink, {
+    key: "Connections Provisioning",
+    id: "Connections Provisioning",
+    href: "https://pingidentity.com/"
+  }, "Provisioning"), (0, _react2.jsx)(_index.NavBarItemLink, {
+    key: "Connections WebHooks",
+    id: "Connections WebHooks",
+    href: "https://pingidentity.com/"
+  }, "WebHooks"), (0, _react2.jsx)(_index.NavBarItemLink, {
+    key: "Connections Gateways",
+    id: "Connections Gateways",
+    href: "https://pingidentity.com/"
+  }, "Gateways"), (0, _react2.jsx)(_index.NavBarItemLink, {
+    key: "Connections Certificates & Key Pairs",
+    id: "Connections Certificates & Key Pairs",
+    href: "https://pingidentity.com/"
+  }, "Certificates & Key Pairs"), (0, _react2.jsx)(_index.NavBarItemLink, {
+    key: "Connections Resources",
+    id: "Connections Resources",
+    href: "https://pingidentity.com/"
+  }, "Resources")]
 }, {
   icon: _EmoticonHappyOutlineIcon["default"],
   key: 'Experiences',
   heading: 'Experiences',
-  children: [(0, _react2.jsx)(_index.NavBarItemLink, {
-    key: "Experiences Link Attributes",
-    id: "Experiences Link Attributes",
+  children: [{
+    hasSeparator: false,
+    subTitle: 'Policies'
+  }, (0, _react2.jsx)(_index.NavBarItemLink, {
+    key: "Experiences Authentication",
+    id: "Experiences Authentication",
     href: "https://pingidentity.com/"
-  }, "Attributes"), (0, _react2.jsx)(_index.NavBarItemLink, {
-    key: "Experiences Link Roles",
-    id: "Experiences Link Roles",
+  }, "Authentication"), (0, _react2.jsx)(_index.NavBarItemLink, {
+    key: "Experiences MFA",
+    id: "Experiences MFA",
     href: "https://pingidentity.com/"
-  }, "Roles")]
+  }, "MFA"), (0, _react2.jsx)(_index.NavBarItemLink, {
+    key: "Experiences Password",
+    id: "Experiences Password",
+    href: "https://pingidentity.com/"
+  }, "Password"), (0, _react2.jsx)(_index.Separator, {
+    variant: "separator.navBarSubtitleSeparator"
+  }), (0, _react2.jsx)(_index.NavBarItemLink, {
+    key: "Experiences Risk",
+    id: "Experiences Risk",
+    href: "https://pingidentity.com/"
+  }, "Risk"), (0, _react2.jsx)(_index.NavBarItemLink, {
+    key: "Experiences Flows",
+    id: "Experiences Flows",
+    href: "https://pingidentity.com/"
+  }, "Flows"), (0, _react2.jsx)(_index.NavBarItemLink, {
+    key: "Experiences Forms",
+    id: "Experiences Forms",
+    href: "https://pingidentity.com/"
+  }, "Forms"), (0, _react2.jsx)(_index.NavBarItemLink, {
+    key: "Experiences Languages",
+    id: "Experiences Languages",
+    href: "https://pingidentity.com/"
+  }, "Languages"), (0, _react2.jsx)(_index.NavBarItemLink, {
+    key: "Experiences Agreements",
+    id: "Experiences Agreements",
+    href: "https://pingidentity.com/"
+  }, "Agreements"), (0, _react2.jsx)(_index.NavBarItemLink, {
+    key: "Experiences Branding & Themes",
+    id: "Experiences Branding & Themes",
+    href: "https://pingidentity.com/"
+  }, "Branding & Themes"), (0, _react2.jsx)(_index.NavBarItemLink, {
+    key: "Experiences Notifications",
+    id: "Experiences Notifications",
+    href: "https://pingidentity.com/"
+  }, "Notifications"), (0, _react2.jsx)(_index.NavBarItemLink, {
+    key: "Experiences Vanity Domains",
+    id: "Experiences Vanity Domains",
+    href: "https://pingidentity.com/"
+  }, "Vanity Domains"), (0, _react2.jsx)(_index.NavBarItemLink, {
+    key: "Experiences Sender",
+    id: "Experiences Sender",
+    href: "https://pingidentity.com/"
+  }, "Sender")]
 }];
 var secondData = [{
   icon: _FingerprintIcon["default"],
@@ -189,7 +291,7 @@ var secondData = [{
     id: "MFA Button Users",
     key: "MFA Button Users"
   }, "Users"), {
-    isSubTitle: true,
+    hasSeparator: false,
     subTitle: 'PingOne Services'
   }, (0, _react2.jsx)(_index.NavBarItemButton, {
     key: "MFA Button Group",
@@ -203,7 +305,7 @@ var secondData = [{
     key: "Risk Button Users",
     id: "Risk Button Users"
   }, "Users"), {
-    isSubTitle: true,
+    hasSeparator: false,
     subTitle: 'PingOne Services'
   }, (0, _react2.jsx)(_index.NavBarItemButton, {
     key: "Risk Button Group",
@@ -217,7 +319,7 @@ var secondData = [{
     key: "Verify Button Users",
     id: "Verify Button Users"
   }, "Users"), {
-    isSubTitle: true,
+    hasSeparator: false,
     subTitle: 'PingOne Services'
   }, (0, _react2.jsx)(_index.NavBarItemButton, {
     key: "Verify Button Group",
@@ -231,7 +333,7 @@ var secondData = [{
     key: "Credentials Button Users",
     id: "Credentials Button Users"
   }, "Users"), {
-    isSubTitle: true,
+    hasSeparator: false,
     subTitle: 'PingOne Services'
   }, (0, _react2.jsx)(_index.NavBarItemButton, {
     key: "Credentials Button Group",

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

@@ -24,14 +24,14 @@ var _ScaleBalanceIcon = _interopRequireDefault(require("mdi-react/ScaleBalanceIc
 
 var _VerifiedIcon = _interopRequireDefault(require("mdi-react/VerifiedIcon"));
 
+var _ = require("../../");
+
 var _NavBar = _interopRequireDefault(require("./NavBar"));
 
 var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
 
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 
-var _index = require("../../index");
-
 var _react2 = require("@emotion/react");
 
 var DATA_ID = 'data-id';
@@ -39,11 +39,11 @@ var data = [{
   icon: _GlobeIcon["default"],
   key: 'Overview',
   heading: 'Overview',
-  children: [(0, _react2.jsx)(_index.NavBarItemButton, {
+  children: [(0, _react2.jsx)(_.NavBarItemButton, {
     key: "Credentials Button Users",
     id: "Credentials Button Users",
     "data-testid": "navItemButton"
-  }, "Users"), (0, _react2.jsx)(_index.NavBarItemLink, {
+  }, "Users"), (0, _react2.jsx)(_.NavBarItemLink, {
     key: "Experiences Link Roles",
     id: "Experiences Link Roles",
     href: "https://pingidentity.com/",
@@ -91,21 +91,21 @@ var secondData = [{
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _testWrapper.render)((0, _react2.jsx)(_NavBar["default"], props, (0, _react2.jsx)(_index.Box, {
+  return (0, _testWrapper.render)((0, _react2.jsx)(_NavBar["default"], props, (0, _react2.jsx)(_.Box, {
     sx: {
       height: '100%',
       maxHeight: '100%',
       overflowY: 'overlay !important'
     }
-  }, (0, _react2.jsx)(_index.NavBarSection, {
+  }, (0, _react2.jsx)(_.NavBarSection, {
     items: data,
     hasSeparator: true,
     "data-testid": DATA_ID,
     "data-id": DATA_ID
-  }), (0, _react2.jsx)(_index.NavBarSection, {
+  }), (0, _react2.jsx)(_.NavBarSection, {
     items: secondData,
     title: "test_title"
-  }), (0, _react2.jsx)(_index.NavBarItem, {
+  }), (0, _react2.jsx)(_.NavBarItem, {
     id: "Overview",
     key: "Overview",
     text: "Overview",
@@ -116,12 +116,12 @@ var getComponent = function getComponent() {
 
 var getComponentWithMultipleChildren = function getComponentWithMultipleChildren() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _testWrapper.render)((0, _react2.jsx)(_NavBar["default"], props, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, {
+  return (0, _testWrapper.render)((0, _react2.jsx)(_NavBar["default"], props, (0, _react2.jsx)(_.Box, null, (0, _react2.jsx)(_.Link, {
     href: "https://pingidentity.com",
     target: "_blank",
     "aria-label": "home link",
     "data-testid": "navLink"
-  }, "home")), (0, _react2.jsx)(_index.Button, {
+  }, "home")), (0, _react2.jsx)(_.Button, {
     "data-testid": "navButton"
   }, "test button")));
 };

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

@@ -34,39 +34,48 @@ 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 NavBarItemBody = function NavBarItemBody(props) {
+var NavBarItemBody = function NavBarItemBody(_ref) {
   var _context;
 
-  var item = props.item,
-      onKeyDown = props.onKeyDown;
-  return (0, _react2.jsx)(_index.Box, {
-    sx: {
-      alignItems: 'flex-start',
-      mb: '15px'
-    }
-  }, (0, _map["default"])(_context = item.children).call(_context, function (child) {
-    return child.subTitle ? (0, _react2.jsx)(_react.Fragment, {
-      key: "fragment".concat(child.subTitle)
-    }, (0, _react2.jsx)(_index.Separator, {
-      variant: "separator.navBarSubtitleSeparator",
-      key: "separator".concat(child.subTitle)
+  var item = _ref.item,
+      onKeyDown = _ref.onKeyDown;
+
+  var renderSubTitle = function renderSubTitle(child) {
+    var hasSeparator = child.hasSeparator,
+        subTitle = child.subTitle;
+    return (0, _react2.jsx)(_react.Fragment, {
+      key: "fragment".concat(subTitle)
+    }, (hasSeparator || hasSeparator === undefined) && (0, _react2.jsx)(_index.Separator, {
+      variant: "separator.navBarSubtitleSeparator"
     }), (0, _react2.jsx)(_index.Text, {
-      key: "text".concat(child.subTitle),
-      variant: "text.navBarSubtitle",
+      key: "text".concat(subTitle),
       sx: {
-        mb: '10px',
-        ml: '45px'
-      }
-    }, child.subTitle)) : (0, _react2.jsx)(ChildItemWrapper, {
+        mb: 'sm',
+        ml: '45px',
+        mt: 'md'
+      },
+      variant: "text.navBarSubtitle"
+    }, subTitle));
+  };
+
+  var renderChild = function renderChild(child) {
+    return child.subTitle ? renderSubTitle(child) : (0, _react2.jsx)(ChildItemWrapper, {
       onKeyDown: onKeyDown,
       key: "item".concat(child.key || child)
     }, child);
-  }));
+  };
+
+  return (0, _react2.jsx)(_index.Box, {
+    sx: {
+      alignItems: 'flex-start',
+      mb: '15px'
+    }
+  }, (0, _map["default"])(_context = item.children).call(_context, renderChild));
 };
 
-var ChildItemWrapper = function ChildItemWrapper(props) {
-  var children = props.children,
-      _onKeyDown = props.onKeyDown;
+var ChildItemWrapper = function ChildItemWrapper(_ref2) {
+  var children = _ref2.children,
+      _onKeyDown = _ref2.onKeyDown;
   var childrenKey = children.key || children;
 
   var _useKeyboard = (0, _interactions.useKeyboard)({

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

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _NavBarItemBody = _interopRequireDefault(require("./NavBarItemBody"));
+
+var _ = require("../../");
+
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+
+var _react2 = require("@emotion/react");
+
+var getComponent = function getComponent(item) {
+  return (0, _testWrapper.render)((0, _react2.jsx)(_NavBarItemBody["default"], {
+    item: {
+      children: [item]
+    }
+  }));
+};
+
+var SUBTITLE = 'subtitle';
+var TEXT = 'text';
+describe('NavBarItemBody', function () {
+  describe('when its passed a component', function () {
+    it('renders the component', function () {
+      var childItem = (0, _react2.jsx)(_.Text, null, TEXT);
+      getComponent(childItem);
+      expect(_testWrapper.screen.getByText(TEXT));
+    });
+  });
+  describe('when its passed an object', function () {
+    describe('when it has a subTitle', function () {
+      it('renders the subTitle and the separator', function () {
+        getComponent({
+          subTitle: SUBTITLE
+        });
+        expect(_testWrapper.screen.getByText(SUBTITLE));
+        expect(_testWrapper.screen.getByRole('separator'));
+      });
+    });
+    describe('when it has a subTitle and hasSeparator is false', function () {
+      it('renders the subTitle and no separator', function () {
+        getComponent({
+          subTitle: SUBTITLE,
+          hasSeparator: false
+        });
+        expect(_testWrapper.screen.getByText(SUBTITLE));
+        expect(_testWrapper.screen.queryByRole('separator')).not.toBeInTheDocument();
+      });
+    });
+  });
+});

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

@@ -61,8 +61,8 @@ var NavBarSection = function NavBarSection(_ref) {
       items = _ref.items,
       others = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var ref = (0, _react.useRef)();
-  var childrenItems = (0, _filter["default"])(items).call(items, function (i) {
-    return i.children;
+  var childrenItems = (0, _filter["default"])(items).call(items, function (item) {
+    return item.children;
   });
   return (0, _react2.jsx)(_react["default"].Fragment, null, title && (0, _react2.jsx)(_.Text, {
     variant: "text.navBarSubtitle"

package/lib/cjs/styles/variants/separator.js

@@ -50,7 +50,6 @@ var navBarSeparator = _objectSpread(_objectSpread({}, base), {}, {
 
 var navBarSubtitleSeparator = _objectSpread(_objectSpread({}, base), {}, {
   mt: '15px',
-  mb: '15px',
   ml: '45px',
   width: 'calc(100% - 60px)',
   backgroundColor: 'neutral.60'

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

@@ -1,23 +1,23 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
-import GlobeIcon from 'mdi-react/GlobeIcon';
-import ViewDashboard from 'mdi-react/ViewDashboardIcon';
 import AccountMultiple from 'mdi-react/AccountMultipleIcon';
-import TransitConnection from 'mdi-react/TransitConnectionVariantIcon';
+import Earth from 'mdi-react/EarthIcon';
 import EmoticonHappy from 'mdi-react/EmoticonHappyOutlineIcon';
 import Fingerprint from 'mdi-react/FingerprintIcon';
+import GlobeIcon from 'mdi-react/GlobeIcon';
 import ScaleBalance from 'mdi-react/ScaleBalanceIcon';
-import Earth from 'mdi-react/EarthIcon';
-import { Separator, Box, Link, NavBar, NavBarSection, NavBarItemButton, NavBarItemLink, NavBarItem } from '../../index';
+import TransitConnection from 'mdi-react/TransitConnectionVariantIcon';
+import ViewDashboard from 'mdi-react/ViewDashboardIcon';
+import { Box, Link, NavBar, NavBarItem, NavBarItemButton, NavBarItemLink, NavBarSection, Separator } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'NavBar',
   component: NavBar,
   subcomponents: {
     NavBarSection: NavBarSection,
     NavBarItemLink: NavBarItemLink,
     NavBarItemButton: NavBarItemButton
-  }
+  },
+  title: 'NavBar'
 };
 
 var Credentials = function Credentials(props) {
@@ -126,36 +126,138 @@ var data = [{
     id: "Identities Link Users",
     href: "https://pingidentity.com/"
   }, "Users"), ___EmotionJSX(NavBarItemLink, {
-    key: "Identities Link Group",
-    id: "Identities Link Group",
+    key: "Identities Link Groups",
+    id: "Identities Link Groups",
     href: "https://pingidentity.com/"
-  }, "Group")]
+  }, "Groups"), ___EmotionJSX(NavBarItemLink, {
+    key: "Identities Link Populations",
+    id: "Identities Link Populations",
+    href: "https://pingidentity.com/"
+  }, "Populations"), ___EmotionJSX(NavBarItemLink, {
+    key: "Identities Link Attributes",
+    id: "Identities Link Attributes",
+    href: "https://pingidentity.com/"
+  }, "Attributes"), ___EmotionJSX(NavBarItemLink, {
+    key: "Identities Link Roles",
+    id: "Identities Link Roles",
+    href: "https://pingidentity.com/"
+  }, "Roles")]
 }, {
   icon: TransitConnection,
   key: 'Connections',
   heading: 'Connections',
-  children: [___EmotionJSX(NavBarItemLink, {
-    key: "Connection Link Users",
-    id: "Connection Link Users",
+  children: [{
+    hasSeparator: false,
+    subTitle: 'Applications'
+  }, ___EmotionJSX(NavBarItemLink, {
+    key: "Connections Applications",
+    id: "Connections Applications",
     href: "https://pingidentity.com/"
-  }, "Users"), ___EmotionJSX(NavBarItemLink, {
-    key: "Connections Link Group",
-    id: "Connections Link Group",
+  }, "Applications"), ___EmotionJSX(NavBarItemLink, {
+    key: "Connections Application Catalog",
+    id: "Connections Application Catalog",
     href: "https://pingidentity.com/"
-  }, "Group")]
+  }, "Application Catalog"), ___EmotionJSX(NavBarItemLink, {
+    key: "Connections Application Portal",
+    id: "Connections Application Portal",
+    href: "https://pingidentity.com/"
+  }, "Application Portal"), {
+    subTitle: 'Identity Providers'
+  }, ___EmotionJSX(NavBarItemLink, {
+    key: "Connections External IDPs",
+    id: "Connections External IDPs",
+    href: "https://pingidentity.com/"
+  }, "External IDPs"), {
+    subTitle: 'Ping Products'
+  }, ___EmotionJSX(NavBarItemLink, {
+    key: "Connections PingFederate",
+    id: "Connections PingFederate",
+    href: "https://pingidentity.com/"
+  }, "PingFederate"), ___EmotionJSX(NavBarItemLink, {
+    key: "Connections PingIntelligence",
+    id: "Connections PingIntelligence",
+    href: "https://pingidentity.com/"
+  }, "PingIntelligence"), ___EmotionJSX(Separator, {
+    variant: "separator.navBarSubtitleSeparator"
+  }), ___EmotionJSX(NavBarItemLink, {
+    key: "Connections Provisioning",
+    id: "Connections Provisioning",
+    href: "https://pingidentity.com/"
+  }, "Provisioning"), ___EmotionJSX(NavBarItemLink, {
+    key: "Connections WebHooks",
+    id: "Connections WebHooks",
+    href: "https://pingidentity.com/"
+  }, "WebHooks"), ___EmotionJSX(NavBarItemLink, {
+    key: "Connections Gateways",
+    id: "Connections Gateways",
+    href: "https://pingidentity.com/"
+  }, "Gateways"), ___EmotionJSX(NavBarItemLink, {
+    key: "Connections Certificates & Key Pairs",
+    id: "Connections Certificates & Key Pairs",
+    href: "https://pingidentity.com/"
+  }, "Certificates & Key Pairs"), ___EmotionJSX(NavBarItemLink, {
+    key: "Connections Resources",
+    id: "Connections Resources",
+    href: "https://pingidentity.com/"
+  }, "Resources")]
 }, {
   icon: EmoticonHappy,
   key: 'Experiences',
   heading: 'Experiences',
-  children: [___EmotionJSX(NavBarItemLink, {
-    key: "Experiences Link Attributes",
-    id: "Experiences Link Attributes",
+  children: [{
+    hasSeparator: false,
+    subTitle: 'Policies'
+  }, ___EmotionJSX(NavBarItemLink, {
+    key: "Experiences Authentication",
+    id: "Experiences Authentication",
     href: "https://pingidentity.com/"
-  }, "Attributes"), ___EmotionJSX(NavBarItemLink, {
-    key: "Experiences Link Roles",
-    id: "Experiences Link Roles",
+  }, "Authentication"), ___EmotionJSX(NavBarItemLink, {
+    key: "Experiences MFA",
+    id: "Experiences MFA",
     href: "https://pingidentity.com/"
-  }, "Roles")]
+  }, "MFA"), ___EmotionJSX(NavBarItemLink, {
+    key: "Experiences Password",
+    id: "Experiences Password",
+    href: "https://pingidentity.com/"
+  }, "Password"), ___EmotionJSX(Separator, {
+    variant: "separator.navBarSubtitleSeparator"
+  }), ___EmotionJSX(NavBarItemLink, {
+    key: "Experiences Risk",
+    id: "Experiences Risk",
+    href: "https://pingidentity.com/"
+  }, "Risk"), ___EmotionJSX(NavBarItemLink, {
+    key: "Experiences Flows",
+    id: "Experiences Flows",
+    href: "https://pingidentity.com/"
+  }, "Flows"), ___EmotionJSX(NavBarItemLink, {
+    key: "Experiences Forms",
+    id: "Experiences Forms",
+    href: "https://pingidentity.com/"
+  }, "Forms"), ___EmotionJSX(NavBarItemLink, {
+    key: "Experiences Languages",
+    id: "Experiences Languages",
+    href: "https://pingidentity.com/"
+  }, "Languages"), ___EmotionJSX(NavBarItemLink, {
+    key: "Experiences Agreements",
+    id: "Experiences Agreements",
+    href: "https://pingidentity.com/"
+  }, "Agreements"), ___EmotionJSX(NavBarItemLink, {
+    key: "Experiences Branding & Themes",
+    id: "Experiences Branding & Themes",
+    href: "https://pingidentity.com/"
+  }, "Branding & Themes"), ___EmotionJSX(NavBarItemLink, {
+    key: "Experiences Notifications",
+    id: "Experiences Notifications",
+    href: "https://pingidentity.com/"
+  }, "Notifications"), ___EmotionJSX(NavBarItemLink, {
+    key: "Experiences Vanity Domains",
+    id: "Experiences Vanity Domains",
+    href: "https://pingidentity.com/"
+  }, "Vanity Domains"), ___EmotionJSX(NavBarItemLink, {
+    key: "Experiences Sender",
+    id: "Experiences Sender",
+    href: "https://pingidentity.com/"
+  }, "Sender")]
 }];
 var secondData = [{
   icon: Fingerprint,
@@ -165,7 +267,7 @@ var secondData = [{
     id: "MFA Button Users",
     key: "MFA Button Users"
   }, "Users"), {
-    isSubTitle: true,
+    hasSeparator: false,
     subTitle: 'PingOne Services'
   }, ___EmotionJSX(NavBarItemButton, {
     key: "MFA Button Group",
@@ -179,7 +281,7 @@ var secondData = [{
     key: "Risk Button Users",
     id: "Risk Button Users"
   }, "Users"), {
-    isSubTitle: true,
+    hasSeparator: false,
     subTitle: 'PingOne Services'
   }, ___EmotionJSX(NavBarItemButton, {
     key: "Risk Button Group",
@@ -193,7 +295,7 @@ var secondData = [{
     key: "Verify Button Users",
     id: "Verify Button Users"
   }, "Users"), {
-    isSubTitle: true,
+    hasSeparator: false,
     subTitle: 'PingOne Services'
   }, ___EmotionJSX(NavBarItemButton, {
     key: "Verify Button Group",
@@ -207,7 +309,7 @@ var secondData = [{
     key: "Credentials Button Users",
     id: "Credentials Button Users"
   }, "Users"), {
-    isSubTitle: true,
+    hasSeparator: false,
     subTitle: 'PingOne Services'
   }, ___EmotionJSX(NavBarItemButton, {
     key: "Credentials Button Group",

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

@@ -9,10 +9,10 @@ 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 { Box, NavBarSection, NavBarItem, NavBarItemButton, NavBarItemLink, Link, Button } from '../../';
 import NavBar from './NavBar';
 import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen, fireEvent } from '../../utils/testUtils/testWrapper';
-import { Box, NavBarSection, NavBarItem, NavBarItemButton, NavBarItemLink, Link, Button } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var DATA_ID = 'data-id';
 var data = [{

package/lib/components/NavBarSection/NavBarItemBody.js

@@ -6,39 +6,48 @@ import PropTypes from 'prop-types';
 import { Separator, Box, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
-var NavBarItemBody = function NavBarItemBody(props) {
+var NavBarItemBody = function NavBarItemBody(_ref) {
   var _context;
 
-  var item = props.item,
-      onKeyDown = props.onKeyDown;
-  return ___EmotionJSX(Box, {
-    sx: {
-      alignItems: 'flex-start',
-      mb: '15px'
-    }
-  }, _mapInstanceProperty(_context = item.children).call(_context, function (child) {
-    return child.subTitle ? ___EmotionJSX(Fragment, {
-      key: "fragment".concat(child.subTitle)
-    }, ___EmotionJSX(Separator, {
-      variant: "separator.navBarSubtitleSeparator",
-      key: "separator".concat(child.subTitle)
+  var item = _ref.item,
+      onKeyDown = _ref.onKeyDown;
+
+  var renderSubTitle = function renderSubTitle(child) {
+    var hasSeparator = child.hasSeparator,
+        subTitle = child.subTitle;
+    return ___EmotionJSX(Fragment, {
+      key: "fragment".concat(subTitle)
+    }, (hasSeparator || hasSeparator === undefined) && ___EmotionJSX(Separator, {
+      variant: "separator.navBarSubtitleSeparator"
     }), ___EmotionJSX(Text, {
-      key: "text".concat(child.subTitle),
-      variant: "text.navBarSubtitle",
+      key: "text".concat(subTitle),
       sx: {
-        mb: '10px',
-        ml: '45px'
-      }
-    }, child.subTitle)) : ___EmotionJSX(ChildItemWrapper, {
+        mb: 'sm',
+        ml: '45px',
+        mt: 'md'
+      },
+      variant: "text.navBarSubtitle"
+    }, subTitle));
+  };
+
+  var renderChild = function renderChild(child) {
+    return child.subTitle ? renderSubTitle(child) : ___EmotionJSX(ChildItemWrapper, {
       onKeyDown: onKeyDown,
       key: "item".concat(child.key || child)
     }, child);
-  }));
+  };
+
+  return ___EmotionJSX(Box, {
+    sx: {
+      alignItems: 'flex-start',
+      mb: '15px'
+    }
+  }, _mapInstanceProperty(_context = item.children).call(_context, renderChild));
 };
 
-var ChildItemWrapper = function ChildItemWrapper(props) {
-  var children = props.children,
-      _onKeyDown = props.onKeyDown;
+var ChildItemWrapper = function ChildItemWrapper(_ref2) {
+  var children = _ref2.children,
+      _onKeyDown = _ref2.onKeyDown;
   var childrenKey = children.key || children;
 
   var _useKeyboard = useKeyboard({

package/lib/components/NavBarSection/NavBarItemBody.test.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import NavBarItemBody from './NavBarItemBody';
+import { Text } from '../../';
+import { render, screen } from '../../utils/testUtils/testWrapper';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var getComponent = function getComponent(item) {
+  return render(___EmotionJSX(NavBarItemBody, {
+    item: {
+      children: [item]
+    }
+  }));
+};
+
+var SUBTITLE = 'subtitle';
+var TEXT = 'text';
+describe('NavBarItemBody', function () {
+  describe('when its passed a component', function () {
+    it('renders the component', function () {
+      var childItem = ___EmotionJSX(Text, null, TEXT);
+
+      getComponent(childItem);
+      expect(screen.getByText(TEXT));
+    });
+  });
+  describe('when its passed an object', function () {
+    describe('when it has a subTitle', function () {
+      it('renders the subTitle and the separator', function () {
+        getComponent({
+          subTitle: SUBTITLE
+        });
+        expect(screen.getByText(SUBTITLE));
+        expect(screen.getByRole('separator'));
+      });
+    });
+    describe('when it has a subTitle and hasSeparator is false', function () {
+      it('renders the subTitle and no separator', function () {
+        getComponent({
+          subTitle: SUBTITLE,
+          hasSeparator: false
+        });
+        expect(screen.getByText(SUBTITLE));
+        expect(screen.queryByRole('separator')).not.toBeInTheDocument();
+      });
+    });
+  });
+});

package/lib/components/NavBarSection/NavBarSection.js

@@ -28,8 +28,8 @@ var NavBarSection = function NavBarSection(_ref) {
 
   var ref = useRef();
 
-  var childrenItems = _filterInstanceProperty(items).call(items, function (i) {
-    return i.children;
+  var childrenItems = _filterInstanceProperty(items).call(items, function (item) {
+    return item.children;
   });
 
   return ___EmotionJSX(React.Fragment, null, title && ___EmotionJSX(Text, {

package/lib/styles/variants/separator.js

@@ -32,7 +32,6 @@ var navBarSeparator = _objectSpread(_objectSpread({}, base), {}, {
 
 var navBarSubtitleSeparator = _objectSpread(_objectSpread({}, base), {}, {
   mt: '15px',
-  mb: '15px',
   ml: '45px',
   width: 'calc(100% - 60px)',
   backgroundColor: 'neutral.60'

package/package.json

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