Add IIIF search and collection sharing, address AI local storage bug.

.github/workflows/playwright.yml

@@ -1,9 +1,9 @@
 name: Playwright Tests
 on:
-#   push:
-#     branches: []
-#   pull_request:
-#     branches: [main, deploy/staging]
+  push:
+    branches: []
+  pull_request:
+    branches: [main, deploy/staging]
   workflow_dispatch:
 jobs:
   test:

components/Clover/ViewerWrapper.styled.ts

@@ -10,6 +10,16 @@ const ViewerWrapperStyled = styled("section", {
     background: "#f0f0f0",
   },
 
+  ".clover-viewer-header": {
+    display: "none",
+  },
+
+  ".clover-viewer-media-wrapper": {
+    "div[role='radiogroup']": {
+      paddingBottom: "0",
+    },
+  },
+
   "& label[for='information-toggle']": {
     boxShadow: "none",
   },

components/Clover/ViewerWrapper.tsx

@@ -8,6 +8,7 @@ import type {
 } from "@samvera/clover-iiif";
 
 import Announcement from "@/components/Shared/Announcement";
+import Container from "../Shared/Container";
 import { IconInfo } from "@/components/Shared/SVG/Icons";
 import React from "react";
 import { UserContext } from "@/context/user-context";
@@ -76,24 +77,26 @@ const WorkViewerWrapper: React.FC<WrapperProps> = ({
   };
 
   return (
-    <ViewerWrapperStyled data-testid="work-viewer-wrapper">
-      {manifestId && (
-        <CloverViewer
-          // @ts-ignore
-          customTheme={customTheme}
-          iiifContent={manifestId}
-          options={options}
-        />
-      )}
-      {isWorkRestricted && userAuth?.user?.isReadingRoom && (
-        <Announcement>
-          <AnnouncementContent>
-            <IconInfo />
-            <p>You have access to Work because you are in the reading room</p>
-          </AnnouncementContent>
-        </Announcement>
-      )}
-    </ViewerWrapperStyled>
+    <Container containerType="wide">
+      <ViewerWrapperStyled data-testid="work-viewer-wrapper">
+        {manifestId && (
+          <CloverViewer
+            // @ts-ignore
+            customTheme={customTheme}
+            iiifContent={manifestId}
+            options={options}
+          />
+        )}
+        {isWorkRestricted && userAuth?.user?.isReadingRoom && (
+          <Announcement>
+            <AnnouncementContent>
+              <IconInfo />
+              <p>You have access to Work because you are in the reading room</p>
+            </AnnouncementContent>
+          </Announcement>
+        )}
+      </ViewerWrapperStyled>
+    </Container>
   );
 };
 

components/Collection/Collection.styled.ts

@@ -2,12 +2,32 @@ import { styled } from "@/stitches.config";
 
 /* eslint sort-keys: 0 */
 
+const CollectionHeader = styled("div", {
+  display: "flex",
+  justifyContent: "space-between",
+  marginTop: "1.5em",
+  gap: "$gr4",
+
+  "div:last-child": {
+    flexShrink: 0,
+    flexGrow: 0,
+    marginBottom: "$gr2",
+  },
+
+  "@sm": {
+    flexDirection: "column",
+    gap: "0",
+  },
+});
+
 const Description = styled("p", {
-  fontSize: "$gr5",
-  fontFamily: "$northwesternSansLight",
   lineHeight: "1.55em",
-  margin: "$gr2 0 $gr5",
+  margin: "$gr2 0 $gr6",
   color: "$black50",
+
+  "@sm": {
+    fontSize: "$gr3",
+  },
 });
 
 const HeroWrapper = styled("div", {
@@ -22,4 +42,4 @@ const Interstitial = styled("div", {
   padding: "$gr3 0",
 });
 
-export { Description, Interstitial, HeroWrapper };
+export { CollectionHeader, Description, Interstitial, HeroWrapper };

components/Collection/NavTabs.styled.ts

@@ -1,4 +1,5 @@
 import * as TabsPrimitive from "@radix-ui/react-tabs";
+
 import { styled } from "@/stitches.config";
 
 /* eslint sort-keys: 0 */
@@ -63,7 +64,6 @@ const StyledContent = styled(TabsPrimitive.Content, {
   borderBottomLeftRadius: 6,
   borderBottomRightRadius: 6,
   outline: "none",
-  "&:focus": { boxShadow: `0 0 0 2px #f0f0f0` },
 
   "& a": {
     color: "$purple",

components/Figure/Figure.styled.ts

@@ -93,6 +93,7 @@ const FigureTitle = styled("span", {
   color: "$purple",
   display: "flex",
   alignItems: "flex-start",
+  lineHeight: "1.25em",
 });
 
 const FigureText = styled("div", {

components/Header/Super.tsx

@@ -15,7 +15,9 @@ import { NavResponsiveOnly } from "@/components/Nav/Nav.styled";
 import { NorthwesternWordmark } from "@/components/Shared/SVG/Northwestern";
 import React from "react";
 import { UserContext } from "@/context/user-context";
+import { defaultAIState } from "@/hooks/useGenerativeAISearchToggle";
 import useLocalStorage from "@/hooks/useLocalStorage";
+import { useRouter } from "next/router";
 
 const nav = [
   {
@@ -33,9 +35,12 @@ const nav = [
 ];
 
 export default function HeaderSuper() {
+  const router = useRouter();
+  const { query } = router;
+
   const [isLoaded, setIsLoaded] = React.useState(false);
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const [ai, setAI] = useLocalStorage("ai", "false");
+  const [ai, setAI] = useLocalStorage("ai", defaultAIState);
 
   React.useEffect(() => {
     setIsLoaded(true);
@@ -45,7 +50,12 @@ export default function HeaderSuper() {
   const handleMenu = () => setIsExpanded(!isExpanded);
 
   const handleLogout = () => {
-    if (ai === "true") setAI("false");
+    // reset AI state and remove query param
+    setAI(defaultAIState);
+    delete query?.ai;
+    router.push(router.pathname, { query });
+
+    // logout
     window.location.href = `${DCAPI_ENDPOINT}/auth/logout`;
   };
 

components/Heading/Heading.styled.ts

@@ -35,9 +35,10 @@ const StyledHeading = styled("h2", {
   },
 
   "&[data-level=h2]": {
-    color: "$purple",
     fontFamily: "$northwesternDisplayBold",
+    color: "$black80",
     fontSize: "$gr7",
+    letterSpacing: "-0.015em",
     fontWeight: "400",
     marginBottom: "$gr5",
   },

components/Hero/Hero.styled.ts

@@ -37,6 +37,7 @@ const HeroStyled = styled("div", {
     width: "100%",
     height: "100%",
     position: "relative",
+    zIndex: "1",
 
     ".swiper-wrapper": {
       "&::before": {
@@ -115,7 +116,7 @@ const HeroStyled = styled("div", {
           display: "flex",
           flexDirection: "column",
           alignItems: "flex-start",
-          textShadow: "2px 2px 2px #000",
+          textShadow: "3px 3px 8px #0006",
           maxWidth: "$gr11",
           textAlign: "left",
 
@@ -135,18 +136,20 @@ const HeroStyled = styled("div", {
 
           ".slide-label": {
             fontFamily: "$northwesternDisplayBold",
-            fontSize: "$gr8",
+            fontWeight: "400",
+            fontSize: "$gr7",
             display: "block",
             margin: "0 0 $gr2",
             lineHeight: "1em",
+            letterSpacing: "-0.015em",
 
             "@sm": {
               fontSize: "$gr7",
             },
           },
 
           ".slide-summary": {
-            fontFamily: "$northwesternSansLightItalic",
+            fontFamily: "$northwesternSansRegular",
             fontSize: "$gr4",
             display: "block",
             color: "$black20",

components/Hero/Hero.tsx

@@ -30,7 +30,7 @@ const Hero: React.FC<HeroProps> = ({ collection }) => {
           clickable: true,
         }}
         slidesPerView={1}
-        speed={1000}
+        speed={300}
       >
         {collection.items.map((item) => (
           <SwiperSlide key={item.id}>

components/Homepage/Collections.styled.ts

@@ -4,9 +4,6 @@ import { FigureTitle } from "@/components/Figure/Figure.styled";
 import { styled } from "@/stitches.config";
 
 const HomepageCollectionsStyled = styled("section", {
-  backgroundColor: "$purple10",
-  padding: "$gr5 0",
-
   [`${FigureTitle}`]: {
     lineHeight: "1.25em",
     fontSize: "$gr4",

components/Homepage/Overview.styled.ts

@@ -13,18 +13,20 @@ const Content = styled("div", {
 
   h2: {
     fontFamily: "$northwesternDisplayBold",
-    margin: "0 0 $gr2",
+    margin: "0 0 $gr3",
     fontSize: "$gr6",
     fontWeight: "400",
     lineHeight: "1.15",
+    letterSpacing: "-0.015em",
   },
 
   p: {
-    fontFamily: "$northwesternSansLight",
-    fontSize: "$4",
+    fontFamily: "$northwesternSansRegular",
+    fontSize: "$gr4",
     lineHeight: "1.55em",
     margin: "0 0 $gr4",
     padding: "0",
+    color: "$black50",
   },
 });
 
@@ -34,11 +36,9 @@ const Images = styled("div", {
   gridTemplateColumns: "1fr 2fr 3fr 3fr 3fr 1fr",
   gridTemplateRows: "repeat(6,auto)",
   gridGap: "$gr2",
-  marginLeft: "$gr5",
 
   "@sm": {
-    width: "100%",
-    marginLeft: "0",
+    width: "300px",
   },
 
   "img, video": {
@@ -82,13 +82,14 @@ const Images = styled("div", {
 
 const Inner = styled("div", {
   display: "flex",
-  padding: "$gr6",
+  padding: "$gr5",
   width: "auto",
   alignItems: "center",
+  gap: "$gr5",
 
   "@sm": {
     flexDirection: "column-reverse",
-    padding: "$gr4 $gr3",
+    gap: "$gr3",
   },
 });
 

components/Search/GenerativeAIToggle.test.tsx

@@ -57,7 +57,11 @@ describe("GenerativeAIToggle", () => {
 
     await user.click(checkbox);
     expect(checkbox).toHaveAttribute("data-state", "checked");
-    expect(localStorage.getItem("ai")).toEqual(JSON.stringify("true"));
+
+    const ai = JSON.parse(String(localStorage.getItem("ai")));
+    expect(ai?.enabled).toEqual("true");
+    expect(typeof ai?.expires).toEqual("number");
+    expect(ai?.expires).toBeGreaterThan(Date.now());
   });
 
   it("renders the generative AI tooltip", () => {
@@ -99,7 +103,10 @@ describe("GenerativeAIToggle", () => {
       ...defaultSearchState,
     };
 
-    localStorage.setItem("ai", JSON.stringify("true"));
+    localStorage.setItem(
+      "ai",
+      JSON.stringify({ enabled: "true", expires: 9733324925021 }),
+    );
 
     mockRouter.setCurrentUrl("/search");
     render(
@@ -117,7 +124,7 @@ describe("GenerativeAIToggle", () => {
 
     mockRouter.setCurrentUrl("/");
 
-    localStorage.setItem("ai", JSON.stringify("false"));
+    localStorage.setItem("ai", JSON.stringify({ enabled: "false" }));
 
     render(
       withUserProvider(
@@ -127,6 +134,9 @@ describe("GenerativeAIToggle", () => {
 
     await user.click(screen.getByRole("checkbox"));
 
-    expect(localStorage.getItem("ai")).toEqual(JSON.stringify("true"));
+    const ai = JSON.parse(String(localStorage.getItem("ai")));
+    expect(ai?.enabled).toEqual("true");
+    expect(typeof ai?.expires).toEqual("number");
+    expect(ai?.expires).toBeGreaterThan(Date.now());
   });
 });

components/Search/GenerativeAIToggle.tsx

@@ -63,7 +63,8 @@ export default function GenerativeAIToggle() {
       <SharedAlertDialog
         isOpen={dialog.isOpen}
         cancel={{ label: "Cancel", onClick: closeDialog }}
-        action={{ label: "Login", onClick: handleLogin }}
+        action={{ label: "Sign in", onClick: handleLogin }}
+        title="Sign in to Digital Collections"
       >
         {AI_LOGIN_ALERT}
       </SharedAlertDialog>