@ndla/ui 49.0.0 → 49.0.3

package/src/Embed/BrightcoveEmbed.tsx

@@ -18,12 +18,13 @@ import { ButtonV2 } from '@ndla/button';
 import { Figure } from '../Figure';
 import { EmbedByline } from '../LicenseByline';
 import EmbedErrorPlaceholder from './EmbedErrorPlaceholder';
-import { HeartButtonType } from './types';
+import { HeartButtonType, RenderContext } from './types';
 
 interface Props {
   embed: BrightcoveMetaData;
   isConcept?: boolean;
   heartButton?: HeartButtonType;
+  renderContext?: RenderContext;
 }
 
 const LinkedVideoButton = styled(ButtonV2)`
@@ -57,19 +58,19 @@ const getIframeProps = (data: BrightcoveEmbedData, sources: BrightcoveVideoSourc
     width: source?.width ?? '640',
   };
 };
-const BrightcoveEmbed = ({ embed, isConcept, heartButton: HeartButton }: Props) => {
+const BrightcoveEmbed = ({ embed, isConcept, heartButton: HeartButton, renderContext = 'article' }: Props) => {
   const [showOriginalVideo, setShowOriginalVideo] = useState(true);
   const { t } = useTranslation();
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const { embedData } = embed;
   const fallbackTitle = `${t('embed.type.video')}: ${embedData.videoid}`;
   const parsedDescription = useMemo(() => {
-    if (embed.embedData.caption) {
-      return parse(embed.embedData.caption);
+    if (embed.embedData.caption || renderContext === 'article') {
+      return embed.embedData.caption ? parse(embed.embedData.caption) : undefined;
     } else if (embed.status === 'success' && embed.data.description) {
       return parse(embed.data.description);
     }
-  }, [embed]);
+  }, [embed, renderContext]);
 
   useEffect(() => {
     const iframe = iframeRef.current;

package/src/Embed/ImageEmbed.tsx

@@ -19,7 +19,7 @@ import { Figure, FigureType } from '../Figure';
 import Image, { ImageLink } from '../Image';
 import { EmbedByline } from '../LicenseByline';
 import EmbedErrorPlaceholder from './EmbedErrorPlaceholder';
-import { HeartButtonType } from './types';
+import { HeartButtonType, RenderContext } from './types';
 
 interface Props {
   embed: ImageMetaData;
@@ -28,6 +28,7 @@ interface Props {
   heartButton?: HeartButtonType;
   inGrid?: boolean;
   lang?: string;
+  renderContext?: RenderContext;
 }
 
 export interface Author {
@@ -105,17 +106,25 @@ export const getCrop = (data: ImageEmbedData) => {
 
 const expandedSizes = '(min-width: 1024px) 1024px, 100vw';
 
-const ImageEmbed = ({ embed, previewAlt, heartButton: HeartButton, inGrid, path, lang }: Props) => {
+const ImageEmbed = ({
+  embed,
+  previewAlt,
+  heartButton: HeartButton,
+  inGrid,
+  path,
+  lang,
+  renderContext = 'article',
+}: Props) => {
   const [isBylineHidden, setIsBylineHidden] = useState(hideByline(embed.embedData.size));
   const [imageSizes, setImageSizes] = useState<string | undefined>(undefined);
 
   const parsedDescription = useMemo(() => {
-    if (embed.embedData.caption) {
-      return parse(embed.embedData.caption);
+    if (embed.embedData.caption || renderContext === 'article') {
+      return embed.embedData.caption ? parse(embed.embedData.caption) : undefined;
     } else if (embed.status === 'success' && embed.data.caption.caption) {
       return parse(embed.data.caption.caption);
     }
-  }, [embed]);
+  }, [embed, renderContext]);
 
   if (embed.status === 'error') {
     const { align, size } = embed.embedData;

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 } from './types';
+export type { HeartButtonType, RenderContext } from './types';

package/src/Embed/types.ts

@@ -10,3 +10,5 @@ import { ElementType } from 'react';
 import { EmbedMetaData } from '@ndla/types-embed';
 
 export type HeartButtonType = ElementType<{ embed: Extract<EmbedMetaData, { status: 'success' }> }>;
+
+export type RenderContext = 'article' | 'embed';

package/src/Gloss/Gloss.tsx

@@ -129,7 +129,7 @@ const Gloss = ({ title, glossData, audio }: Props) => {
               </GlossContainer>
               {audio?.src && <SpeechControl src={audio.src} title={audio.title}></SpeechControl>}
             </Wrapper>
-            <span>{title.title}</span>
+            <span lang={title.language}>{title.title}</span>
           </Container>
           {glossData.examples && glossData.examples.length > 0 && (
             <AccordionRoot type="single" collapsible>
@@ -140,7 +140,9 @@ const Gloss = ({ title, glossData, audio }: Props) => {
                     <div key={index}>
                       {example.map((translation, innerIndex) => (
                         <div key={`${index}_${innerIndex}`}>
-                          <TranslatedText data-first={innerIndex === 0}>{translation.example}</TranslatedText>
+                          <TranslatedText data-first={innerIndex === 0} lang={translation.language}>
+                            {translation.example}
+                          </TranslatedText>
                           {translation.transcriptions.pinyin && (
                             <TranslatedText key={t('gloss.transcriptions.pinyin')} lang={glossData.originalLanguage}>
                               {translation.transcriptions?.pinyin}

package/src/LanguageSelector/LanguageSelector.tsx

@@ -17,6 +17,7 @@ interface Props<T extends string> {
   locales: T[];
   onSelect: (locale: T) => void;
   inverted?: boolean;
+  triggerId?: string;
 }
 
 const StyledDropdownContent = styled(DropdownContent)`
@@ -60,12 +61,18 @@ const Text = styled.span`
   font-weight: ${fonts.weight.semibold};
 `;
 
-const LanguageSelector = <T extends string>({ locales, onSelect, inverted }: Props<T>) => {
+const LanguageSelector = <T extends string>({ locales, onSelect, inverted, triggerId }: Props<T>) => {
   const { t, i18n } = useTranslation();
   return (
     <DropdownMenu>
       <DropdownTrigger>
-        <ButtonV2 variant="outline" shape="pill" inverted={inverted} aria-label={t('footer.selectLanguage')}>
+        <ButtonV2
+          variant="outline"
+          shape="pill"
+          inverted={inverted}
+          aria-label={t('footer.selectLanguage')}
+          id={triggerId}
+        >
           {t(`languages.prefixChangeLanguage`)} <ChevronDown />
         </ButtonV2>
       </DropdownTrigger>

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 } from './Embed';
+export type { HeartButtonType, RenderContext } from './Embed';
 export { CampaignBlock } from './CampaignBlock';
 export { Grid, GridParallaxItem } from './Grid';
 export type { GridType } from './Grid';

package/src/locale/messages-en.ts

@@ -537,6 +537,7 @@ const messages = {
       files: 'Files',
       embedlink: 'Embedded link',
       concept: 'Concepts',
+      gloss: 'Glosses',
       podcast: 'Podcast',
       other: 'Other content',
     },
@@ -611,6 +612,18 @@ const messages = {
         hasCopiedTitle: 'Embed link copied',
       },
     },
+    gloss: {
+      heading: 'How to reuse gloss content',
+      description: 'Remember that built-in content might have a different license than the gloss text',
+      rules: 'Rules for use of gloss:',
+      title: 'Title',
+      embedlink: {
+        heading: 'How to show the gloss in other content',
+        description: 'This url shows the gloss without menu and footer',
+        copyTitle: 'Copy embed link',
+        hasCopiedTitle: 'Embed link copied',
+      },
+    },
     files: {
       heading: 'How to reuse files',
       description: 'Remember to copy the text to be attached to the file where you use it.',
@@ -1023,8 +1036,8 @@ const messages = {
       heading: 'Text version',
       close: 'Close text version',
     },
-    readMoreDescriptionLabel: 'show more',
-    readLessDescriptionLabel: 'show less',
+    readMoreDescriptionLabel: 'Show more',
+    readLessDescriptionLabel: 'Show less',
   },
   h5p: {
     reuse: 'Use H5P',

package/src/locale/messages-nb.ts

@@ -551,6 +551,7 @@ const messages = {
       files: 'Filer',
       embedlink: 'Innbyggingslenke',
       concept: 'Forklaringer',
+      gloss: 'Gloser',
       podcast: 'Podkast',
       other: 'Annet innhold',
     },
@@ -625,6 +626,18 @@ const messages = {
         hasCopiedTitle: 'Innbyggingslenke kopiert',
       },
     },
+    gloss: {
+      heading: 'Slik gjenbruker du gloser',
+      description: 'Husk at innebygd innhold i en glose kan ha en annen lisens enn selve gloseteksten',
+      rules: 'Regler for bruk av glose:',
+      title: 'Tittel',
+      embedlink: {
+        heading: 'Slik viser du glosen i annet innhold',
+        description: 'Denne lenken viser glosen uten kontekst (meny og bunntekst)',
+        copyTitle: 'Kopier innbyggingslenke',
+        hasCopiedTitle: 'Innbyggingslenke kopiert',
+      },
+    },
     files: {
       heading: 'Slik gjenbruker du filer',
       description: 'Husk å kopier teksten som skal legges ved filen der du bruker den.',
@@ -1009,11 +1022,11 @@ const messages = {
     download: 'Last ned lydfil',
     reuse: 'Bruk lydfil',
     error: {
-      url: 'Feil ved lasting av lydfila.',
+      url: 'Feil ved lasting av lydfil.',
       caption: 'Beklager, en feil oppstod ved lasting av lydfil.',
     },
     controls: {
-      forward15sec: 'Spol 15 sekunder frem',
+      forward15sec: 'Spol 15 sekunder fram',
       rewind15sec: 'Spol 15 sekunder tilbake',
       selectSpeed: 'Velg avspillingshastighet',
       adjustVolume: 'Endre volum',
@@ -1022,8 +1035,8 @@ const messages = {
       heading: 'Tekstversjon',
       close: 'Lukk tekstversjon',
     },
-    readMoreDescriptionLabel: 'vis mer',
-    readLessDescriptionLabel: 'vis mindre',
+    readMoreDescriptionLabel: 'Vis mer',
+    readLessDescriptionLabel: 'Vis mindre',
   },
   h5p: {
     reuse: 'Bruk H5P',

package/src/locale/messages-nn.ts

@@ -551,6 +551,7 @@ const messages = {
       files: 'Filer',
       embedlink: 'Innbyggingslenke',
       concept: 'Forklaringar',
+      gloss: 'Glosar',
       podcast: 'Podkast',
       other: 'Anna innhald',
     },
@@ -625,6 +626,18 @@ const messages = {
       rules: 'Reglar for bruk av forklaring:',
       title: 'Tittel',
     },
+    gloss: {
+      embedlink: {
+        heading: 'Slik viser du glosen i anna innhald',
+        description: 'Denne lenka viser glosen utan kontekst (meny og botntekst)',
+        copyTitle: 'Kopier innbyggingslenke',
+        hasCopiedTitle: 'Innbyggingslenke kopiert',
+      },
+      heading: 'Slik gjenbruker du gloser',
+      description: 'Husk at innebygd innhald i ei glose kan ha ein anna lisens enn sjølve gloseteksten',
+      rules: 'Regler for bruk av glose:',
+      title: 'Tittel',
+    },
     files: {
       heading: 'Slik gjenbruker du filer',
       description: 'Hugs å kopiere teksten som skal leggjast ved fila der du bruker ho.',
@@ -1004,17 +1017,17 @@ const messages = {
     },
   },
   audio: {
-    play: 'Spill av',
+    play: 'Spel av',
     pause: 'Pause',
     download: 'Last ned lydfil',
     reuse: 'Bruk lydfil',
     error: {
-      url: 'Feil ved lasting av lydfila.',
+      url: 'Feil ved lasting av lydfil.',
       caption: 'Orsak, ein feil oppstod ved lasting av lydfil.',
     },
     controls: {
-      forward15sec: 'Spol 15 sekundar fram',
-      rewind15sec: 'Spol 15 sekundar tilbake',
+      forward15sec: 'Spol 15 sekund fram',
+      rewind15sec: 'Spol 15 sekund tilbake',
       selectSpeed: 'Velg avspelingshastigheit',
       adjustVolume: 'Endre volum',
     },
@@ -1022,8 +1035,8 @@ const messages = {
       heading: 'Tekstversjon',
       close: 'Lukk tekstversjon',
     },
-    readMoreDescriptionLabel: 'vis meir',
-    readLessDescriptionLabel: 'vis mindre',
+    readMoreDescriptionLabel: 'Vis meir',
+    readLessDescriptionLabel: 'Vis mindre',
   },
   h5p: {
     reuse: 'Bruk H5P',

package/src/locale/messages-se.ts

@@ -552,6 +552,7 @@ const messages = {
       files: 'Fiillat',
       embedlink: 'Sisahuksenliŋka',
       concept: 'Čilgehusat',
+      gloss: 'Gloser',
       podcast: 'Podkásta',
       other: 'Eará sisdoallu',
     },
@@ -626,6 +627,19 @@ const messages = {
         hasCopiedTitle: 'Sisahuksenliŋka máŋgejuvvon',
       },
     },
+    gloss: {
+      heading: 'Movt geavahit ođđasit dajaldagaid',
+      description:
+        'Muitte ahte sisdoalus mii lea vuojuhuvvon ovtta gihppagii sáhttá leat eará liseansa go dušše jietnadat.',
+      rules: 'Glossa geavaheami njuolggadusat:',
+      title: 'Namahus',
+      embedlink: {
+        heading: 'Čájet jietnadaga eará sisdoaluin',
+        description: 'Dát liŋka čájeha teavstta konteavstta haga (fállu ja juolgeteaksta)',
+        copyTitle: 'Máŋge sisačálihanliŋkka',
+        hasCopiedTitle: 'Sajáiduhttinliŋka mángejuvvon',
+      },
+    },
     files: {
       heading: 'Ná geavahat fiillaid ođđasit',
       description: 'Muitte máŋget teavsttaid mat galget čuovvut fiillaid doppe gos dat geavahuvvet.',

package/src/locale/messages-sma.ts

@@ -552,6 +552,7 @@ const messages = {
       files: 'Fijlh',
       embedlink: 'Sïjsebïejemesvaalhtese',
       concept: 'Buerkiestimmieh',
+      gloss: 'Glosa',
       podcast: 'Podkast',
       other: 'Jeatjah sisvege',
     },
@@ -628,6 +629,18 @@ const messages = {
         hasCopiedTitle: 'Innbyggingslenke kopiert',
       },
     },
+    gloss: {
+      heading: 'Naemhtie gïelem ikth vielie nåhtadidh',
+      description: 'Mujhtieh sisvege aktene raajesisnie maahta jeatjah lisensem utnedh enn jïjtjehke raajesisnie',
+      rules: 'Njoelkedassh guktie diejvesem nåhtadidh:',
+      title: 'Tihtele',
+      embedlink: {
+        heading: 'Naemhtie gïelem jeatjah sisvegisnie vuesehte',
+        description: 'Daate lïenghke vuesehte tjoejh konteksten namhtah (meny jïh nueliekapihtele)',
+        copyTitle: 'Kopijerh svaalhtesem sïjse loggedh',
+        hasCopiedTitle: 'Bigkeme svaalhtese kopijeradamme',
+      },
+    },
     files: {
       heading: 'Slik gjenbruker du filer',
       description:
@@ -1026,8 +1039,8 @@ const messages = {
       heading: 'Teeksteversjovne',
       close: 'Dahph teeksteversjovnem',
     },
-    readMoreDescriptionLabel: 'vis mer',
-    readLessDescriptionLabel: 'vis mindre',
+    readMoreDescriptionLabel: 'Vis mer',
+    readLessDescriptionLabel: 'Vis mindre',
   },
   h5p: {
     reuse: 'Bruk H5P',
@@ -1370,7 +1383,7 @@ const messages = {
       concept: 'Forklaring',
       h5p: 'H5P',
       external: 'Ekstern ressurs',
-      gloss: 'Glose',
+      gloss: 'Glosa',
     },
   },
   gloss: {