qpp-style 9.34.2-beta.0 → 9.34.2

package/coverage/lcov-report/react/components/SideNav/UI/SideNavUI.jsx.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">44.89% </span>
+                <span class="strong">41.42% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>22/49</span>
+                <span class='fraction'>29/70</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">5% </span>
+                <span class="strong">7.4% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>2/40</span>
+                <span class='fraction'>4/54</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">35.71% </span>
+                <span class="strong">35.29% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>5/14</span>
+                <span class='fraction'>6/17</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">44.89% </span>
+                <span class="strong">41.42% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>22/49</span>
+                <span class='fraction'>29/70</span>
             </div>
         
             
@@ -368,7 +368,72 @@
 <a name='L303'></a><a href='#L303'>303</a>
 <a name='L304'></a><a href='#L304'>304</a>
 <a name='L305'></a><a href='#L305'>305</a>
-<a name='L306'></a><a href='#L306'>306</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L306'></a><a href='#L306'>306</a>
+<a name='L307'></a><a href='#L307'>307</a>
+<a name='L308'></a><a href='#L308'>308</a>
+<a name='L309'></a><a href='#L309'>309</a>
+<a name='L310'></a><a href='#L310'>310</a>
+<a name='L311'></a><a href='#L311'>311</a>
+<a name='L312'></a><a href='#L312'>312</a>
+<a name='L313'></a><a href='#L313'>313</a>
+<a name='L314'></a><a href='#L314'>314</a>
+<a name='L315'></a><a href='#L315'>315</a>
+<a name='L316'></a><a href='#L316'>316</a>
+<a name='L317'></a><a href='#L317'>317</a>
+<a name='L318'></a><a href='#L318'>318</a>
+<a name='L319'></a><a href='#L319'>319</a>
+<a name='L320'></a><a href='#L320'>320</a>
+<a name='L321'></a><a href='#L321'>321</a>
+<a name='L322'></a><a href='#L322'>322</a>
+<a name='L323'></a><a href='#L323'>323</a>
+<a name='L324'></a><a href='#L324'>324</a>
+<a name='L325'></a><a href='#L325'>325</a>
+<a name='L326'></a><a href='#L326'>326</a>
+<a name='L327'></a><a href='#L327'>327</a>
+<a name='L328'></a><a href='#L328'>328</a>
+<a name='L329'></a><a href='#L329'>329</a>
+<a name='L330'></a><a href='#L330'>330</a>
+<a name='L331'></a><a href='#L331'>331</a>
+<a name='L332'></a><a href='#L332'>332</a>
+<a name='L333'></a><a href='#L333'>333</a>
+<a name='L334'></a><a href='#L334'>334</a>
+<a name='L335'></a><a href='#L335'>335</a>
+<a name='L336'></a><a href='#L336'>336</a>
+<a name='L337'></a><a href='#L337'>337</a>
+<a name='L338'></a><a href='#L338'>338</a>
+<a name='L339'></a><a href='#L339'>339</a>
+<a name='L340'></a><a href='#L340'>340</a>
+<a name='L341'></a><a href='#L341'>341</a>
+<a name='L342'></a><a href='#L342'>342</a>
+<a name='L343'></a><a href='#L343'>343</a>
+<a name='L344'></a><a href='#L344'>344</a>
+<a name='L345'></a><a href='#L345'>345</a>
+<a name='L346'></a><a href='#L346'>346</a>
+<a name='L347'></a><a href='#L347'>347</a>
+<a name='L348'></a><a href='#L348'>348</a>
+<a name='L349'></a><a href='#L349'>349</a>
+<a name='L350'></a><a href='#L350'>350</a>
+<a name='L351'></a><a href='#L351'>351</a>
+<a name='L352'></a><a href='#L352'>352</a>
+<a name='L353'></a><a href='#L353'>353</a>
+<a name='L354'></a><a href='#L354'>354</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-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>
@@ -396,19 +461,29 @@
 <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">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</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-yes">1x</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-neutral">&nbsp;</span>
@@ -417,6 +492,7 @@
 <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-neutral">&nbsp;</span>
@@ -425,34 +501,35 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</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">1x</span>
 <span class="cline-any cline-yes">1x</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-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</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">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</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">1x</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">1x</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-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -462,13 +539,13 @@
 <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-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>
@@ -477,15 +554,30 @@
 <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">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</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">1x</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-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-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>
@@ -594,8 +686,6 @@
 <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-neutral">&nbsp;</span>
@@ -607,16 +697,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-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-yes">1x</span>
-<span class="cline-any cline-yes">1x</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-yes">1x</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>
@@ -626,6 +714,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>
@@ -642,13 +731,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-yes">1x</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>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -669,14 +759,21 @@
 <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></td><td class="text"><pre class="prettyprint lang-js">import React, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import axios from 'axios';
 &nbsp;
-import { sideNavExpandedStorage } from '../helpers';
+import { setSideNavExpanded, isSideNavExpanded } from '../helpers';
 import { LevelOneContent } from '../Content';
 import {
   NavLinkContainer,
@@ -686,40 +783,67 @@ import {
 } from '../Links';
 import AnimationGroup from '../AnimationGroup/AnimationGroup';
 import { PracticeDetails, IndividualDetails } from '../Details';
-import ScoreChart from '../Chart';
 import SanitizedContent from '../../SanitizedContent';
 import * as SvgComponents from '../../../lib/SvgComponents.jsx';
 import CmsSwitchLink from '../Links/CmsSwitchLink';
-import defaultContent from './default-content';
-import axios from 'axios';
+import defaultMarkup from './default-markup';
 &nbsp;
+// TODO: For an SSR version of the SideNavUI we would need to have
+// the whole SideNav markup render on the server. Less reliance on
+// window and document.
+// We can have an API created where we send it certain parameters
+// like items. All of the markup is then returned. The SideNav can
+// just render the markup provided by the Frontend Server.
+// The only code left behind would be triggers to respond to
+// toggling the sidenav's expand state
+// Things to consider when implmenting an SSR version:
+// 1. any buttons will need event listeners to trigger actions.
+// 2. we need a feature flag to roll this out since it will be
+//    a breaking change.
+// 3. we may want to consider creating a web component since they
+//    are server friendly. https://css-tricks.com/using-web-components-with-next-or-any-ssr-framework/
+// 4. If you do use web components be sure to come up with a
+//    strategy to register the web component before React loads
+//    the markup on the page. Then the web component renders
+//    immediately.
 const SideNavUI = ({
   config,
   isAltStyle,
+  isExpanded,
   items,
   onCollapsed,
   onExpanded,
-  performanceYear,
 }) =&gt; {
-  // Use localStorage value to set init state, default to true
-  const [isExpandedState, setIsExpandedState] = useState(
-    sideNavExpandedStorage.setDefault()
-  );
-  const [sideNavContent, setSideNavContent] = useState({});
+  const isExpandedPropSet = isExpanded !== undefined;
+  const [isExpandedState, setIsExpandedState] = useState(() =&gt; {
+    <span class="missing-if-branch" title="if path not taken" >I</span>if (isExpandedPropSet) {
+<span class="cstat-no" title="statement not covered" >      return isExpanded;</span>
+    }
+    return isSideNavExpanded(window.document);
+  });
+  const [sideNavContent, setSideNavContent] = useState('&lt;nav&gt;&lt;/nav&gt;');
 &nbsp;
   const collapseRef = useRef(null);
+&nbsp;
+  const changeExpandedClass = <span class="fstat-no" title="function not covered" >(c</span>urrentClass, newClass) =&gt; {
+<span class="cstat-no" title="statement not covered" >    document</span>
+      .querySelectorAll(`.${currentClass}`)
+      .forEach(<span class="fstat-no" title="function not covered" >(e</span>) =&gt; <span class="cstat-no" title="statement not covered" >e.classList.replace(currentClass, newClass))</span>;
+  };
 &nbsp;
   const expand = <span class="fstat-no" title="function not covered" >()</span> =&gt; {
-<span class="cstat-no" title="statement not covered" >    sideNavExpandedStorage.toggle();</span>
+<span class="cstat-no" title="statement not covered" >    setSideNavExpanded(window.document, 'true');</span>
 <span class="cstat-no" title="statement not covered" >    setIsExpandedState(true);</span>
+<span class="cstat-no" title="statement not covered" >    changeExpandedClass('animation-group-exit', 'animation-group-enter');</span>
 <span class="cstat-no" title="statement not covered" >    if (onExpanded) {</span>
 <span class="cstat-no" title="statement not covered" >      onExpanded();</span>
     }
   };
 &nbsp;
   const collapse = <span class="fstat-no" title="function not covered" >()</span> =&gt; {
-<span class="cstat-no" title="statement not covered" >    sideNavExpandedStorage.toggle();</span>
+<span class="cstat-no" title="statement not covered" >    setSideNavExpanded(window.document, 'false');</span>
 <span class="cstat-no" title="statement not covered" >    setIsExpandedState(false);</span>
+<span class="cstat-no" title="statement not covered" >    changeExpandedClass('animation-group-enter', 'animation-group-exit');</span>
 <span class="cstat-no" title="statement not covered" >    if (onCollapsed) {</span>
 <span class="cstat-no" title="statement not covered" >      onCollapsed();</span>
     }
@@ -730,8 +854,25 @@ const SideNavUI = ({
   };
 &nbsp;
   useEffect(() =&gt; {
+    // some applications use the isExpanded prop instead of reading the cookie
+    // this will ensure the application ignores the cookie
+    <span class="missing-if-branch" title="if path not taken" >I</span>if (isExpandedPropSet) {
+<span class="cstat-no" title="statement not covered" >      if (isExpanded) {</span>
+<span class="cstat-no" title="statement not covered" >        changeExpandedClass('animation-group-exit', 'animation-group-enter');</span>
+      } else {
+<span class="cstat-no" title="statement not covered" >        changeExpandedClass('animation-group-enter', 'animation-group-exit');</span>
+      }
+<span class="cstat-no" title="statement not covered" >      setIsExpandedState(isExpanded);</span>
+    } else {
+      isSideNavExpanded(window.document);
+    }
+  }, [isExpanded, isExpandedPropSet]);
+&nbsp;
+  useEffect(() =&gt; {
+    const initialExpandedState = isSideNavExpanded(window.document);
     let cancelRequest = false;
     const { origin } = window.location;
+    const isRunningLocally = origin.includes('localhost');
     let sideNavMenuItems;
 &nbsp;
     async function getSideNavConfig() {
@@ -739,10 +880,31 @@ const SideNavUI = ({
         const { data } = await axios.get(`${origin}/config/side-navigation`);
 <span class="cstat-no" title="statement not covered" >        sideNavMenuItems = data.markup;</span>
       } catch (error) {
-<span class="cstat-no" title="statement not covered" >        sideNavMenuItems = { content: defaultContent };</span>
+<span class="cstat-no" title="statement not covered" >        if (isRunningLocally) {</span>
+<span class="cstat-no" title="statement not covered" >          sideNavMenuItems = defaultMarkup;</span>
+        } else {
+<span class="cstat-no" title="statement not covered" >          sideNavMenuItems = '&lt;nav&gt;&lt;/nav&gt;';</span>
+        }
       }
 <span class="cstat-no" title="statement not covered" >      if (!cancelRequest) {</span>
-<span class="cstat-no" title="statement not covered" >        setSideNavContent(sideNavMenuItems);</span>
+        const realInitialState = <span class="cstat-no" title="statement not covered" >isExpandedPropSet</span>
+          ? isExpanded
+          : initialExpandedState;
+<span class="cstat-no" title="statement not covered" >        if (realInitialState) {</span>
+<span class="cstat-no" title="statement not covered" >          setSideNavContent(sideNavMenuItems);</span>
+        } else {
+          // TODO: we are replacing the class here because the server does not take into account the
+          // initial expand/collapse state of the sidenav.
+          // Once we have confirmation that everyone has installed this version of QPP-Style we can
+          // remove this if/else block (assuming the server has been updated to read the cookie and
+          // render the appropriate class for each link)
+<span class="cstat-no" title="statement not covered" >          setSideNavContent(</span>
+            sideNavMenuItems.replaceAll(
+              'animation-group-enter',
+              'animation-group-exit',
+            ),
+          );
+        }
       }
     }
     getSideNavConfig();
@@ -767,6 +929,7 @@ const SideNavUI = ({
 &nbsp;
     const itemsMarkup = <span class="cstat-no" title="statement not covered" >(contentItems || []).map(<span class="fstat-no" title="function not covered" >(i</span>tem, index) =&gt; {</span>
       const key = <span class="cstat-no" title="statement not covered" >`${JSON.stringify(item)}-${index}-${containerRecursionId}`;</span>
+&nbsp;
 <span class="cstat-no" title="statement not covered" >      return (</span>
         {
           divider: (
@@ -781,7 +944,7 @@ const SideNavUI = ({
           container: getDynamicContent(
             item.items,
             item.className,
-            containerRecursionId + 1
+            containerRecursionId + 1,
           ),
           linkBack: (
             &lt;AnimationGroup display={isExpandedState} key={key}&gt;
@@ -824,6 +987,7 @@ const SideNavUI = ({
                 {...(!item.vgId ? {} : { vgId: item.vgId })}
                 {...(!item.cpcPlusId ? {} : { cpcPlusId: item.cpcPlusId })}
                 {...(!item.pcfId ? {} : { pcfId: item.pcfId })}
+                {...(!item.subgroupId ? {} : { subgroupId: item.subgroupId })}
               /&gt;
             &lt;/AnimationGroup&gt;
           ),
@@ -865,15 +1029,6 @@ const SideNavUI = ({
               /&gt;
             &lt;/AnimationGroup&gt;
           ),
-          chart: (
-            &lt;AnimationGroup display={isExpandedState} key={key}&gt;
-              &lt;ScoreChart
-                chartData={item.chartData}
-                linkCallback={linkCallback}
-                performanceYear={performanceYear}
-              /&gt;
-            &lt;/AnimationGroup&gt;
-          ),
           switchLink: (
             &lt;AnimationGroup display={isExpandedState} key={key}&gt;
               &lt;CmsSwitchLink
@@ -915,11 +1070,6 @@ const SideNavUI = ({
 <span class="cstat-no" title="statement not covered" >      return &lt;div className={className}&gt;{itemsMarkup}&lt;/div&gt;;</span>
     }
   };
-&nbsp;
-  // Set side nav expanded state in localStorage on initial render
-  useEffect(() =&gt; {
-    sideNavExpandedStorage.init();
-  }, []);
 &nbsp;
   const content = !items?.length ? (
     &lt;LevelOneContent
@@ -930,7 +1080,7 @@ const SideNavUI = ({
   ) : (
 <span class="branch-1 cbranch-no" title="branch not covered" >    getDynamicContent(</span>
       items,
-      'sidebar-content' + (isAltStyle ? ' alt-style' : '')
+      'sidebar-content' + (isAltStyle ? ' alt-style' : ''),
     )
   );
 &nbsp;
@@ -954,27 +1104,21 @@ const SideNavUI = ({
 };
 &nbsp;
 SideNavUI.propTypes = {
-  currentLevel: PropTypes.number,
-  onExpanded: PropTypes.func,
-  onCollapsed: PropTypes.func,
-  chartData: PropTypes.object,
   config: PropTypes.object,
-  items: PropTypes.object,
   isAltStyle: PropTypes.bool,
-  showReportingLinks: PropTypes.bool,
-  performanceYear: PropTypes.string,
+  isExpanded: PropTypes.bool,
+  items: PropTypes.object,
+  onCollapsed: PropTypes.func,
+  onExpanded: PropTypes.func,
 };
 &nbsp;
 SideNavUI.defaultProps = {
-  currentLevel: 1,
-  onExpanded: <span class="fstat-no" title="function not covered" >()</span> =&gt; {},
-  onCollapsed: <span class="fstat-no" title="function not covered" >()</span> =&gt; {},
-  chartData: {},
   config: {},
-  items: null,
   isAltStyle: false,
-  showReportingLinks: false,
-  performanceYear: '2017',
+  isExpanded: undefined,
+  items: null,
+  onCollapsed: <span class="fstat-no" title="function not covered" >()</span> =&gt; {},
+  onExpanded: <span class="fstat-no" title="function not covered" >()</span> =&gt; {},
 };
 &nbsp;
 export default SideNavUI;
@@ -985,7 +1129,7 @@ export default SideNavUI;
             <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 2023-05-08T18:31:29.023Z
+                at 2023-09-08T00:45:02.387Z
             </div>
         <script src="../../../../prettify.js"></script>
         <script>