Add Rendering primitive. (#194)

* Add `Rendering` primitive.

pages/docs/rendering.mdx

@@ -0,0 +1,144 @@
+---
+title: Rendering
+---
+
+import IIIFBadge from "docs/components/IIIFBadge";
+import { Rendering } from "src/components/Primitives";
+import { Tabs, Tab } from "nextra/components";
+
+# Rendering
+
+The Rendering component is used to display a list of alternate formats related to a resource. Whereas SeeAlso is used
+to link to a machine-readable resource such as metadata, the Rendering component alerts users that the resource is
+available in another format such as PDF or ePub or has a related format. Because of the wide variety of formats that
+resources can be available in, the Rendering component is flexible and be of any media type and contain any type of
+data.
+
+<IIIFBadge
+  href="https://iiif.io/api/presentation/3.0/#rendering"
+  text={["rendering"]}
+/>
+
+<Tabs items={["Code", "Example", "HTML"]}>
+  <Tab>
+    ```jsx
+    <Rendering
+      rendering={[
+        {
+          id: "https://fixtures.iiif.io/other/UCLA/kabuki_ezukushi_rtl.pdf",
+          type: "Text",
+          label: {
+            en: ["PDF version"],
+          },
+          format: "application/pdf",
+        },
+      ]}
+    />
+    ```
+  </Tab>
+  <Tab>
+    <Rendering
+      rendering={[
+        {
+          id: "https://fixtures.iiif.io/other/UCLA/kabuki_ezukushi_rtl.pdf",
+          type: "Text",
+          label: {
+            en: ["PDF version"],
+          },
+          format: "application/pdf",
+        },
+      ]}
+    />
+  </Tab>
+  <Tab>
+    ```html
+    <ul class="c-PJLV">
+      <li class="c-PJLV">
+        <a
+          href="https://fixtures.iiif.io/other/UCLA/kabuki_ezukushi_rtl.pdf"
+          target="_blank"
+        >
+          PDF version
+        </a>
+      </li>
+    </ul>
+    ```
+  </Tab>
+</Tabs>
+
+## Usage
+
+### React
+
+```jsx
+import { Rendering } from "@samvera/clover-iiif/primitives";
+
+const CustomRendering = ({ rendering }) => {
+  return <Rendering rendering={rendering} />;
+};
+
+export default CustomRendering;
+```
+
+## API Reference
+
+| Prop        | Type                                                         | Default | Required |
+| ----------- | ------------------------------------------------------------ | ------- | -------- |
+| `as`        | `ol`, `ul`                                                   | `ul`    | --       |
+| `rendering` | [rendering](https://iiif.io/api/presentation/3.0/#rendering) | --      | **Yes**  |
+| `className` | `string`, `undefined`                                        | --      | --       |
+| `style`     | `CSSProperties`, `undefined`                                 | --      | --       |
+| `lang`      | `string`, `undefined`                                        | --      | --       |
+| `title`     | `string`, `undefined`                                        | --      | --       |
+| `data-*`    | `string`, `undefined`                                        | --      | --       |
+| `aria-*`    | `AriaAttributes`, `undefined`                                | --      | --       |
+
+### Custom Element
+
+The `Rendering` component can be rendered as either `ol` or `ul` elements. The default is `ul`.
+
+<Tabs items={["Code", "Example", "HTML"]}>
+  <Tab>
+    ```jsx
+    <Rendering
+      rendering={[
+        {
+          id: "https://fixtures.iiif.io/other/UCLA/kabuki_ezukushi_rtl.pdf",
+          type: "Text",
+          label: {
+            en: ["PDF version"],
+          },
+          format: "application/pdf",
+        },
+      ]}
+      as="ol"
+    />
+    ```
+  </Tab>
+  <Tab>
+    <Rendering
+      rendering={[
+        {
+          id: "https://fixtures.iiif.io/other/UCLA/kabuki_ezukushi_rtl.pdf",
+          type: "Text",
+          label: {
+            en: ["PDF version"],
+          },
+          format: "application/pdf",
+        },
+      ]}
+      as="ol"
+    />
+  </Tab>
+  <Tab>
+    ```html
+    <ol class="c-PJLV">
+      <li class="c-PJLV">
+        <a href="https://fixtures.iiif.io/other/UCLA/kabuki_ezukushi_rtl.pdf">
+          PDF version
+        </a>
+      </li>
+    </ol>
+    ```
+  </Tab>
+</Tabs>

pages/index.mdx

@@ -10,6 +10,7 @@ import {
   Label,
   Metadata,
   PartOf,
+  Rendering,
   RequiredStatement,
   SeeAlso,
   Summary,
@@ -306,6 +307,32 @@ import "swiper/css/pagination";
         <SeeAlso seeAlso={manifest.seeAlso} />
         ```
       </SplashElement>
+      <SplashElement
+        text="Rendering"
+        css={{ height: "14.6vh" }}
+        component={
+          <Rendering
+            className="clover-link"
+            rendering={[
+              {
+                id: "https://fixtures.iiif.io/other/UCLA/kabuki_ezukushi_rtl.pdf",
+                type: "Text",
+                label: {
+                  en: [
+                    "PDF version"
+                  ]
+                },
+                format: "application/pdf"
+              }
+            ]}
+          />
+        }
+        href="docs/rendering"
+      >
+        ```jsx
+        <Rendering rendering={manifest.rendering} />
+        ```
+      </SplashElement>
       <SplashElement
         text="Homepage"
         css={{ height: "14.6vh" }}

src/components/Primitives/Rendering/Rendering.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { styled } from "src/styles/stitches.config";
+import { getLabelAsString } from "src/lib/label-helpers";
+import { PrimitivesRendering } from "src/types/primitives";
+import { sanitizeAttributes } from "src/lib/html-element";
+
+const StyledRendering = styled("li", {});
+const StyledWrapper = styled("ul", {});
+
+const Rendering: React.FC<PrimitivesRendering> = (props) => {
+  const { as, rendering } = props;
+
+  /**
+   * Create attributes and remove React props
+   */
+  const remove = ["as", "rendering"];
+  const attributes = sanitizeAttributes(props, remove);
+
+  return (
+    <StyledWrapper as={as}>
+      {rendering &&
+        rendering.map((resource) => {
+          const label = getLabelAsString(
+            resource.label,
+            attributes.lang,
+          ) as string;
+          return (
+            <StyledRendering key={resource.id}>
+              <a href={resource.id} {...attributes} target="_blank">
+                {label ? label : resource.id}
+              </a>
+            </StyledRendering>
+          );
+        })}
+    </StyledWrapper>
+  );
+};
+
+export default Rendering;

src/components/Primitives/index.tsx

@@ -5,6 +5,7 @@ import Markup from "src/components/Primitives/Markup/Markup";
 import Metadata from "src/components/Primitives/Metadata/Metadata";
 import MetadataItem from "src/components/Primitives/Metadata/Item";
 import PartOf from "src/components/Primitives/PartOf/PartOf";
+import Rendering from "src/components/Primitives/Rendering/Rendering";
 import RequiredStatement from "src/components/Primitives/RequiredStatement/RequiredStatement";
 import SeeAlso from "src/components/Primitives/SeeAlso/SeeAlso";
 import Summary from "src/components/Primitives/Summary/Summary";
@@ -18,6 +19,7 @@ import {
   PrimitivesMetadata,
   PrimitivesMetadataItem,
   PrimitivesPartOf,
+  PrimitivesRendering,
   PrimitivesRequiredStatement,
   PrimitivesSeeAlso,
   PrimitivesSummary,
@@ -33,6 +35,7 @@ export interface CloverPrimitivesComposition {
   Metadata: React.FC<PrimitivesMetadata>;
   MetadataItem: React.FC<PrimitivesMetadataItem>;
   PartOf: React.FC<PrimitivesPartOf>;
+  Rendering: React.FC<PrimitivesRendering>;
   RequiredStatement: React.FC<PrimitivesRequiredStatement>;
   SeeAlso: React.FC<PrimitivesSeeAlso>;
   Summary: React.FC<PrimitivesSummary>;
@@ -52,6 +55,7 @@ Primitives.Markup = Markup;
 Primitives.Metadata = Metadata;
 Primitives.MetadataItem = MetadataItem;
 Primitives.PartOf = PartOf;
+Primitives.Rendering = Rendering;
 Primitives.RequiredStatement = RequiredStatement;
 Primitives.SeeAlso = SeeAlso;
 Primitives.Summary = Summary;
@@ -66,6 +70,7 @@ export {
   Metadata,
   MetadataItem,
   PartOf,
+  Rendering,
   RequiredStatement,
   SeeAlso,
   Summary,

src/components/Viewer/InformationPanel/About/About.tsx

@@ -6,6 +6,7 @@ import {
   Homepage,
   Id,
   Metadata,
+  Rendering,
   RequiredStatement,
   Rights,
   SeeAlso,
@@ -29,6 +30,7 @@ const About: React.FC = () => {
 
   const [homepage, setHomepage] = useState<IIIFExternalWebResource[]>([]);
   const [seeAlso, setSeeAlso] = useState<IIIFExternalWebResource[]>([]);
+  const [rendering, setRendering] = useState<IIIFExternalWebResource[]>([]);
   const [thumbnail, setThumbnail] = useState<IIIFExternalWebResource[]>([]);
 
   useEffect(() => {
@@ -37,6 +39,7 @@ const About: React.FC = () => {
 
     if (data.homepage?.length > 0) setHomepage(vault.get(data.homepage));
     if (data.seeAlso?.length > 0) setSeeAlso(vault.get(data.seeAlso));
+    if (data.rendering?.length > 0) setRendering(vault.get(data.rendering));
     if (data.thumbnail?.length > 0) setThumbnail(vault.get(data.thumbnail));
   }, [activeManifest, vault]);
 
@@ -56,6 +59,9 @@ const About: React.FC = () => {
         <SeeAlso
           seeAlso={seeAlso as unknown as PrimitivesExternalWebResource[]}
         />
+        <Rendering
+          rendering={rendering as unknown as PrimitivesExternalWebResource[]}
+        />
         <Id id={manifest.id} htmlLabel="IIIF Manifest" />
       </AboutContent>
     </AboutStyled>

src/components/Viewer/Properties/Rendering.test.tsx

@@ -0,0 +1,41 @@
+import { render, screen } from "@testing-library/react";
+import { PrimitivesExternalWebResource } from "src/types/primitives";
+import PropertiesRendering from "src/components/Viewer/Properties/Rendering";
+import React from "react";
+
+const json: PrimitivesExternalWebResource[] = [
+  {
+    id: "https://drive.google.com/file/d/1aWo1lORRVTQ0VveV3aP5Ym6hfVXUqr8_/view?usp=sharing",
+    type: "Text",
+    label: {
+      en: ['Download "A study guide: Josh MacPhee"'],
+    },
+    format: "application/pdf",
+  },
+  {
+    id: "https://fixtures.iiif.io/other/UCLA/kabuki_ezukushi_rtl.pdf",
+    type: "Text",
+    label: {
+      en: ["PDF version"],
+    },
+    format: "application/pdf",
+  },
+];
+
+describe("IIIF rendering property component", () => {
+  it("renders", () => {
+    render(<PropertiesRendering rendering={json} />);
+
+    /**
+     * test anchors
+     */
+    const links = screen.getAllByRole("link");
+    links.forEach((element, index) => {
+      const text = json[index].label?.en?.join(", ") as string;
+      expect(element).toHaveTextContent(text);
+
+      const href = json[index].id as string;
+      expect(element.getAttribute("href")).toBe(href);
+    });
+  });
+});

src/components/Viewer/Properties/Rendering.tsx

@@ -0,0 +1,22 @@
+import { PrimitivesExternalWebResource } from "src/types/primitives";
+import { Rendering } from "src/components/Primitives";
+import React from "react";
+
+interface PropertiesRenderingProps {
+  rendering: PrimitivesExternalWebResource[];
+}
+
+const PropertiesRendering: React.FC<PropertiesRenderingProps> = ({
+  rendering,
+}) => {
+  if (rendering?.length === 0) return <></>;
+
+  return (
+    <>
+      <span className="manifest-property-title">Alternate formats</span>
+      <Rendering rendering={rendering} />
+    </>
+  );
+};
+
+export default PropertiesRendering;

src/components/Viewer/Properties/index.ts

@@ -1,6 +1,7 @@
 import PropertiesHomepage from "src/components/Viewer/Properties/Homepage";
 import PropertiesId from "src/components/Viewer/Properties/Id";
 import PropertiesMetadata from "src/components/Viewer/Properties/Metadata";
+import PropertiesRendering from "src/components/Viewer/Properties/Rendering";
 import PropertiesRequiredStatement from "src/components/Viewer/Properties/RequiredStatement";
 import PropertiesRights from "src/components/Viewer/Properties/Rights";
 import PropertiesSeeAlso from "src/components/Viewer/Properties/SeeAlso";
@@ -11,6 +12,7 @@ export {
   PropertiesHomepage as Homepage,
   PropertiesId as Id,
   PropertiesMetadata as Metadata,
+  PropertiesRendering as Rendering,
   PropertiesRequiredStatement as RequiredStatement,
   PropertiesRights as Rights,
   PropertiesSeeAlso as SeeAlso,

src/dev.tsx

@@ -7,6 +7,7 @@ import {
   Label,
   Metadata,
   PartOf,
+  Rendering,
   RequiredStatement,
   SeeAlso,
   Summary,
@@ -63,6 +64,9 @@ const App = () => {
         <SeeAlso
           seeAlso={manifest.seeAlso as PrimitivesExternalWebResource[]}
         />
+        <Rendering
+          rendering={manifest.rendering as PrimitivesExternalWebResource[]}
+        />
         <Thumbnail
           thumbnail={manifest.thumbnail as IIIFExternalWebResource[]}
           altAsLabel={manifest.label as InternationalString}