@windstream/react-shared-components 0.1.60 → 0.1.62

package/dist/core.d.ts

@@ -63,7 +63,7 @@ declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAtt
     size?: "slim" | "medium" | "large" | undefined;
     label?: string | undefined;
     errorText?: string | undefined;
-    prefixIconName?: "search" | "location_on" | undefined;
+    prefixIconName?: "location_on" | "search" | undefined;
     prefixIconSize?: 20 | 24 | 40 | 48 | undefined;
     prefixIconFill?: boolean | undefined;
     suffixIconFill?: boolean | undefined;

package/package.json

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

package/src/components/pagination/index.tsx

@@ -78,23 +78,14 @@ function buildPageItems(current: number, total: number): (number | "...")[] {
   if (total <= 7) {
     return Array.from({ length: total }, (_, i) => i + 1);
   }
-  const items: (number | "...")[] = [];
-  items.push(1);
 
-  if (current > 3) {
-    items.push("...");
+  if (current <= 4) {
+    return [1, 2, 3, 4, 5, "...", total];
   }
-  const rangeStart = Math.max(2, current - 1);
-  const rangeEnd = Math.min(total - 1, current + 1);
 
-  for (let i = rangeStart; i <= rangeEnd; i++) {
-    items.push(i);
+  if (current >= total - 3) {
+    return [1, "...", total - 4, total - 3, total - 2, total - 1, total];
   }
 
-  if (current < total - 2) {
-    items.push("...");
-  }
-
-  items.push(total);
-  return items;
+  return [1, "...", current - 1, current, current + 1, "...", total];
 }

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

@@ -14,6 +14,7 @@ export function BlogGridBase({
   categoryOptions,
   onCategoryChange,
   onPageChange,
+  imageComponent,
 }: BlogGridBaseProps) {
   function handleCategoryChange(value: unknown) {
     if (!value || Array.isArray(value)) return;
@@ -37,28 +38,30 @@ export function BlogGridBase({
           recent articles
         </Text>
 
-        <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{" "}
+        {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>
-              {paginatedArticles.length} of {totalArticles} articles
-            </strong>
-          </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>
+            {/* Filter dropdown */}
+            <Select
+              options={categoryOptions}
+              value={selectedCategory}
+              onChange={handleCategoryChange}
+              className="w-full md:w-[280px]"
+            />
+          </div>
+        )}
       </div>
 
       {/* Articles grid */}
@@ -89,6 +92,7 @@ export function BlogGridBase({
                 date={article.blogCreationDate}
                 category={article.category}
                 image={coverImage}
+                imageComponent={imageComponent}
                 index={index}
               />
             );

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

@@ -1,3 +1,6 @@
+import React from "react";
+import { BlogCardImageProps } from "@shared/contentful/blocks/cards/blog-card/types";
+
 export interface BlogCardProps {
   slug: string;
   title?: string;
@@ -21,6 +24,8 @@ export interface BlogGridBaseProps {
   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 {

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

@@ -20,6 +20,7 @@ export const BlogCard: React.FC<BlogCardProps> = ({
   date,
   category,
   image,
+  imageComponent: ImageComponent,
   readMoreText = "Read more",
   asGrid = true,
   lgWidth,
@@ -41,15 +42,26 @@ export const BlogCard: React.FC<BlogCardProps> = ({
       <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 ? (
-            <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]"
-            />
+            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"

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

@@ -1,3 +1,17 @@
+import React from "react";
+
+export interface BlogCardImageProps {
+  src: string;
+  alt: string;
+  width: number;
+  height: number;
+  className?: string;
+  sizes?: string;
+  loading?: "lazy" | "eager";
+  decoding?: "async" | "auto" | "sync";
+  [key: string]: unknown;
+}
+
 export interface BlogCardProps {
   href: string;
   title?: string;
@@ -10,6 +24,8 @@ export interface BlogCardProps {
     width: number;
     height: number;
   };
+  /** Pass next/image's Image component here to enable image optimization */
+  imageComponent?: React.ComponentType<BlogCardImageProps>;
   readMoreText?: string;
   asGrid?: boolean;
   lgWidth?: string;