@windstream/react-shared-components 0.1.92 → 0.1.93

package/src/contentful/blocks/find-kinetic/types.ts

@@ -3,6 +3,7 @@ export type FindKineticProps = {
   enableHeading?: boolean;
   subTitle?: string;
   description?: string;
+  localPathPrefix?: string;
   background?: "blue" | "green" | "navy" | "purple" | "white" | "yellow";
   image?: string;
   list?: { name: string; code: string }[];

package/src/contentful/blocks/navigation/Navigation.stories.mocks.tsx

@@ -0,0 +1,78 @@
+export const PRIMARY_LINKS: any = [
+  {
+    __typename: "ComponentButton",
+    buttonLabel: "Home",
+    href: "/",
+    preserveQueryParameters: false,
+  },
+  {
+    __typename: "ComponentButton",
+    buttonLabel: "Products",
+    href: "/products",
+    preserveQueryParameters: false,
+  },
+  {
+    __typename: "ComponentButtonGroup",
+    title: "Services",
+    items: {
+      items: [
+        {
+          __typename: "ComponentButton",
+          buttonLabel: "Internet",
+          href: "/internet",
+        },
+        {
+          __typename: "ComponentButton",
+          buttonLabel: "Phone",
+          href: "/phone",
+        },
+      ],
+    },
+  },
+];
+
+export const UTILITY_LINKS: any = [
+   {
+    __typename: "ComponentButton",
+    buttonLabel: "Residential",
+    href: "/residential",
+  },
+  {
+    __typename: "ComponentButton",
+    buttonLabel: "Business",
+    href: "/business",
+  },
+ 
+];
+
+export const ACCOUNT_LINKS: any = [
+  {
+    __typename: "ComponentButtonGroup",
+    title: "My Account",
+    items: {
+      items: [
+        {
+          __typename: "ComponentButton",
+          buttonLabel: "Profile",
+          href: "/profile",
+        },
+      ],
+    },
+  },
+];
+
+export const SUPPORT_LINKS: any = [
+  {
+    __typename: "ComponentButtonGroup",
+    title: "Support",
+    items: {
+      items: [
+        {
+          __typename: "ComponentButton",
+          buttonLabel: "Help",
+          href: "/help",
+        },
+      ],
+    },
+  },
+];

package/src/contentful/blocks/navigation/Navigation.stories.tsx

@@ -0,0 +1,138 @@
+import { Navigation } from "./index";
+import type { Meta, StoryObj } from "@storybook/react";
+import { DocsPage } from "@shared/stories/DocsTemplate";
+
+import {
+  PRIMARY_LINKS,
+  UTILITY_LINKS,
+  ACCOUNT_LINKS,
+  SUPPORT_LINKS,
+} from "./Navigation.stories.mocks";
+
+const meta: Meta<typeof Navigation> = {
+  title: "Contentful Blocks/Navigation",
+  component: Navigation,
+  tags: ["autodocs"],
+
+  parameters: {
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "Navigation component that includes utility navigation, main navigation, support/account links, search, and mobile drawer.",
+      },
+    },
+  },
+
+  args: {
+    primaryNavigationLinks: PRIMARY_LINKS,
+    primaryNavigationLogo: undefined,
+
+    utilityNavigationLinks: UTILITY_LINKS,
+    accountNavigationLinks: ACCOUNT_LINKS,
+    supportNavigationLinks: SUPPORT_LINKS,
+
+    displayUtilityNavigation: true,
+    displaySearchBar: true,
+    displayCallNowCta: true,
+
+    showCallButton: true,
+    showMobileSliderMenu: true,
+
+    cartHref: "#",
+    displayCartIcon: true,
+
+    invocaPhoneNumberDisplayText: "1-855-654-0841",
+    callNowCtaText: "Call now:",
+
+  },
+
+  argTypes: {
+    displayUtilityNavigation: { control: "boolean" },
+    displaySearchBar: { control: "boolean" },
+    displayCallNowCta: { control: "boolean" },
+
+    navigationBackgroundColor: { control: "text" },
+    navigationLinkColor: { control: "text" },
+
+    cartHasRetention: { control: "boolean" },
+
+    onSearch: { action: "search triggered" },
+    onCartClick: { action: "cart clicked" },
+    onCallClickDesktop: { action: "call desktop" },
+    onCallClickMobile: { action: "call mobile" },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+
+
+/* DEFAULT (ALL FEATURES) */
+export const Default: Story = {};
+
+
+
+/* WITHOUT UTILITY NAV */
+export const WithoutUtilityNavigation: Story = {
+  args: {
+    displayUtilityNavigation: false,
+  },
+};
+
+
+
+/* WITHOUT SEARCH */
+export const WithoutSearchBar: Story = {
+  args: {
+    displaySearchBar: false,
+  },
+};
+
+
+
+/* WITHOUT CALL CTA */
+export const WithoutCallCTA: Story = {
+  args: {
+    displayCallNowCta: false,
+  },
+};
+
+
+
+/* CART RETENTION DOT */
+export const WithCartRetentionDot: Story = {
+  args: {
+    cartHasRetention: true,
+  },
+};
+
+
+
+/* CUSTOM BACKGROUND */
+export const CustomBackgroundColor: Story = {
+  args: {
+    navigationBackgroundColor: "bg-blue-500",
+  },
+};
+
+
+
+/* CUSTOM LINK COLOR */
+export const CustomLinkColor: Story = {
+  args: {
+    navigationLinkColor: "text-red-500",
+  },
+};
+
+
+/* MOBILE VIEW */
+export const MobileView: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: "mobile1",
+    },
+  },
+};

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

@@ -51,15 +51,16 @@ export const DesktopLinkGroups: React.FC<LinkGroupsProps> = ({
       <Button
         key={`submenu-link-btn-${link.anchorId}`}
         {...link}
+        showButtonAs="text"  
         linkClassName={cx(
-          "body3 flex items-center h-full",
+          "body3 inline-flex items-center no-underline hover:underline",  
           linkColorClassName || "text-text"
         )}
-        linkVariant="unstyled"
       />
     );
   }
 
+
   // Group
   const { anchorId, title, items } = link;
   const subMenu = Array.isArray(items?.items) ? items!.items! : [];
@@ -75,19 +76,20 @@ export const DesktopLinkGroups: React.FC<LinkGroupsProps> = ({
         onClick={() => setIsOpen(prev => !prev)}
         aria-expanded={isOpen}
         buttonClassName={cx(
-          "group body3 flex h-full items-center",
+          "group body3 flex items-center h-full",
           linkColorClassName || "text-text"
         )}
         key={anchorId}
-        showButtonAs="unstyled"
+        showButtonAs="unstyled"   
       >
-        <Text as="span" className="group-hover:underline">
+
+        <Text as="span" className="group-hover:underline leading-none">
           {title ?? null}
         </Text>
         <MaterialIcon
           weight="200"
           size={24}
-          className="text-icon-secondary group-hover:opacity-50"
+          className="text-icon-secondary group-hover:opacity-50 mt-[1px]"
           name={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"}
         />
       </Button>
@@ -126,8 +128,8 @@ export const DesktopLinkGroups: React.FC<LinkGroupsProps> = ({
               <li key={`submenu-link-${index}`} className="submenu-link">
                 <Button
                   {...site}
-                  linkVariant="unstyled"
-                  linkClassName="body3 px-4 hover:bg-bg-surface-hover flex items-center w-full h-11 text-text-link"
+                  showButtonAs="text"
+                  linkClassName="body3 px-3 flex items-center text-text-link no-underline hover:underline hover:bg-bg-surface-hover"
                 />
               </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,17 +111,18 @@ 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 justify-between">
+            <div className="mx-auto flex max-w-120 items-center 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 flex items-center w-full h-11 text-text",
+                          "footnote inline-flex items-center text-text",
                           // 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 === 1 && "label4"
+                            ? index === 0 && "label4"
                             : utilityNavActiveIndex === index && "label4"
                         )}
                         linkVariant="unstyled"
@@ -141,7 +142,7 @@ export const Navigation: React.FC<NavigationProps> = props => {
                     prefix={callNowCtaText}
                     onClick={onCallClickDesktop}
                   >
-                    <Text className="body3 text-text">
+                    <Text className="body3 text-text ml-1">
                       {invocaPhoneNumberDisplayText}
                     </Text>
                   </CallButton>
@@ -149,14 +150,15 @@ export const Navigation: React.FC<NavigationProps> = props => {
                 {displayCartIcon ? (
                   <Link
                     href={cartHref || "#"}
-                    className="relative inline-flex cursor-pointer"
+                    className="relative flex items-center justify-center"
                     aria-label={cartIconAriaLabel}
                     onClick={onCartClick}
                   >
-                    <MaterialIcon name="shopping_cart" />
-                    {cartHasRetention ? (
-                      <span className="absolute -right-2 -top-1 h-2.5 w-2.5 rounded-full bg-icon-brand" />
-                    ) : null}
+                    <span className="text-[20px]">🛒</span>
+
+                    {cartHasRetention && (
+                      <span className="absolute -right-1 -top-1 h-2 w-2 rounded-full bg-icon-brand" />
+                    )}
                   </Link>
                 ) : null}
                 {accountNavigationLinks?.map((links, index) => {
@@ -244,7 +246,7 @@ export const Navigation: React.FC<NavigationProps> = props => {
                   </Link>
                 ) : null}
 
-                <div className="flex h-full items-center gap-5">
+                <div className="flex h-14 items-center gap-6">
                   {primaryNavigationLinks?.map((links, index) => {
                     return (
                       <DesktopLinkGroups
@@ -257,9 +259,9 @@ export const Navigation: React.FC<NavigationProps> = props => {
                   })}
                 </div>
               </div>
-              <div className="flex h-full items-center gap-10">
+              <div className="flex h-full items-center gap-6">
                 {showCallNowCtaInMainNav &&
-                !(displayUtilityNavigation && displayCallNowCta)
+                  !(displayUtilityNavigation && displayCallNowCta)
                   ? renderMainNavCallCta(onCallClickDesktop)
                   : null}
                 {displaySearchBar ? (
@@ -415,7 +417,7 @@ const MobileMenu = (props: NavigationProps) => {
                   ? props.searchBarIcon
                   : props.searchBarIcon?.url || ""
               }
-              onSearch={props.onSearch || (() => {})}
+              onSearch={props.onSearch || (() => { })}
             />
           ) : null}
           <div
@@ -503,11 +505,11 @@ const MobileSearchInput = (props: {
     >
       <NextImage
         src={searchBarIconURL}
-        width={32}
-        height={32}
+        width={16}
+        height={16}
+        className="mr-2"
         alt="Search icon"
         role="button"
-        className="ml-2"
         onClick={redirectToSearchResults}
       />
       <div className="flex-grow">
@@ -542,26 +544,25 @@ const DesktopSearchInput = (props: {
   return (
     <form
       name="searchForm"
-      className="flex h-9 w-60 rounded-input-xl border px-1 transition-colors focus-within:border-border-focus"
+      className="flex items-center h-10 w-80 rounded-full border border-gray-500 bg-white px-5 shadow-sm"
       onSubmit={redirectToSearchResults}
     >
-      <NextImage
-        src={searchBarIconURL}
-        width={32}
-        height={32}
-        alt="Search icon"
-        role="button"
-        onClick={redirectToSearchResults}
+      {/* Search Icon */}
+      <MaterialIcon
+        name="search"
+        className="text-gray-500 mr-2 text-[18px]"
       />
-      <Input
+
+      {/* Input */}
+      <input
         ref={searchInputRef}
-        className={"body3 rounded-full px-3 text-text"}
+        type="text"
         name="search"
         placeholder="Search..."
         value={searchValue}
-        onChange={e => setSearchValue(e.target.value)}
+        onChange={(e) => setSearchValue(e.target.value)}
+        className="flex-1 bg-transparent outline-none text-sm text-gray-700"
         autoComplete="off"
-        containerClassName="px-0 h-full border-none rounded-full"
       />
     </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 w-full h-11 px-4 text-text-link"
+        linkClassName="label3 flex items-center 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 h-11 w-full items-center px-4"
+        buttonClassName=" label3 flex items-center px-4"
         key={anchorId}
         showButtonAs="unstyled"
       >