From 581104d5435bfb5ece3d9a86491f65111e56b81c Mon Sep 17 00:00:00 2001
From: Jason <jason@scurker.com>
Date: Tue, 1 Aug 2023 15:34:33 -0500
Subject: [PATCH] feat(react): allow for NavBar to include additional props for
 html div elements.

---
 docs/pages/components/NavBar.mdx              | 119 ++++++++++++++++++
 docs/pages/components/TopBar.mdx              |   1 +
 docs/patterns/components/NavBar/index.css     |   7 --
 docs/patterns/components/NavBar/index.js      |  98 ---------------
 .../react/src/components/NavBar/NavBar.tsx    |   6 +-
 5 files changed, 124 insertions(+), 107 deletions(-)
 create mode 100644 docs/pages/components/NavBar.mdx
 delete mode 100644 docs/patterns/components/NavBar/index.css
 delete mode 100644 docs/patterns/components/NavBar/index.js

diff --git a/docs/pages/components/NavBar.mdx b/docs/pages/components/NavBar.mdx
new file mode 100644
index 000000000..5c04fb237
--- /dev/null
+++ b/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)
\ No newline at end of file
diff --git a/docs/pages/components/TopBar.mdx b/docs/pages/components/TopBar.mdx
index daef6027a..ff6373558 100644
--- a/docs/pages/components/TopBar.mdx
+++ b/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)
diff --git a/docs/patterns/components/NavBar/index.css b/docs/patterns/components/NavBar/index.css
deleted file mode 100644
index e0f57602a..000000000
--- a/docs/patterns/components/NavBar/index.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.NavBarButton {
-  margin-top: var(--space-large);
-}
-
-.NavBar--collapsed {
-  width: 20rem;
-}
diff --git a/docs/patterns/components/NavBar/index.js b/docs/patterns/components/NavBar/index.js
deleted file mode 100644
index 3646f2607..000000000
--- a/docs/patterns/components/NavBar/index.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import React, { useState } from 'react';
-import { NavBar, NavItem, Code, Button } from '@deque/cauldron-react';
-import './index.css';
-import { className } from '../../../props';
-import PropDocs from '../../../Demo/PropDocs';
-
-const Demo = () => {
-  const [isMobile, setIsMobile] = useState(false);
-  const componentsList = new Array(5).fill('NavItem');
-  const handleToggle = () => {
-    setIsMobile(!isMobile);
-  };
-  return (
-    <div className="NavBarDemo">
-      <h1 id="main-title">NavBar</h1>
-      <h2>Component Description</h2>
-      <p>
-        A navigation bar that contains links to other sections of the website.
-      </p>
-      <h2>Demo</h2>
-      <NavBar collapsed={isMobile}>
-        {componentsList.map((name, index) => {
-          return (
-            <NavItem key={`${name}-${index}`} active={index === 2}>
-              <a href="#">{`${name} ${index + 1}`}</a>
-            </NavItem>
-          );
-        })}
-      </NavBar>
-      <Button onClick={handleToggle} className="NavBarButton">
-        Toggle between mobile and nonmobile mode
-      </Button>
-      <h2>Code Sample</h2>
-      <Code language="javascript" role="region" tabIndex={0}>
-        {`
-import React, { useState } from 'react';
-import { NavBar, NavItem, Code, Button } from '@deque/cauldron-react';
-import './index.css';
-
-const Demo = () => {
-  const [isMobile, setIsMobile] = useState(false);
-  const componentsList = new Array(5).fill('NavItem');
-  const handleToggle = () => {
-    setIsMobile(!isMobile);
-  };
-  return (
-    <div className="NavBarDemo">
-      <h1 id="main-title">NavBar</h1>
-      <h2>Demo</h2>
-      <h3>Basic NavBar</h3>
-      <NavBar collapsed={isMobile}>
-        {componentsList.map((name, index) => {
-          return (
-            <NavItem key={\`\${name}-\${index}\`} active={index === 2}>
-              <a href="#">{\`\${name} \${index + 1}\`}</a>
-            </NavItem>
-          );
-        })}
-      </NavBar>
-      <Button onClick={handleToggle} className="NavBarButton">
-        Toggle between mobile and nonmobile mode
-      </Button>
-    </div>
-       `}
-      </Code>
-      <div className="Demo-props">
-        <PropDocs
-          docs={{
-            children: {
-              type: 'node',
-              description: 'The child content',
-              required: true
-            },
-            className,
-            collapsed: {
-              type: 'boolean',
-              description: 'Collapsed styling for mobile',
-              default: false
-            },
-            navTriggerLabel: {
-              type: 'string',
-              description: 'Label shown in menu trigger with collapsed styling',
-              default: 'MAIN MENU'
-            },
-            propId: {
-              type: 'string',
-              description:
-                'ID passed to aria-controls, so assistive technology knows the trigger controls the menu.',
-              default: 'randomly generated with react-id-generator'
-            }
-          }}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default Demo;
diff --git a/packages/react/src/components/NavBar/NavBar.tsx b/packages/react/src/components/NavBar/NavBar.tsx
index 5ecfdb7fd..d5b08a4da 100644
--- a/packages/react/src/components/NavBar/NavBar.tsx
+++ b/packages/react/src/components/NavBar/NavBar.tsx
@@ -9,7 +9,7 @@ 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;
@@ -23,7 +23,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 +70,7 @@ const NavBar = ({
         'NavBar--collapsed': collapsed
       })}
       ref={navRef}
+      {...props}
     >
       {collapsed && (
         <button