qpp-style 9.34.2 → 9.34.3-beta.1

package/components/Header/HeaderContainer.jsx

@@ -21,6 +21,7 @@ const HeaderContainer = ({
   showCancelButton,
   skipToContentId,
   isIESupportPage,
+  isDevPre,
 }) => {
   const { currentOpenMenu } = useHeaderState();
   const cssCancelBtn = showCancelButton ? "show-cancel-button" : "";
@@ -50,7 +51,7 @@ const HeaderContainer = ({
       <GovBanner />
       {!isIESupportPage && <NotificationBanner />}
       <header id="top" className={`${cssCancelBtn} ${cssMenuDropdownStatus}`}>
-        <HeaderLogo />
+        <HeaderLogo isDevPre={isDevPre} />
         {children}
       </header>
     </>
@@ -63,6 +64,7 @@ HeaderContainer.propTypes = {
   showCancelButton: PropTypes.bool,
   skipToContentId: PropTypes.string,
   isIESupportPage: PropTypes.bool,
+  isDevPre: PropTypes.object,
 };
 HeaderContainer.defaultProps = {
   includeSkipToSidebar: false,

package/components/Header/HeaderLogo.jsx

@@ -1,9 +1,22 @@
 import React from "react";
+import PropTypes from "prop-types";
 
 import { useHeaderState } from "./hooks";
 
-const HeaderLogo = () => {
+const HeaderLogo = (isDevPre) => {
   const { closeMenus, RouterLink } = useHeaderState();
+  const showDevPre = isDevPre.isDevPre;
+  if (showDevPre) {
+    return (
+      <div className="header-logo">
+        <img
+          className="qpp-logo"
+          src="/images/qpp_logo_rgb_color.png"
+          alt="QPP logo"
+        />
+      </div>
+    );
+  }
   if (RouterLink) {
     return (
       <RouterLink
@@ -22,6 +35,7 @@ const HeaderLogo = () => {
       </RouterLink>
     );
   }
+
   return (
     <a
       className="header-logo"
@@ -39,4 +53,8 @@ const HeaderLogo = () => {
   );
 };
 
+HeaderLogo.propTypes = {
+  isDevPre: PropTypes.object,
+};
+
 export default HeaderLogo;

package/components/Header/HeaderUI.jsx

@@ -79,6 +79,7 @@ const HeaderUI = ({
       isIESupportPage={isIESupportPage}
       skipToContentId={skipToContentId}
       includeSkipToSidebar={includeSkipToSidebar}
+      isDevPre={isDevPre}
     >
       <nav aria-label="Primary navigation" hidden={!isMobileMenuExpanded}>
         <ul className="navigation-menu">

package/components/SideNav/UI/SideNavUI.jsx

@@ -54,9 +54,16 @@ const SideNavUI = ({
 
   const collapseRef = useRef(null);
 
+  const changeExpandedClass = (currentClass, newClass) => {
+    document
+      .querySelectorAll(`.${currentClass}`)
+      .forEach((e) => e.classList.replace(currentClass, newClass));
+  };
+
   const expand = () => {
     setSideNavExpanded(window.document, "true");
     setIsExpandedState(true);
+    changeExpandedClass("animation-group-exit", "animation-group-enter");
     if (onExpanded) {
       onExpanded();
     }
@@ -65,6 +72,7 @@ const SideNavUI = ({
   const collapse = () => {
     setSideNavExpanded(window.document, "false");
     setIsExpandedState(false);
+    changeExpandedClass("animation-group-enter", "animation-group-exit");
     if (onCollapsed) {
       onCollapsed();
     }
@@ -78,6 +86,11 @@ const SideNavUI = ({
     // some applications use the isExpanded prop instead of reading the cookie
     // this will ensure the application ignores the cookie
     if (isExpandedPropSet) {
+      if (isExpanded) {
+        changeExpandedClass("animation-group-exit", "animation-group-enter");
+      } else {
+        changeExpandedClass("animation-group-enter", "animation-group-exit");
+      }
       setIsExpandedState(isExpanded);
     } else {
       isSideNavExpanded(window.document);
@@ -85,7 +98,7 @@ const SideNavUI = ({
   }, [isExpanded, isExpandedPropSet]);
 
   useEffect(() => {
-    isSideNavExpanded(window.document);
+    const initialExpandedState = isSideNavExpanded(window.document);
     let cancelRequest = false;
     const { origin } = window.location;
     const isRunningLocally = origin.includes("localhost");
@@ -103,7 +116,24 @@ const SideNavUI = ({
         }
       }
       if (!cancelRequest) {
-        setSideNavContent(sideNavMenuItems);
+        const realInitialState = isExpandedPropSet
+          ? isExpanded
+          : initialExpandedState;
+        if (realInitialState) {
+          setSideNavContent(sideNavMenuItems);
+        } else {
+          // TODO: we are replacing the class here because the server does not take into account the
+          // initial expand/collapse state of the sidenav.
+          // Once we have confirmation that everyone has installed this version of QPP-Style we can
+          // remove this if/else block (assuming the server has been updated to read the cookie and
+          // render the appropriate class for each link)
+          setSideNavContent(
+            sideNavMenuItems.replaceAll(
+              "animation-group-enter",
+              "animation-group-exit",
+            ),
+          );
+        }
       }
     }
     getSideNavConfig();