@windstream/react-shared-components 0.0.16 → 0.0.18

package/dist/core.d.ts

@@ -59,7 +59,7 @@ declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAtt
     size?: "slim" | "medium" | "large" | undefined;
     label?: string | undefined;
     errorText?: string | undefined;
-    prefixIconName?: "search" | "location_on" | undefined;
+    prefixIconName?: "location_on" | "search" | undefined;
     prefixIconSize?: 20 | 24 | 40 | 48 | undefined;
     prefixIconFill?: boolean | undefined;
     suffixIconFill?: boolean | undefined;
@@ -295,7 +295,7 @@ type ButtonCustomProps = {
 };
 type ButtonProps = ButtonCustomProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "className">;
 
-declare const BrandButton: React$1.ForwardRefExoticComponent<_shared_components_brand_button_types.ButtonCustomProps & Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "className"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const BrandButton: React$1.ForwardRefExoticComponent<_shared_components_brand_button_types.ButtonCustomProps & Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "children"> & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare const Checklist: React__default.FC<ChecklistProps>;
 

package/package.json

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

package/src/contentful/blocks/cta-callout/index.tsx

@@ -1,4 +1,3 @@
-"use client";
 import React from "react";
 import { CtaCalloutProps, ThemeKey } from "./types";
 import { Text } from "@shared/components/text";

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

@@ -22,7 +22,7 @@ export const Footer: React.FC<FooterProps> = ({
         />
         <div className="grid-1 grid gap-8 md:grid-cols-2 lg:grid-cols-4 py-8">
           {links?.map((link: any, index: number) => (
-            <>
+            <div key={`footer-link-group-${index}`}>
               <div className="site-links-group" key={`link-group-${index}`}>
                 <div>{link?.title}</div>
                 <div className="flex flex-col">
@@ -40,7 +40,7 @@ export const Footer: React.FC<FooterProps> = ({
                   "bg-white h-[1px] border-t-0 opacity-100 dark:opacity-50 block md:hidden "
                 }
               />
-            </>
+            </div>
           ))}
         </div>
 

package/src/contentful/blocks/image-promo-bar/index.tsx

@@ -1,7 +1,88 @@
 import { ImagePromoBarProps } from "./types";
+import React from "react";
+export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
+  brow,
+  showAsHeading,
+  title,
+  subTitle,
+  ctaDisclaimer,
+  disclaimer,
+  description,
+  image,
+  imageLinks,
+  mediaPosition,
+  openDescriptionLinksOnANewTab,
+  checklist,
+  secondaryCta,
+  cta,
+  videoLink,
+  maxWidth = true,
+}) => {
+  return (
+    <div className="component-container">
+      <div
+        className={`image-promo-bar-content ${maxWidth ? "mx-auto max-w-120" : ""}`}
+      >
+        {/* Header Section */}
+        {brow && <div>{brow}</div>}
+        {title && (showAsHeading ? <h1>{title}</h1> : <div>{title}</div>)}
+        {subTitle && <div>{subTitle}</div>}
 
-export const ImagePromoBar: React.FC<{ fields: ImagePromoBarProps }> = ({ fields }) => {
-  return <div>Image Promo Bar</div>;
+        {/* Media Section */}
+        {image && (
+          <img
+            className={`${mediaPosition ? "media-right" : "media-left"}`}
+            src={image}
+            alt={title}
+          />
+        )}
+
+        {/* Content Section */}
+        {description && <div>{description}</div>}
+        {openDescriptionLinksOnANewTab && <div>Links open in new tab: Yes</div>}
+
+        {/* Checklist Rendering */}
+        {checklist?.map((item, index) => (
+          <div key={item.anchorId || index} className="checklist-item">
+            {item.iconUrl && <img src={item.iconUrl} alt="" />}
+            <span>{item.title}</span>
+          </div>
+        ))}
+
+        {/* Image Links Collection */}
+        {imageLinks?.map((link, index) => (
+          <div key={index} className="image-link">
+            <a href={link.url}>image : {link.image}</a>
+          </div>
+        ))}
+
+        {/* Video Link Section */}
+        {videoLink?.link && (
+          <div className="video-section">
+            {videoLink.image && (
+              <img src={videoLink.image} alt="Video preview" />
+            )}
+            <div>Video URL: {videoLink.link}</div>
+            {videoLink.videoPopup && <div>Mode: Popup</div>}
+          </div>
+        )}
+
+        {/* CTAs and Disclaimers */}
+        {cta && (
+          <div className="primary-cta">
+            {/* Render Button component here */}
+          </div>
+        )}
+        {secondaryCta && (
+          <div className="secondary-cta">
+            {/* Render Button component here */}
+          </div>
+        )}
+        {ctaDisclaimer && <div>{ctaDisclaimer}</div>}
+        {disclaimer && <div>{disclaimer}</div>}
+      </div>
+    </div>
+  );
 };
 
 export default ImagePromoBar;

package/src/contentful/blocks/image-promo-bar/types.ts

@@ -1 +1,28 @@
-export type ImagePromoBarProps = {}
+import React from "react";
+
+export type ImagePromoBarProps = {
+    brow: string;
+    showAsHeading: boolean;
+    title: string;
+    subTitle: string;
+    image: string;
+    mediaPosition: boolean;
+    description: React.ReactNode;
+    openDescriptionLinksOnANewTab: boolean;
+    checklist: {
+        title: string;
+        iconUrl?: string;
+        anchorId?: string;
+    }[];
+    disclaimer: React.ReactNode;
+    imageLinks: { url: string; image: string }[];
+    cta: any;
+    secondaryCta: any;
+    ctaDisclaimer: React.ReactNode;
+    videoLink: {
+        image?: string;
+        videoPopup?: boolean;
+        link?: string;
+    };
+    maxWidth?: boolean;
+};

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

@@ -1,7 +1,77 @@
 import { PrimaryHeroProps } from "./types";
+import React from "react";
+export const PrimaryHero: React.FC<PrimaryHeroProps> = ({
+  maxWidth = true,
+  title,
+  showAsHeading,
+  subTitle,
+  price,
+  priceSuffix,
+  priceCallout,
+  pricingDescription,
+  pricingDescriptionDisclaimer,
+  checklist,
+  logoLockup,
+  checkAvailabilityEyebrow,
+  primaryCtaPrefix1,
+  primaryCtaPrefix2,
+  primaryCta1,
+  primaryCta2,
+  secondaryCtaPrefix,
+  secondaryCta,
+  carouselImages,
+  squareImage,
+  badgeImage,
+  bottomLink,
+}) => {
+  return (
+    <div className="component-container">
+      <div
+        className={`primary-hero-container ${maxWidth ? "mx-auto max-w-120" : ""}`}
+      >
+        {/* Text Content */}
+        {title && <div>{title}</div>}
+        {showAsHeading && <div>Heading Mode: {String(showAsHeading)}</div>}
+        {subTitle && <div>{subTitle}</div>}
 
-export const PrimaryHero: React.FC<{ fields: PrimaryHeroProps }> = ({ fields }) => {
-  return <div>Primary Hero</div>;
+        {/* Pricing Section */}
+        {price && <div>{price}</div>}
+        {priceSuffix && <div>{priceSuffix}</div>}
+        {priceCallout && <div>{priceCallout}</div>}
+        {pricingDescription && <div>{pricingDescription}</div>}
+        {pricingDescriptionDisclaimer && (
+          <div>{pricingDescriptionDisclaimer}</div>
+        )}
+
+        {/* Assets & Logos */}
+        {logoLockup && <div>Logo: {logoLockup}</div>}
+        {badgeImage && <div>Badge: {badgeImage}</div>}
+        {squareImage && <div>Square Layout: {String(squareImage)}</div>}
+
+        {/* Checklist */}
+        {checklist?.map((item) => (
+          <div key={item.anchorId}>Checklist Item: {item.title}</div>
+        ))}
+
+        {/* CTAs & Availability */}
+        {checkAvailabilityEyebrow && <div>{checkAvailabilityEyebrow}</div>}
+        {primaryCtaPrefix1 && <div>{primaryCtaPrefix1}</div>}
+        {primaryCta1 && <div>CTA 1: {primaryCta1.label}</div>}
+        {primaryCtaPrefix2 && <div>{primaryCtaPrefix2}</div>}
+        {primaryCta2 && <div>CTA 2: {primaryCta2.label}</div>}
+        {secondaryCtaPrefix && <div>{secondaryCtaPrefix}</div>}
+        {secondaryCta && <div>Secondary: {secondaryCta.label}</div>}
+        {bottomLink && <div>Bottom Link: {bottomLink.label}</div>}
+
+        {/* Carousel URLs via hook */}
+        {carouselImages?.map((url, index) => (
+          <div key={index}>
+            Carousel Image {index + 1}: {url}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
 };
 
 export default PrimaryHero;

package/src/contentful/blocks/primary-hero/types.ts

@@ -1 +1,29 @@
-export type PrimaryHeroProps = {}
+export type PrimaryHeroProps = {
+    title: string;
+    showAsHeading?: boolean;
+    subTitle?: string;
+    price?: string;
+    priceSuffix?: string;
+    priceCallout?: string;
+    pricingDescription?: string;
+    pricingDescriptionDisclaimer?: string;
+    checklist?: {
+        title: string;
+        iconUrl?: string;
+        anchorId?: string;
+    }[];
+    logoLockup?: string;
+    checkAvailabilityEyebrow?: string;
+    primaryCtaPrefix1?: string;
+    primaryCtaPrefix2?: string;
+    primaryCta1?: any;
+    primaryCta2?: any;
+    secondaryCtaPrefix?: string;
+    secondaryCta?: any;
+    bottomLink?: any;
+    carouselImages?: string[];
+    squareImage?: boolean;
+    badgeImage?: string;
+    textColor?: string;
+    maxWidth?: boolean;
+};