@pingux/astro 1.42.2 → 2.0.0-alpha.4

package/lib/components/NavBar/NavBar.js

@@ -2,12 +2,13 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React, { useState } from 'react';
-import PropTypes from 'prop-types';
 import { FocusScope, useFocusManager } from '@react-aria/focus';
+import PropTypes from 'prop-types';
 import { NavBarContext } from '../../context/NavBarContext';
+import useProgressiveState from '../../hooks/useProgressiveState';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
 import Box from '../Box/Box';
-import useProgressiveState from '../../hooks/useProgressiveState';
+
 /**
  * Composed component that spreads children.
  *
@@ -17,26 +18,21 @@ import useProgressiveState from '../../hooks/useProgressiveState';
  * an array of objects that is passed into it.
  *
  */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
-
 var NavBar = function NavBar(props) {
   var defaultSelectedKey = props.defaultSelectedKey,
-      selectedKeyProp = props.selectedKey,
-      setSelectedKeyProp = props.setSelectedKey,
-      defaultExpandedKeys = props.defaultExpandedKeys,
-      children = props.children;
-
+    selectedKeyProp = props.selectedKey,
+    setSelectedKeyProp = props.setSelectedKey,
+    defaultExpandedKeys = props.defaultExpandedKeys,
+    children = props.children;
   var _useState = useState(defaultExpandedKeys),
-      _useState2 = _slicedToArray(_useState, 2),
-      expandedKeys = _useState2[0],
-      setExpandedKeys = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    expandedKeys = _useState2[0],
+    setExpandedKeys = _useState2[1];
   var _useProgressiveState = useProgressiveState(selectedKeyProp, defaultSelectedKey),
-      _useProgressiveState2 = _slicedToArray(_useProgressiveState, 2),
-      selectedKey = _useProgressiveState2[0],
-      setSelectedKey = _useProgressiveState2[1];
-
+    _useProgressiveState2 = _slicedToArray(_useProgressiveState, 2),
+    selectedKey = _useProgressiveState2[0],
+    setSelectedKey = _useProgressiveState2[1];
   var items = _Array$isArray(children) ? _mapInstanceProperty(children).call(children, function (child) {
     return {
       item: child,
@@ -62,16 +58,14 @@ var NavBar = function NavBar(props) {
     restoreFocus: true
   }, _mapInstanceProperty(items).call(items, function (_ref) {
     var item = _ref.item,
-        key = _ref.key;
+      key = _ref.key;
     return ___EmotionJSX(FocusableItem, {
       key: key
     }, item);
   })) : null));
 };
-
 var FocusableItem = function FocusableItem(props) {
   var focusManager = useFocusManager();
-
   var onKeyDown = function onKeyDown(e) {
     switch (e.key) {
       case 'ArrowRight':
@@ -79,34 +73,27 @@ var FocusableItem = function FocusableItem(props) {
         e.preventDefault();
         focusManager.focusNext();
         break;
-
       case 'ArrowLeft':
       case 'ArrowUp':
         e.preventDefault();
         focusManager.focusPrevious();
         break;
-
       default:
         break;
     }
   };
-
   var childWithFocusHandle = /*#__PURE__*/React.cloneElement(props.children, {
     onKeyDown: onKeyDown
   });
   return childWithFocusHandle;
 };
-
 NavBar.propTypes = {
   /** The initial selected key in the collection (uncontrolled). */
   defaultSelectedKey: PropTypes.string,
-
   /** The initial expanded keys in the collection (uncontrolled). */
   defaultExpandedKeys: isIterableProp,
-
   /** The selected key in the collection (controlled). */
   selectedKey: isIterableProp,
-
   /**
   * Callback function that fires when the selected key changes.
   *

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

@@ -20,7 +20,6 @@ export default {
   },
   title: 'Components/NavBar'
 };
-
 var Credentials = function Credentials(props) {
   return ___EmotionJSX("svg", _extends({
     width: "18px",
@@ -29,8 +28,7 @@ var Credentials = function Credentials(props) {
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
     x: "0px",
-    y: "0px",
-    xml: "preserve"
+    y: "0px"
   }, props), ___EmotionJSX("g", {
     id: "Layer_2"
   }), ___EmotionJSX("g", {
@@ -50,7 +48,6 @@ var Credentials = function Credentials(props) {
     d: "M15.1,14.3c0-0.9,0.7-1.6,1.6-1.6c0.9,0,1.6,0.7,1.6,1.6c0,0.9-0.7,1.6-1.6,1.6C15.9,15.9,15.1,15.2,15.1,14.3 M16.8,11 c-0.9,0-1.7,0.3-2.3,0.9c-0.6,0.6-1,1.4-1,2.3c0,0.9,0.3,1.7,1,2.3c0.6,0.6,1.4,1,2.3,1c0.9,0,1.7-0.3,2.3-1c0.6-0.6,1-1.4,1-2.3 c0-0.9-0.3-1.7-1-2.3C18.5,11.3,17.6,11,16.8,11 M21.1,14.3c0,0.5-0.1,1-0.3,1.5c-0.2,0.5-0.4,1-0.8,1.3v4.2l-3.3-1.1l-3.3,1.1 v-4.2c-0.7-0.8-1.1-1.8-1.1-2.9c0-1.2,0.4-2.3,1.3-3.1c0.8-0.8,1.9-1.3,3.1-1.3c1.2,0,2.3,0.4,3.1,1.3 C20.7,12,21.1,13.1,21.1,14.3z"
   }))));
 };
-
 var Verify = function Verify(props) {
   return ___EmotionJSX("svg", _extends({
     width: "18px",
@@ -80,7 +77,6 @@ var Verify = function Verify(props) {
     id: "Shape"
   }))))));
 };
-
 var logo = ___EmotionJSX("svg", {
   width: "130",
   height: "23",
@@ -103,7 +99,6 @@ var logo = ___EmotionJSX("svg", {
   d: "M36.9874 1.1947C35.9856 1.1947 35.1575 2.04867 35.1575 3.10948C35.1575 4.17059 35.964 5.02519 36.9435 5.02519C37.9457 5.02519 38.7528 4.17059 38.7528 3.10948C38.7528 2.04867 37.9678 1.1947 36.9874 1.1947ZM56.9033 15.1542L55.3339 15.1312C55.0284 15.1312 54.855 15.0152 54.855 14.8537C54.855 14.5314 55.2689 14.2548 56.009 13.8847C56.2262 13.9084 56.3134 13.9084 56.4446 13.9084C58.8193 13.9084 60.5636 12.4303 60.5636 10.4005C60.5636 9.61595 60.3439 9.0155 59.9081 8.46364L59.9605 8.47065L59.9606 8.47066C60.1397 8.49475 60.4151 8.5318 60.672 8.5318C61.4778 8.5318 62.0866 8.27764 62.7193 7.65479L61.4996 5.69332C60.8237 6.34046 59.9958 6.70963 59.1899 6.70963C58.8193 6.70963 58.4264 6.61608 57.8177 6.45516C57.0109 6.24833 56.4446 6.15619 55.8128 6.15619C52.9597 6.15619 51.1075 7.72483 51.1075 10.1476C51.1075 11.9005 51.8913 12.985 53.5037 13.424C51.673 13.9305 51.4561 14.6472 51.4561 15.4081C51.4561 16.216 51.7818 16.7461 52.3055 16.953C52.8291 17.1848 53.6782 17.2985 54.9848 17.3225L56.2262 17.3459C57.3822 17.3689 58.2745 17.6928 58.2745 18.7533C58.2745 19.2382 57.9916 19.676 57.5562 19.9526C57.0994 20.2536 56.467 20.3442 55.7268 20.3442C54.3761 20.3442 53.6337 19.8377 53.6337 18.8909C53.6337 18.5682 53.6561 18.4079 53.7657 18.1307H51.064C50.9545 18.3606 50.8029 18.6848 50.8029 19.331C50.8029 20.1367 51.1075 20.8304 51.7178 21.4296C52.7194 22.4222 54.3541 22.6985 55.9431 22.6985C57.6855 22.6985 59.3645 22.2842 60.3439 21.1757C60.9548 20.4841 61.2385 19.7232 61.2385 18.7312C61.2385 17.6691 60.9324 16.8615 60.2795 16.216C59.4945 15.4535 58.6016 15.1769 56.9033 15.1542ZM54.0479 10.1703C54.0479 9.06345 54.6801 8.41632 55.7907 8.41632C56.9033 8.41632 57.5562 9.06345 57.5562 10.1703C57.5562 11.2548 56.9244 11.8541 55.7692 11.8541C54.7452 11.8541 54.0479 11.3704 54.0479 10.1703ZM43.6997 9.82372C44.375 9.17909 45.1373 8.76354 45.7242 8.76354C46.4871 8.76354 46.7042 9.15543 46.7042 10.4931V18.1768H49.5808V9.54716C49.5808 8.80867 49.5151 8.30146 49.3627 7.86351C49.0144 6.8472 47.9252 6.15619 46.683 6.15619C46.0303 6.15619 45.2671 6.34046 44.6792 6.66278C44.2068 6.93488 43.8401 7.20758 43.4131 7.52507L43.3936 7.53962C43.3936 7.05529 43.2412 6.54855 42.9789 6.06359L40.3874 6.8472C40.6481 7.63176 40.779 8.60074 40.779 9.61595V18.1768H43.6997V9.82372ZM35.485 6.5697L38.4035 6.08505V18.1768H35.485V6.5697ZM32.0851 2.92521C31.2343 2.41721 30.4496 2.14096 27.8792 2.14096H23.8931V18.1768H26.9433V12.2702H28.6201C30.2969 12.2702 30.9512 12.0853 31.6485 11.7391C33.3037 10.9088 34.2612 9.20118 34.2612 7.07926C34.2612 5.23234 33.4995 3.75614 32.0851 2.92521ZM28.5333 9.63945C29.7748 9.63945 30.1457 9.47775 30.5583 8.80867C30.8212 8.3715 30.9288 7.90926 30.9288 7.14711C30.9288 5.64757 30.1668 4.74738 28.8805 4.74738H26.9433V9.63945H28.5333Z",
   fill: "white"
 }));
-
 var data = [{
   'data-id': 'dashboard-data-id',
   heading: 'Dashboard',
@@ -112,7 +107,7 @@ var data = [{
   children: [___EmotionJSX(NavBarItemLink, {
     key: "Dashboard Link Group",
     id: "Dashboard Link Group",
-    variant: "buttons.navItemButton",
+    variant: "variants.navBar.itemButton",
     href: "https://pingidentity.com/"
   }, "Group"), ___EmotionJSX(NavBarItemButton, {
     key: "Dashboard Link Populations",
@@ -371,10 +366,9 @@ export var Default = function Default() {
 };
 export var Controlled = function Controlled() {
   var _useState = useState('Dashboard Link Group'),
-      _useState2 = _slicedToArray(_useState, 2),
-      selectedKey = _useState2[0],
-      setSelectedKey = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedKey = _useState2[0],
+    setSelectedKey = _useState2[1];
   var customData = [{
     icon: Earth,
     key: 'Environment',

package/lib/{styles/variants/navBar.js → components/NavBar/NavBar.styles.js}

@@ -7,12 +7,11 @@ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-st
 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 _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 accordion from './accordion';
+import accordionGrid from '../AccordionGridGroup/AccordionGrid.styles';
+import { quiet } from '../Button/Buttons.styles';
+import { wordWrap } from '../Text/Text.styles';
 var container = {
   height: '100%',
   width: '230px',
@@ -67,17 +66,67 @@ var sectionContainer = {
     scrollbarColor: 'rgba(255, 255, 255, 0.5) rgba(0, 0, 0, 0.2)'
   }
 };
-
-var sectionBody = _objectSpread(_objectSpread({}, accordion.accordionGridBody), {}, {
+var sectionBody = _objectSpread(_objectSpread({}, accordionGrid.body), {}, {
   pl: '0'
 });
-
-var navItem = {
+var itemButton = {
+  textDecoration: 'none',
+  outline: 'none',
+  cursor: 'pointer',
+  borderRadius: 0,
+  backgroundColor: 'transparent',
+  paddingTop: 'sm',
+  paddingBottom: 'sm',
+  display: 'block',
+  color: 'neutral.90',
+  fontSize: 'md',
+  fontWeight: 0,
+  flexGrow: '1',
+  width: '100%',
+  textAlign: 'left',
+  whiteSpace: 'break-spaces',
+  overflowWrap: 'break-word',
+  maxWidth: '100%',
+  wordWrap: 'break-word',
+  wordBreak: 'break-word',
+  '&.is-focused': {
+    outline: '1px solid',
+    outlineColor: 'focus'
+  },
+  '&.is-hovered': {
+    bg: 'accent.10'
+  },
+  '&.is-selected': {
+    bg: 'accent.5',
+    boxShadow: 'inset 2px 0 0 0 white'
+  },
+  '&.is-pressed': {
+    bg: 'accent.5'
+  }
+};
+var subtitle = {
+  ml: 'md',
+  my: 'sm',
+  fontWeight: 1,
+  fontSize: 'sm',
+  color: 'accent.80',
+  zIndex: '100'
+};
+var headerText = _objectSpread(_objectSpread({}, wordWrap), {}, {
+  whiteSpace: 'break-spaces',
+  lineHeight: 1,
+  fontSize: 'md',
+  fontWeight: 1,
+  maxWidth: '150px',
+  color: 'neutral.95',
+  '.is-selected &': {
+    color: 'white'
+  }
+});
+var headerNav = {
   cursor: 'pointer',
   minHeight: '40px',
   lineHeight: '30px',
-  py: 'sm',
-  px: 'md',
   outline: 'none',
   display: 'flex',
   justifyContent: 'flex-start',
@@ -87,25 +136,50 @@ var navItem = {
   color: 'neutral.95',
   flexGrow: 1,
   fontWeight: 0,
+  fontSize: '16px',
   '&.is-focused': {
-    outline: '1px solid',
-    outlineColor: 'focus'
+    outline: 'none',
+    boxShadow: 'focus',
+    WebkitBoxShadow: 'focus',
+    MozBoxShadow: 'focus'
   },
   '&.is-hovered': {
     backgroundColor: 'accent.10'
   },
   '&.is-pressed': {
     backgroundColor: 'accent.5'
-  },
+  }
+};
+var item = _objectSpread(_objectSpread({}, headerNav), {}, {
+  py: 'sm',
+  px: 'md',
   '&.is-selected': {
     backgroundColor: 'accent.5',
     boxShadow: 'inset 2px 0 0 0 white'
   }
-};
+});
+var sectionButton = _objectSpread(_objectSpread({}, quiet), {}, {
+  width: '100%',
+  '&.is-focused': {
+    outline: '1px solid',
+    outlineColor: 'focus'
+  },
+  '&.is-hovered': {
+    backgroundColor: 'accent.10'
+  },
+  '&.is-pressed': {
+    backgroundColor: 'accent.5'
+  }
+});
 export default {
   container: container,
   itemHeaderContainer: itemHeaderContainer,
   sectionContainer: sectionContainer,
   sectionBody: sectionBody,
-  navItem: navItem
+  sectionButton: sectionButton,
+  itemButton: itemButton,
+  subtitle: subtitle,
+  headerText: headerText,
+  headerNav: headerNav,
+  item: item
 };

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

@@ -3,18 +3,18 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React, { useState } from 'react';
 import userEvent from '@testing-library/user-event';
-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 EmoticonHappy from 'mdi-react/EmoticonHappyOutlineIcon';
 import Fingerprint from 'mdi-react/FingerprintIcon';
+import GlobeIcon from 'mdi-react/GlobeIcon';
 import ScaleBalance from 'mdi-react/ScaleBalanceIcon';
+import TransitConnection from 'mdi-react/TransitConnectionVariantIcon';
 import Verify from 'mdi-react/VerifiedIcon';
-import { Box, NavBarSection, NavBarItem, NavBarItemButton, NavBarItemLink, Link, Button } from '../../';
-import NavBar from './NavBar';
+import ViewDashboard from 'mdi-react/ViewDashboardIcon';
+import { Box, Button, Link, NavBarItem, NavBarItemButton, NavBarItemLink, NavBarSection } from '../../index';
 import axeTest from '../../utils/testUtils/testAxe';
-import { render, screen, fireEvent } from '../../utils/testUtils/testWrapper';
+import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
+import NavBar from './NavBar';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var DATA_ID = 'data-id';
 var SECTION_BUTTON_DATA_ID = 'section-data-id';
@@ -73,7 +73,6 @@ var secondData = [{
   heading: 'Verify',
   children: ['Users', 'Group', 'Populations', 'Attributes', 'Roles']
 }];
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(NavBar, props, ___EmotionJSX(Box, {
@@ -101,15 +100,12 @@ var getComponent = function getComponent() {
     "data-testid": "navItem"
   }))));
 };
-
 var ControlledComponent = function ControlledComponent() {
   var _context;
-
   var _useState = useState(''),
-      _useState2 = _slicedToArray(_useState, 2),
-      selectedKey = _useState2[0],
-      setSelectedKey = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedKey = _useState2[0],
+    setSelectedKey = _useState2[1];
   var customData = [{
     icon: GlobeIcon,
     key: 'Environment',
@@ -126,25 +122,19 @@ var ControlledComponent = function ControlledComponent() {
       "data-testid": "group-item"
     }, "Group")]
   }];
-
   var _useState3 = useState(_concatInstanceProperty(_context = []).call(_context, customData)),
-      _useState4 = _slicedToArray(_useState3, 2),
-      thisData = _useState4[0],
-      setData = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    thisData = _useState4[0],
+    setData = _useState4[1];
   var testFunction = function testFunction() {
     var _context2, _context3;
-
     var newArray = _concatInstanceProperty(_context2 = []).call(_context2, customData);
-
     newArray.pop();
     setData(_concatInstanceProperty(_context3 = []).call(_context3, newArray));
   };
-
   var setKeys = function setKeys(e) {
     setSelectedKey(e);
   };
-
   return ___EmotionJSX(NavBar, {
     setSelectedKey: setKeys,
     selectedKey: selectedKey
@@ -176,7 +166,6 @@ var ControlledComponent = function ControlledComponent() {
     "data-id": "third-nav-bar-section"
   })));
 };
-
 var getComponentWithMultipleChildren = function getComponentWithMultipleChildren() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(NavBar, props, ___EmotionJSX(Box, {
@@ -191,15 +180,12 @@ var getComponentWithMultipleChildren = function getComponentWithMultipleChildren
     key: "nav-button"
   }, "test button")));
 };
-
 var clickHeaderButtons = function clickHeaderButtons() {
   var headerButtons = screen.getAllByRole('button');
-
   _mapInstanceProperty(headerButtons).call(headerButtons, function (button) {
     return userEvent.click(button);
   });
 };
-
 axeTest(getComponent);
 test('should render basic nav with children', function () {
   getComponent();
@@ -320,14 +306,12 @@ test('should collapse NavItemBody on Escape key press', function () {
   clickHeaderButtons();
   expect(screen.getByTestId('navItemButton')).toBeInTheDocument();
   var headerButtons = screen.getAllByRole('button');
-
   _mapInstanceProperty(headerButtons).call(headerButtons, function (headerButton) {
     return fireEvent.keyDown(headerButton, {
       key: 'Escape',
       keyCode: 27
     });
   });
-
   expect(screen.queryByText('Users')).not.toBeInTheDocument();
 });
 test('should change focus between NavBarItemHeader on arrow key press', function () {

package/lib/components/NavBarSection/NavBarItem.js

@@ -1,73 +1,62 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["icon", "text", "className", "id", "onPress"];
-import React, { useRef, forwardRef, useImperativeHandle } from 'react';
-import PropTypes from 'prop-types';
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import { mergeProps, useFocusRing } from 'react-aria';
 import { useHover, usePress } from '@react-aria/interactions';
-import { mergeProps } from '@react-aria/utils';
-import { useFocusRing } from '@react-aria/focus';
-import { Box, Icon, Text } from '../../index';
-import { useStatusClasses, useNavBarPress } from '../../hooks';
+import PropTypes from 'prop-types';
 import { useNavBarContext } from '../../context/NavBarContext';
+import { useNavBarPress, useStatusClasses } from '../../hooks';
+import { Box, Icon, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var NavBarItem = /*#__PURE__*/forwardRef(function (props, ref) {
   var icon = props.icon,
-      text = props.text,
-      className = props.className,
-      key = props.id,
-      onPressCallback = props.onPress,
-      others = _objectWithoutProperties(props, _excluded);
-
+    text = props.text,
+    className = props.className,
+    key = props.id,
+    onPressCallback = props.onPress,
+    others = _objectWithoutProperties(props, _excluded);
   var navItemRef = useRef();
-  /* istanbul ignore next */
 
+  /* istanbul ignore next */
   useImperativeHandle(ref, function () {
     return navItemRef.current;
   });
-
   var _useHover = useHover({}),
-      hoverProps = _useHover.hoverProps,
-      isHovered = _useHover.isHovered;
-
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
   var _useFocusRing = useFocusRing({
-    within: true
-  }),
-      focusWithinProps = _useFocusRing.focusProps;
-
+      within: true
+    }),
+    focusWithinProps = _useFocusRing.focusProps;
   var _useFocusRing2 = useFocusRing(),
-      focusProps = _useFocusRing2.focusProps,
-      isFocusVisible = _useFocusRing2.isFocusVisible;
-
+    focusProps = _useFocusRing2.focusProps,
+    isFocusVisible = _useFocusRing2.isFocusVisible;
   var state = useNavBarContext();
   var isSelected = state.selectedKey === key;
-
   var _useNavBarPress = useNavBarPress({
-    key: key,
-    onPressCallback: onPressCallback
-  }, state),
-      onNavPress = _useNavBarPress.onNavPress;
-
+      key: key,
+      onPressCallback: onPressCallback
+    }, state),
+    onNavPress = _useNavBarPress.onNavPress;
   var _usePress = usePress({
-    ref: navItemRef,
-    onPress: onNavPress
-  }),
-      pressProps = _usePress.pressProps,
-      isPressed = _usePress.isPressed;
-
+      ref: navItemRef,
+      onPress: onNavPress
+    }),
+    pressProps = _usePress.pressProps,
+    isPressed = _usePress.isPressed;
   var mergedProps = mergeProps(pressProps, hoverProps, focusWithinProps, focusProps, others);
-
   var _useStatusClasses = useStatusClasses(className, {
-    isPressed: isPressed,
-    isHovered: isHovered,
-    isSelected: isSelected,
-    isFocused: isFocusVisible
-  }),
-      classNames = _useStatusClasses.classNames;
-
+      isPressed: isPressed,
+      isHovered: isHovered,
+      isSelected: isSelected,
+      isFocused: isFocusVisible
+    }),
+    classNames = _useStatusClasses.classNames;
   var color = isSelected ? 'white' : 'neutral.95';
   return ___EmotionJSX(Box, _extends({
     id: key,
-    variant: "navBar.navItem",
+    variant: "navBar.item",
     isRow: true,
     tabIndex: 0,
     className: classNames,
@@ -91,19 +80,16 @@ var NavBarItem = /*#__PURE__*/forwardRef(function (props, ref) {
       fill: color
     }
   }), ___EmotionJSX(Text, {
-    variant: "navBarHeaderText"
+    variant: "variants.navBar.headerText"
   }, text)));
 });
 NavBarItem.propTypes = {
   /**  Handler that is called when the press is released over the target. */
   onPress: PropTypes.func,
-
   /** The icon to render in between each node. */
   icon: PropTypes.elementType,
-
   /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
   id: PropTypes.string,
-
   /** Text that will render within the component */
   text: PropTypes.string
 };

package/lib/components/NavBarSection/NavBarItemBody.js

@@ -3,19 +3,16 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 import React, { Fragment } from 'react';
 import { useKeyboard } from '@react-aria/interactions';
 import PropTypes from 'prop-types';
-import { Separator, Box, Text } from '../../index';
+import { Box, Separator, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-
 var NavBarItemBody = function NavBarItemBody(_ref) {
   var _context;
-
   var item = _ref.item,
-      onKeyDown = _ref.onKeyDown;
-
+    onKeyDown = _ref.onKeyDown;
   var renderSubTitle = function renderSubTitle(child) {
     var _child$hasSeparator = child.hasSeparator,
-        hasSeparator = _child$hasSeparator === void 0 ? true : _child$hasSeparator,
-        subTitle = child.subTitle;
+      hasSeparator = _child$hasSeparator === void 0 ? true : _child$hasSeparator,
+      subTitle = child.subTitle;
     return ___EmotionJSX(Fragment, {
       key: "fragment".concat(subTitle)
     }, hasSeparator && ___EmotionJSX(Separator, {
@@ -24,17 +21,15 @@ var NavBarItemBody = function NavBarItemBody(_ref) {
       key: "text".concat(subTitle),
       ml: "45px",
       mt: hasSeparator ? '0' : undefined,
-      variant: "text.navBarSubtitle"
+      variant: "variants.navBar.subtitle"
     }, 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: 'stretch',
@@ -42,24 +37,20 @@ var NavBarItemBody = function NavBarItemBody(_ref) {
     }
   }, _mapInstanceProperty(_context = item.children).call(_context, renderChild));
 };
-
 var ChildItemWrapper = function ChildItemWrapper(_ref2) {
   var children = _ref2.children,
-      _onKeyDown = _ref2.onKeyDown;
+    _onKeyDown = _ref2.onKeyDown;
   var childrenKey = children.key || children;
-
   var _useKeyboard = useKeyboard({
-    onKeyDown: function onKeyDown(e) {
-      return _onKeyDown(e, childrenKey);
-    }
-  }),
-      keyboardProps = _useKeyboard.keyboardProps;
-
+      onKeyDown: function onKeyDown(e) {
+        return _onKeyDown(e, childrenKey);
+      }
+    }),
+    keyboardProps = _useKeyboard.keyboardProps;
   return ___EmotionJSX(Box, _extends({
     width: "100%"
   }, keyboardProps), children);
 };
-
 NavBarItemBody.propTypes = {
   item: PropTypes.shape({
     children: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),

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

@@ -1,9 +1,8 @@
 import React from 'react';
-import NavBarItemBody from './NavBarItemBody';
-import { Text } from '../../';
+import { Text } from '../..';
 import { render, screen } from '../../utils/testUtils/testWrapper';
+import NavBarItemBody from './NavBarItemBody';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-
 var getComponent = function getComponent(item) {
   return render(___EmotionJSX(NavBarItemBody, {
     item: {
@@ -11,14 +10,12 @@ var getComponent = function getComponent(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));
     });