Merge pull request #388 from nulib/preview/add-iiif-share-component

Add common IIIF share component.

README.md

@@ -1,6 +1,6 @@
 # Digital Collections
 
-Digital Collections is a UI application for discovering and interacting with Collections and Works in NUL's repository.
+Digital Collections is a UI application for discovering and interacting with Collections and Works in NUL's repository..
 
 ## Tech Stack
 

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/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/Results.tsx

@@ -2,21 +2,28 @@ import {
   NoResultsMessage,
   ResultsMessage,
   ResultsWrapper,
+  ResultsWrapperHeader,
 } from "@/components/Search/Search.styled";
 
 import Grid from "@/components/Grid/Grid";
+import IIIFShare from "../Shared/IIIF/Share";
 import PaginationAltCounts from "@/components/Search/PaginationAltCounts";
+import { SEARCH_RESULTS_PER_PAGE } from "@/lib/constants/common";
 import { SearchResultsState } from "@/types/components/search";
+import { iiifSearchUri } from "@/lib/dc-api";
 import { pluralize } from "@/lib/utils/count-helpers";
 import useGenerativeAISearchToggle from "@/hooks/useGenerativeAISearchToggle";
+import { useRouter } from "next/router";
 
 const SearchResults: React.FC<SearchResultsState> = ({
   data,
   error,
   loading,
 }) => {
   const { isChecked: isAI } = useGenerativeAISearchToggle();
+  const router = useRouter();
 
+  const iiifCollection = iiifSearchUri(router.query, SEARCH_RESULTS_PER_PAGE);
   const totalResults = data?.pagination?.total_hits;
 
   return (
@@ -27,9 +34,12 @@ const SearchResults: React.FC<SearchResultsState> = ({
         <>
           {!isAI &&
             (totalResults ? (
-              <ResultsMessage data-testid="results-count">
-                {pluralize("result", totalResults)}
-              </ResultsMessage>
+              <ResultsWrapperHeader>
+                <ResultsMessage data-testid="results-count">
+                  {pluralize("result", totalResults)}
+                </ResultsMessage>
+                <IIIFShare uri={iiifCollection} />
+              </ResultsWrapperHeader>
             ) : (
               <NoResultsMessage>
                 <strong>Your search did not match any results.</strong> Please

components/Search/Search.styled.ts

@@ -87,7 +87,6 @@ const Button = styled("button", {
 
 const ResultsMessage = styled("span", {
   color: "$black50",
-  padding: "0 $gr4 $gr4",
   fontSize: "$gr3",
 
   "@lg": {
@@ -126,6 +125,14 @@ const ResultsWrapper = styled("div", {
   minHeight: "80vh",
 });
 
+const ResultsWrapperHeader = styled("header", {
+  display: "flex",
+  flexDirection: "row",
+  justifyContent: "space-between",
+  alignItems: "center",
+  padding: "0 $gr4 $gr4",
+});
+
 const StyledResponseWrapper = styled("div", {
   padding: "0 0 $gr6",
 });
@@ -135,6 +142,7 @@ export {
   NoResultsMessage,
   ResultsMessage,
   ResultsWrapper,
+  ResultsWrapperHeader,
   SearchStyled,
   StyledResponseWrapper,
 };

components/Shared/CopyText.styled.ts

@@ -6,13 +6,12 @@ const StyledStatus = styled("span", {
   display: "flex",
   alignContent: "center",
   alignItems: "center",
-  padding: "0 $gr1",
-  marginLeft: "$gr1",
-  backgroundColor: "$darkBlueA",
-  color: "$white",
+  color: "$darkBlueA",
   borderRadius: "3px",
   fontSize: "$gr1",
   textTransform: "uppercase",
+  position: "absolute",
+  right: "-1.25em",
 });
 
 const StyledCopyText = styled("button", {
@@ -26,15 +25,17 @@ const StyledCopyText = styled("button", {
   fontFamily: "$northwesternSans",
   fontSize: "$gr3",
   whiteSpace: "nowrap",
+  textDecoration: "underline",
+  textDecorationThickness: "min(2px,max(1px,.05em))",
+  textUnderlineOffset: "calc(.05em + 2px)",
+  textDecorationColor: "$purple10",
+  position: "relative",
+  zIndex: "0",
 
   svg: {
     height: "calc($gr3 - 3px)",
     marginRight: "$gr1",
   },
-
-  "&:hover": {
-    textDecoration: "underline",
-  },
 });
 
 export { StyledCopyText, StyledStatus };