@windstream/react-shared-components 0.0.17 → 0.0.18

package/dist/index.d.ts

@@ -55,15 +55,15 @@ type InputFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & {
 
 declare const InputField: ForwardRefRenderFunction<HTMLInputElement, InputFieldProps>;
 declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> & {
-    state?: "default" | "error" | "filled" | "active" | "focus" | "hover" | undefined;
-    size?: "medium" | "large" | "slim" | undefined;
+    state?: "default" | "focus" | "active" | "hover" | "filled" | "error" | undefined;
+    size?: "slim" | "medium" | "large" | undefined;
     label?: string | undefined;
     errorText?: string | undefined;
     prefixIconName?: "search" | "location_on" | undefined;
     prefixIconSize?: 20 | 24 | 40 | 48 | undefined;
     prefixIconFill?: boolean | undefined;
     suffixIconFill?: boolean | undefined;
-    suffixIconName?: "visibility" | "lock" | "visibility_off" | undefined;
+    suffixIconName?: "visibility" | "visibility_off" | "lock" | undefined;
     suffixIconSize?: 20 | 24 | 40 | 48 | undefined;
     containerClassName?: string | undefined;
     prefixIconClassName?: string | undefined;
@@ -130,7 +130,7 @@ interface ListItemProps extends LiHTMLAttributes<HTMLLIElement> {
 
 declare const ListItem: React$1.ForwardRefExoticComponent<ListItemProps & React$1.RefAttributes<HTMLLIElement>>;
 
-declare const List: React__default.ForwardRefExoticComponent<ListProps & React__default.RefAttributes<HTMLOListElement | HTMLUListElement>>;
+declare const List: React__default.ForwardRefExoticComponent<ListProps & React__default.RefAttributes<HTMLUListElement | HTMLOListElement>>;
 
 declare const iconNameList: readonly ["info", "download", "featured_seasonal_and_gifts", "visibility", "paid", "check_box", "check_box_outline_blank", "radio_button_unchecked", "radio_button_checked", "counter_1", "counter_2", "counter_3", "error", "search", "cancel", "router", "broadcast_on_home", "check", "check_circle", "lock", "shield_lock", "phone_in_talk", "call", "chevron_left", "chevron_right", "keyboard_arrow_down", "keyboard_arrow_up", "arrow_back", "arrow_forward", "help", "home_pin", "location_on", "timer", "schedule", "add", "remove", "bolt", "rocket", "cloud_sync", "close", "groups", "speed", "mail", "credit_card", "language", "forum", "contract", "local_atm", "headset_mic", "sensors", "wifi", "settings", "home", "devices", "build", "thumb_up", "desktop_windows", "block", "all_inclusive", "verified_user", "extension", "stadia_controller", "visibility_off", "close_fullscreen", "progress_activity", "travel_explore", "share", "business_center", "upload", "videocam", "expand_circle_right", "add_circle", "do_not_disturb_on", "expand_circle_up", "expand_circle_down", "replay", "fiber_manual_record", "menu", "dangerous"];
 declare const OpticalSizes: readonly ["20dp", "24dp", "40dp", "48dp"];

package/package.json

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

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/types.ts

@@ -7,7 +7,11 @@ export type PrimaryHeroProps = {
     priceCallout?: string;
     pricingDescription?: string;
     pricingDescriptionDisclaimer?: string;
-    checklist?: any[];
+    checklist?: {
+        title: string;
+        iconUrl?: string;
+        anchorId?: string;
+    }[];
     logoLockup?: string;
     checkAvailabilityEyebrow?: string;
     primaryCtaPrefix1?: string;