Merge pull request #223 from NYPL/release/0.1.16-alpha

Release v0.1.16-alpha

CHANGELOG.md

@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+## [0.1.16-alpha] 2024-11-8
+
 ### Updated
 
 - Updated cards to use Next Image (DR-3056)

app/src/components/card/card.tsx

@@ -14,11 +14,13 @@ import ItemCardDataType from "@/src/types/ItemCardDataType";
 import { CollectionCardDataType } from "../../types/CollectionCardDataType";
 import { Offset } from "@/src/hooks/useTooltipOffset";
 import { stringToSlug } from "@/src/utils/utils";
+import CardImage from "./cardImage";
 export interface DCCardProps {
   tooltipOffset?: Offset;
   id: string;
   isLargerThanLargeTablet: boolean;
   slug?: string;
+  imageHeight: number;
   record: CollectionCardDataType | ItemCardDataType;
 }
 
@@ -29,7 +31,10 @@ export function isCollectionCardDataType(
 }
 
 export const Card = forwardRef<HTMLDivElement, DCCardProps>(
-  ({ tooltipOffset, id, isLargerThanLargeTablet, slug, record }, ref) => {
+  (
+    { tooltipOffset, id, isLargerThanLargeTablet, imageHeight, slug, record },
+    ref
+  ) => {
     const truncatedTitle = record.title.length > TRUNCATED_LENGTH;
     const isCollection = isCollectionCardDataType(record);
     const identifier = slug
@@ -38,30 +43,12 @@ export const Card = forwardRef<HTMLDivElement, DCCardProps>(
     const card = (
       <ChakraCard
         ref={ref}
+        key={record.imageID}
         id={`card-${identifier}`}
         mainActionLink={record.url}
-        imageProps={
-          record.imageID
-            ? {
-                alt: "",
-                id: `image-${identifier}`,
-                isLazy: true,
-                aspectRatio: "twoByOne",
-                fallbackSrc: "/noImage.png",
-                onError: (_event) =>
-                  console.warn(
-                    `Card image failed to load, fallback image loaded instead. ImageURL: ${record.imageURL}`
-                  ),
-                src: record.imageURL,
-              }
-            : {
-                alt: "",
-                id: `no-image-${identifier}`,
-                isLazy: true,
-                aspectRatio: "twoByOne",
-                src: "/noImage.png",
-              }
-        }
+        imageProps={{
+          component: <CardImage imageHeight={imageHeight} record={record} />,
+        }}
       >
         <CardContent>
           {isCollection && record.containsOnSiteMaterials && (

app/src/components/exploreFurther/exploreFurther.tsx

@@ -10,6 +10,7 @@ import {
 import { ExploreFurtherDataType } from "../../types/ExploreFurtherDataType";
 import exploreFurtherData from "../../data/exploreFurtherData";
 import { headerBreakpoints } from "../../utils/breakpoints";
+import Image from "next/image";
 
 const ExploreFurther = () => {
   const data: ExploreFurtherDataType[] = exploreFurtherData;
@@ -48,13 +49,18 @@ const ExploreFurther = () => {
             data-testid={`test-id-${index}`}
             mainActionLink={item.url}
             imageProps={{
-              alt: "",
-              aspectRatio: "sixteenByNine",
-              component: undefined,
+              component: (
+                <Image
+                  src={item.image}
+                  alt={""}
+                  sizes="(max-width: 600px) 100vw, 25vw"
+                  style={{
+                    width: "100%",
+                    minHeight: "100%",
+                  }}
+                />
+              ),
               isAtEnd: false,
-              isLazy: true,
-              size: "default",
-              src: item.imageSrc,
             }}
             layout="row"
             sx={{

app/src/components/grids/cardsGrid.tsx

@@ -10,6 +10,7 @@ import { ItemCardModel } from "@/src/models/itemCard";
 import { SimpleGrid as DCSimpleGrid } from "../simpleGrid/simpleGrid";
 import { Card as DCCard } from "../card/card";
 import { useTooltipOffset } from "@/src/hooks/useTooltipOffset";
+import { useCardImageHeight } from "@/src/hooks/useCardImageHeight";
 
 interface CardsGridProps {
   records: CollectionDataType[] | ItemDataType[];
@@ -20,6 +21,7 @@ export const CardsGrid = ({ records }: CardsGridProps) => {
   const isCollections = isCollectionType(records);
   const cardRef = useRef<HTMLDivElement>(null);
   const tooltipOffset = useTooltipOffset(cardRef);
+  const imageHeight = useCardImageHeight(cardRef);
 
   return (
     <DCSimpleGrid>
@@ -33,6 +35,7 @@ export const CardsGrid = ({ records }: CardsGridProps) => {
               ref={cardRef}
               tooltipOffset={tooltipOffset}
               record={collectionCardModel}
+              imageHeight={imageHeight}
               isLargerThanLargeTablet={isLargerThanLargeTablet}
             />
           );
@@ -45,6 +48,7 @@ export const CardsGrid = ({ records }: CardsGridProps) => {
               ref={cardRef}
               tooltipOffset={tooltipOffset}
               record={itemCardModel}
+              imageHeight={imageHeight}
               isLargerThanLargeTablet={isLargerThanLargeTablet}
             />
           );

app/src/components/lane/lane.tsx

@@ -20,6 +20,7 @@ import ItemDataType from "@/src/types/ItemDataType";
 import useBreakpoints from "@/src/hooks/useBreakpoints";
 import { useTooltipOffset } from "@/src/hooks/useTooltipOffset";
 import { isCollectionType } from "@/src/utils/utils";
+import { useCardImageHeight } from "@/src/hooks/useCardImageHeight";
 
 interface LaneProps {
   seeMoreLink: string;
@@ -38,6 +39,7 @@ export const Lane = ({
   const cardRef = useRef<HTMLDivElement>(null);
   const tooltipOffset = useTooltipOffset(cardRef);
   const isCollections = isCollectionType(records);
+  const imageHeight = useCardImageHeight(cardRef);
 
   const laneContents = isCollections
     ? {
@@ -119,6 +121,7 @@ export const Lane = ({
                 id={`${index}`}
                 record={collectionCardModel}
                 isLargerThanLargeTablet={isLargerThanLargeTablet}
+                imageHeight={imageHeight}
                 ref={cardRef}
                 tooltipOffset={tooltipOffset}
               />
@@ -131,6 +134,7 @@ export const Lane = ({
                 id={`item-${index}-${record.title}`}
                 record={itemCardModel}
                 isLargerThanLargeTablet={isLargerThanLargeTablet}
+                imageHeight={imageHeight}
                 tooltipOffset={tooltipOffset}
                 ref={cardRef}
               />

app/src/data/exploreFurtherData.ts

@@ -13,7 +13,6 @@ const exploreFurtherData: ExploreFurtherDataType[] = [
     url: "http://nypl.artehouse.com/perl/home.pl",
     image: serviceArtehouse,
     imgAlt: "Service Artehouse",
-    imageSrc: "/service-artehouse.jpg",
   },
   {
     title: "NYPL Archives and Manuscripts",
@@ -22,7 +21,6 @@ const exploreFurtherData: ExploreFurtherDataType[] = [
     url: "http://archives.nypl.org/",
     image: serviceArchives,
     imgAlt: "Service Archives",
-    imageSrc: "/service-archives.jpg",
   },
   {
     title: "NYPL Research Catalog",
@@ -31,7 +29,6 @@ const exploreFurtherData: ExploreFurtherDataType[] = [
     url: "https://www.nypl.org/research/research-catalog/ ",
     image: researchCatalog,
     imgAlt: "NYPL Research Catalog",
-    imageSrc: "/ResearchCatalogThumbnail_v2.jpg",
   },
   {
     title: "NYPL Digital Collections API",
@@ -40,7 +37,6 @@ const exploreFurtherData: ExploreFurtherDataType[] = [
     url: "https://api.repo.nypl.org/",
     image: serviceApi,
     imgAlt: "Service API",
-    imageSrc: "/service-api.jpg",
   },
   {
     title: "Digital Public Library of America",
@@ -49,7 +45,6 @@ const exploreFurtherData: ExploreFurtherDataType[] = [
     url: "http://dp.la/",
     image: serviceDpla,
     imgAlt: "Service Digital Public Library",
-    imageSrc: "/service-dpla.jpg",
   },
 ];
 

app/src/types/ExploreFurtherDataType.ts

@@ -5,5 +5,4 @@ export interface ExploreFurtherDataType {
   description: string;
   imgAlt: string;
   image: StaticImageData;
-  imageSrc: string;
 }