@windstream/react-shared-components 0.2.2 → 0.2.3

package/src/contentful/blocks/blogs-grid/index.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useEffect, useRef } from "react";
 import { BlogCategoryOption, BlogGridProps } from "./types";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 
@@ -19,6 +20,15 @@ export function BlogGrid({
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
+  const isInitialMount = useRef(true);
+
+  useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      return;
+    }
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  }, [currentPage]);
 
   function updateQueryParams(key: string, value: string) {
     const params = new URLSearchParams(searchParams.toString());
@@ -40,9 +50,19 @@ export function BlogGrid({
     updateQueryParams("category", cat.value === "all" ? "" : cat.value);
   }
 
-  function handlePageChange(page: number) {
-    updateQueryParams("page", page === 1 ? "" : page.toString());
-    window.scrollTo({ top: 0, behavior: "smooth" });
+  function handlePageChange(_page: number) {
+    // Scroll is handled by the useEffect on currentPage change
+  }
+
+  function getPageHref(page: number): string {
+    const params = new URLSearchParams(searchParams.toString());
+    if (page === 1) {
+      params.delete("page");
+    } else {
+      params.set("page", page.toString());
+    }
+    const qs = params.toString();
+    return qs ? `${pathname}?${qs}` : pathname;
   }
 
   return (
@@ -125,6 +145,7 @@ export function BlogGrid({
         <Pagination
           currentPage={currentPage}
           totalPages={totalPages}
+          getPageHref={getPageHref}
           onPageChange={handlePageChange}
           ariaLabel="Blog article pagination"
         />

package/src/contentful/blocks/blogs-grid-base/index.tsx

@@ -15,6 +15,7 @@ export function BlogGridBase({
   categoryOptions,
   onCategoryChange,
   onPageChange,
+  getPageHref,
   imageComponent,
 }: BlogGridBaseProps) {
   function handleCategoryChange(value: unknown) {
@@ -110,6 +111,7 @@ export function BlogGridBase({
         <Pagination
           currentPage={currentPage}
           totalPages={totalPages}
+          getPageHref={getPageHref}
           onPageChange={handlePageChange}
           ariaLabel="Blog article pagination"
         />

package/src/contentful/blocks/blogs-grid-base/types.ts

@@ -26,6 +26,7 @@ export interface BlogGridBaseProps {
   categoryOptions: BlogCategoryOption[];
   onCategoryChange?: (category: BlogCategoryOption) => void;
   onPageChange?: (page: number) => void;
+  getPageHref: (page: number) => string;
   /** Pass next/image's Image component here to enable image optimization */
   imageComponent?: React.ComponentType<BlogCardImageProps>;
 }

package/src/contentful/blocks/breadcrumbs/index.tsx

@@ -1,95 +1,95 @@
-import React from "react";
-import { BreadcrumbNavigationProps } from "./types";
-
-import { MaterialIcon } from "@shared/components/material-icon";
-import { Text } from "@shared/components/text";
-
-export const BreadcrumbNavigation: React.FC<
-  BreadcrumbNavigationProps
-> = props => {
-  const {
-    links = [],
-    textColor = "dark",
-    mobileTextColor,
-    desktopTextColor,
-    maxWidth = true,
-    float = "desktop",
-  } = props;
-  const resolvedMobile =
-    mobileTextColor ?? (float === "desktop" ? "dark" : textColor);
-  const resolvedDesktop =
-    desktopTextColor ?? (float === "mobile" ? "dark" : textColor);
-  const mobileColor = resolvedMobile === "dark" ? "text-text" : "text-white";
-  const desktopColor =
-    resolvedDesktop === "dark" ? "xl:text-text" : "xl:text-white";
-  const color = `${mobileColor} ${desktopColor}`;
-
-  const olPosition =
-    float === "always"
-      ? "absolute"
-      : float === "mobile"
-        ? "absolute xl:relative"
-        : float === "desktop"
-          ? "relative xl:absolute"
-          : "relative";
-
-  if (!links.length) return null;
-  return (
-    <nav
-      aria-label="Breadcrumb"
-      className={`${maxWidth ? `${float === "none" && "mx-5"} max-w-120 xl:mx-auto` : "mx-auto"} relative`}
-    >
-      <ol
-        className={`${float === "always" && "px-7 md:px-14"} right-0 z-10 mx-0 flex w-full flex-nowrap items-center gap-2 pb-0 pt-8 ${olPosition} xl:mx-auto xl:flex-wrap xl:px-3`}
-      >
-        {links.map((link, index) => {
-          const { image, ...linkProps } = link;
-          const imageSrc = image?.url
-            ? image.url.startsWith("//")
-              ? `https:${image.url}`
-              : image.url
-            : "";
-          const isLast = index === links.length - 1;
-          return !isLast ? (
-            <li key={index} className="flex flex-none items-center">
-              {imageSrc && (
-                <img
-                  src={imageSrc}
-                  alt={image?.alt || ""}
-                  width={20}
-                  height={20}
-                  className="mr-2 h-10 w-10"
-                />
-              )}
-              <a
-                href={linkProps.href}
-                className={`label3 mr-2 whitespace-nowrap ${color} hover:underline`}
-              >
-                {linkProps.buttonLabel}
-              </a>
-
-              <MaterialIcon name="chevron_right" className={`${color} `} />
-            </li>
-          ) : (
-            <li key={index} className="flex min-w-0 items-center">
-              {imageSrc && (
-                <img
-                  src={imageSrc}
-                  alt={image?.alt || ""}
-                  width={20}
-                  height={20}
-                  className="mr-2 h-10 w-10"
-                />
-              )}
-              <Text as="span" className={`body3 mr-2 break-words ${color}`}>
-                {link.buttonLabel}
-              </Text>
-            </li>
-          );
-        })}
-      </ol>
-    </nav>
-  );
-};
-
-export default BreadcrumbNavigation;
+import React from "react";
+import { BreadcrumbNavigationProps } from "./types";
+
+import { MaterialIcon } from "@shared/components/material-icon";
+import { Text } from "@shared/components/text";
+
+export const BreadcrumbNavigation: React.FC<
+  BreadcrumbNavigationProps
+> = props => {
+  const {
+    links = [],
+    textColor = "dark",
+    mobileTextColor,
+    desktopTextColor,
+    maxWidth = true,
+    float = "desktop",
+  } = props;
+  const resolvedMobile =
+    mobileTextColor ?? (float === "desktop" ? "dark" : textColor);
+  const resolvedDesktop =
+    desktopTextColor ?? (float === "mobile" ? "dark" : textColor);
+  const mobileColor = resolvedMobile === "dark" ? "text-text" : "text-white";
+  const desktopColor =
+    resolvedDesktop === "dark" ? "xl:text-text" : "xl:text-white";
+  const color = `${mobileColor} ${desktopColor}`;
+
+  const olPosition =
+    float === "always"
+      ? "absolute"
+      : float === "mobile"
+        ? "absolute xl:relative"
+        : float === "desktop"
+          ? "relative xl:absolute"
+          : "relative";
+
+  if (!links.length) return null;
+  return (
+    <nav
+      aria-label="Breadcrumb"
+      className={`${maxWidth ? `${float === "none" && "mx-5"} max-w-120 xl:mx-auto` : "mx-auto"} relative`}
+    >
+      <ol
+        className={`${float === "always" && "px-7 md:px-14"} right-0 z-10 mx-0 flex w-full flex-nowrap items-center gap-2 pb-0 pt-8 ${olPosition} xl:mx-auto xl:flex-wrap xl:px-3`}
+      >
+        {links.map((link, index) => {
+          const { image, ...linkProps } = link;
+          const imageSrc = image?.url
+            ? image.url.startsWith("//")
+              ? `https:${image.url}`
+              : image.url
+            : "";
+          const isLast = index === links.length - 1;
+          return !isLast ? (
+            <li key={index} className="flex flex-none items-center">
+              {imageSrc && (
+                <img
+                  src={imageSrc}
+                  alt={image?.alt || ""}
+                  width={20}
+                  height={20}
+                  className="mr-2 h-10 w-10"
+                />
+              )}
+              <a
+                href={linkProps.href}
+                className={`label3 mr-2 whitespace-nowrap ${color} hover:underline`}
+              >
+                {linkProps.buttonLabel}
+              </a>
+
+              <MaterialIcon name="chevron_right" className={`${color} `} />
+            </li>
+          ) : (
+            <li key={index} className="flex min-w-0 items-center">
+              {imageSrc && (
+                <img
+                  src={imageSrc}
+                  alt={image?.alt || ""}
+                  width={20}
+                  height={20}
+                  className="mr-2 h-10 w-10"
+                />
+              )}
+              <Text as="span" className={`body3 mr-2 break-words ${color}`}>
+                {link.buttonLabel}
+              </Text>
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+};
+
+export default BreadcrumbNavigation;

package/src/contentful/blocks/callout/index.tsx

@@ -95,7 +95,7 @@ export const Callout: React.FC<CalloutProps> = ({
   //     flex-wrap layout that always renders multi-column on md+ and
   //     full-width on mobile. This matches the pre-0.1.79 DOM and keeps
   //     consumers like SMB-browse rendering correctly without changes.
-  const isStackMode = cardsWidth === false;
+  const isStackMode = cardsWidth === false && cardType !== "blog";
   const gridClass = isStackMode
     ? cx(
         "flex flex-col items-stretch self-stretch",

package/src/contentful/blocks/cards/blog-card/index.test.tsx

@@ -149,18 +149,13 @@ describe("BlogCard", () => {
       expect(article?.className).toContain("callout-card");
     });
 
-    it("applies lgWidth and mdWidth in non-grid mode", () => {
+    it("applies h-full in non-grid mode for equal height cards", () => {
       const { container } = render(
-        <BlogCard
-          {...defaultProps}
-          asGrid={false}
-          lgWidth="lg:w-1/3"
-          mdWidth="md:w-1/2"
-        />
+        <BlogCard {...defaultProps} asGrid={false} />
       );
       const article = container.querySelector("article");
-      expect(article?.className).toContain("lg:w-1/3");
-      expect(article?.className).toContain("md:w-1/2");
+      expect(article?.className).toContain("h-full");
+      expect(article?.className).toContain("flex-col");
     });
 
     it("applies data-section-type attribute", () => {

package/src/contentful/blocks/cards/blog-card/index.tsx

@@ -23,14 +23,11 @@ export const BlogCard: React.FC<BlogCardProps> = ({
   imageComponent: ImageComponent,
   readMoreText = "Read more",
   asGrid = true,
-  lgWidth,
-  mdWidth,
   index,
 }: BlogCardProps) => {
-  const basehwClass = "lg:w-[calc(33.3333%-1rem)] md:w-[calc(50%-1rem)]";
   const parentClassName = asGrid
     ? "flex h-full flex-col overflow-hidden rounded-card-lg bg-white shadow-drop transition-all duration-200 hover:-translate-y-0.5 hover:shadow-cardDrop"
-    : `callout-card ${basehwClass} ${lgWidth} ${mdWidth} w-full overflow-hidden rounded-card-lg bg-white shadow-drop transition-all duration-200 hover:-translate-y-0.5 hover:shadow-cardDrop`;
+    : `callout-card w-full flex h-full flex-col overflow-hidden rounded-card-lg bg-white shadow-drop transition-all duration-200 hover:-translate-y-0.5 hover:shadow-cardDrop`;
 
   return (
     <article

package/src/contentful/blocks/cards/blog-card/types.ts

@@ -28,7 +28,5 @@ export interface BlogCardProps {
   imageComponent?: React.ComponentType<BlogCardImageProps>;
   readMoreText?: string;
   asGrid?: boolean;
-  lgWidth?: string;
-  mdWidth?: string;
   index?: number;
 }

package/src/contentful/blocks/cards/floating-image-card/index.tsx

@@ -79,10 +79,10 @@ export const FloatingImageCard: React.FC<FloatingImageCardProps> = ({
             src={image.href}
             alt={image.title ?? title ?? "card-image"}
             width={image.width || 400}
-            height={image.height || 285}
+            height={image.height || 330}
             onClick={handleImageClick}
             className={cx(
-              "h-full max-h-[285px] w-full rounded-[40px] object-cover",
+              "h-full max-h-[330px] w-full rounded-[40px] object-cover",
               imageLinkAvailableClass
             )}
           />

package/src/contentful/blocks/find-kinetic/index.tsx

@@ -1,147 +1,147 @@
-import React from "react";
-import { FindKineticProps, ThemeKey } from "./types";
-
-import { Link } from "@shared/components/link";
-import { Text } from "@shared/components/text";
-import { NextImage } from "@shared/next";
-
-export const FindKinetic: React.FC<FindKineticProps> = ({
-  background = "white",
-  description,
-  enableHeading,
-  image,
-  list = [],
-  localPathPrefix = "/local",
-  subTitle,
-  title,
-  color = "dark",
-  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]",
-  };
-  const normalizedLocalPathPrefix = localPathPrefix
-    ? `/${localPathPrefix.replace(/^\/+|\/+$/g, "")}`
-    : "";
-
-  const getLocationHref = (code: string) =>
-    `${normalizedLocalPathPrefix}/${code.toLowerCase()}`;
-
-  return (
-    <div
-      className={`${bgColorClasses[background]} component-container overflow-hidden ${color == "dark" ? "text-text" : "text-white"}`}
-    >
-      <div
-        className={`${maxWidth ? "max-w-120 xl:mx-auto" : ""} mx-5 mb-5 ${image ? "mt-12" : "mt-0 xl:mt-0"} xl:my-20`}
-      >
-        {title && (
-          <Text
-            as={enableHeading ? "h1" : "h2"}
-            className="heading2 md:heading1 md:text-center"
-          >
-            {title}
-          </Text>
-        )}
-        {subTitle && (
-          <Text
-            as={enableHeading ? "h2" : "h3"}
-            className="subheading1 mt-4 md:text-center"
-          >
-            {subTitle}
-          </Text>
-        )}
-
-        <div
-          className={`mt-8 flex flex-col items-center xl:flex-row ${image ? "xl:mt-16" : "xl:mt-10"} gap-10`}
-        >
-          <div
-            className={`flex flex-col ${image ? "xl:items-start" : "items-center"} gap-10 self-stretch xl:flex-[1_0_0]`}
-          >
-            {description && (
-              <Text as="p" className="body1">
-                {description}
-              </Text>
-            )}
-            {list.length > 0 && (
-              <>
-                <ul className="grid w-full grid-cols-2 gap-x-6 gap-y-5 md:hidden">
-                  {(() => {
-                    const sortedList = [...list].sort((a, b) =>
-                      a.name.localeCompare(b.name)
-                    );
-                    const numColumns = 2;
-                    const numRows = Math.ceil(sortedList.length / numColumns);
-                    const rearranged = [];
-                    for (let row = 0; row < numRows; row++) {
-                      for (let col = 0; col < numColumns; col++) {
-                        const index = col * numRows + row;
-                        if (index < sortedList.length) {
-                          rearranged.push(sortedList[index]);
-                        }
-                      }
-                    }
-                    return rearranged.map((item, index: number) => (
-                      <li key={`item-list-2-${index}`}>
-                        <Link
-                          href={getLocationHref(item.code)}
-                          className="label1"
-                        >
-                          {item.name}
-                        </Link>
-                      </li>
-                    ));
-                  })()}
-                </ul>
-                <ul
-                  className={`hidden ${image ? "gap-x-6" : "gap-x-20"} gap-y-5 md:grid ${image ? "md:grid-cols-3" : "md:grid-cols-4"}`}
-                >
-                  {(() => {
-                    const sortedList = [...list].sort((a, b) =>
-                      a.name.localeCompare(b.name)
-                    );
-                    const numColumns = 3;
-                    const numRows = Math.ceil(sortedList.length / numColumns);
-                    const rearranged = [];
-                    for (let row = 0; row < numRows; row++) {
-                      for (let col = 0; col < numColumns; col++) {
-                        const index = col * numRows + row;
-                        if (index < sortedList.length) {
-                          rearranged.push(sortedList[index]);
-                        }
-                      }
-                    }
-                    return rearranged.map((item, index: number) => (
-                      <li
-                        key={`item-list-3-${index}`}
-                        className={`${image ? "" : "w-[172px]"}`}
-                      >
-                        <Link
-                          href={getLocationHref(item.code)}
-                          className="label1"
-                        >
-                          {item.name}
-                        </Link>
-                      </li>
-                    ));
-                  })()}
-                </ul>
-              </>
-            )}
-          </div>
-          {image && (
-            <aside className="hidden md:block">
-              <NextImage width={472} height={100} src={image} alt="image" />
-            </aside>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default FindKinetic;
+import React from "react";
+import { FindKineticProps, ThemeKey } from "./types";
+
+import { Link } from "@shared/components/link";
+import { Text } from "@shared/components/text";
+import { NextImage } from "@shared/next";
+
+export const FindKinetic: React.FC<FindKineticProps> = ({
+  background = "white",
+  description,
+  enableHeading,
+  image,
+  list = [],
+  localPathPrefix = "/local",
+  subTitle,
+  title,
+  color = "dark",
+  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]",
+  };
+  const normalizedLocalPathPrefix = localPathPrefix
+    ? `/${localPathPrefix.replace(/^\/+|\/+$/g, "")}`
+    : "";
+
+  const getLocationHref = (code: string) =>
+    `${normalizedLocalPathPrefix}/${code.toLowerCase()}`;
+
+  return (
+    <div
+      className={`${bgColorClasses[background]} component-container overflow-hidden ${color == "dark" ? "text-text" : "text-white"}`}
+    >
+      <div
+        className={`${maxWidth ? "max-w-120 xl:mx-auto" : ""} mx-5 mb-5 ${image ? "mt-12" : "mt-0 xl:mt-0"} xl:my-20`}
+      >
+        {title && (
+          <Text
+            as={enableHeading ? "h1" : "h2"}
+            className="heading2 md:heading1 md:text-center"
+          >
+            {title}
+          </Text>
+        )}
+        {subTitle && (
+          <Text
+            as={enableHeading ? "h2" : "h3"}
+            className="subheading1 mt-4 md:text-center"
+          >
+            {subTitle}
+          </Text>
+        )}
+
+        <div
+          className={`mt-8 flex flex-col items-center xl:flex-row ${image ? "xl:mt-16" : "xl:mt-10"} gap-10`}
+        >
+          <div
+            className={`flex flex-col ${image ? "xl:items-start" : "items-center"} gap-10 self-stretch xl:flex-[1_0_0]`}
+          >
+            {description && (
+              <Text as="p" className="body1">
+                {description}
+              </Text>
+            )}
+            {list.length > 0 && (
+              <>
+                <ul className="grid w-full grid-cols-2 gap-x-6 gap-y-5 md:hidden">
+                  {(() => {
+                    const sortedList = [...list].sort((a, b) =>
+                      a.name.localeCompare(b.name)
+                    );
+                    const numColumns = 2;
+                    const numRows = Math.ceil(sortedList.length / numColumns);
+                    const rearranged = [];
+                    for (let row = 0; row < numRows; row++) {
+                      for (let col = 0; col < numColumns; col++) {
+                        const index = col * numRows + row;
+                        if (index < sortedList.length) {
+                          rearranged.push(sortedList[index]);
+                        }
+                      }
+                    }
+                    return rearranged.map((item, index: number) => (
+                      <li key={`item-list-2-${index}`}>
+                        <Link
+                          href={getLocationHref(item.code)}
+                          className="label1"
+                        >
+                          {item.name}
+                        </Link>
+                      </li>
+                    ));
+                  })()}
+                </ul>
+                <ul
+                  className={`hidden ${image ? "gap-x-6" : "gap-x-20"} gap-y-5 md:grid ${image ? "md:grid-cols-3" : "md:grid-cols-4"}`}
+                >
+                  {(() => {
+                    const sortedList = [...list].sort((a, b) =>
+                      a.name.localeCompare(b.name)
+                    );
+                    const numColumns = 3;
+                    const numRows = Math.ceil(sortedList.length / numColumns);
+                    const rearranged = [];
+                    for (let row = 0; row < numRows; row++) {
+                      for (let col = 0; col < numColumns; col++) {
+                        const index = col * numRows + row;
+                        if (index < sortedList.length) {
+                          rearranged.push(sortedList[index]);
+                        }
+                      }
+                    }
+                    return rearranged.map((item, index: number) => (
+                      <li
+                        key={`item-list-3-${index}`}
+                        className={`${image ? "" : "w-[172px]"}`}
+                      >
+                        <Link
+                          href={getLocationHref(item.code)}
+                          className="label1"
+                        >
+                          {item.name}
+                        </Link>
+                      </li>
+                    ));
+                  })()}
+                </ul>
+              </>
+            )}
+          </div>
+          {image && (
+            <aside className="hidden md:block">
+              <NextImage width={472} height={100} src={image} alt="image" />
+            </aside>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FindKinetic;