Add WorkLinkingProperty. (#189)

* Add WorkLinkingProperty.

* Set a default if locale not set.

* Make sure anchors found in requiredStatements follow theming.

* Update Clover.

* Remote unused layout.

* Update src/components/Shared/DefinitionList.styled.ts

Co-authored-by: mat <mat@northwestern.edu>

* Update src/components/Work/LinkingProperty.tsx

Co-authored-by: mat <mat@northwestern.edu>

---------

Co-authored-by: mat <mat@northwestern.edu>

config/locales/en.json

@@ -2,6 +2,10 @@
   "footerSourceCollection": "Source Collection",
   "footerToggleTheme": "Toggle Theme",
   "homepageHighlightedWorks": "Highlighted Works",
+  "primitiveHomepage": "Homepage",
+  "primitivePartOf": "Parent collections",
+  "primitiveRendering": "Alternative formats",
+  "primitiveSeeAlso": "See also",
   "searchButton": "Search",
   "searchResults": "Results",
   "searchFilter": "Filter",

content/works/_layout.mdx

@@ -18,6 +18,7 @@
         <Tabs.Content value="details">
           <Work.Metadata />
           <Work.RequiredStatement />
+          <Work.LinkingProperty />
           <Work.ManifestId />
         </Tabs.Content>
 

package.json

@@ -25,7 +25,7 @@
     "@radix-ui/react-dialog": "^1.0.2",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/themes": "^3.0.2",
-    "@samvera/clover-iiif": "^2.7.5",
+    "@samvera/clover-iiif": "^2.8.2",
     "@stitches/react": "^1.2.8",
     "axios": "^0.24.0",
     "clsx": "^1.1.1",

src/components/Shared/DefinitionList.styled.ts

@@ -14,6 +14,11 @@ const DefinitionListWrapper = styled("div", {
     dd: {
       padding: "0 0 $gr1",
       margin: "0",
+
+      a: {
+        color: "var(--accent-11)",
+        textDecoration: "none",
+      }
     },
   },
 });

src/components/Work/LinkingProperty.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import { LocaleString } from "@hooks/useLocale";
+import {
+  Homepage,
+  PartOf,
+  PrimitivesExternalWebResource,
+  PrimitivesIIIFResource,
+  Rendering,
+  SeeAlso
+} from "@samvera/clover-iiif/primitives";
+import { styled } from "@styles/stitches";
+
+const WorkLinkingProperty = ({
+  homepage, partOf, rendering, seeAlso
+}: {
+  homepage?: PrimitivesExternalWebResource[];
+  partOf?: PrimitivesIIIFResource[];
+  rendering?: PrimitivesExternalWebResource[];
+  seeAlso?: PrimitivesExternalWebResource[];
+}) => {
+
+  return (
+    <StyledLinkingProperty>
+      {rendering && (
+        <dl>
+          <dt>{LocaleString("primitiveRendering") || "Alternate formats"}</dt>
+          <dd><Rendering rendering={rendering} /></dd>
+        </dl>
+      )}
+      {seeAlso && (
+        <dl>
+          <dt>{LocaleString("primitiveSeeAlso") || "See also"}</dt>
+          <dd><SeeAlso seeAlso={seeAlso} /></dd>
+        </dl>
+      )}
+      {homepage && (
+        <dl>
+          <dt>{LocaleString("primitiveHomepage") || "Homepage"}</dt>
+          <dd><Homepage homepage={homepage} /></dd>
+        </dl>
+      )}
+      {partOf && (
+        <dl>
+          <dt>{LocaleString("primitivePartOf")  || "Parent collections"}</dt>
+          <dd><PartOf partOf={partOf} /></dd>
+        </dl>
+      )}
+    </StyledLinkingProperty>
+  );
+};
+
+export default WorkLinkingProperty;
+
+const StyledLinkingProperty = styled("div", {
+    dl: {
+      margin: "0",
+
+      dt: {
+        padding: "$gr2 0 $gr1",
+        fontWeight: "500",
+        color: "var(--gray-10)",
+        fontSize: "$gr2",
+      },
+
+      dd: {
+        padding: "0 0 $gr1",
+
+        a: {
+          color: "var(--accent-11)",
+          textDecoration: "none",
+        },
+
+        ul: {
+          listStyle: "none",
+          listStyleType: "none",
+          margin: "0",
+          paddingInlineStart: "0px",
+
+          li: {
+            listStyle: "none",
+            listStyleType: "none",
+          }
+        }
+      },
+    }
+  },
+);

src/pages/works/[slug].tsx

@@ -19,6 +19,7 @@ import WorkViewer from "@src/components/Work/Viewer";
 import WorkScroll from "@src/components/Work/Scroll";
 import WorkReferencingContent from "@src/components/Work/ReferencingContent";
 import WorkRequiredStatement from "@src/components/Work/RequiredStatement";
+import WorkLinkingProperty from "@components/Work/LinkingProperty";
 
 interface WorkProps {
   manifest: Manifest;
@@ -33,12 +34,12 @@ export default function WorkPage({
   related,
   source,
 }: WorkProps) {
-  const { id, label, metadata, requiredStatement, summary } = manifest;
-
+  const { id, homepage, label, metadata, rendering, requiredStatement, partOf, seeAlso, summary } = manifest;
   const Work = () => <></>;
 
   Work.ManifestId = () => <WorkManifestId manifestId={id} />;
   Work.Metadata = () => <WorkMetadata metadata={metadata} />;
+  Work.LinkingProperty = (props) => <WorkLinkingProperty {...props} homepage={homepage} partOf={partOf} rendering={rendering} seeAlso={seeAlso} />;
   Work.RequiredStatement = () => (
     <WorkRequiredStatement requiredStatement={requiredStatement} />
   );