@windstream/react-shared-components 0.1.64 → 0.1.68

package/src/contentful/blocks/floating-banner/FloatingBanner.stories.tsx

@@ -1,34 +1,34 @@
-import { FloatingBanner } from "./index";
-
-import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof FloatingBanner> = {
-  title: "Contentful Blocks/FloatingBanner",
-  component: FloatingBanner,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    docs: {
-      page: DocsPage,
-      description: {
-        component: "Contentful floating banner block.",
-      },
-    },
-  },
-  args: {
-    title: "test",
-    enableHeading: false,
-    subtitle: "Test",
-    icon: "https://images.ctfassets.net/lefc0joykfg0/xt7XD2oCXK79H8pyMyMb8/18aead59bc97d624b5bd91b2f9f04352/banner_call_icon.svg",
-    description: <p>test</p>,
-    cta: null,
-    disclaimer: <p>test</p>,
-    background: "green",
-    color: "light",
-    maxWidth: true,
-  },
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export const Default: Story = {};
+import { FloatingBanner } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof FloatingBanner> = {
+  title: "Contentful Blocks/FloatingBanner",
+  component: FloatingBanner,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component: "Contentful floating banner block.",
+      },
+    },
+  },
+  args: {
+    title: "test",
+    enableHeading: false,
+    subtitle: "Test",
+    icon: "https://images.ctfassets.net/lefc0joykfg0/xt7XD2oCXK79H8pyMyMb8/18aead59bc97d624b5bd91b2f9f04352/banner_call_icon.svg",
+    description: <p>test</p>,
+    cta: null,
+    disclaimer: <p>test</p>,
+    background: "green",
+    color: "light",
+    maxWidth: true,
+  },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};

package/src/contentful/blocks/floating-banner/index.tsx

@@ -1,97 +1,97 @@
-import React from "react";
-import { FloatingBannerProps, ThemeKey } from "./types";
-
-import { NextImage } from "@shared/components/next-image";
-import { Text } from "@shared/components/text";
-import { Button } from "@shared/contentful/blocks/button";
-
-export const FloatingBanner: React.FC<FloatingBannerProps> = ({
-  title,
-  subtitle,
-  description,
-  disclaimer,
-  icon,
-  cta,
-  background = "navy",
-  color = "light",
-  enableHeading,
-  maxWidth = true,
-}) => {
-  const bgColorClasses: Record<ThemeKey, string> = {
-    blue: "bg-[#07B2E2]",
-    green: "bg-[#26B170]",
-    yellow: "bg-[#F5FF1E]",
-    purple: "bg-[#931D69]",
-    white: "bg-white",
-    navy: "bg-[#00002D]",
-  };
-
-  return (
-    <div className="component-container">
-      <div
-        className={`mx-5 my-8 lg:mx-20 lg:my-12 lg:rounded-surface-lg xl:mx-auto ${maxWidth ? "max-w-120" : ""}`}
-      >
-        <div
-          className={`flex flex-col rounded-surface px-5 py-7 lg:flex-row lg:gap-5 lg:rounded-surface-lg lg:px-16 lg:py-9 ${bgColorClasses[background]} ${color == "dark" ? "text-text" : "text-white"} `}
-        >
-          {icon && (
-            <div className="floating-banner-icon mb-5 flex justify-center lg:mb-0 lg:items-center">
-              <div className="h-[80px] w-[80px] overflow-hidden">
-                <NextImage
-                  width={80}
-                  height={80}
-                  alt="icon"
-                  src={icon}
-                ></NextImage>
-              </div>
-            </div>
-          )}
-          <div className="flex w-full flex-col justify-center lg:w-4/5">
-            {title && (
-              <Text
-                as={enableHeading ? "h1" : "h2"}
-                className={`heading5 mb-3 text-center lg:w-[95%] lg:text-left`}
-              >
-                {title}
-              </Text>
-            )}
-            {subtitle && (
-              <Text
-                as={"h3"}
-                className={`heading3 mb-3 text-center lg:text-left`}
-              >
-                {subtitle}
-              </Text>
-            )}
-            {description && (
-              <Text
-                as="div"
-                className="body1 text-center lg:w-[95%] lg:text-left"
-              >
-                {description}
-              </Text>
-            )}
-          </div>
-          {cta && (
-            <div className="mt-5 flex flex-shrink-0 justify-center lg:mt-0 lg:items-center">
-              <Button
-                {...cta}
-                buttonVariant="secondary"
-                size={{ base: "medium", md: "large" }}
-              ></Button>
-            </div>
-          )}
-        </div>
-        {disclaimer && (
-          <div>
-            <Text as="div" className="body3 mt-3 text-center">
-              {disclaimer}
-            </Text>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default FloatingBanner;
+import React from "react";
+import { FloatingBannerProps, ThemeKey } from "./types";
+
+import { NextImage } from "@shared/components/next-image";
+import { Text } from "@shared/components/text";
+import { Button } from "@shared/contentful/blocks/button";
+
+export const FloatingBanner: React.FC<FloatingBannerProps> = ({
+  title,
+  subtitle,
+  description,
+  disclaimer,
+  icon,
+  cta,
+  background = "navy",
+  color = "light",
+  enableHeading,
+  maxWidth = true,
+}) => {
+  const bgColorClasses: Record<ThemeKey, string> = {
+    blue: "bg-[#07B2E2]",
+    green: "bg-[#26B170]",
+    yellow: "bg-[#F5FF1E]",
+    purple: "bg-[#931D69]",
+    white: "bg-white",
+    navy: "bg-[#00002D]",
+  };
+
+  return (
+    <div className="component-container">
+      <div
+        className={`mx-5 my-8 lg:mx-20 lg:my-12 lg:rounded-surface-lg xl:mx-auto ${maxWidth ? "max-w-120" : ""}`}
+      >
+        <div
+          className={`flex flex-col rounded-surface px-5 py-7 lg:flex-row lg:gap-5 lg:rounded-surface-lg lg:px-16 lg:py-9 ${bgColorClasses[background]} ${color == "dark" ? "text-text" : "text-white"} `}
+        >
+          {icon && (
+            <div className="floating-banner-icon mb-5 flex justify-center lg:mb-0 lg:items-center">
+              <div className="h-[80px] w-[80px] overflow-hidden">
+                <NextImage
+                  width={80}
+                  height={80}
+                  alt="icon"
+                  src={icon}
+                ></NextImage>
+              </div>
+            </div>
+          )}
+          <div className="flex w-full flex-col justify-center lg:w-4/5">
+            {title && (
+              <Text
+                as={enableHeading ? "h1" : "h2"}
+                className={`heading5 mb-3 text-center lg:w-[95%] lg:text-left`}
+              >
+                {title}
+              </Text>
+            )}
+            {subtitle && (
+              <Text
+                as={"h3"}
+                className={`heading3 mb-3 text-center lg:text-left`}
+              >
+                {subtitle}
+              </Text>
+            )}
+            {description && (
+              <Text
+                as="div"
+                className="body1 text-center lg:w-[95%] lg:text-left"
+              >
+                {description}
+              </Text>
+            )}
+          </div>
+          {cta && (
+            <div className="mt-5 flex flex-shrink-0 justify-center lg:mt-0 lg:items-center">
+              <Button
+                {...cta}
+                buttonVariant="secondary"
+                size={{ base: "medium", md: "large" }}
+              ></Button>
+            </div>
+          )}
+        </div>
+        {disclaimer && (
+          <div>
+            <Text as="div" className="body3 mt-3 text-center">
+              {disclaimer}
+            </Text>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default FloatingBanner;

package/src/contentful/blocks/floating-banner/types.ts

@@ -1,22 +1,22 @@
-import React from "react";
-
-export type FloatingBannerProps = {
-  title?: string;
-  enableHeading?: boolean;
-  subtitle?: string;
-  icon?: string;
-  description?: React.ReactNode;
-  cta?: any | null;
-  disclaimer?: React.ReactNode;
-  background?: "green" | "navy" | "white" | "purple" | "blue" | "yellow";
-  color?: "dark" | "light";
-  maxWidth?: boolean;
-};
-
-export type ThemeKey =
-  | "blue"
-  | "green"
-  | "yellow"
-  | "purple"
-  | "white"
-  | "navy";
+import React from "react";
+
+export type FloatingBannerProps = {
+  title?: string;
+  enableHeading?: boolean;
+  subtitle?: string;
+  icon?: string;
+  description?: React.ReactNode;
+  cta?: any | null;
+  disclaimer?: React.ReactNode;
+  background?: "green" | "navy" | "white" | "purple" | "blue" | "yellow";
+  color?: "dark" | "light";
+  maxWidth?: boolean;
+};
+
+export type ThemeKey =
+  | "blue"
+  | "green"
+  | "yellow"
+  | "purple"
+  | "white"
+  | "navy";

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

@@ -1,30 +1,204 @@
-import { Footer } from "./index";
-
-import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof Footer> = {
-  title: "Contentful Blocks/Footer",
-  component: Footer,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    docs: {
-      page: DocsPage,
-      description: {
-        component:
-          "Contentful footer block with body, links, copyrights, and terms.",
-      },
-    },
-  },
-  args: {
-    body: "Footer body content",
-    copyrights: "Company Name",
-    terms: "All rights reserved",
-    links: [],
-    bottomLinks: [],
-  },
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export const Default: Story = {};
+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: "fullscreen",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "Contentful footer block with body, links, copyrights, and terms.",
+      },
+    },
+  },
+  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: 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,
+  },
+};