From 85a1780c39f8c972e9f1d6978f686301911bcd01 Mon Sep 17 00:00:00 2001
From: Duncan <52669884+duncan-truss@users.noreply.github.com>
Date: Thu, 21 May 2020 12:39:52 -0400
Subject: [PATCH] fix: extends header menu to accept list props for
 corresponding id (#188)

fix #165
---
 .../header/Header/Header.stories.tsx          | 37 ++++++++++++++++---
 src/components/header/MegaMenu/MegaMenu.tsx   |  8 ++--
 src/components/header/Menu/Menu.tsx           |  8 ++--
 3 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/src/components/header/Header/Header.stories.tsx b/src/components/header/Header/Header.stories.tsx
index f59384a50b..b38782acb6 100644
--- a/src/components/header/Header/Header.stories.tsx
+++ b/src/components/header/Header/Header.stories.tsx
@@ -59,7 +59,12 @@ export const BasicHeader = (): React.ReactElement => {
         label="Nav Label"
         isCurrent={true}
       />
-      <Menu key="one" items={testMenuItems} isOpen={isOpen[0]} />
+      <Menu
+        key="one"
+        items={testMenuItems}
+        isOpen={isOpen[0]}
+        id="testDropDownOne"
+      />
     </>,
     <a href="#two" key="two" className="usa-nav__link">
       <span>Parent link</span>
@@ -153,18 +158,28 @@ export const BasicHeaderWithMegaMenu = (): React.ReactElement => {
         label="Nav Label"
         isCurrent={true}
       />
-      <MegaMenu key="one" items={testItemsMegaOne} isOpen={isOpen[0]} />
+      <MegaMenu
+        key="one"
+        items={testItemsMegaOne}
+        isOpen={isOpen[0]}
+        id="testDropDownOne"
+      />
     </>,
     <>
       <NavDropDownButton
         onToggle={(): void => {
           onToggle(1)
         }}
-        menuId="testDropDownOne"
+        menuId="testDropDownTwo"
         isOpen={isOpen[1]}
         label="Nav Label"
       />
-      <MegaMenu key="one" items={testItemsMegaTwo} isOpen={isOpen[1]} />
+      <MegaMenu
+        key="one"
+        items={testItemsMegaTwo}
+        isOpen={isOpen[1]}
+        id="testDropDownTwo"
+      />
     </>,
     <a href="#two" key="two" className="usa-nav__link">
       <span>Parent link</span>
@@ -228,7 +243,12 @@ export const extendedHeader = (): React.ReactElement => {
         label="Nav Label"
         isCurrent={true}
       />
-      <Menu key="one" items={testMenuItems} isOpen={isOpen[0]} />
+      <Menu
+        key="one"
+        items={testMenuItems}
+        isOpen={isOpen[0]}
+        id="testDropDownOne"
+      />
     </>,
     <a href="#two" key="two" className="usa-nav__link">
       <span>Parent link</span>
@@ -310,7 +330,12 @@ export const extendedHeaderWithMegaMenu = (): React.ReactElement => {
         label="Nav Label"
         isCurrent={true}
       />
-      <MegaMenu key="one" items={testItemsMegaOne} isOpen={isOpen[0]} />
+      <MegaMenu
+        key="one"
+        items={testItemsMegaOne}
+        isOpen={isOpen[0]}
+        id="testDropDownOne"
+      />
     </>,
     <a href="#two" key="two" className="usa-nav__link">
       <span>Parent link</span>
diff --git a/src/components/header/MegaMenu/MegaMenu.tsx b/src/components/header/MegaMenu/MegaMenu.tsx
index 8a70c16338..222f2ca2f6 100644
--- a/src/components/header/MegaMenu/MegaMenu.tsx
+++ b/src/components/header/MegaMenu/MegaMenu.tsx
@@ -7,8 +7,10 @@ type MegaMenuProps = {
   isOpen: boolean
 }
 
-export const MegaMenu = (props: MegaMenuProps): React.ReactElement => {
-  const { items, isOpen } = props
+export const MegaMenu = (
+  props: MegaMenuProps & React.HTMLAttributes<HTMLUListElement>
+): React.ReactElement => {
+  const { items, isOpen, ...ulProps } = props
   return (
     <div
       className="usa-nav__submenu usa-megamenu"
@@ -17,7 +19,7 @@ export const MegaMenu = (props: MegaMenuProps): React.ReactElement => {
       <div className="grid-row grid-gap-4">
         {items.map((listItems, i) => (
           <div className="usa-col" key={`subnav_col_${i}`}>
-            <NavList items={listItems} megamenu={true} />
+            <NavList items={listItems} megamenu={true} {...ulProps} />
           </div>
         ))}
       </div>
diff --git a/src/components/header/Menu/Menu.tsx b/src/components/header/Menu/Menu.tsx
index 86a667bed0..14fc417020 100644
--- a/src/components/header/Menu/Menu.tsx
+++ b/src/components/header/Menu/Menu.tsx
@@ -6,9 +6,11 @@ type MenuProps = {
   isOpen: boolean
 }
 
-export const Menu = (props: MenuProps): React.ReactElement => {
-  const { items, isOpen } = props
-  return <NavList items={items} subnav={true} hidden={!isOpen} />
+export const Menu = (
+  props: MenuProps & React.HTMLAttributes<HTMLUListElement>
+): React.ReactElement => {
+  const { items, isOpen, ...listProps } = props
+  return <NavList items={items} subnav={true} hidden={!isOpen} {...listProps} />
 }
 
 export default Menu