@ndla/ui 50.8.0 → 50.8.2

package/src/Embed/ContentLinkEmbed.tsx

@@ -6,10 +6,10 @@
  *
  */
 
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { colors } from '@ndla/core';
-import { ContentLinkMetaData } from '@ndla/types-embed';
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { colors } from "@ndla/core";
+import { ContentLinkMetaData } from "@ndla/types-embed";
 interface Props {
   embed: ContentLinkMetaData;
   isOembed?: boolean;
@@ -21,13 +21,13 @@ const StyledSpan = styled.span`
 
 const ContentLinkEmbed = ({ embed, isOembed }: Props) => {
   const { t } = useTranslation();
-  if (embed.status === 'error') {
-    return <StyledSpan>{`${t('embed.linkError')}: ${embed.embedData.linkText}`}</StyledSpan>;
+  if (embed.status === "error") {
+    return <StyledSpan>{`${t("embed.linkError")}: ${embed.embedData.linkText}`}</StyledSpan>;
   }
 
   const { embedData, data } = embed;
 
-  if (embedData.openIn === 'new-context' || isOembed) {
+  if (embedData.openIn === "new-context" || isOembed) {
     return (
       <a href={embed.data.path} target="_blank" rel="noopener noreferrer">
         {embedData.linkText}

package/src/Embed/EmbedErrorPlaceholder.tsx

@@ -6,16 +6,16 @@
  *
  */
 
-import { ReactNode } from 'react';
-import styled from '@emotion/styled';
-import { colors, spacing } from '@ndla/core';
-import { WarningOutline } from '@ndla/icons/common';
-import { Figure, FigureType } from '../Figure';
-import { EmbedByline } from '../LicenseByline';
-import { EmbedBylineErrorProps } from '../LicenseByline/EmbedByline';
+import { ReactNode } from "react";
+import styled from "@emotion/styled";
+import { colors, spacing } from "@ndla/core";
+import { WarningOutline } from "@ndla/icons/common";
+import { Figure, FigureType } from "../Figure";
+import { EmbedByline } from "../LicenseByline";
+import { EmbedBylineErrorProps } from "../LicenseByline/EmbedByline";
 
 interface Props {
-  type: EmbedBylineErrorProps['type'];
+  type: EmbedBylineErrorProps["type"];
   figureType?: FigureType;
   children?: ReactNode;
 }
@@ -32,7 +32,7 @@ const ErrorPlaceholder = styled.div`
     height: 90%;
     width: 90%;
   }
-  &[data-embed-type='audio'] {
+  &[data-embed-type="audio"] {
     height: 150px;
   }
 `;

package/src/Embed/ExternalEmbed.stories.tsx

@@ -6,31 +6,31 @@
  *
  */
 
-import { Meta, StoryObj } from '@storybook/react';
-import { OembedEmbedData, OembedData } from '@ndla/types-embed';
-import ExternalEmbed from './ExternalEmbed';
-import { defaultParameters } from '../../../../stories/defaults';
+import { Meta, StoryObj } from "@storybook/react";
+import { OembedEmbedData, OembedData } from "@ndla/types-embed";
+import ExternalEmbed from "./ExternalEmbed";
+import { defaultParameters } from "../../../../stories/defaults";
 
 const embedData: OembedEmbedData = {
-  resource: 'external',
-  url: 'https://embed.ted.com/talks/zahra_biabani_the_eco_creators_helping_the_climate_through_social_media',
-  type: 'iframe',
+  resource: "external",
+  url: "https://embed.ted.com/talks/zahra_biabani_the_eco_creators_helping_the_climate_through_social_media",
+  type: "iframe",
 };
 
 const metaData: OembedData = {
   oembed: {
-    type: 'video',
-    version: '1.0',
-    title: 'Zahra Biabani: The eco-creators helping the climate through social media',
+    type: "video",
+    version: "1.0",
+    title: "Zahra Biabani: The eco-creators helping the climate through social media",
     description:
       '"Climate doom-ism," or a pessimistic outlook on the future of the planet, rivals climate denialism in holding up the fight against climate change, says activist Zahra Biabani. Illuminating how hope combats inaction, she takes us inside the world of eco-friendly content on TikTok -- and shows that we all have what it takes to make real change.',
-    authorName: 'Zahra Biabani',
-    authorUrl: 'https://www.ted.com/speakers/zahra_biabani',
-    providerName: 'TED',
-    providerUrl: 'https://www.ted.com',
+    authorName: "Zahra Biabani",
+    authorUrl: "https://www.ted.com/speakers/zahra_biabani",
+    providerName: "TED",
+    providerUrl: "https://www.ted.com",
     cacheAge: 300,
     thumbnailUrl:
-      'https://pi.tedcdn.com/r/talkstar-photos.s3.amazonaws.com/uploads/803ab5d5-2cff-4764-b5b6-545217159538/ZahraBiabani_2022T-embed.jpg?h=315&w=560',
+      "https://pi.tedcdn.com/r/talkstar-photos.s3.amazonaws.com/uploads/803ab5d5-2cff-4764-b5b6-545217159538/ZahraBiabani_2022T-embed.jpg?h=315&w=560",
     thumbnailWidth: 560,
     thumbnailHeight: 315,
     width: 560,
@@ -40,9 +40,9 @@ const metaData: OembedData = {
 };
 
 const meta: Meta<typeof ExternalEmbed> = {
-  title: 'Embeds/ExternalEmbed',
+  title: "Embeds/ExternalEmbed",
   component: ExternalEmbed,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   decorators: [
     (Story) => (
       <div className="o-wrapper">
@@ -64,8 +64,8 @@ export default meta;
 export const Regular: StoryObj<typeof ExternalEmbed> = {
   args: {
     embed: {
-      resource: 'external',
-      status: 'success',
+      resource: "external",
+      status: "success",
       embedData: embedData,
       data: metaData,
     },
@@ -75,8 +75,8 @@ export const Regular: StoryObj<typeof ExternalEmbed> = {
 export const Failed: StoryObj<typeof ExternalEmbed> = {
   args: {
     embed: {
-      resource: 'external',
-      status: 'error',
+      resource: "external",
+      status: "error",
       embedData: embedData,
     },
   },

package/src/Embed/ExternalEmbed.tsx

@@ -6,13 +6,13 @@
  *
  */
 
-import { useEffect, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { OembedMetaData } from '@ndla/types-embed';
-import EmbedErrorPlaceholder from './EmbedErrorPlaceholder';
-import { Figure } from '../Figure';
-import { ResourceBox } from '../ResourceBox';
+import { useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { OembedMetaData } from "@ndla/types-embed";
+import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
+import { Figure } from "../Figure";
+import { ResourceBox } from "../ResourceBox";
 
 interface Props {
   embed: OembedMetaData;
@@ -34,32 +34,35 @@ const ExternalEmbed = ({ embed, isConcept }: Props) => {
     if (iframe) {
       const [width, height] = [parseInt(iframe.width), parseInt(iframe.height)];
       iframe.style.aspectRatio = `${width ? width : 16}/${height ? height : 9}`;
-      iframe.width = '';
-      iframe.height = '';
+      iframe.width = "";
+      iframe.height = "";
     }
   }, []);
-  if (embed.status === 'error') {
+  if (embed.status === "error") {
     return <EmbedErrorPlaceholder type="external" />;
   }
 
   const { embedData, data } = embed;
 
-  if (embedData.type === 'fullscreen') {
-    const image = { src: data.iframeImage?.image.imageUrl ?? '', alt: data.iframeImage?.alttext?.alttext ?? '' };
+  if (embedData.type === "fullscreen") {
+    const image = {
+      src: data.iframeImage?.image.imageUrl ?? "",
+      alt: data.iframeImage?.alttext?.alttext ?? "",
+    };
     return (
       <Figure type="full">
         <ResourceBox
           image={image}
-          title={embedData.title ?? ''}
+          title={embedData.title ?? ""}
           url={embedData.url}
-          caption={embedData.caption ?? ''}
-          buttonText={t('license.other.itemImage.ariaLabel')}
+          caption={embedData.caption ?? ""}
+          buttonText={t("license.other.itemImage.ariaLabel")}
         />
       </Figure>
     );
   }
 
-  const fullColumnClass = isConcept ? 'c-figure--full-column' : '';
+  const fullColumnClass = isConcept ? "c-figure--full-column" : "";
   const classes = `c-figure ${fullColumnClass} c-figure--resize`;
 
   return (
@@ -69,7 +72,7 @@ const ExternalEmbed = ({ embed, isConcept }: Props) => {
       //@ts-ignore
       // eslint-disable-next-line react/no-unknown-property
       resizeiframe="true"
-      dangerouslySetInnerHTML={{ __html: data.oembed.html ?? '' }}
+      dangerouslySetInnerHTML={{ __html: data.oembed.html ?? "" }}
     />
   );
 };

package/src/Embed/FootnoteEmbed.stories.tsx

@@ -6,11 +6,11 @@
  *
  */
 
-import { Meta, StoryFn, StoryObj } from '@storybook/react';
-import { FootnoteData, FootnoteEmbedData } from '@ndla/types-embed';
-import FootnoteEmbed from './FootnoteEmbed';
-import { defaultParameters } from '../../../../stories/defaults';
-import { ArticleByline } from '../Article';
+import { Meta, StoryFn, StoryObj } from "@storybook/react";
+import { FootnoteData, FootnoteEmbedData } from "@ndla/types-embed";
+import FootnoteEmbed from "./FootnoteEmbed";
+import { defaultParameters } from "../../../../stories/defaults";
+import { ArticleByline } from "../Article";
 
 /**
  * Kildehenvisninger benytter [APA-stilen](https://sokogskriv.no/kildebruk-og-referanser/referansestiler/apa-6th/) for utlistning nederst på siden.
@@ -20,8 +20,8 @@ import { ArticleByline } from '../Article';
  * I referanselisten nederst lenkes hver referanse igjen til hvor de opptrer i teksten
  */
 export default {
-  title: 'Embeds/FootnoteEmbed',
-  tags: ['autodocs'],
+  title: "Embeds/FootnoteEmbed",
+  tags: ["autodocs"],
   component: FootnoteEmbed,
   parameters: {
     inlineStories: true,
@@ -29,21 +29,21 @@ export default {
   },
   args: {
     embed: {
-      resource: 'footnote',
-      status: 'success',
+      resource: "footnote",
+      status: "success",
       embedData: {
-        resource: 'footnote',
-        title: 'Hanseatene kommer tilbake.',
-        type: '',
-        year: '2013',
-        edition: '',
-        publisher: 'Aftenposten',
-        authors: 'Eva Røyrane',
+        resource: "footnote",
+        title: "Hanseatene kommer tilbake.",
+        type: "",
+        year: "2013",
+        edition: "",
+        publisher: "Aftenposten",
+        authors: "Eva Røyrane",
       },
       data: {
         entryNum: 1,
-        authors: ['Eva Røyrane'],
-        year: '2013',
+        authors: ["Eva Røyrane"],
+        year: "2013",
       },
     },
   },
@@ -67,7 +67,7 @@ export const WithFootnoteBox: StoryFn<typeof FootnoteEmbed> = ({ ...args }) => (
     </p>
     <ArticleByline
       footnotes={
-        args.embed.status === 'success'
+        args.embed.status === "success"
           ? [
               {
                 ...args.embed.embedData,
@@ -83,19 +83,19 @@ export const WithFootnoteBox: StoryFn<typeof FootnoteEmbed> = ({ ...args }) => (
 );
 
 const otherFootnoteEmbedData: FootnoteEmbedData = {
-  title: 'Ingen tok Ketil Bjørnstad på alvor',
-  authors: 'Sturle Scholz Nærø',
-  publisher: 'Aftenposten',
-  year: '2013',
-  edition: '',
-  resource: 'footnote',
-  type: '',
+  title: "Ingen tok Ketil Bjørnstad på alvor",
+  authors: "Sturle Scholz Nærø",
+  publisher: "Aftenposten",
+  year: "2013",
+  edition: "",
+  resource: "footnote",
+  type: "",
 };
 
 const otherFootnoteMeta: FootnoteData = {
   entryNum: 2,
-  authors: ['Sturle Scholz Nærø'],
-  year: '2013',
+  authors: ["Sturle Scholz Nærø"],
+  year: "2013",
 };
 
 export const WithSeveralFootnotes: StoryFn<typeof FootnoteEmbed> = ({ ...args }) => (
@@ -107,12 +107,17 @@ export const WithSeveralFootnotes: StoryFn<typeof FootnoteEmbed> = ({ ...args })
     <p>
       Her kan det ligge en til
       <FootnoteEmbed
-        embed={{ resource: 'footnote', status: 'success', data: otherFootnoteMeta, embedData: otherFootnoteEmbedData }}
+        embed={{
+          resource: "footnote",
+          status: "success",
+          data: otherFootnoteMeta,
+          embedData: otherFootnoteEmbedData,
+        }}
       />
     </p>
     <ArticleByline
       footnotes={
-        args.embed.status === 'success'
+        args.embed.status === "success"
           ? [
               {
                 ...args.embed.embedData,

package/src/Embed/FootnoteEmbed.tsx

@@ -6,10 +6,10 @@
  *
  */
 
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { colors, spacing } from '@ndla/core';
-import { FootnoteMetaData } from '@ndla/types-embed';
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { colors, spacing } from "@ndla/core";
+import { FootnoteMetaData } from "@ndla/types-embed";
 
 interface Props {
   embed: FootnoteMetaData;
@@ -40,8 +40,8 @@ const FootnoteRef = styled.span`
 
 const FootnoteEmbed = ({ embed }: Props) => {
   const { t } = useTranslation();
-  if (embed.status === 'error') {
-    return <div>{t('error')}</div>;
+  if (embed.status === "error") {
+    return <div>{t("error")}</div>;
   }
 
   return (

package/src/Embed/H5pEmbed.stories.tsx

@@ -6,39 +6,39 @@
  *
  */
 
-import { Meta, StoryObj } from '@storybook/react';
-import { H5pEmbedData, H5pData } from '@ndla/types-embed';
-import H5pEmbed from './H5pEmbed';
-import { defaultParameters } from '../../../../stories/defaults';
+import { Meta, StoryObj } from "@storybook/react";
+import { H5pEmbedData, H5pData } from "@ndla/types-embed";
+import H5pEmbed from "./H5pEmbed";
+import { defaultParameters } from "../../../../stories/defaults";
 
 const embedData: H5pEmbedData = {
-  resource: 'h5p',
-  path: '/resource/c56368d0-0432-4ec3-97bd-f4ba4badf55e',
-  title: 'Sorter avfall',
-  url: 'https://h5p-test.ndla.no/resource/c56368d0-0432-4ec3-97bd-f4ba4badf55e?locale=nb-no&cssUrl=https://test.ndla.no/static/h5p-custom-css.css',
+  resource: "h5p",
+  path: "/resource/c56368d0-0432-4ec3-97bd-f4ba4badf55e",
+  title: "Sorter avfall",
+  url: "https://h5p-test.ndla.no/resource/c56368d0-0432-4ec3-97bd-f4ba4badf55e?locale=nb-no&cssUrl=https://test.ndla.no/static/h5p-custom-css.css",
 };
 
 const metaData: H5pData = {
   h5pLicenseInformation: {
     h5p: {
-      title: 'Sorter avfall',
+      title: "Sorter avfall",
       source: null,
-      license: 'CC BY-SA',
-      licenseVersion: '4.0',
+      license: "CC BY-SA",
+      licenseVersion: "4.0",
       licenseExtras: null,
       thumbnail: null,
       authors: [
-        { name: 'Amendor AS', role: 'Author' },
-        { name: 'A B', role: 'Author' },
+        { name: "Amendor AS", role: "Author" },
+        { name: "A B", role: "Author" },
       ],
     },
   },
   h5pUrl:
-    'https://h5p-test.ndla.no/resource/c56368d0-0432-4ec3-97bd-f4ba4badf55e?locale=nb-no&cssUrl=https://test.ndla.no/static/h5p-custom-css.css',
+    "https://h5p-test.ndla.no/resource/c56368d0-0432-4ec3-97bd-f4ba4badf55e?locale=nb-no&cssUrl=https://test.ndla.no/static/h5p-custom-css.css",
   oembed: {
-    type: 'proxy',
-    version: '1.0',
-    title: 'Sorter avfall',
+    type: "proxy",
+    version: "1.0",
+    title: "Sorter avfall",
     width: 800,
     height: 600,
     html: '<div><iframe width="800" height="600" allowfullscreen="allowfullscreen" src="https://h5p-test.ndla.no/resource/c56368d0-0432-4ec3-97bd-f4ba4badf55e?locale=nb-no&amp;cssUrl=https%3A%2F%2Ftest.ndla.no%2Fstatic%2Fh5p-custom-css.css" title="Sorter avfall"></iframe><script src="https://ca.h5p.ndla.no/h5p-php-library/js/h5p-resizer.js"></script></div>',
@@ -46,9 +46,9 @@ const metaData: H5pData = {
 };
 
 const meta: Meta<typeof H5pEmbed> = {
-  title: 'Embeds/H5pEmbed',
+  title: "Embeds/H5pEmbed",
   component: H5pEmbed,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   decorators: [
     (Story) => (
       <div className="o-wrapper">
@@ -70,8 +70,8 @@ export default meta;
 export const Regular: StoryObj<typeof H5pEmbed> = {
   args: {
     embed: {
-      resource: 'h5p',
-      status: 'success',
+      resource: "h5p",
+      status: "success",
       embedData: embedData,
       data: metaData,
     },
@@ -81,8 +81,8 @@ export const Regular: StoryObj<typeof H5pEmbed> = {
 export const Failed: StoryObj<typeof H5pEmbed> = {
   args: {
     embed: {
-      resource: 'h5p',
-      status: 'error',
+      resource: "h5p",
+      status: "error",
       embedData: embedData,
     },
   },

package/src/Embed/H5pEmbed.tsx

@@ -6,9 +6,9 @@
  *
  */
 
-import styled from '@emotion/styled';
-import { H5pMetaData } from '@ndla/types-embed';
-import EmbedErrorPlaceholder from './EmbedErrorPlaceholder';
+import styled from "@emotion/styled";
+import { H5pMetaData } from "@ndla/types-embed";
+import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
 
 interface Props {
   embed: H5pMetaData;
@@ -22,14 +22,14 @@ const StyledFigure = styled.figure`
 `;
 
 const H5pEmbed = ({ embed, isConcept }: Props) => {
-  if (embed.status === 'error') {
+  if (embed.status === "error") {
     return <EmbedErrorPlaceholder type="h5p" />;
   }
-  const fullColumnClass = isConcept ? 'c-figure--full-column' : '';
+  const fullColumnClass = isConcept ? "c-figure--full-column" : "";
   const classes = `c-figure ${fullColumnClass} c-figure--resize`;
 
   if (embed.data.oembed) {
-    return <figure className={classes} dangerouslySetInnerHTML={{ __html: embed.data.oembed.html ?? '' }} />;
+    return <figure className={classes} dangerouslySetInnerHTML={{ __html: embed.data.oembed.html ?? "" }} />;
   }
 
   return (