Merge pull request #241 from nulib/deploy/staging

Update production.

Author: mathewjordan

components/Figure/Figure.styled.ts

@@ -1,19 +1,21 @@
 import * as AspectRatio from "@radix-ui/react-aspect-ratio";
 import { VariantProps, styled } from "@/stitches.config";
 import { IconLock } from "@/components/Shared/SVG/Icons";
+import Image from "next/image";
 
 /* eslint sort-keys: 0 */
 
 IconLock.toString = () => ".icon-lock";
 
-const FigureImage = styled("img", {
+const FigureImage = styled(Image, {
   display: "flex",
   borderRadius: "3px",
-  transition: "$dcAll",
+  transition: "$dcImageLoad",
   opacity: "0",
   width: "100%",
   height: "100%",
   objectFit: "cover",
+  zIndex: "1",
 
   variants: {
     isLoaded: {
@@ -27,6 +29,15 @@ const FigureImage = styled("img", {
   },
 });
 
+const FigureLQIP = styled(Image, {
+  display: "flex",
+  borderRadius: "3px",
+  width: "100%",
+  height: "100%",
+  objectFit: "cover",
+  zIndex: "0",
+});
+
 const FigureImageWrapper = styled("div", {
   display: "flex",
   flexDirection: "column",
@@ -62,6 +73,7 @@ const FigureCaption = styled("figcaption", {
 const FigurePlaceholder = styled(AspectRatio.Root, {
   backgroundColor: "$black10",
   borderRadius: "3px",
+  zIndex: "0",
 });
 
 const FigureSupplementalInfo = styled("span", {
@@ -123,6 +135,7 @@ export {
   FigureCaption,
   FigureImage,
   FigureImageWrapper,
+  FigureLQIP,
   FigurePlaceholder,
   FigureStyled,
   FigureSupplementalInfo,

components/Figure/Figure.tsx

@@ -2,6 +2,7 @@ import {
   FigureCaption,
   FigureImage,
   FigureImageWrapper,
+  FigureLQIP,
   FigurePlaceholder,
   FigureStyled,
   FigureSupplementalInfo,
@@ -11,6 +12,7 @@ import {
 } from "@/components/Figure/Figure.styled";
 import React, { ReactNode } from "react";
 import { IconLock } from "@/components/Shared/SVG/Icons";
+import { width } from "@/styles/media";
 
 interface Figure {
   aspectRatio?: number;
@@ -31,25 +33,33 @@ const Figure: React.FC<FigureProps & FigureVariants> = (props) => {
   const { data, orientation } = props;
   const { aspectRatio, isRestricted, title, supplementalInfo, src } = data;
 
-  const handleOnLoad = () => {
-    setIsLoaded(true);
-  };
+  const handleOnLoad = () => setIsLoaded(true);
+  const handleOnError = () => console.error("image loading error");
 
-  const handleOnError = () => {
-    console.error("image loading error");
-  };
+  const lqip = new URL(src);
+  lqip.searchParams.set("size", "3");
+
+  const srcSetSizes = `(max-width: ${width.xxs}px) 100vw`;
 
   return (
     <FigureStyled data-orientation={orientation} {...props}>
       <FigureImageWrapper>
         <FigurePlaceholder ratio={aspectRatio ? aspectRatio : 1}>
+          <FigureLQIP
+            alt=""
+            fill={true}
+            sizes={srcSetSizes}
+            src={lqip.toString()}
+            priority={true}
+          />
           <FigureImage
-            src={src}
             alt={title}
+            fill={true}
+            isLoaded={isLoaded}
             onLoad={handleOnLoad}
             onError={handleOnError}
-            isLoaded={isLoaded}
-            {...(isRestricted && { css: { opacity: "0.7" } })}
+            sizes={srcSetSizes}
+            src={src}
           />
         </FigurePlaceholder>
       </FigureImageWrapper>

components/Grid/Item.test.tsx

@@ -34,22 +34,22 @@ describe("GridItem component", () => {
   it("renders the expected default image source", () => {
     render(<GridItem item={mockItem as SearchShape} />);
 
-    expect(screen.getByAltText(mockItem.title)).toHaveAttribute(
-      "src",
-      mockItem.thumbnail
+    expect(screen.getByAltText(mockItem.title).getAttribute("src")).toContain(
+      encodeURIComponent(mockItem.thumbnail)
     );
   });
 
   it("renders the full resolution image source is featured", () => {
     render(<GridItem item={mockItem as SearchShape} isFeatured />);
 
-    expect(screen.getByAltText(mockItem.title)).not.toHaveAttribute(
-      "src",
-      mockItem.thumbnail
-    );
-    expect(screen.getByAltText(mockItem.title)).toHaveAttribute(
-      "src",
-      "https://iiif.stack.rdc-staging.library.northwestern.edu/iiif/2/b92874a0-72b7-4479-979e-38860c412a13/square/512,/0/default.jpg"
+    expect(
+      screen.getByAltText(mockItem.title).getAttribute("src")
+    ).not.toContain(encodeURIComponent(mockItem.thumbnail));
+
+    expect(screen.getByAltText(mockItem.title).getAttribute("src")).toContain(
+      encodeURIComponent(
+        "https://iiif.stack.rdc-staging.library.northwestern.edu/iiif/2/b92874a0-72b7-4479-979e-38860c412a13/square/512,/0/default.jpg"
+      )
     );
   });
 });

components/Grid/Item.tsx

@@ -12,7 +12,6 @@ interface GridItemProps {
 
 const GridItem: React.FC<GridItemProps> = ({ item, isFeatured }) => {
   const [urlPath, setUrlPath] = useState<string>();
-  const [supplementalInfo, setSupplementalInfo] = useState<string | null>();
   const userContext = useContext(UserContext);
 
   const isRestricted = (item: SearchShape): boolean => {
@@ -25,14 +24,12 @@ const GridItem: React.FC<GridItemProps> = ({ item, isFeatured }) => {
     switch (item.api_model) {
       case "Work":
         setUrlPath("/items");
-        setSupplementalInfo(item.work_type);
         return;
       case "Collection":
         setUrlPath("/collections");
         return;
       default:
         setUrlPath("/items");
-        setSupplementalInfo(item.work_type);
         return;
     }
   }, [item]);
@@ -48,7 +45,7 @@ const GridItem: React.FC<GridItemProps> = ({ item, isFeatured }) => {
               isFeatured && item.representative_file_set?.url
                 ? `${item.representative_file_set.url}/square/512,/0/default.jpg`
                 : item.thumbnail || "",
-            supplementalInfo: supplementalInfo,
+            supplementalInfo: item.work_type,
             title: item.title || "",
           }}
         />

lib/constants/works.ts

@@ -28,6 +28,9 @@ const WORK_METADATA_LABELS: WorkMetadata[] = [
     label: "Department",
     searchParam: "libraryDepartment",
   },
+  {
+    label: "Dimensions",
+  },
   {
     label: "Genre",
     searchParam: "genre",
@@ -42,6 +45,9 @@ const WORK_METADATA_LABELS: WorkMetadata[] = [
   {
     label: "Location",
   },
+  {
+    label: "Materials",
+  },
   {
     label: "Notes",
   },

next.config.js

@@ -38,6 +38,8 @@ module.exports = {
       "dcapi.rdc.library.northwestern.edu",
       "dcapi.rdc-staging.library.northwestern.edu",
       "iiif.stack.rdc.library.northwestern.edu",
+      "iiif.dc.library.northwestern.edu",
+      "api.dc.library.northwestern.edu",
     ],
   },
   reactStrictMode: true,

styles/transitions.ts

@@ -6,6 +6,7 @@ export const timingFunction = `cubic-bezier(0.3, 1, 0.3, 1)`;
 const transitions = {
   dcAll: `all ${seconds}s ${timingFunction}`,
   dcOpacity: `opacity ${seconds}s ${timingFunction}`,
+  dcImageLoad: `all 1s ${timingFunction}`,
   dcWidth: `width ${seconds}s ${timingFunction}`,
 };