fix: extends header menu to accept list props for corresponding id (#188

) fix #165
trussworks · May 21, 2020 · 85a1780 · 85a1780
1 parent bc5eccc
commit 85a1780
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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