@windstream/react-shared-components 0.1.71 → 0.1.73

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/hooks/contentful/use-contentful-rich-text.tsx

@@ -206,7 +206,9 @@ export function renderContentfulRichTextTable(
     ...defaultOptions, // Spread defaultOptions so <p> and <strong> still work!
     renderMark: {
       ...defaultOptions.renderMark,
-      [MARKS.BOLD]: text => <strong className="label4 md:label2">{text}</strong>,
+      [MARKS.BOLD]: text => (
+        <strong className="label4 md:label2">{text}</strong>
+      ),
     },
     renderNode: {
       ...defaultOptions.renderNode,
@@ -231,7 +233,7 @@ export function renderContentfulRichTextTable(
         const isScrollable = node.parent?.content.length > 2;
         return (
           <th
-            className={`label4 md:label2 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>
@@ -260,7 +262,7 @@ export function renderContentfulRichTextTable(
 
         return (
           <td
-            className={`rt-table-cell footnote md:body2 leading-5 md:leading-7 text-text break-words bg-white py-2 text-center align-top first:text-left ${
+            className={`rt-table-cell footnote break-words bg-white py-2 md:py-4 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"

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;