@windstream/react-shared-components 0.1.63 → 0.1.67

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

@@ -1,119 +1,119 @@
-import { BlogCategoryOption, BlogGridBaseProps } from "./types";
-
-import { Pagination } from "@shared/components/pagination";
-import { Select } from "@shared/components/select";
-import { Text } from "@shared/components/text";
-import { BlogCard } from "@shared/contentful/blocks/cards/blog-card";
-
-export function BlogGridBase({
-  title = "recent articles",
-  paginatedArticles,
-  totalArticles,
-  currentPage,
-  totalPages,
-  selectedCategory,
-  categoryOptions,
-  onCategoryChange,
-  onPageChange,
-  imageComponent,
-}: BlogGridBaseProps) {
-  function handleCategoryChange(value: unknown) {
-    if (!value || Array.isArray(value)) return;
-    const cat = value as BlogCategoryOption;
-    onCategoryChange?.(cat);
-  }
-
-  function handlePageChange(page: number) {
-    onPageChange?.(page);
-  }
-
-  return (
-    <section
-      aria-label="Blog articles"
-      data-section-type={"blogs-grid"}
-      data-section-index={"0"}
-    >
-      {/* Controls bar */}
-      <div className="mx-auto flex max-w-[1200px] flex-wrap items-center justify-between gap-3 px-6 pb-6">
-        <Text className="w-full text-center text-heading5 font-black lowercase text-text-secondary md:w-auto md:text-left">
-          {title}
-        </Text>
-
-        {categoryOptions.length > 0 && (
-          <div className="flex w-full flex-col-reverse gap-3 md:w-auto md:flex-row md:items-center md:gap-6">
-            {/* Showing count */}
-            <Text className="whitespace-nowrap text-center text-label3 font-bold text-text-info md:text-right md:text-label2">
-              <Text as="span" className="hidden md:block">
-                showing
-              </Text>
-              <strong className="block text-nowrap font-bold text-text-info">
-                <Text as="span" className="md:hidden">
-                  showing{" "}
-                </Text>
-                {paginatedArticles.length} of {totalArticles} articles
-              </strong>
-            </Text>
-
-            {/* Filter dropdown */}
-            <Select
-              options={categoryOptions}
-              value={selectedCategory}
-              onChange={handleCategoryChange}
-              className="w-full md:w-[280px]"
-            />
-          </div>
-        )}
-      </div>
-
-      {/* Articles grid */}
-      {paginatedArticles.length > 0 ? (
-        <div className="mx-auto grid max-w-[1200px] grid-cols-1 gap-6 px-5 pb-16 sm:grid-cols-2 lg:grid-cols-3">
-          {paginatedArticles.map((article, index) => {
-            const href = article.slug.startsWith("/")
-              ? article.slug
-              : `/${article.slug}`;
-            const coverImage = article?.cover?.url
-              ? {
-                  src: article?.cover?.url,
-                  alt:
-                    article?.cover?.title ||
-                    article?.title ||
-                    "Blog article image",
-                  width: article?.cover?.width || 600,
-                  height: article?.cover?.height || 338,
-                }
-              : undefined;
-
-            return (
-              <BlogCard
-                key={article.slug}
-                href={href}
-                title={article.title}
-                description={article.shortDescription}
-                date={article.blogCreationDate}
-                category={article.category}
-                image={coverImage}
-                imageComponent={imageComponent}
-                index={index}
-              />
-            );
-          })}
-        </div>
-      ) : (
-        <Text className="px-6 py-12 text-center text-text-info">
-          No articles found.
-        </Text>
-      )}
-
-      {/* Pagination */}
-      {totalPages > 1 && (
-        <Pagination
-          currentPage={currentPage}
-          totalPages={totalPages}
-          onPageChange={handlePageChange}
-          ariaLabel="Blog article pagination"
-        />
-      )}
-    </section>
-  );
-}
+import { BlogCategoryOption, BlogGridBaseProps } from "./types";
+
+import { Pagination } from "@shared/components/pagination";
+import { Select } from "@shared/components/select";
+import { Text } from "@shared/components/text";
+import { BlogCard } from "@shared/contentful/blocks/cards/blog-card";
+
+export function BlogGridBase({
+  title = "recent articles",
+  paginatedArticles,
+  totalArticles,
+  currentPage,
+  totalPages,
+  selectedCategory,
+  categoryOptions,
+  onCategoryChange,
+  onPageChange,
+  imageComponent,
+}: BlogGridBaseProps) {
+  function handleCategoryChange(value: unknown) {
+    if (!value || Array.isArray(value)) return;
+    const cat = value as BlogCategoryOption;
+    onCategoryChange?.(cat);
+  }
+
+  function handlePageChange(page: number) {
+    onPageChange?.(page);
+  }
+
+  return (
+    <section
+      aria-label="Blog articles"
+      data-section-type={"blogs-grid"}
+      data-section-index={"0"}
+    >
+      {/* Controls bar */}
+      <div className="mx-auto flex max-w-[1200px] flex-wrap items-center justify-between gap-3 px-6 pb-6">
+        <Text className="w-full text-center text-heading5 font-black lowercase text-text-secondary md:w-auto md:text-left">
+          {title}
+        </Text>
+
+        {categoryOptions.length > 0 && (
+          <div className="flex w-full flex-col-reverse gap-3 md:w-auto md:flex-row md:items-center md:gap-6">
+            {/* Showing count */}
+            <Text className="whitespace-nowrap text-center text-label3 font-bold text-text-info md:text-right md:text-label2">
+              <Text as="span" className="hidden md:block">
+                showing
+              </Text>
+              <strong className="block text-nowrap font-bold text-text-info">
+                <Text as="span" className="md:hidden">
+                  showing{" "}
+                </Text>
+                {paginatedArticles.length} of {totalArticles} articles
+              </strong>
+            </Text>
+
+            {/* Filter dropdown */}
+            <Select
+              options={categoryOptions}
+              value={selectedCategory}
+              onChange={handleCategoryChange}
+              className="w-full md:w-[280px]"
+            />
+          </div>
+        )}
+      </div>
+
+      {/* Articles grid */}
+      {paginatedArticles.length > 0 ? (
+        <div className="mx-auto grid max-w-[1200px] grid-cols-1 gap-6 px-5 pb-16 sm:grid-cols-2 lg:grid-cols-3">
+          {paginatedArticles.map((article, index) => {
+            const href = article.slug.startsWith("/")
+              ? article.slug
+              : `/${article.slug}`;
+            const coverImage = article?.cover?.url
+              ? {
+                  src: article?.cover?.url,
+                  alt:
+                    article?.cover?.title ||
+                    article?.title ||
+                    "Blog article image",
+                  width: article?.cover?.width || 600,
+                  height: article?.cover?.height || 338,
+                }
+              : undefined;
+
+            return (
+              <BlogCard
+                key={article.slug}
+                href={href}
+                title={article.title}
+                description={article.shortDescription}
+                date={article.blogCreationDate}
+                category={article.category}
+                image={coverImage}
+                imageComponent={imageComponent}
+                index={index}
+              />
+            );
+          })}
+        </div>
+      ) : (
+        <Text className="px-6 py-12 text-center text-text-info">
+          No articles found.
+        </Text>
+      )}
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <Pagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          onPageChange={handlePageChange}
+          ariaLabel="Blog article pagination"
+        />
+      )}
+    </section>
+  );
+}

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

@@ -1,35 +1,35 @@
-import React from "react";
-import { BlogCardImageProps } from "@shared/contentful/blocks/cards/blog-card/types";
-
-export interface BlogCardProps {
-  slug: string;
-  title?: string;
-  shortDescription?: string;
-  blogCreationDate?: string;
-  category?: string;
-  cover?: {
-    url: string;
-    width?: number;
-    height?: number;
-    title?: string;
-  };
-}
-
-export interface BlogGridBaseProps {
-  title?: string;
-  paginatedArticles: BlogCardProps[];
-  totalArticles: number;
-  currentPage: number;
-  totalPages: number;
-  selectedCategory: BlogCategoryOption;
-  categoryOptions: BlogCategoryOption[];
-  onCategoryChange?: (category: BlogCategoryOption) => void;
-  onPageChange?: (page: number) => void;
-  /** Pass next/image's Image component here to enable image optimization */
-  imageComponent?: React.ComponentType<BlogCardImageProps>;
-}
-
-export interface BlogCategoryOption {
-  value: string;
-  label: string;
-}
+import React from "react";
+import { BlogCardImageProps } from "@shared/contentful/blocks/cards/blog-card/types";
+
+export interface BlogCardProps {
+  slug: string;
+  title?: string;
+  shortDescription?: string;
+  blogCreationDate?: string;
+  category?: string;
+  cover?: {
+    url: string;
+    width?: number;
+    height?: number;
+    title?: string;
+  };
+}
+
+export interface BlogGridBaseProps {
+  title?: string;
+  paginatedArticles: BlogCardProps[];
+  totalArticles: number;
+  currentPage: number;
+  totalPages: number;
+  selectedCategory: BlogCategoryOption;
+  categoryOptions: BlogCategoryOption[];
+  onCategoryChange?: (category: BlogCategoryOption) => void;
+  onPageChange?: (page: number) => void;
+  /** Pass next/image's Image component here to enable image optimization */
+  imageComponent?: React.ComponentType<BlogCardImageProps>;
+}
+
+export interface BlogCategoryOption {
+  value: string;
+  label: string;
+}

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

@@ -25,7 +25,7 @@ export const BreadcrumbNavigation: React.FC<
   return (
     <nav
       aria-label="Breadcrumb"
-      className={`${maxWidth ? "mx-5 max-w-120 xl:mx-auto" : "mx-auto"} relative`}
+      className={`${maxWidth ? `${!floatOnMobile && "mx-5"} max-w-120 xl:mx-auto` : "mx-auto"} relative`}
     >
       <ol
         className={`right-0 z-10 mx-0 flex w-full flex-nowrap items-center gap-2 px-7 pb-0 pt-8 md:px-14 ${floatOnMobile ? "absolute" : "relative xl:absolute"} xl:mx-auto xl:flex-wrap xl:px-3`}

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

@@ -1,129 +1,129 @@
-import React from "react";
-import { BlogCardProps } from "./types";
-import * as _NextLink from "next/link";
-
-// import { Button } from "@shared/components/button";
-import { MaterialIcon } from "@shared/components/material-icon";
-import { Text } from "@shared/components/text";
-
-// CJS/ESM interop: next/link uses standard __esModule exports so this is safe.
-// next/image is intentionally avoided — its image-external.js uses the
-// `0 && (module.exports = {...})` tree-shaking hint which confuses webpack's
-// CJS→ESM interop and causes "got: object" errors in consuming apps.
-const Link = ((_NextLink as any).default ??
-  _NextLink) as typeof import("next/link").default;
-
-export const BlogCard: React.FC<BlogCardProps> = ({
-  href,
-  title,
-  description,
-  date,
-  category,
-  image,
-  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`;
-
-  return (
-    <article
-      className={parentClassName}
-      data-section-type={"blog-card"}
-      data-section-index={index}
-    >
-      {/* Image */}
-      <Link href={href} tabIndex={-1} aria-hidden="true" className="block">
-        <div className="h-[232px] w-full flex-shrink-0 overflow-hidden bg-gray-100">
-          {image ? (
-            ImageComponent ? (
-              <ImageComponent
-                src={image.src}
-                alt={image.alt}
-                width={image.width}
-                height={image.height}
-                className="h-full w-full object-cover transition-transform duration-300 hover:scale-[1.03]"
-                sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
-              />
-            ) : (
-              <img
-                src={image.src}
-                alt={image.alt}
-                width={image.width}
-                height={image.height}
-                loading="lazy"
-                decoding="async"
-                className="h-full w-full object-cover transition-transform duration-300 hover:scale-[1.03]"
-              />
-            )
-          ) : (
-            <div
-              className="h-full w-full bg-gradient-to-br from-gray-200 to-gray-100"
-              aria-hidden="true"
-            />
-          )}
-        </div>
-      </Link>
-
-      {/* Body */}
-      <div className="flex flex-1 flex-col gap-5 p-6 md:p-8">
-        {/* Meta: category + date */}
-        <div className="flex items-center gap-2 text-[13px]">
-          <span className="body2 text-text-brand">{category}</span>
-          {date && (
-            <>
-              <span className="footnote text-text" aria-hidden="true">
-                •
-              </span>
-              <time className="body2 text-text">{date}</time>
-            </>
-          )}
-        </div>
-
-        {/* Title */}
-        {title && (
-          <Link
-            href={href}
-            className="heading6 m-0 line-clamp-3 font-black transition-colors duration-150 hover:text-text-brand"
-          >
-            {title}
-          </Link>
-        )}
-
-        {/* Excerpt */}
-        {description && (
-          <Text className="body1 m-0 line-clamp-3 flex-1 text-text">
-            {description}
-          </Text>
-        )}
-
-        {/* Read more */}
-        <Link
-          href={href}
-          className="group mt-auto inline-flex items-center justify-start gap-2 pt-3 text-sm text-text-brand no-underline"
-          aria-label={`${readMoreText} about ${title || "this article"}`}
-        >
-          <Text
-            aria-label={`${readMoreText} about ${title || "this article"}`}
-            className="label1 text-nowrap"
-          >
-            {readMoreText}
-          </Text>
-          <MaterialIcon
-            name="expand_circle_right"
-            fill={1}
-            size={24}
-            weight="200"
-          />
-        </Link>
-      </div>
-    </article>
-  );
-};
-export default BlogCard;
+import React from "react";
+import { BlogCardProps } from "./types";
+import * as _NextLink from "next/link";
+
+// import { Button } from "@shared/components/button";
+import { MaterialIcon } from "@shared/components/material-icon";
+import { Text } from "@shared/components/text";
+
+// CJS/ESM interop: next/link uses standard __esModule exports so this is safe.
+// next/image is intentionally avoided — its image-external.js uses the
+// `0 && (module.exports = {...})` tree-shaking hint which confuses webpack's
+// CJS→ESM interop and causes "got: object" errors in consuming apps.
+const Link = ((_NextLink as any).default ??
+  _NextLink) as typeof import("next/link").default;
+
+export const BlogCard: React.FC<BlogCardProps> = ({
+  href,
+  title,
+  description,
+  date,
+  category,
+  image,
+  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`;
+
+  return (
+    <article
+      className={parentClassName}
+      data-section-type={"blog-card"}
+      data-section-index={index}
+    >
+      {/* Image */}
+      <Link href={href} tabIndex={-1} aria-hidden="true" className="block">
+        <div className="h-[232px] w-full flex-shrink-0 overflow-hidden bg-gray-100">
+          {image ? (
+            ImageComponent ? (
+              <ImageComponent
+                src={image.src}
+                alt={image.alt}
+                width={image.width}
+                height={image.height}
+                className="h-full w-full object-cover transition-transform duration-300 hover:scale-[1.03]"
+                sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
+              />
+            ) : (
+              <img
+                src={image.src}
+                alt={image.alt}
+                width={image.width}
+                height={image.height}
+                loading="lazy"
+                decoding="async"
+                className="h-full w-full object-cover transition-transform duration-300 hover:scale-[1.03]"
+              />
+            )
+          ) : (
+            <div
+              className="h-full w-full bg-gradient-to-br from-gray-200 to-gray-100"
+              aria-hidden="true"
+            />
+          )}
+        </div>
+      </Link>
+
+      {/* Body */}
+      <div className="flex flex-1 flex-col gap-5 p-6 md:p-8">
+        {/* Meta: category + date */}
+        <div className="flex items-center gap-2 text-[13px]">
+          <span className="body2 text-text-brand">{category}</span>
+          {date && (
+            <>
+              <span className="footnote text-text" aria-hidden="true">
+                •
+              </span>
+              <time className="body2 text-text">{date}</time>
+            </>
+          )}
+        </div>
+
+        {/* Title */}
+        {title && (
+          <Link
+            href={href}
+            className="heading6 m-0 line-clamp-3 font-black transition-colors duration-150 hover:text-text-brand"
+          >
+            {title}
+          </Link>
+        )}
+
+        {/* Excerpt */}
+        {description && (
+          <Text className="body1 m-0 line-clamp-3 flex-1 text-text">
+            {description}
+          </Text>
+        )}
+
+        {/* Read more */}
+        <Link
+          href={href}
+          className="group mt-auto inline-flex items-center justify-start gap-2 pt-3 text-sm text-text-brand no-underline"
+          aria-label={`${readMoreText} about ${title || "this article"}`}
+        >
+          <Text
+            aria-label={`${readMoreText} about ${title || "this article"}`}
+            className="label1 text-nowrap"
+          >
+            {readMoreText}
+          </Text>
+          <MaterialIcon
+            name="expand_circle_right"
+            fill={1}
+            size={24}
+            weight="200"
+          />
+        </Link>
+      </div>
+    </article>
+  );
+};
+export default BlogCard;