npm - qpp-style - Versions diffs - 9.22.2 → 9.22.3 - Mend

qpp-style 9.22.2 → 9.22.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (195) hide show

package/coverage/lcov-report/components/{Footer/LegacyFooterUI.jsx.html → Header/HeaderUI.jsx.html} RENAMED Viewed

@@ -3,7 +3,7 @@
 <html lang="en">
 <head>
-    <title>Code coverage report for components/Footer/LegacyFooterUI.jsx</title>
+    <title>Code coverage report for components/Header/HeaderUI.jsx</title>
     <meta charset="utf-8" />
     <link rel="stylesheet" href="../../prettify.css" />
     <link rel="stylesheet" href="../../base.css" />
@@ -19,34 +19,34 @@
 <body>
 <div class='wrapper'>
     <div class='pad1'>
-        <h1><a href="../../index.html">All files</a> / <a href="index.html">components/Footer</a> LegacyFooterUI.jsx</h1>
+        <h1><a href="../../index.html">All files</a> / <a href="index.html">components/Header</a> HeaderUI.jsx</h1>
         <div class='clearfix'>
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">70.73% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>4/4</span>
+                <span class='fraction'>29/41</span>
             </div>
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">60% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>8/8</span>
+                <span class='fraction'>6/10</span>
             </div>
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">46.66% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>1/1</span>
+                <span class='fraction'>7/15</span>
             </div>
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">75% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>4/4</span>
+                <span class='fraction'>27/36</span>
             </div>
@@ -61,7 +61,7 @@
             </div>
         </template>
     </div>
-    <div class='status-line high'></div>
+    <div class='status-line medium'></div>
     <pre><table class="coverage">
 <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
 <a name='L2'></a><a href='#L2'>2</a>
@@ -222,112 +222,7 @@
 <a name='L157'></a><a href='#L157'>157</a>
 <a name='L158'></a><a href='#L158'>158</a>
 <a name='L159'></a><a href='#L159'>159</a>
-<a name='L160'></a><a href='#L160'>160</a>
-<a name='L161'></a><a href='#L161'>161</a>
-<a name='L162'></a><a href='#L162'>162</a>
-<a name='L163'></a><a href='#L163'>163</a>
-<a name='L164'></a><a href='#L164'>164</a>
-<a name='L165'></a><a href='#L165'>165</a>
-<a name='L166'></a><a href='#L166'>166</a>
-<a name='L167'></a><a href='#L167'>167</a>
-<a name='L168'></a><a href='#L168'>168</a>
-<a name='L169'></a><a href='#L169'>169</a>
-<a name='L170'></a><a href='#L170'>170</a>
-<a name='L171'></a><a href='#L171'>171</a>
-<a name='L172'></a><a href='#L172'>172</a>
-<a name='L173'></a><a href='#L173'>173</a>
-<a name='L174'></a><a href='#L174'>174</a>
-<a name='L175'></a><a href='#L175'>175</a>
-<a name='L176'></a><a href='#L176'>176</a>
-<a name='L177'></a><a href='#L177'>177</a>
-<a name='L178'></a><a href='#L178'>178</a>
-<a name='L179'></a><a href='#L179'>179</a>
-<a name='L180'></a><a href='#L180'>180</a>
-<a name='L181'></a><a href='#L181'>181</a>
-<a name='L182'></a><a href='#L182'>182</a>
-<a name='L183'></a><a href='#L183'>183</a>
-<a name='L184'></a><a href='#L184'>184</a>
-<a name='L185'></a><a href='#L185'>185</a>
-<a name='L186'></a><a href='#L186'>186</a>
-<a name='L187'></a><a href='#L187'>187</a>
-<a name='L188'></a><a href='#L188'>188</a>
-<a name='L189'></a><a href='#L189'>189</a>
-<a name='L190'></a><a href='#L190'>190</a>
-<a name='L191'></a><a href='#L191'>191</a>
-<a name='L192'></a><a href='#L192'>192</a>
-<a name='L193'></a><a href='#L193'>193</a>
-<a name='L194'></a><a href='#L194'>194</a>
-<a name='L195'></a><a href='#L195'>195</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-yes">1x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">5x</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-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-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>
+<a name='L160'></a><a href='#L160'>160</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>
@@ -339,6 +234,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-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>
@@ -348,25 +244,44 @@
 <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">3x</span>
+<span class="cline-any cline-yes">3x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">3x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">3x</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-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-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-yes">3x</span>
+<span class="cline-any cline-yes">2x</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-yes">2x</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-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">3x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">3x</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>
@@ -375,6 +290,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-yes">3x</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>
@@ -387,6 +304,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-yes">3x</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>
@@ -394,12 +313,15 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</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>
@@ -407,6 +329,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>
@@ -416,14 +339,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">3x</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-yes">3x</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-yes">3x</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">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>
@@ -436,6 +366,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-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>
@@ -444,207 +375,171 @@
 <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></td><td class="text"><pre class="prettyprint lang-js">import React from 'react';
+<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';
-import InfoTip from '../Infotip/Infotip';
+import axios from 'axios';
+import HeaderAccountMenu from './HeaderAccountMenu.jsx';
+import HeaderCancel from './HeaderCancel.jsx';
+import HeaderContainer from './HeaderContainer';
+import HeaderMenuItem from './HeaderMenuItem';
+import HeaderMobileButton from './HeaderMobileButton';
+import ImpersonatorBanner from './ImpersonatorBanner';
+import HelpIcon from './HelpIcon';
+import { HeaderStateProvider } from './hooks';
 &nbsp;
-const infoTipLabel =
-  'When dialing 711, you will automatically be connected to a TRS Communications Assistant who will relay your conversation to the help desk agent with strict confidentiality.';
+const HeaderUI = ({
+  handleCancel,
+  includeSkipToSidebar,
+  isDevPre,
+  isLoginEnabled,
+  showCancelButton,
+  skipToContentId,
+  RouterLink,
+  isIESupportPage,
+}) =&gt; {
+  const [isMobileMenuExpanded, setIsMobileMenuExpanded] = useState(false);
+  const [headerContent, setHeaderContent] = useState({});
 &nbsp;
-const LegacyFooterUI = ({ buildVersion, isFullWidth, signUpNowLink }) =&gt; {
-  return (
-    &lt;footer className="legacy-footer"&gt;
-      &lt;div className="build-version" id="build-version"&gt;
-        {buildVersion}
-      &lt;/div&gt;
-      &lt;div className="banner"&gt;
-        &lt;div
-          className={
-            isFullWidth ? 'container-full-width' : 'responsive-container'
-          }
-        &gt;
-          &lt;div className="row"&gt;
-            &lt;div className="col-sm-12 col-md-12 col-lg-12"&gt;
-              &lt;span&gt;Help shape the future of QPP&lt;/span&gt; by participating in user
-              feedback sessions.{' '}
-              &lt;a className="email-note-link" href={signUpNowLink}&gt;
-                Send us an email to sign up
-              &lt;/a&gt;
-            &lt;/div&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div
-        className={
-          isFullWidth ? 'container-full-width' : 'responsive-container'
-        }
+  const mapContentToRows = (config) =&gt; {
+    // Append transposed array to content
+    return config?.map((section) =&gt; {
+      // Only header items with multiple columns need to be transposed
+      // Single column menus' tab order will remain the same
+      <span class="missing-if-branch" title="if path not taken" >I</span>if (section.columns?.length &gt; 1) {
+        const { columns } = <span class="cstat-no" title="statement not covered" >section;</span>
+<span class="cstat-no" title="statement not covered" >        return {</span>
+          ...section,
+          rows: columns[0].map(<span class="fstat-no" title="function not covered" >(_</span>, colIndex) =&gt;
+<span class="cstat-no" title="statement not covered" >            columns.map(<span class="fstat-no" title="function not covered" >(r</span>ow) =&gt; <span class="cstat-no" title="statement not covered" >row[colIndex])</span></span>
+          ),
+        };
+      }
+      return { ...section, rows: section.columns };
+    });
+  };
+&nbsp;
+  // execute on init render
+  useEffect(async () =&gt; {
+    let cancelRequest = false;
+    const { origin } = window.location;
+    const {
+      data: { data: navMenuItems },
+    } = await axios.get(`${origin}/config/header`);
+    <span class="missing-if-branch" title="else path not taken" >E</span>if (!cancelRequest) setHeaderContent(navMenuItems);
+    return <span class="fstat-no" title="function not covered" >()</span> =&gt; {
+<span class="cstat-no" title="statement not covered" >      cancelRequest = true;</span>
+    };
+  }, []);
+&nbsp;
+  const content = mapContentToRows(headerContent?.content);
+&nbsp;
+  const displayCancelContent = <span class="fstat-no" title="function not covered" >()</span> =&gt; (
+<span class="cstat-no" title="statement not covered" >    &lt;HeaderContainer</span>
+      showCancelButton
+      skipToContentId={skipToContentId}
+      includeSkipToSidebar={includeSkipToSidebar}
+    &gt;
+      &lt;HeaderCancel handleCancel={handleCancel} /&gt;
+    &lt;/HeaderContainer&gt;
+  );
+&nbsp;
+  const displayDevPreContent = <span class="fstat-no" title="function not covered" >()</span> =&gt; (
+<span class="cstat-no" title="statement not covered" >    &lt;HeaderContainer</span>
+      isIESupportPage={isIESupportPage}
+      skipToContentId={skipToContentId}
+      includeSkipToSidebar={includeSkipToSidebar}
+    &gt;
+      &lt;nav aria-label="Primary navigation" hidden={!isMobileMenuExpanded}&gt;
+        &lt;ul className="navigation-menu"&gt;
+          &lt;HeaderAccountMenu isDevPre isLoginEnabled={isLoginEnabled} /&gt;
+        &lt;/ul&gt;
+      &lt;/nav&gt;
+    &lt;/HeaderContainer&gt;
+  );
+&nbsp;
+  const displayHeaderContent = () =&gt; (
+    &lt;&gt;
+      &lt;HeaderContainer
+        isIESupportPage={isIESupportPage}
+        skipToContentId={skipToContentId}
+        includeSkipToSidebar={includeSkipToSidebar}
       &gt;
-        &lt;div className="row"&gt;
-          &lt;div
-            className={
-              isFullWidth
-                ? 'col-sm-12 col-md-8 col-lg-8'
-                : 'col-sm-8 col-md-9 col-lg-9'
-            }
-          &gt;
-            &lt;div className="logo-container"&gt;
-              &lt;img
-                src="/images/qpp_logo_reversed.png"
-                alt="Quality Payment Program"
-                className="qpp-logo"
-              /&gt;
-              &lt;div className="social-container"&gt;
-                &lt;a
-                  rel="noopener noreferrer"
-                  target="_blank"
-                  className="social-link"
-                  href="https://twitter.com/CMSGov"
-                  aria-label="Follow us on Twitter. This link opens in a new window."
-                &gt;
-                  &lt;span className="glyphicon glyphicon-twitter"&gt;&lt;/span&gt;
-                &lt;/a&gt;
-                &lt;a
-                  rel="noopener noreferrer"
-                  target="_blank"
-                  className="social-link"
-                  href="https://www.youtube.com/playlist?list=PLaV7m2-zFKpj_6fBsqav6GvFzzq9oOpkk"
-                  aria-label="Follow us on YouTube. This link opens in a new window."
-                &gt;
-                  &lt;span className="glyphicon glyphicon-youtube"&gt;&lt;/span&gt;
-                &lt;/a&gt;
-              &lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div className="links"&gt;
-              &lt;ul&gt;
-                &lt;li&gt;
-                  &lt;a
-                    href="/developers"
-                    data-track-category="FooterNav"
-                    data-track-action="OpenDeveloperTools"
-                    data-track-label="Quality Payment Program"
-                  &gt;
-                    Developer Tools
-                  &lt;/a&gt;
-                &lt;/li&gt;
-                &lt;li&gt;
-                  &lt;a
-                    href="/about/resource-library"
-                    data-track-category="FooterNav"
-                    data-track-action="OpenEducationAndTools"
-                    data-track-label="Education and Tools"
-                  &gt;
-                    Resource Library
-                  &lt;/a&gt;
-                &lt;/li&gt;
-                &lt;li&gt;
-                  &lt;a
-                    href="/glossary"
-                    data-track-category="FooterNav"
-                    data-track-action="OpenGlossary"
-                    data-track-label="Glossary"
-                  &gt;
-                    Glossary
-                  &lt;/a&gt;
-                &lt;/li&gt;
-                &lt;li&gt;
-                  &lt;a
-                    href="/resources/help-and-support"
-                    data-track-category="FooterNav"
-                    data-track-action="OpenHelpAndSupport"
-                    data-track-label="Help and Support"
-                  &gt;
-                    Help and Support
-                  &lt;/a&gt;
-                &lt;/li&gt;
-              &lt;/ul&gt;
-              &lt;ul className="small"&gt;
-                &lt;li&gt;
-                  &lt;a
-                    href="/privacy"
-                    data-track-category="FooterNav"
-                    data-track-action="OpenPrivacyDisclaimer"
-                    data-track-label="Notice of Privacy and Disclaimer"
-                  &gt;
-                    CMS Privacy Notice
-                  &lt;/a&gt;
-                &lt;/li&gt;
-                &lt;span className="divider"&gt;&lt;/span&gt;
-                &lt;li&gt;
-                  &lt;a
-                    href="/accessibility"
-                    data-track-category="FooterNav"
-                    data-track-action="OpenAccessibility"
-                    data-track-label="Accessibility"
-                  &gt;
-                    Accessibility
-                  &lt;/a&gt;
-                &lt;/li&gt;
-                &lt;span className="divider"&gt;&lt;/span&gt;
-                &lt;li&gt;
-                  &lt;a
-                    className="adobe-link"
-                    rel="noopener noreferrer"
-                    target="_blank"
-                    href="https://get.adobe.com/reader"
-                    data-track-category="FooterNav"
-                    data-track-action="DownloadAdobeReader"
-                    data-track-label="AdobeReader"
-                  &gt;
-                    &lt;svg className="icon"&gt;
-                      &lt;use xlinkHref="#icon-download" /&gt;
-                    &lt;/svg&gt;
-                    Download Adobe Reader
-                  &lt;/a&gt;
-                &lt;/li&gt;
-                &lt;span className="divider"&gt;&lt;/span&gt;
-                &lt;li&gt;
-                  &lt;a href="mailto:QPP@cms.hhs.gov" className="email-link"&gt;
-                    QPP@cms.hhs.gov
-                  &lt;/a&gt;
-                &lt;/li&gt;
-                &lt;li&gt;
-                  1-866-288-8292 (TRS: 711)
-                  &lt;div className="footer-trs-infotip"&gt;
-                    &lt;InfoTip lightIcon label={infoTipLabel} /&gt;
-                  &lt;/div&gt;
-                &lt;/li&gt;
-              &lt;/ul&gt;
-            &lt;/div&gt;
-          &lt;/div&gt;
-          &lt;div
-            className={
-              isFullWidth
-                ? 'col-sm-12 col-md-4 col-lg-4'
-                : 'col-sm-4 col-md-3 col-lg-3'
-            }
-          &gt;
-            &lt;div className="hhs-logo-container"&gt;
-              &lt;img
-                alt="Department of Health &amp;amp; Human Services USA"
-                src="/images/hhs-logo-white.svg"
+        &lt;HelpIcon /&gt;
+        &lt;HeaderMobileButton
+          handleClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >setIsMobileMenuExpanded(!isMobileMenuExpanded)}</span>
+          isMobileMenuExpanded={isMobileMenuExpanded}
+        /&gt;
+        &lt;nav aria-label="Primary navigation" hidden={!isMobileMenuExpanded}&gt;
+          &lt;ul className="navigation-menu navigation-new-style"&gt;
+            {content.map((header) =&gt; (
+              &lt;HeaderMenuItem
+                handleClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; {
+<span class="cstat-no" title="statement not covered" >                  setIsMobileMenuExpanded(!isMobileMenuExpanded);</span>
+                }}
+                isMobileMenuExpanded={isMobileMenuExpanded}
+                key={header.name}
+                {...header}
               /&gt;
-            &lt;/div&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-    &lt;/footer&gt;
+            ))}
+            &lt;HeaderAccountMenu
+              handleClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >setIsMobileMenuExpanded(!isMobileMenuExpanded)}</span>
+              isLoginEnabled={isLoginEnabled}
+            /&gt;
+          &lt;/ul&gt;
+        &lt;/nav&gt;
+      &lt;/HeaderContainer&gt;
+      &lt;ImpersonatorBanner /&gt;
+    &lt;/&gt;
+  );
+&nbsp;
+  const displayContent = () =&gt; {
+    <span class="missing-if-branch" title="if path not taken" >I</span>if (showCancelButton) <span class="cstat-no" title="statement not covered" >return displayCancelContent();</span>
+    <span class="missing-if-branch" title="if path not taken" >I</span>if (isDevPre) <span class="cstat-no" title="statement not covered" >return displayDevPreContent();</span>
+    if (content?.length) return displayHeaderContent();
+    return null;
+  };
+&nbsp;
+  return (
+    &lt;HeaderStateProvider RouterLink={RouterLink} headerContent={headerContent}&gt;
+      {displayContent()}
+    &lt;/HeaderStateProvider&gt;
   );
 };
 &nbsp;
-LegacyFooterUI.propTypes = {
-  buildVersion: PropTypes.string,
-  isFullWidth: PropTypes.bool,
-  signUpNowLink: PropTypes.string,
+HeaderUI.propTypes = {
+  handleCancel: PropTypes.func,
+  includeSkipToSidebar: PropTypes.bool,
+  isDevPre: PropTypes.bool,
+  isLoginEnabled: PropTypes.bool,
+  performanceYear: PropTypes.number,
+  showCancelButton: PropTypes.bool,
+  showPhysicianCompareLink: PropTypes.bool,
+  showFacilityBasedPreviewLink: PropTypes.bool,
+  skipToContentId: PropTypes.string,
+  RouterLink: PropTypes.func,
+  isIESupportPage: PropTypes.bool,
+};
+HeaderUI.defaultProps = {
+  handleCancel: Function.prototype,
+  includeSkipToSidebar: false,
+  isDevPre: false,
+  isLoginEnabled: true,
+  performanceYear: 2017,
+  showCancelButton: false,
+  showPhysicianCompareLink: false,
+  showFacilityBasedPreviewLink: false,
+  skipToContentId: null,
+  RouterLink: null,
+  isIESupportPage: false,
 };
 &nbsp;
-export default LegacyFooterUI;
+export default HeaderUI;
 &nbsp;</pre></td></tr></table></pre>
                 <div class='push'></div><!-- for sticky footer -->
@@ -652,7 +547,7 @@ export default LegacyFooterUI;
             <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 Fri Apr 29 2022 13:58:50 GMT-0400 (Eastern Daylight Time)
+                at Tue Nov 29 2022 19:35:20 GMT-0800 (Pacific Standard Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>