qpp-style 9.34.6 → 9.35.0-beta.0

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">
@@ -98,6 +97,7 @@ const FooterUI = () => (
                 1-866-288-8292 (TRS: 711)
                 <span className="footer-trs-infotip">
                   <InfoTip
+                    aria-labelledby="footer-trs-infotip"
                     ariaLabel="TRS Communications Assistant Information"
                     label={infoTipLabel}
                   />

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

@@ -101,7 +101,7 @@ const HeaderMenuItem = ({
       <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"

package/components/Header/HeaderMenuLink.js

@@ -1,9 +1,9 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { submissionsUrl } from "../SideNav/helpers";
 import { useHeaderState } from "./hooks";
 import { setUtagLink } from "./utag-helpers";
 
+const submissionsUrl = "/user/submissions";
 // exclude submissions urls
 const isNotExcluded = (href) => !href.includes(submissionsUrl);
 

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/Header/ImpersonatorBanner.jsx

@@ -7,8 +7,8 @@ import {
   revertQppHasAuthsCookie,
   revertApmPaymentCookie,
 } from "../../session/logout";
-import { viewingToolUrl } from "../SideNav/helpers";
 
+const viewingToolUrl = "/user/helpdesk-viewing-tool";
 const getViewType = (viewType) =>
   ({
     username: "HARP ID",

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

@@ -37,7 +37,7 @@ const touchHandlers = {
  * Tooltip with styled information icon
  */
 const Infotip = ({ ariaLabel, label, lightIcon, ...props }) => (
-  <InfotipContent label={label} {...props}>
+  <InfotipContent label={label} id="info-tip" {...props}>
     <button
       type="button"
       aria-label={ariaLabel}

package/components/Infotip/InfotipContent.jsx

@@ -10,7 +10,7 @@ import {
 const TEXT_COLOR = "#FFF";
 const BACKGROUND_COLOR = "#333";
 
-const InfotipContent = ({ children, label }) => {
+const InfotipContent = ({ children, label, id }) => {
   const tooltip = useTooltipState();
 
   const cssStyles = {
@@ -27,6 +27,7 @@ const InfotipContent = ({ children, label }) => {
         {children}
       </TooltipAnchor>
       <TooltipAriaKit
+        aria-labelledby={id}
         state={tooltip}
         className="tooltip-content"
         style={cssStyles}
@@ -41,6 +42,7 @@ const InfotipContent = ({ children, label }) => {
 InfotipContent.propTypes = {
   children: PropTypes.node.isRequired,
   label: PropTypes.node.isRequired,
+  id: PropTypes.node.isRequired,
 };
 
 export default InfotipContent;

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;

package/components/SideNav/Content/LevelOneContent.jsx

@@ -4,11 +4,20 @@ import cookie from "cookie";
 import jwtDecode from "jwt-decode";
 import SanitizedContent from "../../SanitizedContent";
 import AnimationGroup from "../AnimationGroup/AnimationGroup";
-import { isMultiRoleUser } from "../helpers";
 import SelectRole from "./SelectRole";
+import { loadRoleOptions } from "./SelectRole/utils";
 
 const LevelOneContent = ({ isExpanded, levelOneContent }) => {
-  let { qpp_auth_token } = cookie.parse(document.cookie);
+  const {
+    qpp_auth_token,
+    qpp_has_authorizations: hasAuthorizations,
+    qpp_cms_internal_authorized: cmsInternalRoleValues,
+  } = cookie.parse(document.cookie);
+
+  const roleOptions = loadRoleOptions([
+    hasAuthorizations,
+    cmsInternalRoleValues,
+  ]);
 
   const [selectedRole, setSelectedRole] = useState("");
 
@@ -20,7 +29,7 @@ const LevelOneContent = ({ isExpanded, levelOneContent }) => {
   const path = window.location.pathname;
   document.cookie = `current_path=${path}; Path=/;`;
 
-  const hasMultipleRoles = isMultiRoleUser(document.cookie);
+  const hasMultipleRoles = roleOptions.length > 1;
 
   return (
     <div className="sidebar-content">
@@ -32,6 +41,7 @@ const LevelOneContent = ({ isExpanded, levelOneContent }) => {
           <SelectRole
             selectedRole={selectedRole}
             setSelectedRole={setSelectedRole}
+            roleOptions={roleOptions}
           />
         )}
 

package/components/SideNav/Content/SelectRole/index.js

@@ -3,29 +3,20 @@ import PropTypes from "prop-types";
 import cookie from "cookie";
 import Dropdown from "../../../Dropdown";
 import {
-  loadRoleOptions,
   redirectPage,
   getLocalStorageRoleState,
   initializeLocalStorageRoleState,
   updateLocalStorageRoleState,
 } from "./utils";
 
-const SelectRole = ({ selectedRole, setSelectedRole }) => {
-  const {
-    qpp_has_authorizations: hasAuthorizations,
-    qpp_cms_internal_authorized: cmsInternalRoleValues,
-    qpp_impersonated_user: isHelpdeskRoleAndImpersonating,
-  } = cookie.parse(document.cookie);
-
-  const ROLE_OPTIONS = loadRoleOptions([
-    hasAuthorizations,
-    cmsInternalRoleValues,
-  ]);
+const SelectRole = ({ selectedRole, setSelectedRole, roleOptions }) => {
+  const { qpp_impersonated_user: isHelpdeskRoleAndImpersonating } =
+    cookie.parse(document.cookie);
 
   const handleSelection = (e) => {
     e.preventDefault();
     const dropdownValue = e.target.value;
-    const newRoleSelected = ROLE_OPTIONS.filter(
+    const newRoleSelected = roleOptions.filter(
       (opt) => opt.value === dropdownValue,
     )[0].value;
     // Update localStorage with the new role selected
@@ -39,7 +30,7 @@ const SelectRole = ({ selectedRole, setSelectedRole }) => {
   useEffect(() => {
     // Check localStorage & set initial selected role
     const { selectedUserRole } = getLocalStorageRoleState();
-    const roleValue = selectedUserRole || ROLE_OPTIONS[0].value;
+    const roleValue = selectedUserRole || roleOptions[0].value;
 
     // Set localStorage values if not set
     initializeLocalStorageRoleState(roleValue);
@@ -62,7 +53,7 @@ const SelectRole = ({ selectedRole, setSelectedRole }) => {
         name="user-role-selection"
         ariaLabel="Select User Role"
         className="qpp-u-width--100 SelectRole__Dropdown"
-        options={ROLE_OPTIONS}
+        options={roleOptions}
         onChange={handleSelection}
         disabled={isHelpdeskRoleAndImpersonating}
       />
@@ -73,6 +64,7 @@ const SelectRole = ({ selectedRole, setSelectedRole }) => {
 SelectRole.propTypes = {
   selectedRole: PropTypes.string,
   setSelectedRole: PropTypes.func,
+  roleOptions: PropTypes.array,
 };
 
 export default SelectRole;

package/components/SideNav/Content/SelectRole/utils.js

@@ -35,13 +35,6 @@ export const isReviewerRole = (cmsInternalRole) => {
   return reviewerRoles.includes(cmsInternalRole);
 };
 
-// Check if internal cms role in a Content Mgr role
-// @param {string} cmsInternalRole
-// @returns {boolean}
-export const isContentMgmtRole = (cmsInternalRole) => {
-  return cmsRoles.includes(cmsInternalRole);
-};
-
 /**
  * Check if internal cms roles has Reviewer role
  * @param {array} cmsInternalRoles array of values

package/components/SideNav/Links/NavLinkDrawer.jsx

@@ -193,6 +193,7 @@ const NavLinkDrawer = ({
                   link.label ? link.label.split(" ").join("") : ""
                 }`}
                 data-track-label={link.label}
+                data-cy={link.label}
                 target="_self"
               >
                 {link.label}

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