@ndla/ui 49.0.6 → 49.0.8

package/src/Embed/ImageEmbed.tsx

@@ -19,13 +19,14 @@ import { Figure, FigureType } from '../Figure';
 import Image, { ImageLink } from '../Image';
 import { EmbedByline } from '../LicenseByline';
 import EmbedErrorPlaceholder from './EmbedErrorPlaceholder';
-import { HeartButtonType, RenderContext } from './types';
+import { CanonicalUrlFuncs, HeartButtonType, RenderContext } from './types';
 
 interface Props {
   embed: ImageMetaData;
   previewAlt?: boolean;
   path?: string;
   heartButton?: HeartButtonType;
+  canonicalUrl?: CanonicalUrlFuncs['image'];
   inGrid?: boolean;
   lang?: string;
   renderContext?: RenderContext;
@@ -113,6 +114,7 @@ const ImageEmbed = ({
   inGrid,
   path,
   lang,
+  canonicalUrl,
   renderContext = 'article',
 }: Props) => {
   const [isBylineHidden, setIsBylineHidden] = useState(hideByline(embed.embedData.size));
@@ -150,7 +152,7 @@ const ImageEmbed = ({
       className={imageSizes ? `c-figure--${embedData.align} expanded` : ''}
     >
       <ImageWrapper
-        src={!isCopyrighted ? embedData.pageUrl || data.image.imageUrl : undefined}
+        src={!isCopyrighted ? canonicalUrl?.(data) : undefined}
         crop={crop}
         size={embedData.size}
         pagePath={path}

package/src/Embed/index.ts

@@ -20,4 +20,4 @@ export { ConceptNotionV2 } from './conceptComponents';
 export { default as ConceptListEmbed } from './ConceptListEmbed';
 export { default as UnknownEmbed } from './UnknownEmbed';
 export { InlineConcept, BlockConcept } from './ConceptEmbed';
-export type { HeartButtonType, RenderContext } from './types';
+export type { HeartButtonType, CanonicalUrlFuncs, RenderContext } from './types';

package/src/Embed/types.ts

@@ -8,7 +8,16 @@
 
 import { ElementType } from 'react';
 import { EmbedMetaData } from '@ndla/types-embed';
+import { IImageMetaInformationV3 } from '@ndla/types-backend/image-api';
 
 export type HeartButtonType = ElementType<{ embed: Extract<EmbedMetaData, { status: 'success' }> }>;
 
+export type EmbedParameter<T extends EmbedMetaData['resource']> = Partial<
+  Extract<EmbedMetaData, { status: 'success'; resource: T }>
+>;
+
+export type CanonicalUrlFuncs = {
+  image?: (image: IImageMetaInformationV3) => string;
+};
+
 export type RenderContext = 'article' | 'embed';

package/src/Gloss/Gloss.tsx

@@ -141,7 +141,7 @@ const Gloss = ({ title, glossData, audio }: Props) => {
           {glossData.examples && glossData.examples.length > 0 && (
             <AccordionRoot type="single" collapsible>
               <AccordionItem value="1">
-                <StyledAccordionHeader>{t('gloss.examples')}</StyledAccordionHeader>
+                <StyledAccordionHeader headingLevel="span">{t('gloss.examples')}</StyledAccordionHeader>
                 <StyledAccordionContent>
                   {glossData.examples.map((example, index) => (
                     <div key={index}>

package/src/index.ts

@@ -213,7 +213,7 @@ export { BlogPostV2 } from './BlogPost';
 export { ProgrammeCard } from './ProgrammeCard';
 export { KeyFigure } from './KeyFigure';
 export { default as ContactBlock } from './ContactBlock';
-export type { HeartButtonType, RenderContext } from './Embed';
+export type { HeartButtonType, CanonicalUrlFuncs, RenderContext } from './Embed';
 export { CampaignBlock } from './CampaignBlock';
 export { Grid, GridParallaxItem } from './Grid';
 export type { GridType } from './Grid';