@ndla/ui 46.0.2 → 47.0.0

package/lib/index.d.ts

@@ -37,8 +37,6 @@ export { default as SearchResultSleeve } from './Search/SearchResultSleeve';
 export { default as ContentTypeResult } from './Search/ContentTypeResult';
 export { SearchFieldForm } from './Search/SearchFieldForm';
 export { default as MastheadSearchModal } from './Masthead/MastheadSearchModal';
-export { UserInfo } from './User';
-export type { AffiliationType, FeideGoGroup, FeideGroup, FeideOrg, FeideUserApiType, FeideMembershipType, FeideUser, } from './User';
 export { default as resourceTypeColor } from './utils/resourceTypeColor';
 export { default as CreatedBy } from './CreatedBy';
 export { MessageBox, MessageBoxTag, MessageBanner } from './Messages';

package/lib/index.js

@@ -1162,12 +1162,6 @@ Object.defineProperty(exports, "UnknownEmbed", {
     return _Embed.UnknownEmbed;
   }
 });
-Object.defineProperty(exports, "UserInfo", {
-  enumerable: true,
-  get: function get() {
-    return _User.UserInfo;
-  }
-});
 Object.defineProperty(exports, "WIDE_FRONTPAGE_ARTICLE_MAX_WIDTH", {
   enumerable: true,
   get: function get() {
@@ -1281,7 +1275,6 @@ var _SearchResultSleeve = _interopRequireDefault(require("./Search/SearchResultS
 var _ContentTypeResult = _interopRequireDefault(require("./Search/ContentTypeResult"));
 var _SearchFieldForm = require("./Search/SearchFieldForm");
 var _MastheadSearchModal = _interopRequireDefault(require("./Masthead/MastheadSearchModal"));
-var _User = require("./User");
 var _resourceTypeColor = _interopRequireDefault(require("./utils/resourceTypeColor"));
 var _CreatedBy = _interopRequireDefault(require("./CreatedBy"));
 var _Messages = require("./Messages");

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.0.2",
+  "version": "47.0.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,42 +31,42 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^2.2.25",
-    "@ndla/button": "^11.0.10",
+    "@ndla/accordion": "^2.2.26",
+    "@ndla/button": "^12.0.0",
     "@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/dropdown-menu": "^1.0.8",
+    "@ndla/forms": "^5.0.1",
+    "@ndla/hooks": "^2.1.1",
     "@ndla/icons": "^4.0.9",
     "@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/modal": "^5.0.0",
+    "@ndla/notion": "^6.0.1",
+    "@ndla/safelink": "^4.1.25",
+    "@ndla/select": "^3.0.0",
     "@ndla/switch": "^1.1.14",
     "@ndla/tabs": "^3.0.10",
-    "@ndla/tooltip": "^4.1.21",
+    "@ndla/tooltip": "^5.0.0",
     "@ndla/typography": "^0.2.1",
-    "@ndla/util": "^3.2.0",
-    "@radix-ui/react-popover": "^1.0.6",
+    "@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",
@@ -80,5 +80,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6beec50182999798fe82aa9aad1499d33a175b97"
+  "gitHead": "7b9ab5e858be896e97c8360f92b2385adceabf7a"
 }

package/src/Article/Article.tsx

@@ -8,7 +8,6 @@
 
 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';
@@ -72,24 +71,10 @@ 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}>
@@ -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/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/LicenseByline/EmbedByline.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { ReactNode, useMemo } from 'react';
+import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
@@ -17,14 +17,13 @@ import { ICopyright as AudioCopyright } from '@ndla/types-backend/audio-api';
 import { IDraftCopyright as ConceptCopyright } from '@ndla/types-backend/concept-api';
 import { BrightcoveCopyright } from '@ndla/types-embed';
 import { WarningOutline } from '@ndla/icons/common';
-import { parseMarkdown } from '@ndla/util';
 import LicenseLink from './LicenseLink';
 import LicenseDescription from './LicenseDescription';
 
 interface BaseProps {
   topRounded?: boolean;
   bottomRounded?: boolean;
-  description?: string;
+  description?: ReactNode;
   children?: ReactNode;
   visibleAlt?: string;
   error?: true | false;
@@ -132,7 +131,7 @@ const EmbedByline = ({
   type,
   topRounded,
   bottomRounded,
-  description: descriptionProp,
+  description,
   children,
   visibleAlt,
   first = true,
@@ -140,12 +139,6 @@ const EmbedByline = ({
   ...props
 }: Props) => {
   const { t, i18n } = useTranslation();
-  const strippedDescription = descriptionProp?.trim();
-
-  const description = useMemo(() => {
-    const stripped = strippedDescription?.trim() ?? '';
-    return parseMarkdown(stripped, 'caption');
-  }, [strippedDescription]);
 
   if (props.error) {
     const typeString = type === 'h5p' ? 'H5P' : t(`embed.type.${type}`).toLowerCase();
@@ -164,7 +157,7 @@ const EmbedByline = ({
 
   return (
     <BylineWrapper data-top-rounded={topRounded} data-bottom-rounded={bottomRounded} data-first={first}>
-      {!!strippedDescription?.length && description && <LicenseDescription description={description} />}
+      {description && <LicenseDescription description={description} />}
       {visibleAlt ? <StyledSpan>{`Alt: ${visibleAlt}`}</StyledSpan> : null}
       <RightsWrapper data-grid={inGrid}>
         {license ? <LicenseLink license={license} asLink={!!license.url.length} /> : null}

package/src/Messages/MessageBanner.tsx

@@ -8,9 +8,8 @@
 
 import styled from '@emotion/styled';
 import { colors, spacing } from '@ndla/core';
-// @ts-ignore
-import { Remarkable } from 'remarkable';
 import { CloseButton } from '@ndla/button';
+import { ReactNode } from 'react';
 
 interface WrapperProps {
   small?: boolean;
@@ -44,19 +43,15 @@ const StyledClosebutton = styled(CloseButton)`
 
 interface Props {
   small?: boolean;
-  children?: string;
+  children?: ReactNode;
   showCloseButton?: boolean;
   onClose?: () => void;
 }
 
-const markdown = new Remarkable({ breaks: true });
-markdown.inline.ruler.enable(['sub', 'sup']);
-markdown.block.ruler.disable(['list', 'table']);
-
 const MessageBanner = ({ children, onClose, showCloseButton, small }: Props) => {
   return (
     <MessageBannerWrapper small={small}>
-      <TextWrapper dangerouslySetInnerHTML={{ __html: markdown.render(children) }} />
+      <TextWrapper>{children}</TextWrapper>
       {showCloseButton && <StyledClosebutton onClick={onClose} />}
     </MessageBannerWrapper>
   );

package/src/Messages/MessageBox.tsx

@@ -10,14 +10,9 @@ import styled from '@emotion/styled';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import { InformationOutline, HumanMaleBoard, Forward, WarningOutline } from '@ndla/icons/common';
 
-// @ts-ignore
-import { Remarkable } from 'remarkable';
 import { CloseButton } from '@ndla/button';
 import { css } from '@emotion/react';
-
-const markdown = new Remarkable({ breaks: true });
-markdown.inline.ruler.enable(['sub', 'sup']);
-markdown.block.ruler.disable(['list', 'table']);
+import { ReactNode } from 'react';
 
 type MessageBoxType = 'ghost' | 'danger';
 
@@ -109,7 +104,7 @@ interface LinkProps {
 
 interface Props {
   type?: MessageBoxType;
-  children?: string;
+  children?: ReactNode;
   links?: LinkProps[];
   showCloseButton?: boolean;
   onClose?: () => void;
@@ -133,7 +128,7 @@ export const MessageBox = ({ type, children = '', links, showCloseButton, onClos
           <Icon type={type} />
         </IconWrapper>
         <div>
-          <TextWrapper dangerouslySetInnerHTML={{ __html: markdown.render(children) }} />
+          <TextWrapper>{children}</TextWrapper>
           {links && (
             <LinkWrapper>
               {links.map((x) => (

package/src/Navigation/NavigationTopicAbout.tsx

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-import parse from 'html-react-parser';
 import styled from '@emotion/styled';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import { css } from '@emotion/react';
@@ -105,13 +104,12 @@ const StyledContentWrapper = styled.div<InvertItProps>`
 
 type Props = {
   heading: string;
-  introduction: string;
+  introduction: ReactNode;
   onToggleShowContent: () => void;
   showContent: boolean;
   isLoading: boolean;
   isAdditionalTopic?: boolean;
   invertedStyle?: boolean;
-  renderMarkdown: (text: string) => string;
   children: ReactNode;
 };
 
@@ -123,7 +121,6 @@ export const NavigationTopicAbout = ({
   isLoading,
   isAdditionalTopic,
   invertedStyle,
-  renderMarkdown,
   children,
 }: Props) => {
   const { t } = useTranslation();
@@ -143,7 +140,7 @@ export const NavigationTopicAbout = ({
       ) : (
         <>
           <StyledIngress invertedStyle={invertedStyle}>
-            {parse(renderMarkdown(introduction))}
+            {introduction}
             <StyledButtonWrapper invertedStyle={invertedStyle}>
               <ButtonV2
                 aria-expanded={!!showContent}

package/src/Notion/Notion.tsx

@@ -8,7 +8,6 @@
 import { Fragment, ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { useTranslation } from 'react-i18next';
-import { parseMarkdown } from '@ndla/util';
 import { breakpoints, fonts, mq, spacing } from '@ndla/core';
 
 const ContentWrapper = styled.div`
@@ -83,7 +82,8 @@ const Notion = ({ id, labels = [], text, title, visualElement, imageElement, chi
         {imageElement}
         {visualElement}
         <TextWrapper hasVisualElement={!!(imageElement || visualElement)}>
-          {parseMarkdown(`**${title.trim()}** \u2013 ${text}`, 'body')}
+          <b>{title.trim()}</b>
+          {text}
           {!!labels.length && (
             <LabelsContainer>
               {t('searchPage.resultType.notionLabels')}