feat(react): allow for NavBar to include additional props for html di…

…v elements. (#1144)

docs/pages/components/NavBar.mdx

@@ -0,0 +1,119 @@
+---
+title: NavBar
+description: A navigation bar that contains links to other sections of the website.
+source: https://github.com/dequelabs/cauldron/tree/develop/packages/react/src/components/NavBar/NavBar.tsx
+---
+
+import { NavBar, NavItem } from '@deque/cauldron-react'
+
+```js
+import { NavBar, NavItem } from '@deque/cauldron-react'
+```
+
+The `NavBar` component is intended to be placed directly below the `TopBar` component to display an additional section of navigational links for the current area.
+
+Under the hood, `NavBar` renders inside of a `nav` element. If there are multiple `nav` elements present on the page be sure to include `aria-label` or `aria-labelledby` to help uniquely identify each nav region.
+
+## Examples
+
+### Default
+
+```jsx example
+<NavBar aria-label="NavBar Example">
+  <NavItem>
+    <a href="#">One</a>
+  </NavItem>
+  <NavItem>
+    <a href="#">Two</a>
+  </NavItem>
+  <NavItem>
+    <a href="#">Three</a>
+  </NavItem>
+</NavBar>
+```
+
+### NavBar with Active NavItem
+
+```jsx example
+<NavBar aria-label="NavBar with Active NavItem Example">
+  <NavItem active>
+    <a href="#">One</a>
+  </NavItem>
+  <NavItem>
+    <a href="#">Two</a>
+  </NavItem>
+  <NavItem>
+    <a href="#">Three</a>
+  </NavItem>
+</NavBar>
+```
+
+### Collapsed
+
+```jsx example
+<NavBar aria-label="Collapsed NavBar Example" collapsed={true}>
+  <NavItem>
+    <a href="#">One</a>
+  </NavItem>
+  <NavItem>
+    <a href="#">Two</a>
+  </NavItem>
+  <NavItem>
+    <a href="#">Three</a>
+  </NavItem>
+</NavBar>
+```
+
+## Props
+
+### NavBar
+
+<ComponentProps
+  children={true}
+  className={true}
+  props={[
+    {
+      name: 'collapsed',
+      type: 'boolean',
+      defaultValue: 'false',
+      description: 'Collapses NavBar into a toggleable hamburger menu with a flyout list of nav items.',
+    },
+    {
+      name: 'navTriggerLabel',
+      type: 'string',
+      description: 'Label shown in menu trigger when component is collapsed.',
+      defaultValue: 'MAIN MENU'
+    },
+    {
+      name: 'propId',
+      type: 'string',
+      description: 'ID passed to aria-controls, so assistive technology knows the trigger controls the menu.',
+      defaultValue: 'randomly generated with react-id-generator'
+    }
+  ]}
+/>
+
+### NavItem
+
+<ComponentProps
+  children={true}
+  className={true}
+  props={[
+    {
+      name: 'active',
+      type: 'boolean',
+      defaultValue: 'false',
+      description: 'Indicates that the current NavItem is active.',
+    },
+    {
+      name: 'aria-current',
+      type: ['page', 'step', 'location', 'boolean'],
+      description: 'When active, the aria-current value to mark the NavItem as.',
+      defaultValue: 'true'
+    }
+  ]}
+/>
+
+## Related Components
+
+- [TopBar](./TopBar)

docs/pages/components/TopBar.mdx

@@ -153,3 +153,4 @@ In addition to navigational items, the `MenuBar` can also contain a dropdown men
 ## Related Components
 
 - [OptionsMenu](./OptionsMenu)
+- [NavBar](./NavBar)

packages/react/src/components/NavBar/NavBar.tsx

@@ -9,9 +9,8 @@ import PropTypes from 'prop-types';
 import Icon from '../Icon';
 import { useId } from 'react-id-generator';
 
-interface NavBarProps {
+interface NavBarProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
-  initialActiveIndex?: number;
   className?: string;
   collapsed?: boolean;
   navTriggerLabel?: string;
@@ -23,7 +22,8 @@ const NavBar = ({
   className,
   collapsed = false,
   navTriggerLabel = 'MAIN MENU',
-  propId
+  propId,
+  ...props
 }: NavBarProps) => {
   const navRef = useRef<HTMLElement>(null);
   const triggerRef = useRef<HTMLButtonElement>(null);
@@ -69,6 +69,7 @@ const NavBar = ({
         'NavBar--collapsed': collapsed
       })}
       ref={navRef}
+      {...props}
     >
       {collapsed && (
         <button