@ndla/ui 50.8.0 → 50.8.2

package/src/Embed/IframeEmbed.stories.tsx

@@ -6,24 +6,24 @@
  *
  */
 
-import { Meta, StoryObj } from '@storybook/react';
-import { IframeData, IframeEmbedData } from '@ndla/types-embed';
-import IframeEmbed from './IframeEmbed';
-import { defaultParameters } from '../../../../stories/defaults';
+import { Meta, StoryObj } from "@storybook/react";
+import { IframeData, IframeEmbedData } from "@ndla/types-embed";
+import IframeEmbed from "./IframeEmbed";
+import { defaultParameters } from "../../../../stories/defaults";
 
 const embedData: IframeEmbedData = {
-  width: '708px',
-  title: 'Tittel på iframen!',
-  height: '278px',
-  type: 'iframe',
-  resource: 'iframe',
-  url: 'https://embed.kahoot.it/2a51c481-d362-475b-862b-e4b47b96b3c9',
+  width: "708px",
+  title: "Tittel på iframen!",
+  height: "278px",
+  type: "iframe",
+  resource: "iframe",
+  url: "https://embed.kahoot.it/2a51c481-d362-475b-862b-e4b47b96b3c9",
 };
 
 const meta: Meta<typeof IframeEmbed> = {
-  title: 'Embeds/IframeEmbed',
+  title: "Embeds/IframeEmbed",
   component: IframeEmbed,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   decorators: [
     (Story) => (
       <div className="o-wrapper">
@@ -45,8 +45,8 @@ export default meta;
 export const Regular: StoryObj<typeof IframeEmbed> = {
   args: {
     embed: {
-      resource: 'iframe',
-      status: 'success',
+      resource: "iframe",
+      status: "success",
       embedData: embedData,
       data: {},
     },
@@ -56,72 +56,72 @@ export const Regular: StoryObj<typeof IframeEmbed> = {
 export const Failed: StoryObj<typeof IframeEmbed> = {
   args: {
     embed: {
-      resource: 'iframe',
-      status: 'error',
+      resource: "iframe",
+      status: "error",
       embedData: embedData,
     },
   },
 };
 
 const opensInNewEmbedData: IframeEmbedData = {
-  title: 'Kahoot!',
-  caption: 'Sjekk ut denne!',
-  imageid: '65086',
-  type: 'fullscreen',
-  resource: 'iframe',
-  url: 'https://embed.kahoot.it/2a51c481-d362-475b-862b-e4b47b96b3c9',
+  title: "Kahoot!",
+  caption: "Sjekk ut denne!",
+  imageid: "65086",
+  type: "fullscreen",
+  resource: "iframe",
+  url: "https://embed.kahoot.it/2a51c481-d362-475b-862b-e4b47b96b3c9",
 };
 
 const opensInnewMetaData: IframeData = {
   iframeImage: {
-    id: '65086',
-    metaUrl: 'https://api.test.ndla.no/image-api/v3/images/65086',
+    id: "65086",
+    metaUrl: "https://api.test.ndla.no/image-api/v3/images/65086",
     title: {
-      title: '\nSamtale ',
-      language: 'nb',
+      title: "\nSamtale ",
+      language: "nb",
     },
     alttext: {
-      alttext: ' To ungdommer sitter og snakker. Foto. ',
-      language: 'nb',
+      alttext: " To ungdommer sitter og snakker. Foto. ",
+      language: "nb",
     },
     copyright: {
       license: {
-        license: 'COPYRIGHTED',
-        description: 'Copyrighted',
+        license: "COPYRIGHTED",
+        description: "Copyrighted",
       },
-      origin: '',
+      origin: "",
       creators: [],
       processors: [],
       rightsholders: [
         {
-          type: 'rightsholder',
-          name: 'Folkehelseprosjektet Helsefremmende miljø på sosial medier, Bergen kommune 2019-2022',
+          type: "rightsholder",
+          name: "Folkehelseprosjektet Helsefremmende miljø på sosial medier, Bergen kommune 2019-2022",
         },
       ],
       processed: false,
     },
     tags: {
-      tags: ['samtale', 'Dialog', 'gutter'],
-      language: 'nb',
+      tags: ["samtale", "Dialog", "gutter"],
+      language: "nb",
     },
     caption: {
       caption: 'Dette bildet skal bare brukes i casen "Livet på sosiale medier". ',
-      language: 'nb',
+      language: "nb",
     },
-    supportedLanguages: ['nb'],
-    created: '2022-12-02T14:24:19Z',
-    createdBy: 'oltQx44eGQp0DwkiR1NRo5qE',
-    modelRelease: 'yes',
+    supportedLanguages: ["nb"],
+    created: "2022-12-02T14:24:19Z",
+    createdBy: "oltQx44eGQp0DwkiR1NRo5qE",
+    modelRelease: "yes",
     image: {
-      fileName: 'IgOjO6og.jpg',
+      fileName: "IgOjO6og.jpg",
       size: 176667,
-      contentType: 'image/jpeg',
-      imageUrl: 'https://api.test.ndla.no/image-api/raw/IgOjO6og.jpg',
+      contentType: "image/jpeg",
+      imageUrl: "https://api.test.ndla.no/image-api/raw/IgOjO6og.jpg",
       dimensions: {
         width: 1920,
         height: 804,
       },
-      language: 'nb',
+      language: "nb",
     },
   },
 };
@@ -129,8 +129,8 @@ const opensInnewMetaData: IframeData = {
 export const OpensInNewWindow: StoryObj<typeof IframeEmbed> = {
   args: {
     embed: {
-      resource: 'iframe',
-      status: 'success',
+      resource: "iframe",
+      status: "success",
       embedData: opensInNewEmbedData,
       data: opensInnewMetaData,
     },
@@ -140,8 +140,8 @@ export const OpensInNewWindow: StoryObj<typeof IframeEmbed> = {
 export const NoDimensions: StoryObj<typeof IframeEmbed> = {
   args: {
     embed: {
-      resource: 'iframe',
-      status: 'success',
+      resource: "iframe",
+      status: "success",
       embedData: {
         ...embedData,
         width: undefined,
@@ -155,8 +155,8 @@ export const NoDimensions: StoryObj<typeof IframeEmbed> = {
 export const OpensInNewWindowFailed: StoryObj<typeof IframeEmbed> = {
   args: {
     embed: {
-      resource: 'iframe',
-      status: 'error',
+      resource: "iframe",
+      status: "error",
       embedData: opensInNewEmbedData,
     },
   },

package/src/Embed/IframeEmbed.tsx

@@ -6,11 +6,11 @@
  *
  */
 
-import { useEffect, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import { IframeMetaData } from '@ndla/types-embed';
-import { Figure } from '../Figure';
-import { ResourceBox } from '../ResourceBox';
+import { useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { IframeMetaData } from "@ndla/types-embed";
+import { Figure } from "../Figure";
+import { ResourceBox } from "../ResourceBox";
 
 interface Props {
   embed: IframeMetaData;
@@ -28,38 +28,38 @@ const IframeEmbed = ({ 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 (embedData.type === 'fullscreen') {
-    const iframeImage = embed.status === 'success' ? embed.data.iframeImage : undefined;
+  if (embedData.type === "fullscreen") {
+    const iframeImage = embed.status === "success" ? embed.data.iframeImage : undefined;
     const alt = embedData.alt !== undefined ? embedData.alt : iframeImage?.alttext.alttext;
-    const image = { src: iframeImage?.image.imageUrl ?? '', alt: alt ?? '' };
+    const image = { src: iframeImage?.image.imageUrl ?? "", alt: alt ?? "" };
     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 resize = !embedData.url.includes('trinket.io');
+  const resize = !embedData.url.includes("trinket.io");
 
-  const fullColumnClass = isConcept ? 'c-figure--full-column' : '';
-  const resizeClass = resize ? 'c-figure--resize' : '';
+  const fullColumnClass = isConcept ? "c-figure--full-column" : "";
+  const resizeClass = resize ? "c-figure--resize" : "";
   const classes = `c-figure ${fullColumnClass} ${resizeClass}`;
 
   const { width, height, title, url } = embedData;
 
-  const strippedWidth = typeof width === 'number' ? width : width?.replace(/\s*px/, '');
-  const strippedHeight = typeof height === 'number' ? height : height?.replace(/\s*px/, '');
+  const strippedWidth = typeof width === "number" ? width : width?.replace(/\s*px/, "");
+  const strippedHeight = typeof height === "number" ? height : height?.replace(/\s*px/, "");
   const urlOrTitle = title || url;
 
   return (

package/src/Embed/ImageEmbed.stories.tsx

@@ -6,88 +6,88 @@
  *
  */
 
-import { ReactNode } from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import { IImageMetaInformationV3 } from '@ndla/types-backend/image-api';
-import { ImageEmbedData } from '@ndla/types-embed';
-import ImageEmbed from './ImageEmbed';
-import { defaultParameters } from '../../../../stories/defaults';
-import StoryFavoriteButton from '../../../../stories/StoryFavoriteButton';
+import { ReactNode } from "react";
+import { Meta, StoryObj } from "@storybook/react";
+import { IImageMetaInformationV3 } from "@ndla/types-backend/image-api";
+import { ImageEmbedData } from "@ndla/types-embed";
+import ImageEmbed from "./ImageEmbed";
+import { defaultParameters } from "../../../../stories/defaults";
+import StoryFavoriteButton from "../../../../stories/StoryFavoriteButton";
 
 const embedData: ImageEmbedData = {
-  resource: 'image',
-  resourceId: '61181',
-  size: 'full',
-  align: '',
-  alt: 'Tenåringsjente med lyse fletter slenger på håret. Foto. ',
+  resource: "image",
+  resourceId: "61181",
+  size: "full",
+  align: "",
+  alt: "Tenåringsjente med lyse fletter slenger på håret. Foto. ",
   caption:
-    'Den østerrikske tronfølgeren Franz Ferdinand og hans hustru Sophie var på besøk i Sarajevo i 1914. Begge ble skutt og drept av nasjonalisten Gavrilo Princip i det som er kjent som <em>skuddene i Sarajevo</em>. Denne hendelsen var den utløsende årsaken til første verdenskrig.',
-  url: 'https://api.test.ndla.no/image-api/v2/images/61181',
+    "Den østerrikske tronfølgeren Franz Ferdinand og hans hustru Sophie var på besøk i Sarajevo i 1914. Begge ble skutt og drept av nasjonalisten Gavrilo Princip i det som er kjent som <em>skuddene i Sarajevo</em>. Denne hendelsen var den utløsende årsaken til første verdenskrig.",
+  url: "https://api.test.ndla.no/image-api/v2/images/61181",
 };
 
 const metaData: IImageMetaInformationV3 = {
-  id: '61181',
-  metaUrl: 'https://api.test.ndla.no/image-api/v3/images/61181',
+  id: "61181",
+  metaUrl: "https://api.test.ndla.no/image-api/v3/images/61181",
   title: {
-    title: '\nHigh angle view of teenage girl with tousled dyed hair dancing at skateboard park\n',
-    language: 'nb',
+    title: "\nHigh angle view of teenage girl with tousled dyed hair dancing at skateboard park\n",
+    language: "nb",
   },
   alttext: {
-    alttext: 'Tenåringsjente med lyse fletter slenger på håret. Foto. ',
-    language: 'nb',
+    alttext: "Tenåringsjente med lyse fletter slenger på håret. Foto. ",
+    language: "nb",
   },
   copyright: {
     license: {
-      license: 'CC-BY-NC-4.0',
-      description: 'Creative Commons Attribution-NonCommercial 4.0 International',
-      url: 'https://creativecommons.org/licenses/by-nc/4.0/',
+      license: "CC-BY-NC-4.0",
+      description: "Creative Commons Attribution-NonCommercial 4.0 International",
+      url: "https://creativecommons.org/licenses/by-nc/4.0/",
     },
-    origin: 'https://bilder.ntb.no/r/preview/creative/EXuziiZGWno',
+    origin: "https://bilder.ntb.no/r/preview/creative/EXuziiZGWno",
     creators: [
       {
-        type: 'photographer',
-        name: 'Maskot',
+        type: "photographer",
+        name: "Maskot",
       },
     ],
     processors: [],
     rightsholders: [
       {
-        type: 'rightsholder',
-        name: 'NTB',
+        type: "rightsholder",
+        name: "NTB",
       },
     ],
     processed: false,
   },
   tags: {
-    tags: ['danser', 'kultur', 'identitet'],
-    language: 'nb',
+    tags: ["danser", "kultur", "identitet"],
+    language: "nb",
   },
   caption: {
-    caption: 'Modellklarert.',
-    language: 'nb',
+    caption: "Modellklarert.",
+    language: "nb",
   },
-  supportedLanguages: ['nb'],
-  created: '2022-01-07T08:26:01Z',
-  createdBy: 'lA2KgVfhY-fpmgHCYAy5W1DX',
-  modelRelease: 'yes',
+  supportedLanguages: ["nb"],
+  created: "2022-01-07T08:26:01Z",
+  createdBy: "lA2KgVfhY-fpmgHCYAy5W1DX",
+  modelRelease: "yes",
   image: {
-    fileName: 'S81WiNgl.jpg',
+    fileName: "S81WiNgl.jpg",
     size: 1685455,
-    contentType: 'image/jpeg',
-    imageUrl: 'https://api.test.ndla.no/image-api/raw/S81WiNgl.jpg',
+    contentType: "image/jpeg",
+    imageUrl: "https://api.test.ndla.no/image-api/raw/S81WiNgl.jpg",
     dimensions: {
       width: 2000,
       height: 1333,
     },
-    language: 'nb',
+    language: "nb",
   },
 };
 
 /** Bilder har tre mulige plasseringer: fullbredde midtstilt, venstrestilt og høyrestilt. Bilder kan være i størrelsene ekstra liten, liten, medium og stor (fullbredde). Bilder som ikke er fullbredde, kan ekspanderes på klikk. */
 const meta: Meta<typeof ImageEmbed> = {
-  title: 'Embeds/ImageEmbed',
+  title: "Embeds/ImageEmbed",
   component: ImageEmbed,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   args: {
     previewAlt: true,
   },
@@ -113,22 +113,22 @@ export const ImageEmbedStory: StoryObj<typeof ImageEmbed> = {
   args: {
     heartButton: StoryFavoriteButton,
     embed: {
-      resource: 'image',
-      status: 'success',
+      resource: "image",
+      status: "success",
       embedData: embedData,
       data: metaData,
     },
   },
 };
 
-ImageEmbedStory.storyName = 'ImageEmbed';
+ImageEmbedStory.storyName = "ImageEmbed";
 
 export const Failed: StoryObj<typeof ImageEmbed> = {
   args: {
     heartButton: StoryFavoriteButton,
     embed: {
-      resource: 'image',
-      status: 'error',
+      resource: "image",
+      status: "error",
       embedData: embedData,
     },
   },
@@ -138,8 +138,8 @@ export const FullWidth: StoryObj<typeof ImageEmbed> = {
   args: {
     heartButton: StoryFavoriteButton,
     embed: {
-      resource: 'image',
-      status: 'success',
+      resource: "image",
+      status: "success",
       embedData: embedData,
       data: metaData,
     },
@@ -155,14 +155,14 @@ export const Cropped: StoryObj<typeof ImageEmbed> = {
   args: {
     heartButton: StoryFavoriteButton,
     embed: {
-      resource: 'image',
-      status: 'success',
+      resource: "image",
+      status: "success",
       embedData: {
         ...embedData,
-        lowerRightX: '50.0',
-        lowerRightY: '50.0',
-        upperLeftX: '0.5',
-        upperLeftY: '0',
+        lowerRightX: "50.0",
+        lowerRightY: "50.0",
+        upperLeftX: "0.5",
+        upperLeftY: "0",
       },
       data: metaData,
     },
@@ -201,11 +201,11 @@ export const FloatLeft: StoryObj<typeof ImageEmbed> = {
   args: {
     heartButton: StoryFavoriteButton,
     embed: {
-      resource: 'image',
-      status: 'success',
+      resource: "image",
+      status: "success",
       embedData: {
         ...embedData,
-        align: 'left',
+        align: "left",
       },
       data: metaData,
     },
@@ -221,11 +221,11 @@ export const FloatRight: StoryObj<typeof ImageEmbed> = {
   args: {
     heartButton: StoryFavoriteButton,
     embed: {
-      resource: 'image',
-      status: 'success',
+      resource: "image",
+      status: "success",
       embedData: {
         ...embedData,
-        align: 'right',
+        align: "right",
       },
       data: metaData,
     },
@@ -242,12 +242,12 @@ export const FloatRightSmall: StoryObj<typeof ImageEmbed> = {
   args: {
     heartButton: StoryFavoriteButton,
     embed: {
-      resource: 'image',
-      status: 'success',
+      resource: "image",
+      status: "success",
       embedData: {
         ...embedData,
-        size: 'small',
-        align: 'right',
+        size: "small",
+        align: "right",
       },
       data: metaData,
     },
@@ -263,12 +263,12 @@ export const FloatLeftSmall: StoryObj<typeof ImageEmbed> = {
   args: {
     heartButton: StoryFavoriteButton,
     embed: {
-      resource: 'image',
-      status: 'success',
+      resource: "image",
+      status: "success",
       embedData: {
         ...embedData,
-        size: 'small',
-        align: 'left',
+        size: "small",
+        align: "left",
       },
       data: metaData,
     },
@@ -284,12 +284,12 @@ export const FloatRightExtraSmall: StoryObj<typeof ImageEmbed> = {
   args: {
     heartButton: StoryFavoriteButton,
     embed: {
-      resource: 'image',
-      status: 'success',
+      resource: "image",
+      status: "success",
       embedData: {
         ...embedData,
-        size: 'xsmall',
-        align: 'right',
+        size: "xsmall",
+        align: "right",
       },
       data: metaData,
     },
@@ -305,12 +305,12 @@ export const FloatLeftExtraSmall: StoryObj<typeof ImageEmbed> = {
   args: {
     heartButton: StoryFavoriteButton,
     embed: {
-      resource: 'image',
-      status: 'success',
+      resource: "image",
+      status: "success",
       embedData: {
         ...embedData,
-        size: 'xsmall',
-        align: 'left',
+        size: "xsmall",
+        align: "left",
       },
       data: metaData,
     },