qpp-style 9.36.0 → 9.37.1

package/components/Footer/FooterUI.jsx

@@ -8,7 +8,6 @@ import { OpenInNewIcon } from "../../lib/SvgComponents";
 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 { version: buildVersion } = pjson;
-
 const FooterUI = () => (
   <>
     <div className="feedback-session-sign-up">

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/Session/Session.jsx

@@ -11,45 +11,9 @@ const MINUTE = 60 * SECOND;
 const TWO_MINUTES = 2 * MINUTE;
 const DEFAULT_SESSION_CHECK_INTERVAL = TWO_MINUTES;
 
-// This Dialog shows up 2 minutes before the user session ends
-// giving the user an opportunity to refresh the token
-// or to sign out
-const InactiveDialog = () => {
-  const [isOpen, setIsOpen] = useState(true);
-
-  useEffect(() => {
-    const timeout = setTimeout(() => logoutSession(window), TWO_MINUTES);
-    return () => clearInterval(timeout);
-  }, []);
-
-  return (
-    <Modal
-      useDesignSystem
-      title="You will be signed out within two minutes"
-      isOpen={isOpen}
-      primary={{
-        title: "Keep me signed in",
-        onClick: () => {
-          refreshSession();
-          setIsOpen(false);
-        },
-      }}
-      secondary={{
-        title: "Sign me out now",
-        onClick: () => logoutSession(window),
-      }}
-      onRequestClose={() => setIsOpen(false)}
-    >
-      <p>
-        You have been inactive for thirty minutes. For your security, we will
-        sign you out automatically.
-      </p>
-    </Modal>
-  );
-};
-
 // 120 seconds is 2 minutes
 const DEFAULT_WARNING_TIMEOUT_SECONDS = 120;
+
 function shouldShowInactiveDialog(
   timeRemainingSeconds,
   warningTimeoutSeconds = DEFAULT_WARNING_TIMEOUT_SECONDS,
@@ -58,18 +22,20 @@ function shouldShowInactiveDialog(
 }
 
 const Session = () => {
-  const [isInactiveDialogOpen, setIsInactiveDialogOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+
+  let ttlInterval;
 
   useEffect(() => {
     let didCancel = false;
     const cookies = cookie.parse(document.cookie);
     const hasAuthToken = !!cookies.qpp_auth_token;
+
     async function isSessionValid() {
       if (hasAuthToken) {
         const timeRemaining = await fetchTtl(cookies.qpp_auth_token);
         // safeguard against unmounted component
         if (didCancel) return;
-
         // token expired
         if (timeRemaining === 0) {
           logoutSession(window);
@@ -77,23 +43,47 @@ const Session = () => {
         }
         // token is about to expire
         if (shouldShowInactiveDialog(timeRemaining)) {
-          setIsInactiveDialogOpen(true);
+          setIsOpen(true);
         }
       }
     }
-    isSessionValid();
-    const interval = setInterval(
-      isSessionValid,
-      DEFAULT_SESSION_CHECK_INTERVAL,
-    );
+
+    ttlInterval = setInterval(isSessionValid, DEFAULT_SESSION_CHECK_INTERVAL);
 
     return () => {
-      clearInterval(interval);
+      clearInterval(ttlInterval);
       didCancel = true;
     };
   }, []);
 
-  return <>{isInactiveDialogOpen && <InactiveDialog />}</>;
+  // This Dialog shows up 2 minutes before the user session ends
+  // giving the user an opportunity to refresh the token
+  // or to sign out
+  return (
+    <Modal
+      useDesignSystem
+      title="You will be signed out within two minutes"
+      isOpen={isOpen}
+      primary={{
+        title: "Keep me signed in",
+        onClick: () => {
+          refreshSession();
+          clearInterval(ttlInterval);
+          setIsOpen(false);
+        },
+      }}
+      secondary={{
+        title: "Sign me out now",
+        onClick: () => logoutSession(window),
+      }}
+      onRequestClose={() => setIsOpen(false)}
+    >
+      <p>
+        You have been inactive for thirty minutes. For your security, we will
+        sign you out automatically.
+      </p>
+    </Modal>
+  );
 };
 
 export default Session;