@windstream/react-shared-components 0.1.63 → 0.1.67

package/src/contentful/blocks/cart-retention-banner/index.tsx

@@ -1,12 +1,13 @@
 "use client";
-import { Text } from "@shared/components/text";
-import type { TypeCartRetentionBannerFields } from "./types";
+
 import { useEffect, useState } from "react";
+import type { TypeCartRetentionBannerFields } from "./types";
+
+import { Text } from "@shared/components/text";
 import { Button } from "@shared/contentful/blocks/button";
 import { Modal } from "@shared/contentful/blocks/modal";
-import { toDocument } from "@shared/utils/contentful/to-document";
 import { renderContentfulRichText } from "@shared/hooks/contentful/use-contentful-rich-text";
-
+import { toDocument } from "@shared/utils/contentful/to-document";
 
 const CartRetentionBanner: React.FC<{
   fields: TypeCartRetentionBannerFields;
@@ -16,12 +17,18 @@ const CartRetentionBanner: React.FC<{
   onContinueCheckout?: () => void;
   checkShouldShowBanner?: () => boolean;
   onBannerShown?: () => void;
-}> = ({ fields, isInPopupContainer = false, onClose, onContinueCheckout, checkShouldShowBanner, onBannerShown }) => {
+}> = ({
+  fields,
+  isInPopupContainer = false,
+  onClose,
+  onContinueCheckout,
+  checkShouldShowBanner,
+  onBannerShown,
+}) => {
   const { anchorId, mainHeading, description, cta } = fields;
 
   const [modalOpen, setModalOpen] = useState<boolean>(false);
 
-
   useEffect(() => {
     const checkRetentionCookie = () => {
       if (checkShouldShowBanner?.() && !modalOpen) {
@@ -39,28 +46,30 @@ const CartRetentionBanner: React.FC<{
     setModalOpen(false);
   };
 
- const continueCheckout = () => {
+  const continueCheckout = () => {
     onContinueCheckout?.();
   };
 
   if (isInPopupContainer) {
     return (
-      <div className="mb-5 mt-10 flex w-full flex-col items-center justify-center">
-        <Text
-        className="heading5 lg:heading3 text-center">
+      <div
+        className="pop-up-body mb-5 mt-10 flex w-full flex-col items-center justify-center"
+        data-section-type={"cart-retention-banner"}
+        data-section-index={"0"}
+      >
+        <Text className="heading5 text-center lg:heading3">
           {mainHeading || "Welcome back. Let’s finish your order"}
         </Text>
         {description &&
-            renderContentfulRichText(
-              toDocument(description?.json),
-              false,
-              "body1 my-4"
-            )
-          }
-          <Button
-            onClick={continueCheckout}
-            buttonLabel={cta?.buttonLabel ?? "Continue checkout"}
-          />
+          renderContentfulRichText(
+            toDocument(description?.json),
+            false,
+            "body1 my-4"
+          )}
+        <Button
+          onClick={continueCheckout}
+          buttonLabel={cta?.buttonLabel ?? "Continue checkout"}
+        />
       </div>
     );
   }
@@ -71,10 +80,10 @@ const CartRetentionBanner: React.FC<{
         isOpen={modalOpen}
         onRequestClose={handleClose}
         bodyClassName="flex items-center justify-center"
+        type="cart-retention-banner"
       >
-        <div className="mb-5 mt-10 flex w-full flex-col items-center justify-center">
-           <Text
-        className="heading5 lg:heading3 text-center">
+        <div className="pop-up-body mb-5 mt-10 flex w-full flex-col items-center justify-center">
+          <Text className="heading5 text-center lg:heading3">
             {mainHeading || "Welcome back. Let&apos;s finish your order"}
           </Text>
           {description &&
@@ -82,8 +91,7 @@ const CartRetentionBanner: React.FC<{
               toDocument(description?.json),
               false,
               "body1 my-4"
-            )
-          }
+            )}
           <Button
             onClick={continueCheckout}
             buttonLabel={cta?.buttonLabel ?? "Continue checkout"}

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

@@ -1,14 +1,21 @@
 import { Footer } from "./index";
-
 import { DocsPage } from "@shared/stories/DocsTemplate";
 import type { Meta, StoryObj } from "@storybook/react";
 
+// ─── Mock Data ────────────────────────────────────────────────────────────────
+const mockBody = `<p><strong>Kinetic's multi-Gig Fiber upload speeds</strong> are faster than advertised cable upload speeds, excluding areas where cable providers offer symmetrical upload speeds for service tiers 1 Gig and above. Speed comparison based upon publicly available advertised speeds in Kinetic's footprint as of February 2026.</p>
+<br/><p><strong>99.9% Network Reliability:</strong> Kinetic Network Reliability based on monthly service availability scores from March 2023 to Dec. 2025 as measured by the Kinetic Network Operations Center using the formula Available Customer Hours divided by Total Customer Hours (Available Customer Hours plus Customer Outage Hours). Customer Outage Hours does not include planned maintenance, emergency events (hurricanes, winter storms, mass flooding, etc.).</p>
+<br/><p><strong>100% Fiber excludes some multitenant units.</strong></p>
+<br/><p><strong>The Kinetic Promise</strong> - relies on reasonable effort to confirm Wi-Fi works in living spaces where customer grants technician access. Wi-Fi coverage &amp; performance vary by layout, building materials, interference, &amp; device capability. Not a guarantee of uniform coverage, speed, or error-free service. Add. equipment or wiring may be required &amp; incur charges; certain areas/devices (e.g., detached structures or outdoor spaces) may be excluded. Customer may cancel any time.</p>`;
+
+const mockCopyrights = `<strong>Uniti2101</strong><br/><strong>Riverfront Drive</strong><br/><strong>Little Rock, Arkansas 72202</strong><br/><br/>`;
+
 const meta: Meta<typeof Footer> = {
   title: "Contentful Blocks/Footer",
   component: Footer,
   tags: ["autodocs"],
   parameters: {
-    layout: "centered",
+    layout: "fullscreen",
     docs: {
       page: DocsPage,
       description: {
@@ -17,14 +24,181 @@ const meta: Meta<typeof Footer> = {
       },
     },
   },
+  argTypes: {
+    body: {
+      control: "text",
+      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",
+    },
+    terms: {
+      control: "text",
+      description: "Company name shown after © year symbol",
+    },
+    links: {
+      control: "object",
+      description: "Navigation link groups rendered as columns",
+    },
+    bottomLinks: {
+      control: "object",
+      description: "Legal bottom links rendered inline with bullet separators",
+    },
+    maxWidth: {
+      control: "boolean",
+      description: "Constrains footer content to max-width centered layout",
+    },
+    onClick: {
+      action: "clicked",
+      description: "Callback fired when any footer link is clicked",
+    },
+  },
   args: {
-    body: "Footer body content",
-    copyrights: "Company Name",
-    terms: "All rights reserved",
-    links: [],
-    bottomLinks: [],
+    body: mockBody,
+    copyrights: mockCopyrights,
+    terms: "All rights reserved Uniti Group, Inc.",
+    maxWidth: true,
+    links: [
+      {
+        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" },
+          ],
+        },
+      },
+      {
+        title: "Resources",
+        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" },
+          ],
+        },
+      },
+      {
+        title: "Company",
+        items: {
+          items: [
+            { 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" },
+          ],
+        },
+      },
+      {
+        title: "Kinetic",
+        items: {
+          items: [
+            { buttonLabel: "Residential", href: "/", 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" },
+    ],
   },
+  render: ({ body, copyrights, ...rest }) => (
+    <Footer
+      {...rest}
+      body={
+        body ? (
+          <div dangerouslySetInnerHTML={{ __html: body as string }} />
+        ) : undefined
+      }
+      copyrights={
+        copyrights ? (
+          <div dangerouslySetInnerHTML={{ __html: copyrights as string }} />
+        ) : undefined
+      }
+    />
+  ),
 };
+
 export default meta;
 type Story = StoryObj<typeof meta>;
+
 export const Default: Story = {};
+
+export const NoLinks: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: "Footer without navigation link group columns.",
+      },
+    },
+  },
+  args: {
+    links: [],
+  },
+};
+
+export const NoBottomLinks: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: "Footer without bottom copyright and legal links row.",
+      },
+    },
+  },
+  args: {
+    bottomLinks: [],
+  },
+};
+
+/**no max-width constraint */
+export const FullWidth: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: "Footer without max-width constraint — spans full container width.",
+      },
+    },
+  },
+  args: {
+    maxWidth: false,
+  },
+};
+
+/**terms and copyright, no links or body */
+export const Minimal: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: "Minimal footer with only terms and copyright text — no body, no links.",
+      },
+    },
+  },
+  args: {
+    body: undefined,
+    links: [],
+    bottomLinks: [],
+    copyrights: undefined,
+  },
+};