Added copyright info for metaImage

NDLANO · Oct 7, 2024 · 4ae4928 · 4ae4928
1 parent 78fa9fc
commit 4ae4928
Show file tree

Hide file tree

Showing 5 changed files with 269 additions and 61 deletions.
diff --git a/src/containers/SubjectPage/components/SubjectTopic.tsx b/src/containers/SubjectPage/components/SubjectTopic.tsx
@@ -27,6 +27,7 @@ import {
   GQLTopic_SubjectFragment,
   GQLTopic_TopicFragment,
 } from "../../../graphqlTypes";
+import { copyrightInfoFragment } from "../../../queries";
 import { toTopic, useUrnIds } from "../../../routeHelpers";
 import { getTopicPath } from "../../../util/getTopicPath";
 import { htmlTitle } from "../../../util/titleHelper";
@@ -217,6 +218,9 @@ export const topicFragments = {
         metaImage {
           url
           alt
+          copyright {
+            ...CopyrightInfo
+          }
         }
         transformedContent(transformArgs: $transformArgs) {
           visualElementEmbed {
@@ -229,6 +233,7 @@ export const topicFragments = {
     }
     ${MultidisciplinaryArticleList.fragments.topic}
     ${Resources.fragments.topic}
+    ${copyrightInfoFragment}
   `,
   resourceType: gql`
     fragment Topic_ResourceTypeDefinition on ResourceTypeDefinition {

diff --git a/src/containers/SubjectPage/components/TopicVisualElementContent.tsx b/src/containers/SubjectPage/components/TopicVisualElementContent.tsx
@@ -7,25 +7,41 @@
  */
 
 import { Image } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 import { EmbedMetaData } from "@ndla/types-embed";
-import { ImageEmbed } from "@ndla/ui";
+import { EmbedByline, ImageEmbed } from "@ndla/ui";
 import { GQLArticle } from "../../../graphqlTypes";
 
 interface Props {
   embed: EmbedMetaData;
-  metaImage: GQLArticle["metaImage"];
+  metaImage?: GQLArticle["metaImage"];
 }
 
+const StyledFigure = styled("figure", {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+  },
+});
+
 const TopicVisualElementContent = ({ embed, metaImage }: Props) => {
   if (embed.resource === "image") {
     return <ImageEmbed embed={{ ...embed, embedData: { ...embed.embedData, caption: "" } }} />;
   } else if (!metaImage) {
     return null;
   } else {
     return (
-      <figure>
+      <StyledFigure>
         <Image src={metaImage?.url ?? ""} alt={metaImage?.alt ?? ""} />
-      </figure>
+        {metaImage.copyright ? (
+          <EmbedByline
+            type="image"
+            copyright={{ ...metaImage.copyright, processed: !!metaImage.copyright.processed }}
+            hideDescription
+          />
+        ) : null}
+      </StyledFigure>
     );
   }
 };