@windstream/react-shared-components 0.2.39 → 0.2.42

package/src/contentful/blocks/carousel/index.test.tsx

@@ -152,13 +152,12 @@ describe("Carousel", () => {
       expect(screen.getByTestId("product-card-carousel")).toBeInTheDocument();
     });
 
-    it("does not render ProductCardCarousel when showSwitch is false", () => {
+    it("renders ProductCardCarousel when hasProductCards is true even if showSwitch is false", () => {
       render(
         <Carousel {...defaultProps} hasProductCards={true} showSwitch={false} />
       );
-      expect(
-        screen.queryByTestId("product-card-carousel")
-      ).not.toBeInTheDocument();
+      expect(screen.getByTestId("product-card-carousel")).toBeInTheDocument();
+      expect(screen.queryByTestId("tab-switch")).not.toBeInTheDocument();
     });
 
     it("renders TabSwitch when showSwitch and hasProductCards with multiple tabs", () => {
@@ -279,7 +278,7 @@ describe("Carousel", () => {
       expect(screen.getByTestId("testimonial-carousel")).toBeInTheDocument();
     });
 
-    it("does not render product carousel when showSwitch is false even with hasProductCards", () => {
+    it("renders product carousel and hides tab switch when showSwitch is false with hasProductCards", () => {
       render(
         <Carousel
           {...defaultProps}
@@ -288,9 +287,8 @@ describe("Carousel", () => {
           hasTestimonialCards={false}
         />
       );
-      expect(
-        screen.queryByTestId("product-card-carousel")
-      ).not.toBeInTheDocument();
+      expect(screen.getByTestId("product-card-carousel")).toBeInTheDocument();
+      expect(screen.queryByTestId("tab-switch")).not.toBeInTheDocument();
     });
 
     it("renders with empty tabs array and no TabSwitch", () => {

package/src/contentful/blocks/carousel/types.test.ts

@@ -10,6 +10,16 @@ describe("carousel types exports", () => {
     expect(backgroundColorMap.white).toBe("bg-white");
   });
 
+  it("exports backgroundColorMap with only the supported color keys", () => {
+    expect(Object.keys(backgroundColorMap)).toEqual([
+      "blue",
+      "green",
+      "orange",
+      "purple",
+      "white",
+    ]);
+  });
+
   it("exports DEFAULT_TABS", () => {
     expect(DEFAULT_TABS).toEqual(["Business Ready", "Internet Only"]);
   });

package/src/contentful/blocks/cta-callout/CtaCallout.stories.tsx

@@ -29,7 +29,6 @@ const meta: Meta<typeof CtaCallout> = {
       buttonPrefix: "",
       badge: "",
       badgeIcon: "",
-      buttonIcon: "",
       buttonIconPosition: "left",
       href: "",
       target: "_self",

package/src/contentful/blocks/dynamic-tabs/ordered-tab-views.tsx

@@ -175,7 +175,7 @@ export function OrderedSidebarView({
   return (
     <div className="flex gap-10 px-5 py-20">
       <div className="flex-shrink-0">
-        <div className="flex min-w-[320px] gap-4 rounded-[20px] border-2 bg-bg-surface-active px-6 py-7 shadow-lg">
+        <div className="flex min-w-[320px] gap-4 rounded-[20px] border-2 px-6 py-7 shadow-lg">
           {[...new Array(Math.min(2, items.length))].map((_, colIdx) => {
             const perColumn = Math.ceil(items.length / 2);
 

package/src/contentful/blocks/ordered-list/index.tsx

@@ -30,7 +30,7 @@ export const OrderedList = ({
       return (
         <Text
           key={`ordered-item-${index}`}
-          className="body2 relative text-left leading-7"
+          className="body1 relative text-left leading-7"
         >
           {formatItemName(item.itemName)}
         </Text>
@@ -44,7 +44,7 @@ export const OrderedList = ({
         title={item.itemName.toUpperCase()}
         className="flex items-center underline underline-offset-4"
       >
-        <Text className="body2 relative cursor-pointer text-left leading-7">
+        <Text className="body1 relative cursor-pointer text-left leading-7">
           {formatItemName(item.itemName)}
         </Text>
       </Link>

package/src/contentful/blocks/primary-hero/index.tsx

@@ -328,7 +328,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
           ) : null}
 
           {bottomLink && (bottomLinkLabel || bottomLink?.href) && (
-            <div className="lg:hidden">
+            <div className="flex lg:hidden">
               <Button
                 {...bottomLink}
                 onModalButtonClick={onModalButtonClick}

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

@@ -20,10 +20,66 @@ const isEmptyParagraph = (node: any): boolean =>
   Array.isArray(node?.content) &&
   node.content.every(
     (child: any) =>
-      child?.nodeType === "text" &&
-      (!child.value || child.value.trim() === "")
+      child?.nodeType === "text" && (!child.value || child.value.trim() === "")
   );
 
+// A link is "external" only when it belongs to a different app than the one
+// currently rendering this shared component (business vs. main/www are separate
+// apps). Matching is environment-agnostic so a prod link like
+// business.gokinetic.com is still "internal" while running on business-dev.
+const hostFromUrl = (value?: string): string => {
+  if (!value) return "";
+  try {
+    const withProtocol = /^https?:\/\//i.test(value)
+      ? value
+      : `https://${value}`;
+    return new URL(withProtocol).hostname.toLowerCase();
+  } catch {
+    return "";
+  }
+};
+
+// e.g. "business-dev.gokinetic.com" -> "gokinetic.com|business",
+//      "kinetic-dev.gokinetic.com" / "www.gokinetic.com" -> "gokinetic.com|main"
+const appIdentity = (host: string): string => {
+  const clean = host.toLowerCase().replace(/\.$/, "");
+  const base = clean.split(".").slice(-2).join(".");
+  const subdomain = clean
+    .slice(0, clean.length - base.length)
+    .replace(/\.$/, "");
+  const firstLabel = (subdomain.split(".")[0] || "").replace(
+    /-(dev|development|staging|stage|qa|test|uat|prod|production)$/,
+    ""
+  );
+  const app =
+    firstLabel === "" || firstLabel === "www" || firstLabel === "kinetic"
+      ? "main"
+      : firstLabel;
+  return `${base}|${app}`;
+};
+
+const getCurrentHost = (): string => {
+  const envHost =
+    hostFromUrl(process.env.NEXT_PUBLIC_SITE_URL) ||
+    hostFromUrl(process.env.NEXT_PUBLIC_MAIN_SITE_URL);
+  if (envHost) return envHost;
+  if (typeof window !== "undefined")
+    return window.location.hostname.toLowerCase();
+  return "";
+};
+
+const isExternalUrl = (url: string): boolean => {
+  if (!/^https?:\/\//i.test(url)) return false; // relative links are always internal
+  try {
+    const linkHost = new URL(url).hostname.toLowerCase();
+    const currentHost = getCurrentHost();
+    if (!currentHost) return true; // host unknown (SSR without env) → treat as external
+    return appIdentity(linkHost) !== appIdentity(currentHost);
+  } catch {
+    return false;
+  }
+};
+
 const defaultOptions: Options = {
   renderMark: {
     [MARKS.BOLD]: text => <strong className="font-black">{text}</strong>,
@@ -80,12 +136,12 @@ const defaultOptions: Options = {
 
     [INLINES.HYPERLINK]: (node, children) => {
       const url = (node as any)?.data?.uri as string;
-      const external = /^https?:\/\//.test(url);
+      const external = isExternalUrl(url);
       return (
         <a
           href={url}
           target={external ? "_blank" : undefined}
-          rel={external ? "noopener noreferrer" : undefined}
+          rel={external ? "noopener" : undefined}
         >
           {children}
         </a>
@@ -167,22 +223,26 @@ export function renderContentfulRichText(
       ...options?.renderNode,
       // Logic for links based on the isTargetBlank flag
       [BLOCKS.PARAGRAPH]: (node, children) => (
-        <div className={[className, "whitespace-pre-line"].filter(Boolean).join(" ")}>
+        <div
+          className={[className, "whitespace-pre-line"]
+            .filter(Boolean)
+            .join(" ")}
+        >
           {isEmptyParagraph(node) ? "\n" : children}
         </div>
       ),
       [INLINES.HYPERLINK]: (node, children) => {
         const url = (node as any)?.data?.uri as string;
-        const external = /^https?:\/\//.test(url);
+        const external = isExternalUrl(url);
 
-        // Priority: 1. Manual flag from Contentful, 2. Regex check for external URLs
+        // Priority: 1. Manual flag from Contentful, 2. Same-domain URLs are internal
         const shouldOpenBlank = target ?? external;
 
         return (
           <Link
             href={url}
-            target={shouldOpenBlank ? "_blank" : "_self"}
-            rel={shouldOpenBlank ? "noopener noreferrer" : undefined}
+            target={shouldOpenBlank ? "_blank" : undefined}
+            rel={shouldOpenBlank ? "noopener" : undefined}
             variant="default"
             className={linkClassName}
           >

package/src/hooks/use-carousel-swipe.test.ts

@@ -1,3 +1,4 @@
+import { TextDecoder, TextEncoder } from "util";
 import React from "react";
 import { CarouselSwipeConfig, useCarouselSwipe } from "./use-carousel-swipe";
 
@@ -368,6 +369,28 @@ describe("useCarouselSwipe", () => {
       expect(result.current.containerWidth).toBe(800);
     });
 
+    it("uses the attached containerRef width when present", () => {
+      Object.defineProperty(window, "innerWidth", {
+        writable: true,
+        value: 1024,
+      });
+
+      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
+      const container = document.createElement("div");
+
+      Object.defineProperty(container, "offsetWidth", {
+        configurable: true,
+        value: 640,
+      });
+
+      act(() => {
+        result.current.containerRef.current = container as HTMLDivElement;
+        window.dispatchEvent(new Event("resize"));
+      });
+
+      expect(result.current.containerWidth).toBe(640);
+    });
+
     it("uses custom mobileBreakpoint", () => {
       Object.defineProperty(window, "innerWidth", {
         writable: true,
@@ -392,13 +415,10 @@ describe("useCarouselSwipe", () => {
   });
 
   describe("SSR safety (window undefined)", () => {
-    it("can be created without throwing when window is undefined and uses fallback containerWidth", () => {
+    it("can be created without throwing when window is undefined and uses fallback containerWidth", async () => {
       const origWindow = globalThis.window;
       // @ts-expect-error - intentionally deleting window to simulate SSR
       delete globalThis.window;
-
-      // Polyfill TextEncoder/TextDecoder required by react-dom/server in jest
-      const { TextEncoder, TextDecoder } = require("util");
       const origTE = globalThis.TextEncoder;
       const origTD = globalThis.TextDecoder;
       globalThis.TextEncoder = TextEncoder;
@@ -412,8 +432,8 @@ describe("useCarouselSwipe", () => {
       }
 
       try {
-        // eslint-disable-next-line @typescript-eslint/no-var-requires
-        const { renderToString } = require("react-dom/server");
+        const { renderToString } = await import("react-dom/server");
+
         // renderToString simulates real SSR: no window, no effects run
         renderToString(React.createElement(TestComponent));
 

package/src/types/micro-components.ts

@@ -24,8 +24,8 @@ export interface Button {
   preserveQueryParameters: boolean; // non-null in your model
   badgeIcon?: Asset | null;
   buttonVariant?: "primary_brand" | "primary_inverse" | "secondary" | null;
-  buttonIcon?: Asset | null;
-  buttonIconPosition?: boolean | null; // matches EntryFieldTypes.Boolean in your model
+  buttonIconName?: string | null;
+  buttonIconPosition?: "left" | "right" | null;
   clickToOpen?: "accordion" | "modal" | "tab" | null;
   tabmodalNameToOpen?: string | null;
   preDefinedFunctionExecution?: "check availability" | null;