@ndla/ui 50.8.0 → 50.8.2

package/src/Embed/ConceptEmbed.stories.tsx

@@ -6,95 +6,95 @@
  *
  */
 
-import { Meta, StoryObj } from '@storybook/react';
-import { ConceptData, ConceptEmbedData } from '@ndla/types-embed';
-import ConceptEmbed from './ConceptEmbed';
-import { defaultParameters } from '../../../../stories/defaults';
-import StoryFavoriteButton from '../../../../stories/StoryFavoriteButton';
+import { Meta, StoryObj } from "@storybook/react";
+import { ConceptData, ConceptEmbedData } from "@ndla/types-embed";
+import ConceptEmbed from "./ConceptEmbed";
+import { defaultParameters } from "../../../../stories/defaults";
+import StoryFavoriteButton from "../../../../stories/StoryFavoriteButton";
 
 const blockEmbedData: ConceptEmbedData = {
-  contentId: '35',
-  resource: 'concept',
-  type: 'block',
-  linkText: '',
+  contentId: "35",
+  resource: "concept",
+  type: "block",
+  linkText: "",
 };
 
 const glossBlockEmbedData: ConceptEmbedData = {
-  contentId: '4942',
-  resource: 'concept',
-  type: 'block',
-  linkText: '',
+  contentId: "4942",
+  resource: "concept",
+  type: "block",
+  linkText: "",
 };
 
 const inlineEmbedData: ConceptEmbedData = {
-  contentId: '2318',
-  linkText: 'forklaring',
-  resource: 'concept',
-  type: 'inline',
+  contentId: "2318",
+  linkText: "forklaring",
+  resource: "concept",
+  type: "inline",
 };
 
 const glossInlineEmbedData: ConceptEmbedData = {
-  contentId: '23',
-  linkText: 'glose',
-  resource: 'concept',
-  type: 'inline',
+  contentId: "23",
+  linkText: "glose",
+  resource: "concept",
+  type: "inline",
 };
 
-const conceptMetaData: ConceptData['concept'] = {
+const conceptMetaData: ConceptData["concept"] = {
   id: 110,
   revision: 16,
-  title: { title: 'skin – formasjonsskade', language: 'nb' },
+  title: { title: "skin – formasjonsskade", language: "nb" },
   content: {
     content:
-      ' <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',
+      " <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: {
     license: {
-      license: 'CC-BY-SA-4.0',
-      description: 'Creative Commons Attribution-ShareAlike 4.0 International',
-      url: 'https://creativecommons.org/licenses/by-sa/4.0/',
+      license: "CC-BY-SA-4.0",
+      description: "Creative Commons Attribution-ShareAlike 4.0 International",
+      url: "https://creativecommons.org/licenses/by-sa/4.0/",
     },
-    creators: [{ type: 'Writer', name: 'Sissel Paaske' }],
+    creators: [{ type: "Writer", name: "Sissel Paaske" }],
     processors: [
-      { type: 'Processor', name: 'Totaltekst' },
-      { type: 'Correction', name: 'Arbeidets art' },
+      { type: "Processor", name: "Totaltekst" },
+      { type: "Correction", name: "Arbeidets art" },
     ],
     rightsholders: [],
     processed: false,
   },
-  source: '',
+  source: "",
   metaImage: {
-    url: 'https://api.test.ndla.no/image-api/raw/id/52863',
-    alt: 'Eksempel på hvordan borevæsken kan trenge ut i formasjonen fra borehullet og skade formasjonens permeabilitet. Illustrasjon.',
-    language: 'nb',
+    url: "https://api.test.ndla.no/image-api/raw/id/52863",
+    alt: "Eksempel på hvordan borevæsken kan trenge ut i formasjonen fra borehullet og skade formasjonens permeabilitet. Illustrasjon.",
+    language: "nb",
   },
-  tags: { tags: ['Brønn:Reservoar:'], language: 'nb' },
-  subjectIds: ['urn:subject:6'],
-  created: '2018-07-02T10:53:40Z',
-  updated: '2020-11-18T08:58:33Z',
-  updatedBy: ['sPHJn0BEtfxw2d2DUpIuS3iY', 'KBAJskRqPXZUv9LFjAbz8btB', 'eEIRDzflTh9oUp_3CgpuIMOg'],
-  supportedLanguages: ['nb', 'nn'],
+  tags: { tags: ["Brønn:Reservoar:"], language: "nb" },
+  subjectIds: ["urn:subject:6"],
+  created: "2018-07-02T10:53:40Z",
+  updated: "2020-11-18T08:58:33Z",
+  updatedBy: ["sPHJn0BEtfxw2d2DUpIuS3iY", "KBAJskRqPXZUv9LFjAbz8btB", "eEIRDzflTh9oUp_3CgpuIMOg"],
+  supportedLanguages: ["nb", "nn"],
   articleIds: [],
-  status: { current: 'PUBLISHED', other: [] },
+  status: { current: "PUBLISHED", other: [] },
   visualElement: {
     visualElement:
       '<ndlaembed data-resource="image" data-resource_id="52863" data-alt="Eksempel på hvordan borevæsken kan trenge ut i formasjonen fra borehullet og skade formasjonens permeabilitet. Illustrasjon." data-size="full" data-align="" data-url="https://api.test.ndla.no/image-api/v2/images/52863"></ndlaembed>',
-    language: 'nb',
+    language: "nb",
   },
-  conceptType: 'concept',
+  conceptType: "concept",
 };
 
-const glossMetaData: ConceptData['concept'] = {
+const glossMetaData: ConceptData["concept"] = {
   id: 4942,
   revision: 6,
   title: {
-    title: 'Ma Hong',
-    language: 'nb',
+    title: "Ma Hong",
+    language: "nb",
   },
   content: {
-    content: 'Hei',
-    language: 'nb',
+    content: "Hei",
+    language: "nb",
   },
   copyright: {
     creators: [],
@@ -102,43 +102,43 @@ const glossMetaData: ConceptData['concept'] = {
     rightsholders: [],
     processed: false,
   },
-  source: '',
+  source: "",
   metaImage: {
-    url: '',
-    alt: '',
-    language: 'und',
+    url: "",
+    alt: "",
+    language: "und",
   },
-  created: '2023-07-19T09:30:40.000Z',
-  updated: '2023-09-19T17:13:56.573Z',
-  updatedBy: ['XxnkdI7rApMl58MeG3p4g4B8', 'hd5ZL5Lm4kKkumWgN2gjy9wx'],
-  supportedLanguages: ['nb'],
+  created: "2023-07-19T09:30:40.000Z",
+  updated: "2023-09-19T17:13:56.573Z",
+  updatedBy: ["XxnkdI7rApMl58MeG3p4g4B8", "hd5ZL5Lm4kKkumWgN2gjy9wx"],
+  supportedLanguages: ["nb"],
   articleIds: [],
   status: {
-    current: 'IN_PROGRESS',
+    current: "IN_PROGRESS",
     other: [],
   },
   responsible: {
-    responsibleId: 'XxnkdI7rApMl58MeG3p4g4B8',
-    lastUpdated: '2023-07-19T09:30:40.000Z',
+    responsibleId: "XxnkdI7rApMl58MeG3p4g4B8",
+    lastUpdated: "2023-07-19T09:30:40.000Z",
   },
-  conceptType: 'gloss',
+  conceptType: "gloss",
   glossData: {
-    gloss: '马红',
-    wordClass: 'personal-pronoun',
-    originalLanguage: 'zh',
+    gloss: "马红",
+    wordClass: "personal-pronoun",
+    originalLanguage: "zh",
     transcriptions: {},
     examples: [
       [
         {
-          example: '我叫马红',
-          language: 'zh',
+          example: "我叫马红",
+          language: "zh",
           transcriptions: {
-            pinyin: 'wo jiao ma hong ',
+            pinyin: "wo jiao ma hong ",
           },
         },
         {
-          example: 'Jeg heter ma hong',
-          language: 'nb',
+          example: "Jeg heter ma hong",
+          language: "nb",
           transcriptions: {},
         },
       ],
@@ -146,39 +146,39 @@ const glossMetaData: ConceptData['concept'] = {
   },
 };
 
-const visualElementData: ConceptData['visualElement'] = {
-  resource: 'image',
-  status: 'success',
+const visualElementData: ConceptData["visualElement"] = {
+  resource: "image",
+  status: "success",
   embedData: {
-    resource: 'image',
-    resourceId: '52863',
-    alt: 'Eksempel på hvordan borevæsken kan trenge ut i formasjonen fra borehullet og skade formasjonens permeabilitet. Illustrasjon.',
-    size: 'full',
-    align: '',
-    url: 'https://api.test.ndla.no/image-api/v2/images/52863',
+    resource: "image",
+    resourceId: "52863",
+    alt: "Eksempel på hvordan borevæsken kan trenge ut i formasjonen fra borehullet og skade formasjonens permeabilitet. Illustrasjon.",
+    size: "full",
+    align: "",
+    url: "https://api.test.ndla.no/image-api/v2/images/52863",
   },
   data: {
-    id: '52863',
-    metaUrl: 'https://api.test.ndla.no/image-api/v3/images/52863',
+    id: "52863",
+    metaUrl: "https://api.test.ndla.no/image-api/v3/images/52863",
     title: {
-      title: 'Skin - formasjonsskade',
-      language: 'nb',
+      title: "Skin - formasjonsskade",
+      language: "nb",
     },
     alttext: {
-      alttext: 'Skissen viser hvordan borevæsken trenger inn i formasjonen i området nær hullet. Illustrasjon.',
-      language: 'nb',
+      alttext: "Skissen viser hvordan borevæsken trenger inn i formasjonen i området nær hullet. Illustrasjon.",
+      language: "nb",
     },
     copyright: {
       license: {
-        license: 'CC-BY-SA-4.0',
-        description: 'Creative Commons Attribution-ShareAlike 4.0 International',
-        url: 'https://creativecommons.org/licenses/by-sa/4.0/',
+        license: "CC-BY-SA-4.0",
+        description: "Creative Commons Attribution-ShareAlike 4.0 International",
+        url: "https://creativecommons.org/licenses/by-sa/4.0/",
       },
-      origin: '',
+      origin: "",
       creators: [
         {
-          type: 'Illustrator',
-          name: 'Sissel Paaske',
+          type: "Illustrator",
+          name: "Sissel Paaske",
         },
       ],
       processors: [],
@@ -186,27 +186,27 @@ const visualElementData: ConceptData['visualElement'] = {
       processed: false,
     },
     tags: {
-      tags: ['skin', 'formasjonsskade', 'nærbrønn', 'permeabilitet'],
-      language: 'nb',
+      tags: ["skin", "formasjonsskade", "nærbrønn", "permeabilitet"],
+      language: "nb",
     },
     caption: {
       caption: 'Formasjonsskade i nærbrønnområdet kalles "skin". Illustrasjon.',
-      language: 'nb',
+      language: "nb",
     },
-    supportedLanguages: ['nb'],
-    created: '2020-10-26T15:02:47Z',
-    createdBy: 'KBAJskRqPXZUv9LFjAbz8btB',
-    modelRelease: 'not-set',
+    supportedLanguages: ["nb"],
+    created: "2020-10-26T15:02:47Z",
+    createdBy: "KBAJskRqPXZUv9LFjAbz8btB",
+    modelRelease: "not-set",
     image: {
-      fileName: '6WbfcOmr.png',
+      fileName: "6WbfcOmr.png",
       size: 194971,
-      contentType: 'image/png',
-      imageUrl: 'https://api.test.ndla.no/image-api/raw/6WbfcOmr.png',
+      contentType: "image/png",
+      imageUrl: "https://api.test.ndla.no/image-api/raw/6WbfcOmr.png",
       dimensions: {
         width: 429,
         height: 565,
       },
-      language: 'nb',
+      language: "nb",
     },
   },
 };
@@ -221,9 +221,9 @@ const glossBlockData: ConceptData = {
 };
 
 const meta: Meta<typeof ConceptEmbed> = {
-  title: 'Embeds/ConceptEmbed',
+  title: "Embeds/ConceptEmbed",
   component: ConceptEmbed,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   args: {
     fullWidth: false,
   },
@@ -249,8 +249,8 @@ export const Block: StoryObj<typeof ConceptEmbed> = {
   args: {
     heartButton: StoryFavoriteButton,
     embed: {
-      resource: 'concept',
-      status: 'success',
+      resource: "concept",
+      status: "success",
       embedData: blockEmbedData,
       data: blockMetaData,
     },
@@ -258,7 +258,12 @@ export const Block: StoryObj<typeof ConceptEmbed> = {
 };
 export const GlossBlock: StoryObj<typeof ConceptEmbed> = {
   args: {
-    embed: { resource: 'concept', status: 'success', embedData: glossBlockEmbedData, data: glossBlockData },
+    embed: {
+      resource: "concept",
+      status: "success",
+      embedData: glossBlockEmbedData,
+      data: glossBlockData,
+    },
   },
 };
 
@@ -266,8 +271,8 @@ export const BlockFailed: StoryObj<typeof ConceptEmbed> = {
   args: {
     heartButton: StoryFavoriteButton,
     embed: {
-      resource: 'concept',
-      status: 'error',
+      resource: "concept",
+      status: "error",
       embedData: blockEmbedData,
     },
   },
@@ -277,8 +282,8 @@ export const Inline: StoryObj<typeof ConceptEmbed> = {
   args: {
     heartButton: StoryFavoriteButton,
     embed: {
-      resource: 'concept',
-      status: 'success',
+      resource: "concept",
+      status: "success",
       embedData: inlineEmbedData,
       data: blockMetaData,
     },
@@ -288,8 +293,8 @@ export const Inline: StoryObj<typeof ConceptEmbed> = {
 export const GlossInline: StoryObj<typeof ConceptEmbed> = {
   args: {
     embed: {
-      resource: 'concept',
-      status: 'success',
+      resource: "concept",
+      status: "success",
       embedData: glossInlineEmbedData,
       data: glossBlockData,
     },
@@ -300,8 +305,8 @@ export const InlineFailed: StoryObj<typeof ConceptEmbed> = {
   args: {
     heartButton: StoryFavoriteButton,
     embed: {
-      resource: 'concept',
-      status: 'error',
+      resource: "concept",
+      status: "error",
       embedData: inlineEmbedData,
     },
   },

package/src/Embed/ConceptEmbed.tsx

@@ -6,26 +6,26 @@
  *
  */
 
-import parse from 'html-react-parser';
-import { ReactElement, ReactNode, useCallback, useMemo, useRef, useState } from 'react';
-import { isMobile } from 'react-device-detect';
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { Root, Trigger, Content, Anchor, Close, Portal } from '@radix-ui/react-popover';
-import { IconButtonV2 } from '@ndla/button';
-import { breakpoints, colors, mq, spacing } from '@ndla/core';
-import { Cross } from '@ndla/icons/action';
-import { COPYRIGHTED } from '@ndla/licenses';
-import Tooltip from '@ndla/tooltip';
-import { ConceptMetaData } from '@ndla/types-embed';
-import { ConceptNotionV2, ConceptNotionData, ConceptType } from './conceptComponents';
-import EmbedErrorPlaceholder from './EmbedErrorPlaceholder';
-import { HeartButtonType } from './types';
-import { Figure } from '../Figure';
-import { Gloss } from '../Gloss';
-import { EmbedByline } from '../LicenseByline';
-import { Notion as UINotion } from '../Notion';
-import { NotionImage } from '../Notion/NotionImage';
+import parse from "html-react-parser";
+import { ReactElement, ReactNode, useCallback, useMemo, useRef, useState } from "react";
+import { isMobile } from "react-device-detect";
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { Root, Trigger, Content, Anchor, Close, Portal } from "@radix-ui/react-popover";
+import { IconButtonV2 } from "@ndla/button";
+import { breakpoints, colors, mq, spacing } from "@ndla/core";
+import { Cross } from "@ndla/icons/action";
+import { COPYRIGHTED } from "@ndla/licenses";
+import Tooltip from "@ndla/tooltip";
+import { ConceptMetaData } from "@ndla/types-embed";
+import { ConceptNotionV2, ConceptNotionData, ConceptType } from "./conceptComponents";
+import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
+import { HeartButtonType } from "./types";
+import { Figure } from "../Figure";
+import { Gloss } from "../Gloss";
+import { EmbedByline } from "../LicenseByline";
+import { Notion as UINotion } from "../Notion";
+import { NotionImage } from "../Notion/NotionImage";
 
 interface PopoverPosition {
   top?: number;
@@ -95,12 +95,12 @@ const StyledButton = styled.button`
 
 export const ConceptEmbed = ({ embed, fullWidth, heartButton: HeartButton, lang }: Props) => {
   const parsedContent = useMemo(() => {
-    if (embed.status === 'error' || !embed.data.concept.content) return undefined;
+    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') {
+  if (embed.status === "error" && embed.embedData.type === "inline") {
     return <span>{embed.embedData.linkText}</span>;
-  } else if (embed.status === 'error') {
+  } else if (embed.status === "error") {
     return <EmbedErrorPlaceholder type="concept" />;
   }
 
@@ -108,7 +108,7 @@ export const ConceptEmbed = ({ embed, fullWidth, heartButton: HeartButton, lang
     data: { concept, visualElement },
   } = embed;
 
-  if (embed.embedData.type === 'block') {
+  if (embed.embedData.type === "block") {
     return (
       <BlockConcept
         fullWidth={fullWidth}
@@ -127,7 +127,7 @@ export const ConceptEmbed = ({ embed, fullWidth, heartButton: HeartButton, lang
         exampleLangs={embed.embedData.exampleLangs}
       />
     );
-  } else if (embed.embedData.type === 'inline') {
+  } else if (embed.embedData.type === "inline") {
     return (
       <InlineConcept
         title={concept.title}
@@ -228,7 +228,7 @@ const StyledAnchorSpan = styled.span`
 `;
 
 const getModalPosition = (anchor: HTMLElement) => {
-  const article = anchor.closest('.c-article');
+  const article = anchor.closest(".c-article");
   const articlePos = article?.getBoundingClientRect();
   const anchorPos = anchor.getBoundingClientRect();
   return anchorPos.top - (articlePos?.top || -window.scrollY);
@@ -277,7 +277,7 @@ export const InlineConcept = ({
           {<BaselineIcon />}
         </NotionButton>
       </Trigger>
-      <Portal container={(anchorRef.current?.closest('.c-article') as HTMLElement | null) || undefined}>
+      <Portal container={(anchorRef.current?.closest(".c-article") as HTMLElement | null) || undefined}>
         <PopoverWrapper top={modalPos}>
           <Content avoidCollisions={false} side="bottom" asChild>
             <ConceptNotionV2
@@ -293,7 +293,7 @@ export const InlineConcept = ({
               lang={lang}
               closeButton={
                 <Close asChild>
-                  <IconButtonV2 aria-label={t('close')} variant="ghost">
+                  <IconButtonV2 aria-label={t("close")} variant="ghost">
                     <Cross />
                   </IconButtonV2>
                 </Close>
@@ -339,7 +339,7 @@ export const BlockConcept = ({
   const [modalPos, setModalPos] = useState(-9999);
 
   const visualElementType =
-    visualElement?.embedData.resource === 'brightcove' ? 'video' : visualElement?.embedData.resource;
+    visualElement?.embedData.resource === "brightcove" ? "video" : visualElement?.embedData.resource;
 
   const onOpenChange = useCallback((open: boolean) => {
     if (open) {
@@ -356,33 +356,38 @@ export const BlockConcept = ({
   return (
     <Root modal={isMobile} onOpenChange={onOpenChange}>
       <StyledAnchor ref={anchorRef} />
-      <Figure resizeIframe type={fullWidth ? 'full' : 'full-column'}>
-        {conceptType === 'concept' ? (
+      <Figure resizeIframe type={fullWidth ? "full" : "full-column"}>
+        {conceptType === "concept" ? (
           <UINotion
             id=""
             title={title.title}
             text={content}
             lang={lang}
             visualElement={
-              visualElement?.status === 'success' && (
+              visualElement?.status === "success" && (
                 <>
                   <ImageWrapper>
                     <Tooltip tooltip={t(`searchPage.resultType.${conceptType}`)}>
                       <Trigger asChild>
-                        <StyledButton type="button" aria-label={t('concept.showDescription', { title: title })}>
-                          {visualElement.resource === 'image' ? (
+                        <StyledButton
+                          type="button"
+                          aria-label={t("concept.showDescription", {
+                            title: title,
+                          })}
+                        >
+                          {visualElement.resource === "image" ? (
                             <NotionImage
                               type={visualElementType}
-                              id={''}
+                              id={""}
                               src={visualElement.data.image.imageUrl}
                               alt={visualElement.data.alttext.alttext}
                             />
                           ) : metaImage ? (
                             <NotionImage
                               type={visualElementType}
-                              id={''}
-                              src={metaImage?.url ?? ''}
-                              alt={metaImage?.alt ?? ''}
+                              id={""}
+                              src={metaImage?.url ?? ""}
+                              alt={metaImage?.alt ?? ""}
                             />
                           ) : undefined}
                         </StyledButton>
@@ -391,8 +396,8 @@ export const BlockConcept = ({
                   </ImageWrapper>
                   <Portal
                     container={
-                      typeof document !== 'undefined'
-                        ? (document.querySelector('.c-article') as HTMLElement | null) || undefined
+                      typeof document !== "undefined"
+                        ? (document.querySelector(".c-article") as HTMLElement | null) || undefined
                         : undefined
                     }
                   >
@@ -410,7 +415,7 @@ export const BlockConcept = ({
                           lang={lang}
                           closeButton={
                             <Close asChild>
-                              <IconButtonV2 aria-label={t('close')} variant="ghost">
+                              <IconButtonV2 aria-label={t("close")} variant="ghost">
                                 <Cross />
                               </IconButtonV2>
                             </Close>
@@ -430,15 +435,18 @@ export const BlockConcept = ({
             glossData={glossData}
             title={title}
             audio={
-              visualElement?.status === 'success' && visualElement.resource === 'audio'
-                ? { src: visualElement.data.audioFile.url, title: visualElement.data.title.title }
+              visualElement?.status === "success" && visualElement.resource === "audio"
+                ? {
+                    src: visualElement.data.audioFile.url,
+                    title: visualElement.data.title.title,
+                  }
                 : undefined
             }
             exampleIds={exampleIds}
             exampleLangs={exampleLangs}
           />
         )}
-        {copyright && conceptType === 'concept' && (
+        {copyright && conceptType === "concept" && (
           <EmbedByline copyright={copyright} bottomRounded topRounded type={conceptType as ConceptType}>
             {copyright.license?.license.toLowerCase() !== COPYRIGHTED && conceptHeartButton}
           </EmbedByline>

package/src/Embed/ConceptListEmbed.tsx

@@ -6,12 +6,12 @@
  *
  */
 
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { colors } from '@ndla/core';
-import { ConceptListMetaData } from '@ndla/types-embed';
-import { BlockConcept } from './ConceptEmbed';
-import { Figure } from '../Figure';
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { colors } from "@ndla/core";
+import { ConceptListMetaData } from "@ndla/types-embed";
+import { BlockConcept } from "./ConceptEmbed";
+import { Figure } from "../Figure";
 
 interface Props {
   embed: ConceptListMetaData;
@@ -33,8 +33,8 @@ const StyledSpan = styled.span`
 
 const ConceptListEmbed = ({ embed, lang }: Props) => {
   const { t } = useTranslation();
-  if (embed.status === 'error') {
-    return <StyledSpan>{t('embed.conceptListError')}</StyledSpan>;
+  if (embed.status === "error") {
+    return <StyledSpan>{t("embed.conceptListError")}</StyledSpan>;
   }
   const { embedData, data } = embed;
   return (