@windstream/react-shared-components 0.0.15 → 0.0.17

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;

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" | "focus" | "active" | "hover" | "filled" | "error" | undefined;
-    size?: "slim" | "medium" | "large" | undefined;
+    state?: "default" | "error" | "filled" | "active" | "focus" | "hover" | undefined;
+    size?: "medium" | "large" | "slim" | undefined;
     label?: string | undefined;
     errorText?: string | undefined;
-    prefixIconName?: "location_on" | "search" | undefined;
+    prefixIconName?: "search" | "location_on" | undefined;
     prefixIconSize?: 20 | 24 | 40 | 48 | undefined;
     prefixIconFill?: boolean | undefined;
     suffixIconFill?: boolean | undefined;
-    suffixIconName?: "visibility" | "visibility_off" | "lock" | undefined;
+    suffixIconName?: "visibility" | "lock" | "visibility_off" | 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<HTMLUListElement | HTMLOListElement>>;
+declare const List: React__default.ForwardRefExoticComponent<ListProps & React__default.RefAttributes<HTMLOListElement | HTMLUListElement>>;
 
 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"];
@@ -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>, "className" | "children"> & React$1.RefAttributes<HTMLButtonElement>>;
+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 Checklist: React__default.FC<ChecklistProps>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windstream/react-shared-components",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "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";
@@ -25,28 +24,31 @@ export const CtaCallout: React.FC<CtaCalloutProps> = ({
     navy: "bg-[#00002D]",
   };
   return (
-    <div
-      className={`${bgColorClasses[background]} ${maxWidth ? "mx-auto max-w-120" : ""} flex flex-col text-${color} px-5 py-16 lg:px-13 lg:py-24 `}
-    >
-      <Text
-        as={enableHeading ? "h1" : "h2"}
-        className={`heading2 lg:heading1 text-${contentAlignment}`}
+    <div className={`${bgColorClasses[background]} component-container`}>
+      <div
+        className={`${maxWidth ? "mx-auto max-w-120" : ""} flex flex-col text-${color} px-5 py-16 lg:px-13 lg:py-24 `}
       >
-        {title}
-      </Text>
-      <Text
-        as="h3"
-        className={`subheading3 pt-2 lg:pt-3 lg:subheading1 text-${contentAlignment}`}
-      >
-        {subTitle}
-      </Text>
-      <div className={`text-body1 pt-2 lg:pt-3 text-${descriptionAlignment}`}>
-        {description}
-      </div>
-      <div className="pt-5 lg:pt-14 flex justify-center ">
-        <Button {...button} />
+        <Text
+          as={enableHeading ? "h1" : "h2"}
+          className={`heading2 lg:heading1 text-${contentAlignment}`}
+        >
+          {title}
+        </Text>
+        <Text
+          as="h3"
+          className={`subheading3 pt-2 lg:pt-3 lg:subheading1 text-${contentAlignment}`}
+        >
+          {subTitle}
+        </Text>
+        <div className={`text-body1 pt-2 lg:pt-3 text-${descriptionAlignment}`}>
+          {description}
+        </div>
+        <div className="pt-5 lg:pt-14 flex justify-center ">
+          <Button {...button} />
+        </div>
       </div>
     </div>
+   
   );
 };
 export default CtaCallout;

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

@@ -10,60 +10,63 @@ export const Footer: React.FC<FooterProps> = ({
   maxWidth = true,
 }) => {
   return (
-    <div
-      className={` ${maxWidth ? "mx-auto max-w-120" : ""} px-5 py-8 lg:px-[120px] lg:py-18`}
-    >
-      <div>{body}</div>
+    <div className="component-container bg-bg-surface-inverse text-white">
       <div
-        className={
-          "bg-white h-[1px] border-t-0 opacity-100 dark:opacity-50 my-8 lg:my-16"
-        }
-      />
-      <div className="grid-1 grid gap-8 md:grid-cols-2 lg:grid-cols-4 py-8">
-        {links?.map((link: any, index: number) => (
-          <>
-            <div className="site-links-group" key={`link-group-${index}`}>
-              <div>{link?.title}</div>
-              <div className="flex flex-col">
-                {link?.itemsCollection?.items?.map(
-                  (site: any, _index: number) => (
-                    <div className="pt-3" key={`site-links-${_index}`}>
-                      <Button {...site} />
-                    </div>
-                  ),
-                )}
+        className={` ${maxWidth ? "mx-auto max-w-120" : ""} px-5 py-8 lg:px-[120px] lg:py-18`}
+      >
+        <div>{body}</div>
+        <div
+          className={
+            "bg-white h-[1px] border-t-0 opacity-100 dark:opacity-50 my-8 lg:my-16"
+          }
+        />
+        <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">
+                  {link?.itemsCollection?.items?.map(
+                    (site: any, _index: number) => (
+                      <div className="pt-3" key={`site-links-${_index}`}>
+                        <Button {...site} />
+                      </div>
+                    ),
+                  )}
+                </div>
               </div>
-            </div>
-            <div
-              className={
-                "bg-white h-[1px] border-t-0 opacity-100 dark:opacity-50 block md:hidden "
-              }
-            />
-          </>
-        ))}
-      </div>
-
-      <div className="pt-8">
-        <p className="copy-rights">{copyrights}</p>
-        <p className="terms-text text-sm font-normal ">
-          &copy; {new Date().getFullYear()} {terms}
-        </p>
-        <ul className="bottom-links list-none">
-          {bottomLinks?.map((link: any, index: number) => (
-            <li
-              key={`links-${index}`}
-              className="relative float-left pl-[8px] first-of-type:pl-0 first-of-type:before:content-[''] before:content-['•'] before:absolute before:left-[3px] before:top-1/2 before:-translate-y-1/2 before:text-[14px]"
-            >
-              <Button
-                {...link}
-                className="text-sm font-normal"
-                linkVariant="unstyled"
+              <div
+                className={
+                  "bg-white h-[1px] border-t-0 opacity-100 dark:opacity-50 block md:hidden "
+                }
               />
-            </li>
+            </div>
           ))}
-        </ul>
+        </div>
+
+        <div className="pt-8">
+          <p className="copy-rights">{copyrights}</p>
+          <p className="terms-text text-sm font-normal ">
+            &copy; {new Date().getFullYear()} {terms}
+          </p>
+          <ul className="bottom-links list-none">
+            {bottomLinks?.map((link: any, index: number) => (
+              <li
+                key={`links-${index}`}
+                className="relative float-left pl-[8px] first-of-type:pl-0 first-of-type:before:content-[''] before:content-['•'] before:absolute before:left-[3px] before:top-1/2 before:-translate-y-1/2 before:text-[14px]"
+              >
+                <Button
+                  {...link}
+                  className="text-sm font-normal"
+                  linkVariant="unstyled"
+                />
+              </li>
+            ))}
+          </ul>
+        </div>
       </div>
     </div>
+   
   );
 };
 

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,25 @@
-export type PrimaryHeroProps = {}
+export type PrimaryHeroProps = {
+    title: string;
+    showAsHeading?: boolean;
+    subTitle?: string;
+    price?: string;
+    priceSuffix?: string;
+    priceCallout?: string;
+    pricingDescription?: string;
+    pricingDescriptionDisclaimer?: string;
+    checklist?: any[];
+    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;
+};