@pingux/astro 1.30.0-alpha.3 → 1.30.0-alpha.5

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

@@ -1,3 +1,4 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import GlobeIcon from 'mdi-react/GlobeIcon';
@@ -10,8 +11,8 @@ import ScaleBalance from 'mdi-react/ScaleBalanceIcon';
 import Verify from 'mdi-react/VerifiedIcon';
 import NavBar from './NavBar';
 import axeTest from '../../utils/testUtils/testAxe';
-import { render, screen } from '../../utils/testUtils/testWrapper';
-import { Box, NavBarSection, NavBarItem, NavBarItemButton, NavBarItemLink } from '../../index';
+import { render, screen, fireEvent } from '../../utils/testUtils/testWrapper';
+import { Box, NavBarSection, NavBarItem, NavBarItemButton, NavBarItemLink, Link, Button } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var data = [{
   icon: GlobeIcon,
@@ -90,6 +91,26 @@ var getComponent = function getComponent() {
   }))));
 };
 
+var getComponentWithMultipleChildrens = function getComponentWithMultipleChildrens() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(NavBar, props, ___EmotionJSX(Box, null, ___EmotionJSX(Link, {
+    href: "https://pingidentity.com",
+    target: "_blank",
+    "aria-label": "home link",
+    "data-testid": "navLink"
+  }, "home")), ___EmotionJSX(Button, {
+    "data-testid": "navButton"
+  }, "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();
@@ -103,27 +124,165 @@ test('should render title for sections that have titles', function () {
 });
 test('should render title for itemBodies that have subTitles', function () {
   getComponent();
+  clickHeaderButtons();
   var subTitle = screen.getByText('PingOne Services');
   expect(subTitle).toBeInTheDocument();
 });
-test('should select NavIemLink', function () {
+test('should select NavItemLink', function () {
   getComponent();
+  clickHeaderButtons();
   var link = screen.getByTestId('navItemLink');
   expect(link).toBeInTheDocument();
   userEvent.click(link);
   expect(link).toHaveClass('is-selected');
 });
-test('should select NavIem', function () {
+test('should select NavItemLink on space key press', function () {
+  getComponent();
+  clickHeaderButtons();
+  var link = screen.getByTestId('navItemLink');
+  expect(link).toBeInTheDocument();
+  fireEvent.keyDown(link, {
+    key: 'Space',
+    keyCode: 32
+  });
+  expect(link).toHaveClass('is-selected');
+});
+test('should select NavItem', function () {
   getComponent();
   var item = screen.getByTestId('navItem');
   expect(item).toBeInTheDocument();
   userEvent.click(item);
   expect(item).toHaveClass('is-selected');
 });
-test('should select NavIemButton', function () {
+test('should select NavItemButton', function () {
   getComponent();
+  clickHeaderButtons();
   var button = screen.getByTestId('navItemButton');
   expect(button).toBeInTheDocument();
   userEvent.click(button);
   expect(button).toHaveClass('is-selected');
+});
+test('should collapse NavItemBody', function () {
+  getComponent();
+  expect(screen.queryByText('Users')).not.toBeInTheDocument();
+  clickHeaderButtons();
+  expect(screen.getByTestId('navItemButton')).toBeInTheDocument();
+  clickHeaderButtons();
+  expect(screen.queryByText('Users')).not.toBeInTheDocument();
+});
+test('should collapse NavItemBody on Escape key press', function () {
+  getComponent();
+  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 () {
+  getComponent();
+  var headerButtons = screen.getAllByRole('button');
+  expect(headerButtons[0]).toBeInTheDocument();
+  headerButtons[0].focus();
+  expect(headerButtons[0]).toHaveClass('is-focused');
+  fireEvent.keyDown(headerButtons[0], {
+    key: 'ArrowDown',
+    keyCode: 40
+  });
+  expect(headerButtons[1]).toHaveClass('is-focused');
+  fireEvent.keyDown(headerButtons[0], {
+    key: 'ArrowRight',
+    keyCode: 39
+  });
+  expect(headerButtons[2]).toHaveClass('is-focused');
+  fireEvent.keyDown(headerButtons[0], {
+    key: 'ArrowLeft',
+    keyCode: 37
+  });
+  expect(headerButtons[1]).toHaveClass('is-focused');
+  fireEvent.keyDown(headerButtons[0], {
+    key: 'ArrowUp',
+    keyCode: 38
+  });
+  expect(headerButtons[0]).toHaveClass('is-focused');
+  fireEvent.keyDown(headerButtons[0], {
+    key: 'Shift',
+    keyCode: 16
+  });
+  expect(headerButtons[0]).toHaveClass('is-focused');
+});
+test('should not change focus from NavItemBody to NavBarItemHeader on arrow key press', function () {
+  getComponent();
+  var headerButtons = screen.getAllByRole('button');
+  expect(headerButtons[0]).toBeInTheDocument();
+  headerButtons[0].click();
+  fireEvent.keyDown(headerButtons[0], {
+    key: 'ArrowDown',
+    keyCode: 40
+  });
+  expect(screen.getByTestId('navItemButton')).toHaveClass('is-focused');
+  fireEvent.keyDown(screen.getByTestId('navItemButton'), {
+    key: 'ArrowUp',
+    keyCode: 38
+  });
+  expect(screen.getByTestId('navItemButton')).toHaveClass('is-focused');
+  fireEvent.keyDown(screen.getByTestId('navItemButton'), {
+    key: 'ArrowDown',
+    keyCode: 40
+  });
+  expect(screen.getByTestId('navItemLink')).toHaveClass('is-focused');
+  fireEvent.keyDown(screen.getByTestId('navItemLink'), {
+    key: 'ArrowDown',
+    keyCode: 40
+  });
+  expect(screen.getByTestId('navItemLink')).toHaveClass('is-focused');
+});
+test('should render nav with multiple childrens', function () {
+  getComponentWithMultipleChildrens();
+  var nav = screen.queryByRole('navigation');
+  expect(nav).toBeInTheDocument();
+});
+test('should change focus between nav childrens on arrow key press', function () {
+  getComponentWithMultipleChildrens();
+  var link = screen.getByTestId('navLink');
+  var button = screen.getByTestId('navButton');
+  expect(link).toBeInTheDocument();
+  link.focus();
+  expect(link).toHaveClass('is-focused');
+  fireEvent.keyDown(link, {
+    key: 'ArrowDown',
+    keyCode: 40
+  });
+  expect(button).toHaveClass('is-focused');
+  fireEvent.keyDown(button, {
+    key: 'ArrowUp',
+    keyCode: 38
+  });
+  expect(link).toHaveClass('is-focused');
+  fireEvent.keyDown(link, {
+    key: 'ArrowRight',
+    keyCode: 39
+  });
+  expect(button).toHaveClass('is-focused');
+  fireEvent.keyDown(button, {
+    key: 'ArrowLeft',
+    keyCode: 37
+  });
+  expect(link).toHaveClass('is-focused');
+  fireEvent.keyDown(link, {
+    key: 'Shift',
+    keyCode: 16
+  });
+  expect(link).toHaveClass('is-focused');
+  fireEvent.keyDown(link, {
+    key: 'Space',
+    keyCode: 32
+  });
+  expect(link).toHaveClass('is-focused');
 });

package/lib/components/NavBarSection/NavBarItem.js

@@ -70,8 +70,9 @@ var NavBarItem = /*#__PURE__*/forwardRef(function (props, ref) {
 
   return ___EmotionJSX(Box, _extends({
     id: key,
-    variant: "accordion.accordionGridNavItem",
+    variant: "navBar.navItem",
     isRow: true,
+    tabIndex: 0,
     className: classNames,
     ref: navItemRef
   }, mergedProps, {
@@ -85,6 +86,7 @@ var NavBarItem = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   }, icon && ___EmotionJSX(Icon, {
     icon: icon,
+    "aria-label": text,
     size: 20,
     sx: {
       mr: '10px',

package/lib/components/NavBarSection/NavBarItemBody.js

@@ -1,5 +1,7 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React, { Fragment } from 'react';
+import { useKeyboard } from '@react-aria/interactions';
 import PropTypes from 'prop-types';
 import { Separator, Box, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -7,12 +9,14 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var NavBarItemBody = function NavBarItemBody(props) {
   var _context;
 
+  var item = props.item,
+      onKeyDown = props.onKeyDown;
   return ___EmotionJSX(Box, {
     sx: {
       alignItems: 'flex-start',
       mb: '15px'
     }
-  }, _mapInstanceProperty(_context = props.item.children).call(_context, function (child) {
+  }, _mapInstanceProperty(_context = item.children).call(_context, function (child) {
     return child.subTitle ? ___EmotionJSX(Fragment, {
       key: "fragment".concat(child.subTitle)
     }, ___EmotionJSX(Separator, {
@@ -25,13 +29,38 @@ var NavBarItemBody = function NavBarItemBody(props) {
         mb: '10px',
         ml: '45px'
       }
-    }, child.subTitle)) : child;
+    }, child.subTitle)) : ___EmotionJSX(ChildItemWrapper, {
+      onKeyDown: onKeyDown,
+      key: "item".concat(child.key || child)
+    }, child);
   }));
 };
 
+var ChildItemWrapper = function ChildItemWrapper(props) {
+  var children = props.children,
+      _onKeyDown = props.onKeyDown;
+  var childrenKey = children.key || children;
+
+  var _useKeyboard = useKeyboard({
+    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]))
-  })
+    children: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
+    key: PropTypes.string
+  }),
+  onKeyDown: PropTypes.func
+};
+ChildItemWrapper.propTypes = {
+  onKeyDown: PropTypes.func
 };
 export default NavBarItemBody;

package/lib/components/NavBarSection/NavBarItemHeader.js

@@ -1,34 +1,30 @@
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import React, { useContext } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import MenuDown from 'mdi-react/MenuDownIcon';
 import MenuUp from 'mdi-react/MenuUpIcon';
 import { Box, Icon, Text } from '../../index';
-import { AccordionGridContext } from '../../context/AccordionGridContext';
-import { NavBarContext } from '../../context/NavBarContext';
+import { useNavBarContext } from '../../context/NavBarContext';
 import { useStatusClasses } from '../../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
 var NavBarItemHeader = function NavBarItemHeader(props) {
-  var _state$selectionManag, _context;
+  var _navBarState$expanded, _context;
 
   var item = props.item;
   var icon = item.icon,
       key = item.key,
-      className = item.className;
-
-  var _useContext = useContext(AccordionGridContext),
-      state = _useContext.state;
-
-  var navState = useContext(NavBarContext);
-  var isExpanded = (_state$selectionManag = state.selectionManager.selectedKeys) === null || _state$selectionManag === void 0 ? void 0 : _state$selectionManag.has(key);
+      className = item.className,
+      heading = item.heading;
+  var navBarState = useNavBarContext();
+  var isExpanded = (_navBarState$expanded = navBarState.expandedKeys) === null || _navBarState$expanded === void 0 ? void 0 : _navBarState$expanded.has(key);
 
   var array = _mapInstanceProperty(_context = item.children).call(_context, function (i) {
     return i.key;
   });
 
-  var childSelected = _includesInstanceProperty(array).call(array, navState.selectedKey);
+  var childSelected = _includesInstanceProperty(array).call(array, navBarState.selectedKey);
 
   var _useStatusClasses = useStatusClasses(className, {
     isSelected: childSelected && !isExpanded
@@ -46,10 +42,11 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
       mr: '10px',
       color: 'white',
       fill: 'white'
-    }
+    },
+    "aria-hidden": "true"
   }), ___EmotionJSX(Text, {
     variant: "navBarHeaderText"
-  }, props.item.heading), ___EmotionJSX(Box, {
+  }, heading), ___EmotionJSX(Box, {
     isRow: true,
     alignItems: "center",
     sx: {
@@ -57,7 +54,12 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
     }
   }, ___EmotionJSX(Icon, {
     icon: isExpanded ? MenuUp : MenuDown,
-    size: 20
+    size: 20,
+    sx: {
+      color: 'white',
+      fill: 'white'
+    },
+    "aria-label": isExpanded ? 'Menu up' : 'Menu down'
   })));
 };
 

package/lib/components/NavBarSection/NavBarSection.js

@@ -1,11 +1,17 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _Set from "@babel/runtime-corejs3/core-js-stable/set";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import React from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
-import { Separator, AccordionGridGroup, Text, Item, Box } from '../../index';
+import { useFocusManager } from '@react-aria/focus';
+import { useKeyboard } from '@react-aria/interactions';
+import { Separator, Text, Box, Button } from '../../index';
 import NavBarItemBody from './NavBarItemBody';
 import NavBarItemHeader from './NavBarItemHeader';
+import { useNavBarContext } from '../../context/NavBarContext';
 /**
- * Composed component that creates an AccordionGrid group
+ * Composed component that creates a group
  * with title, and separator options.
  *
  */
@@ -16,28 +22,29 @@ var NavBarSection = function NavBarSection(props) {
   var hasSeparator = props.hasSeparator,
       title = props.title,
       items = props.items;
+  var ref = useRef();
+
+  var childrenItems = _filterInstanceProperty(items).call(items, function (i) {
+    return i.children;
+  });
+
   return ___EmotionJSX(React.Fragment, null, title && ___EmotionJSX(Text, {
     variant: "text.navBarSubtitle"
-  }, title), ___EmotionJSX(AccordionGridGroup, {
-    items: _filterInstanceProperty(items).call(items, function (i) {
-      return i.children;
-    })
-  }, function (item) {
-    return ___EmotionJSX(Item, {
-      headerProps: {
-        variant: 'accordion.accordionGridHeaderNav',
-        hasCaret: false
-      },
-      bodyProps: {
-        variant: 'navBar.sectionBody'
-      },
-      textValue: item
-    }, ___EmotionJSX(NavBarItemHeader, {
-      item: item
-    }), ___EmotionJSX(NavBarItemBody, {
+  }, title), ___EmotionJSX("ul", {
+    ref: ref,
+    style: {
+      margin: 0,
+      padding: 0,
+      listStyle: 'none'
+    }
+  }, _mapInstanceProperty(childrenItems).call(childrenItems, function (item) {
+    return ___EmotionJSX("li", {
+      key: item.key
+    }, ___EmotionJSX(SectionItem, {
+      key: item.key,
       item: item
     }));
-  }), hasSeparator && ___EmotionJSX(Box, {
+  })), hasSeparator && ___EmotionJSX(Box, {
     sx: {
       pl: '15px',
       pr: '15px',
@@ -50,6 +57,92 @@ var NavBarSection = function NavBarSection(props) {
   })));
 };
 
+var SectionItem = function SectionItem(_ref) {
+  var item = _ref.item;
+  var key = item.key,
+      children = item.children;
+  var headerButtonRef = useRef();
+  var navBarState = useNavBarContext();
+  var expandedKeys = navBarState.expandedKeys,
+      setExpandedKeys = navBarState.setExpandedKeys;
+  var isExpanded = expandedKeys === null || expandedKeys === void 0 ? void 0 : expandedKeys.has(key);
+  var firstChildKey = children.length ? children[0].key : null;
+  var lastChildKey = children.length ? children[children.length - 1].key : null;
+
+  var onExpandedChange = function onExpandedChange(isOpen) {
+    if (isOpen) {
+      expandedKeys.add(key);
+    } else {
+      expandedKeys["delete"](key);
+    }
+
+    setExpandedKeys(new _Set(expandedKeys));
+  };
+
+  var focusManager = useFocusManager();
+
+  var _onKeyDown = function onKeyDown(e, childKey) {
+    var _e$target;
+
+    switch (e.which) {
+      case 39:
+      case 40:
+        if (childKey !== lastChildKey) {
+          focusManager.focusNext();
+        }
+
+        e.preventDefault();
+        break;
+
+      case 37:
+      case 38:
+        if (childKey !== firstChildKey) {
+          focusManager.focusPrevious();
+        }
+
+        e.preventDefault();
+        break;
+
+      case 27:
+        onExpandedChange(false);
+        headerButtonRef.current.focus();
+        break;
+
+      case 32:
+        if (childKey && (_e$target = e.target) !== null && _e$target !== void 0 && _e$target.href) {
+          e.target.click();
+        }
+
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  var _useKeyboard = useKeyboard({
+    onKeyDown: function onKeyDown(e) {
+      _onKeyDown(e);
+
+      e.continuePropagation();
+    }
+  }),
+      keyboardProps = _useKeyboard.keyboardProps;
+
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Button, _extends({
+    ref: headerButtonRef,
+    variant: "navBarSectionButton",
+    onPress: function onPress() {
+      return onExpandedChange(!isExpanded);
+    }
+  }, keyboardProps), ___EmotionJSX(NavBarItemHeader, {
+    item: item
+  })), isExpanded && ___EmotionJSX(NavBarItemBody, {
+    item: item,
+    onKeyDown: _onKeyDown
+  }));
+};
+
 NavBarSection.defaultProps = {
   hasSeparator: false
 };
@@ -66,4 +159,21 @@ NavBarSection.propTypes = {
   */
   items: PropTypes.arrayOf(PropTypes.shape({}))
 };
+SectionItem.propTypes = {
+  item: PropTypes.shape({
+    key: PropTypes.string,
+    children: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
+    'aria-label': PropTypes.string
+  }),
+  state: PropTypes.shape({
+    collection: PropTypes.shape({}),
+    selectedKey: PropTypes.string,
+    setSelectedKey: PropTypes.func,
+    selectionManager: PropTypes.shape({
+      focusedKey: PropTypes.string,
+      setFocusedKey: PropTypes.func
+    })
+  }),
+  menuProps: PropTypes.shape({})
+};
 export default NavBarSection;

package/lib/styles/variants/accordion.js

@@ -1,17 +1,3 @@
-import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
-import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-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; }
-
 var accordionTitle = {
   display: 'inline-block !important',
   overflowWrap: 'break-word',
@@ -71,42 +57,6 @@ var accordionGridHeader = {
     }
   }
 };
-var accordionGridHeaderNav = {
-  cursor: 'pointer',
-  minHeight: '40px',
-  lineHeight: '30px',
-  outline: 'none',
-  display: 'flex',
-  justifyContent: 'flex-start',
-  flexShrink: 0,
-  wordBreak: 'inherit',
-  whiteSpace: 'nowrap',
-  color: 'neutral.95',
-  flexGrow: 1,
-  fontWeight: 0,
-  fontSize: '16px',
-  '&.is-focused': {
-    outline: 'none',
-    boxShadow: 'focus',
-    WebkitBoxShadow: 'focus',
-    MozBoxShadow: 'focus'
-  },
-  '&.is-hovered': {
-    backgroundColor: 'accent.10'
-  },
-  '&.is-pressed': {
-    backgroundColor: 'accent.5'
-  }
-};
-
-var accordionGridNavItem = _objectSpread(_objectSpread({}, accordionGridHeaderNav), {}, {
-  padding: '10px 15px 10px 15px',
-  '&.is-selected': {
-    backgroundColor: 'accent.5',
-    boxShadow: 'inset 2px 0 0 0 white'
-  }
-});
-
 var accordionGridBody = {
   display: 'none !important',
   pl: 'sm',
@@ -129,7 +79,5 @@ export default {
   accordionTitle: accordionTitle,
   accordion: accordion,
   accordionBody: accordionBody,
-  accordionGridHeaderNav: accordionGridHeaderNav,
-  accordionGridNavItem: accordionGridNavItem,
   accordionGridItem: accordionGridItem
 };

package/lib/styles/variants/buttons.js

@@ -74,7 +74,10 @@ var navItemButton = {
   maxWidth: '100%',
   wordWrap: 'break-word',
   wordBreak: 'break-word',
-  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-focused': {
+    outline: '1px solid',
+    outlineColor: '#D033FF'
+  },
   '&.is-hovered': {
     bg: 'accent.10'
   },
@@ -683,6 +686,20 @@ var menuTab = _objectSpread(_objectSpread({}, quiet), {}, {
   }
 });
 
+var navBarSectionButton = _objectSpread(_objectSpread({}, quiet), {}, {
+  width: '100%',
+  '&.is-focused': {
+    outline: '1px solid',
+    outlineColor: '#D033FF'
+  },
+  '&.is-hovered': {
+    backgroundColor: 'accent.10'
+  },
+  '&.is-pressed': {
+    backgroundColor: 'accent.5'
+  }
+});
+
 export default {
   accordionHeader: accordionHeader,
   chipDeleteButton: chipDeleteButton,
@@ -718,6 +735,7 @@ export default {
   helpHint: helpHint,
   modalCloseButton: modalCloseButton,
   navItemButton: navItemButton,
+  navBarSectionButton: navBarSectionButton,
   applicationPortalPinned: applicationPortalPinned,
   applicationPortal: applicationPortal,
   square: square,