@pingux/astro 2.119.0-alpha.1 → 2.119.0-alpha.3

package/lib/hooks/usePagination/index.js

@@ -0,0 +1 @@
+export { default } from './usePagination';

package/lib/hooks/usePagination/usePagination.js

@@ -0,0 +1,170 @@
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["currentPageIndex", "nextButtonProps", "offsetCount", "offsetMenuProps", "offsetOptions", "onOffsetCountChange", "onPageIndexChange", "previousButtonProps", "totalCount"];
+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 _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _parseInt from "@babel/runtime-corejs3/core-js-stable/parse-int";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { PaginationContext } from '../../context/PaginationContext';
+import useProgressiveState from '../useProgressiveState';
+var getRangeString = function getRangeString(_ref) {
+  var _context, _context2;
+  var first = _ref.first,
+    last = _ref.last,
+    total = _ref.total;
+  return _concatInstanceProperty(_context = _concatInstanceProperty(_context2 = "".concat(first + 1, "-")).call(_context2, Math.min(last + 1, total), " of ")).call(_context, total);
+};
+var getNewIndexOnOffsetChange = function getNewIndexOnOffsetChange(_ref2) {
+  var first = _ref2.first,
+    newOffset = _ref2.newOffset;
+  var newLast = Math.floor(first / newOffset);
+  return newLast;
+};
+var defaultOffsetOptions = [10, 25, 50];
+var usePagination = function usePagination(props) {
+  var currentPageIndexProp = props.currentPageIndex,
+    nextButtonProps = props.nextButtonProps,
+    offsetCountProp = props.offsetCount,
+    offsetMenuProps = props.offsetMenuProps,
+    _props$offsetOptions = props.offsetOptions,
+    offsetOptions = _props$offsetOptions === void 0 ? defaultOffsetOptions : _props$offsetOptions,
+    onOffsetCountChange = props.onOffsetCountChange,
+    onPageIndexChange = props.onPageIndexChange,
+    previousButtonProps = props.previousButtonProps,
+    totalCount = props.totalCount,
+    others = _objectWithoutProperties(props, _excluded);
+  var isMountedRef = useRef(false);
+  var initialIndexValue = currentPageIndexProp || 0;
+  var initialOffsetValue = offsetCountProp || 10;
+  var _useProgressiveState = useProgressiveState(currentPageIndexProp, initialIndexValue),
+    _useProgressiveState2 = _slicedToArray(_useProgressiveState, 2),
+    currentPageIndex = _useProgressiveState2[0],
+    setCurrentPageIndex = _useProgressiveState2[1];
+  var _useProgressiveState3 = useProgressiveState(offsetCountProp, initialOffsetValue),
+    _useProgressiveState4 = _slicedToArray(_useProgressiveState3, 2),
+    offsetCount = _useProgressiveState4[0],
+    setOffsetCount = _useProgressiveState4[1];
+  var _useState = useState(currentPageIndex),
+    _useState2 = _slicedToArray(_useState, 2),
+    firstRenderedIndex = _useState2[0],
+    setFirstRenderedIndex = _useState2[1];
+  var _useState3 = useState((currentPageIndex + 1) * offsetCount - 1),
+    _useState4 = _slicedToArray(_useState3, 2),
+    lastRenderedIndex = _useState4[0],
+    setLastRenderedIndex = _useState4[1];
+  useEffect(function () {
+    var calculatedLastIndex = (currentPageIndex + 1) * offsetCount - 1;
+    setFirstRenderedIndex(currentPageIndex * offsetCount);
+    setLastRenderedIndex(Math.min(calculatedLastIndex, totalCount));
+  }, [currentPageIndex, offsetCount, totalCount]);
+  useEffect(function () {
+    if (isMountedRef.current) {
+      var newIndex = getNewIndexOnOffsetChange({
+        newOffset: offsetCount,
+        first: firstRenderedIndex
+      });
+      setCurrentPageIndex(newIndex);
+      if (onPageIndexChange) {
+        onPageIndexChange(newIndex);
+      }
+    }
+  }, [offsetCount]);
+  useEffect(function () {
+    isMountedRef.current = true;
+  }, []);
+  var lastIndex = Math.ceil(totalCount / offsetCount);
+  var isFirstIndex = currentPageIndex === 0;
+  var isLastIndex = lastIndex - 1 === currentPageIndex;
+  var popoverButtonString = useMemo(function () {
+    return getRangeString({
+      first: firstRenderedIndex,
+      last: lastRenderedIndex,
+      total: totalCount
+    });
+  }, [firstRenderedIndex, lastRenderedIndex, totalCount]);
+  var setOffsetCountCallback = useCallback(function (keys) {
+    if (keys !== null && keys !== void 0 && keys.currentKey) {
+      setOffsetCount(_parseInt(keys.currentKey, 10));
+      if (onOffsetCountChange && isMountedRef.current) {
+        onOffsetCountChange(_parseInt(keys.currentKey, 10));
+      }
+    }
+  }, [setOffsetCount, onOffsetCountChange, isMountedRef]);
+  var paginationState = useMemo(function () {
+    return {
+      isFirstIndex: isFirstIndex,
+      isLastIndex: isLastIndex,
+      firstRenderedIndex: firstRenderedIndex,
+      lastRenderedIndex: lastRenderedIndex,
+      offsetCount: offsetCount,
+      totalCount: totalCount,
+      currentPageIndex: currentPageIndex,
+      popoverButtonString: popoverButtonString,
+      setOffsetCount: setOffsetCountCallback,
+      offsetOptions: offsetOptions
+    };
+  }, [isFirstIndex, isLastIndex, firstRenderedIndex, lastRenderedIndex, offsetCount, totalCount, currentPageIndex, popoverButtonString, setOffsetCountCallback, offsetOptions]);
+  var contextState = useMemo(function () {
+    return {
+      firstRenderedIndex: firstRenderedIndex,
+      lastRenderedIndex: lastRenderedIndex,
+      offsetCount: offsetCount,
+      totalCount: totalCount,
+      currentPageIndex: currentPageIndex
+    };
+  }, [firstRenderedIndex, lastRenderedIndex, offsetCount, totalCount, currentPageIndex]);
+  var _useContext = useContext(PaginationContext),
+    setPaginationState = _useContext.setPaginationState;
+  useEffect(function () {
+    if (setPaginationState) {
+      setPaginationState(_objectSpread({}, contextState));
+    }
+  }, [contextState, setPaginationState]);
+  var nextIndex = function nextIndex() {
+    if (!isLastIndex) {
+      setCurrentPageIndex(currentPageIndex + 1);
+      if (onPageIndexChange) {
+        onPageIndexChange(currentPageIndex + 1);
+      }
+    }
+  };
+  var previousIndex = function previousIndex() {
+    if (!isFirstIndex) {
+      setCurrentPageIndex(currentPageIndex - 1);
+      if (onPageIndexChange) {
+        onPageIndexChange(currentPageIndex - 1);
+      }
+    }
+  };
+  var nextButtonPropsSpread = _objectSpread(_objectSpread({
+    'aria-label': 'Next Page'
+  }, nextButtonProps), {}, {
+    isDisabled: isLastIndex,
+    onPress: nextIndex
+  });
+  var previousButtonPropsSpread = _objectSpread(_objectSpread({
+    'aria-label': 'Previous Page'
+  }, previousButtonProps), {}, {
+    isDisabled: isFirstIndex,
+    onPress: previousIndex
+  });
+  var containerProps = _objectSpread({}, others);
+  return {
+    state: paginationState,
+    previousButtonProps: previousButtonPropsSpread,
+    nextButtonProps: nextButtonPropsSpread,
+    containerProps: containerProps,
+    offsetMenuProps: offsetMenuProps
+  };
+};
+export default usePagination;

package/lib/hooks/usePaginationState/index.js

@@ -0,0 +1 @@
+export { default } from './usePaginationState';

package/lib/hooks/usePaginationState/usePaginationState.js

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { PaginationContext } from '../../context/PaginationContext';
+var usePaginationState = function usePaginationState() {
+  var _useContext = useContext(PaginationContext),
+    paginationState = _useContext.paginationState;
+  return {
+    paginationState: paginationState
+  };
+};
+export default usePaginationState;

package/lib/index.js

@@ -138,6 +138,8 @@ export * from './components/NumberField';
 export { default as OverlayPanel } from './components/OverlayPanel';
 export * from './components/OverlayPanel';
 export { default as PageHeader } from './components/PageHeader';
+export { default as Pagination } from './components/Pagination';
+export { default as PaginationProvider } from './components/Pagination/PaginationProvider';
 export { default as PanelHeader } from './components/PanelHeader';
 export { default as PanelHeaderCloseButton } from './components/PanelHeader/controls/PanelHeaderCloseButton';
 export { default as PanelHeaderMenu } from './components/PanelHeader/controls/PanelHeaderMenu';
@@ -210,6 +212,7 @@ export { default as TooltipTrigger } from './components/TooltipTrigger';
 export * from './components/TooltipTrigger';
 export { default as TreeView } from './components/TreeView';
 export * from './components/TreeView';
+export { PaginationContext } from './context/PaginationContext';
 export { default as NextGenDarkTheme } from './styles/themeOverrides/nextGenDarkMode';
 export { default as OnyxDarkTheme } from './styles/themeOverrides/nextGenDarkMode';
 export { default as NextGenTheme } from './styles/themes/next-gen';

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

@@ -59,6 +59,9 @@ var buttons = {
       color: 'black'
     }
   },
+  paginationMenu: {
+    color: 'text.secondary'
+  },
   neutral: {
     color: 'gray-400'
   },

package/lib/styles/themes/next-gen/convertedComponentList.js

@@ -1,4 +1,4 @@
-var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'IconWrapper', 'ComboBoxField', 'CodeView', 'Sticker Sheet', 'NextGen ListViewItem', 'Skeleton'];
+var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'IconWrapper', 'ComboBoxField', 'CodeView', 'Sticker Sheet', 'NextGen ListViewItem', 'Skeleton', 'Pagination'];
 export var componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Badge: ['Status Badge Variants', 'Badge With Left Slot And Icon', 'Callout Badges', 'Removable'],
@@ -7,7 +7,11 @@ export var componentSpecificNextGenBlacklist = {
   MultivaluesField: ['Condensed', 'Condensed With Section'],
   PasswordField: ['Success'],
   TextField: ['Success'],
-  OverlayPanel: ['Expandable']
+  OverlayPanel: ['Expandable'],
+  NavBar: ['Default', 'Controlled', 'Auto Collapse']
+};
+export var astroBlacklistStory = {
+  NavBar: ['Onyx Default']
 };
 export var nextGenOnlyComponents = ['NavigationHeader', 'Prompt', 'AI Panel', 'Response', 'Suggestions', 'Prompt Input'];
 export default nextGenConvertedComponents;

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

@@ -146,6 +146,11 @@ var link = {
     outline: 'none'
   }
 };
+var paginationMenu = _objectSpread(_objectSpread({}, link), {}, {
+  px: '0px',
+  py: '0px',
+  color: 'text.primary'
+});
 var withIcon = _objectSpread(_objectSpread({}, secondary), {}, {
   display: 'inline-flex'
 });
@@ -343,6 +348,7 @@ var buttons = {
   primaryWithIcon: primaryWithIcon,
   iconButtons: iconButtons,
   modalCloseButton: modalCloseButton,
-  aiChat: aiChat
+  aiChat: aiChat,
+  paginationMenu: paginationMenu
 };
 export default buttons;

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

@@ -10,6 +10,10 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 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) { _defineProperty(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; }
 import buttons from './button';
+var navBarFocus = {
+  outline: '2px solid',
+  outlineColor: 'active'
+};
 var nextGen = {
   color: 'gray-800',
   fontSize: 'md',
@@ -62,6 +66,12 @@ var button = _objectSpread(_objectSpread({}, buttons["default"]), {}, {
 var primaryButton = _objectSpread(_objectSpread({}, buttons.primary), {}, {
   textDecoration: 'none'
 });
+var navBarLogoLink = {
+  borderRadius: '4px',
+  px: 'md',
+  py: 'sm',
+  '&.is-focused': _objectSpread({}, navBarFocus)
+};
 export default {
   nextGen: nextGen,
   onyx: onyx,
@@ -69,5 +79,6 @@ export default {
   footerLinks: footerLinks,
   footerHeader: footerHeader,
   button: button,
-  primaryButton: primaryButton
+  primaryButton: primaryButton,
+  navBarLogoLink: navBarLogoLink
 };

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

@@ -20,11 +20,15 @@ export var navBarFocus = {
 };
 export var navBar = {
   container: {
+    fontFamily: 'standard',
     width: '252px',
     p: 'sm',
     backgroundColor: 'background.base',
     boxShadow: '0 .5rem 1rem rgba(0, 0, 0, .15)'
   },
+  sectionContainer: {
+    pt: '0'
+  },
   sectionButton: {
     borderRadius: '4px',
     '&.is-hovered': {
@@ -38,7 +42,7 @@ export var navBar = {
   itemButton: {
     py: '.75rem',
     paddingLeft: '53px',
-    color: 'text.primary',
+    color: 'gray-700',
     borderRadius: '4px',
     '&.is-focused': _objectSpread({}, navBarFocus),
     '&.is-hovered': {
@@ -46,7 +50,7 @@ export var navBar = {
     },
     '&.is-pressed': {
       backgroundColor: 'gray-200',
-      color: 'text.primary'
+      color: 'gray-700'
     },
     '&.is-selected': {
       bg: 'lightblue',
@@ -55,7 +59,7 @@ export var navBar = {
     }
   },
   subtitle: {
-    color: 'text.primary'
+    color: 'gray-700'
   },
   headerText: {
     color: 'text.primary',
@@ -79,13 +83,13 @@ export var navBar = {
   item: {
     px: '1rem',
     py: '.75rem',
-    color: 'text.primary',
+    color: 'gray-700',
     borderRadius: '4px',
     '&.is-hovered': {
       backgroundColor: 'light'
     },
     '> div > svg': {
-      fill: 'text.primary'
+      fill: 'gray-700'
     },
     '&.is-pressed': {
       backgroundColor: 'gray-200'
@@ -112,10 +116,10 @@ export var navBar = {
     '&.is-selected': _objectSpread({}, navBarSelected),
     backgroundColor: 'transparent',
     '> svg': {
-      fill: 'text.primary'
+      fill: 'gray-700'
     },
     '> div > svg': {
-      fill: 'text.primary'
+      fill: 'gray-700'
     }
   },
   navBarItemBody: {

package/lib/styles/variants/variants.js

@@ -38,6 +38,7 @@ import message from '../../components/Messages/Message.styles';
 import modal from '../../components/Modal/Modal.styles';
 import navBar from '../../components/NavBar/NavBar.styles';
 import overlayPanel from '../../components/OverlayPanel/OverlayPanel.styles';
+import pagination from '../../components/Pagination/Pagination.styles';
 import panelHeader from '../../components/PanelHeader/PanelHeader.styles';
 import popoverMenu from '../../components/PopoverMenu/PopoverMenu.styles';
 import progressBar from '../../components/ProgressBar/ProgressBar.styles';
@@ -85,8 +86,9 @@ export default _objectSpread({
   modal: modal,
   navBar: navBar,
   overlayPanel: overlayPanel,
-  popoverMenu: popoverMenu,
+  pagination: pagination,
   panelHeader: panelHeader,
+  popoverMenu: popoverMenu,
   progressBar: progressBar,
   rockerButton: rockerButton,
   scrollBox: scrollBox,

package/lib/types/pagination.js

@@ -0,0 +1 @@
+export {};

package/lib/utils/devUtils/shouldReturnComingSoon.js

@@ -1,8 +1,8 @@
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
-import nextGenConvertedComponents, { componentSpecificNextGenBlacklist, nextGenOnlyComponents } from '../../styles/themes/next-gen/convertedComponentList';
+import nextGenConvertedComponents, { astroBlacklistStory, componentSpecificNextGenBlacklist, nextGenOnlyComponents } from '../../styles/themes/next-gen/convertedComponentList';
 import { themes } from './constants/themes';
 export var shouldReturnComingSoon = function shouldReturnComingSoon(context, selectedTheme) {
-  var _context;
+  var _context, _context2;
   var story = context.name;
   var component = context.title.split('/')[1];
   var isNextGenOnlyComponent = _includesInstanceProperty(nextGenOnlyComponents).call(nextGenOnlyComponents, component) || context.title.split('/')[0] === 'Onyx Recipes';
@@ -11,8 +11,14 @@ export var shouldReturnComingSoon = function shouldReturnComingSoon(context, sel
     return false;
   }
 
+  // if a story made for NextGen theme only, and the selected theme is Astro,
+  // return the coming soon message
+  if (astroBlacklistStory[component] && _includesInstanceProperty(_context = astroBlacklistStory[component]).call(_context, story) && selectedTheme === themes.ASTRO) {
+    return true;
+  }
+
   // if a specific story has not been converted, return the coming soon message
-  if (componentSpecificNextGenBlacklist[component] && _includesInstanceProperty(_context = componentSpecificNextGenBlacklist[component]).call(_context, story) && (selectedTheme === themes.NEXT_GEN || selectedTheme === themes.NEXT_GEN_DARK)) {
+  if (componentSpecificNextGenBlacklist[component] && _includesInstanceProperty(_context2 = componentSpecificNextGenBlacklist[component]).call(_context2, story) && (selectedTheme === themes.NEXT_GEN || selectedTheme === themes.NEXT_GEN_DARK)) {
     return true;
   }
   // if the component has NOT been converted, and the active theme is NextGen

package/package.json

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

package/lib/cjs/recipes/NextGen/NavBarNextGen.stories.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const Default: () => React.JSX.Element;

package/lib/cjs/recipes/NextGen/NavBarNextGen.stories.js

@@ -1,19 +0,0 @@
-"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
-});
-exports["default"] = exports.Default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _NavBarNextGenComponent = require("../../styles/themes/next-gen/stories/NavBarNextGenComponent");
-var _react2 = require("@emotion/react");
-var _default = {
-  title: 'Onyx Recipes/NavBar'
-};
-exports["default"] = _default;
-var Default = function Default() {
-  return (0, _react2.jsx)(_NavBarNextGenComponent.NavBarNextGenComponent, null);
-};
-exports.Default = Default;

package/lib/cjs/styles/themes/next-gen/stories/NavBarNextGenComponent.js

@@ -1,191 +0,0 @@
-"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
-});
-exports.NavBarNextGenComponent = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _AccountCheckOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountCheckOutlineIcon"));
-var _AccountMultipleOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountMultipleOutlineIcon"));
-var _AppsIcon = _interopRequireDefault(require("@pingux/mdi-react/AppsIcon"));
-var _CheckCircleOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckCircleOutlineIcon"));
-var _CodeTagsIcon = _interopRequireDefault(require("@pingux/mdi-react/CodeTagsIcon"));
-var _CogOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/CogOutlineIcon"));
-var _FileTreeIcon = _interopRequireDefault(require("@pingux/mdi-react/FileTreeIcon"));
-var _LayersOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/LayersOutlineIcon"));
-var _PaletteOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/PaletteOutlineIcon"));
-var _ShieldCheckOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/ShieldCheckOutlineIcon"));
-var _ShowChartIcon = _interopRequireDefault(require("@pingux/mdi-react/ShowChartIcon"));
-var _ViewDashboardOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/ViewDashboardOutlineIcon"));
-var _WidgetsOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/WidgetsOutlineIcon"));
-var _useGetTheme2 = _interopRequireDefault(require("../../../../hooks/useGetTheme"));
-var _index = require("../../../../index");
-var _react2 = require("@emotion/react");
-var data = [{
-  'data-id': 'dashboard-data-id',
-  heading: 'Monitoring',
-  icon: _ShowChartIcon["default"],
-  key: 'Monitoring',
-  children: [(0, _react2.jsx)(_index.NavBarItemButton, {
-    key: "Dashboards",
-    id: "Dashboards"
-  }, "Dashboards"), (0, _react2.jsx)(_index.NavBarItemButton, {
-    key: "Audit",
-    id: "Audit"
-  }, "Audits")]
-}, {
-  'data-id': 'Directory-data-id',
-  heading: 'Directory',
-  icon: _AccountMultipleOutlineIcon["default"],
-  key: 'Directory',
-  children: [(0, _react2.jsx)(_index.NavBarItemButton, {
-    key: "Users",
-    id: "Users"
-  }, "Users"), (0, _react2.jsx)(_index.NavBarItemButton, {
-    key: "Group",
-    id: "Group"
-  }, "Groups")]
-}, {
-  'data-id': 'Applications-data-id',
-  heading: 'Applications',
-  icon: _AppsIcon["default"],
-  key: 'Applications',
-  children: [(0, _react2.jsx)(_index.NavBarItemButton, {
-    key: "Applications-sub",
-    id: "Applications-sub"
-  }, "Applications"), (0, _react2.jsx)(_index.NavBarItemButton, {
-    key: "Resources",
-    id: "Resources"
-  }, "Resourcess")]
-}];
-var secondData = [{
-  'data-id': 'Authentication-data-id',
-  heading: 'Authentication',
-  icon: _CheckCircleOutlineIcon["default"],
-  key: 'Authentication',
-  children: [(0, _react2.jsx)(_index.NavBarItemButton, {
-    key: "Authentication-Policies",
-    id: "Authentication-Policies"
-  }, "Authentication Policies"), (0, _react2.jsx)(_index.NavBarItemButton, {
-    key: "Password-Policies",
-    id: "Password-Policies"
-  }, "Password Policies")]
-}, {
-  'data-id': 'Threat Protection-data-id',
-  heading: 'Threat Protection',
-  icon: _ShieldCheckOutlineIcon["default"],
-  key: 'Threat Protection',
-  children: [(0, _react2.jsx)(_index.NavBarItemButton, {
-    key: "Risk Policies",
-    id: "Risk Policies"
-  }, "Risk Policies"), (0, _react2.jsx)(_index.NavBarItemButton, {
-    key: "Predictors",
-    id: "Predictors"
-  }, "Predictors")]
-}, {
-  'data-id': 'Threat Protection-data-id',
-  heading: 'Identity Verification',
-  icon: _LayersOutlineIcon["default"],
-  key: 'Identity Verification',
-  children: [(0, _react2.jsx)(_index.NavBarItemButton, {
-    key: "Verify Policies",
-    id: "Verify Policies"
-  }, "Verify Policies")]
-}, {
-  'data-id': 'Digital Credentials-data-id',
-  heading: 'Digital Credentials',
-  icon: _CodeTagsIcon["default"],
-  key: 'Digital Credentials',
-  children: [(0, _react2.jsx)(_index.NavBarItemButton, {
-    key: "Management",
-    id: "Management"
-  }, "Management")]
-}, {
-  'data-id': 'Authorization-data-id',
-  heading: 'Authorization',
-  icon: _AccountCheckOutlineIcon["default"],
-  key: 'Authorization',
-  children: [(0, _react2.jsx)(_index.NavBarItemButton, {
-    key: "Trust Framework",
-    id: "Trust Framework"
-  }, "Trust Framework"), (0, _react2.jsx)(_index.NavBarItemButton, {
-    key: "Policies",
-    id: "Policies"
-  }, "Policies")]
-}];
-var thirdData = [{
-  'data-id': 'Integrations-data-id',
-  heading: 'Integrations',
-  icon: _WidgetsOutlineIcon["default"],
-  key: 'Integrations',
-  children: [(0, _react2.jsx)(_index.NavBarItemButton, {
-    key: "External IDPs",
-    id: "External IDPs"
-  }, "External IDPs"), (0, _react2.jsx)(_index.NavBarItemButton, {
-    key: "Provisioning",
-    id: "Provisioning"
-  }, "Provisioning")]
-}, {
-  'data-id': 'User Experience-data-id',
-  heading: 'User Experience',
-  icon: _PaletteOutlineIcon["default"],
-  key: 'User Experience',
-  children: [(0, _react2.jsx)(_index.NavBarItemButton, {
-    key: "Notification Templates",
-    id: "Notification Templates"
-  }, "Notification Templates"), (0, _react2.jsx)(_index.NavBarItemButton, {
-    key: "Notification Policies",
-    id: "Notification Policies"
-  }, "Notification Policies")]
-}, {
-  'data-id': 'Settings-data-id',
-  heading: 'Settings',
-  icon: _CogOutlineIcon["default"],
-  key: 'Settings',
-  children: [(0, _react2.jsx)(_index.NavBarItemButton, {
-    key: "Certificates & Key Pairs",
-    id: "Certificates & Key Pairs"
-  }, "Certificates & Key Pairs"), (0, _react2.jsx)(_index.NavBarItemButton, {
-    key: "Domains",
-    id: "Domains"
-  }, "Domains")]
-}];
-var NavBarNextGenComponent = function NavBarNextGenComponent() {
-  var _useGetTheme = (0, _useGetTheme2["default"])(),
-    icons = _useGetTheme.icons;
-  return (0, _react2.jsx)(_index.NavBar, null, (0, _react2.jsx)(_index.Box, {
-    padding: "md",
-    key: "top-logo-parent"
-  }, icons.pingLogoHorizontalSmall), (0, _react2.jsx)(_index.Box, {
-    paddingBottom: "xl",
-    key: "first-section-container"
-  }, (0, _react2.jsx)(_index.NavBarItem, {
-    "data-id": "nav-bar-item",
-    icon: _ViewDashboardOutlineIcon["default"],
-    id: "Overview",
-    key: "Overview",
-    text: "Overview"
-  }), (0, _react2.jsx)(_index.NavBarSection, {
-    items: data,
-    "data-id": "nav-bar-section"
-  }), (0, _react2.jsx)(_index.Separator, {
-    variant: "separator.navBarSeparator"
-  }), (0, _react2.jsx)(_index.NavBarItem, {
-    "data-id": "nav-bar-item",
-    icon: _FileTreeIcon["default"],
-    id: "DaVinci",
-    key: "DaVinci",
-    text: "DaVinci"
-  }), (0, _react2.jsx)(_index.NavBarSection, {
-    items: secondData,
-    "data-id": "second-nav-bar-section"
-  }), (0, _react2.jsx)(_index.Separator, {
-    variant: "separator.navBarSeparator"
-  }), (0, _react2.jsx)(_index.NavBarSection, {
-    items: thirdData,
-    "data-id": "third-nav-bar-section"
-  })));
-};
-exports.NavBarNextGenComponent = NavBarNextGenComponent;

package/lib/recipes/NextGen/NavBarNextGen.stories.js

@@ -1,9 +0,0 @@
-import React from 'react';
-import { NavBarNextGenComponent } from '../../styles/themes/next-gen/stories/NavBarNextGenComponent';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-export default {
-  title: 'Onyx Recipes/NavBar'
-};
-export var Default = function Default() {
-  return ___EmotionJSX(NavBarNextGenComponent, null);
-};