@windstream/react-shared-components 0.0.72 → 0.0.73

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windstream/react-shared-components",
-  "version": "0.0.72",
+  "version": "0.0.73",
   "type": "module",
   "description": "Shared React components for Kinetic applications",
   "main": "dist/index.js",

package/src/components/call-button/index.tsx

@@ -2,6 +2,7 @@ import type { CallButtonProps } from "@shared/components/call-button/types";
 import { Link } from "@shared/components/link";
 import { MaterialIcon } from "@shared/components/material-icon";
 import type { IconProps } from "@shared/components/material-icon/types";
+import { cx } from "@shared/utils";
 
 export const CallButton = (props: CallButtonProps) => {
   const {
@@ -9,6 +10,7 @@ export const CallButton = (props: CallButtonProps) => {
     buttonStyle = "primary",
     size = "md",
     children,
+    className,
     ...rest
   } = props;
 
@@ -52,7 +54,12 @@ export const CallButton = (props: CallButtonProps) => {
   return (
     <Link
       {...rest}
-      className={`${baseClasses} ${sizeClasses[size]} ${styleClasses[buttonStyle]}`}
+      className={cx(
+        baseClasses,
+        sizeClasses[size],
+        styleClasses[buttonStyle],
+        className
+      )}
     >
       {showBlinkDot ? (
         <span

package/src/components/call-button/types.ts

@@ -5,6 +5,7 @@ import { LinkProps } from "@shared/components/link/types";
 export interface CallButtonProps extends Omit<LinkProps, "children"> {
   showBlinkDot?: boolean;
   buttonStyle?: "primary";
+  className?: string;
   size?: "sm" | "md" | "lg";
   children: ReactNode;
 }

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

@@ -2,6 +2,7 @@ import React from "react";
 import { ButtonProps } from "./types";
 
 import { BrandButton } from "@shared/components/brand-button";
+import { Button as CoreButton } from "@shared/components/button";
 import { Link } from "@shared/components/link";
 
 export const Button: React.FC<ButtonProps> = ({
@@ -17,7 +18,9 @@ export const Button: React.FC<ButtonProps> = ({
   fullWidth,
   preDefinedFunctionExecution,
   checkPlansJSX,
+  buttonClassName,
   onClick,
+  ...rest
 }) => {
   if (preDefinedFunctionExecution === "check availability") {
     return checkPlansJSX;
@@ -30,35 +33,52 @@ export const Button: React.FC<ButtonProps> = ({
     onClick?.(event);
   }
 
-  return showButtonAs === "solid" ? (
-    <BrandButton
-      id={anchorId}
-      variant={buttonVariant}
-      text={buttonLabel}
-      label={buttonPrefix}
-      fullWidth={fullWidth}
-      onClick={buttonClick}
-      // badge={badge}
-      // badgeIcon={badgeIcon}
-      // icon={buttonIcon}
-      // iconPosition={buttonIconPosition}
-      // href={href}
-      // target={target}
-      // preserveQueryParameters={preserveQueryParameters}
-      // clickToOpen={clickToOpen}
-      // tabmodalNameToOpen={tabmodalNameToOpen}
-      // preDefinedFunctionExecution={preDefinedFunctionExecution}
-    />
-  ) : showButtonAs === "text" ? (
-    <Link
-      href={href}
-      target={target}
-      variant={linkVariant || "default"}
-      className={`text-text-brand ${linkClassName || ""}`}
-      onClick={linkClick}
-    >
-      {buttonLabel}
-    </Link>
-  ) : null;
+  let CTA = (
+    <CoreButton onClick={buttonClick} className={buttonClassName} {...rest} />
+  );
+
+  switch (showButtonAs) {
+    case "solid":
+      CTA = (
+        <BrandButton
+          id={anchorId}
+          variant={buttonVariant}
+          text={buttonLabel}
+          label={buttonPrefix}
+          fullWidth={fullWidth}
+          onClick={buttonClick}
+          // badge={badge}
+          // badgeIcon={badgeIcon}
+          // icon={buttonIcon}
+          // iconPosition={buttonIconPosition}
+          // href={href}
+          // target={target}
+          // preserveQueryParameters={preserveQueryParameters}
+          // clickToOpen={clickToOpen}
+          // tabmodalNameToOpen={tabmodalNameToOpen}
+          // preDefinedFunctionExecution={preDefinedFunctionExecution}
+        />
+      );
+      break;
+    case "text":
+      CTA = (
+        <Link
+          href={href}
+          target={target}
+          variant={linkVariant || "default"}
+          className={`text-text-brand ${linkClassName || ""}`}
+          onClick={linkClick}
+        >
+          {buttonLabel}
+        </Link>
+      );
+      break;
+    case "unstyled": // For unstyled, we can use the CoreButton without any additional styling
+      break;
+    default: // For default, we can use the CoreButton without any additional styling
+      break;
+  }
+
+  return CTA;
 };
 export default Button;

package/src/contentful/blocks/button/types.ts

@@ -1,5 +1,5 @@
 export type ButtonProps = {
-  showButtonAs?: "solid" | "text";
+  showButtonAs?: "solid" | "text" | "unstyled";
   buttonVariant?: "primary_brand" | "secondary" | "primary_inverse";
   buttonLabel?: string;
   buttonPrefix?: string;
@@ -16,9 +16,11 @@ export type ButtonProps = {
   preDefinedFunctionExecution?: string;
   checkPlansJSX?: React.ReactNode;
   linkClassName?: string;
+  buttonClassName?: string;
   linkVariant?: "unstyled" | "default";
   fullWidth?: boolean;
   onClick?: (
     event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
   ) => void;
+  children?: React.ReactNode;
 };

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

@@ -1,6 +1,5 @@
 import React, { CSSProperties } from "react";
 
-import { Button as CoreButton } from "@shared/components/button";
 import { MaterialIcon } from "@shared/components/material-icon";
 import { Text } from "@shared/components/text";
 import { Button } from "@shared/contentful/blocks/button";
@@ -60,11 +59,12 @@ export const DesktopLinkGroups: React.FC<LinkGroupsProps> = ({
       style={{ anchorName: fullAnchorName } as CSSProperties}
       ref={ref}
     >
-      <CoreButton
+      <Button
         onClick={() => setIsOpen(prev => !prev)}
         aria-expanded={isOpen}
-        className="group body3 flex h-full items-center"
+        buttonClassName="group body3 flex h-full items-center"
         key={anchorId}
+        showButtonAs="unstyled"
       >
         <Text as="span" className="group-hover:underline">
           {title ?? null}
@@ -74,7 +74,7 @@ export const DesktopLinkGroups: React.FC<LinkGroupsProps> = ({
           className="text-icon-info group-hover:opacity-50"
           name={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"}
         />
-      </CoreButton>
+      </Button>
 
       <div
         className={cx(

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

@@ -3,7 +3,6 @@ import { DesktopLinkGroups } from "./desktop-link-groups.tsx";
 import { MobileLinkGroups } from "./mobile-link-groups.tsx";
 import { NavigationProps } from "./types";
 
-import { Button } from "@shared/components/button";
 import { CallButton } from "@shared/components/call-button";
 import { Input } from "@shared/components/input";
 import { MaterialIcon } from "@shared/components/material-icon";
@@ -21,6 +20,8 @@ export const Navigation: React.FC<NavigationProps> = props => {
     accountNavigationLinks,
     supportNavigationLinks,
     searchBarIcon,
+    invocaPhoneNumberLink,
+    invocaPhoneNumberDisplayText,
     onSearch = () => {},
   } = props;
   return (
@@ -47,8 +48,8 @@ export const Navigation: React.FC<NavigationProps> = props => {
               })}
             </ul>
             <div className="flex items-center gap-10">
-              <CallButton href="tel:1234567890">
-                <Text className="body3">(123) 456-7890</Text>
+              <CallButton className="border-none" href={invocaPhoneNumberLink}>
+                <Text className="body3">{invocaPhoneNumberDisplayText}</Text>
               </CallButton>
               {accountNavigationLinks?.map((links, index) => {
                 return (
@@ -77,9 +78,9 @@ export const Navigation: React.FC<NavigationProps> = props => {
               />
             </div>
             <div className="flex items-center gap-6">
-              <CallButton href="tel:1234567890">
+              <CallButton href={invocaPhoneNumberLink}>
                 <Text as="span" className="footnote">
-                  (123) 456-7890
+                  {invocaPhoneNumberDisplayText}
                 </Text>
               </CallButton>
               <MobileMenu {...props} />
@@ -196,9 +197,13 @@ const MobileMenu = (props: NavigationProps) => {
 
   return (
     <div>
-      <Button className="flex" onClick={() => setIsOpen(true)}>
+      <ContentfulButton
+        showButtonAs="unstyled"
+        buttonClassName="flex"
+        onClick={() => setIsOpen(true)}
+      >
         <MaterialIcon name="menu" />
-      </Button>
+      </ContentfulButton>
       {isOpen ? (
         <div className="fixed bottom-0 left-0 right-0 top-0 z-[90] h-full w-full bg-scrim-bg-modal"></div>
       ) : null}
@@ -216,12 +221,21 @@ const MobileMenu = (props: NavigationProps) => {
         <div id="drawer-items" className="flex h-full flex-col gap-3">
           <div className="flex items-center justify-between px-4">
             <div>
-              <CallButton href="tel:1234567890">(123) 456-7890</CallButton>
+              <CallButton
+                className="border-none"
+                href={props.invocaPhoneNumberLink}
+              >
+                {props.invocaPhoneNumberDisplayText}
+              </CallButton>
             </div>
             <div>
-              <Button onClick={closeMenu} className="focus-item flex">
+              <ContentfulButton
+                showButtonAs="unstyled"
+                buttonClassName="focus-item flex"
+                onClick={closeMenu}
+              >
                 <MaterialIcon name="close" />
-              </Button>
+              </ContentfulButton>
             </div>
           </div>
           <MobileSearchInput

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

@@ -1,6 +1,5 @@
 import React from "react";
 
-import { Button as CoreButton } from "@shared/components/button";
 import { MaterialIcon } from "@shared/components/material-icon";
 import { Button } from "@shared/contentful/blocks/button";
 import { ButtonProps as ContentfulButtonProps } from "@shared/contentful/blocks/button/types";
@@ -44,18 +43,19 @@ export const MobileLinkGroups: React.FC<LinkGroupsProps> = ({ link }) => {
 
   return (
     <>
-      <CoreButton
+      <Button
         onClick={() => setIsOpen(prev => !prev)}
         aria-expanded={isOpen}
-        className="label3 flex h-11 w-full items-center px-4"
+        buttonClassName="label3 flex h-11 w-full items-center px-4"
         key={anchorId}
+        showButtonAs="unstyled"
       >
         {title ?? null}
         <MaterialIcon
           weight="700"
           name={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"}
         />
-      </CoreButton>
+      </Button>
       {isOpen && subMenu.length > 0 && <RenderSubMenu items={subMenu} />}
     </>
   );

package/src/contentful/blocks/navigation/types.ts

@@ -32,6 +32,8 @@ export interface Navigation {
   showCallButton?: boolean;
   showMobileSliderMenu?: boolean;
   showCallNowCtaInMainNav?: boolean;
+  invocaPhoneNumberLink?: string;
+  invocaPhoneNumberDisplayText?: string;
   checkPlansJSX?: React.ReactNode;
   onSearch?: (query: string) => void;
 }

package/src/contentful/blocks/primary-hero/index.tsx

@@ -37,7 +37,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
             {title && (
               <Text
                 as={showAsHeading ? "h1" : "h2"}
-                className="heading2 font-bold lg:heading1"
+                className="heading2 lg:heading1"
               >
                 {title}
               </Text>