@windstream/react-shared-components 0.2.31 → 0.2.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windstream/react-shared-components",
-  "version": "0.2.31",
+  "version": "0.2.33",
   "type": "module",
   "description": "Shared React components for Kinetic applications",
   "main": "dist/index.js",

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

@@ -7,6 +7,7 @@ import { BlogCard } from "@shared/contentful/blocks/cards/blog-card";
 
 export function BlogGridBase({
   title = "recent articles",
+  description,
   paginatedArticles,
   totalArticles,
   currentPage,
@@ -16,6 +17,7 @@ export function BlogGridBase({
   onCategoryChange,
   onPageChange,
   getPageHref,
+  asList = false,
   imageComponent,
 }: BlogGridBaseProps) {
   function handleCategoryChange(value: unknown) {
@@ -36,10 +38,14 @@ export function BlogGridBase({
     >
       {/* Controls bar */}
       <div className="mx-auto flex max-w-[1200px] flex-wrap items-center justify-between gap-3 px-6 pb-6">
+        {description && (
+          <Text as="p" className="body1 mb-4 text-center md:mb-6">
+            {description}
+          </Text>
+        )}
         <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 */}
@@ -66,9 +72,15 @@ export function BlogGridBase({
         )}
       </div>
 
-      {/* Articles grid */}
+      {/* Articles grid / list */}
       {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">
+        <div
+          className={
+            asList
+              ? "mx-auto flex max-w-[1200px] flex-col gap-1 px-5 pb-16"
+              : "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
@@ -95,6 +107,7 @@ export function BlogGridBase({
                 category={article.category}
                 image={coverImage}
                 imageComponent={imageComponent}
+                asGrid={!asList}
                 index={index}
               />
             );

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

@@ -18,6 +18,7 @@ export interface BlogCardProps {
 
 export interface BlogGridBaseProps {
   title?: string;
+  description?: string;
   paginatedArticles: BlogCardProps[];
   totalArticles: number;
   currentPage: number;
@@ -27,6 +28,8 @@ export interface BlogGridBaseProps {
   onCategoryChange?: (category: BlogCategoryOption) => void;
   onPageChange?: (page: number) => void;
   getPageHref?: (page: number) => string;
+  /** When true, render cards in a single-column list instead of a grid. */
+  asList?: boolean;
   /** Pass next/image's Image component here to enable image optimization */
   imageComponent?: React.ComponentType<BlogCardImageProps>;
 }

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

@@ -27,57 +27,66 @@ export const BlogCard: React.FC<BlogCardProps> = ({
 }: BlogCardProps) => {
   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 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`;
+    : `callout-card w-full flex h-full flex-col overflow-hidden`;
 
   return (
     <article
       className={parentClassName}
       data-section-type={"blog-card"}
       data-section-index={index}
+      data-view-mode={asGrid ? "grid" : "list"}
     >
-      {/* 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"
-              />
+      {/* Image (hidden in list view) */}
+      {asGrid && (
+        <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]"
+                />
+              )
             ) : (
-              <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
-              className="h-full w-full bg-gradient-to-br from-gray-200 to-gray-100"
-              aria-hidden="true"
-            />
-          )}
-        </div>
-      </Link>
+            )}
+          </div>
+        </Link>
+      )}
 
       {/* Body */}
-      <div className="flex flex-1 flex-col gap-5 p-6 md:p-8">
+      <div
+        className={`flex flex-1 flex-col  ${
+          asGrid ? "gap-5 p-6 md:p-8" : "gap-1 border-b p-3 md:p-4"
+        }`}
+      >
         {/* Meta: category + date */}
         <div className="flex items-center gap-2 text-[13px]">
-          <span className="body2 text-text-brand">{category}</span>
+          {asGrid && <span className="body2 text-text-brand">{category}</span>}
           {date && (
             <>
-              <span className="footnote text-text" aria-hidden="true">
-                •
-              </span>
+              {asGrid && (
+                <span className="footnote text-text" aria-hidden="true">
+                  •
+                </span>
+              )}
               <time className="body2 text-text">{date}</time>
             </>
           )}
@@ -100,25 +109,27 @@ export const BlogCard: React.FC<BlogCardProps> = ({
           </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
+        {/* Read more (hidden in list view) */}
+        {asGrid && (
+          <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"}`}
-            className="label1 text-nowrap"
           >
-            {readMoreText}
-          </Text>
-          <MaterialIcon
-            name="expand_circle_right"
-            fill={1}
-            size={24}
-            weight="200"
-          />
-        </Link>
+            <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>
   );

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

@@ -33,7 +33,9 @@ const defaultOptions: Options = {
   },
   renderNode: {
     [BLOCKS.PARAGRAPH]: (node, children) => (
-      <div className="body3 mb-4">{isEmptyParagraph(node) ? "\n" : children}</div>
+      <div className="body3 mb-4 whitespace-pre-line">
+        {isEmptyParagraph(node) ? "\n" : children}
+      </div>
     ),
     [BLOCKS.HEADING_1]: (node, children) => {
       return (
@@ -165,7 +167,9 @@ export function renderContentfulRichText(
       ...options?.renderNode,
       // Logic for links based on the isTargetBlank flag
       [BLOCKS.PARAGRAPH]: (node, children) => (
-        <div className={className}>{isEmptyParagraph(node) ? "\n" : children}</div>
+        <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;