@pingux/astro 2.4.2-alpha.1 → 2.5.0-alpha.0

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

@@ -42,7 +42,8 @@ var NavBarSectionItemHeader = function NavBarSectionItemHeader(props) {
   var navBarState = (0, _NavBarContext.useNavBarContext)();
   var selectedKey = navBarState.selectedKey,
     setExpandedKeys = navBarState.setExpandedKeys,
-    expandedKeys = navBarState.expandedKeys;
+    expandedKeys = navBarState.expandedKeys,
+    navStyles = navBarState.navStyles;
   var isExpanded = (0, _includes["default"])(expandedKeys).call(expandedKeys, key);
   var array = (0, _map["default"])(_context = item.children).call(_context, function (i) {
     return i.key;
@@ -58,9 +59,14 @@ var NavBarSectionItemHeader = function NavBarSectionItemHeader(props) {
       isSelected: childSelected && !isExpanded
     }),
     classNames = _useStatusClasses.classNames;
-  var color = childSelected && !isExpanded ? 'white' : 'neutral.95';
+  var getIconColor = function getIconColor() {
+    if (navStyles.navBarItemHeader === 'navBar.popUpItemHeaderContainer') {
+      return childSelected && !isExpanded ? 'white' : 'text.primary';
+    }
+    return childSelected && !isExpanded ? 'white' : 'neutral.95';
+  };
   return (0, _react2.jsx)(_index.Box, {
-    variant: "navBar.itemHeaderContainer",
+    variant: navStyles.navBarItemHeader,
     className: classNames,
     isRow: true,
     "data-testid": heading
@@ -69,12 +75,12 @@ var NavBarSectionItemHeader = function NavBarSectionItemHeader(props) {
     size: "sm",
     sx: {
       mr: 'sm',
-      color: color,
-      fill: color
+      color: getIconColor(),
+      fill: getIconColor()
     },
     "aria-hidden": "true"
   }), (0, _react2.jsx)(_index.Text, {
-    variant: "variants.navBar.headerText"
+    variant: navStyles.navBarItemHeaderText
   }, heading), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignItems: "center",
@@ -83,10 +89,10 @@ var NavBarSectionItemHeader = function NavBarSectionItemHeader(props) {
     }
   }, (0, _react2.jsx)(_index.Icon, {
     icon: isExpanded ? _MenuUpIcon["default"] : _MenuDownIcon["default"],
-    size: "sm",
+    size: navStyles.navBarItemHeaderIconSize,
     sx: {
-      color: color,
-      fill: color
+      color: getIconColor(),
+      fill: getIconColor()
     },
     "aria-label": isExpanded ? 'Menu up' : 'Menu down'
   })));
@@ -97,8 +103,10 @@ var NavBarPrimaryItemHeader = function NavBarPrimaryItemHeader(_ref) {
     className = item.className,
     heading = item.heading,
     customIcon = item.customIcon;
+  var navBarState = (0, _NavBarContext.useNavBarContext)();
+  var navStyles = navBarState.navStyles;
   return (0, _react2.jsx)(_index.Box, {
-    variant: "navBar.itemHeaderContainer",
+    variant: navStyles.navBarItemHeader,
     className: className,
     isRow: true,
     "data-testid": heading
@@ -112,7 +120,7 @@ var NavBarPrimaryItemHeader = function NavBarPrimaryItemHeader(_ref) {
     },
     "aria-hidden": "true"
   }), (0, _react2.jsx)(_index.Text, {
-    variant: "variants.navBar.headerText"
+    variant: navStyles.navBarItemHeaderText
   }, heading), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignItems: "center",

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

@@ -43,7 +43,7 @@ var NavBarItemLink = function NavBarItemLink(props) {
     classNames = _useStatusClasses.classNames;
   return (0, _react2.jsx)(_index.Link, (0, _extends2["default"])({
     id: key,
-    variant: "variants.navBar.itemButton",
+    variant: state.navStyles.navBarItemLink,
     className: classNames,
     onPress: onNavPress,
     color: isSelected ? 'white' : undefined

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

@@ -24,7 +24,7 @@ var _NavBarContext = require("../../context/NavBarContext");
 var _NavBarItemBody = _interopRequireDefault(require("./NavBarItemBody"));
 var _NavBarItemHeader = _interopRequireDefault(require("./NavBarItemHeader"));
 var _react2 = require("@emotion/react");
-var _excluded = ["hasSeparator", "title", "items"],
+var _excluded = ["hasSeparator", "title", "items", "onKeyDown"],
   _excluded2 = ["key", "children"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 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; }
@@ -38,11 +38,13 @@ var NavBarSection = function NavBarSection(_ref) {
   var hasSeparator = _ref.hasSeparator,
     title = _ref.title,
     items = _ref.items,
+    onKeyDown = _ref.onKeyDown,
     others = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var ref = (0, _react.useRef)();
   var childrenItems = (0, _filter["default"])(items).call(items, function (item) {
     return item.children || item.href;
   });
+  var state = (0, _NavBarContext.useNavBarContext)();
   return (0, _react2.jsx)(_react["default"].Fragment, null, hasSeparator && (0, _react2.jsx)(_.Separator, {
     variant: "separator.navBarSeparator"
   }), title && (0, _react2.jsx)(_.Text, {
@@ -56,19 +58,23 @@ var NavBarSection = function NavBarSection(_ref) {
       listStyle: 'none'
     }
   }, others), (0, _map["default"])(childrenItems).call(childrenItems, function (item) {
-    return (0, _react2.jsx)("li", {
-      key: item.key
+    return (0, _react2.jsx)(_.Box, {
+      as: "li",
+      key: item.key,
+      variant: state.navStyles.navBarItemHeaderListItem
     }, !item.children && item.href ? (0, _react2.jsx)(PrimaryItem, {
       key: item.key,
       item: item
     }) : (0, _react2.jsx)(SectionItem, {
       key: item.key,
-      item: item
+      item: item,
+      onKeyDown: onKeyDown
     }));
   })));
 };
 var SectionItem = function SectionItem(_ref2) {
-  var item = _ref2.item;
+  var item = _ref2.item,
+    onKeyDownProp = _ref2.onKeyDown;
   var key = item.key,
     children = item.children,
     others = (0, _objectWithoutProperties2["default"])(item, _excluded2);
@@ -119,6 +125,9 @@ var SectionItem = function SectionItem(_ref2) {
       default:
         break;
     }
+    if (onKeyDownProp) {
+      onKeyDownProp(e);
+    }
   };
   var _useKeyboard = (0, _interactions.useKeyboard)({
       onKeyDown: function onKeyDown(e) {
@@ -128,7 +137,7 @@ var SectionItem = function SectionItem(_ref2) {
     }),
     keyboardProps = _useKeyboard.keyboardProps;
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.Button, (0, _extends2["default"])({
-    variant: "variants.navBar.sectionButton",
+    variant: navBarState.navStyles.sectionItem,
     onPress: function onPress() {
       return onExpandedChange(!isExpanded);
     }
@@ -141,8 +150,9 @@ var SectionItem = function SectionItem(_ref2) {
 };
 var PrimaryItem = function PrimaryItem(_ref3) {
   var item = _ref3.item;
+  var state = (0, _NavBarContext.useNavBarContext)();
   return (0, _react2.jsx)(_.Link, {
-    variant: "variants.navBar.sectionButton",
+    variant: state.navStyles.primaryItem,
     href: item.href,
     target: "_blank"
   }, (0, _react2.jsx)(_NavBarItemHeader["default"], {
@@ -155,6 +165,8 @@ NavBarSection.defaultProps = {
 NavBarSection.propTypes = {
   /** If true, a separator will render at the end of the section */
   hasSeparator: _propTypes["default"].bool,
+  /** callback that runs on key down */
+  onKeyDown: _propTypes["default"].func,
   /** If present, this string will render at the top of the section */
   title: _propTypes["default"].string,
   /**
@@ -164,6 +176,7 @@ NavBarSection.propTypes = {
   items: _propTypes["default"].arrayOf(_propTypes["default"].shape({}))
 };
 SectionItem.propTypes = {
+  onKeyDown: _propTypes["default"].func,
   item: _propTypes["default"].shape({
     key: _propTypes["default"].string,
     children: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object])),

package/lib/cjs/hooks/useNavBarStyling/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _useNavBarStyling["default"];
+  }
+});
+var _useNavBarStyling = _interopRequireDefault(require("./useNavBarStyling"));

package/lib/cjs/hooks/useNavBarStyling/useNavBarStyling.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+/**
+ * Generates the necessary props to be used in field components.
+ * @param {String} variant Variant for the overall NavBar
+ * @returns {Object} Prop object that distributes styling to various sub-components.
+ */
+
+var useNavBarStyling = function useNavBarStyling(variant) {
+  switch (variant) {
+    case 'popupNav':
+      return {
+        navBar: 'navBar.popUpContainer',
+        primaryItem: 'variants.navBar.popUpSectionButton',
+        sectionItem: 'variants.navBar.popUpSectionButton',
+        navBarItemHeader: 'navBar.popUpItemHeaderContainer',
+        navBarItemHeaderText: 'variants.navBar.popUpHeaderText',
+        navBarItemButton: 'variants.navBar.popUpItemButton',
+        navBarItemLink: 'variants.navBar.popUpItemButton',
+        navBarItem: 'navBar.popUpItem',
+        navBarItemText: 'variants.navBar.popUpHeaderText',
+        navBarItemHeaderListItem: 'variants.navBar.popUpItemListItem',
+        navBarItemBody: 'variants.navBar.popUpNavBarItemBody',
+        navBarItemHeaderIconSize: 'xs'
+      };
+    default:
+      return {
+        navBar: 'navBar.container',
+        primaryItem: 'variants.navBar.sectionButton',
+        sectionItem: 'variants.navBar.sectionButton',
+        navBarItemHeader: 'navBar.itemHeaderContainer',
+        navBarItemHeaderText: 'variants.navBar.headerText',
+        navBarItemButton: 'variants.navBar.itemButton',
+        navBarItemLink: 'variants.navBar.itemButton',
+        navBarItem: 'navBar.item',
+        navBarItemText: 'variants.navBar.headerText',
+        navBarItemHeaderListItem: null,
+        navBarItemBody: 'variants.navBar.navBarItemBody',
+        navBarItemHeaderIconSize: 'sm'
+      };
+  }
+};
+var _default = useNavBarStyling;
+exports["default"] = _default;

package/lib/cjs/hooks/useNavBarStyling/useNavBarStyling.test.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _reactHooks = require("@testing-library/react-hooks");
+var _ = _interopRequireDefault(require("."));
+test('popUpNav variant returns the correct variants', function () {
+  var _renderHook = (0, _reactHooks.renderHook)(function () {
+      return (0, _["default"])('popupNav');
+    }),
+    result = _renderHook.result;
+  expect(result.current).toMatchObject({
+    navBar: 'navBar.popUpContainer',
+    primaryItem: 'variants.navBar.popUpSectionButton',
+    sectionItem: 'variants.navBar.popUpSectionButton',
+    navBarItemHeader: 'navBar.popUpItemHeaderContainer',
+    navBarItemHeaderText: 'variants.navBar.popUpHeaderText',
+    navBarItemButton: 'variants.navBar.popUpItemButton',
+    navBarItemLink: 'variants.navBar.popUpItemButton',
+    navBarItem: 'navBar.popUpItem',
+    navBarItemText: 'variants.navBar.popUpHeaderText',
+    navBarItemHeaderListItem: 'variants.navBar.popUpItemListItem',
+    navBarItemBody: 'variants.navBar.popUpNavBarItemBody',
+    navBarItemHeaderIconSize: 'xs'
+  });
+});
+test('default prop returns standard nav variants', function () {
+  var _renderHook2 = (0, _reactHooks.renderHook)(function () {
+      return (0, _["default"])('');
+    }),
+    result = _renderHook2.result;
+  expect(result.current).toMatchObject({
+    navBar: 'navBar.container',
+    primaryItem: 'variants.navBar.sectionButton',
+    sectionItem: 'variants.navBar.sectionButton',
+    navBarItemHeader: 'navBar.itemHeaderContainer',
+    navBarItemHeaderText: 'variants.navBar.headerText',
+    navBarItemButton: 'variants.navBar.itemButton',
+    navBarItemLink: 'variants.navBar.itemButton',
+    navBarItem: 'navBar.item',
+    navBarItemText: 'variants.navBar.headerText',
+    navBarItemHeaderListItem: null,
+    navBarItemBody: 'variants.navBar.navBarItemBody',
+    navBarItemHeaderIconSize: 'sm'
+  });
+});

package/lib/cjs/recipes/MultipagePopup.stories.js

@@ -0,0 +1,378 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactAria = require("react-aria");
+var _reactStately = require("react-stately");
+var _utils = require("@react-aria/utils");
+var _CompassOutlineIcon = _interopRequireDefault(require("mdi-react/CompassOutlineIcon"));
+var _GlobeIcon = _interopRequireDefault(require("mdi-react/GlobeIcon"));
+var _HelpCircleOutlineIcon = _interopRequireDefault(require("mdi-react/HelpCircleOutlineIcon"));
+var _MenuDownIcon = _interopRequireDefault(require("mdi-react/MenuDownIcon"));
+var _MenuUpIcon = _interopRequireDefault(require("mdi-react/MenuUpIcon"));
+var _index = require("../index");
+var _NavData = require("../styles/templates/Nav/NavData");
+var _react2 = require("@emotion/react");
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+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; }
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _default = {
+  title: 'Recipes/Multipage Popup',
+  parameters: {
+    backgrounds: {
+      "default": 'accent',
+      values: [{
+        name: 'accent',
+        value: 'accent.99'
+      }]
+    }
+  }
+};
+exports["default"] = _default;
+var dataPopUp = [{
+  'data-id': 'orchestrate',
+  key: 'Orchestrate',
+  heading: 'Orchestrate',
+  children: [(0, _react2.jsx)(_index.NavBarItemButton, {
+    key: "PingOne DaVinci",
+    id: "PingOne DaVinci"
+  }, (0, _react2.jsx)("b", null, "PingOne "), "DaVinci")]
+}];
+var secondDataPopUp = [{
+  'data-id': 'threat-protection',
+  key: 'Threat Protection',
+  heading: 'Threat Protection',
+  children: [(0, _react2.jsx)(_index.NavBarItemButton, {
+    key: "protect",
+    id: "protect"
+  }, (0, _react2.jsx)("b", null, "PingOne "), "Risk"), (0, _react2.jsx)(_index.NavBarItemButton, {
+    key: "Api Intel",
+    id: "Api Intel"
+  }, (0, _react2.jsx)("b", null, "PingOne "), "API Intelligence"), (0, _react2.jsx)(_index.NavBarItemButton, {
+    key: "Intel for Api",
+    id: "Intel for Api"
+  }, (0, _react2.jsx)("b", null, "Ping "), "Intelligence for APIs")]
+}];
+var thirdDataPopUp = [{
+  'data-id': 'threat-protection',
+  key: 'Identity',
+  heading: 'Identity',
+  children: [(0, _react2.jsx)(_index.NavBarItemButton, {
+    key: "verify",
+    id: "verify"
+  }, (0, _react2.jsx)("b", null, "PingOne "), "Verify"), (0, _react2.jsx)(_index.NavBarItemButton, {
+    key: "credentials",
+    id: "credentials"
+  }, (0, _react2.jsx)("b", null, "PingOne "), "Crendentials"), (0, _react2.jsx)(_index.NavBarItemButton, {
+    key: "directory",
+    id: "directory"
+  }, (0, _react2.jsx)("b", null, "Ping"), "Directory"), (0, _react2.jsx)(_index.NavBarItemButton, {
+    key: "sso1",
+    id: "sso1"
+  }, (0, _react2.jsx)("b", null, "Ping One "), "SSO")]
+}];
+var fourthDataPopUp = [{
+  'data-id': 'threat-protection',
+  key: 'Authenticate',
+  heading: 'Authenticate',
+  children: [(0, _react2.jsx)(_index.NavBarItemButton, {
+    key: "sso",
+    id: "sso"
+  }, (0, _react2.jsx)("b", null, "PingOne "), "SSO"), (0, _react2.jsx)(_index.NavBarItemButton, {
+    key: "federate",
+    id: "federate"
+  }, (0, _react2.jsx)("b", null, "Ping"), "Federate"), (0, _react2.jsx)(_index.NavBarItemButton, {
+    key: "MFA",
+    id: "MFA"
+  }, (0, _react2.jsx)("b", null, "PingOne "), "MFA"), (0, _react2.jsx)(_index.NavBarItemButton, {
+    key: "id",
+    id: "id"
+  }, (0, _react2.jsx)("b", null, "Ping"), "ID"), (0, _react2.jsx)(_index.NavBarItemButton, {
+    key: "central",
+    id: "central"
+  }, (0, _react2.jsx)("b", null, "Ping"), "Central")]
+}];
+var fifthDataPopUp = [{
+  'data-id': 'authorize',
+  key: 'Authorize',
+  heading: 'Authorize',
+  children: [(0, _react2.jsx)(_index.NavBarItemButton, {
+    key: "PingOne Authorize",
+    id: "PingOne Authorize"
+  }, (0, _react2.jsx)("b", null, "PingOne "), "Authorize"), (0, _react2.jsx)(_index.NavBarItemButton, {
+    key: "Ping Authorize",
+    id: "Ping Authorize"
+  }, (0, _react2.jsx)("b", null, "Ping"), "Authorize"), (0, _react2.jsx)(_index.NavBarItemButton, {
+    key: "Ping Access",
+    id: "Ping Access"
+  }, (0, _react2.jsx)("b", null, "Ping"), "Access")]
+}];
+var SideNav = function SideNav(_ref) {
+  var setSelectedKey = _ref.setSelectedKey,
+    selectedKey = _ref.selectedKey;
+  return (0, _react2.jsx)(_index.NavBar, {
+    setSelectedKey: setSelectedKey,
+    selectedKey: selectedKey
+  }, (0, _react2.jsx)(_index.Box, {
+    padding: "md",
+    key: "top-logo-parent"
+  }, (0, _react2.jsx)(_index.Link, {
+    href: "https://pingidentity.com",
+    target: "_blank",
+    "aria-label": "home link"
+  }, _NavData.logo)), (0, _react2.jsx)(_index.Separator, {
+    marginTop: "lg",
+    marginBottom: "sm"
+  }), (0, _react2.jsx)(_index.Box, {
+    variant: "navBar.sectionContainer",
+    paddingBottom: "xl",
+    key: "first-section-container"
+  }, (0, _react2.jsx)(_index.NavBarItem, {
+    id: "Overview",
+    key: "Overview",
+    text: "Overview",
+    icon: _GlobeIcon["default"]
+  }), (0, _react2.jsx)(_index.NavBarSection, {
+    items: _NavData.data,
+    hasSeparator: true
+  }), (0, _react2.jsx)(_index.NavBarSection, {
+    items: _NavData.secondData,
+    hasSeparator: true,
+    title: "PingOne Services"
+  }), (0, _react2.jsx)(_index.NavBarSection, {
+    items: _NavData.thirdData
+  })));
+};
+var CustomPopover = function CustomPopover() {
+  var _useState = (0, _react.useState)('PingOne DaVinci'),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    selectedKey = _useState2[0],
+    setSelectedKey = _useState2[1];
+  var triggerRef = (0, _react.useRef)();
+  var overlayRef = (0, _react.useRef)();
+  var state = (0, _reactStately.useOverlayTriggerState)({});
+  var _useOverlayTrigger = (0, _reactAria.useOverlayTrigger)({
+      type: 'dialog'
+    }, state, triggerRef),
+    triggerProps = _useOverlayTrigger.triggerProps,
+    overlayProps = _useOverlayTrigger.overlayProps;
+  var _useOverlayPosition = (0, _reactAria.useOverlayPosition)({
+      targetRef: triggerRef,
+      overlayRef: overlayRef,
+      placement: 'bottom right',
+      isOpen: state.isOpen,
+      offset: 6
+    }),
+    positionProps = _useOverlayPosition.overlayProps,
+    placement = _useOverlayPosition.placement,
+    updatePosition = _useOverlayPosition.updatePosition;
+  (0, _utils.useLayoutEffect)(function () {
+    requestAnimationFrame(function () {
+      updatePosition();
+    });
+  }, [updatePosition]);
+  var style = _objectSpread(_objectSpread({}, positionProps.style), {}, {
+    width: '760px',
+    minWidth: '760px',
+    height: '800px',
+    boxShadow: 'none !important'
+  });
+  var onEscCloseNav = function onEscCloseNav(e) {
+    if (e.key === 'Escape') {
+      state.close();
+    }
+  };
+  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
+    ref: triggerRef,
+    variant: "headerBar"
+  }, triggerProps), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    alignItems: "center"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _CompassOutlineIcon["default"],
+    size: "sm"
+  }), (0, _react2.jsx)(_index.Text, {
+    color: "neutral.30",
+    fontSize: "md",
+    fontWeight: 1,
+    mx: 7,
+    variant: "textEllipsis"
+  }, "Explore"), (0, _react2.jsx)(_index.Icon, {
+    icon: state.isOpen ? _MenuUpIcon["default"] : _MenuDownIcon["default"],
+    mr: "sm",
+    size: "sm"
+  }))), (0, _react2.jsx)(_index.PopoverContainer, (0, _extends2["default"])({}, overlayProps, positionProps, {
+    isOpen: state.isOpen,
+    hasNoArrow: true,
+    ref: overlayRef,
+    placement: placement,
+    style: style,
+    onClose: state.close,
+    isDismissable: true,
+    isNotClosedOnBlur: true
+  }), (0, _react2.jsx)(_reactAria.FocusScope, {
+    autoFocus: true,
+    contain: true,
+    restoreFocus: true
+  }, (0, _react2.jsx)(_index.Box, {
+    sx: {
+      height: '100%'
+    }
+  }, (0, _react2.jsx)(_index.NavBar, {
+    variant: "popupNav",
+    hasRestoreFocus: false,
+    setSelectedKey: setSelectedKey,
+    selectedKey: selectedKey
+  }, (0, _react2.jsx)(_index.Box, {
+    variant: "navBar.popUpSectionContainer",
+    paddingBottom: "xl",
+    key: "first-section-container"
+  }, (0, _react2.jsx)(_index.NavBarSection, {
+    items: dataPopUp,
+    "data-id": "third-nav-bar-section",
+    onKeyDown: onEscCloseNav
+  }), (0, _react2.jsx)(_index.NavBarSection, {
+    items: secondDataPopUp,
+    "data-id": "third-nav-bar-section",
+    onKeyDown: onEscCloseNav
+  }), (0, _react2.jsx)(_index.NavBarSection, {
+    items: thirdDataPopUp,
+    "data-id": "third-nav-bar-section",
+    onKeyDown: onEscCloseNav
+  }), (0, _react2.jsx)(_index.NavBarSection, {
+    items: fourthDataPopUp,
+    "data-id": "third-nav-bar-section",
+    onKeyDown: onEscCloseNav
+  }), (0, _react2.jsx)(_index.NavBarSection, {
+    items: fifthDataPopUp,
+    "data-id": "third-nav-bar-section",
+    onKeyDown: onEscCloseNav
+  }))), (0, _react2.jsx)(_index.Box, {
+    sx: {
+      marginLeft: '185px',
+      height: '100%',
+      width: 'calc(100% - 185px)',
+      backgroundColor: 'white',
+      padding: 'lg'
+    }
+  }, (0, _react2.jsx)(_index.Text, {
+    as: "h2",
+    variant: "H2"
+  }, selectedKey), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, null, "Example of focusable element in the body"))))));
+};
+var CustomPopoverMenu = function CustomPopoverMenu() {
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    isOpen = _useState4[0],
+    setIsOpen = _useState4[1];
+  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, {
+    onOpenChange: setIsOpen
+  }, (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "default icon button"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _MenuDownIcon["default"],
+    size: "xs",
+    color: "neutral.30",
+    sx: isOpen ? {
+      transform: 'rotate(180deg)'
+    } : null
+  })), (0, _react2.jsx)(_index.Menu, null, (0, _react2.jsx)(_index.Item, {
+    key: "option1"
+  }, "First Option"), (0, _react2.jsx)(_index.Item, {
+    key: "option2"
+  }, "Second Option"), (0, _react2.jsx)(_index.Item, {
+    key: "option3"
+  }, "Third Option"))));
+};
+var HeaderBar = function HeaderBar() {
+  var Rectangle = function Rectangle() {
+    return (0, _react2.jsx)(_index.Box, {
+      width: "1px",
+      height: 30,
+      bg: "neutral.80",
+      mx: 25
+    });
+  };
+  return (0, _react2.jsx)(_index.Box, {
+    ml: 230,
+    px: "md",
+    bg: "white",
+    height: "40px",
+    isRow: true,
+    alignItems: "center",
+    justifyContent: "space-between"
+  }, (0, _react2.jsx)(_index.EnvironmentBreadcrumb, {
+    name: "Globochem"
+  }), (0, _react2.jsx)(_index.Box, {
+    isRow: true
+  }, (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    alignItems: "center"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _HelpCircleOutlineIcon["default"],
+    size: 20,
+    color: "neutral.30"
+  }), (0, _react2.jsx)(CustomPopoverMenu, null)), (0, _react2.jsx)(Rectangle, null), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    color: "neutral.30",
+    alignItems: "center",
+    id: "customparent"
+  }, (0, _react2.jsx)(CustomPopover, null)), (0, _react2.jsx)(Rectangle, null), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    color: "neutral.30",
+    alignItems: "center"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _NavData.PersonIcon,
+    size: 20
+  }), (0, _react2.jsx)(_index.Text, {
+    color: "neutral.30",
+    fontSize: "md",
+    fontWeight: 1,
+    mx: 7,
+    variant: "textEllipsis"
+  }, "Alyssa Chambers"), (0, _react2.jsx)(CustomPopoverMenu, null))));
+};
+var Default = function Default() {
+  var _useState5 = (0, _react.useState)('Overview'),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    selectedKey = _useState6[0],
+    setSelectedKey = _useState6[1];
+  return (0, _react2.jsx)(_index.Box, {
+    bg: "accent.99",
+    height: "100vh"
+  }, (0, _react2.jsx)(SideNav, {
+    setSelectedKey: setSelectedKey,
+    selectedKey: selectedKey
+  }), (0, _react2.jsx)(HeaderBar, {
+    isOpen: false
+  }));
+};
+exports.Default = Default;
+Default.decorators = [function (Story) {
+  return (0, _react2.jsx)(_index.Box, {
+    sx: {
+      margin: '-50px'
+    }
+  }, (0, _react2.jsx)(Story, null));
+}];
+Default.parameters = {
+  layout: 'fullscreen'
+};