qpp-style 9.44.1 → 9.44.2

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

@@ -23,16 +23,16 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">27.27% </span>
+                <span class="strong">20% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>3/11</span>
+                <span class='fraction'>3/15</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/12</span>
+                <span class='fraction'>0/21</span>
             </div>
         
             
@@ -44,9 +44,9 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">27.27% </span>
+                <span class="strong">20% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>3/11</span>
+                <span class='fraction'>3/15</span>
             </div>
         
             
@@ -139,7 +139,24 @@
 <a name='L74'></a><a href='#L74'>74</a>
 <a name='L75'></a><a href='#L75'>75</a>
 <a name='L76'></a><a href='#L76'>76</a>
-<a name='L77'></a><a href='#L77'>77</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L77'></a><a href='#L77'>77</a>
+<a name='L78'></a><a href='#L78'>78</a>
+<a name='L79'></a><a href='#L79'>79</a>
+<a name='L80'></a><a href='#L80'>80</a>
+<a name='L81'></a><a href='#L81'>81</a>
+<a name='L82'></a><a href='#L82'>82</a>
+<a name='L83'></a><a href='#L83'>83</a>
+<a name='L84'></a><a href='#L84'>84</a>
+<a name='L85'></a><a href='#L85'>85</a>
+<a name='L86'></a><a href='#L86'>86</a>
+<a name='L87'></a><a href='#L87'>87</a>
+<a name='L88'></a><a href='#L88'>88</a>
+<a name='L89'></a><a href='#L89'>89</a>
+<a name='L90'></a><a href='#L90'>90</a>
+<a name='L91'></a><a href='#L91'>91</a>
+<a name='L92'></a><a href='#L92'>92</a>
+<a name='L93'></a><a href='#L93'>93</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>
@@ -164,12 +181,17 @@
 <span class="cline-any cline-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-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-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -199,6 +221,14 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -207,6 +237,7 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -215,13 +246,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-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React from "react";
 import PropTypes from "prop-types";
 &nbsp;
 import HeaderLogo from "./HeaderLogo";
 import NotificationBanner from "../NotificationBanner";
 import GovBanner from "../GovBanner";
-import { useHeaderState } from "./hooks";
+import { useHeaderState, useWindowWidth } from "./hooks";
+import HeaderSearchBar from "../HeaderSearchBar";
 /**
  * Accessibility enhancement that moves focus to an element for "Skip" links
  * @param {Object} e - The native JS event
@@ -239,13 +272,18 @@ const HeaderContainer = <span class="fstat-no" title="function not covered" >({<
   skipToContentId,
   isIESupportPage,
   isDevPre,
+  showSearchBar,
 }) =&gt; {
+  const windowWidth = <span class="cstat-no" title="statement not covered" >useWindowWidth();</span>
   const { currentOpenMenu } = <span class="cstat-no" title="statement not covered" >useHeaderState();</span>
-  const cssCancelBtn = <span class="cstat-no" title="statement not covered" >showCancelButton ? "show-cancel-button" : "";</span>
+  const showSearch = <span class="cstat-no" title="statement not covered" >showSearchBar === "true";</span>
+  const cssCancelBtn = <span class="cstat-no" title="statement not covered" >showCancelButton ? "show-cancel-button " : "";</span>
   const cssMenuDropdownStatus =
 <span class="cstat-no" title="statement not covered" >    currentOpenMenu === ""</span>
       ? "header-dropdown--closed"
       : "header-dropdown--open";
+  const cssSearchBar = <span class="cstat-no" title="statement not covered" >showSearch ? " header-height" : "";</span>
+  const headerClasses = <span class="cstat-no" title="statement not covered" >`${cssCancelBtn}${cssMenuDropdownStatus}${cssSearchBar}`;</span>
 &nbsp;
 <span class="cstat-no" title="statement not covered" >  return (</span>
     &lt;&gt;
@@ -267,9 +305,17 @@ const HeaderContainer = <span class="fstat-no" title="function not covered" >({<
       )}
       &lt;GovBanner /&gt;
       {!isIESupportPage &amp;&amp; &lt;NotificationBanner /&gt;}
-      &lt;header id="top" className={`${cssCancelBtn} ${cssMenuDropdownStatus}`}&gt;
-        &lt;HeaderLogo isDevPre={isDevPre} /&gt;
-        {children}
+      &lt;header id="top" className={headerClasses}&gt;
+        {!showCancelButton &amp;&amp; showSearch &amp;&amp; windowWidth &gt; 767 ? (
+          &lt;HeaderSearchBar /&gt;
+        ) : null}
+        &lt;&gt;
+          &lt;HeaderLogo
+            isDevPre={isDevPre}
+            hasSearchBar={showSearch &amp;&amp; !showCancelButton}
+          /&gt;
+          {children}
+        &lt;/&gt;
       &lt;/header&gt;
     &lt;/&gt;
   );
@@ -282,12 +328,14 @@ HeaderContainer.propTypes = {
   skipToContentId: PropTypes.string,
   isIESupportPage: PropTypes.bool,
   isDevPre: PropTypes.object,
+  showSearchBar: PropTypes.bool,
 };
 HeaderContainer.defaultProps = {
   includeSkipToSidebar: false,
   showCancelButton: false,
   skipToContentId: null,
   isIESupportPage: false,
+  showSearchBar: false,
 };
 &nbsp;
 export default HeaderContainer;
@@ -298,7 +346,7 @@ export default HeaderContainer;
             <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 2024-06-06T15:24:30.092Z
+                at 2024-03-21T19:29:13.871Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -23,16 +23,16 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">22.22% </span>
+                <span class="strong">20% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>2/9</span>
+                <span class='fraction'>2/10</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/4</span>
+                <span class='fraction'>0/6</span>
             </div>
         
             
@@ -44,9 +44,9 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">22.22% </span>
+                <span class="strong">20% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>2/9</span>
+                <span class='fraction'>2/10</span>
             </div>
         
             
@@ -123,7 +123,9 @@
 <a name='L58'></a><a href='#L58'>58</a>
 <a name='L59'></a><a href='#L59'>59</a>
 <a name='L60'></a><a href='#L60'>60</a>
-<a name='L61'></a><a href='#L61'>61</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L61'></a><a href='#L61'>61</a>
+<a name='L62'></a><a href='#L62'>62</a>
+<a name='L63'></a><a href='#L63'>63</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>
@@ -133,6 +135,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>
@@ -183,17 +186,19 @@
 <span class="cline-any cline-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";
 import PropTypes from "prop-types";
 &nbsp;
 import { useHeaderState } from "./hooks";
 &nbsp;
-const HeaderLogo = <span class="fstat-no" title="function not covered" >(i</span>sDevPre) =&gt; {
+const HeaderLogo = <span class="fstat-no" title="function not covered" >({</span> isDevPre, hasSearchBar }) =&gt; {
   const { closeMenus, RouterLink } = <span class="cstat-no" title="statement not covered" >useHeaderState();</span>
-  const showDevPre = <span class="cstat-no" title="statement not covered" >isDevPre.isDevPre;</span>
-<span class="cstat-no" title="statement not covered" >  if (showDevPre) {</span>
+  const searchHeaderClass = <span class="cstat-no" title="statement not covered" >hasSearchBar ? " header-logo-search" : "";</span>
+  const headerLogoClass = <span class="cstat-no" title="statement not covered" >`header-logo${searchHeaderClass}`;</span>
+<span class="cstat-no" title="statement not covered" >  if (isDevPre) {</span>
 <span class="cstat-no" title="statement not covered" >    return (</span>
-      &lt;div className="header-logo"&gt;
+      &lt;div className={headerLogoClass}&gt;
         &lt;img
           className="qpp-logo"
           src="/images/qpp_logo_rgb_color.png"
@@ -205,7 +210,7 @@ const HeaderLogo = <span class="fstat-no" title="function not covered" >(i</span
 <span class="cstat-no" title="statement not covered" >  if (RouterLink) {</span>
 <span class="cstat-no" title="statement not covered" >    return (</span>
       &lt;RouterLink
-        className="header-logo"
+        className={headerLogoClass}
         to="/"
         onClick={closeMenus}
         data-track-category="HeaderNav"
@@ -223,7 +228,7 @@ const HeaderLogo = <span class="fstat-no" title="function not covered" >(i</span
 &nbsp;
 <span class="cstat-no" title="statement not covered" >  return (</span>
     &lt;a
-      className="header-logo"
+      className={headerLogoClass}
       href="/"
       data-track-category="HeaderNav"
       data-track-action="OpenQPPHome"
@@ -239,7 +244,8 @@ const HeaderLogo = <span class="fstat-no" title="function not covered" >(i</span
 };
 &nbsp;
 HeaderLogo.propTypes = {
-  isDevPre: PropTypes.object,
+  isDevPre: PropTypes.bool,
+  hasSearchBar: PropTypes.bool,
 };
 &nbsp;
 export default HeaderLogo;
@@ -250,7 +256,7 @@ export default HeaderLogo;
             <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 2024-06-06T15:24:30.092Z
+                at 2024-03-21T19:29:13.871Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/Header/HeaderMenuButton.js.html

@@ -220,7 +220,7 @@ export default HeaderMenuButton;
             <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 2024-06-06T15:24:30.092Z
+                at 2024-03-21T19:29:13.871Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -644,7 +644,7 @@ const HeaderMenuItem = <span class="fstat-no" title="function not covered" >({</
       &lt;button
         ref={menuButtonRef}
         className="menu-dropdown-toggle"
-        aria-label={`${name} navigation dropdown`}
+        aria-label={`${name} ${subtitle} navigation dropdown`}
         aria-expanded={isOpen}
         aria-controls={`nav-section-${menuIdentifier}`}
         data-toggle="dropdown"
@@ -787,7 +787,7 @@ export default HeaderMenuItem;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-06-06T15:24:30.092Z
+                at 2024-03-21T19:29:13.871Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/Header/HeaderMenuLink.js.html

@@ -23,9 +23,9 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">21.42% </span>
+                <span class="strong">26.66% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>3/14</span>
+                <span class='fraction'>4/15</span>
             </div>
         
             
@@ -44,9 +44,9 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">23.07% </span>
+                <span class="strong">28.57% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>3/13</span>
+                <span class='fraction'>4/14</span>
             </div>
         
             
@@ -124,7 +124,7 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">2x</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>
@@ -177,10 +177,10 @@
 <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";
 import PropTypes from "prop-types";
-import { submissionsUrl } from "../SideNav/helpers";
 import { useHeaderState } from "./hooks";
 import { setUtagLink } from "./utag-helpers";
 &nbsp;
+const submissionsUrl = "/user/submissions";
 // exclude submissions urls
 const isNotExcluded = <span class="fstat-no" title="function not covered" >(h</span>ref) =&gt; <span class="cstat-no" title="statement not covered" >!href.includes(submissionsUrl);</span>
 &nbsp;
@@ -238,7 +238,7 @@ export default HeaderMenuLink;
             <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 2024-06-06T15:24:30.092Z
+                at 2024-03-21T19:29:13.871Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/Header/HeaderMenuSignOutButton.js.html

@@ -256,7 +256,7 @@ export default HeaderMenuSignOutButton;
             <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 2024-06-06T15:24:30.092Z
+                at 2024-03-21T19:29:13.871Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/Header/HeaderMobileButton.js.html

@@ -181,7 +181,7 @@ export default HeaderMobileButton;
             <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 2024-06-06T15:24:30.092Z
+                at 2024-03-21T19:29:13.871Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -23,16 +23,16 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">6.66% </span>
+                <span class="strong">6.25% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>3/45</span>
+                <span class='fraction'>3/48</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/10</span>
+                <span class='fraction'>0/14</span>
             </div>
         
             
@@ -44,9 +44,9 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">7.5% </span>
+                <span class="strong">6.97% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>3/40</span>
+                <span class='fraction'>3/43</span>
             </div>
         
             
@@ -231,7 +231,10 @@
 <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></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<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></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>
@@ -256,6 +259,7 @@
 <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>
@@ -284,6 +288,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-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -296,14 +301,15 @@
 <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-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-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -321,7 +327,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-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>
@@ -331,6 +336,7 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -401,15 +407,15 @@
 <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";
-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 HeaderSearchBar from "../HeaderSearchBar";
 import HelpIcon from "./HelpIcon";
-import { HeaderStateProvider } from "./hooks";
+import { HeaderStateProvider, useWindowWidth } from "./hooks";
 import defaultContent from "./default-content.json";
 &nbsp;
 const HeaderUI = <span class="fstat-no" title="function not covered" >({</span>
@@ -424,6 +430,7 @@ const HeaderUI = <span class="fstat-no" title="function not covered" >({</span>
 }) =&gt; {
   const [isMobileMenuExpanded, setIsMobileMenuExpanded] = <span class="cstat-no" title="statement not covered" >useState(false);</span>
   const [headerContent, setHeaderContent] = <span class="cstat-no" title="statement not covered" >useState({});</span>
+  const windowWidth = <span class="cstat-no" title="statement not covered" >useWindowWidth();</span>
 &nbsp;
   const mapContentToRows = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(c</span>onfig) =&gt; {</span>
     // Append transposed array to content
@@ -450,7 +457,8 @@ const HeaderUI = <span class="fstat-no" title="function not covered" >({</span>
     let navMenuItems;
     async function <span class="fstat-no" title="function not covered" >getHeaderConfig(</span>) {
 <span class="cstat-no" title="statement not covered" >      try {</span>
-        const { data } = <span class="cstat-no" title="statement not covered" >await axios.get(`${origin}/config/header`);</span>
+        const response = <span class="cstat-no" title="statement not covered" >await fetch(`${origin}/config/header`);</span>
+        const data = <span class="cstat-no" title="statement not covered" >await response.json();</span>
 <span class="cstat-no" title="statement not covered" >        navMenuItems = data.data;</span>
       } catch (error) {
 <span class="cstat-no" title="statement not covered" >        navMenuItems = { content: defaultContent };</span>
@@ -464,22 +472,22 @@ const HeaderUI = <span class="fstat-no" title="function not covered" >({</span>
   }, []);
 &nbsp;
   const content = <span class="cstat-no" title="statement not covered" >mapContentToRows(headerContent?.content);</span>
+  const sharedHeaderProps = <span class="cstat-no" title="statement not covered" >{</span>
+    skipToContentId,
+    includeSkipToSidebar,
+    showSearchBar: headerContent.showSearchBar,
+  };
 &nbsp;
   const displayCancelContent = <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" >    &lt;HeaderContainer</span>
-      showCancelButton
-      skipToContentId={skipToContentId}
-      includeSkipToSidebar={includeSkipToSidebar}
-    &gt;
+<span class="cstat-no" title="statement not covered" >    &lt;HeaderContainer {...sharedHeaderProps} showCancelButton&gt;</span>
       &lt;HeaderCancel handleCancel={handleCancel} /&gt;
     &lt;/HeaderContainer&gt;
   );
 &nbsp;
   const displayDevPreContent = <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" >    &lt;HeaderContainer</span>
+      {...sharedHeaderProps}
       isIESupportPage={isIESupportPage}
-      skipToContentId={skipToContentId}
-      includeSkipToSidebar={includeSkipToSidebar}
       isDevPre={isDevPre}
     &gt;
       &lt;nav aria-label="Primary navigation" hidden={!isMobileMenuExpanded}&gt;
@@ -492,12 +500,13 @@ const HeaderUI = <span class="fstat-no" title="function not covered" >({</span>
 &nbsp;
   const displayHeaderContent = <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" >    &lt;&gt;</span>
-      &lt;HeaderContainer
-        isIESupportPage={isIESupportPage}
-        skipToContentId={skipToContentId}
-        includeSkipToSidebar={includeSkipToSidebar}
-      &gt;
+      &lt;HeaderContainer {...sharedHeaderProps} isIESupportPage={isIESupportPage}&gt;
         &lt;HelpIcon /&gt;
+        {headerContent.showSearchBar === "true" &amp;&amp; windowWidth &lt; 768 ? (
+          &lt;div style={{ width: "100%" }}&gt;
+            &lt;HeaderSearchBar /&gt;
+          &lt;/div&gt;
+        ) : null}
         &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}
@@ -574,7 +583,7 @@ export default HeaderUI;
             <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 2024-06-06T15:24:30.092Z
+                at 2024-03-21T19:29:13.871Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

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

@@ -166,7 +166,7 @@ export default HelpIcon;
             <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 2024-06-06T15:24:30.092Z
+                at 2024-03-21T19:29:13.871Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>