@ndla/ui 56.0.18-alpha.0 → 56.0.20-alpha.0

package/lib/styles.css

@@ -93,10 +93,6 @@
     display: flex;
 }
 
-  .gap_xxlarge {
-    gap: var(--spacing-xxlarge);
-}
-
   .c_text\.default {
     color: var(--colors-text-default);
 }
@@ -121,6 +117,10 @@
     padding-block-start: var(--spacing-xxlarge);
 }
 
+  .gap_xxlarge {
+    gap: var(--spacing-xxlarge);
+}
+
   .min-h_xxlarge {
     min-height: var(--sizes-xxlarge);
 }
@@ -326,10 +326,18 @@
     text-decoration: underline;
 }
 
+  .d_grid {
+    display: grid;
+}
+
   .h_215px {
     height: 215px;
 }
 
+  .min-w_270px {
+    min-width: 270px;
+}
+
   .bd-l_4px_solid {
     border-left: 4px solid;
 }
@@ -438,6 +446,10 @@
     width: var(--sizes-surface-xlarge);
 }
 
+  .max-h_50vh {
+    max-height: 50vh;
+}
+
   .c_text\.error {
     color: var(--colors-text-error);
 }
@@ -539,14 +551,6 @@
     margin-block-start: var(--spacing-3xsmall);
 }
 
-  .d_grid {
-    display: grid;
-}
-
-  .max-w_surface\.4xlarge {
-    max-width: var(--sizes-surface-4xlarge);
-}
-
   .w_surface\.3xsmall {
     width: var(--sizes-surface-3xsmall);
 }
@@ -678,12 +682,12 @@
     align-items: flex-end;
 }
 
-  .fw_bold {
-    font-weight: var(--font-weights-bold);
+  .grid-tc_1fr {
+    grid-template-columns: 1fr;
 }
 
-  .as_center {
-    align-self: center;
+  .fw_bold {
+    font-weight: var(--font-weights-bold);
 }
 
   .bd-l-c_stroke\.default {
@@ -722,6 +726,10 @@
     top: calc(var(--spacing-4xsmall) * -1);
 }
 
+  .ov-y_auto {
+    overflow-y: auto;
+}
+
   .bg-c_surface\.disabled {
     background-color: var(--colors-surface-disabled);
 }
@@ -900,14 +908,6 @@
     padding-block-end: var(--spacing-5xlarge);
 }
 
-  .\[\&\[data-align\=\"center\"\]\]\:ta_center[data-align="center"] {
-    text-align: center;
-}
-
-  .\[\&\:has\(span\[dir\=\"rtl\"\]\)\]\:direction_rtl:has(span[dir="rtl"]) {
-    direction: rtl;
-}
-
   .\[\&_img\]\:w_100\% img {
     width: 100%;
 }
@@ -1448,9 +1448,6 @@
 }
 
   @media screen and (min-width: 29.75rem) {
-    .mobileWide\:h_340px {
-      height: 340px;
-}
     .mobileWide\:d_none {
       display: none;
 }
@@ -1465,6 +1462,9 @@
   @media screen and (min-width: 37.5625rem) {
     .tablet\:px_medium {
       padding-inline: var(--spacing-medium);
+}
+    .tablet\:h_265px {
+      height: 265px;
 }
     .tablet\:h_26px {
       height: 26px;
@@ -1544,8 +1544,8 @@
     .tabletWide\:max-w_532px {
       max-width: 532px;
 }
-    .tabletWide\:w_auto {
-      width: auto;
+    .tabletWide\:h_340px {
+      height: 340px;
 }
     .tabletWide\:d_block {
       display: block;
@@ -1570,6 +1570,12 @@
 }
     .tabletWide\:jc_space-between {
       justify-content: space-between;
+}
+    .tabletWide\:grid-tc_minmax\(230px\,_455px\)_auto {
+      grid-template-columns: minmax(230px, 455px) auto;
+}
+    .tabletWide\:grid-tc_auto_minmax\(230px\,_455px\) {
+      grid-template-columns: auto minmax(230px, 455px);
 }
 }
 

package/lib/utils/licenseAttributes.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export declare const licenseAttributes: (license: string | undefined, lang: string | undefined, url: string | undefined) => {
+    "xmlns:cc": string;
+    "xmlns:dct": string;
+    about: string | undefined;
+} | {
+    "xmlns:cc"?: undefined;
+    "xmlns:dct"?: undefined;
+    about?: undefined;
+};

package/lib/utils/licenseAttributes.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.licenseAttributes = void 0;
+var _licenses = require("@ndla/licenses");
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const licenseAttributes = (license, lang, url) => {
+  const licenseAbbr = (0, _licenses.getLicenseByAbbreviation)(license ? license : "", lang);
+  const licenseProps = (0, _licenses.isCreativeCommonsLicense)(licenseAbbr.rights) ? {
+    "xmlns:cc": "https://creativecommons.org/ns#",
+    "xmlns:dct": "http://purl.org/dc/terms/",
+    about: url ?? undefined
+  } : {};
+  return licenseProps;
+};
+exports.licenseAttributes = licenseAttributes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.18-alpha.0",
+  "version": "56.0.20-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -34,11 +34,11 @@
   ],
   "dependencies": {
     "@ndla/core": "^5.0.2",
-    "@ndla/icons": "^8.0.12-alpha.0",
-    "@ndla/licenses": "^8.0.1-alpha.0",
-    "@ndla/primitives": "^1.0.16-alpha.0",
-    "@ndla/safelink": "^7.0.16-alpha.0",
-    "@ndla/styled-system": "^0.0.14",
+    "@ndla/icons": "^8.0.14-alpha.0",
+    "@ndla/licenses": "^8.0.2-alpha.0",
+    "@ndla/primitives": "^1.0.18-alpha.0",
+    "@ndla/safelink": "^7.0.18-alpha.0",
+    "@ndla/styled-system": "^0.0.16",
     "@ndla/util": "^4.1.0",
     "html-react-parser": "^5.1.8",
     "i18next-browser-languagedetector": "^7.1.0"
@@ -53,7 +53,7 @@
     "react-router-dom": "> 6.0.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.22",
+    "@ndla/preset-panda": "^0.0.24",
     "@ndla/types-backend": "^0.2.86",
     "@ndla/types-embed": "^5.0.1-alpha.0",
     "@pandacss/dev": "^0.45.2",
@@ -66,5 +66,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "77cd2b0c19a7631796405960ebf799f50e93b44c"
+  "gitHead": "66b3b382188ec1730fa409d4adb3672942f00670"
 }

package/src/Article/Article.tsx

@@ -32,7 +32,6 @@ const StyledArticleWrapper = styled(
       background: "background.default",
       display: "flex",
       flexDirection: "column",
-      gap: "xxlarge",
       color: "text.default",
       alignItems: "center",
       width: "100%",
@@ -131,11 +130,13 @@ export const ArticleTitle = ({
   return (
     <ArticleHeader>
       <ArticleHGroup>
-        <StyledStack justify="space-between" align="center" direction="row" gap="small">
-          {!!contentType && <ContentTypeBadgeNew contentType={contentType} />}
-          {heartButton}
-        </StyledStack>
-        <Heading textStyle="heading.large" id={id} lang={lang}>
+        {(!!contentType || !!heartButton) && (
+          <StyledStack justify="space-between" align="center" direction="row" gap="small">
+            {!!contentType && <ContentTypeBadgeNew contentType={contentType} />}
+            {heartButton}
+          </StyledStack>
+        )}
+        <Heading textStyle="heading.medium" id={id} lang={lang} property="dct:title">
           {title}
         </Heading>
       </ArticleHGroup>

package/src/Article/ArticleByline.tsx

@@ -36,8 +36,6 @@ const Wrapper = styled("div", {
   },
 });
 
-// TODO: This is designed with 24px of inline padding. If you do this, most bylines will break into two lines.
-// Should reconsider.
 const TextWrapper = styled("div", {
   base: {
     display: "flex",
@@ -169,7 +167,8 @@ export const ArticleByline = ({
           <LicenseWrapper>
             {license && <LicenseLink license={license} />}
             {showPrimaryContributors && (
-              <span>
+              //eslint-disable-next-line react/no-unknown-property
+              <span property="cc:attributionName">
                 {authors.length > 0 &&
                   `${t("article.authorsLabel", {
                     names: renderContributors(authors, t),

package/src/Article/index.ts

@@ -18,5 +18,3 @@ export {
 
 export { ArticleByline, ArticleBylineAccordionItem } from "./ArticleByline";
 export { ArticleFootNotes } from "./ArticleFootNotes";
-
-export { ArticleParagraph } from "./ArticleParagraph";

package/src/AudioPlayer/AudioPlayer.tsx

@@ -190,9 +190,11 @@ const AudioPlayer = ({ src, title, subtitle, speech, description, img, textVersi
               {showFullDescription || description.length < DESCRIPTION_MAX_LENGTH
                 ? description
                 : `${truncatedDescription}...`}
-              <Button variant="link" onClick={() => setShowFullDescription((p) => !p)}>
-                {t(`audio.${showFullDescription ? "readLessDescriptionLabel" : "readMoreDescriptionLabel"}`)}
-              </Button>
+              {description.length > DESCRIPTION_MAX_LENGTH && (
+                <Button variant="link" onClick={() => setShowFullDescription((p) => !p)}>
+                  {t(`audio.${showFullDescription ? "readLessDescriptionLabel" : "readMoreDescriptionLabel"}`)}
+                </Button>
+              )}
             </Text>
           )}
           {!!textVersion && !!img && textVersionButton}

package/src/CampaignBlock/CampaignBlock.tsx

@@ -36,21 +36,33 @@ interface Props {
 
 const Container = styled("div", {
   base: {
-    width: "100%",
-    display: "flex",
+    display: "grid",
+    gridTemplateColumns: "1fr",
     gap: "medium",
-    flexDirection: "column",
     border: "1px solid",
     borderColor: "stroke.default",
     backgroundColor: "background.default",
     borderRadius: "xsmall",
     boxShadow: "full",
-    marginBlockEnd: "4xsmall",
     overflow: "hidden",
-    tabletWide: {
-      flexDirection: "row",
+  },
+  variants: {
+    imageSide: {
+      left: {
+        tabletWide: {
+          gridTemplateColumns: "minmax(230px, 455px) auto", //required for campaign block in myNdla
+        },
+      },
+      right: {
+        tabletWide: {
+          gridTemplateColumns: "auto minmax(230px, 455px)", //required for campaign block in myNdla
+        },
+      },
     },
   },
+  defaultVariants: {
+    imageSide: "left",
+  },
 });
 
 const LinkText = styled(Text, {
@@ -78,15 +90,14 @@ const LinkHeader = styled(Text, {
 
 const StyledImg = styled("img", {
   base: {
-    alignSelf: "center",
     objectFit: "cover",
     width: "100%",
     height: "215px",
-    mobileWide: {
-      height: "340px",
+    tablet: {
+      height: "265px",
     },
     tabletWide: {
-      width: "auto",
+      height: "340px",
     },
   },
 });
@@ -94,7 +105,6 @@ const StyledImg = styled("img", {
 const ContentWrapper = styled("div", {
   base: {
     width: "100%",
-    position: "relative",
     display: "flex",
     flexDirection: "column",
     gap: "medium",
@@ -102,6 +112,7 @@ const ContentWrapper = styled("div", {
     justifyContent: "center",
     paddingBlock: "medium",
     paddingInline: "medium",
+    minWidth: "270px", //required for campaign block in myNdla
   },
 });
 
@@ -147,7 +158,7 @@ const CampaignBlock = ({
   const imageComponent = image && <StyledImg src={`${image.src}?width=455`} height={340} width={455} alt={image.alt} />;
   const HeaderComponent = url?.url ? LinkHeader : Text;
   return (
-    <Container className={className} data-embed-type="campaign-block">
+    <Container className={className} data-embed-type="campaign-block" imageSide={imageSide}>
       {imageSide === "left" && imageComponent}
       <ContentWrapper>
         <MaybeLinkText url={url?.url} path={path}>

package/src/Concept/Concept.tsx

@@ -13,6 +13,7 @@ import { IDraftCopyright as ConceptCopyright } from "@ndla/types-backend/concept
 import { ConceptVisualElementMeta } from "@ndla/types-embed";
 import { BrightcoveEmbed, ExternalEmbed, H5pEmbed, IframeEmbed, ImageEmbed } from "../Embed";
 import { EmbedByline } from "../LicenseByline/EmbedByline";
+import { licenseAttributes } from "../utils/licenseAttributes";
 
 export interface ConceptProps extends ComponentPropsWithRef<"figure"> {
   copyright?: ConceptCopyright;
@@ -20,6 +21,8 @@ export interface ConceptProps extends ComponentPropsWithRef<"figure"> {
   lang?: string;
   title?: string;
   children?: ReactNode;
+  source?: string;
+  previewAlt?: boolean;
 }
 
 const StyledFigure = styled(Figure, {
@@ -43,9 +46,11 @@ const ContentWrapper = styled("div", {
 // TODO: Figure out if we need to support headerButtons.
 
 export const Concept = forwardRef<HTMLElement, ConceptProps>(
-  ({ copyright, visualElement, lang, children, title, ...rest }, ref) => {
+  ({ copyright, visualElement, lang, children, title, source, previewAlt, ...rest }, ref) => {
+    const licenseProps = licenseAttributes(copyright?.license?.license, lang, source);
+
     return (
-      <StyledFigure ref={ref} {...rest}>
+      <StyledFigure ref={ref} {...rest} {...licenseProps}>
         <ContentWrapper lang={lang}>
           {!!title && (
             <>
@@ -56,7 +61,7 @@ export const Concept = forwardRef<HTMLElement, ConceptProps>(
           {children}
         </ContentWrapper>
         {visualElement?.resource === "image" ? (
-          <ImageEmbed embed={visualElement} lang={lang} />
+          <ImageEmbed embed={visualElement} lang={lang} previewAlt={previewAlt} />
         ) : visualElement?.resource === "brightcove" ? (
           <BrightcoveEmbed embed={visualElement} />
         ) : visualElement?.resource === "h5p" ? (

package/src/ContactBlock/ContactBlock.tsx

@@ -31,7 +31,6 @@ const StyledWrapper = styled("div", {
     alignItems: "center",
     justifyContent: "space-between",
     boxShadow: "full",
-    marginBlockEnd: "4xsmall",
     border: "1px solid",
     gap: "medium",
     position: "relative",

package/src/ContentTypeBadge/ContentTypeBadgeNew.tsx

@@ -42,12 +42,9 @@ export const contentTypeToBadgeVariantMap: Record<ContentType, BadgeVariant> = {
   [contentTypes.SOURCE_MATERIAL]: "brand1",
   [contentTypes.LEARNING_PATH]: "brand3",
   [contentTypes.TOPIC]: "neutral",
-  // TODO: Verify this color
   [contentTypes.MULTIDISCIPLINARY]: "neutral",
   [contentTypes.CONCEPT]: "brand1",
-  // TODO: Verify this color
   [contentTypes.EXTERNAL]: "brand2",
-  // TODO: Verify resourceEmbedTypeMapping colors
   [contentTypes.IMAGE]: "brand1",
   [contentTypes.AUDIO]: "brand1",
   [contentTypes.PODCAST]: "brand1",

package/src/ContentTypeHero/ContentTypeHero.tsx

@@ -11,23 +11,18 @@ import { Hero, HeroProps, HeroVariant } from "@ndla/primitives";
 import { ContentType } from "../ContentTypeBadge/ContentTypeBadgeNew";
 import * as contentTypes from "../model/ContentType";
 
-// TODO: Figure out what to do with frontpage articles. If anything...
-// Also, verify all of these colors.
 export const contentTypeToHeroMap: Record<ContentType, HeroVariant> = {
   [contentTypes.SUBJECT_MATERIAL]: "primary",
-  [contentTypes.TASKS_AND_ACTIVITIES]: "brand2Strong",
+  [contentTypes.TASKS_AND_ACTIVITIES]: "brand2Bold",
   [contentTypes.ASSESSMENT_RESOURCES]: "brand2",
   // This will never happen
   [contentTypes.SUBJECT]: "primary",
   [contentTypes.SOURCE_MATERIAL]: "brand1",
   // This will never happen
   [contentTypes.LEARNING_PATH]: "primary",
-  // TODO: This needs a color
   [contentTypes.TOPIC]: "neutral",
-  // TODO: This is just taken from thin air.
-  [contentTypes.MULTIDISCIPLINARY]: "brand4",
+  [contentTypes.MULTIDISCIPLINARY]: "primary",
   [contentTypes.CONCEPT]: "brand1Subtle",
-  // TODO: No clue what this'll be. Maybe unused?
   [contentTypes.EXTERNAL]: "primary",
   [contentTypes.IMAGE]: "primary",
   [contentTypes.AUDIO]: "primary",

package/src/Embed/AudioEmbed.tsx

@@ -12,6 +12,7 @@ import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
 import { Author } from "./ImageEmbed";
 import AudioPlayer from "../AudioPlayer";
 import { EmbedByline } from "../LicenseByline";
+import { licenseAttributes } from "../utils/licenseAttributes";
 
 interface Props {
   embed: AudioMetaData;
@@ -42,8 +43,10 @@ const AudioEmbed = ({ embed, lang }: Props) => {
 
   const img = coverPhoto && { url: coverPhoto.url, alt: coverPhoto.altText };
 
+  const licenseProps = licenseAttributes(data.copyright.license.license, lang, embedData.url);
+
   return (
-    <Figure lang={lang} data-embed-type={type}>
+    <Figure lang={lang} data-embed-type={type} {...licenseProps}>
       <AudioPlayer
         description={data.podcastMeta?.introduction ?? ""}
         img={img}

package/src/Embed/BrightcoveEmbed.tsx

@@ -15,10 +15,12 @@ import { BrightcoveEmbedData, BrightcoveMetaData, BrightcoveVideoSource } from "
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
 import { RenderContext } from "./types";
 import { EmbedByline } from "../LicenseByline";
+import { licenseAttributes } from "../utils/licenseAttributes";
 
 interface Props {
   embed: BrightcoveMetaData;
   renderContext?: RenderContext;
+  lang?: string;
 }
 
 const LinkedVideoButton = styled(Button, {
@@ -54,7 +56,7 @@ const getIframeProps = (data: BrightcoveEmbedData, sources: BrightcoveVideoSourc
     width: source?.width ?? "640",
   };
 };
-const BrightcoveEmbed = ({ embed, renderContext = "article" }: Props) => {
+const BrightcoveEmbed = ({ embed, renderContext = "article", lang }: Props) => {
   const [showOriginalVideo, setShowOriginalVideo] = useState(true);
   const { t } = useTranslation();
   const iframeRef = useRef<HTMLIFrameElement>(null);
@@ -100,8 +102,10 @@ const BrightcoveEmbed = ({ embed, renderContext = "article" }: Props) => {
     ? getIframeProps({ ...embedData, videoid: linkedVideoId }, data.sources)
     : undefined;
 
+  const licenseProps = licenseAttributes(data?.copyright?.license.license, lang, embedData.pageUrl);
+
   return (
-    <Figure data-embed-type="brightcove">
+    <Figure data-embed-type="brightcove" {...licenseProps}>
       <div className="brightcove-video">
         <BrightcoveIframe
           ref={iframeRef}
@@ -114,7 +118,6 @@ const BrightcoveEmbed = ({ embed, renderContext = "article" }: Props) => {
         />
       </div>
       <EmbedByline type="video" copyright={data.copyright!} description={parsedDescription}>
-        {/* TODO: Figure out if this button should still be here. If yes, figure out what it should look like. */}
         {!!linkedVideoId && (
           <LinkedVideoButton size="small" variant="secondary" onClick={() => setShowOriginalVideo((p) => !p)}>
             {t(`figure.button.${!showOriginalVideo ? "original" : "alternative"}`)}

package/src/Embed/ConceptEmbed.tsx

@@ -8,6 +8,7 @@
 
 import parse from "html-react-parser";
 import { forwardRef, useMemo } from "react";
+import { Portal } from "@ark-ui/react";
 import { PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import { ConceptMetaData } from "@ndla/types-embed";
@@ -20,6 +21,7 @@ import { Concept, ConceptProps } from "../Concept/Concept";
 interface BaseProps {
   renderContext?: RenderContext;
   lang?: string;
+  previewAlt?: boolean;
 }
 
 interface Props extends BaseProps {
@@ -29,10 +31,12 @@ interface Props extends BaseProps {
 const StyledPopoverContent = styled(PopoverContent, {
   base: {
     width: "surface.xlarge",
+    maxHeight: "50vh",
+    overflowY: "auto",
   },
 });
 
-export const ConceptEmbed = ({ embed, renderContext, lang }: Props) => {
+export const ConceptEmbed = ({ embed, renderContext, lang, previewAlt }: Props) => {
   const parsedContent = useMemo(() => {
     if (embed.status === "error" || !embed.data.concept.content) return undefined;
     return parse(embed.data.concept.content.htmlContent);
@@ -55,11 +59,13 @@ export const ConceptEmbed = ({ embed, renderContext, lang }: Props) => {
   if (embed.embedData.type === "inline") {
     return (
       <InlineConcept
+        previewAlt={previewAlt}
         linkText={embed.embedData.linkText}
         copyright={concept.copyright}
         visualElement={visualElement}
         lang={lang}
         title={concept.title.title}
+        source={concept.source}
       >
         {parsedContent}
       </InlineConcept>
@@ -68,10 +74,12 @@ export const ConceptEmbed = ({ embed, renderContext, lang }: Props) => {
 
   return (
     <BlockConcept
+      previewAlt={previewAlt}
       copyright={concept.copyright}
       visualElement={visualElement}
       lang={lang}
       title={renderContext === "embed" ? undefined : concept.title.title}
+      source={concept.source}
     >
       {parsedContent}
     </BlockConcept>
@@ -80,21 +88,23 @@ export const ConceptEmbed = ({ embed, renderContext, lang }: Props) => {
 
 export interface InlineConceptProps extends ConceptProps, BaseProps {
   linkText?: string;
+  source?: string;
 }
 
 export const InlineConcept = forwardRef<HTMLSpanElement, InlineConceptProps>(
-  ({ linkText, copyright, visualElement, lang, children, title, ...rest }, ref) => (
+  ({ linkText, copyright, visualElement, lang, children, title, source, ...rest }, ref) => (
     <PopoverRoot>
-      <PopoverTrigger asChild>
-        <InlineTriggerButton {...rest} ref={ref}>
-          {linkText}
-        </InlineTriggerButton>
+      {/* @ts-expect-error placing ref and rest on popover trigger somehow removes a bug where the popover target becomes a bit bigger */}
+      <PopoverTrigger asChild ref={ref} {...rest}>
+        <InlineTriggerButton>{linkText}</InlineTriggerButton>
       </PopoverTrigger>
-      <StyledPopoverContent>
-        <Concept copyright={copyright} visualElement={visualElement} lang={lang} title={title}>
-          {children}
-        </Concept>
-      </StyledPopoverContent>
+      <Portal>
+        <StyledPopoverContent>
+          <Concept copyright={copyright} visualElement={visualElement} lang={lang} title={title} source={source}>
+            {children}
+          </Concept>
+        </StyledPopoverContent>
+      </Portal>
     </PopoverRoot>
   ),
 );

package/src/Embed/ConceptListEmbed.tsx

@@ -54,6 +54,7 @@ const ConceptListEmbed = ({ embed, lang }: Props) => {
                   copyright={concept.copyright}
                   visualElement={visualElement}
                   lang={lang}
+                  source={concept.source}
                 />
               </li>
             ))}

package/src/Embed/ImageEmbed.tsx

@@ -17,6 +17,7 @@ import { ImageEmbedData, ImageMetaData } from "@ndla/types-embed";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
 import { RenderContext } from "./types";
 import { EmbedByline } from "../LicenseByline";
+import { licenseAttributes } from "../utils/licenseAttributes";
 
 interface Props {
   embed: ImageMetaData;
@@ -247,12 +248,15 @@ const ImageEmbed = ({ embed, previewAlt, lang, renderContext = "article", childr
     setImageSizes((sizes) => (!sizes ? expandedSizes : undefined));
   };
 
+  const licenseProps = licenseAttributes(data.copyright.license.license, lang, embedData.url);
+
   // TODO: Check how this works with `children`. Will only be important for ED
   return (
     <StyledFigure
       float={figureProps?.float}
       size={imageSizes ? "full" : figureProps?.size ?? "medium"}
       data-embed-type="image"
+      {...licenseProps}
     >
       {children}
       <ImageWrapper border={embedData.border === "true"} expandable={!!figureProps?.float}>

package/src/Embed/index.ts

@@ -7,6 +7,7 @@
  */
 
 export { default as ImageEmbed, getCrop, getFocalPoint } from "./ImageEmbed";
+export { InlineTriggerButton } from "./InlineTriggerButton";
 export { default as AudioEmbed } from "./AudioEmbed";
 export { default as H5pEmbed } from "./H5pEmbed";
 export { default as ExternalEmbed } from "./ExternalEmbed";