@windstream/react-shared-components 0.2.41 → 0.2.43

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

@@ -52,12 +52,28 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
   const mobileVideoUrl = heroVideoMobile?.url?.trim();
   const hasDesktopVideo = !!desktopVideoUrl;
   const hasMobileVideo = !!mobileVideoUrl;
+  const normalizeImageUrl = (url?: string) =>
+    url?.startsWith("//") ? `https:${url}` : url;
+  const badgeImageUrl = normalizeImageUrl(badgeImage);
+  const heroImageUrl = normalizeImageUrl(carouselImages?.[0]);
   const bottomLinkLabel = bottomLink?.buttonLabel ?? bottomLink?.label;
   const baseTextColorClass = textColor === "dark" ? "text-text" : "text-white";
   const textColorClass =
     hasDesktopVideo && textColor === "dark"
       ? `${baseTextColorClass} xl:text-white`
       : baseTextColorClass;
+  const Badge = ({ className }: { className: string }) =>
+    badgeImageUrl ? (
+      <NextImage
+        src={badgeImageUrl}
+        alt="Badge"
+        className={className}
+        width={208}
+        height={208}
+        quality={90}
+        loading="eager"
+      />
+    ) : null;
   return (
     <div className="component-container relative overflow-hidden p-4 sm:px-6 sm:py-12 xl:flex xl:min-h-[724px] xl:items-center xl:px-10">
       {hasDesktopVideo ? (
@@ -267,23 +283,26 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
         <div className="w-full xl:hidden">
           <div className={"relative my-8"}>
             {hasMobileVideo ? (
-              <video
-                autoPlay={true}
-                muted={true}
-                loop={true}
-                playsInline={true}
-                preload="auto"
-                aria-label={heroVideoMobile?.title || title || "Hero video"}
-                className="h-[350px] w-full rounded-[40px] object-cover object-center sm:h-[420px] md:h-[520px]"
-                data-testid="hero-video-mobile"
-              >
-                <source src={mobileVideoUrl} type="video/mp4" />
-              </video>
+              <div className="relative">
+                <video
+                  autoPlay={true}
+                  muted={true}
+                  loop={true}
+                  playsInline={true}
+                  preload="auto"
+                  aria-label={heroVideoMobile?.title || title || "Hero video"}
+                  className="h-[350px] w-full rounded-[40px] object-cover object-center sm:h-[420px] md:h-[520px]"
+                  data-testid="hero-video-mobile"
+                >
+                  <source src={mobileVideoUrl} type="video/mp4" />
+                </video>
+                <Badge className="absolute left-5 top-5 z-10 aspect-square w-26 object-cover object-center" />
+              </div>
             ) : (
               <>
                 {badgeImage ? (
                   <NextImage
-                    src={badgeImage}
+                    src={badgeImageUrl || ""}
                     alt={"Badge"}
                     className="absolute left-5 top-5 aspect-square w-26 object-cover object-center"
                     width={104}
@@ -292,9 +311,9 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                     loading="eager"
                   />
                 ) : null}
-                {carouselImages && carouselImages[0] ? (
+                {heroImageUrl ? (
                   <NextImage
-                    src={carouselImages[0]}
+                    src={heroImageUrl}
                     alt={"Hero"}
                     className="h-[205px] w-full rounded-[40px] object-cover object-center sm:h-[420px]"
                     width={1024}
@@ -339,32 +358,25 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
         </div>
 
         {/* Right column: bright blue background, diagonal top edge, hero image */}
-        {!hasDesktopVideo ? (
-          <div className={cx("relative hidden xl:block")}>
-            {badgeImage ? (
-              <NextImage
-                src={badgeImage}
-                alt={"Badge"}
-                className="absolute -left-26 top-18 aspect-square w-52 object-cover object-center"
-                width={208}
-                height={208}
-                quality={90}
-                loading="eager"
-              />
-            ) : null}
-            {carouselImages && carouselImages[0] ? (
-              <NextImage
-                src={carouselImages[0]}
-                alt={"Hero"}
-                className="aspect-square rounded-[40px] object-cover object-center"
-                width={600}
-                height={600}
-                quality={90}
-                loading="eager"
-              />
-            ) : null}
-          </div>
-        ) : null}
+        <div
+          className={cx(
+            "relative hidden xl:block",
+            hasDesktopVideo && "h-[600px] w-[600px]"
+          )}
+        >
+          <Badge className="absolute -left-26 top-18 z-10 aspect-square w-52 object-cover object-center" />
+          {!hasDesktopVideo && heroImageUrl ? (
+            <NextImage
+              src={heroImageUrl}
+              alt={"Hero"}
+              className="aspect-square rounded-[40px] object-cover object-center"
+              width={600}
+              height={600}
+              quality={90}
+              loading="eager"
+            />
+          ) : null}
+        </div>
       </div>
     </div>
   );

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

@@ -549,9 +549,10 @@ describe("useContentfulRichText", () => {
     const { container } = render(<>{result.current}</>);
     expect(container.querySelector("h1")).toHaveTextContent("H1");
     expect(container.querySelector("h2")).toHaveTextContent("H2");
-    // h3-h6 all render as h3 per defaultOptions
-    const h3s = container.querySelectorAll("h3");
-    expect(h3s.length).toBe(4);
+    expect(container.querySelector("h3")).toHaveTextContent("H3");
+    expect(container.querySelector("h4")).toHaveTextContent("H4");
+    expect(container.querySelector("h5")).toHaveTextContent("H5");
+    expect(container.querySelector("h6")).toHaveTextContent("H6");
   });
 
   it("renders unordered list", () => {

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}
           >