@windstream/react-shared-components 0.1.70 → 0.1.72

package/src/contentful/blocks/cards/simple-card/types.ts

@@ -1,21 +1,64 @@
-import { ReactNode } from "react";
-import { ButtonProps } from "../../button/types";
+import type { CSSProperties, ReactNode } from "react";
+import type { ButtonProps } from "../../button/types";
+
+export type PinwheelColor =
+  | "Blue-#307998"
+  | "Green-#209A61"
+  | "Orange-#DE7E0A"
+  | "Purple-#7E1458"
+  | (string & {});
+
+export type SimpleCardCtaBottom = {
+  title?: string;
+  href?: string;
+};
 
 export type Item = {
   title?: string;
   image?: string;
+  imageAlt?: string;
+  imageWidth?: number;
+  imageHeight?: number;
   imageAlignment?: "left" | "right" | "center";
-  imageView?: "standard" | "icon" | "full";
+  iconAlignment?: "left" | "right" | "center";
+  /**
+   * Layout variant for the image. `standard` / `icon` render an inline
+   * icon above the content. `full` renders a full-bleed top image.
+   * `margin` is `full` with horizontal padding.
+   */
+  imageView?: "standard" | "icon" | "full" | "margin" | "inset";
+  body?: ReactNode;
+  /** Optional secondary rich-text region (port of local `richText`). */
+  richText?: ReactNode;
   cta?: ButtonProps;
   ctaAlignment?: "left" | "right" | "center";
-  body?: ReactNode;
+  /** Top "location" CTA, rendered above the title with a `location_on` icon. */
+  ctaBottom?: SimpleCardCtaBottom;
+  ctaAlignmentBottom?: "left" | "right" | "center";
+  /** Legacy token-based card background (mapped via `backgroundColorMap`). */
   backgroundColor?: string;
+  /** Raw color value used when `applyCardBackgroundColor` is true. */
+  applyCardBackgroundColor?: boolean;
+  textColor?: string;
+  showBackgroundImage?: boolean;
+  pinwheelColor?: PinwheelColor;
+  /** On `lg:` and up, lays out icon + content side-by-side. */
+  imageToRichTextAlignment?: boolean;
+  /** Bold label between title and the phone/hours table. */
+  titleLocation?: string;
+  phoneNumber?: string[];
+  /** Each entry uses a `label|value` separator. */
+  workingHours?: string[];
+  shadow?: boolean;
 };
 
 export type SimpleCardProps = {
   card: Item;
   lgWidth?: string;
   mdWidth?: string;
+  className?: string;
+  contentClassName?: string;
+  style?: CSSProperties;
 };
 
 export const backgroundColorMap: Record<string, string> = {

package/src/contentful/blocks/cart-retention-banner/types.ts

@@ -4,8 +4,8 @@ export interface TypeCartRetentionBannerFields {
   mainHeading?: string;
   description?: {
     json: any;
-  }; 
- cta?: { buttonLabel?: string; [key: string]: any };
+  };
+  cta?: { buttonLabel?: string; [key: string]: any };
 }
 
 export type TypeCartRetentionBanner = TypeCartRetentionBannerFields;

package/src/contentful/blocks/comparison-table/index.tsx

@@ -12,12 +12,14 @@ export const ComparisonTable: React.FC<ComparisonTableProps> = ({
   return (
     <div className="component-container">
       <div
-        className={`mx-5 mb-5 mt-8 lg:mt-10 ${maxWidth ? "max-w-120 xl:mx-auto" : ""}`}
+        className={`mx-5 mb-5 mt-8 md:mt-18 ${maxWidth ? "max-w-120 xl:mx-auto" : ""}`}
       >
-        <Text as="h2" className="heading2 lg:heading1 lg:text-center">
+        <Text as="h2" className="heading2 md:heading1 md:text-center">
           {title}
         </Text>
-        <div className="comparison-table-container mt-20 xl:mt-10">{table}</div>
+        <div className="comparison-table-container mt-5 p-5 pt-0 md:mt-10 md:px-10 md:py-9">
+          {table}
+        </div>
         <Text as="div" className="micro mt-8 text-center">
           {disclaimer}
         </Text>

package/src/contentful/blocks/email-input-block/index.tsx

@@ -1,10 +1,9 @@
 "use client";
 
 import React, { useState } from "react";
+import { Button } from "../button";
 import { EmailInputBlockProps } from "./types";
 
-import { Button } from "@shared/contentful";
-
 export const EmailInputBlock: React.FC<EmailInputBlockProps> = props => {
   const {
     anchorId = "email-input",

package/src/contentful/blocks/footer/Footer.stories.tsx

@@ -1,4 +1,5 @@
 import { Footer } from "./index";
+
 import { DocsPage } from "@shared/stories/DocsTemplate";
 import type { Meta, StoryObj } from "@storybook/react";
 
@@ -27,11 +28,13 @@ const meta: Meta<typeof Footer> = {
   argTypes: {
     body: {
       control: "text",
-      description: "HTML string for disclaimer or promotional body content at top of footer",
+      description:
+        "HTML string for disclaimer or promotional body content at top of footer",
     },
     copyrights: {
       control: "text",
-      description: "HTML string for copyright description text rendered below the year",
+      description:
+        "HTML string for copyright description text rendered below the year",
     },
     terms: {
       control: "text",
@@ -64,14 +67,46 @@ const meta: Meta<typeof Footer> = {
         title: "Explore",
         items: {
           items: [
-            { buttonLabel: "Fiber Internet", href: "/fiber-internet", showButtonAs: "text" },
-            { buttonLabel: "High-Speed Internet", href: "/high-speed-internet", showButtonAs: "text" },
-            { buttonLabel: "Whole Home Wi-Fi", href: "/whole-home-wifi", showButtonAs: "text" },
-            { buttonLabel: "Internet Security", href: "/kinetic-secure-packs", showButtonAs: "text" },
-            { buttonLabel: "AT&T Wireless", href: "/att-wireless", showButtonAs: "text" },
-            { buttonLabel: "TV & Entertainment", href: "/products", showButtonAs: "text" },
-            { buttonLabel: "Home Phone", href: "/home-phone", showButtonAs: "text" },
-            { buttonLabel: "Kinetic Wi-Fi Manager", href: "/wifi-manager", showButtonAs: "text" },
+            {
+              buttonLabel: "Fiber Internet",
+              href: "/fiber-internet",
+              showButtonAs: "text",
+            },
+            {
+              buttonLabel: "High-Speed Internet",
+              href: "/high-speed-internet",
+              showButtonAs: "text",
+            },
+            {
+              buttonLabel: "Whole Home Wi-Fi",
+              href: "/whole-home-wifi",
+              showButtonAs: "text",
+            },
+            {
+              buttonLabel: "Internet Security",
+              href: "/kinetic-secure-packs",
+              showButtonAs: "text",
+            },
+            {
+              buttonLabel: "AT&T Wireless",
+              href: "/att-wireless",
+              showButtonAs: "text",
+            },
+            {
+              buttonLabel: "TV & Entertainment",
+              href: "/products",
+              showButtonAs: "text",
+            },
+            {
+              buttonLabel: "Home Phone",
+              href: "/home-phone",
+              showButtonAs: "text",
+            },
+            {
+              buttonLabel: "Kinetic Wi-Fi Manager",
+              href: "/wifi-manager",
+              showButtonAs: "text",
+            },
           ],
         },
       },
@@ -80,14 +115,46 @@ const meta: Meta<typeof Footer> = {
         items: {
           items: [
             { buttonLabel: "Support", href: "/support", showButtonAs: "text" },
-            { buttonLabel: "Find Local", href: "/find-local", showButtonAs: "text" },
-            { buttonLabel: "Go Kinetic Customer Portal", href: "https://www.my.gokinetic.com/", showButtonAs: "text" },
-            { buttonLabel: "Move My Service", href: "/moving-my-internet-service", showButtonAs: "text" },
-            { buttonLabel: "Kinetic Blog", href: "/blog", showButtonAs: "text" },
-            { buttonLabel: "Referral Program", href: "/refer-a-friend-program", showButtonAs: "text" },
-            { buttonLabel: "Lifeline Assistance Program", href: "/lifeline", showButtonAs: "text" },
-            { buttonLabel: "Digital Literacy Program", href: "/residential/digital-literacy-program", showButtonAs: "text" },
-            { buttonLabel: "Become an Authorized Dealer", href: "/authorized-dealer", showButtonAs: "text" },
+            {
+              buttonLabel: "Find Local",
+              href: "/find-local",
+              showButtonAs: "text",
+            },
+            {
+              buttonLabel: "Go Kinetic Customer Portal",
+              href: "https://www.my.gokinetic.com/",
+              showButtonAs: "text",
+            },
+            {
+              buttonLabel: "Move My Service",
+              href: "/moving-my-internet-service",
+              showButtonAs: "text",
+            },
+            {
+              buttonLabel: "Kinetic Blog",
+              href: "/blog",
+              showButtonAs: "text",
+            },
+            {
+              buttonLabel: "Referral Program",
+              href: "/refer-a-friend-program",
+              showButtonAs: "text",
+            },
+            {
+              buttonLabel: "Lifeline Assistance Program",
+              href: "/lifeline",
+              showButtonAs: "text",
+            },
+            {
+              buttonLabel: "Digital Literacy Program",
+              href: "/residential/digital-literacy-program",
+              showButtonAs: "text",
+            },
+            {
+              buttonLabel: "Become an Authorized Dealer",
+              href: "/authorized-dealer",
+              showButtonAs: "text",
+            },
           ],
         },
       },
@@ -98,12 +165,36 @@ const meta: Meta<typeof Footer> = {
             { buttonLabel: "About Us", href: "/about", showButtonAs: "text" },
             { buttonLabel: "Careers", href: "/careers", showButtonAs: "text" },
             { buttonLabel: "News", href: "/news", showButtonAs: "text" },
-            { buttonLabel: "Investor Relations", href: "https://investor.windstream.com", showButtonAs: "text" },
-            { buttonLabel: "Suppliers", href: "/about/supplier-information", showButtonAs: "text" },
-            { buttonLabel: "Offer Conditions", href: "/offer-conditions", showButtonAs: "text" },
-            { buttonLabel: "Broadband Network Statement", href: "/about/legal/broadband-network-statement", showButtonAs: "text" },
-            { buttonLabel: "Law Enforcement Support Center", href: "/law-enforcement-support-center-2", showButtonAs: "text" },
-            { buttonLabel: "Call Authentication Statement", href: "/about/legal/call-authentication-statement", showButtonAs: "text" },
+            {
+              buttonLabel: "Investor Relations",
+              href: "https://investor.windstream.com",
+              showButtonAs: "text",
+            },
+            {
+              buttonLabel: "Suppliers",
+              href: "/about/supplier-information",
+              showButtonAs: "text",
+            },
+            {
+              buttonLabel: "Offer Conditions",
+              href: "/offer-conditions",
+              showButtonAs: "text",
+            },
+            {
+              buttonLabel: "Broadband Network Statement",
+              href: "/about/legal/broadband-network-statement",
+              showButtonAs: "text",
+            },
+            {
+              buttonLabel: "Law Enforcement Support Center",
+              href: "/law-enforcement-support-center-2",
+              showButtonAs: "text",
+            },
+            {
+              buttonLabel: "Call Authentication Statement",
+              href: "/about/legal/call-authentication-statement",
+              showButtonAs: "text",
+            },
           ],
         },
       },
@@ -112,16 +203,36 @@ const meta: Meta<typeof Footer> = {
         items: {
           items: [
             { buttonLabel: "Residential", href: "/", showButtonAs: "text" },
-            { buttonLabel: "Business", href: "/business", showButtonAs: "text" },
-            { buttonLabel: "Uniti Solutions", href: "/enterprise", showButtonAs: "text" },
+            {
+              buttonLabel: "Business",
+              href: "/business",
+              showButtonAs: "text",
+            },
+            {
+              buttonLabel: "Uniti Solutions",
+              href: "/enterprise",
+              showButtonAs: "text",
+            },
           ],
         },
       },
     ],
     bottomLinks: [
-      { buttonLabel: "Privacy Policy", href: "/about/legal/privacy-policy", showButtonAs: "text" },
-      { buttonLabel: "Terms & Conditions", href: "/about/legal/terms-and-conditions", showButtonAs: "text" },
-      { buttonLabel: "Legal Notice", href: "/about/legal/legal-notices", showButtonAs: "text" },
+      {
+        buttonLabel: "Privacy Policy",
+        href: "/about/legal/privacy-policy",
+        showButtonAs: "text",
+      },
+      {
+        buttonLabel: "Terms & Conditions",
+        href: "/about/legal/terms-and-conditions",
+        showButtonAs: "text",
+      },
+      {
+        buttonLabel: "Legal Notice",
+        href: "/about/legal/legal-notices",
+        showButtonAs: "text",
+      },
     ],
   },
   render: ({ body, copyrights, ...rest }) => (
@@ -177,7 +288,8 @@ export const FullWidth: Story = {
   parameters: {
     docs: {
       description: {
-        story: "Footer without max-width constraint — spans full container width.",
+        story:
+          "Footer without max-width constraint — spans full container width.",
       },
     },
   },
@@ -191,7 +303,8 @@ export const Minimal: Story = {
   parameters: {
     docs: {
       description: {
-        story: "Minimal footer with only terms and copyright text — no body, no links.",
+        story:
+          "Minimal footer with only terms and copyright text — no body, no links.",
       },
     },
   },
@@ -201,4 +314,4 @@ export const Minimal: Story = {
     bottomLinks: [],
     copyrights: undefined,
   },
-};
+};

package/src/contentful/index.ts

@@ -87,8 +87,7 @@ export { EmailInputBlock } from "./blocks/email-input-block";
 export type { EmailInputBlockProps } from "./blocks/email-input-block/types";
 
 export { default as CartRetentionBanner } from "./blocks/cart-retention-banner";
-export type {TypeCartRetentionBannerFields as CartRetentionBannerProps } from "./blocks/cart-retention-banner/types";
-
+export type { TypeCartRetentionBannerFields as CartRetentionBannerProps } from "./blocks/cart-retention-banner/types";
 
 // Contentful Rich Text Hooks & Utils
 export { toDocument } from "../utils/contentful/to-document";

package/src/hooks/contentful/use-contentful-rich-text.tsx

@@ -206,15 +206,15 @@ export function renderContentfulRichTextTable(
     ...defaultOptions, // Spread defaultOptions so <p> and <strong> still work!
     renderMark: {
       ...defaultOptions.renderMark,
-      [MARKS.BOLD]: text => <strong className="label2">{text}</strong>,
+      [MARKS.BOLD]: text => (
+        <strong className="label4 md:label2">{text}</strong>
+      ),
     },
     renderNode: {
       ...defaultOptions.renderNode,
-      [BLOCKS.PARAGRAPH]: (_node, children) => (
-        <div className="body2">{children}</div>
-      ),
+      [BLOCKS.PARAGRAPH]: (_node, children) => <>{children}</>,
       [BLOCKS.TABLE]: (node: any, children) => (
-        <div className="comparison-table-wrapper my-5 w-full overflow-x-auto border-none md:overflow-hidden">
+        <div className="comparison-table-wrapper w-full overflow-x-auto border-none md:overflow-hidden">
           <table
             className={`responsive-table w-full table-fixed border-collapse ${
               node.content[0]?.content?.length > 2
@@ -230,11 +230,10 @@ export function renderContentfulRichTextTable(
         <tr className="border-b border-gray-200 last:border-0">{children}</tr>
       ),
       [BLOCKS.TABLE_HEADER_CELL]: (node: any, children) => {
-        // Find the parent row to check total column count
         const isScrollable = node.parent?.content.length > 2;
         return (
           <th
-            className={`label4 break-words py-4 text-center ${isScrollable ? "sticky left-0 z-20 w-[50vw] min-w-[50vw] first:z-30 first:w-[50vw] first:min-w-[50vw] first:border-r" : "w-1/4 first:w-1/2"} `}
+            className={`label4 break-words py-4 text-center md:label2 ${isScrollable ? "sticky left-0 z-20 w-[50vw] min-w-[50vw] first:z-30 first:w-[50vw] first:min-w-[50vw] first:border-r" : "w-1/4 first:w-1/2"} `}
           >
             {children}
           </th>
@@ -263,7 +262,7 @@ export function renderContentfulRichTextTable(
 
         return (
           <td
-            className={`rt-table-cell label-4 break-words bg-white py-2 text-center align-top first:text-left ${
+            className={`rt-table-cell footnote break-words bg-white py-2 text-center align-top leading-5 text-text md:body2 first:text-left md:leading-7 ${
               isScrollable
                 ? "w-[50vw] min-w-[50vw] first:sticky first:left-0 first:z-10 first:w-[50vw] first:min-w-[50vw] first:border-r"
                 : "w-1/4 first:w-1/2"
@@ -289,14 +288,14 @@ export function renderContentfulRichTextTable(
               renderContentfulRichText(
                 toDocument(item?.checkListTitle ?? ""),
                 true,
-                "body2"
+                ""
               )
             ) || [];
           return (
             <Checklist
               items={items}
               listIconName="disc"
-              listItemClassName="items-baseline body2"
+              listItemClassName="items-baseline footnote md:body2 leading-5 md:leading-7 text-text"
             />
           );
         }

package/src/utils/index.ts

@@ -1,6 +1,9 @@
 export { cx, clsx } from "./cx";
 export type { ClassValue } from "./cx";
 
+// Decorative SVG generators
+export { SpeedCardBg } from "./speed-card-bg";
+
 // UTM & Cookie utilities
 export {
   getUTMs,

package/src/utils/speed-card-bg.ts

@@ -0,0 +1,24 @@
+/**
+ * Returns an inline SVG string for the SpeedCard pinwheel decorative
+ * background. The two paths are filled with the provided color so callers
+ * can theme the background dynamically (used by SimpleCard when
+ * `showBackgroundImage` is enabled and a `pinwheelColor` is provided).
+ *
+ * Output is intended to be embedded as a `data:image/svg+xml;utf8,...`
+ * `background-image`. Encode the result with `encodeURIComponent`.
+ */
+export const SpeedCardBg = (color: string = "#24A76A"): string => {
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="684" height="107" viewBox="0 0 684 107" fill="none">
+    <g clip-path="url(#clip0_12352_9042)">
+      <path d="M154.09 -70.5605C173.769 -7.58032 204.79 24.8889 328.202 55.2823C444.619 83.9133 629.479 141.332 667.653 80.7015C691.679 45.2165 678.322 -5.62201 670.537 -46.3554C664.452 -73.1846 658.327 -97.1939 652.913 -123.475C651.135 -132.091 638.766 -131.974 637.067 -123.318C628.136 -77.6888 612.526 -44.9062 577.593 -22.4637C517.962 20.1889 377.954 -6.48361 303.148 -38.287C223.245 -70.7171 200.918 -132.366 195.425 -199.341C193.37 -235.257 198.467 -269.841 208.07 -299.569C210.915 -308.303 199.218 -314.178 193.844 -306.697C151.324 -247.751 137.69 -140.395 154.129 -70.5213" fill="${color}" />
+      <path d="M167.605 -417.382C104.062 -397.877 71.302 -367.131 40.6368 -244.813C11.7499 -129.428 -46.182 53.7941 14.9903 91.6292C50.7927 115.443 102.086 102.204 143.183 94.4883C170.253 88.4567 194.476 82.3858 220.992 77.02C229.686 75.2574 229.568 62.9983 220.834 61.3141C174.797 52.4624 141.721 36.9915 119.078 2.36813C76.0441 -56.7345 102.955 -195.502 135.043 -269.645C167.763 -348.84 229.963 -370.969 297.537 -376.414C333.774 -378.45 368.667 -373.398 398.661 -363.88C407.473 -361.06 413.401 -372.654 405.853 -377.98C346.38 -420.124 238.064 -433.636 167.565 -417.343" fill="${color}" />
+    </g>
+    <defs>
+      <clipPath id="clip0_12352_9042">
+        <rect width="684" height="107" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>`;
+};
+
+export default SpeedCardBg;