@windstream/react-shared-components 0.1.13 → 0.1.15

package/src/contentful/blocks/navigation/index.tsx

@@ -36,7 +36,7 @@ export const Navigation: React.FC<NavigationProps> = props => {
                   <li key={`main-menu-items-${index}`}>
                     <ContentfulButton
                       linkClassName={cx(
-                        "footnote flex items-center w-full h-11 text-text-link",
+                        "footnote flex items-center w-full h-11 text-text",
                         index === 1 && "label4"
                       )}
                       linkVariant="unstyled"
@@ -50,7 +50,9 @@ export const Navigation: React.FC<NavigationProps> = props => {
             </ul>
             <div className="flex items-center gap-10">
               <CallButton className="border-none" href={invocaPhoneNumberLink}>
-                <Text className="body3">{invocaPhoneNumberDisplayText}</Text>
+                <Text className="body3 text-text">
+                  {invocaPhoneNumberDisplayText}
+                </Text>
               </CallButton>
               {accountNavigationLinks?.map((links, index) => {
                 return (
@@ -103,7 +105,7 @@ export const Navigation: React.FC<NavigationProps> = props => {
                     alt="Kinetic business logo"
                     width={76.5}
                     height={24}
-                    className="mr-14"
+                    className="mr-[64px]"
                   />
                 </Link>
 
@@ -149,7 +151,12 @@ export const Navigation: React.FC<NavigationProps> = props => {
 };
 
 const MobileMenu = (props: NavigationProps) => {
-  const { primaryNavigationLinks, utilityNavigationLinks } = props;
+  const {
+    primaryNavigationLinks,
+    utilityNavigationLinks,
+    supportNavigationLinks,
+    accountNavigationLinks,
+  } = props;
   const [isOpen, setIsOpen] = React.useState(false);
 
   React.useEffect(() => {
@@ -255,21 +262,23 @@ const MobileMenu = (props: NavigationProps) => {
           />
           <div className="flex-grow overflow-y-auto">
             <ul className="mt-2 flex flex-col gap-2">
-              {primaryNavigationLinks?.map((links, index) => {
-                return (
-                  <li key={`main-menu-items-${index}`}>
-                    <MobileLinkGroups link={links} />
-                  </li>
-                );
-              })}
+              {[
+                ...(primaryNavigationLinks || []),
+                ...(supportNavigationLinks || []),
+                ...(accountNavigationLinks || []),
+              ].map((links, index) => (
+                <li key={`main-menu-items-${index}`}>
+                  <MobileLinkGroups link={links} />
+                </li>
+              ))}
             </ul>
 
             <ul className="mt-2 flex gap-5 bg-bg-fill-info px-4">
               {utilityNavigationLinks?.map((link, index) => {
                 return (
-                  <li key={`main-menu-items-${index}`}>
+                  <li key={`utility-menu-items-${index}`}>
                     <ContentfulButton
-                      key={`submenu-link-btn-${link.anchorId}`}
+                      key={`utility-submenu-link-btn-${link.anchorId}`}
                       {...(Object.fromEntries(
                         Object.entries(link).filter(([_, v]) => v !== null)
                       ) as any)}
@@ -330,7 +339,7 @@ const MobileSearchInput = (props: {
       <div className="flex-grow">
         <Input
           ref={searchInputRef}
-          className={"h-[34px] rounded-none text-body3 font-medium leading-6"}
+          className={"body3 h-[34px] rounded-none px-3 text-text"}
           name="search"
           placeholder="Search..."
           value={searchValue}
@@ -359,7 +368,7 @@ const DesktopSearchInput = (props: {
   return (
     <form
       name="searchForm"
-      className="flex h-9 w-60 rounded-full border transition-colors focus-within:border-border-focus"
+      className="flex h-9 w-60 rounded-input-xl border px-1 transition-colors focus-within:border-border-focus"
       onSubmit={redirectToSearchResults}
     >
       <NextImage
@@ -372,7 +381,7 @@ const DesktopSearchInput = (props: {
       />
       <Input
         ref={searchInputRef}
-        className={"rounded-full p-0 text-body3 font-medium leading-6"}
+        className={"body3 rounded-full px-3 text-text"}
         name="search"
         placeholder="Search..."
         value={searchValue}

package/src/contentful/blocks/navigation/mobile-link-groups.tsx/index.tsx

@@ -52,7 +52,9 @@ export const MobileLinkGroups: React.FC<LinkGroupsProps> = ({ link }) => {
       >
         {title ?? null}
         <MaterialIcon
-          weight="700"
+          weight="200"
+          size={24}
+          className="text-icon-secondary group-hover:opacity-50"
           name={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"}
         />
       </Button>