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

package/lib/cjs/{styles/themeOverrides → components/NavBar}/stories/NavBar.chromatic.stories.js

@@ -16,12 +16,12 @@ var _GlobeIcon = _interopRequireDefault(require("@pingux/mdi-react/GlobeIcon"));
 var _ScaleBalanceIcon = _interopRequireDefault(require("@pingux/mdi-react/ScaleBalanceIcon"));
 var _TransitConnectionVariantIcon = _interopRequireDefault(require("@pingux/mdi-react/TransitConnectionVariantIcon"));
 var _ViewDashboardIcon = _interopRequireDefault(require("@pingux/mdi-react/ViewDashboardIcon"));
-var _index = require("../../../index");
-var _withUiLibraryCss = _interopRequireDefault(require("../withUiLibraryCss"));
+var _ = require("../../..");
+var _withUiLibraryCss = _interopRequireDefault(require("../../../styles/themeOverrides/withUiLibraryCss"));
 var _react2 = require("@emotion/react");
 var _default = {
   title: 'Chromatic Only NavBar',
-  component: _index.NavBar,
+  component: _.NavBar,
   decorators: [_withUiLibraryCss["default"]]
 };
 exports["default"] = _default;
@@ -119,12 +119,12 @@ var data = [{
   heading: 'Dashboard',
   icon: _ViewDashboardIcon["default"],
   key: 'Dashboard',
-  children: [(0, _react2.jsx)(_index.NavBarItemLink, {
+  children: [(0, _react2.jsx)(_.NavBarItemLink, {
     key: "Dashboard Link Group",
     id: "Dashboard Link Group",
     variant: "variants.navBar.itemButton",
     href: "https://pingidentity.com/"
-  }, "Group"), (0, _react2.jsx)(_index.NavBarItemButton, {
+  }, "Group"), (0, _react2.jsx)(_.NavBarItemButton, {
     key: "Dashboard Link Populations",
     id: "Dashboard Link Populations"
   }, "Populations")]
@@ -133,23 +133,23 @@ var data = [{
   icon: _AccountMultipleIcon["default"],
   key: 'Identities',
   heading: 'Identities',
-  children: [(0, _react2.jsx)(_index.NavBarItemLink, {
+  children: [(0, _react2.jsx)(_.NavBarItemLink, {
     key: "Identities Link Users",
     id: "Identities Link Users",
     href: "https://pingidentity.com/"
-  }, "Users"), (0, _react2.jsx)(_index.NavBarItemLink, {
+  }, "Users"), (0, _react2.jsx)(_.NavBarItemLink, {
     key: "Identities Link Groups",
     id: "Identities Link Groups",
     href: "https://pingidentity.com/"
-  }, "Groups"), (0, _react2.jsx)(_index.NavBarItemLink, {
+  }, "Groups"), (0, _react2.jsx)(_.NavBarItemLink, {
     key: "Identities Link Populations",
     id: "Identities Link Populations",
     href: "https://pingidentity.com/"
-  }, "Populations"), (0, _react2.jsx)(_index.NavBarItemLink, {
+  }, "Populations"), (0, _react2.jsx)(_.NavBarItemLink, {
     key: "Identities Link Attributes",
     id: "Identities Link Attributes",
     href: "https://pingidentity.com/"
-  }, "Attributes"), (0, _react2.jsx)(_index.NavBarItemButton, {
+  }, "Attributes"), (0, _react2.jsx)(_.NavBarItemButton, {
     key: "Identities Link Roles",
     id: "Identities Link Roles"
   }, "Roles")]
@@ -161,53 +161,53 @@ var data = [{
   children: [{
     hasSeparator: false,
     subTitle: 'Applications'
-  }, (0, _react2.jsx)(_index.NavBarItemLink, {
+  }, (0, _react2.jsx)(_.NavBarItemLink, {
     key: "Connections Applications",
     id: "Connections Applications",
     href: "https://pingidentity.com/"
-  }, "Applications"), (0, _react2.jsx)(_index.NavBarItemLink, {
+  }, "Applications"), (0, _react2.jsx)(_.NavBarItemLink, {
     key: "Connections Application Catalog",
     id: "Connections Application Catalog",
     href: "https://pingidentity.com/"
-  }, "Application Catalog"), (0, _react2.jsx)(_index.NavBarItemLink, {
+  }, "Application Catalog"), (0, _react2.jsx)(_.NavBarItemLink, {
     key: "Connections Application Portal",
     id: "Connections Application Portal",
     href: "https://pingidentity.com/"
   }, "Application Portal"), {
     subTitle: 'Identity Providers'
-  }, (0, _react2.jsx)(_index.NavBarItemLink, {
+  }, (0, _react2.jsx)(_.NavBarItemLink, {
     key: "Connections External IDPs",
     id: "Connections External IDPs",
     href: "https://pingidentity.com/"
   }, "External IDPs"), {
     subTitle: 'Ping Products'
-  }, (0, _react2.jsx)(_index.NavBarItemLink, {
+  }, (0, _react2.jsx)(_.NavBarItemLink, {
     key: "Connections PingFederate",
     id: "Connections PingFederate",
     href: "https://pingidentity.com/"
-  }, "PingFederate"), (0, _react2.jsx)(_index.NavBarItemLink, {
+  }, "PingFederate"), (0, _react2.jsx)(_.NavBarItemLink, {
     key: "Connections PingIntelligence",
     id: "Connections PingIntelligence",
     href: "https://pingidentity.com/"
-  }, "PingIntelligence"), (0, _react2.jsx)(_index.Separator, {
+  }, "PingIntelligence"), (0, _react2.jsx)(_.Separator, {
     variant: "separator.navBarSubtitleSeparator"
-  }), (0, _react2.jsx)(_index.NavBarItemLink, {
+  }), (0, _react2.jsx)(_.NavBarItemLink, {
     key: "Connections Provisioning",
     id: "Connections Provisioning",
     href: "https://pingidentity.com/"
-  }, "Provisioning"), (0, _react2.jsx)(_index.NavBarItemLink, {
+  }, "Provisioning"), (0, _react2.jsx)(_.NavBarItemLink, {
     key: "Connections WebHooks",
     id: "Connections WebHooks",
     href: "https://pingidentity.com/"
-  }, "WebHooks"), (0, _react2.jsx)(_index.NavBarItemLink, {
+  }, "WebHooks"), (0, _react2.jsx)(_.NavBarItemLink, {
     key: "Connections Gateways",
     id: "Connections Gateways",
     href: "https://pingidentity.com/"
-  }, "Gateways"), (0, _react2.jsx)(_index.NavBarItemLink, {
+  }, "Gateways"), (0, _react2.jsx)(_.NavBarItemLink, {
     key: "Connections Certificates & Key Pairs",
     id: "Connections Certificates & Key Pairs",
     href: "https://pingidentity.com/"
-  }, "Certificates & Key Pairs"), (0, _react2.jsx)(_index.NavBarItemButton, {
+  }, "Certificates & Key Pairs"), (0, _react2.jsx)(_.NavBarItemButton, {
     key: "Connections Resources",
     id: "Connections Resources"
   }, "Resources")]
@@ -219,56 +219,56 @@ var data = [{
   children: [{
     hasSeparator: false,
     subTitle: 'Policies'
-  }, (0, _react2.jsx)(_index.NavBarItemLink, {
+  }, (0, _react2.jsx)(_.NavBarItemLink, {
     key: "Experiences Authentication",
     id: "Experiences Authentication",
     href: "https://pingidentity.com/"
-  }, "Authentication"), (0, _react2.jsx)(_index.NavBarItemLink, {
+  }, "Authentication"), (0, _react2.jsx)(_.NavBarItemLink, {
     key: "Experiences MFA",
     id: "Experiences MFA",
     href: "https://pingidentity.com/"
-  }, "MFA"), (0, _react2.jsx)(_index.NavBarItemLink, {
+  }, "MFA"), (0, _react2.jsx)(_.NavBarItemLink, {
     key: "Experiences Password",
     id: "Experiences Password",
     href: "https://pingidentity.com/"
-  }, "Password"), (0, _react2.jsx)(_index.Separator, {
+  }, "Password"), (0, _react2.jsx)(_.Separator, {
     variant: "separator.navBarSubtitleSeparator"
-  }), (0, _react2.jsx)(_index.NavBarItemLink, {
+  }), (0, _react2.jsx)(_.NavBarItemLink, {
     key: "Experiences Risk",
     id: "Experiences Risk",
     href: "https://pingidentity.com/"
-  }, "Risk"), (0, _react2.jsx)(_index.NavBarItemLink, {
+  }, "Risk"), (0, _react2.jsx)(_.NavBarItemLink, {
     key: "Experiences Flows",
     id: "Experiences Flows",
     href: "https://pingidentity.com/"
-  }, "Flows"), (0, _react2.jsx)(_index.NavBarItemLink, {
+  }, "Flows"), (0, _react2.jsx)(_.NavBarItemLink, {
     key: "Experiences Forms",
     id: "Experiences Forms",
     href: "https://pingidentity.com/"
-  }, "Forms"), (0, _react2.jsx)(_index.NavBarItemLink, {
+  }, "Forms"), (0, _react2.jsx)(_.NavBarItemLink, {
     key: "Experiences Languages",
     id: "Experiences Languages",
     href: "https://pingidentity.com/"
-  }, "Languages"), (0, _react2.jsx)(_index.NavBarItemLink, {
+  }, "Languages"), (0, _react2.jsx)(_.NavBarItemLink, {
     key: "Experiences Agreements",
     id: "Experiences Agreements",
     href: "https://pingidentity.com/"
-  }, "Agreements"), (0, _react2.jsx)(_index.NavBarItemLink, {
+  }, "Agreements"), (0, _react2.jsx)(_.NavBarItemLink, {
     key: "Experiences Branding & Themes",
     id: "Experiences Branding & Themes",
     href: "https://pingidentity.com/"
-  }, "Branding & Themes"), (0, _react2.jsx)(_index.NavBarItemLink, {
+  }, "Branding & Themes"), (0, _react2.jsx)(_.NavBarItemLink, {
     key: "Experiences Notifications",
     id: "Experiences Notifications",
     href: "https://pingidentity.com/"
-  }, "Notifications"), (0, _react2.jsx)(_index.NavBarItemLink, {
+  }, "Notifications"), (0, _react2.jsx)(_.NavBarItemLink, {
     key: "Experiences Vanity Domains",
     id: "Experiences Vanity Domains",
     href: "https://pingidentity.com/",
     onClick: function onClick(e) {
       return e.preventDefault();
     }
-  }, "Vanity Domains"), (0, _react2.jsx)(_index.NavBarItemButton, {
+  }, "Vanity Domains"), (0, _react2.jsx)(_.NavBarItemButton, {
     key: "Experiences Sender",
     id: "Experiences Sender"
   }, "Sender")]
@@ -278,12 +278,12 @@ var secondData = [{
   icon: _FingerprintIcon["default"],
   key: 'MFA',
   heading: 'MFA',
-  children: [(0, _react2.jsx)(_index.NavBarItemButton, {
+  children: [(0, _react2.jsx)(_.NavBarItemButton, {
     id: "MFA Button Users",
     key: "MFA Button Users"
   }, "Users"), {
     subTitle: 'PingOne Services'
-  }, (0, _react2.jsx)(_index.NavBarItemButton, {
+  }, (0, _react2.jsx)(_.NavBarItemButton, {
     key: "MFA Button Group",
     id: "MFA Button Group"
   }, "Group Test")]
@@ -292,13 +292,13 @@ var secondData = [{
   icon: _ScaleBalanceIcon["default"],
   key: 'Risk',
   heading: 'Risk',
-  children: [(0, _react2.jsx)(_index.NavBarItemButton, {
+  children: [(0, _react2.jsx)(_.NavBarItemButton, {
     key: "Risk Button Users",
     id: "Risk Button Users"
   }, "Users"), {
     hasSeparator: false,
     subTitle: 'PingOne Services'
-  }, (0, _react2.jsx)(_index.NavBarItemButton, {
+  }, (0, _react2.jsx)(_.NavBarItemButton, {
     key: "Risk Button Group",
     id: "Risk Button Group"
   }, "Group")]
@@ -307,13 +307,13 @@ var secondData = [{
   icon: Verify,
   key: 'Verify',
   heading: 'Verify',
-  children: [(0, _react2.jsx)(_index.NavBarItemButton, {
+  children: [(0, _react2.jsx)(_.NavBarItemButton, {
     key: "Verify Button Users",
     id: "Verify Button Users"
   }, "Users"), {
     hasSeparator: false,
     subTitle: 'PingOne Services'
-  }, (0, _react2.jsx)(_index.NavBarItemButton, {
+  }, (0, _react2.jsx)(_.NavBarItemButton, {
     key: "Verify Button Group",
     id: "Verify Button Group"
   }, "Group")]
@@ -322,13 +322,13 @@ var secondData = [{
   icon: Credentials,
   key: 'Credentials',
   heading: 'Credentials',
-  children: [(0, _react2.jsx)(_index.NavBarItemButton, {
+  children: [(0, _react2.jsx)(_.NavBarItemButton, {
     key: "Credentials Button Users",
     id: "Credentials Button Users"
   }, "Users"), {
     hasSeparator: false,
     subTitle: 'PingOne Services'
-  }, (0, _react2.jsx)(_index.NavBarItemButton, {
+  }, (0, _react2.jsx)(_.NavBarItemButton, {
     key: "Credentials Button Group",
     id: "Credentials Button Group"
   }, "Group")]
@@ -338,42 +338,42 @@ var thirdData = [{
   icon: _EarthIcon["default"],
   key: 'Environment',
   heading: 'Environment title that is so long, it wraps',
-  children: [(0, _react2.jsx)(_index.NavBarItemButton, {
+  children: [(0, _react2.jsx)(_.NavBarItemButton, {
     key: "Earth Button Users",
     id: "Earth Button Users"
-  }, "Users"), (0, _react2.jsx)(_index.NavBarItemButton, {
+  }, "Users"), (0, _react2.jsx)(_.NavBarItemButton, {
     key: "Earth Button Group",
     id: "Earth Button Group"
   }, "Group")]
 }];
 var Default = function Default() {
-  return (0, _react2.jsx)(_index.NavBar, null, (0, _react2.jsx)(_index.Box, {
+  return (0, _react2.jsx)(_.NavBar, null, (0, _react2.jsx)(_.Box, {
     padding: "md"
-  }, (0, _react2.jsx)(_index.Link, {
+  }, (0, _react2.jsx)(_.Link, {
     "aria-label": "home link",
     href: "https://pingidentity.com",
     target: "_blank"
-  }, logo)), (0, _react2.jsx)(_index.Separator, {
+  }, logo)), (0, _react2.jsx)(_.Separator, {
     m: 0,
     backgroundColor: "neutral.60"
-  }), (0, _react2.jsx)(_index.Box, {
+  }), (0, _react2.jsx)(_.Box, {
     variant: "navBar.sectionContainer",
     paddingBottom: "xl"
-  }, (0, _react2.jsx)(_index.NavBarItem, {
+  }, (0, _react2.jsx)(_.NavBarItem, {
     "data-id": "nav-bar-item",
     icon: _GlobeIcon["default"],
     id: "Overview",
     key: "Overview",
     text: "Overview"
-  }), (0, _react2.jsx)(_index.NavBarSection, {
+  }), (0, _react2.jsx)(_.NavBarSection, {
     items: data,
     "data-id": "nav-bar-section"
-  }), (0, _react2.jsx)(_index.NavBarSection, {
+  }), (0, _react2.jsx)(_.NavBarSection, {
     items: secondData,
     hasSeparator: true,
     title: "PingOne Services",
     "data-id": "second-nav-bar-section"
-  }), (0, _react2.jsx)(_index.NavBarSection, {
+  }), (0, _react2.jsx)(_.NavBarSection, {
     items: thirdData,
     hasSeparator: true,
     "data-id": "third-nav-bar-section"

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

@@ -0,0 +1,191 @@
+"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 _ = require("../../..");
+var _hooks = require("../../../hooks");
+var _react2 = require("@emotion/react");
+var NavBarNextGenComponent = function NavBarNextGenComponent() {
+  var firstSectionData = [{
+    'data-id': 'dashboard-data-id',
+    heading: 'Monitoring',
+    icon: _ShowChartIcon["default"],
+    key: 'Monitoring',
+    children: [(0, _react2.jsx)(_.NavBarItemButton, {
+      key: "Dashboards",
+      id: "Dashboards"
+    }, "Dashboards"), (0, _react2.jsx)(_.NavBarItemButton, {
+      key: "Audit",
+      id: "Audit"
+    }, "Audits")]
+  }, {
+    'data-id': 'Directory-data-id',
+    heading: 'Directory',
+    icon: _AccountMultipleOutlineIcon["default"],
+    key: 'Directory',
+    children: [(0, _react2.jsx)(_.NavBarItemButton, {
+      key: "Users",
+      id: "Users"
+    }, "Users"), (0, _react2.jsx)(_.NavBarItemButton, {
+      key: "Group",
+      id: "Group"
+    }, "Groups")]
+  }, {
+    'data-id': 'Applications-data-id',
+    heading: 'Applications',
+    icon: _AppsIcon["default"],
+    key: 'Applications',
+    children: [(0, _react2.jsx)(_.NavBarItemButton, {
+      key: "Applications-sub",
+      id: "Applications-sub"
+    }, "Applications"), (0, _react2.jsx)(_.NavBarItemButton, {
+      key: "Resources",
+      id: "Resources"
+    }, "Resourcess")]
+  }];
+  var secondSectionData = [{
+    'data-id': 'Authentication-data-id',
+    heading: 'Authentication',
+    icon: _CheckCircleOutlineIcon["default"],
+    key: 'Authentication',
+    children: [(0, _react2.jsx)(_.NavBarItemButton, {
+      key: "Authentication-Policies",
+      id: "Authentication-Policies"
+    }, "Authentication Policies"), (0, _react2.jsx)(_.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)(_.NavBarItemButton, {
+      key: "Risk Policies",
+      id: "Risk Policies"
+    }, "Risk Policies"), (0, _react2.jsx)(_.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)(_.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)(_.NavBarItemButton, {
+      key: "Management",
+      id: "Management"
+    }, "Management")]
+  }, {
+    'data-id': 'Authorization-data-id',
+    heading: 'Authorization',
+    icon: _AccountCheckOutlineIcon["default"],
+    key: 'Authorization',
+    children: [(0, _react2.jsx)(_.NavBarItemButton, {
+      key: "Trust Framework",
+      id: "Trust Framework"
+    }, "Trust Framework"), (0, _react2.jsx)(_.NavBarItemButton, {
+      key: "Policies",
+      id: "Policies"
+    }, "Policies")]
+  }];
+  var thirdSectionData = [{
+    'data-id': 'Integrations-data-id',
+    heading: 'Integrations',
+    icon: _WidgetsOutlineIcon["default"],
+    key: 'Integrations',
+    children: [(0, _react2.jsx)(_.NavBarItemButton, {
+      key: "External IDPs",
+      id: "External IDPs"
+    }, "External IDPs"), (0, _react2.jsx)(_.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)(_.NavBarItemButton, {
+      key: "Notification Templates",
+      id: "Notification Templates"
+    }, "Notification Templates"), (0, _react2.jsx)(_.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)(_.NavBarItemButton, {
+      key: "Certificates & Key Pairs",
+      id: "Certificates & Key Pairs"
+    }, "Certificates & Key Pairs"), (0, _react2.jsx)(_.NavBarItemButton, {
+      key: "Domains",
+      id: "Domains"
+    }, "Domains")]
+  }];
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    icons = _useGetTheme.icons;
+  return (0, _react2.jsx)(_.NavBar, null, (0, _react2.jsx)(_.Box, {
+    padding: "md",
+    key: "top-logo-parent"
+  }, icons.pingLogoHorizontalSmall), (0, _react2.jsx)(_.Box, {
+    variant: "navBar.sectionContainer",
+    paddingBottom: "xl",
+    key: "first-section-container"
+  }, (0, _react2.jsx)(_.NavBarItem, {
+    "data-id": "nav-bar-item",
+    icon: _ViewDashboardOutlineIcon["default"],
+    id: "Overview",
+    key: "Overview",
+    text: "Overview"
+  }), (0, _react2.jsx)(_.NavBarSection, {
+    items: firstSectionData,
+    "data-id": "nav-bar-section"
+  }), (0, _react2.jsx)(_.Separator, {
+    variant: "separator.navBarSeparator"
+  }), (0, _react2.jsx)(_.NavBarItem, {
+    "data-id": "nav-bar-item",
+    icon: _FileTreeIcon["default"],
+    id: "DaVinci",
+    key: "DaVinci",
+    text: "DaVinci"
+  }), (0, _react2.jsx)(_.NavBarSection, {
+    items: secondSectionData,
+    "data-id": "second-nav-bar-section"
+  }), (0, _react2.jsx)(_.NavBarSection, {
+    items: thirdSectionData,
+    hasSeparator: true,
+    "data-id": "third-nav-bar-section"
+  })));
+};
+exports.NavBarNextGenComponent = NavBarNextGenComponent;

package/lib/cjs/{styles/themeOverrides/nextGenDarkMode → components/NavBar}/stories/NextGenDarkNavStory.chomatic.stories.js

@@ -7,8 +7,8 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _ = require("../../../..");
-var _NavBarNextGenComponent = require("../../../themes/next-gen/stories/NavBarNextGenComponent");
+var _ = require("../../..");
+var _NavBarNextGenComponent = require("./NavBarNextGenComponent");
 var _react2 = require("@emotion/react");
 var _default = {
   title: 'Chromatic Only Onyx Dark NavBar'

package/lib/cjs/{styles/themes/next-gen → components/NavBar}/stories/NextGenNavBar.chromatic.stories.js

@@ -7,7 +7,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _ = require("../../../..");
+var _ = require("../../..");
 var _NavBarNextGenComponent = require("./NavBarNextGenComponent");
 var _react2 = require("@emotion/react");
 var _default = {

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

@@ -66,6 +66,8 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }),
     classNames = _useStatusClasses.classNames;
   var color = isSelected ? 'white' : 'neutral.95';
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    isOnyx = _useGetTheme.themeState.isOnyx;
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     id: key,
     variant: state.navStyles.navBarItem,
@@ -87,7 +89,7 @@ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     title: {
       name: text
     },
-    size: "sm",
+    size: isOnyx ? 'icon-200' : 'sm',
     sx: {
       mr: 'sm',
       color: color,

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

@@ -15,7 +15,7 @@ var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 var _react = _interopRequireWildcard(require("react"));
 var _NavBarContext = require("../../context/NavBarContext");
 var _hooks = require("../../hooks");
-var _useGetTheme2 = _interopRequireDefault(require("../../hooks/useGetTheme"));
+var _useGetTheme3 = _interopRequireDefault(require("../../hooks/useGetTheme"));
 var _index = require("../../index");
 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); }
@@ -38,7 +38,8 @@ var NavBarSectionItemHeader = function NavBarSectionItemHeader(_ref2) {
     className = item.className,
     heading = item.heading;
   var navBarState = (0, _NavBarContext.useNavBarContext)();
-  var _useGetTheme = (0, _useGetTheme2["default"])(),
+  var _useGetTheme = (0, _useGetTheme3["default"])(),
+    isOnyx = _useGetTheme.themeState.isOnyx,
     icons = _useGetTheme.icons;
   var MenuDown = icons.MenuDown,
     MenuUp = icons.MenuUp;
@@ -74,7 +75,7 @@ var NavBarSectionItemHeader = function NavBarSectionItemHeader(_ref2) {
     "data-testid": heading
   }, icon && (0, _react2.jsx)(_index.Icon, {
     icon: icon,
-    size: "sm",
+    size: isOnyx ? 'icon-200' : 'sm',
     sx: {
       mr: 'sm',
       color: getIconColor(),
@@ -91,7 +92,7 @@ var NavBarSectionItemHeader = function NavBarSectionItemHeader(_ref2) {
     }
   }, (0, _react2.jsx)(_index.Icon, {
     icon: isExpanded ? MenuUp : MenuDown,
-    size: navStyles.navBarItemHeaderIconSize,
+    size: isOnyx ? 'icon-100' : navStyles.navBarItemHeaderIconSize,
     sx: {
       color: getIconColor(),
       fill: getIconColor()
@@ -109,6 +110,8 @@ var NavBarPrimaryItemHeader = function NavBarPrimaryItemHeader(_ref3) {
     customIcon = item.customIcon;
   var navBarState = (0, _NavBarContext.useNavBarContext)();
   var navStyles = navBarState.navStyles;
+  var _useGetTheme2 = (0, _useGetTheme3["default"])(),
+    isOnyx = _useGetTheme2.themeState.isOnyx;
   return (0, _react2.jsx)(_index.Box, {
     variant: navStyles.navBarItemHeader,
     className: className,
@@ -116,7 +119,7 @@ var NavBarPrimaryItemHeader = function NavBarPrimaryItemHeader(_ref3) {
     "data-testid": heading
   }, icon && (0, _react2.jsx)(_index.Icon, {
     icon: icon,
-    size: "sm",
+    size: isOnyx ? 'icon-200' : 'sm',
     sx: {
       mr: 'sm',
       color: 'neutral.95',
@@ -136,7 +139,7 @@ var NavBarPrimaryItemHeader = function NavBarPrimaryItemHeader(_ref3) {
     }
   }, customIcon && (0, _react2.jsx)(_index.Icon, {
     icon: customIcon,
-    size: "sm",
+    size: isOnyx ? 'icon-200' : 'sm',
     sx: {
       color: 'neutral.95',
       fill: 'neutral.95'

package/lib/cjs/components/NavBarSection/NavBarItemHeader.test.d.ts

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