Demo Content State (Canvases)

components/Clover/ViewerWrapper.tsx

@@ -12,7 +12,6 @@ import Container from "../Shared/Container";
 import { IconInfo } from "@/components/Shared/SVG/Icons";
 import React from "react";
 import { UserContext } from "@/context/user-context";
-import type { Work } from "@nulib/dcapi-types";
 import dynamic from "next/dynamic";
 
 export const CloverViewer = dynamic(
@@ -23,14 +22,18 @@ export const CloverViewer = dynamic(
 );
 
 interface WrapperProps {
-  manifestId: Work["iiif_manifest"];
+  contentStateCallback?: (contentState: any) => void;
+  iiifContent?: string;
   isWorkRestricted?: boolean;
+  manifestId: string | null;
   viewerOptions?: ViewerConfigOptions;
 }
 
 const WorkViewerWrapper: React.FC<WrapperProps> = ({
-  manifestId,
+  contentStateCallback,
+  iiifContent,
   isWorkRestricted,
+  manifestId,
   viewerOptions = {},
 }) => {
   const userAuth = React.useContext(UserContext);
@@ -76,14 +79,39 @@ const WorkViewerWrapper: React.FC<WrapperProps> = ({
     ...viewerOptions,
   };
 
+  function handleCanvasIdCallback(activeCanvas: string) {
+    if (activeCanvas && contentStateCallback) {
+      const contentStateAnnotationId = `${manifestId}/content-state}`;
+      const contentState = {
+        "@context": "http://iiif.io/api/presentation/3/context.json",
+        id: contentStateAnnotationId,
+        type: "Annotation",
+        motivation: ["contentState"],
+        target: {
+          id: activeCanvas,
+          type: "Canvas",
+          partOf: [
+            {
+              id: manifestId,
+              type: "Manifest",
+            },
+          ],
+        },
+      };
+
+      contentStateCallback(JSON.stringify(contentState));
+    }
+  }
+
   return (
     <Container containerType="wide">
       <ViewerWrapperStyled data-testid="work-viewer-wrapper">
         {manifestId && (
           <CloverViewer
             // @ts-ignore
+            canvasIdCallback={handleCanvasIdCallback}
             customTheme={customTheme}
-            iiifContent={manifestId}
+            iiifContent={iiifContent || manifestId}
             options={options}
           />
         )}
@@ -100,4 +128,4 @@ const WorkViewerWrapper: React.FC<WrapperProps> = ({
   );
 };
 
-export default WorkViewerWrapper;
+export default React.memo(WorkViewerWrapper);

components/Figure/Figure.styled.ts

@@ -88,7 +88,7 @@ const FigureSupplementalInfo = styled("span", {
 
 const FigureTitle = styled("span", {
   marginTop: "$gr3",
-  fontSize: "$gr3",
+  fontSize: "$gr4",
   fontFamily: "$northwesternSansRegular",
   color: "$purple",
   display: "flex",
@@ -120,12 +120,11 @@ const FigureStyled = styled("figure", {
         paddingBottom: "$gr3",
 
         [`& ${FigureTitle}`]: {
-          fontSize: "$5",
-          fontFamily: "$northwesternDisplayBook",
+          fontFamily: "$northwesternSansBold",
         },
 
         [`& ${FigureSupplementalInfo}`]: {
-          fontSize: "$2",
+          fontSize: "$gr2",
         },
       },
     },

components/Heading/Heading.styled.ts

@@ -45,10 +45,11 @@ const StyledHeading = styled("h2", {
 
   "&[data-level=h3]": {
     color: "$black50",
-    fontFamily: "$northwesternSansLight",
     fontSize: "$gr6",
     fontWeight: "400",
     marginBottom: "$gr3",
+    fontFamily: "$northwesternDisplayRegular",
+    paddingTop: "0.2em",
   },
 
   "&[data-level=h4]": {

components/Shared/Card.styled.ts

@@ -18,6 +18,7 @@ const CardStyled = styled("div", {
     fontFamily: "$northwesternSansRegular",
     fontSize: "$gr3",
     lineHeight: "1.47em",
+    color: "$black50",
 
     a: {
       cursor: "pointer",

components/Shared/Card.tsx

@@ -1,4 +1,5 @@
 import React, { ReactNode } from "react";
+
 import { CardStyled } from "@/components/Shared/Card.styled";
 import Figure from "@/components/Figure/Figure";
 import Link from "next/link";

components/Shared/Dialog.styled.ts

@@ -29,7 +29,7 @@ const DialogBody = styled("div", {
   maxHeight: "calc(100% - 3.5rem)",
   minHeight: "calc(100% - 3.5rem)",
   overflow: "scroll",
-  padding: "$gr3",
+  padding: "$gr3 $gr4 $gr4",
 
   "&:before": {
     position: "absolute",
@@ -44,7 +44,7 @@ const DialogBody = styled("div", {
 const DialogHeader = styled("header", {
   position: "absolute",
   top: "0",
-  padding: "1rem",
+  padding: "$gr4",
   display: "flex",
   width: "100%",
   justifyContent: "space-between",

components/Shared/Dialog.tsx

@@ -32,6 +32,7 @@ const SharedDialog: React.FC<SharedDialogProps> = ({
         <DialogOverlay />
         <DialogContent
           onInteractOutside={handleCloseClick}
+          onEscapeKeyDown={handleCloseClick}
           {...(size ? { size } : {})}
         >
           <DialogHeader>

components/Shared/IIIF/ContentState.styled.tsx

@@ -0,0 +1,143 @@
+import { color } from "framer-motion";
+import { styled } from "@/stitches.config";
+
+const StyledIIIFContentState = styled("div", {
+  marginRight: "$gr3",
+});
+
+const StyledIIIFContentStateButton = styled("button", {
+  background: "transparent",
+  border: "none",
+  display: "flex",
+  fontFamily: "$northwesternSansRegular",
+  fontSize: "$gr3",
+  color: "$black50",
+  gap: "$gr2",
+  height: "$gr4",
+  alignItems: "center",
+  borderRadius: "1em",
+  padding: "0 $gr2",
+
+  "&:hover, &:active": {
+    backgroundColor: "$purple10",
+    color: "$purple",
+    cursor: "pointer",
+  },
+
+  svg: {
+    fill: "$purple",
+    height: "$gr3",
+  },
+});
+
+const StyledIIIFContentStateURI = styled("div", {
+  background: "$gray6",
+  borderRadius: "1em",
+  padding: "$gr2",
+  paddingRight: "$gr3",
+  marginBottom: "$gr2",
+  width: "100%",
+  display: "flex",
+  justifyContent: "space-between",
+
+  input: {
+    background: "transparent",
+    border: "none",
+    flexGrow: 1,
+    fontFamily: "$northwesternSansRegular",
+    fontSize: "$gr2",
+    paddingRight: "$gr2",
+    color: "$black50",
+    maskImage:
+      "linear-gradient(to right, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0))",
+  },
+
+  button: {
+    fontFamily: "$northwesternSansBold",
+    fontSize: "$gr2",
+    fontWeight: "400",
+  },
+});
+
+const StyledIIIFContentStateOptions = styled("div", {
+  fontSize: "$gr3",
+  display: "flex",
+  flexDirection: "column",
+  gap: "$gr1",
+
+  label: {
+    fontSize: "$gr3",
+    gap: "$gr1",
+    alignItems: "center",
+    whiteSpace: "nowrap",
+
+    em: {
+      color: "$black50",
+      fontStyle: "normal",
+      fontFamily: "$northwesternSansBold",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis",
+      overflow: "hidden",
+    },
+  },
+
+  input: {
+    marginRight: "$gr1",
+  },
+
+  textarea: {
+    height: "$gr6 !important",
+    border: "1px solid $black20",
+    padding: "$gr2",
+    borderRadius: "3px",
+  },
+});
+
+const StyledIIIFContentStateActiveFile = styled("div", {
+  display: "flex",
+  alignItems: "center",
+  fontFamily: "$northwesternSansBold",
+  gap: "$gr2",
+  fontSize: "$gr3",
+  padding: "0 0 $gr2",
+
+  div: {
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    gap: "$gr1",
+
+    span: {
+      textOverflow: "ellipsis",
+      overflow: "hidden",
+      whiteSpace: "nowrap",
+
+      "&:last-child": {
+        color: "$black50",
+        fontSize: "$gr2",
+        fontFamily: "$northwesternSansRegular",
+      },
+    },
+  },
+
+  img: {
+    objectFit: "cover",
+    borderRadius: "2px",
+    marginTop: "-2px",
+    color: "transparent",
+    backgroundColor: "rgba(0, 0, 0, 0.1)",
+  },
+});
+
+const StyledIIIFContentStateInner = styled("div", {
+  flexGrow: 1,
+});
+
+export {
+  StyledIIIFContentState,
+  StyledIIIFContentStateActiveFile,
+  StyledIIIFContentStateButton,
+  StyledIIIFContentStateInner,
+  StyledIIIFContentStateOptions,
+  StyledIIIFContentStateURI,
+};