@madie/madie-design-system 1.0.2 → 1.0.3

package/coverage/lcov-report/react/components/Header/HeaderMenuItem.jsx.html

@@ -295,7 +295,54 @@
 <a name='L230'></a><a href='#L230'>230</a>
 <a name='L231'></a><a href='#L231'>231</a>
 <a name='L232'></a><a href='#L232'>232</a>
-<a name='L233'></a><a href='#L233'>233</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L233'></a><a href='#L233'>233</a>
+<a name='L234'></a><a href='#L234'>234</a>
+<a name='L235'></a><a href='#L235'>235</a>
+<a name='L236'></a><a href='#L236'>236</a>
+<a name='L237'></a><a href='#L237'>237</a>
+<a name='L238'></a><a href='#L238'>238</a>
+<a name='L239'></a><a href='#L239'>239</a>
+<a name='L240'></a><a href='#L240'>240</a>
+<a name='L241'></a><a href='#L241'>241</a>
+<a name='L242'></a><a href='#L242'>242</a>
+<a name='L243'></a><a href='#L243'>243</a>
+<a name='L244'></a><a href='#L244'>244</a>
+<a name='L245'></a><a href='#L245'>245</a>
+<a name='L246'></a><a href='#L246'>246</a>
+<a name='L247'></a><a href='#L247'>247</a>
+<a name='L248'></a><a href='#L248'>248</a>
+<a name='L249'></a><a href='#L249'>249</a>
+<a name='L250'></a><a href='#L250'>250</a>
+<a name='L251'></a><a href='#L251'>251</a>
+<a name='L252'></a><a href='#L252'>252</a>
+<a name='L253'></a><a href='#L253'>253</a>
+<a name='L254'></a><a href='#L254'>254</a>
+<a name='L255'></a><a href='#L255'>255</a>
+<a name='L256'></a><a href='#L256'>256</a>
+<a name='L257'></a><a href='#L257'>257</a>
+<a name='L258'></a><a href='#L258'>258</a>
+<a name='L259'></a><a href='#L259'>259</a>
+<a name='L260'></a><a href='#L260'>260</a>
+<a name='L261'></a><a href='#L261'>261</a>
+<a name='L262'></a><a href='#L262'>262</a>
+<a name='L263'></a><a href='#L263'>263</a>
+<a name='L264'></a><a href='#L264'>264</a>
+<a name='L265'></a><a href='#L265'>265</a>
+<a name='L266'></a><a href='#L266'>266</a>
+<a name='L267'></a><a href='#L267'>267</a>
+<a name='L268'></a><a href='#L268'>268</a>
+<a name='L269'></a><a href='#L269'>269</a>
+<a name='L270'></a><a href='#L270'>270</a>
+<a name='L271'></a><a href='#L271'>271</a>
+<a name='L272'></a><a href='#L272'>272</a>
+<a name='L273'></a><a href='#L273'>273</a>
+<a name='L274'></a><a href='#L274'>274</a>
+<a name='L275'></a><a href='#L275'>275</a>
+<a name='L276'></a><a href='#L276'>276</a>
+<a name='L277'></a><a href='#L277'>277</a>
+<a name='L278'></a><a href='#L278'>278</a>
+<a name='L279'></a><a href='#L279'>279</a>
+<a name='L280'></a><a href='#L280'>280</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -422,9 +469,14 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -433,6 +485,11 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -440,7 +497,11 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -462,6 +523,14 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -471,7 +540,16 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -479,7 +557,11 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -509,6 +591,18 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -527,235 +621,282 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { Fragment, useRef, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { Fragment, useRef, useEffect, useState } from "react";
+import PropTypes from "prop-types";
 &nbsp;
-import { useWindowWidth, useHeaderState } from './hooks';
-import HeaderMenuLink from './HeaderMenuLink';
-import HeaderMenuButton from './HeaderMenuButton';
-import HeaderMenuSignOutButton from './HeaderMenuSignOutButton';
-import Accordion from '../Accordion';
-import { Chevron } from '../../lib/Chevron.jsx';
+import { useWindowWidth, useHeaderState } from "./hooks";
+import HeaderMenuLink from "./HeaderMenuLink";
+import HeaderMenuButton from "./HeaderMenuButton";
+import HeaderMenuSignOutButton from "./HeaderMenuSignOutButton";
+import Accordion from "../Accordion";
+import { Chevron } from "../../lib/Chevron.jsx";
 &nbsp;
 const menuSizes = {
-  1: 315,
-  2: 650,
-  3: 890,
-  4: 1200,
+    1: 315,
+    2: 650,
+    3: 890,
+    4: 1200,
 };
 &nbsp;
 const excludedClickOutClasses = [
-  'menu-dropdown-toggle',
-  'nav-link',
-  'nav-link-li',
-  'dropdown-description',
-  'dropdown-title',
-  'dropdown-title-chevron-container',
-  'signout-button',
-  'submenu-section',
-  'accordion',
-  'accordion-title',
-  'accordion-left-title',
-  'header-menu-btn',
-  'btn-navigation-icon',
+    "menu-dropdown-toggle",
+    "nav-link",
+    "nav-link-li",
+    "dropdown-description",
+    "dropdown-title",
+    "dropdown-title-chevron-container",
+    "signout-button",
+    "submenu-section",
+    "accordion",
+    "accordion-title",
+    "accordion-left-title",
+    "header-menu-btn",
+    "btn-navigation-icon",
 ];
 &nbsp;
 const HeaderMenuItem = ({
-  handleClick,
-  isMobileMenuExpanded,
-  columns,
-  menuName,
-  rows,
-  name,
-  subtitle,
-  className,
+    handleClick,
+    isMobileMenuExpanded,
+    columns,
+    menuName,
+    rows,
+    name,
+    subtitle,
+    className,
 }) =&gt; {
-  const [isSubMenuFullWidth, setSubMenuFullWidth] = useState(false);
-  const [openMobileSubMenu, setOpenMobileSubMenu] = useState('');
+    const [isSubMenuFullWidth, setSubMenuFullWidth] = useState(false);
+    const [openMobileSubMenu, setOpenMobileSubMenu] = useState("");
 &nbsp;
-  const windowWidth = useWindowWidth();
-  const menuButtonRef = useRef(null);
-  const menuRef = useRef(null);
-  const { RouterLink, handleToggleMenu, currentOpenMenu, closeMenus } =
-    useHeaderState();
-  const numColumns = (columns || <span class="branch-1 cbranch-no" title="branch not covered" >[])</span>.length;
+    const windowWidth = useWindowWidth();
+    const menuButtonRef = useRef(null);
+    const menuRef = useRef(null);
+    const { RouterLink, handleToggleMenu, currentOpenMenu, closeMenus } =
+        useHeaderState();
+    const numColumns = (columns || <span class="branch-1 cbranch-no" title="branch not covered" >[])</span>.length;
 &nbsp;
-  const menuIdentifier = menuName || name;
-  const isOpen = menuIdentifier === currentOpenMenu;
+    const menuIdentifier = menuName || name;
+    const isOpen = menuIdentifier === currentOpenMenu;
 &nbsp;
-  useEffect(() =&gt; {
-    const isMobile = windowWidth &lt; 768;
-    <span class="missing-if-branch" title="if path not taken" >I</span>if (isOpen) {
-      const shouldSetFullWidth =
-<span class="cstat-no" title="statement not covered" >        isMobile ||</span>
-        menuSizes[numColumns] &gt;
-          menuButtonRef.current.getBoundingClientRect().right;
-<span class="cstat-no" title="statement not covered" >      setSubMenuFullWidth(shouldSetFullWidth);</span>
-    }
-  }, [windowWidth, isOpen]);
+    useEffect(() =&gt; {
+        const isMobile = windowWidth &lt; 768;
+        <span class="missing-if-branch" title="if path not taken" >I</span>if (isOpen) {
+            const shouldSetFullWidth =
+<span class="cstat-no" title="statement not covered" >                isMobile ||</span>
+                menuSizes[numColumns] &gt;
+                    menuButtonRef.current.getBoundingClientRect().right;
+<span class="cstat-no" title="statement not covered" >            setSubMenuFullWidth(shouldSetFullWidth);</span>
+        }
+    }, [windowWidth, isOpen]);
 &nbsp;
-  useEffect(() =&gt; {
-    const listener = <span class="fstat-no" title="function not covered" >(e</span>vent) =&gt; {
-<span class="cstat-no" title="statement not covered" >      if (</span>
-        !menuRef ||
-        !menuRef.current ||
-        menuRef.current.contains(event.target) ||
-        excludedClickOutClasses.some(<span class="fstat-no" title="function not covered" >(c</span>lassName) =&gt;
-<span class="cstat-no" title="statement not covered" >          event?.target?.classList.contains(className)</span>
-        )
-      ) {
-<span class="cstat-no" title="statement not covered" >        return;</span>
-      }
-<span class="cstat-no" title="statement not covered" >      setOpenMobileSubMenu('')</span>
-<span class="cstat-no" title="statement not covered" >      closeMenus();</span>
-    };
-    document.addEventListener('mousedown', listener);
-    return () =&gt; document.removeEventListener('mousedown', listener);
-  }, [menuRef]);
+    useEffect(() =&gt; {
+        const listener = <span class="fstat-no" title="function not covered" >(e</span>vent) =&gt; {
+<span class="cstat-no" title="statement not covered" >            if (</span>
+                !menuRef ||
+                !menuRef.current ||
+                menuRef.current.contains(event.target) ||
+                excludedClickOutClasses.some(<span class="fstat-no" title="function not covered" >(c</span>lassName) =&gt;
+<span class="cstat-no" title="statement not covered" >                    event?.target?.classList.contains(className)</span>
+                )
+            ) {
+<span class="cstat-no" title="statement not covered" >                return;</span>
+            }
+<span class="cstat-no" title="statement not covered" >            setOpenMobileSubMenu("");</span>
+<span class="cstat-no" title="statement not covered" >            closeMenus();</span>
+        };
+        document.addEventListener("mousedown", listener);
+        return () =&gt; document.removeEventListener("mousedown", listener);
+    }, [menuRef]);
 &nbsp;
-  useEffect(() =&gt; {
-    <span class="missing-if-branch" title="else path not taken" >E</span>if (!isMobileMenuExpanded || <span class="branch-1 cbranch-no" title="branch not covered" >!isOpen)</span>{
-      setOpenMobileSubMenu('')
-    }
-  }, [isMobileMenuExpanded, isOpen])
+    useEffect(() =&gt; {
+        <span class="missing-if-branch" title="else path not taken" >E</span>if (!isMobileMenuExpanded || <span class="branch-1 cbranch-no" title="branch not covered" >!isOpen)</span> {
+            setOpenMobileSubMenu("");
+        }
+    }, [isMobileMenuExpanded, isOpen]);
 &nbsp;
-  return (
-    &lt;li
-      key={`header-item-${menuIdentifier}`}
-      className={`header-item-${menuIdentifier}${
-        isSubMenuFullWidth ? <span class="branch-0 cbranch-no" title="branch not covered" >' full-width-menu' </span>: ''
-      }${className ? <span class="branch-0 cbranch-no" title="branch not covered" >` ${className}` </span>: ''}`}
-      ref={menuRef}
-    &gt;
-      &lt;button
-        ref={menuButtonRef}
-        className="menu-dropdown-toggle"
-        aria-label={`${name} navigation dropdown`}
-        aria-expanded={isOpen}
-        aria-controls={`nav-section-${menuIdentifier}`}
-        data-toggle="dropdown"
-        onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >handleToggleMenu(menuIdentifier)}</span>
-      &gt;
-        &lt;div className="dropdown-title-chevron-container"&gt;
-          &lt;span className="dropdown-title"&gt;{name}&lt;/span&gt;
-          &lt;div className="chevron-container"&gt;
-            &lt;Chevron focusable="false" /&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
+    return (
+        &lt;li
+            key={`header-item-${menuIdentifier}`}
+            className={`header-item-${menuIdentifier}${
+                isSubMenuFullWidth ? <span class="branch-0 cbranch-no" title="branch not covered" >" full-width-menu" </span>: ""
+            }${className ? <span class="branch-0 cbranch-no" title="branch not covered" >` ${className}` </span>: ""}`}
+            ref={menuRef}
+        &gt;
+            &lt;button
+                ref={menuButtonRef}
+                className="menu-dropdown-toggle"
+                aria-label={`${name} navigation dropdown`}
+                aria-expanded={isOpen}
+                aria-controls={`nav-section-${menuIdentifier}`}
+                data-toggle="dropdown"
+                onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >handleToggleMenu(menuIdentifier)}</span>
+            &gt;
+                &lt;div className="dropdown-title-chevron-container"&gt;
+                    &lt;span className="dropdown-title"&gt;{name}&lt;/span&gt;
+                    &lt;div className="chevron-container"&gt;
+                        &lt;Chevron focusable="false" /&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
 &nbsp;
-        &lt;span className={`dropdown-description ${isOpen ? <span class="branch-0 cbranch-no" title="branch not covered" >'active' </span>: ''}`}&gt;
-          {subtitle}
-        &lt;/span&gt;
-      &lt;/button&gt;
-      &lt;div
-        className={`nav-section${isOpen ? <span class="branch-0 cbranch-no" title="branch not covered" >' open' </span>: ''}`}
-        id={`nav-section-${menuIdentifier}`}
-        hidden={!isOpen}
-        data-columns={numColumns}
-      &gt;
-        {rows.map(<span class="fstat-no" title="function not covered" >(c</span>olumnContent, index) =&gt; {
-<span class="cstat-no" title="statement not covered" >          return (</span>
-            &lt;ul key={`${menuIdentifier}-${index}`} className="nav-column"&gt;
-              {columnContent.map(<span class="fstat-no" title="function not covered" >(c</span>, cIndex) =&gt; {
-<span class="cstat-no" title="statement not covered" >                return (</span>
-                  &lt;Fragment key={`${menuIdentifier}-${index}-${cIndex}`}&gt;
-                    &lt;li className="submenu-section"&gt;
-                      {c.heading &amp;&amp; (
-                        &lt;h3 className="submenu-heading"&gt;{c.heading}&lt;/h3&gt;
-                      )}
-                      &lt;ul&gt;
-                        {c.items.map(<span class="fstat-no" title="function not covered" >(i</span>tem) =&gt; {
-                          const isSubLink = <span class="cstat-no" title="statement not covered" >item.type === 'sublink';</span>
-                          const componentsByType = <span class="cstat-no" title="statement not covered" >{</span>
-                            button: HeaderMenuButton,
-                            signout: HeaderMenuSignOutButton,
-                            link: HeaderMenuLink,
-                            sublink: HeaderMenuLink,
-                          };
-                          const SubMenuComponent = <span class="cstat-no" title="statement not covered" >componentsByType[item.type];</span>
-<span class="cstat-no" title="statement not covered" >                          return (</span>
-                            &lt;li
-                              onClick={handleClick}
-                              key={`item-link-${item.name}`}
-                              className={isSubLink ? 'nav-link-li sublink' : 'nav-link-li'}
-                            &gt;
-                              &lt;SubMenuComponent
-                                href={item.href}
-                                name={item.name}
-                                RouterLink={RouterLink}
-                              /&gt;
-                            &lt;/li&gt;
-                          );
-                        })}
-                      &lt;/ul&gt;
-                    &lt;/li&gt;
-                    {name === 'MIPS' &amp;&amp; (
-                      &lt;li
-                        key={`${menuIdentifier}-mobile-${index}-${cIndex}`}
-                        className="submenu-section-mips-mobile"
-                        onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; {
-<span class="cstat-no" title="statement not covered" >                          setOpenMobileSubMenu(c.heading);</span>
-                        }}
-                      &gt;
-                        &lt;Accordion
-                          title={c.heading}
-                          isOpen={isMobileMenuExpanded &amp;&amp; openMobileSubMenu === c.heading}
+                &lt;span
+                    className={`dropdown-description ${isOpen ? <span class="branch-0 cbranch-no" title="branch not covered" >"active" </span>: ""}`}
+                &gt;
+                    {subtitle}
+                &lt;/span&gt;
+            &lt;/button&gt;
+            &lt;div
+                className={`nav-section${isOpen ? <span class="branch-0 cbranch-no" title="branch not covered" >" open" </span>: ""}`}
+                id={`nav-section-${menuIdentifier}`}
+                hidden={!isOpen}
+                data-columns={numColumns}
+            &gt;
+                {rows.map(<span class="fstat-no" title="function not covered" >(c</span>olumnContent, index) =&gt; {
+<span class="cstat-no" title="statement not covered" >                    return (</span>
+                        &lt;ul
+                            key={`${menuIdentifier}-${index}`}
+                            className="nav-column"
                         &gt;
-                          &lt;ul&gt;
-                            {c.items.map(<span class="fstat-no" title="function not covered" >(i</span>tem) =&gt; {
-                              const isSubLink = <span class="cstat-no" title="statement not covered" >item.type === 'sublink';</span>
-                              const componentsByType = <span class="cstat-no" title="statement not covered" >{</span>
-                                button: HeaderMenuButton,
-                                signout: HeaderMenuSignOutButton,
-                                link: HeaderMenuLink,
-                                sublink: HeaderMenuLink,
-                              };
-                              const SubMenuComponent =
-<span class="cstat-no" title="statement not covered" >                                componentsByType[item.type];</span>
-<span class="cstat-no" title="statement not covered" >                              return (</span>
-                                &lt;li
-                                  onClick={handleClick}
-                                  key={`item-link-${item.name}`}
-                                  className={isSubLink ? 'sublink' : ''}
-                                &gt;
-                                  &lt;SubMenuComponent
-                                    href={item.href}
-                                    name={item.name}
-                                    RouterLink={RouterLink}
-                                  /&gt;
-                                &lt;/li&gt;
-                              );
+                            {columnContent.map(<span class="fstat-no" title="function not covered" >(c</span>, cIndex) =&gt; {
+<span class="cstat-no" title="statement not covered" >                                return (</span>
+                                    &lt;Fragment
+                                        key={`${menuIdentifier}-${index}-${cIndex}`}
+                                    &gt;
+                                        &lt;li className="submenu-section"&gt;
+                                            {c.heading &amp;&amp; (
+                                                &lt;h3 className="submenu-heading"&gt;
+                                                    {c.heading}
+                                                &lt;/h3&gt;
+                                            )}
+                                            &lt;ul&gt;
+                                                {c.items.map(<span class="fstat-no" title="function not covered" >(i</span>tem) =&gt; {
+                                                    const isSubLink =
+<span class="cstat-no" title="statement not covered" >                                                        item.type === "sublink";</span>
+                                                    const componentsByType = <span class="cstat-no" title="statement not covered" >{</span>
+                                                        button: HeaderMenuButton,
+                                                        signout:
+                                                            HeaderMenuSignOutButton,
+                                                        link: HeaderMenuLink,
+                                                        sublink: HeaderMenuLink,
+                                                    };
+                                                    const SubMenuComponent =
+<span class="cstat-no" title="statement not covered" >                                                        componentsByType[</span>
+                                                            item.type
+                                                        ];
+<span class="cstat-no" title="statement not covered" >                                                    return (</span>
+                                                        &lt;li
+                                                            onClick={
+                                                                handleClick
+                                                            }
+                                                            key={`item-link-${item.name}`}
+                                                            className={
+                                                                isSubLink
+                                                                    ? "nav-link-li sublink"
+                                                                    : "nav-link-li"
+                                                            }
+                                                        &gt;
+                                                            &lt;SubMenuComponent
+                                                                href={item.href}
+                                                                name={item.name}
+                                                                RouterLink={
+                                                                    RouterLink
+                                                                }
+                                                            /&gt;
+                                                        &lt;/li&gt;
+                                                    );
+                                                })}
+                                            &lt;/ul&gt;
+                                        &lt;/li&gt;
+                                        {name === "MIPS" &amp;&amp; (
+                                            &lt;li
+                                                key={`${menuIdentifier}-mobile-${index}-${cIndex}`}
+                                                className="submenu-section-mips-mobile"
+                                                onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; {
+<span class="cstat-no" title="statement not covered" >                                                    setOpenMobileSubMenu(</span>
+                                                        c.heading
+                                                    );
+                                                }}
+                                            &gt;
+                                                &lt;Accordion
+                                                    title={c.heading}
+                                                    isOpen={
+                                                        isMobileMenuExpanded &amp;&amp;
+                                                        openMobileSubMenu ===
+                                                            c.heading
+                                                    }
+                                                &gt;
+                                                    &lt;ul&gt;
+                                                        {c.items.map(<span class="fstat-no" title="function not covered" >(i</span>tem) =&gt; {
+                                                            const isSubLink =
+<span class="cstat-no" title="statement not covered" >                                                                item.type ===</span>
+                                                                "sublink";
+                                                            const componentsByType =
+<span class="cstat-no" title="statement not covered" >                                                                {</span>
+                                                                    button: HeaderMenuButton,
+                                                                    signout:
+                                                                        HeaderMenuSignOutButton,
+                                                                    link: HeaderMenuLink,
+                                                                    sublink:
+                                                                        HeaderMenuLink,
+                                                                };
+                                                            const SubMenuComponent =
+<span class="cstat-no" title="statement not covered" >                                                                componentsByType[</span>
+                                                                    item.type
+                                                                ];
+<span class="cstat-no" title="statement not covered" >                                                            return (</span>
+                                                                &lt;li
+                                                                    onClick={
+                                                                        handleClick
+                                                                    }
+                                                                    key={`item-link-${item.name}`}
+                                                                    className={
+                                                                        isSubLink
+                                                                            ? "sublink"
+                                                                            : ""
+                                                                    }
+                                                                &gt;
+                                                                    &lt;SubMenuComponent
+                                                                        href={
+                                                                            item.href
+                                                                        }
+                                                                        name={
+                                                                            item.name
+                                                                        }
+                                                                        RouterLink={
+                                                                            RouterLink
+                                                                        }
+                                                                    /&gt;
+                                                                &lt;/li&gt;
+                                                            );
+                                                        })}
+                                                    &lt;/ul&gt;
+                                                &lt;/Accordion&gt;
+                                            &lt;/li&gt;
+                                        )}
+                                    &lt;/Fragment&gt;
+                                );
                             })}
-                          &lt;/ul&gt;
-                        &lt;/Accordion&gt;
-                      &lt;/li&gt;
-                    )}
-                  &lt;/Fragment&gt;
-                );
-              })}
-            &lt;/ul&gt;
-          );
-        })}
-      &lt;/div&gt;
-    &lt;/li&gt;
-  );
+                        &lt;/ul&gt;
+                    );
+                })}
+            &lt;/div&gt;
+        &lt;/li&gt;
+    );
 };
 &nbsp;
 HeaderMenuItem.propTypes = {
-  columns: PropTypes.array,
-  menuName: PropTypes.string,
-  rows: PropTypes.array,
-  name: PropTypes.string.isRequired,
-  subtitle: PropTypes.string.isRequired,
-  className: PropTypes.string,
-  handleClick: PropTypes.func.isRequired,
-  isMobileMenuExpanded: PropTypes.bool.isRequired,
+    columns: PropTypes.array,
+    menuName: PropTypes.string,
+    rows: PropTypes.array,
+    name: PropTypes.string.isRequired,
+    subtitle: PropTypes.string.isRequired,
+    className: PropTypes.string,
+    handleClick: PropTypes.func.isRequired,
+    isMobileMenuExpanded: PropTypes.bool.isRequired,
 };
 HeaderMenuItem.defaultProps = {
-  menuName: '',
-  columns: [],
-  rows: [],
-  className: null,
+    menuName: "",
+    columns: [],
+    rows: [],
+    className: null,
 };
 &nbsp;
 export default HeaderMenuItem;
@@ -766,7 +907,7 @@ export default HeaderMenuItem;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Mon Mar 14 2022 14:52:06 GMT-0700 (Pacific Daylight Time)
+                at Thu Mar 24 2022 11:31:04 GMT-0700 (Pacific Daylight Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>