@windstream/react-shared-components 0.1.98 → 0.2.0

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

@@ -51,16 +51,15 @@ export const DesktopLinkGroups: React.FC<LinkGroupsProps> = ({
       <Button
         key={`submenu-link-btn-${link.anchorId}`}
         {...link}
-        showButtonAs="text"  
         linkClassName={cx(
-          "body3 inline-flex items-center no-underline hover:underline",  
+          "body3 flex items-center h-full",
           linkColorClassName || "text-text"
         )}
+        linkVariant="unstyled"
       />
     );
   }
 
-
   // Group
   const { anchorId, title, items } = link;
   const subMenu = Array.isArray(items?.items) ? items!.items! : [];
@@ -80,16 +79,15 @@ export const DesktopLinkGroups: React.FC<LinkGroupsProps> = ({
           linkColorClassName || "text-text"
         )}
         key={anchorId}
-        showButtonAs="unstyled"   
+        showButtonAs="unstyled"
       >
-
-        <Text as="span" className="group-hover:underline leading-none">
+        <Text as="span" className="group-hover:underline">
           {title ?? null}
         </Text>
         <MaterialIcon
           weight="200"
           size={24}
-          className="text-icon-secondary group-hover:opacity-50 mt-[1px]"
+          className="group-hover:opacity-50 text-icon-secondary"
           name={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"}
         />
       </Button>
@@ -125,11 +123,11 @@ export const DesktopLinkGroups: React.FC<LinkGroupsProps> = ({
         >
           {subMenu.map((site, index) => {
             return (
-              <li key={`submenu-link-${index}`} className="submenu-link">
+              <li key={`submenu-link-${index}`} className="submenu-link type1">
                 <Button
                   {...site}
-                  showButtonAs="text"
-                  linkClassName="body3 px-3 flex items-center text-text-link no-underline hover:underline hover:bg-bg-surface-hover"
+                  linkVariant="unstyled"
+                  linkClassName="body3 px-4 hover:bg-bg-surface-hover flex items-center w-full h-11 text-text-link"
                 />
               </li>
             );

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

@@ -31,7 +31,7 @@ export const Navigation: React.FC<NavigationProps> = props => {
     onCallClickDesktop,
     onCallClickMobile,
     onCartClick,
-    onSearch = () => { },
+    onSearch = () => {},
     utilityNavActiveIndex,
     primaryNavigationLogoWidth = 76.5,
     primaryNavigationLogoHeight = 24,
@@ -111,18 +111,17 @@ export const Navigation: React.FC<NavigationProps> = props => {
       <nav className={`menu-container z-[1000]`}>
         {displayUtilityNavigation ? (
           <div className="utility-container hidden lg:block lg:border-b lg:px-2">
-            <div className="mx-auto flex max-w-120 items-center justify-between">
+            <div className="mx-auto flex max-w-120 justify-between">
               <ul className="flex gap-5" aria-label="Utility Navigation">
                 {utilityNavigationLinks?.map((links, index) => {
                   return (
                     <li key={`main-menu-items-${index}`}>
                       <ContentfulButton
-                        showButtonAs="text"
                         linkClassName={cx(
-                          "footnote inline-flex items-center text-text",
+                          "footnote flex items-center text-text w-full h-11",
                           // If utilityNavActiveIndex is not provided, default to making the second link active (for existing business app). If utilityNavActiveIndex is provided, use it to determine which link is active.
                           typeof utilityNavActiveIndex !== "number"
-                            ? index === 0 && "label4"
+                            ? index === 1 && "label4"
                             : utilityNavActiveIndex === index && "label4"
                         )}
                         linkVariant="unstyled"
@@ -142,7 +141,7 @@ export const Navigation: React.FC<NavigationProps> = props => {
                     prefix={callNowCtaText}
                     onClick={onCallClickDesktop}
                   >
-                    <Text className="body3 text-text ml-1">
+                    <Text className="body3 text-text">
                       {invocaPhoneNumberDisplayText}
                     </Text>
                   </CallButton>
@@ -150,14 +149,14 @@ export const Navigation: React.FC<NavigationProps> = props => {
                 {displayCartIcon ? (
                   <Link
                     href={cartHref || "#"}
-                    className="relative flex items-center justify-center"
+                    className="relative inline-flex cursor-pointer"
                     aria-label={cartIconAriaLabel}
                     onClick={onCartClick}
                   >
-                    <span className="text-[20px]">🛒</span>
+                    <MaterialIcon name="shopping_cart" />
 
                     {cartHasRetention && (
-                      <span className="absolute -right-1 -top-1 h-2 w-2 rounded-full bg-icon-brand" />
+                      <span className="absolute -right-2 -top-1 h-2.5 w-2.5 rounded-full bg-icon-brand" />
                     )}
                   </Link>
                 ) : null}
@@ -246,7 +245,7 @@ export const Navigation: React.FC<NavigationProps> = props => {
                   </Link>
                 ) : null}
 
-                <div className="flex h-14 items-center gap-6">
+                <div className="flex h-full items-center gap-6">
                   {primaryNavigationLinks?.map((links, index) => {
                     return (
                       <DesktopLinkGroups
@@ -259,9 +258,9 @@ export const Navigation: React.FC<NavigationProps> = props => {
                   })}
                 </div>
               </div>
-              <div className="flex h-full items-center gap-6">
+              <div className="flex h-full items-center gap-10">
                 {showCallNowCtaInMainNav &&
-                  !(displayUtilityNavigation && displayCallNowCta)
+                !(displayUtilityNavigation && displayCallNowCta)
                   ? renderMainNavCallCta(onCallClickDesktop)
                   : null}
                 {displaySearchBar ? (
@@ -417,7 +416,7 @@ const MobileMenu = (props: NavigationProps) => {
                   ? props.searchBarIcon
                   : props.searchBarIcon?.url || ""
               }
-              onSearch={props.onSearch || (() => { })}
+              onSearch={props.onSearch || (() => {})}
             />
           ) : null}
           <div
@@ -505,9 +504,9 @@ const MobileSearchInput = (props: {
     >
       <NextImage
         src={searchBarIconURL}
-        width={16}
-        height={16}
-        className="mr-2"
+        width={32}
+        height={32}
+        className="ml-2"
         alt="Search icon"
         role="button"
         onClick={redirectToSearchResults}
@@ -544,24 +543,27 @@ const DesktopSearchInput = (props: {
   return (
     <form
       name="searchForm"
-      className="flex items-center h-10 w-80 rounded-full border border-gray-500 bg-white px-5 shadow-sm"
+      className="flex h-9 w-60 rounded-input-xl border px-1 transition-colors focus-within:border-border-focus"
       onSubmit={redirectToSearchResults}
     >
       {/* Search Icon */}
-      <MaterialIcon
-        name="search"
-        className="text-gray-500 mr-2 text-[18px]"
-      />
-
+      <NextImage
+        src={searchBarIconURL}
+        width={32}
+        height={32}
+        alt="Search icon"
+        role="button"
+        onClick={redirectToSearchResults} />
       {/* Input */}
-      <input
+      <Input
         ref={searchInputRef}
         type="text"
         name="search"
         placeholder="Search..."
         value={searchValue}
-        onChange={(e) => setSearchValue(e.target.value)}
-        className="flex-1 bg-transparent outline-none text-sm text-gray-700"
+        onChange={e => setSearchValue(e.target.value)}
+        className={"body3 rounded-full px-3 text-text"}
+        containerClassName="px-0 h-full border-none rounded-full"
         autoComplete="off"
       />
     </form>

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

@@ -31,7 +31,7 @@ export const MobileLinkGroups: React.FC<LinkGroupsProps> = ({ link }) => {
       <Button
         key={`submenu-link-btn-${link.anchorId}`}
         {...link}
-        linkClassName="label3 flex items-center px-4 text-text-link"
+        linkClassName="label3 flex items-center w-full h-11 px-4 text-text-link"
         linkVariant="unstyled"
       />
     );
@@ -46,7 +46,7 @@ export const MobileLinkGroups: React.FC<LinkGroupsProps> = ({ link }) => {
       <Button
         onClick={() => setIsOpen(prev => !prev)}
         aria-expanded={isOpen}
-        buttonClassName=" label3 flex items-center px-4"
+        buttonClassName=" label3 flex items-center w-full h-11 px-4"
         key={anchorId}
         showButtonAs="unstyled"
       >
@@ -54,7 +54,7 @@ export const MobileLinkGroups: React.FC<LinkGroupsProps> = ({ link }) => {
         <MaterialIcon
           weight="200"
           size={24}
-          className="text-icon-secondary group-hover:opacity-50"
+          className="group-hover:opacity-50 text-icon-secondary"
           name={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"}
         />
       </Button>
@@ -69,7 +69,7 @@ const RenderSubMenu: React.FC<{ items: ContentfulButtonProps[] }> = ({
   <ul key={`submenu-${items.length}`} className="flex flex-col gap-2">
     {items.map((site, index) => {
       return (
-        <li key={`submenu-link-${index}`} className="submenu-link">
+        <li key={`submenu-link-${index}`} className="submenu-link type2">
           <Button
             {...site}
             linkVariant="unstyled"