refactor: support image variants in more places

packages/article-converter/src/plugins/embed/KeyFigureEmbedPlugin.tsx

@@ -8,25 +8,11 @@
 
 import { attributesToProps } from "html-react-parser";
 import { type KeyFigureMetaData } from "@ndla/types-embed";
-import { KeyFigure } from "@ndla/ui";
+import { KeyFigureEmbed } from "@ndla/ui";
 import { type PluginType } from "../types";
 
 export const keyFigureEmbedPlugin: PluginType = (element) => {
   const props = attributesToProps(element.attribs);
   const data = JSON.parse(props["data-json"] as string) as KeyFigureMetaData;
-  const { title, subtitle, alt } = data.embedData;
-  return (
-    <KeyFigure
-      title={title}
-      subtitle={subtitle}
-      image={
-        data.status === "success" && data.data.metaImage
-          ? {
-              src: data.data.metaImage.image.imageUrl,
-              alt: alt === undefined ? "" : alt,
-            }
-          : undefined
-      }
-    />
-  );
+  return <KeyFigureEmbed embed={data} />;
 };

packages/ndla-image-search/src/PreviewImage.tsx

@@ -25,7 +25,6 @@ import { styled } from "@ndla/styled-system/jsx";
 import type { ImageMetaInformationV3DTO } from "@ndla/types-backend/image-api";
 import { ImageMeta } from "./ImageMeta";
 import type { PreviewTranslations } from "./ImageSearch";
-import { getSrcSets } from "./util/imageUtil";
 
 const ImageContainer = styled("div", {
   base: {
@@ -129,10 +128,9 @@ export const PreviewImage = ({ id, image, onSelectImage, showCheckbox, translati
       <ImageContainer>
         <StyledImage
           alt=""
-          srcSet={getSrcSets(image.image.imageUrl)}
-          sizes="(min-width: 800px) 360px, (min-width: 400px) 300px, 100vw"
           src={image.image.imageUrl}
           aria-label={image.title.title}
+          variants={image.image.variants}
           variant="rounded"
         />
       </ImageContainer>

packages/ndla-ui/src/AudioPlayer/AudioPlayer.tsx

@@ -186,6 +186,7 @@ export const AudioPlayer = ({ src, title, subtitle, speech, description, img, te
   return (
     <AudioPlayerWrapper>
       <InfoWrapper>
+        {/* TODO: Image variants */}
         {!!img && (
           <ImageWrapper>
             <img src={img.url} alt={img.alt} />

packages/ndla-ui/src/CampaignBlock/CampaignBlock.tsx

@@ -94,6 +94,7 @@ const Container = styled("div", {
   },
 });
 
+// TODO: Variants
 const StyledImg = styled("img", {
   base: {
     objectFit: "cover",

packages/ndla-ui/src/Embed/ExternalEmbed.stories.tsx

@@ -113,7 +113,6 @@ const opensInNewMetaData: OembedData = {
   },
   iframeImage: {
     id: "65086",
-    inactive: false,
     metaUrl: "https://api.test.ndla.no/image-api/v3/images/65086",
     title: {
       title: "\nSamtale ",
@@ -148,21 +147,47 @@ const opensInNewMetaData: OembedData = {
       language: "nb",
     },
     supportedLanguages: ["nb"],
-    created: "2022-12-02T14:24:19Z",
+    created: "2022-12-02T14:24:19.000Z",
     createdBy: "oltQx44eGQp0DwkiR1NRo5qE",
     modelRelease: "yes",
     image: {
       fileName: "IgOjO6og.jpg",
       size: 176667,
-      variants: [],
       contentType: "image/jpeg",
-      imageUrl: "https://api.test.ndla.no/image-api/raw/IgOjO6og.jpg",
+      imageUrl: "https://images.test.ndla.no/IgOjO6og.jpg",
       dimensions: {
         width: 1920,
         height: 804,
       },
+      variants: [
+        {
+          size: "icon",
+          variantUrl: "https://images.test.ndla.no/IgOjO6og/icon.webp",
+        },
+        {
+          size: "xsmall",
+          variantUrl: "https://images.test.ndla.no/IgOjO6og/xsmall.webp",
+        },
+        {
+          size: "small",
+          variantUrl: "https://images.test.ndla.no/IgOjO6og/small.webp",
+        },
+        {
+          size: "medium",
+          variantUrl: "https://images.test.ndla.no/IgOjO6og/medium.webp",
+        },
+        {
+          size: "large",
+          variantUrl: "https://images.test.ndla.no/IgOjO6og/large.webp",
+        },
+        {
+          size: "xlarge",
+          variantUrl: "https://images.test.ndla.no/IgOjO6og/xlarge.webp",
+        },
+      ],
       language: "nb",
     },
+    inactive: false,
   },
 };
 

packages/ndla-ui/src/Embed/ExternalEmbed.tsx

@@ -48,14 +48,11 @@ export const ExternalEmbed = ({ embed }: Props) => {
   const { embedData, data } = embed;
 
   if (embedData.type === "fullscreen") {
-    const image = {
-      src: data.iframeImage?.image.imageUrl,
-      alt: embedData.alt !== undefined ? embedData.alt : (data.iframeImage?.alttext?.alttext ?? ""),
-    };
     return (
       <Figure data-embed-type="external">
         <ResourceBox
-          image={image}
+          image={data.iframeImage}
+          imageAlt={embedData.alt}
           title={embedData.title ?? ""}
           url={embedData.url}
           caption={embedData.caption ?? ""}

packages/ndla-ui/src/Embed/IframeEmbed.stories.tsx

@@ -73,7 +73,6 @@ const opensInNewEmbedData: IframeEmbedData = {
 const opensInnewMetaData: IframeData = {
   iframeImage: {
     id: "65086",
-    inactive: false,
     metaUrl: "https://api.test.ndla.no/image-api/v3/images/65086",
     title: {
       title: "\nSamtale ",
@@ -108,21 +107,47 @@ const opensInnewMetaData: IframeData = {
       language: "nb",
     },
     supportedLanguages: ["nb"],
-    created: "2022-12-02T14:24:19Z",
+    created: "2022-12-02T14:24:19.000Z",
     createdBy: "oltQx44eGQp0DwkiR1NRo5qE",
     modelRelease: "yes",
     image: {
       fileName: "IgOjO6og.jpg",
-      variants: [],
       size: 176667,
       contentType: "image/jpeg",
-      imageUrl: "https://api.test.ndla.no/image-api/raw/IgOjO6og.jpg",
+      imageUrl: "https://images.test.ndla.no/IgOjO6og.jpg",
       dimensions: {
         width: 1920,
         height: 804,
       },
+      variants: [
+        {
+          size: "icon",
+          variantUrl: "https://images.test.ndla.no/IgOjO6og/icon.webp",
+        },
+        {
+          size: "xsmall",
+          variantUrl: "https://images.test.ndla.no/IgOjO6og/xsmall.webp",
+        },
+        {
+          size: "small",
+          variantUrl: "https://images.test.ndla.no/IgOjO6og/small.webp",
+        },
+        {
+          size: "medium",
+          variantUrl: "https://images.test.ndla.no/IgOjO6og/medium.webp",
+        },
+        {
+          size: "large",
+          variantUrl: "https://images.test.ndla.no/IgOjO6og/large.webp",
+        },
+        {
+          size: "xlarge",
+          variantUrl: "https://images.test.ndla.no/IgOjO6og/xlarge.webp",
+        },
+      ],
       language: "nb",
     },
+    inactive: false,
   },
 };
 

packages/ndla-ui/src/Embed/IframeEmbed.tsx

@@ -49,16 +49,14 @@ export const IframeEmbed = ({ embed }: Props) => {
     return <EmbedErrorPlaceholder type="external" />;
   }
 
-  const { embedData, data } = embed;
+  const { embedData } = embed;
 
   if (embedData.type === "fullscreen") {
-    const iframeImage = embed.status === "success" ? data.iframeImage : undefined;
-    const alt = embedData.alt !== undefined ? embedData.alt : iframeImage?.alttext.alttext;
-    const image = { src: iframeImage?.image.imageUrl, alt: alt ?? "" };
     return (
       <StyledFigure data-embed-type="iframe">
         <ResourceBox
-          image={image}
+          image={embed.status === "success" ? embed.data.iframeImage : undefined}
+          imageAlt={embedData.alt}
           title={embedData.title ?? ""}
           url={embedData.url}
           caption={embedData.caption ?? ""}

packages/ndla-ui/src/Embed/KeyFigureEmbed.tsx

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2025-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import parse from "html-react-parser";
+import type { KeyFigureMetaData } from "@ndla/types-embed";
+import { KeyFigureImage, KeyFigureRoot, KeyFigureSubTitle, KeyFigureTitle } from "../KeyFigure/KeyFigure";
+
+interface Props {
+  embed: KeyFigureMetaData;
+}
+
+export const KeyFigureEmbed = ({ embed }: Props) => {
+  const image = embed.status === "success" && embed.data.metaImage ? embed.data.metaImage : undefined;
+  return (
+    <KeyFigureRoot data-embed-type="key-figure">
+      {!!image && (
+        <KeyFigureImage
+          src={image.image.imageUrl}
+          alt={image.alttext.alttext}
+          width={image.image.dimensions?.width}
+          height={image.image.dimensions?.height}
+          variants={image.image.variants}
+        />
+      )}
+      <KeyFigureTitle asChild consumeCss>
+        <div>{parse(embed.embedData.title)}</div>
+      </KeyFigureTitle>
+      <KeyFigureSubTitle asChild consumeCss>
+        <div>{parse(embed.embedData.subtitle)}</div>
+      </KeyFigureSubTitle>
+    </KeyFigureRoot>
+  );
+};

packages/ndla-ui/src/KeyFigure/KeyFigure.tsx

@@ -7,43 +7,49 @@
  */
 
 import parse from "html-react-parser";
-import { styled } from "@ndla/styled-system/jsx";
+import { ark } from "@ark-ui/react";
+import { Image } from "@ndla/primitives";
+import { sva } from "@ndla/styled-system/css";
+import { createStyleContext } from "@ndla/styled-system/jsx";
 
-const ContentWrapper = styled("div", {
+const keyfigureRecipe = sva({
+  slots: ["root", "image", "title", "subtitle"],
   base: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: "xsmall",
-
-    "&:not(:has(> img))": {
-      paddingBlock: "xxlarge",
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "xsmall",
+      "&:not(:has(> img))": {
+        paddingBlock: "xxlarge",
+      },
+    },
+    image: {
+      height: "surface.3xsmall",
+      width: "surface.3xsmall",
+      borderRadius: "xsmall",
+    },
+    title: {
+      textStyle: "heading.large",
+      textAlign: "center",
+    },
+    subtitle: {
+      textStyle: "title.medium",
+      textAlign: "center",
     },
   },
 });
 
-const StyledImage = styled("img", {
-  base: {
-    height: "surface.3xsmall",
-    width: "surface.3xsmall",
-    borderRadius: "xsmall",
-  },
-});
+const { withProvider, withContext } = createStyleContext(keyfigureRecipe);
 
-const TitleWrapper = styled("div", {
-  base: {
-    textStyle: "heading.large",
-    textAlign: "center",
-  },
-});
+export const KeyFigureRoot = withProvider(ark.div, "root", { baseComponent: true });
 
-const SubTitleWrapper = styled("div", {
-  base: {
-    textStyle: "title.medium",
-    textAlign: "center",
-  },
-});
+export const KeyFigureImage = withContext(Image, "image");
+
+export const KeyFigureTitle = withContext(ark.div, "title");
+
+export const KeyFigureSubTitle = withContext(ark.div, "subtitle");
 
 export interface Props {
   image?: {
@@ -56,10 +62,10 @@ export interface Props {
 
 export const KeyFigure = ({ image, title, subtitle }: Props) => {
   return (
-    <ContentWrapper data-embed-type="key-figure">
-      {!!image && <StyledImage src={`${image?.src}?width=150`} width={150} height={150} alt={image?.alt} />}
-      <TitleWrapper>{parse(title)}</TitleWrapper>
-      <SubTitleWrapper>{parse(subtitle)}</SubTitleWrapper>
-    </ContentWrapper>
+    <KeyFigureRoot data-embed-type="key-figure">
+      {!!image && <KeyFigureImage src={`${image?.src}?width=150`} width={150} height={150} alt={image.alt ?? ""} />}
+      <KeyFigureTitle>{parse(title)}</KeyFigureTitle>
+      <KeyFigureSubTitle>{parse(subtitle)}</KeyFigureSubTitle>
+    </KeyFigureRoot>
   );
 };