qpp-style 0.0.8 → 0.0.10

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

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">2.33% </span>
+                <span class="strong">3.07% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>1/43</span>
+                <span class='fraction'>2/65</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/69</span>
+                <span class='fraction'>0/96</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>0/14</span>
+                <span class='fraction'>0/20</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">2.56% </span>
+                <span class="strong">3.07% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>1/39</span>
+                <span class='fraction'>2/65</span>
             </div>
         
             
@@ -54,6 +54,12 @@
         <p class="quiet">
             Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
         </p>
+        <template id="filterTemplate">
+            <div class="quiet">
+                Filter:
+                <input oninput="onInput()" type="search" id="fileSearch">
+            </div>
+        </template>
     </div>
     <div class='status-line low'></div>
     <pre><table class="coverage">
@@ -265,7 +271,96 @@
 <a name='L206'></a><a href='#L206'>206</a>
 <a name='L207'></a><a href='#L207'>207</a>
 <a name='L208'></a><a href='#L208'>208</a>
-<a name='L209'></a><a href='#L209'>209</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L209'></a><a href='#L209'>209</a>
+<a name='L210'></a><a href='#L210'>210</a>
+<a name='L211'></a><a href='#L211'>211</a>
+<a name='L212'></a><a href='#L212'>212</a>
+<a name='L213'></a><a href='#L213'>213</a>
+<a name='L214'></a><a href='#L214'>214</a>
+<a name='L215'></a><a href='#L215'>215</a>
+<a name='L216'></a><a href='#L216'>216</a>
+<a name='L217'></a><a href='#L217'>217</a>
+<a name='L218'></a><a href='#L218'>218</a>
+<a name='L219'></a><a href='#L219'>219</a>
+<a name='L220'></a><a href='#L220'>220</a>
+<a name='L221'></a><a href='#L221'>221</a>
+<a name='L222'></a><a href='#L222'>222</a>
+<a name='L223'></a><a href='#L223'>223</a>
+<a name='L224'></a><a href='#L224'>224</a>
+<a name='L225'></a><a href='#L225'>225</a>
+<a name='L226'></a><a href='#L226'>226</a>
+<a name='L227'></a><a href='#L227'>227</a>
+<a name='L228'></a><a href='#L228'>228</a>
+<a name='L229'></a><a href='#L229'>229</a>
+<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>
+<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></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>
+<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>
+<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>
@@ -274,51 +369,79 @@
 <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>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&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>
 <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>
 <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-no">&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-no">&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>
 <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-no">&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>
+<span class="cline-any cline-no">&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-no">&nbsp;</span>
 <span class="cline-any cline-no">&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>
+<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>
 <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-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-no">&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-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-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-no">&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>
@@ -328,13 +451,19 @@
 <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-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-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-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-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -342,16 +471,27 @@
 <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-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-no">&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-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-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-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>
@@ -370,6 +510,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-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>
@@ -395,13 +536,9 @@
 <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>
 <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>
-<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>
@@ -454,11 +591,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-yes">2x</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>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -473,82 +610,165 @@
 <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, { Component } from 'react';
-import { handleNavigation } from '../helpers';
-import AnimationGroup from '../AnimationGroup/AnimationGroup';
+<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></td><td class="text"><pre class="prettyprint lang-js">import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 &nbsp;
-export default class NavLinkDrawer extends Component {
-<span class="fstat-no" title="function not covered" >  co</span>nstructor(props) {
-<span class="cstat-no" title="statement not covered" >    super(props);</span>
-<span class="cstat-no" title="statement not covered" >    this._toggleDrawer = this.toggleDrawer.bind(this);</span>
-<span class="cstat-no" title="statement not covered" >    this._isLinkActive = this.isLinkActive.bind(this);</span>
-<span class="cstat-no" title="statement not covered" >    this._isCurrentPage = this.isCurrentPage.bind(this);</span>
-<span class="cstat-no" title="statement not covered" >    this._renderDrawerLinksRecursively = this.renderDrawerLinksRecursively.bind(</span>
-      this
-    );
-<span class="cstat-no" title="statement not covered" >    this.state = {</span>
-      isOpen: !!props.openByDefault,
-    };
-  }
-&nbsp;
-<span class="fstat-no" title="function not covered" >  UN</span>SAFE_componentWillMount() {
-    const { isAlwaysOpen, disabled } = <span class="cstat-no" title="statement not covered" >this.props;</span>
-<span class="cstat-no" title="statement not covered" >    if (disabled) {</span>
-<span class="cstat-no" title="statement not covered" >      this.setState(<span class="fstat-no" title="function not covered" >(s</span>tate) =&gt; (<span class="cstat-no" title="statement not covered" >{ isOpen: false })</span>);</span>
-    }
-&nbsp;
-<span class="cstat-no" title="statement not covered" >    if (isAlwaysOpen) {</span>
-<span class="cstat-no" title="statement not covered" >      this.setState(<span class="fstat-no" title="function not covered" >(s</span>tate) =&gt; (<span class="cstat-no" title="statement not covered" >{ isOpen: isAlwaysOpen })</span>);</span>
-    }
-  }
+import { handleNavigation } from '../helpers';
+import AnimationGroup from '../AnimationGroup/AnimationGroup';
 &nbsp;
-<span class="fstat-no" title="function not covered" >  to</span>ggleDrawer() {
-    const { isAlwaysOpen, disabled, isExpanded, sidebarExpand } = <span class="cstat-no" title="statement not covered" >this.props;</span>
+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,
+  hideLabelSection,
+  largerDrawerBottomPadding,
+}) =&gt; {
+  const [isOpen, setIsOpen] = <span class="cstat-no" title="statement not covered" >useState(openByDefault);</span>
+  const MANAGE_ACCESS = <span class="cstat-no" title="statement not covered" >'/user/manage-access';</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" >      this.setState(<span class="fstat-no" title="function not covered" >(s</span>tate) =&gt; (<span class="cstat-no" title="statement not covered" >{ isOpen: true })</span>);</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" >      this.setState(<span class="fstat-no" title="function not covered" >(s</span>tate) =&gt; (<span class="cstat-no" title="statement not covered" >{ isOpen: !state.isOpen })</span>);</span>
+<span class="cstat-no" title="statement not covered" >      setIsOpen(!isOpen);</span>
     }
-  }
 &nbsp;
-<span class="fstat-no" title="function not covered" >  is</span>LinkActive(link, func) {
+<span class="cstat-no" title="statement not covered" >    reRouteHandler();</span>
+  };
+&nbsp;
+  const reRouteHandler = <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 (url === MANAGE_ACCESS) {</span>
+<span class="cstat-no" title="statement not covered" >      return (window.location.href = MANAGE_ACCESS);</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>
     }
-&nbsp;
 <span class="cstat-no" title="statement not covered" >    return window.location.href.indexOf(link.url) &gt; 0;</span>
-  }
+  };
 &nbsp;
-<span class="fstat-no" title="function not covered" >  is</span>CurrentPage(link, linkActiveFunc) {
-    const items = <span class="cstat-no" title="statement not covered" >link.items || link.listOfLinks;</span>
-&nbsp;
-<span class="cstat-no" title="statement not covered" >    if (link.url &amp;&amp; this._isLinkActive(link, 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>
     }
-&nbsp;
 <span class="cstat-no" title="statement not covered" >    return (</span>
-      items &amp;&amp; items.some(<span class="fstat-no" title="function not covered" >(i</span>tem) =&gt; <span class="cstat-no" title="statement not covered" >this._isCurrentPage(item, linkActiveFunc))</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>
+&nbsp;
+<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" >    if (isHighlighted) {</span>
+<span class="cstat-no" title="statement not covered" >      leftIcon += ' fill-white';</span>
+    }
+&nbsp;
+<span class="cstat-no" title="statement not covered" >    return leftIcon;</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>
+&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 (</span>
+        &lt;svg
+          className={`${buildLeftIconClasses()}`}
+          aria-hidden="true"
+          focusable="false"
+        &gt;
+          {leftIcon}
+        &lt;/svg&gt;
+      );
+    }
+  };
+&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>
+  };
+&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>
+  };
+&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>
+  };
+&nbsp;
+  const isLabelSectionHidden = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(h</span>ideLabelSection) =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >    return hideLabelSection ? 'hidden-label-section' : '';</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>
+  };
+&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>
+  };
+&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>
+  };
+&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>
+  };
+&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>
+    }
+  }, []);
 &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.
-<span class="fstat-no" title="function not covered" >  re</span>nderDrawerLinksRecursively(navLinks, className = <span class="branch-0 cbranch-no" title="branch not covered" >'')</span> {
-    const { linkActiveFunc, linkCallback } = <span class="cstat-no" title="statement not covered" >this.props;</span>
-    const { isOpen } = <span class="cstat-no" title="statement not covered" >this.state;</span>
-&nbsp;
+  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; {
+      navLinks.map(<span class="fstat-no" title="function not covered" >(l</span>ink, index) =&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;AnimationGroup display={true} key={index}&gt;
               &lt;hr /&gt;
             &lt;/AnimationGroup&gt;
           );
@@ -558,7 +778,7 @@ export default class NavLinkDrawer extends Component {
           &lt;li
             key={link.label}
             className={
-              this._isLinkActive(link, linkActiveFunc)
+              isLinkActive(link, linkActiveFunc)
                 ? `active-link ${className}`
                 : className
             }
@@ -566,7 +786,7 @@ export default class NavLinkDrawer extends Component {
             {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)}</span>
+                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${
@@ -582,89 +802,70 @@ export default class NavLinkDrawer extends Component {
             )}
             {link.items &amp;&amp; link.items.length &gt; 0 &amp;&amp; (
               &lt;ul aria-hidden={!isOpen}&gt;
-                {this._renderDrawerLinksRecursively(link.items, 'child-link')}
+                {renderDrawerLinksRecursively(link.items, 'child-link')}
               &lt;/ul&gt;
             )}
           &lt;/li&gt;
         );
       })
     );
-  }
-&nbsp;
-<span class="fstat-no" title="function not covered" >  re</span>nder() {
-    const {
-      isExpanded,
-      disabled,
-      isAlwaysOpen,
-      className,
-      rightIcon,
-      leftIcon,
-      label,
-      linkActiveFunc,
-      listOfLinks,
-    } = <span class="cstat-no" title="statement not covered" >this.props;</span>
-    const { isOpen } = <span class="cstat-no" title="statement not covered" >this.state;</span>
+  };
 &nbsp;
-    // Classes for the link drawer button
-    const currentPage = <span class="cstat-no" title="statement not covered" >this._isCurrentPage(this.props, linkActiveFunc);</span>
-    const expandedClass = <span class="cstat-no" title="statement not covered" >currentPage ? 'expanded' : '';</span>
-&nbsp;
-<span class="cstat-no" title="statement not covered" >    return (</span>
-      &lt;div
-        className={
-          this.props.staticDrawer ? 'static-drawer link-drawer' : 'link-drawer'
-        }
+<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}
+        {...((url !== MANAGE_ACCESS &amp;&amp; isAlwaysOpen) || disabled
+          ? { disabled: isAlwaysOpen || disabled }
+          : {})}
+        className={`${className} ${expandedClass} ${highlightTitle(
+          isHighlighted
+        )} ${hasDarkerTitle(darkerBackground)}
+         ${currentPage ? 'currentPage' : ''} ${isLeftBorderHighlightDisabled(
+          leftBorderHighlightDisabled
+        )}
+         ${isLabelSectionHidden(hideLabelSection)}
+         ${isHiddenWhileCollapsed(leftBorderHighlightDisabled, isExpanded)}`}
       &gt;
-        &lt;button
-          onClick={this._toggleDrawer}
-          {...(!isAlwaysOpen ? { 'aria-pressed': isOpen } : {})}
-          tabIndex="0"
-          aria-label={label}
-          {...(isAlwaysOpen || disabled
-            ? { disabled: isAlwaysOpen || disabled }
-            : {})}
-          className={`${className} ${expandedClass} ${
-            currentPage ? 'currentPage' : ''
-          }`}
-        &gt;
-          &lt;div className={isExpanded ? 'link-body' : 'link-body collapsed'}&gt;
-            &lt;svg
-              className={`left-icon${isAlwaysOpen ? ' always-open' : ''}`}
-              aria-hidden="true"
-              focusable="false"
-            &gt;
-              {leftIcon}
-            &lt;/svg&gt;
-            &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'
-            }`}
+        &lt;div className={isExpanded ? 'link-body' : 'link-body collapsed'}&gt;
+          {renderLeftIcon(leftIcon)}
+          &lt;AnimationGroup display={isExpanded}&gt;
+            &lt;span className="sidebar-inline-link-label"&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;
-            &lt;ul aria-hidden={!isOpen}&gt;
-              {listOfLinks &amp;&amp;
-                this._renderDrawerLinksRecursively(listOfLinks, 'parent-link')}
-            &lt;/ul&gt;
-          &lt;/div&gt;
-        &lt;/AnimationGroup&gt;
-      &lt;/div&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;
+  );
+};
 &nbsp;
 NavLinkDrawer.propTypes = {
   isExpanded: PropTypes.bool,
@@ -680,17 +881,25 @@ NavLinkDrawer.propTypes = {
   disabled: PropTypes.bool,
   sidebarExpand: PropTypes.func,
   staticDrawer: PropTypes.bool,
+  items: PropTypes.object,
+  url: PropTypes.string,
+  isHighlighted: PropTypes.bool,
+  darkerBackground: PropTypes.bool,
+  leftBorderHighlightDisabled: PropTypes.bool,
+  hideLabelSection: PropTypes.bool,
+  largerDrawerBottomPadding: PropTypes.bool,
 };
+&nbsp;
+export default NavLinkDrawer;
 &nbsp;</pre></td></tr></table></pre>
 
                 <div class='push'></div><!-- for sticky footer -->
             </div><!-- /wrapper -->
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
-                <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Mon Oct 05 2020 11:31:16 GMT-0700 (Pacific Daylight Time)
+                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
+                at Mon Mar 06 2023 14:49:52 GMT-0800 (Pacific Standard Time)
             </div>
-        </div>
         <script src="../../../../prettify.js"></script>
         <script>
             window.onload = function () {