qpp-style 9.35.0 → 9.37.0

package/components/Header/HeaderContainer.jsx

@@ -4,7 +4,8 @@ import PropTypes from "prop-types";
 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
@@ -22,13 +23,18 @@ const HeaderContainer = ({
   skipToContentId,
   isIESupportPage,
   isDevPre,
+  showSearchBar,
 }) => {
+  const windowWidth = useWindowWidth();
   const { currentOpenMenu } = useHeaderState();
-  const cssCancelBtn = showCancelButton ? "show-cancel-button" : "";
+  const showSearch = showSearchBar === "true";
+  const cssCancelBtn = showCancelButton ? "show-cancel-button " : "";
   const cssMenuDropdownStatus =
     currentOpenMenu === ""
       ? "header-dropdown--closed"
       : "header-dropdown--open";
+  const cssSearchBar = showSearch ? " header-height" : "";
+  const headerClasses = `${cssCancelBtn}${cssMenuDropdownStatus}${cssSearchBar}`;
 
   return (
     <>
@@ -50,9 +56,12 @@ const HeaderContainer = ({
       )}
       <GovBanner />
       {!isIESupportPage && <NotificationBanner />}
-      <header id="top" className={`${cssCancelBtn} ${cssMenuDropdownStatus}`}>
-        <HeaderLogo isDevPre={isDevPre} />
-        {children}
+      <header id="top" className={headerClasses}>
+        {showSearch && windowWidth > 767 ? <HeaderSearchBar /> : null}
+        <>
+          <HeaderLogo isDevPre={isDevPre} hasSearchBar={showSearch} />
+          {children}
+        </>
       </header>
     </>
   );
@@ -65,12 +74,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,
 };
 
 export default HeaderContainer;

package/components/Header/HeaderLogo.jsx

@@ -3,12 +3,13 @@ import PropTypes from "prop-types";
 
 import { useHeaderState } from "./hooks";
 
-const HeaderLogo = (isDevPre) => {
+const HeaderLogo = ({ isDevPre, hasSearchBar }) => {
   const { closeMenus, RouterLink } = useHeaderState();
-  const showDevPre = isDevPre.isDevPre;
-  if (showDevPre) {
+  const searchHeaderClass = hasSearchBar ? " header-logo-search" : "";
+  const headerLogoClass = `header-logo${searchHeaderClass}`;
+  if (isDevPre) {
     return (
-      <div className="header-logo">
+      <div className={headerLogoClass}>
         <img
           className="qpp-logo"
           src="/images/qpp_logo_rgb_color.png"
@@ -20,7 +21,7 @@ const HeaderLogo = (isDevPre) => {
   if (RouterLink) {
     return (
       <RouterLink
-        className="header-logo"
+        className={headerLogoClass}
         to="/"
         onClick={closeMenus}
         data-track-category="HeaderNav"
@@ -38,7 +39,7 @@ const HeaderLogo = (isDevPre) => {
 
   return (
     <a
-      className="header-logo"
+      className={headerLogoClass}
       href="/"
       data-track-category="HeaderNav"
       data-track-action="OpenQPPHome"
@@ -54,7 +55,8 @@ const HeaderLogo = (isDevPre) => {
 };
 
 HeaderLogo.propTypes = {
-  isDevPre: PropTypes.object,
+  isDevPre: PropTypes.bool,
+  hasSearchBar: PropTypes.bool,
 };
 
 export default HeaderLogo;

package/components/Header/HeaderUI.jsx

@@ -6,8 +6,9 @@ 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";
 
 const HeaderUI = ({
@@ -22,6 +23,7 @@ const HeaderUI = ({
 }) => {
   const [isMobileMenuExpanded, setIsMobileMenuExpanded] = useState(false);
   const [headerContent, setHeaderContent] = useState({});
+  const windowWidth = useWindowWidth();
 
   const mapContentToRows = (config) => {
     // Append transposed array to content
@@ -63,22 +65,22 @@ const HeaderUI = ({
   }, []);
 
   const content = mapContentToRows(headerContent?.content);
+  const sharedHeaderProps = {
+    skipToContentId,
+    includeSkipToSidebar,
+    showSearchBar: headerContent.showSearchBar,
+  };
 
   const displayCancelContent = () => (
-    <HeaderContainer
-      showCancelButton
-      skipToContentId={skipToContentId}
-      includeSkipToSidebar={includeSkipToSidebar}
-    >
+    <HeaderContainer {...sharedHeaderProps} showCancelButton>
       <HeaderCancel handleCancel={handleCancel} />
     </HeaderContainer>
   );
 
   const displayDevPreContent = () => (
     <HeaderContainer
+      {...sharedHeaderProps}
       isIESupportPage={isIESupportPage}
-      skipToContentId={skipToContentId}
-      includeSkipToSidebar={includeSkipToSidebar}
       isDevPre={isDevPre}
     >
       <nav aria-label="Primary navigation" hidden={!isMobileMenuExpanded}>
@@ -91,12 +93,13 @@ const HeaderUI = ({
 
   const displayHeaderContent = () => (
     <>
-      <HeaderContainer
-        isIESupportPage={isIESupportPage}
-        skipToContentId={skipToContentId}
-        includeSkipToSidebar={includeSkipToSidebar}
-      >
+      <HeaderContainer {...sharedHeaderProps} isIESupportPage={isIESupportPage}>
         <HelpIcon />
+        {headerContent.showSearchBar === "true" && windowWidth < 768 ? (
+          <div style={{ width: "100%" }}>
+            <HeaderSearchBar />
+          </div>
+        ) : null}
         <HeaderMobileButton
           handleClick={() => setIsMobileMenuExpanded(!isMobileMenuExpanded)}
           isMobileMenuExpanded={isMobileMenuExpanded}

package/components/HeaderSearchBar/index.jsx

@@ -0,0 +1,80 @@
+import React from "react";
+
+const HeaderSearchBar = () => {
+  return (
+    <div className="qpp-c-search--header-container">
+      <div className="qpp-c-search--header-container__block">
+        <div className="qpp-c-search--header-container__title">
+          Search (beta)
+        </div>
+        <form
+          id="search_form"
+          acceptCharset="UTF-8"
+          action="https://search.usa.gov/search"
+          aria-labelledby="site-search-label"
+          role="search"
+          method="get"
+          className="qpp-c-search qpp-c-search--global  qpp-u-width--100"
+        >
+          <div
+            style={{
+              margin: "0px",
+              padding: "0px",
+              display: "inline",
+            }}
+          >
+            <input name="utf8" type="hidden" value="&#x2713;" />
+          </div>
+          <input id="affiliate" name="affiliate" type="hidden" value="qpp" />
+          <label
+            id="site-search-label"
+            className="qpp-u-visually-hidden"
+            htmlFor="query"
+          >
+            Site Search
+          </label>
+          <div className="qpp-u-width--100 qpp-u-display--flex">
+            <div className="qpp-c-search__wrap">
+              <input
+                autoComplete="off"
+                className="qpp-c-text-input"
+                id="query"
+                name="query"
+                type="text"
+              />
+            </div>
+            <button
+              name="commit"
+              id="global-search"
+              type="submit"
+              className="qpp-c-search__submit qpp-c-button qpp-c-button--secondary"
+            >
+              <span className="qpp-u-visually-hidden">Search</span>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                className="qpp-icon-mat qpp-icon-inline--lg"
+                aria-hidden="true"
+                focusable="false"
+              >
+                <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+      </div>
+      <div>
+        <a
+          className="survey-link"
+          href="https://agilesix.qualtrics.com/jfe/form/SV_e3Esl9l6dXWLnwy"
+          rel="noreferrer"
+          target="_blank"
+        >
+          Give feedback about the Search experience
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default HeaderSearchBar;

package/components/SideNav/Links/NavLinkInline.jsx

@@ -67,6 +67,7 @@ const NavLinkInline = ({
         data-track-action={`GoTo${label ? label.split(" ").join("") : ""}`}
         data-track-label={label}
         aria-label={label}
+        data-cy={label}
         target={`${target ? target : "_self"}`}
       >
         <svg