Add common IIIF share component.

nulib · Nov 5, 2024 · 8927e73 · 8927e73
1 parent 2f69b1d
commit 8927e73
Show file tree

Hide file tree

Showing 21 changed files with 399 additions and 84 deletions.
diff --git a/components/Clover/ViewerWrapper.styled.ts b/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",
   },

diff --git a/components/Clover/ViewerWrapper.tsx b/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>
   );
 };
 

diff --git a/components/Figure/Figure.styled.ts b/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", {

diff --git a/components/Heading/Heading.styled.ts b/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",
   },

diff --git a/components/Hero/Hero.styled.ts b/components/Hero/Hero.styled.ts
@@ -37,6 +37,7 @@ const HeroStyled = styled("div", {
     width: "100%",
     height: "100%",
     position: "relative",
+    zIndex: "1",
 
     ".swiper-wrapper": {
       "&::before": {
@@ -135,10 +136,11 @@ const HeroStyled = styled("div", {
 
           ".slide-label": {
             fontFamily: "$northwesternDisplayBold",
-            fontSize: "$gr8",
+            fontSize: "$gr7",
             display: "block",
             margin: "0 0 $gr2",
             lineHeight: "1em",
+            letterSpacing: "-0.015em",
 
             "@sm": {
               fontSize: "$gr7",

diff --git a/components/Hero/Hero.tsx b/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}>

diff --git a/components/Homepage/Collections.styled.ts b/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",

diff --git a/components/Homepage/Overview.styled.ts b/components/Homepage/Overview.styled.ts
@@ -12,19 +12,21 @@ const Content = styled("div", {
   },
 
   h2: {
-    fontFamily: "$northwesternDisplayBold",
-    margin: "0 0 $gr2",
+    fontFamily: "$northwesternDisplayBook",
+    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",
   },
 });
 

diff --git a/components/Search/Results.tsx b/components/Search/Results.tsx
@@ -2,9 +2,11 @@ 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 { SearchResultsState } from "@/types/components/search";
 import { pluralize } from "@/lib/utils/count-helpers";
@@ -27,9 +29,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="" />
+              </ResultsWrapperHeader>
             ) : (
               <NoResultsMessage>
                 <strong>Your search did not match any results.</strong> Please

diff --git a/components/Search/Search.styled.ts b/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,
 };
diff --git a/components/Shared/CopyText.styled.ts b/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 };
diff --git a/components/Shared/DefinitionList.styled.ts b/components/Shared/DefinitionList.styled.ts
@@ -4,15 +4,15 @@ import { styled } from "@/stitches.config";
 
 const DefinitionListWrapper = styled("div", {
   lineHeight: "1.47em",
+  fontSize: "$gr3",
 
   "& dt": {
-    fontSize: "$gr3",
     color: "$black",
-    fontFamily: "$northwesternDisplayBold",
+    fontFamily: "$northwesternSansBold",
   },
   "& dd": {
     marginInlineStart: "0",
-    paddingBottom: "$gr2",
+    paddingBottom: "$gr3",
   },
 });