diff --git a/components/Clover/ViewerWrapper.styled.ts b/components/Clover/ViewerWrapper.styled.ts index 2d580346..f1d1c560 100644 --- 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 index 24076213..4a6cf573 100644 --- 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 = ({ }; return ( - - {manifestId && ( - - )} - {isWorkRestricted && userAuth?.user?.isReadingRoom && ( - - - -

You have access to Work because you are in the reading room

- - - )} - + + + {manifestId && ( + + )} + {isWorkRestricted && userAuth?.user?.isReadingRoom && ( + + + +

You have access to Work because you are in the reading room

+ + + )} + + ); }; diff --git a/components/Collection/Collection.styled.ts b/components/Collection/Collection.styled.ts index 9423ef76..0328651b 100644 --- a/components/Collection/Collection.styled.ts +++ b/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 }; diff --git a/components/Collection/NavTabs.styled.ts b/components/Collection/NavTabs.styled.ts index 941ee844..eac53e3d 100644 --- a/components/Collection/NavTabs.styled.ts +++ b/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", diff --git a/components/Figure/Figure.styled.ts b/components/Figure/Figure.styled.ts index 1d2e8c54..7c11f9fd 100644 --- 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 index 2cac8d43..123e4b7c 100644 --- 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 index 4eb41ff1..dafc85fa 100644 --- 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": { @@ -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,10 +136,12 @@ 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", @@ -146,7 +149,7 @@ const HeroStyled = styled("div", { }, ".slide-summary": { - fontFamily: "$northwesternSansLightItalic", + fontFamily: "$northwesternSansRegular", fontSize: "$gr4", display: "block", color: "$black20", diff --git a/components/Hero/Hero.tsx b/components/Hero/Hero.tsx index a1bacaea..029bad32 100644 --- a/components/Hero/Hero.tsx +++ b/components/Hero/Hero.tsx @@ -30,7 +30,7 @@ const Hero: React.FC = ({ collection }) => { clickable: true, }} slidesPerView={1} - speed={1000} + speed={300} > {collection.items.map((item) => ( diff --git a/components/Homepage/Collections.styled.ts b/components/Homepage/Collections.styled.ts index f82e32bf..c60e9229 100644 --- 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 index 02d0e450..8771ae48 100644 --- a/components/Homepage/Overview.styled.ts +++ b/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", }, }); diff --git a/components/Search/Results.tsx b/components/Search/Results.tsx index f3753075..11624703 100644 --- a/components/Search/Results.tsx +++ b/components/Search/Results.tsx @@ -2,13 +2,18 @@ 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 = ({ data, @@ -16,7 +21,9 @@ const SearchResults: React.FC = ({ 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 = ({ <> {!isAI && (totalResults ? ( - - {pluralize("result", totalResults)} - + + + {pluralize("result", totalResults)} + + + ) : ( Your search did not match any results. Please diff --git a/components/Search/Search.styled.ts b/components/Search/Search.styled.ts index 113bbd14..12187f81 100644 --- 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 index d4aee8aa..64237fca 100644 --- 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 index 808b8923..0dfa6b36 100644 --- 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", }, }); diff --git a/components/Shared/Expand/Expand.styled.ts b/components/Shared/Expand/Expand.styled.ts index 7890055c..c4ae989c 100644 --- a/components/Shared/Expand/Expand.styled.ts +++ b/components/Shared/Expand/Expand.styled.ts @@ -1,10 +1,10 @@ import { VariantProps, styled } from "@/stitches.config"; + import { Button } from "@nulib/design-system"; /* eslint sort-keys: 0 */ const ExpandButton = styled(Button, { - margin: "0 auto", opacity: "1", transition: "$dcAll", }); @@ -14,9 +14,9 @@ const ExpandEdge = styled("div", { width: "100%", bottom: "0", display: "flex", - justifyContent: "center", - padding: "$4 0 0", backgroundColor: "$white", + justifyContent: "flex-start", + paddingTop: "$gr7", background: "linear-gradient(to bottom, #fff0 0%, #fff 61.8%)", transition: "$dcAll", overflow: "hidden", diff --git a/components/Shared/Expand/Expand.tsx b/components/Shared/Expand/Expand.tsx index 4f852f5e..0b8b1d4e 100644 --- a/components/Shared/Expand/Expand.tsx +++ b/components/Shared/Expand/Expand.tsx @@ -38,7 +38,12 @@ const Expand: React.FC = ({ > {children} - + {buttonText} diff --git a/components/Shared/IIIF/Share.test.tsx b/components/Shared/IIIF/Share.test.tsx new file mode 100644 index 00000000..830c2fff --- /dev/null +++ b/components/Shared/IIIF/Share.test.tsx @@ -0,0 +1,56 @@ +import { render, screen } from "@/test-utils"; + +import IIIFShare from "@/components/Shared/IIIF/Share"; +import React from "react"; + +describe("IIIFShare", () => { + const uri = + "https://iiif.io/api/cookbook/recipe/0001-mvm-image/manifest.json"; + + it("renders a dropdown with IIIF viewers", async () => { + render(); + + // Verify that initial elements are present + expect(screen.getByTestId("iiif-share")).toBeInTheDocument(); + + const trigger = screen.getByTestId("iiif-share-trigger"); + expect(trigger).toHaveTextContent("View as IIIF"); + }); + + it("renders dropdown content with expected items", async () => { + render(); + + const content = screen.getByTestId("iiif-share-content"); + expect(screen.getByText("View in...")).toBeInTheDocument(); + + const links = Array.from(content.querySelectorAll("a")); + const expectedLinks = { + "Clover IIIF": + "https://samvera-labs.github.io/clover-iiif/docs/viewer/demo?iiif-content=https%3A%2F%2Fiiif.io%2Fapi%2Fcookbook%2Frecipe%2F0001-mvm-image%2Fmanifest.json", + Mirador: + "https://projectmirador.org/embed?iiif-content=https%3A%2F%2Fiiif.io%2Fapi%2Fcookbook%2Frecipe%2F0001-mvm-image%2Fmanifest.json", + Theseus: + "https://theseusviewer.org/?iiif-content=https%3A%2F%2Fiiif.io%2Fapi%2Fcookbook%2Frecipe%2F0001-mvm-image%2Fmanifest.json", + "View Raw JSON": uri, + "What is IIIF?": "https://iiif.io/get-started/why-iiif/", + }; + + // verify that the links have the expected hrefs + expect(links.length).toEqual(Object.keys(expectedLinks).length); + links.forEach((link) => { + expect(link).toBeInTheDocument(); + expect(link).toBeInstanceOf(HTMLAnchorElement); + expect(link).toHaveAttribute("target", "_blank"); + const key = link.textContent as keyof typeof expectedLinks; + const expectedHref = expectedLinks[key]; + if (expectedHref) { + expect(link).toHaveAttribute("href", expectedHref); + } + }); + + // verify that the copy button is present + const copyText = screen.getByText("Copy IIIF JSON"); + expect(copyText).toBeInTheDocument(); + expect(copyText).toBeInstanceOf(HTMLButtonElement); + }); +}); diff --git a/components/Shared/IIIF/Share.tsx b/components/Shared/IIIF/Share.tsx new file mode 100644 index 00000000..e58720cd --- /dev/null +++ b/components/Shared/IIIF/Share.tsx @@ -0,0 +1,204 @@ +import * as Dropdown from "@radix-ui/react-dropdown-menu"; + +import { IconChevronDown, IconExternalLink } from "../SVG/Icons"; + +import CopyText from "../CopyText"; +import IIIFLogo from "../SVG/IIIF"; +import IIIFViewerLink from "./ViewerLink"; +import Icon from "../Icon"; +import Link from "next/link"; +import { styled } from "@/stitches.config"; + +const IIIFShare = ({ + uri, + dropdownMenuProps, +}: { + uri: string; + dropdownMenuProps?: Dropdown.DropdownMenuProps; +}) => { + return ( + + + + + + + View as IIIF + + + + + + View in... + + + + + + + + + + + + + View Raw JSON + + + + + + + + + What is IIIF? + + + + + + + + + ); +}; + +const StyledIIIFShare = styled("div", { + position: "relative", + zIndex: 1, + + "> button": { + backgroundColor: "transparent", + color: "$black50", + fontFamily: "$northwesternSansRegular", + fontSize: "$gr3", + borderRadius: "38px", + border: "none", + display: "flex", + alignItems: "center", + justifyContent: "space-between", + cursor: "pointer", + gap: "$gr1", + padding: "0 $gr1", + margin: "0", + + "> span": { + svg: { + padding: "7px", + path: { + fill: "$purple !important", + }, + }, + + "&:last-child": { + display: "inline-flex", + alignItems: "center", + gap: "$gr1", + + "svg path": { + stroke: "$black50 !important", + fill: "none !important", + }, + }, + }, + + em: { + fontStyle: "normal", + display: "inline-flex", + marginBottom: "-3px", + }, + + "&:hover, &:active ": { + color: "$purple", + fill: "$black", + backgroundColor: "$purple10", + + "> span:last-child svg path": { + stroke: "$purple !important", + }, + }, + }, +}); + +const StyledIIIFShareContent = styled(Dropdown.Content, { + zIndex: 1, + backgroundColor: "$white", + padding: "$gr3", + borderRadius: "3px", + boxShadow: "5px 5px 19px 0 #0002", + display: "flex", + flexDirection: "column", + fontSize: "$gr2 ", + minWidth: "160px", + gap: "$gr2", + + a: { + color: "$purple", + display: "flex", + + svg: { + color: "$purple", + fill: "$purple", + }, + }, + + button: { + fontSize: "$gr2", + margin: "0 !important", + padding: "0 !important", + fontWeight: "400", + lineHeight: "inherit !important", + textDecoration: "none", + color: "$purple", + }, +}); + +const StyledDropdownLabel = styled(Dropdown.Separator, { + fontSize: "$gr2 ", + color: "$black50", +}); + +const StyledDropdownSeparator = styled(Dropdown.Separator, { + height: "1px", + backgroundColor: "$gray6", +}); + +export default IIIFShare; diff --git a/components/Shared/IIIF/ViewerLink.test.tsx b/components/Shared/IIIF/ViewerLink.test.tsx new file mode 100644 index 00000000..f2d5c777 --- /dev/null +++ b/components/Shared/IIIF/ViewerLink.test.tsx @@ -0,0 +1,36 @@ +import { render, screen } from "@testing-library/react"; + +import React from "react"; +import ViewerLink from "./ViewerLink"; + +describe("ViewerLink", () => { + const uri = + "https://iiif.io/api/cookbook/recipe/0001-mvm-image/manifest.json"; + const viewer = { + label: "IIIF Viewer", + href: "https://example.org/iiif-viewer", + }; + + it("renders an `` element to IIIF Viewer", () => { + render(); + expect(screen.getByText(viewer.label)).toBeInTheDocument(); + expect(screen.getByText(viewer.label).closest("a")).toHaveAttribute( + "href", + `${viewer.href}?iiif-content=${encodeURIComponent(uri)}`, + ); + }); + + it("renders an `` element to IIIF Viewer with custom iiif-content param", () => { + render( + , + ); + expect(screen.getByText(viewer.label)).toBeInTheDocument(); + expect(screen.getByText(viewer.label).closest("a")).toHaveAttribute( + "href", + `${viewer.href}?manifest=${encodeURIComponent(uri)}`, + ); + }); +}); diff --git a/components/Shared/IIIF/ViewerLink.tsx b/components/Shared/IIIF/ViewerLink.tsx new file mode 100644 index 00000000..18417799 --- /dev/null +++ b/components/Shared/IIIF/ViewerLink.tsx @@ -0,0 +1,26 @@ +import Link from "next/link"; + +interface IIIFViewerLinkProps { + viewer: { + label: string; + href: string; + iiifContentParam?: string; + }; + uri: string; +} + +const IIIFViewerLink: React.FC = ({ viewer, uri }) => { + const iiifContent = new URL(viewer.href); + iiifContent.searchParams.set( + viewer.iiifContentParam ? viewer.iiifContentParam : "iiif-content", + uri, + ); + + return ( + + {viewer.label} + + ); +}; + +export default IIIFViewerLink; diff --git a/components/Shared/Icon.tsx b/components/Shared/Icon.tsx index fbd94278..794f8a61 100644 --- a/components/Shared/Icon.tsx +++ b/components/Shared/Icon.tsx @@ -1,12 +1,23 @@ +import { CSS } from "@stitches/react"; import { ReactNode } from "react"; import { styled } from "@/stitches.config"; interface IconProps { children: ReactNode; + style?: CSS; + hasSVGPadding?: boolean; } -const Icon: React.FC = ({ children }) => { - return {children}; +const Icon: React.FC = ({ + children, + style, + hasSVGPadding = true, +}) => { + return ( + + {children} + + ); }; /* eslint sort-keys: 0 */ @@ -32,7 +43,21 @@ export const IconStyled = styled("span", { color: "inherit", fill: "inherit", stroke: "inherit", - padding: "8px", + }, + + variants: { + hasSVGPadding: { + true: { + svg: { + padding: "0.5em", + }, + }, + false: { + svg: { + padding: "0", + }, + }, + }, }, }); diff --git a/components/Shared/SVG/Icons.tsx b/components/Shared/SVG/Icons.tsx index 7e5344b6..0df72d2e 100644 --- a/components/Shared/SVG/Icons.tsx +++ b/components/Shared/SVG/Icons.tsx @@ -79,6 +79,13 @@ const IconClear: React.FC = () => ( ); +const IconExternalLink: React.FC = () => ( + + + + +); + const IconFilter: React.FC = () => ( Filter @@ -228,6 +235,7 @@ export { IconCheck, IconChevronDown, IconClear, + IconExternalLink, IconFilter, IconImage, IconInfo, diff --git a/components/Shared/WorkCount/WorkCount.styled.ts b/components/Shared/WorkCount/WorkCount.styled.ts index 345f8690..94c05943 100644 --- a/components/Shared/WorkCount/WorkCount.styled.ts +++ b/components/Shared/WorkCount/WorkCount.styled.ts @@ -4,7 +4,6 @@ import { styled } from "@/stitches.config"; const WorkCountStyled = styled("div", { display: "inline-flex", - backgroundColor: "$purple10", color: "$white", fontSize: "$gr1", borderRadius: "1rem", diff --git a/components/Work/ActionsDialog/DownloadAndShare/IIIFManifest.tsx b/components/Work/ActionsDialog/DownloadAndShare/IIIFManifest.tsx index cd84a852..ad8a9bcc 100644 --- a/components/Work/ActionsDialog/DownloadAndShare/IIIFManifest.tsx +++ b/components/Work/ActionsDialog/DownloadAndShare/IIIFManifest.tsx @@ -48,18 +48,19 @@ const IIIFManifest: React.FC = ({ manifest, work }) => { manifestId={manifest.id} /> - {(isWorkInstitution || isWorkPrivate) && ( - - Opening in external tools like Mirador is not supported for works - that require authentication. - - )} + + {(isWorkInstitution || isWorkPrivate) && ( + + Opening in external tools like Mirador is not supported for works that + require authentication. + + )} ); }; diff --git a/components/Work/TopInfo.styled.ts b/components/Work/TopInfo.styled.ts index 44586359..0b0cabdc 100644 --- a/components/Work/TopInfo.styled.ts +++ b/components/Work/TopInfo.styled.ts @@ -11,7 +11,6 @@ const ActionButtons = styled("div", { button: { marginRight: "$gr3", - fontFamily: "$northwesternSansLight", paddingTop: "$gr3", "&:last-child": { @@ -45,7 +44,7 @@ const TopInfoContent = styled("div", { }); const TopInfoWrapper = styled("section", { - margin: "$gr5 0", + margin: "$gr5 0 $gr6", [`> header`]: { display: "flex", @@ -53,25 +52,42 @@ const TopInfoWrapper = styled("section", { h1: { lineHeight: "1em", + fontWeight: "400", fontFamily: "$northwesternDisplayBold", - fontSize: "$8", - letterSpacing: "-0.015em", + fontSize: "$gr7", + letterSpacing: "-0.025em", margin: "0", - - "@sm": { - fontSize: "$gr7", - }, }, p: { - fontSize: "$gr5", + fontSize: "$gr4", color: "$black50", - fontFamily: "$northwesternSansLight", lineHeight: "1.47em", + }, + }, +}); - "@sm": { - fontSize: "$gr4", - }, +const TopInfoHeaderContent = styled("div", { + display: "flex", + justifyContent: "space-between", + padding: "0 0 $gr3", + gap: "$gr2", + + "@sm": { + flexDirection: "column", + gap: "0", + }, + + "> div:last-child": { + flexShrink: 0, + display: "flex", + alignItems: "flex-start", + justifyContent: "flex-end", + width: "38.2%", + + "@sm": { + justifyContent: "center", + width: "100%", }, }, }); @@ -86,4 +102,10 @@ const TopInfoCollection = styled("div", { }, }); -export { ActionButtons, TopInfoCollection, TopInfoContent, TopInfoWrapper }; +export { + ActionButtons, + TopInfoCollection, + TopInfoContent, + TopInfoHeaderContent, + TopInfoWrapper, +}; diff --git a/components/Work/TopInfo.tsx b/components/Work/TopInfo.tsx index e4962656..04a5ad24 100644 --- a/components/Work/TopInfo.tsx +++ b/components/Work/TopInfo.tsx @@ -2,6 +2,7 @@ import { ActionButtons, TopInfoCollection, TopInfoContent, + TopInfoHeaderContent, TopInfoWrapper, } from "@/components//Work/TopInfo.styled"; import { @@ -15,6 +16,7 @@ import { Button } from "@nulib/design-system"; import Card from "@/components/Shared/Card"; import { DefinitionListWrapper } from "@/components/Shared/DefinitionList.styled"; import Expand from "@/components/Shared/Expand/Expand"; +import IIIFShare from "../Shared/IIIF/Share"; import { Manifest } from "@iiif/presentation-3"; import type { Work } from "@nulib/dcapi-types"; import WorkActionsDialog from "@/components/Work/ActionsDialog/ActionsDialog"; @@ -71,10 +73,20 @@ const WorkTopInfo: React.FC = ({ return (
- - {manifest?.summary && ( - - )} + +
+
+ + +