feat(component-header-footer): update header to new style

packages/component-header-footer/src/header/colors.js

@@ -0,0 +1,36 @@
+/**
+ * Centralized color constants for ASU Header components
+ *
+ * This file contains all color values used across header styles.
+ * Import these constants instead of using hardcoded hex values.
+ */
+
+// Primary ASU Brand Colors
+export const ASU_MAROON = "#8c1d40";
+export const ASU_GOLD = "#ffc627";
+
+// Grayscale Colors
+export const ASU_WHITE = "#ffffff";
+export const ASU_BLACK = "#000000";
+export const ASU_GRAY1 = "#191919";
+export const ASU_GRAY2 = "#484848";
+export const ASU_GRAY3 = "#747474";
+export const ASU_GRAY4 = "#BFBFBF";
+export const ASU_GRAY5 = "#d0d0d0";
+export const GASU_GRAY6 = "#e8e8e8";
+export const GRAY_BUTTON_DISABLED = "#bfbfbf";
+
+// Bootstrap/Framework Colors
+export const BOOTSTRAP_TEXT_MUTED = "#495057";
+
+// Semantic Color Aliases (for better readability in context)
+export const TEXT_PRIMARY = ASU_GRAY1;
+export const TEXT_SECONDARY = ASU_GRAY2;
+export const TEXT_MUTED = BOOTSTRAP_TEXT_MUTED;
+export const BACKGROUND_PRIMARY = ASU_WHITE;
+export const BACKGROUND_SECONDARY = GASU_GRAY6;
+export const BORDER_PRIMARY = ASU_GRAY5;
+export const BORDER_SECONDARY = ASU_GRAY4;
+export const BORDER_DARK = ASU_GRAY3;
+export const ACCENT_PRIMARY = ASU_MAROON;
+export const ACCENT_SECONDARY = ASU_GOLD;

packages/component-header-footer/src/header/components/Button/index.js

@@ -13,14 +13,28 @@ import { ButtonWrapper } from "./index.styles";
  * @returns {JSX.Element}
  */
 
-const Button = ({ href, color, text, classes, onClick, onFocus }) => {
+/**
+ * A reusable button component that renders a ButtonWrapper with customizable properties.
+ *
+ * @param {Object} props - The component props
+ * @param {string} [props.href] - The URL to navigate to when the button is clicked (for link buttons)
+ * @param {string} props.color - The color variant for the button styling
+ * @param {string} props.text - The text content to display inside the button
+ * @param {string} [props.classes] - Additional CSS classes to apply to the button
+ * @param {function} [props.onClick] - Event handler function called when the button is clicked
+ * @param {function} [props.onFocus] - Event handler function called when the button receives focus
+ * @param {string|React.Component} [props.as] - The element type or component to render as
+ * @returns {JSX.Element} The rendered button component
+ */
+const Button = ({ href, color, text, classes, onClick, onFocus, as, ...props }) => {
   return (
     <ButtonWrapper
       href={href}
       className={`button-${color} ${classes ?? ""}`}
-      onClick={onClick}
-      onFocus={onFocus}
-      {...(onClick && { role: "button" })}
+      onClick={onClick ? (event) => onClick(event) : undefined}
+      onFocus={onFocus ? (event) => onFocus(event) : undefined}
+      as={as}
+      {...props}
     >
       {text}
     </ButtonWrapper>

packages/component-header-footer/src/header/components/Button/index.styles.js

@@ -1,9 +1,17 @@
 import styled from "styled-components";
+import {
+  ASU_GRAY1,
+  ASU_BLACK,
+  ASU_WHITE,
+  GRAY_BUTTON_DISABLED,
+  ASU_GOLD,
+  ASU_MAROON
+} from "../../colors";
 
 const ButtonWrapper = styled.a`
   font-family: Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", FreeSans,
     sans-serif;
-  color: #191919;
+  color: ${ASU_GRAY1};
   padding: 0.5rem 1rem;
   border-radius: 400rem;
   font-weight: 700;
@@ -17,20 +25,20 @@ const ButtonWrapper = styled.a`
     transform: scale(1.05);
   }
   &.button-light {
-    background-color: #bfbfbf !important;
-    color: #000000 !important;
+    background-color: ${GRAY_BUTTON_DISABLED} !important;
+    color: ${ASU_BLACK} !important;
   }
   &.button-gold {
-    background-color: #ffc627 !important;
-    color: #000000 !important;
+    background-color: ${ASU_GOLD} !important;
+    color: ${ASU_BLACK} !important;
   }
   &.button-dark {
-    background-color: #191919 !important;
-    color: #ffffff !important;
+    background-color: ${ASU_GRAY1} !important;
+    color: ${ASU_WHITE} !important;
   }
   &.button-maroon {
-    background-color: #8c1d40 !important;
-    color: #ffffff !important;
+    background-color: ${ASU_MAROON} !important;
+    color: ${ASU_WHITE} !important;
   }
 `;
 

packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/DropdownItem/index.styles.js

@@ -1,9 +1,10 @@
 import styled from "styled-components";
+import { ASU_WHITE, ASU_GRAY5, ASU_GRAY1, ASU_MAROON } from "../../../../colors";
 
 const DropdownWrapper = styled.div`
   position: fixed;
-  background-color: #ffffff;
-  border: 1px solid #d0d0d0;
+  background-color: ${ASU_WHITE};
+  border: 1px solid ${ASU_GRAY5};
   margin: 0;
   z-index: 1031;
   visibility: hidden;
@@ -34,7 +35,7 @@ const DropdownWrapper = styled.div`
       &:not(:last-child) {
         padding-right: 2rem;
         margin-right: 2rem;
-        border-right: 1px solid #d0d0d0;
+        border-right: 1px solid ${ASU_GRAY5};
       }
       .ul-heading {
         margin-top: 0;
@@ -54,9 +55,9 @@ const DropdownWrapper = styled.div`
           margin: 0.75rem 0;
           position: relative;
           line-height: 1rem;
-          color: #191919;
+          color: ${ASU_GRAY1};
           &:hover {
-            color: #8c1d40;
+            color: ${ASU_MAROON};
             text-decoration: underline;
           }
         }
@@ -71,8 +72,8 @@ const DropdownWrapper = styled.div`
     }
   }
   .dropdown-button-container {
-    border-top: 1px solid #d0d0d0;
-    border-bottom: 1px solid #d0d0d0;
+    border-top: 1px solid ${ASU_GRAY5};
+    border-bottom: 1px solid ${ASU_GRAY5};
     margin-top: 1rem;
     > div {
       max-width: 1200px;
@@ -113,7 +114,7 @@ const DropdownWrapper = styled.div`
         .nav-link {
           padding: 0 1rem;
           &:not(:last-child) {
-            border-bottom: 1px solid #d0d0d0;
+            border-bottom: 1px solid ${ASU_GRAY5};
           }
           a {
             padding: 1rem 0;

packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/NavItem/index.styles.js

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { ASU_GRAY1, ASU_GOLD, ASU_GRAY4 } from "../../../../colors";
 
 const NavItemWrapper = styled.li`
   position: relative;
@@ -12,7 +13,7 @@ const NavItemWrapper = styled.li`
     display: inline-block;
     padding: 0.5rem 0.75rem;
     line-height: 1rem;
-    color: #191919;
+    color: ${ASU_GRAY1};
     &:after {
       transition: 0.5s cubic-bezier(0.19, 1, 0.19, 1);
       content: "";
@@ -25,7 +26,7 @@ const NavItemWrapper = styled.li`
       background-image: linear-gradient(
         to right,
         transparent 0.5%,
-        #ffc627 0.5%
+        ${ASU_GOLD} 0.5%
       );
     }
     &.nav-item-selected:after {
@@ -51,10 +52,10 @@ const NavItemWrapper = styled.li`
     }
   }
   @media (max-width: ${({ breakpoint }) => breakpoint}) {
-    border-bottom: 1px solid #cccccc;
+    border-bottom: 1px solid ${ASU_GRAY4};
     margin: 0;
     &:first-child {
-      border-top: 1px solid #cccccc;
+      border-top: 1px solid ${ASU_GRAY4};
     }
     &:hover > a:after {
       width: 100%;
@@ -66,7 +67,7 @@ const NavItemWrapper = styled.li`
       padding: 1rem 2rem 0.75rem;
       width: 100%;
       &.open-link {
-        border-bottom: 1px solid #cccccc;
+        border-bottom: 1px solid ${ASU_GRAY4};
       }
       &:after {
         right: 0;

packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/index.js

@@ -71,7 +71,6 @@ const NavbarContainer = () => {
             <form className="buttons-container" data-testid="buttons-container">
               {buttons.map(button => {
                 validateButton(button);
-                console.log(button);
                 return (
                   <Button
                     {...button}

packages/component-header-footer/src/header/components/HeaderMain/Partner/index.styles.js

@@ -1,11 +1,12 @@
 import styled from "styled-components";
+import { ASU_GRAY5 } from "../../../colors";
 
 const PartnerLogosWrapper = styled.div`
   margin: 0.5rem 0;
   a {
     display: inline-block;
     &:not(:last-child) {
-      border-right: 1px solid #d0d0d0;
+      border-right: 1px solid ${ASU_GRAY5};
       margin-right: 1.5rem;
       padding-right: 1.5rem;
     }

packages/component-header-footer/src/header/components/HeaderMain/Title/index.styles.js

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { ASU_GRAY1, ASU_GOLD } from "../../../colors";
 
 const breakpointMap = {
   "992px": "993px",
@@ -25,15 +26,15 @@ const TitleWrapper = styled.div`
   .unit-name,
   .subunit-name,
   .title-subunit-name {
-    color: #191919;
+    color: ${ASU_GRAY1};
   }
 
   .subunit-name,
   .title-subunit-name {
     background-image: linear-gradient(
       to right,
       transparent 51%,
-      #ffc626 51%,
+      ${ASU_GOLD} 51%,
       95%,
       transparent
     );

packages/component-header-footer/src/header/components/HeaderMain/index.js

@@ -1,8 +1,9 @@
 // @ts-check
 import { trackGAEvent } from "@asu/shared";
-import { faTimes, faBars } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { useState } from "react";
+import { faTimes } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import mobileMenuSearchIcon from "../../../../public/assets/icons/menu-search-icon.png?inline";
 
 import { useAppContext } from "../../core/context/app-context";
 import { useIsMobile } from "../../core/hooks/isMobile";
@@ -11,6 +12,7 @@ import { HeaderMainWrapper } from "./index.styles";
 import { Logo } from "./Logo";
 import { NavbarContainer } from "./NavbarContainer";
 import { Partner } from "./Partner";
+import { Search } from "../UniversalNavbar/Search";
 import { Title } from "./Title";
 
 const HeaderMain = () => {
@@ -51,12 +53,20 @@ const HeaderMain = () => {
                 }`}
                 type="button"
                 onClick={handleClickMobileMenu}
-                aria-label="Toggle navigation"
+                aria-label={mobileMenuOpen ? "Close menu" : "Open menu"}
+                aria-expanded={mobileMenuOpen}
               >
+                <img
+                  src={mobileMenuSearchIcon}
+                  alt="Menu and Search Icon"
+                  className="menu-search-icon"
+                />
+
                 <FontAwesomeIcon
-                  icon={mobileMenuOpen ? faTimes : faBars}
+                  icon={faTimes}
                   // @ts-ignore
                   alt=""
+                  className="menu-close-icon"
                 />
               </button>
               <div
@@ -67,6 +77,7 @@ const HeaderMain = () => {
                 {isPartner ? <Partner /> : <Title />}
                 {!isMobile && <NavbarContainer />}
               </div>
+              {mobileMenuOpen && isMobile && <Search />}
               {mobileMenuOpen && isMobile && <NavbarContainer />}
             </div>
           </div>

packages/component-header-footer/src/header/components/HeaderMain/index.styles.js

@@ -1,8 +1,9 @@
 import styled from "styled-components";
+import { ASU_WHITE, ASU_GRAY5, ASU_GRAY1, ASU_GRAY4 } from "../../colors";
 
 const HeaderMainWrapper = styled.div`
-  background-color: #ffffff;
-  border-bottom: 1px solid #d0d0d0;
+  background-color: ${ASU_WHITE};
+  border-bottom: 1px solid ${ASU_GRAY5};
   padding: 0 12px;
   .navbar {
     padding: 0;
@@ -45,6 +46,7 @@ const HeaderMainWrapper = styled.div`
       justify-content: space-between;
       &.partner {
         flex-direction: row-reverse;
+        flex-wrap: nowrap;
       }
     }
     .partner .content-container {
@@ -69,18 +71,32 @@ const HeaderMainWrapper = styled.div`
     .navbar-toggler {
       display: initial;
       background: transparent;
-      color: #191919;
+      color: ${ASU_GRAY1};
       border: 0;
-      border-radius: 50%;
+      border-radius: 0;
       font-size: 1.25rem;
       margin-right: 2rem;
-      padding: 0.25rem 0.45rem;
+      /* padding: 0.25rem 0.45rem; */
+      min-width: 44px;
+      min-height: 44px;
+
+      .menu-search-icon {
+        display: none;
+      }
+
       &.collapsed {
-        border-radius: 0;
+        .menu-search-icon {
+          width: 24px;
+          height: auto;
+          display: unset;
+        }
+        .menu-close-icon {
+          display: none;
+        }
+      }
+      .no-navigation + nav .buttons-container {
+        border-top: 1px solid ${ASU_GRAY4};
       }
-    }
-    .no-navigation + nav .buttons-container {
-      border-top: 1px solid #cccccc;
     }
   }
 `;

packages/component-header-footer/src/header/components/UniversalNavbar/Login/index.styles.js

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { ASU_GRAY2 } from "../../../colors";
 
 const LoginWrapper = styled.div`
   display: flex;
@@ -7,7 +8,7 @@ const LoginWrapper = styled.div`
   > a {
     padding: 0;
     margin: 0;
-    color: #484848;
+    color: ${ASU_GRAY2};
     text-decoration: none;
   }
   > span.name {