@ndla/ui 46.1.0 → 47.1.0

package/lib/locale/messages-en.d.ts

@@ -221,6 +221,18 @@ declare const messages: {
                 text: string;
             };
         };
+        myProfile: {
+            title: string;
+            disclaimerTitle: string;
+            disclaimerText: string;
+            preferenceTitle: string;
+            preferenceText: string;
+            editButtonText: string;
+            radioButtonText: {
+                option1: string;
+                option2: string;
+            };
+        };
         resource: {
             add: string;
             remove: string;

package/lib/locale/messages-en.js

@@ -1227,6 +1227,18 @@ var messages = _objectSpread(_objectSpread({
         text: 'When you save a resource, you will have the option to tag it with a keyword. This tag can be used to find the resource across folders. By selecting <strong>My tags</strong> on the menu to the left, you will see all the tags your have used. You can also see which resources are tagget with which keyword.'
       }
     },
+    myProfile: {
+      title: 'My Profile',
+      disclaimerTitle: 'Where is my picture and name used?',
+      disclaimerText: 'Your picture and name are displayed when you participate in discussions in the arena.',
+      preferenceTitle: 'Choose whether you want to display name when sharing a folder',
+      preferenceText: 'Here you can choose whether you want to display your name when you share a folder. The selected option applies to all your folders and can be changed later. If you later change the option, your name will appear on all your shared folders.',
+      editButtonText: 'Change profile picture',
+      radioButtonText: {
+        option1: 'Show my name when I share a folder',
+        option2: 'Do not show my name when I share a folder'
+      }
+    },
     resource: {
       add: 'Add folder/tag',
       remove: 'Remove',

package/lib/locale/messages-nb.d.ts

@@ -221,6 +221,18 @@ declare const messages: {
                 text: string;
             };
         };
+        myProfile: {
+            title: string;
+            disclaimerTitle: string;
+            disclaimerText: string;
+            preferenceTitle: string;
+            preferenceText: string;
+            editButtonText: string;
+            radioButtonText: {
+                option1: string;
+                option2: string;
+            };
+        };
         resource: {
             add: string;
             remove: string;

package/lib/locale/messages-nb.js

@@ -1225,6 +1225,18 @@ var messages = _objectSpread(_objectSpread({
         text: 'Når du lagrer en ressurs, får du mulighet til å markere ressursen med en emneknagg. Emneknaggen er et nøkkelord du kan bruke til å finne tilbake til ressurser på tvers av mapper. Du finner alle emneknaggene du har brukt, ved å velge <strong>Mine emneknagger</strong> i venstremenyen. Her kan du også se hvilke ressurser du har markert med hvilken emneknagg.'
       }
     },
+    myProfile: {
+      title: 'Min Profil',
+      disclaimerTitle: 'Hvor brukes bildet og navnet mitt?',
+      disclaimerText: 'Bilde og navn vises når du deltar i diskusjoner i arenaen.',
+      preferenceTitle: 'Velg om du vil vise navn når du deler en mappe',
+      preferenceText: 'Her kan du selv velge om du vil vise navnet ditt når du deler en mappe. Valget gjelder for alle mappene dine og kan endres senere. Dersom du endrer vil navnet ditt vises på alle dine delte mapper.',
+      editButtonText: 'Endre profilbilde',
+      radioButtonText: {
+        option1: 'Vis navnet mitt når jeg deler en mappe',
+        option2: 'Ikke vis navnet mitt når jeg deler mappe'
+      }
+    },
     resource: {
       add: 'Legg til mappe/emneknagg',
       remove: 'Fjern',

package/lib/locale/messages-nn.d.ts

@@ -221,6 +221,18 @@ declare const messages: {
                 text: string;
             };
         };
+        myProfile: {
+            title: string;
+            disclaimerTitle: string;
+            disclaimerText: string;
+            preferenceTitle: string;
+            preferenceText: string;
+            editButtonText: string;
+            radioButtonText: {
+                option1: string;
+                option2: string;
+            };
+        };
         resource: {
             add: string;
             remove: string;

package/lib/locale/messages-nn.js

@@ -1225,6 +1225,18 @@ var messages = _objectSpread(_objectSpread({
         text: 'Når du lagrar ein ressurs, får du høve til å markere ressursen med ein emneknagg. Emneknaggen er eit nøkkelord du kan bruke til å finne tilbake til ressursar på tvers av mapper. Du finn alle emneknaggane du har brukt, ved å velje <strong>Mine emneknaggar</strong> i venstremenyen. Her kan du også sjå kva for ressursar du har merkt med kva knagg.'
       }
     },
+    myProfile: {
+      title: 'Min Profil',
+      disclaimerTitle: 'Kvar blir biletet og namnet mitt brukt?',
+      disclaimerText: 'Bilete og namn vert vist når du deltek i diskusjonar i arenaen.',
+      preferenceTitle: 'Vel om du vil vise namn når du deler ei mappe',
+      preferenceText: 'Her kan du sjølv velje om du vil vise namnet ditt når du deler ei mappe. Valet gjeld for alle mappene dine og kan endrast seinare. Dersom du endrar vil namnet ditt visast på alle dine delte mapper.',
+      editButtonText: 'Endre profilbilete',
+      radioButtonText: {
+        option1: 'Vis namnet mitt når eg deler ei mappe',
+        option2: 'Ikkje vis namnet mitt når eg deler mappe'
+      }
+    },
     resource: {
       add: 'Legg til mappe/emneknagg',
       remove: 'Fjern',

package/lib/locale/messages-se.d.ts

@@ -221,6 +221,18 @@ declare const messages: {
                 text: string;
             };
         };
+        myProfile: {
+            title: string;
+            disclaimerTitle: string;
+            disclaimerText: string;
+            preferenceTitle: string;
+            preferenceText: string;
+            editButtonText: string;
+            radioButtonText: {
+                option1: string;
+                option2: string;
+            };
+        };
         resource: {
             add: string;
             remove: string;

package/lib/locale/messages-se.js

@@ -1225,6 +1225,18 @@ var messages = _objectSpread(_objectSpread({
         text: 'Go vurket muhtin resurssa de lea vejolaš merket resurssa fáddágilkoriin. Fáddágilkor lea čoavddasátni man sáhtát geavahit gávdnan dihte ruovttoluotta resurssaide máhpaid rastá. Gávnnat buot fáddágilkoriid maid leat geavahan go válljet mu fáddágilkoriid gurut bealde fálus. Das oainnát maiddái maid resurssaid don leat merken juohke fáddágilkoriin.'
       }
     },
+    myProfile: {
+      title: 'Mu profiila',
+      disclaimerTitle: 'Gos geavahit mu gova ja mu nama?',
+      disclaimerText: 'Govva ja namma čájehuvvojit go searvat digaštallamii arenain.',
+      preferenceTitle: 'Vállje jos namma čájehuvvo máhpa juohkkedettiin',
+      preferenceText: 'Dás válljet jos iežat namma čájehuvvo juohkkedettiin máhpa. Dát molssaeaktu guoská buot máhpaide ja sáhttá rievdaduvvot maŋŋil. Jos rievdadat dán, de čájehuvvo du namma buot juogaduvvon máhpain.',
+      editButtonText: 'Rievdat profiilagova',
+      radioButtonText: {
+        option1: 'Čájet mu nama máhpa juohkkedettiin',
+        option2: 'Ale čájet mu nama máhpa juohkkedettiin'
+      }
+    },
     resource: {
       add: 'Lasit máhpa/fáddágilkora',
       remove: 'Sihko',

package/lib/locale/messages-sma.d.ts

@@ -221,6 +221,18 @@ declare const messages: {
                 text: string;
             };
         };
+        myProfile: {
+            title: string;
+            disclaimerTitle: string;
+            disclaimerText: string;
+            preferenceTitle: string;
+            preferenceText: string;
+            editButtonText: string;
+            radioButtonText: {
+                option1: string;
+                option2: string;
+            };
+        };
         resource: {
             add: string;
             remove: string;

package/lib/locale/messages-sma.js

@@ -1225,6 +1225,18 @@ var messages = _objectSpread(_objectSpread({
         text: 'Når du lagrar ein ressurs, får du høve til å markere ressursen med ein emneknagg. Emneknaggen er eit nøkkelord du kan bruke til å finne tilbake til ressursar på tvers av mapper. Du finn alle emneknaggane du har brukt, ved å velje <strong>Mine emneknaggar</strong> i venstremenyen. Her kan du også sjå kva for ressursar du har merkt med kva knagg.'
       }
     },
+    myProfile: {
+      title: 'Mov Profijle',
+      disclaimerTitle: 'Gusnie guvvie jïh nomme åtnasuvvieh?',
+      disclaimerText: 'Guvvie jïh nomme våajnoes sjidtieh gosse meatan digkiedimmesne sijjesne.',
+      preferenceTitle: 'Sjïehtedh jis edtja nommem vuesiehtidh gosse maabpam juekedh',
+      preferenceText: 'Daesnie jïjtje veeljh mejtie sïjhth dov nommem vuesiehtidh gosse maabpam juekedh . Daate veeljeme lea gaajhkine dov maabpojne, jïh maahta dam mænngan jarkelidh. Jis jeatjahdahtah , dov nomme sæjhta våajnoes årrodh gaajhkine dov joekedamme maabpojne.',
+      editButtonText: 'Naemhtie profijleguvviem jarkelidh',
+      radioButtonText: {
+        option1: 'Vuesehth mov nommem gosse maabpam juekieh',
+        option2: 'Aellieh mov nommem vuesehth gosse maabpam juekieh'
+      }
+    },
     resource: {
       add: 'Legg til mappe/emneknagg',
       remove: 'Fjern',

package/lib/types.d.ts

@@ -57,7 +57,7 @@ export interface FootNote {
 }
 export interface Article {
     title: string;
-    introduction: string;
+    introduction: ReactNode;
     content: ReactNode;
     footNotes: Array<FootNote>;
     copyright?: Copyright;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "46.1.0",
+  "version": "47.1.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,43 +31,42 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^2.2.25",
-    "@ndla/button": "^11.0.10",
-    "@ndla/carousel": "^4.0.3",
-    "@ndla/core": "^4.1.9",
-    "@ndla/dropdown-menu": "^1.0.7",
-    "@ndla/forms": "^5.0.0",
-    "@ndla/hooks": "^2.1.0",
-    "@ndla/icons": "^4.0.9",
+    "@ndla/accordion": "^2.2.27",
+    "@ndla/button": "^12.0.1",
+    "@ndla/carousel": "^4.0.4",
+    "@ndla/core": "^4.2.0",
+    "@ndla/dropdown-menu": "^1.0.9",
+    "@ndla/forms": "^5.0.2",
+    "@ndla/hooks": "^2.1.1",
+    "@ndla/icons": "^4.0.10",
     "@ndla/licenses": "^7.1.4",
-    "@ndla/modal": "^4.0.10",
-    "@ndla/notion": "^6.0.0",
-    "@ndla/safelink": "^4.1.24",
-    "@ndla/select": "^2.4.16",
-    "@ndla/switch": "^1.1.14",
-    "@ndla/tabs": "^3.0.10",
-    "@ndla/tooltip": "^4.1.21",
-    "@ndla/typography": "^0.2.1",
-    "@ndla/util": "^3.2.0",
-    "@radix-ui/react-popover": "^1.0.6",
+    "@ndla/modal": "^5.0.1",
+    "@ndla/notion": "^6.0.2",
+    "@ndla/safelink": "^4.1.26",
+    "@ndla/select": "^3.0.1",
+    "@ndla/switch": "^1.1.15",
+    "@ndla/tabs": "^3.0.11",
+    "@ndla/tooltip": "^5.0.1",
+    "@ndla/typography": "^0.2.2",
+    "@ndla/util": "^4.0.0",
+    "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-slider": "^1.1.2",
     "date-fns": "^2.30.0",
-    "html-react-parser": "^3.0.8",
-    "i18next-browser-languagedetector": "^6.1.1",
+    "html-react-parser": "^4.2.2",
+    "i18next-browser-languagedetector": "^7.1.0",
     "react-bem-helper": "1.4.1",
     "react-device-detect": "^2.2.3",
     "react-select": "^5.7.5",
-    "react-swipeable": "^7.0.0",
-    "remarkable": "^2.0.1"
+    "react-swipeable": "^7.0.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
-    "i18next": "^21.9.2",
+    "i18next": "^23.5.1",
     "lodash": "^4.17.20",
     "react": ">= 16.8.0",
-    "react-i18next": "^11.18.6"
+    "react-i18next": "^13.3.0"
   },
   "devDependencies": {
     "@ndla/types-backend": "^0.2.21",
@@ -81,5 +80,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "444537e1bc636e9ed92272c88da91c83932b9a53"
+  "gitHead": "79769e1b2806335328635dda5e33e7d02b8868d7"
 }

package/src/Article/Article.tsx

@@ -8,13 +8,12 @@
 
 import { ReactNode, useEffect, useRef, useState, forwardRef } from 'react';
 import BEMHelper from 'react-bem-helper';
-import parse from 'html-react-parser';
 import styled from '@emotion/styled';
 
 import { useIntersectionObserver } from '@ndla/hooks';
 import { resizeObserver } from '@ndla/util';
 import { spacing, spacingUnit, mq, breakpoints } from '@ndla/core';
-import { Heading } from '@ndla/typography';
+import { Heading, Text } from '@ndla/typography';
 import { Article as ArticleType } from '../types';
 import ArticleByline from './ArticleByline';
 import LayoutItem from '../Layout';
@@ -72,29 +71,15 @@ export const ArticleTitle = ({ children, icon, label, id, lang }: ArticleTitlePr
 
 type ArticleIntroductionProps = {
   children: ReactNode;
-  renderMarkdown: (text: string) => string;
   lang?: string;
 };
 
-export const ArticleIntroduction = ({
-  children,
-  lang,
-  renderMarkdown = (text) => {
-    return text;
-  },
-}: ArticleIntroductionProps) => {
-  if (typeof children === 'string') {
-    return (
-      <div className="article_introduction" lang={lang}>
-        {parse(renderMarkdown(children))}
-      </div>
-    );
-  }
+export const ArticleIntroduction = ({ children, lang }: ArticleIntroductionProps) => {
   if (children) {
     return (
-      <div className="article_introduction" lang={lang}>
+      <Text textStyle="ingress" element="div" lang={lang}>
         {children}
-      </div>
+      </Text>
     );
   }
   return null;
@@ -135,7 +120,6 @@ type Props = {
   messageBoxLinks?: [];
   competenceGoals?: ReactNode;
   id: string;
-  renderMarkdown: (text: string) => string;
   notions?: ReactNode;
   accessMessage?: string;
   lang?: string;
@@ -164,7 +148,6 @@ export const Article = ({
   competenceGoals,
   id,
   notions,
-  renderMarkdown,
   accessMessage,
   heartButton,
   contentTransformed,
@@ -217,9 +200,7 @@ export const Article = ({
             <ArticleTitle id={id} icon={icon} label={messages.label} lang={lang}>
               {title}
             </ArticleTitle>
-            <ArticleIntroduction renderMarkdown={renderMarkdown} lang={lang}>
-              {introduction}
-            </ArticleIntroduction>
+            <ArticleIntroduction lang={lang}>{introduction}</ArticleIntroduction>
           </ArticleHeaderWrapper>
         </LayoutItem>
         <LayoutItem layout="center">

package/src/Article/component.article.scss

@@ -26,7 +26,7 @@
   }
 
   @include mq(tablet) {
-    @include font-size(20px, 35px);
+    @include font-size(18px, 29px);
 
     > section > p {
       &:not([class]) {
@@ -120,14 +120,14 @@
     }
   }
 
-  padding: 0 0 $spacing--small 0;
+  padding: 0 0 $spacing 0;
 
   @include mq(tablet) {
-    padding: 0 0 $spacing 0;
+    padding: 0 0 $spacing--medium 0;
   }
 
   p {
-    @include font-size(16px, 20px);
+    @include font-size(18px, 24px);
     color: $text-light-color;
     text-transform: uppercase;
     margin-bottom: 0;

package/src/Embed/AudioEmbed.tsx

@@ -8,8 +8,6 @@
 
 import { AudioMetaData, ImageMetaData } from '@ndla/types-embed';
 import { COPYRIGHTED } from '@ndla/licenses';
-//@ts-ignore
-import { Remarkable } from 'remarkable';
 import AudioPlayer from '../AudioPlayer';
 import { Figure } from '../Figure';
 import { Author } from './ImageEmbed';
@@ -29,12 +27,6 @@ export const getFirstNonEmptyLicenseCredits = (authors: {
   processors: Author[];
 }) => Object.values(authors).find((i) => i.length > 0) ?? [];
 
-const renderMarkdown = (text: string) => {
-  const md = new Remarkable();
-  const rendered = md.render(text);
-  return <span dangerouslySetInnerHTML={{ __html: rendered }} />;
-};
-
 const imageMetaToMockEmbed = (
   imageMeta: Extract<AudioMetaData, { status: 'success' }>,
 ): Extract<ImageMetaData, { status: 'success' }> => ({
@@ -62,8 +54,6 @@ const AudioEmbed = ({ embed, heartButton: HeartButton, lang }: Props) => {
 
   const subtitle = data.series ? { title: data.series.title.title, url: `/podkast/${data.series.id}` } : undefined;
 
-  const textVersion = data.manuscript?.manuscript.length ? renderMarkdown(data.manuscript.manuscript) : undefined;
-
   const coverPhoto = data.podcastMeta?.coverPhoto;
 
   const img = coverPhoto && { url: coverPhoto.url, alt: coverPhoto.altText };
@@ -74,7 +64,11 @@ const AudioEmbed = ({ embed, heartButton: HeartButton, lang }: Props) => {
         description={data.podcastMeta?.introduction ?? ''}
         img={img}
         src={data.audioFile.url}
-        textVersion={textVersion}
+        textVersion={
+          data.manuscript?.manuscript.length ? (
+            <span dangerouslySetInnerHTML={{ __html: data.manuscript.manuscript }} />
+          ) : undefined
+        }
         title={data.title.title}
         subtitle={subtitle}
       />

package/src/Embed/BrightcoveEmbed.tsx

@@ -10,7 +10,8 @@ import sortBy from 'lodash/sortBy';
 import styled from '@emotion/styled';
 import { spacing } from '@ndla/core';
 import { COPYRIGHTED } from '@ndla/licenses';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import parse from 'html-react-parser';
 import { BrightcoveEmbedData, BrightcoveMetaData, BrightcoveVideoSource } from '@ndla/types-embed';
 import { useTranslation } from 'react-i18next';
 import { ButtonV2 } from '@ndla/button';
@@ -62,6 +63,13 @@ const BrightcoveEmbed = ({ embed, isConcept, heartButton: HeartButton }: Props)
   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);
+    } else if (embed.status === 'success' && embed.data.description) {
+      return parse(embed.data.description);
+    }
+  }, [embed]);
 
   useEffect(() => {
     const iframe = iframeRef.current;
@@ -108,12 +116,7 @@ const BrightcoveEmbed = ({ embed, isConcept, heartButton: HeartButton }: Props)
           allowFullScreen
         />
       </div>
-      <EmbedByline
-        type="video"
-        copyright={data.copyright!}
-        description={embedData.caption ?? data.description ?? ''}
-        bottomRounded
-      >
+      <EmbedByline type="video" copyright={data.copyright!} description={parsedDescription} bottomRounded>
         {!!linkedVideoId && (
           <LinkedVideoButton
             variant="outline"

package/src/Embed/ConceptEmbed.stories.tsx

@@ -46,7 +46,7 @@ const conceptMetaData: ConceptData['concept'] = {
   title: { title: 'skin – formasjonsskade', language: 'nb' },
   content: {
     content:
-      'Ordet «skin» er engelsk og brukes om formasjonsskade som oppstår i boreprosessen i området som grenser inn til brønnen. Skaden er størst i området nærmest hullet, men den kan bre seg utover et stykke fra brønnen. Skin forteller om bergartens permeabilitet i reservoarsonen. \n\nHullveggen skades både av borekronen, små partikler og væsken som brukes i brønnen.\n\nSkaden i bergarten gir dårligere forhold for oljen som skal strømme til brønnen. Gangene i bergarten plugges, og det oppstår et trykkfall som reduserer produksjonstrykket i brønnen.\n\nDet er viktig å redusere omfanget av skaden ved å velge væsker som passer godt til bergartsegenskapene, og å bore med en borekrone som skader minst mulig.\n\nSkader som er dannet av borevæske, kan repareres ved å syrebehandle hullets overflate.\n',
+      ' <p>Ordet «skin» er engelsk og brukes om formasjonsskade som oppstår i boreprosessen i området som grenser inn til brønnen. Skaden er størst i området nærmest hullet, men den kan bre seg utover et stykke fra brønnen. Skin forteller om bergartens permeabilitet i reservoarsonen.</p> <p>Hullveggen skades både av borekronen, små partikler og væsken som brukes i brønnen.</p> <p>Skaden i bergarten gir dårligere forhold for oljen som skal strømme til brønnen. Gangene i bergarten plugges, og det oppstår et trykkfall som reduserer produksjonstrykket i brønnen.</p> <p>Det er viktig å redusere omfanget av skaden ved å velge væsker som passer godt til bergartsegenskapene, og å bore med en borekrone som skader minst mulig.</p> <p>Skader som er dannet av borevæske, kan repareres ved å syrebehandle hullets overflate.</p>',
     language: 'nb',
   },
   copyright: {

package/src/Embed/ConceptEmbed.tsx

@@ -6,7 +6,8 @@
  *
  */
 
-import { ReactElement, ReactNode, useCallback, useRef, useState } from 'react';
+import { ReactElement, ReactNode, useCallback, useMemo, useRef, useState } from 'react';
+import parse from 'html-react-parser';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { isMobile } from 'react-device-detect';
@@ -92,6 +93,10 @@ const StyledButton = styled.button`
 `;
 
 export const ConceptEmbed = ({ embed, fullWidth, heartButton: HeartButton }: Props) => {
+  const parsedContent = useMemo(() => {
+    if (embed.status === 'error' || !embed.data.concept.content) return undefined;
+    return parse(embed.data.concept.content.content);
+  }, [embed]);
   if (embed.status === 'error' && embed.embedData.type === 'inline') {
     return <span>{embed.embedData.linkText}</span>;
   } else if (embed.status === 'error') {
@@ -107,7 +112,7 @@ export const ConceptEmbed = ({ embed, fullWidth, heartButton: HeartButton }: Pro
       <BlockConcept
         fullWidth={fullWidth}
         title={concept.title}
-        content={concept.content?.content}
+        content={parsedContent}
         metaImage={concept.metaImage}
         copyright={concept.copyright}
         source={concept.source}
@@ -122,7 +127,7 @@ export const ConceptEmbed = ({ embed, fullWidth, heartButton: HeartButton }: Pro
     return (
       <InlineConcept
         title={concept.title}
-        content={concept.content?.content}
+        content={parsedContent}
         metaImage={concept.metaImage}
         copyright={concept.copyright}
         source={concept.source}
@@ -138,7 +143,7 @@ export const ConceptEmbed = ({ embed, fullWidth, heartButton: HeartButton }: Pro
     return (
       <ConceptNotionV2
         title={concept.title}
-        content={concept.content?.content}
+        content={parsedContent}
         metaImage={concept.metaImage}
         copyright={concept.copyright}
         source={concept.source}

package/src/Embed/ImageEmbed.tsx

@@ -8,7 +8,8 @@
 
 import { ImageEmbedData, ImageMetaData } from '@ndla/types-embed';
 import { useTranslation } from 'react-i18next';
-import { MouseEventHandler, useState } from 'react';
+import { MouseEventHandler, useMemo, useState } from 'react';
+import parse from 'html-react-parser';
 import { ExpandTwoArrows } from '@ndla/icons/action';
 import { COPYRIGHTED } from '@ndla/licenses';
 import { ArrowCollapse, ChevronDown, ChevronUp } from '@ndla/icons/common';
@@ -106,6 +107,15 @@ const expandedSizes = '(min-width: 1024px) 1024px, 100vw';
 const ImageEmbed = ({ embed, previewAlt, heartButton: HeartButton, inGrid, path }: 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);
+    } else if (embed.status === 'success' && embed.data.caption.caption) {
+      return parse(embed.data.caption.caption);
+    }
+  }, [embed]);
+
   if (embed.status === 'error') {
     const { align, size } = embed.embedData;
     const figureType = getFigureType(size, align);
@@ -158,7 +168,7 @@ const ImageEmbed = ({ embed, previewAlt, heartButton: HeartButton, inGrid, path
         <EmbedByline
           type="image"
           copyright={data.copyright}
-          description={embedData.caption ?? data.caption.caption}
+          description={parsedDescription}
           bottomRounded
           visibleAlt={previewAlt ? embed.embedData.alt : ''}
           inGrid={inGrid}

package/src/Embed/conceptComponents.tsx

@@ -11,7 +11,6 @@ import { ConceptData, ConceptVisualElementMeta } from '@ndla/types-embed';
 import { useTranslation } from 'react-i18next';
 import { css } from '@emotion/react';
 import { breakpoints, colors, fonts, misc, mq, spacing } from '@ndla/core';
-import { parseMarkdown } from '@ndla/util';
 import styled from '@emotion/styled';
 import { COPYRIGHTED } from '@ndla/licenses';
 import { Copyright } from '../types';
@@ -26,7 +25,7 @@ export type ConceptType = 'concept' | 'gloss';
 
 export interface ConceptNotionData {
   title: ConceptData['concept']['title'];
-  content?: string;
+  content?: ReactNode;
   metaImage?: {
     url?: string;
     alt?: string;
@@ -210,7 +209,7 @@ export const ConceptNotionV2 = forwardRef<HTMLDivElement, ConceptNotionProps>(
                 ) : visualElement?.resource === 'external' ? (
                   <ExternalEmbed embed={visualElement} />
                 ) : null}
-                <NotionDialogText>{parseMarkdown(content ?? '', 'body')}</NotionDialogText>
+                {content && <NotionDialogText>{content}</NotionDialogText>}
               </StyledNotionDialogContent>
               {tags && (
                 <ListWrapper>

package/src/Footer/FooterLinks.tsx

@@ -106,7 +106,7 @@ const FooterLinks = ({ links }: FooterLinksProps) => {
             {commonLinks.map((link) => (
               <div key={link.url}>
                 <StyledSafeLink
-                  key={t<string>(`footer.ndlaLinks.${link.key}`)}
+                  key={t(`footer.ndlaLinks.${link.key}`)}
                   aria-label={t(`footer.ndlaLinks.${link.key}`)}
                   to={link.url}
                   target="_blank"

package/src/FrontpageArticle/FrontpageArticle.tsx

@@ -7,9 +7,9 @@
  */
 
 import { CSSProperties, ReactNode, useMemo } from 'react';
-import { breakpoints, fonts, mq, spacing, spacingUnit } from '@ndla/core';
+import { spacing, spacingUnit } from '@ndla/core';
 import styled from '@emotion/styled';
-import { Heading } from '@ndla/typography';
+import { Heading, Text } from '@ndla/typography';
 import { Article } from '../types';
 import { ArticleByline } from '../Article';
 import { useMastheadHeight } from '../Masthead';
@@ -56,18 +56,6 @@ const StyledArticle = styled.article`
   }
 `;
 
-const StyledIntroduction = styled.div`
-  font-weight: ${fonts.weight.light};
-  font-family: ${fonts.sans};
-  margin-top: ${spacing.small};
-  ${fonts.sizes('22px', '30px')};
-
-  ${mq.range({ from: breakpoints.tablet })} {
-    margin-top: ${spacing.mediumlarge};
-    ${fonts.sizes('26px', '36px')};
-  }
-`;
-
 export const FrontpageArticle = ({ article, id, isWide, licenseBox }: Props) => {
   const { height = 0 } = useMastheadHeight();
   const cssVars = useMemo(() => ({ '--masthead-height': `${height}px` } as unknown as CSSProperties), [height]);
@@ -83,10 +71,12 @@ export const FrontpageArticle = ({ article, id, isWide, licenseBox }: Props) =>
 
   return (
     <StyledArticle style={cssVars}>
-      <Heading id={id} headingStyle="h1" element="h1" margin="normal" tabIndex={-1}>
+      <Heading id={id} headingStyle="h1-resource" element="h1" margin="normal" tabIndex={-1}>
         {title}
       </Heading>
-      <StyledIntroduction>{introduction}</StyledIntroduction>
+      <Text textStyle="ingress" element="div">
+        {introduction}
+      </Text>
       {content}
       <ArticleByline accordionHeaderVariant={'white'} licenseBox={licenseBox} displayByline={false} />
     </StyledArticle>