@madie/madie-design-system 1.0.2 → 1.0.3

package/coverage/lcov-report/react/components/SideNav/Links/NavLinkDrawer.jsx.html

@@ -312,7 +312,43 @@
 <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></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<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>
+<a name='L281'></a><a href='#L281'>281</a>
+<a name='L282'></a><a href='#L282'>282</a>
+<a name='L283'></a><a href='#L283'>283</a>
+<a name='L284'></a><a href='#L284'>284</a>
+<a name='L285'></a><a href='#L285'>285</a>
+<a name='L286'></a><a href='#L286'>286</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>
@@ -404,6 +440,8 @@
 <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>
@@ -420,6 +458,8 @@
 <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-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -467,6 +507,7 @@
 <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>
@@ -492,6 +533,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-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>
@@ -538,6 +589,27 @@
 <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-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>
@@ -561,252 +633,288 @@
 <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, { useState, useEffect } 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, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
 &nbsp;
-import { handleNavigation } from '../helpers';
-import AnimationGroup from '../AnimationGroup/AnimationGroup';
+import { handleNavigation } from "../helpers";
+import AnimationGroup from "../AnimationGroup/AnimationGroup";
 &nbsp;
 const NavLinkDrawer = <span class="fstat-no" title="function not covered" >({</span>
-  className,
-  disabled,
-  isAlwaysOpen,
-  isExpanded,
-  items,
-  label,
-  leftIcon,
-  linkActiveFunc,
-  linkCallback,
-  listOfLinks,
-  openByDefault,
-  rightIcon,
-  sidebarExpand,
-  staticDrawer,
-  url,
-  isHighlighted,
-  darkerBackground,
-  leftBorderHighlightDisabled,
-  largerDrawerBottomPadding
+    className,
+    disabled,
+    isAlwaysOpen,
+    isExpanded,
+    items,
+    label,
+    leftIcon,
+    linkActiveFunc,
+    linkCallback,
+    listOfLinks,
+    openByDefault,
+    rightIcon,
+    sidebarExpand,
+    staticDrawer,
+    url,
+    isHighlighted,
+    darkerBackground,
+    leftBorderHighlightDisabled,
+    largerDrawerBottomPadding,
 }) =&gt; {
-  const [isOpen, setIsOpen] = <span class="cstat-no" title="statement not covered" >useState(openByDefault);</span>
+    const [isOpen, setIsOpen] = <span class="cstat-no" title="statement not covered" >useState(openByDefault);</span>
 &nbsp;
-  const toggleDrawer = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >    if (!isExpanded &amp;&amp; typeof sidebarExpand === 'function') {</span>
-<span class="cstat-no" title="statement not covered" >      sidebarExpand();</span>
-<span class="cstat-no" title="statement not covered" >      setIsOpen(true);</span>
-<span class="cstat-no" title="statement not covered" >      return;</span>
-    }
+    const toggleDrawer = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >        if (!isExpanded &amp;&amp; typeof sidebarExpand === "function") {</span>
+<span class="cstat-no" title="statement not covered" >            sidebarExpand();</span>
+<span class="cstat-no" title="statement not covered" >            setIsOpen(true);</span>
+<span class="cstat-no" title="statement not covered" >            return;</span>
+        }
 &nbsp;
-<span class="cstat-no" title="statement not covered" >    if (!isAlwaysOpen &amp;&amp; !disabled) {</span>
-<span class="cstat-no" title="statement not covered" >      setIsOpen(!isOpen);</span>
-    }
-  };
+<span class="cstat-no" title="statement not covered" >        if (!isAlwaysOpen &amp;&amp; !disabled) {</span>
+<span class="cstat-no" title="statement not covered" >            setIsOpen(!isOpen);</span>
+        }
+    };
 &nbsp;
-  const isLinkActive = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(l</span>ink, func) =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >    if (typeof func === 'function') {</span>
-<span class="cstat-no" title="statement not covered" >      return func(link);</span>
-    }
-<span class="cstat-no" title="statement not covered" >    return window.location.href.indexOf(link.url) &gt; 0;</span>
-  };
+    const isLinkActive = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(l</span>ink, func) =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >        if (typeof func === "function") {</span>
+<span class="cstat-no" title="statement not covered" >            return func(link);</span>
+        }
+<span class="cstat-no" title="statement not covered" >        return window.location.href.indexOf(link.url) &gt; 0;</span>
+    };
 &nbsp;
-  const isCurrentPage = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(l</span>ink, linkActiveFunc) =&gt; {</span>
-    const targetItems = <span class="cstat-no" title="statement not covered" >link.items || link.listOfLinks;</span>
-<span class="cstat-no" title="statement not covered" >    if (link.url &amp;&amp; isLinkActive(link, linkActiveFunc)) {</span>
-<span class="cstat-no" title="statement not covered" >      return true;</span>
-    }
-<span class="cstat-no" title="statement not covered" >    return (</span>
-      targetItems &amp;&amp;
-      targetItems.some(<span class="fstat-no" title="function not covered" >(i</span>tem) =&gt; <span class="cstat-no" title="statement not covered" >isCurrentPage(item, linkActiveFunc))</span>
-    );
-  };
+    const isCurrentPage = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(l</span>ink, linkActiveFunc) =&gt; {</span>
+        const targetItems = <span class="cstat-no" title="statement not covered" >link.items || link.listOfLinks;</span>
+<span class="cstat-no" title="statement not covered" >        if (link.url &amp;&amp; isLinkActive(link, linkActiveFunc)) {</span>
+<span class="cstat-no" title="statement not covered" >            return true;</span>
+        }
+<span class="cstat-no" title="statement not covered" >        return (</span>
+            targetItems &amp;&amp;
+            targetItems.some(<span class="fstat-no" title="function not covered" >(i</span>tem) =&gt; <span class="cstat-no" title="statement not covered" >isCurrentPage(item, linkActiveFunc))</span>
+        );
+    };
 &nbsp;
-  const buildLeftIconClasses = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
-    let leftIcon = <span class="cstat-no" title="statement not covered" >`left-icon`;</span>
-    
-<span class="cstat-no" title="statement not covered" >    if (isAlwaysOpen) {</span>
-<span class="cstat-no" title="statement not covered" >      leftIcon += ` always-open`;</span>
-    }
+    const buildLeftIconClasses = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
+        let leftIcon = <span class="cstat-no" title="statement not covered" >`left-icon`;</span>
 &nbsp;
-<span class="cstat-no" title="statement not covered" >    if (isHighlighted) {</span>
-<span class="cstat-no" title="statement not covered" >      leftIcon += ' fill-white';</span>
-    }
+<span class="cstat-no" title="statement not covered" >        if (isAlwaysOpen) {</span>
+<span class="cstat-no" title="statement not covered" >            leftIcon += ` always-open`;</span>
+        }
 &nbsp;
-<span class="cstat-no" title="statement not covered" >    return leftIcon;</span>
-  }
+<span class="cstat-no" title="statement not covered" >        if (isHighlighted) {</span>
+<span class="cstat-no" title="statement not covered" >            leftIcon += " fill-white";</span>
+        }
 &nbsp;
-  // Classes for the link drawer button
-  const currentPage = <span class="cstat-no" title="statement not covered" >isCurrentPage(</span>
-    { items, listOfLinks, url },
-    linkActiveFunc
-  );
-  const expandedClass = <span class="cstat-no" title="statement not covered" >currentPage ? 'expanded' : '';</span>
+<span class="cstat-no" title="statement not covered" >        return leftIcon;</span>
+    };
 &nbsp;
-  const renderLeftIcon = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(l</span>eftIcon) =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >    if (leftIcon) {</span>
-<span class="cstat-no" title="statement not covered" >      return (&lt;svg</span>
-        className={`${buildLeftIconClasses()}`}
-        aria-hidden="true"
-        focusable="false"
-        &gt;
-        {leftIcon}
-        &lt;/svg&gt;)
-    }
-  }
+    // Classes for the link drawer button
+    const currentPage = <span class="cstat-no" title="statement not covered" >isCurrentPage(</span>
+        { items, listOfLinks, url },
+        linkActiveFunc
+    );
+    const expandedClass = <span class="cstat-no" title="statement not covered" >currentPage ? "expanded" : "";</span>
 &nbsp;
-  const hasDarkerBackground = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(d</span>arkerBackground) =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >    return darkerBackground ? 'background-highlight' : '';</span>
-  }
+    const renderLeftIcon = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(l</span>eftIcon) =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >        if (leftIcon) {</span>
+<span class="cstat-no" title="statement not covered" >            return (</span>
+                &lt;svg
+                    className={`${buildLeftIconClasses()}`}
+                    aria-hidden="true"
+                    focusable="false"
+                &gt;
+                    {leftIcon}
+                &lt;/svg&gt;
+            );
+        }
+    };
 &nbsp;
-  const hasDarkerTitle = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(d</span>arkerBackground) =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >    return darkerBackground ? 'expanded currentPage' : '';</span>
-  }
+    const hasDarkerBackground = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(d</span>arkerBackground) =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >        return darkerBackground ? "background-highlight" : "";</span>
+    };
 &nbsp;
-  const isLeftBorderHighlightDisabled = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(l</span>eftBorderHighlightDisabled) =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >    return leftBorderHighlightDisabled ? 'left-border-disabled' : ''</span>
-  }
+    const hasDarkerTitle = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(d</span>arkerBackground) =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >        return darkerBackground ? "expanded currentPage" : "";</span>
+    };
 &nbsp;
-  const isHiddenWhileCollapsed = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(i</span>sLeftBorderDisabled, isExpanded) =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >    return isLeftBorderDisabled &amp;&amp; !isExpanded ? 'hidden-nav-link-item' : '';</span>
-  }
+    const isLeftBorderHighlightDisabled = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(l</span>eftBorderHighlightDisabled) =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >        return leftBorderHighlightDisabled ? "left-border-disabled" : "";</span>
+    };
 &nbsp;
-  const highlightTitle = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(i</span>sHighlighted) =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >    return isHighlighted &amp;&amp; isExpanded ? 'highlight' : '';</span>
-  }
+    const isHiddenWhileCollapsed = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(i</span>sLeftBorderDisabled, isExpanded) =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >        return isLeftBorderDisabled &amp;&amp; !isExpanded</span>
+            ? "hidden-nav-link-item"
+            : "";
+    };
 &nbsp;
-  const hasLargerDrawBottomPadding = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(l</span>argerDrawerBottomPadding) =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >    return largerDrawerBottomPadding ? 'larger-drawer-bottom-padding' : '';</span>
-  }
+    const highlightTitle = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(i</span>sHighlighted) =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >        return isHighlighted &amp;&amp; isExpanded ? "highlight" : "";</span>
+    };
 &nbsp;
-  const adjustItemSpacing = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(l</span>argerDrawerBottomPadding) =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >    return largerDrawerBottomPadding ? 'larger-item-spacing' : '';</span>
-  }
+    const hasLargerDrawBottomPadding = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(l</span>argerDrawerBottomPadding) =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >        return largerDrawerBottomPadding ? "larger-drawer-bottom-padding" : "";</span>
+    };
 &nbsp;
-<span class="cstat-no" title="statement not covered" >  useEffect(<span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >    if (disabled) {</span>
-<span class="cstat-no" title="statement not covered" >      setIsOpen(false);</span>
-    }
-<span class="cstat-no" title="statement not covered" >    if (isAlwaysOpen) {</span>
-<span class="cstat-no" title="statement not covered" >      setIsOpen(isAlwaysOpen);</span>
-    }
-  }, []);
+    const adjustItemSpacing = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(l</span>argerDrawerBottomPadding) =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >        return largerDrawerBottomPadding ? "larger-item-spacing" : "";</span>
+    };
 &nbsp;
-  // Render the links recursively.  This will theoretically allow for an infinite number of nested link items.
-  // className will either be empty, parent-link - top most node, or child-link.
-  const renderDrawerLinksRecursively = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(n</span>avLinks, className = <span class="branch-0 cbranch-no" title="branch not covered" >'')</span> =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >    return (</span>
-      navLinks &amp;&amp;
-      navLinks.map(<span class="fstat-no" title="function not covered" >(l</span>ink) =&gt; {
-<span class="cstat-no" title="statement not covered" >        if (link.type === 'divider') {</span>
-<span class="cstat-no" title="statement not covered" >          return (</span>
-            &lt;AnimationGroup display={true}&gt;
-              &lt;hr /&gt;
-            &lt;/AnimationGroup&gt;
-          );
+<span class="cstat-no" title="statement not covered" >    useEffect(<span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >        if (disabled) {</span>
+<span class="cstat-no" title="statement not covered" >            setIsOpen(false);</span>
+        }
+<span class="cstat-no" title="statement not covered" >        if (isAlwaysOpen) {</span>
+<span class="cstat-no" title="statement not covered" >            setIsOpen(isAlwaysOpen);</span>
         }
+    }, []);
 &nbsp;
+    // Render the links recursively.  This will theoretically allow for an infinite number of nested link items.
+    // className will either be empty, parent-link - top most node, or child-link.
+    const renderDrawerLinksRecursively = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(n</span>avLinks, className = <span class="branch-0 cbranch-no" title="branch not covered" >"")</span> =&gt; {</span>
 <span class="cstat-no" title="statement not covered" >        return (</span>
-          &lt;li
-            key={link.label}
-            className={
-              isLinkActive(link, linkActiveFunc)
-                ? `active-link ${className}`
-                : className
-            }
-          &gt;
-            {link.url ? (
-              &lt;a
-                href={link.url}
-                onClick={<span class="fstat-no" title="function not covered" >(e</span>) =&gt; <span class="cstat-no" title="statement not covered" >handleNavigation(e, linkCallback, link.label)}</span>
-                tabIndex={isOpen ? '0' : '-1'}
-                data-track-category="SidebarNav"
-                data-track-action={`GoTo${
-                  link.label ? link.label.split(' ').join('') : ''
-                }`}
-                data-track-label={link.label}
-                target="_self"
-              &gt;
-                {link.label}
-              &lt;/a&gt;
-            ) : (
-              &lt;div&gt;{link.label}&lt;/div&gt;
-            )}
-            {link.items &amp;&amp; link.items.length &gt; 0 &amp;&amp; (
-              &lt;ul aria-hidden={!isOpen}&gt;
-                {renderDrawerLinksRecursively(link.items, 'child-link')}
-              &lt;/ul&gt;
-            )}
-          &lt;/li&gt;
+            navLinks &amp;&amp;
+            navLinks.map(<span class="fstat-no" title="function not covered" >(l</span>ink) =&gt; {
+<span class="cstat-no" title="statement not covered" >                if (link.type === "divider") {</span>
+<span class="cstat-no" title="statement not covered" >                    return (</span>
+                        &lt;AnimationGroup display={true}&gt;
+                            &lt;hr /&gt;
+                        &lt;/AnimationGroup&gt;
+                    );
+                }
+&nbsp;
+<span class="cstat-no" title="statement not covered" >                return (</span>
+                    &lt;li
+                        key={link.label}
+                        className={
+                            isLinkActive(link, linkActiveFunc)
+                                ? `active-link ${className}`
+                                : className
+                        }
+                    &gt;
+                        {link.url ? (
+                            &lt;a
+                                href={link.url}
+                                onClick={<span class="fstat-no" title="function not covered" >(e</span>) =&gt;
+<span class="cstat-no" title="statement not covered" >                                    handleNavigation(</span>
+                                        e,
+                                        linkCallback,
+                                        link.label
+                                    )
+                                }
+                                tabIndex={isOpen ? "0" : "-1"}
+                                data-track-category="SidebarNav"
+                                data-track-action={`GoTo${
+                                    link.label
+                                        ? link.label.split(" ").join("")
+                                        : ""
+                                }`}
+                                data-track-label={link.label}
+                                target="_self"
+                            &gt;
+                                {link.label}
+                            &lt;/a&gt;
+                        ) : (
+                            &lt;div&gt;{link.label}&lt;/div&gt;
+                        )}
+                        {link.items &amp;&amp; link.items.length &gt; 0 &amp;&amp; (
+                            &lt;ul aria-hidden={!isOpen}&gt;
+                                {renderDrawerLinksRecursively(
+                                    link.items,
+                                    "child-link"
+                                )}
+                            &lt;/ul&gt;
+                        )}
+                    &lt;/li&gt;
+                );
+            })
         );
-      })
-    );
-  };
+    };
 &nbsp;
-<span class="cstat-no" title="statement not covered" >  return (</span>
-    &lt;div className={staticDrawer ? 'static-drawer link-drawer' : 'link-drawer'}&gt;
-      &lt;button
-        onClick={toggleDrawer}
-        {...(!isAlwaysOpen ? { 'aria-pressed': isOpen } : {})}
-        tabIndex="0"
-        aria-label={label}
-        {...(isAlwaysOpen || disabled
-          ? { disabled: isAlwaysOpen || disabled }
-          : {})}
-        className={`${className} ${expandedClass} ${highlightTitle(isHighlighted)} ${hasDarkerTitle(darkerBackground)}
-         ${currentPage ? 'currentPage' : ''} ${isLeftBorderHighlightDisabled(leftBorderHighlightDisabled)}
-         ${isHiddenWhileCollapsed(leftBorderHighlightDisabled, isExpanded)}`}
-      &gt;
-        &lt;div className={isExpanded ? 'link-body' : 'link-body collapsed'}&gt;
-          {renderLeftIcon(leftIcon)}
-          &lt;AnimationGroup display={isExpanded}&gt;
-            &lt;span&gt;{label}&lt;/span&gt;
-          &lt;/AnimationGroup&gt;
-        &lt;/div&gt;
-        {isExpanded &amp;&amp; !isAlwaysOpen &amp;&amp; (
-          &lt;svg
-            className={`${isOpen ? 'right-icon rotated' : 'right-icon'}`}
-            focusable="false"
-            aria-hidden="true"
-          &gt;
-            {rightIcon}
-          &lt;/svg&gt;
-        )}
-      &lt;/button&gt;
-      &lt;AnimationGroup display={isExpanded}&gt;
+<span class="cstat-no" title="statement not covered" >    return (</span>
         &lt;div
-          className={`${currentPage ? 'currentPage' : ''} ${
-            isOpen &amp;&amp; !disabled ? 'drawer open' : 'drawer'
-          } ${hasDarkerBackground(darkerBackground)} ${hasLargerDrawBottomPadding(largerDrawerBottomPadding)}`}
+            className={
+                staticDrawer ? "static-drawer link-drawer" : "link-drawer"
+            }
         &gt;
-          &lt;ul aria-hidden={!isOpen}&gt;
-            {listOfLinks &amp;&amp;
-              renderDrawerLinksRecursively(listOfLinks, `parent-link ${adjustItemSpacing(largerDrawerBottomPadding)}`)}
-          &lt;/ul&gt;
+            &lt;button
+                onClick={toggleDrawer}
+                {...(!isAlwaysOpen ? { "aria-pressed": isOpen } : {})}
+                tabIndex="0"
+                aria-label={label}
+                {...(isAlwaysOpen || disabled
+                    ? { disabled: isAlwaysOpen || disabled }
+                    : {})}
+                className={`${className} ${expandedClass} ${highlightTitle(
+                    isHighlighted
+                )} ${hasDarkerTitle(darkerBackground)}
+         ${currentPage ? "currentPage" : ""} ${isLeftBorderHighlightDisabled(
+                    leftBorderHighlightDisabled
+                )}
+         ${isHiddenWhileCollapsed(leftBorderHighlightDisabled, isExpanded)}`}
+            &gt;
+                &lt;div
+                    className={isExpanded ? "link-body" : "link-body collapsed"}
+                &gt;
+                    {renderLeftIcon(leftIcon)}
+                    &lt;AnimationGroup display={isExpanded}&gt;
+                        &lt;span&gt;{label}&lt;/span&gt;
+                    &lt;/AnimationGroup&gt;
+                &lt;/div&gt;
+                {isExpanded &amp;&amp; !isAlwaysOpen &amp;&amp; (
+                    &lt;svg
+                        className={`${
+                            isOpen ? "right-icon rotated" : "right-icon"
+                        }`}
+                        focusable="false"
+                        aria-hidden="true"
+                    &gt;
+                        {rightIcon}
+                    &lt;/svg&gt;
+                )}
+            &lt;/button&gt;
+            &lt;AnimationGroup display={isExpanded}&gt;
+                &lt;div
+                    className={`${currentPage ? "currentPage" : ""} ${
+                        isOpen &amp;&amp; !disabled ? "drawer open" : "drawer"
+                    } ${hasDarkerBackground(
+                        darkerBackground
+                    )} ${hasLargerDrawBottomPadding(
+                        largerDrawerBottomPadding
+                    )}`}
+                &gt;
+                    &lt;ul aria-hidden={!isOpen}&gt;
+                        {listOfLinks &amp;&amp;
+                            renderDrawerLinksRecursively(
+                                listOfLinks,
+                                `parent-link ${adjustItemSpacing(
+                                    largerDrawerBottomPadding
+                                )}`
+                            )}
+                    &lt;/ul&gt;
+                &lt;/div&gt;
+            &lt;/AnimationGroup&gt;
         &lt;/div&gt;
-      &lt;/AnimationGroup&gt;
-    &lt;/div&gt;
-  );
+    );
 };
 &nbsp;
 NavLinkDrawer.propTypes = {
-  isExpanded: PropTypes.bool,
-  isAlwaysOpen: PropTypes.bool,
-  openByDefault: PropTypes.bool,
-  className: PropTypes.string,
-  rightIcon: PropTypes.element,
-  leftIcon: PropTypes.element,
-  label: PropTypes.string,
-  linkActiveFunc: PropTypes.func,
-  linkCallback: PropTypes.func,
-  listOfLinks: PropTypes.array,
-  disabled: PropTypes.bool,
-  sidebarExpand: PropTypes.func,
-  staticDrawer: PropTypes.bool,
-  items: PropTypes.object,
-  url: PropTypes.string,
-  isHighlighted: PropTypes.bool,
-  darkerBackground: PropTypes.bool,
-  leftBorderHighlightDisabled: PropTypes.bool,
-  largerDrawerBottomPadding: PropTypes.bool
+    isExpanded: PropTypes.bool,
+    isAlwaysOpen: PropTypes.bool,
+    openByDefault: PropTypes.bool,
+    className: PropTypes.string,
+    rightIcon: PropTypes.element,
+    leftIcon: PropTypes.element,
+    label: PropTypes.string,
+    linkActiveFunc: PropTypes.func,
+    linkCallback: PropTypes.func,
+    listOfLinks: PropTypes.array,
+    disabled: PropTypes.bool,
+    sidebarExpand: PropTypes.func,
+    staticDrawer: PropTypes.bool,
+    items: PropTypes.object,
+    url: PropTypes.string,
+    isHighlighted: PropTypes.bool,
+    darkerBackground: PropTypes.bool,
+    leftBorderHighlightDisabled: PropTypes.bool,
+    largerDrawerBottomPadding: PropTypes.bool,
 };
 &nbsp;
 export default NavLinkDrawer;
@@ -817,7 +925,7 @@ export default NavLinkDrawer;
             <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>