@ndla/ui 43.0.2 → 43.0.3

package/src/Breadcrumb/Breadcrumb.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode, useRef } from 'react';
+import { ReactNode, useRef } from 'react';
 import { useComponentSize, useIsomorphicLayoutEffect } from '@ndla/hooks';
 import styled from '@emotion/styled';
 import { useTranslation } from 'react-i18next';

package/src/Breadcrumb/BreadcrumbItem.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { useRef, useImperativeHandle, ReactNode, forwardRef } from 'react';
+import { useRef, useImperativeHandle, ReactNode, forwardRef } from 'react';
 import { ChevronRight } from '@ndla/icons/common';
 import SafeLink from '@ndla/safelink';
 import styled from '@emotion/styled';

package/src/Breadcrumb/HeaderBreadcrumb.tsx

@@ -10,7 +10,6 @@ import styled from '@emotion/styled';
 import { colors, fonts, spacing } from '@ndla/core';
 import { ChevronRight } from '@ndla/icons/common';
 import SafeLink from '@ndla/safelink';
-import React from 'react';
 import Breadcrumb from './Breadcrumb';
 import { IndexedBreadcrumbItem, SimpleBreadcrumbItem } from './BreadcrumbItem';
 

package/src/Breadcrumb/HomeBreadcrumb.tsx

@@ -10,7 +10,6 @@ import styled from '@emotion/styled';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import { ChevronRight, Home } from '@ndla/icons/common';
 import SafeLink from '@ndla/safelink';
-import React from 'react';
 import Breadcrumb from './Breadcrumb';
 import { IndexedBreadcrumbItem, SimpleBreadcrumbItem } from './BreadcrumbItem';
 

package/src/CampaignBlock/CampaignBlock.stories.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import CampaignBlock from './CampaignBlock';
 import { defaultParameters } from '../../../../stories/defaults';

package/src/CampaignBlock/CampaignBlock.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import SafeLink from '@ndla/safelink';
@@ -46,6 +45,7 @@ const Container = styled.div`
   border: 1px ${colors.brand.lighter} solid;
   border-radius: ${misc.borderRadius};
   padding: ${spacing.normal} ${spacing.small};
+  background-color: ${colors.white};
   ${mq.range({ from: breakpoints.tabletWide })} {
     max-width: 1100px;
     flex-direction: row;

package/src/CompetenceGoalTab/CompetenceGoalItem.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { CompetenceGoalsItemType } from '../types';
 import SearchButton from './SearchButton';

package/src/CompetenceGoalTab/CompetenceGoalTab.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { useState } from 'react';
+import { useState } from 'react';
 import styled from '@emotion/styled';
 import { spacing } from '@ndla/core';
 import { useTranslation } from 'react-i18next';

package/src/CompetenceGoalTab/CompetenceItem.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import styled from '@emotion/styled';
 import { MenuBook } from '@ndla/icons/action';
 import { colors, spacing } from '@ndla/core';

package/src/CompetenceGoalTab/CoreElementItem.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { CoreElementsItemType } from '../types';
 import SearchButton from './SearchButton';

package/src/CompetenceGoalTab/SearchButton.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import styled from '@emotion/styled';
 import { spacing, mq, breakpoints } from '@ndla/core';
 import { Search } from '@ndla/icons/common';

package/src/ContactBlock/Contactblock.stories.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 import ContactBlock from './ContactBlock';
 import { defaultParameters } from '../../../../stories/defaults';

package/src/ContentLoader/index.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode, SVGProps } from 'react';
+import { ReactNode, SVGProps } from 'react';
 import { uuid } from '@ndla/util';
 
 interface Props extends Omit<SVGProps<SVGSVGElement>, 'viewBox'> {

package/src/ContentPlaceholder/ContentPlaceholder.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import styled from '@emotion/styled';
 import { colors } from '@ndla/core';
 

package/src/ContentTypeBadge/ContentTypeBadge.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import BEMHelper from 'react-bem-helper';
 
 import {

package/src/CopyParagraphButton/CopyParagraphButton.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { useEffect, useState, MouseEvent } from 'react';
+import { useEffect, useState, MouseEvent } from 'react';
 
 import styled from '@emotion/styled';
 import { Link } from '@ndla/icons/common';

package/src/CopyParagraphButton/initCopyParagraphButtons.tsx

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import React from 'react';
 import ReactDOM from 'react-dom';
 import CopyParagraphButton from './CopyParagraphButton';
 
@@ -20,6 +19,7 @@ const initCopyParagraphButtons = () => {
   forEachElement('[data-header-copy-container]', (el: HTMLElement) => {
     const title = el.getAttribute('data-title');
 
+    // eslint-disable-next-line react/no-deprecated
     ReactDOM.hydrate(<CopyParagraphButton title={title} content={title} hydrate />, el);
   });
 };

package/src/CreatedBy/CreatedBy.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import styled from '@emotion/styled';
 import { colors, fonts } from '@ndla/core';
 import SafeLink from '@ndla/safelink';

package/src/Dialog/Dialog.tsx

@@ -9,7 +9,7 @@
 // N.B These component is used to render static markup serverside
 // Any interactivty is added by scripts located in the ndla-article-scripts package
 
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import BEMHelper from 'react-bem-helper';
 import { createUniversalPortal } from '../utils/createUniversalPortal';
 

package/src/Embed/AudioEmbed.stories.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { AudioEmbedData, AudioMeta } from '@ndla/types-embed';
 import AudioEmbed from './AudioEmbed';
@@ -120,15 +119,15 @@ const podcastSuccessData: AudioMeta = {
   updated: '2022-03-26T07:49:09Z',
   imageMeta: {
     id: '60913',
-    metaUrl: 'https://api.test.ndla.no/image-api/v2/images/60913',
-    title: { title: 'Podkastserie: Lytt deg gjennom mediefaget (samme på bm og nn)', language: 'nb' },
+    metaUrl: 'https://api.test.ndla.no/image-api/v3/images/60913',
+    title: {
+      title: 'Podkastserie: Lytt deg gjennom mediefaget (samme på bm og nn)',
+      language: 'nb',
+    },
     alttext: {
       alttext: 'Foto av smilende jente som kikker oppover mot teksten "Lytt deg gjennom mediefaget". ',
       language: 'nb',
     },
-    imageUrl: 'https://api.test.ndla.no/image-api/raw/NkEZw98N.jpg',
-    size: 525903,
-    contentType: 'image/jpeg',
     copyright: {
       license: {
         license: 'CC-BY-SA-4.0',
@@ -136,20 +135,43 @@ const podcastSuccessData: AudioMeta = {
         url: 'https://creativecommons.org/licenses/by-sa/4.0/',
       },
       origin: '',
-      creators: [{ type: 'photographer', name: 'Tom Knudsen' }],
-      processors: [{ type: 'processor', name: 'Thomas Nupen' }],
+      creators: [
+        {
+          type: 'photographer',
+          name: 'Tom Knudsen',
+        },
+      ],
+      processors: [
+        {
+          type: 'processor',
+          name: 'Thomas Nupen',
+        },
+      ],
       rightsholders: [],
     },
     tags: {
       tags: ['lytt gjennom mediefaget', 'podcastserie', 'podcast', 'mediefaget', 'medier', 'podkastserie', 'podkast'],
       language: 'nb',
     },
-    caption: { caption: ' ', language: 'nb' },
+    caption: {
+      caption: ' ',
+      language: 'nb',
+    },
     supportedLanguages: ['nb', 'nn'],
     created: '2021-12-15T13:32:03Z',
     createdBy: 'lwkLpeEV_VUmCkly1SJ3WTkg',
     modelRelease: 'yes',
-    imageDimensions: { width: 1405, height: 1405 },
+    image: {
+      fileName: 'NkEZw98N.jpg',
+      size: 525903,
+      contentType: 'image/jpeg',
+      imageUrl: 'https://api.test.ndla.no/image-api/raw/NkEZw98N.jpg',
+      dimensions: {
+        width: 1405,
+        height: 1405,
+      },
+      language: 'nb',
+    },
   },
 };
 

package/src/Embed/BrightcoveEmbed.stories.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { BrightcoveData, BrightcoveEmbedData, BrightcoveMetaData, EmbedMetaData } from '@ndla/types-embed';
 import BrightcoveEmbed from './BrightcoveEmbed';

package/src/Embed/ConceptEmbed.stories.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { ConceptData, ConceptEmbedData } from '@ndla/types-embed';
 import ConceptEmbed from './ConceptEmbed';
@@ -84,15 +83,15 @@ const visualElementData: ConceptData['visualElement'] = {
   },
   data: {
     id: '52863',
-    metaUrl: 'https://api.test.ndla.no/image-api/v2/images/52863',
-    title: { title: 'Skin - formasjonsskade', language: 'nb' },
+    metaUrl: 'https://api.test.ndla.no/image-api/v3/images/52863',
+    title: {
+      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',
     },
-    imageUrl: 'https://api.test.ndla.no/image-api/raw/6WbfcOmr.png',
-    size: 194971,
-    contentType: 'image/png',
     copyright: {
       license: {
         license: 'CC-BY-SA-4.0',
@@ -100,17 +99,38 @@ const visualElementData: ConceptData['visualElement'] = {
         url: 'https://creativecommons.org/licenses/by-sa/4.0/',
       },
       origin: '',
-      creators: [{ type: 'Illustrator', name: 'Sissel Paaske' }],
+      creators: [
+        {
+          type: 'Illustrator',
+          name: 'Sissel Paaske',
+        },
+      ],
       processors: [],
       rightsholders: [],
     },
-    tags: { tags: ['skin', 'formasjonsskade', 'nærbrønn', 'permeabilitet'], language: 'nb' },
-    caption: { caption: 'Formasjonsskade i nærbrønnområdet kalles "skin". Illustrasjon.', language: 'nb' },
+    tags: {
+      tags: ['skin', 'formasjonsskade', 'nærbrønn', 'permeabilitet'],
+      language: 'nb',
+    },
+    caption: {
+      caption: 'Formasjonsskade i nærbrønnområdet kalles "skin". Illustrasjon.',
+      language: 'nb',
+    },
     supportedLanguages: ['nb'],
     created: '2020-10-26T15:02:47Z',
     createdBy: 'KBAJskRqPXZUv9LFjAbz8btB',
     modelRelease: 'not-set',
-    imageDimensions: { width: 429, height: 565 },
+    image: {
+      fileName: '6WbfcOmr.png',
+      size: 194971,
+      contentType: 'image/png',
+      imageUrl: 'https://api.test.ndla.no/image-api/raw/6WbfcOmr.png',
+      dimensions: {
+        width: 429,
+        height: 565,
+      },
+      language: 'nb',
+    },
   },
 };
 

package/src/Embed/ExternalEmbed.stories.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { H5pEmbedData, H5pData, OembedEmbedData, OembedData } from '@ndla/types-embed';
 import ExternalEmbed from './ExternalEmbed';

package/src/Embed/H5pEmbed.stories.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { H5pEmbedData, H5pData } from '@ndla/types-embed';
 import H5pEmbed from './H5pEmbed';

package/src/Embed/H5pEmbed.tsx

@@ -8,7 +8,6 @@
 
 import styled from '@emotion/styled';
 import { H5pMetaData } from '@ndla/types-embed';
-import React from 'react';
 import EmbedErrorPlaceholder from './EmbedErrorPlaceholder';
 
 interface Props {

package/src/Embed/IframeEmbed.stories.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { IframeData, IframeEmbedData } from '@ndla/types-embed';
 import IframeEmbed from './IframeEmbed';
@@ -78,14 +77,20 @@ const opensInNewEmbedData: IframeEmbedData = {
 const opensInnewMetaData: IframeData = {
   iframeImage: {
     id: '65086',
-    metaUrl: 'https://api.test.ndla.no/image-api/v2/images/65086',
-    title: { title: '\nSamtale ', language: 'nb' },
-    alttext: { alttext: ' To ungdommer sitter og snakker. Foto. ', language: 'nb' },
-    imageUrl: 'https://api.test.ndla.no/image-api/raw/IgOjO6og.jpg',
-    size: 176667,
-    contentType: 'image/jpeg',
+    metaUrl: 'https://api.test.ndla.no/image-api/v3/images/65086',
+    title: {
+      title: '\nSamtale ',
+      language: 'nb',
+    },
+    alttext: {
+      alttext: ' To ungdommer sitter og snakker. Foto. ',
+      language: 'nb',
+    },
     copyright: {
-      license: { license: 'COPYRIGHTED', description: 'Copyrighted' },
+      license: {
+        license: 'COPYRIGHTED',
+        description: 'Copyrighted',
+      },
       origin: '',
       creators: [],
       processors: [],
@@ -96,13 +101,29 @@ const opensInnewMetaData: IframeData = {
         },
       ],
     },
-    tags: { tags: ['samtale', 'Dialog', 'gutter'], language: 'nb' },
-    caption: { caption: 'Dette bildet skal bare brukes i casen "Livet på sosiale medier". ', language: 'nb' },
+    tags: {
+      tags: ['samtale', 'Dialog', 'gutter'],
+      language: 'nb',
+    },
+    caption: {
+      caption: 'Dette bildet skal bare brukes i casen "Livet på sosiale medier". ',
+      language: 'nb',
+    },
     supportedLanguages: ['nb'],
     created: '2022-12-02T14:24:19Z',
     createdBy: 'oltQx44eGQp0DwkiR1NRo5qE',
     modelRelease: 'yes',
-    imageDimensions: { width: 1920, height: 804 },
+    image: {
+      fileName: 'IgOjO6og.jpg',
+      size: 176667,
+      contentType: 'image/jpeg',
+      imageUrl: 'https://api.test.ndla.no/image-api/raw/IgOjO6og.jpg',
+      dimensions: {
+        width: 1920,
+        height: 804,
+      },
+      language: 'nb',
+    },
   },
 };
 

package/src/Embed/ImageEmbed.stories.tsx

@@ -6,10 +6,9 @@
  *
  */
 
-import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { ImageEmbedData } from '@ndla/types-embed';
-import { IImageMetaInformationV2 } from '@ndla/types-backend/build/image-api';
+import { IImageMetaInformationV3 } from '@ndla/types-backend/build/image-api';
 import ImageEmbed from './ImageEmbed';
 import { defaultParameters } from '../../../../stories/defaults';
 import StoryFavoriteButton from '../../../../stories/StoryFavoriteButton';
@@ -24,17 +23,17 @@ const embedData: ImageEmbedData = {
   url: 'https://api.test.ndla.no/image-api/v2/images/61181',
 };
 
-const metaData: IImageMetaInformationV2 = {
+const metaData: IImageMetaInformationV3 = {
   id: '61181',
-  metaUrl: 'https://api.test.ndla.no/image-api/v2/images/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',
   },
-  alttext: { alttext: 'Tenåringsjente med lyse fletter slenger på håret. Foto. ', language: 'nb' },
-  imageUrl: 'https://api.test.ndla.no/image-api/raw/S81WiNgl.jpg',
-  size: 1685455,
-  contentType: 'image/jpeg',
+  alttext: {
+    alttext: 'Tenåringsjente med lyse fletter slenger på håret. Foto. ',
+    language: 'nb',
+  },
   copyright: {
     license: {
       license: 'CC-BY-NC-4.0',
@@ -42,17 +41,43 @@ const metaData: IImageMetaInformationV2 = {
       url: 'https://creativecommons.org/licenses/by-nc/4.0/',
     },
     origin: 'https://bilder.ntb.no/r/preview/creative/EXuziiZGWno',
-    creators: [{ type: 'photographer', name: 'Maskot' }],
+    creators: [
+      {
+        type: 'photographer',
+        name: 'Maskot',
+      },
+    ],
     processors: [],
-    rightsholders: [{ type: 'rightsholder', name: 'NTB' }],
+    rightsholders: [
+      {
+        type: 'rightsholder',
+        name: 'NTB',
+      },
+    ],
+  },
+  tags: {
+    tags: ['danser', 'kultur', 'identitet'],
+    language: 'nb',
+  },
+  caption: {
+    caption: 'Modellklarert.',
+    language: 'nb',
   },
-  tags: { tags: ['danser', 'kultur', 'identitet'], language: 'nb' },
-  caption: { caption: 'Modellklarert.', language: 'nb' },
   supportedLanguages: ['nb'],
   created: '2022-01-07T08:26:01Z',
   createdBy: 'lA2KgVfhY-fpmgHCYAy5W1DX',
   modelRelease: 'yes',
-  imageDimensions: { width: 2000, height: 1333 },
+  image: {
+    fileName: 'S81WiNgl.jpg',
+    size: 1685455,
+    contentType: 'image/jpeg',
+    imageUrl: 'https://api.test.ndla.no/image-api/raw/S81WiNgl.jpg',
+    dimensions: {
+      width: 2000,
+      height: 1333,
+    },
+    language: 'nb',
+  },
 };
 
 const meta: Meta<typeof ImageEmbed> = {

package/src/Embed/ImageEmbed.tsx

@@ -140,7 +140,7 @@ const ImageEmbed = ({ embed, previewAlt, heartButton: HeartButton, inGrid }: Pro
           sizes={imageSizes ?? sizes}
           alt={altText}
           src={data.image.imageUrl}
-          inGrid={inGrid}
+          border={embedData.border}
           expandButton={
             <ExpandButton
               size={embedData.size}

package/src/ErrorMessage/ErrorMessage.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { colors, spacing, breakpoints } from '@ndla/core';
 import SafeLink from '@ndla/safelink';

package/src/ErrorMessage/ErrorResourceAccessDenied.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { spacing } from '@ndla/core';

package/src/FactBox/FactBox.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode, MouseEvent } from 'react';
+import { ReactNode, MouseEvent } from 'react';
 import BEMHelper from 'react-bem-helper';
 import { ButtonV2 } from '@ndla/button';
 import { useTranslation } from 'react-i18next';

package/src/FactBox/FactBoxV2.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode, useState } from 'react';
+import { ReactNode, useState } from 'react';
 import BEMHelper from 'react-bem-helper';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';

package/src/Figure/Figure.tsx

@@ -9,7 +9,7 @@
 // N.B These components is used to render static markup serverside
 // Any interactivty is added by scripts located in the ndla-article-scripts package
 
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import BEMHelper from 'react-bem-helper';
 import { isFunction as isFunctionHelper, parseMarkdown } from '@ndla/util';
 import { Link as LinkIcon } from '@ndla/icons/common';

package/src/Figure/FigureBylineExpandButton.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import { ChevronUp, ChevronDown } from '@ndla/icons/common';
 
 interface Props {

package/src/Figure/FigureExpandButton.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import { ArrowCollapse } from '@ndla/icons/common';
 import { ExpandTwoArrows } from '@ndla/icons/action';
 

package/src/Figure/FigureLicense.tsx

@@ -9,7 +9,7 @@
 // N.B This component is used to render static markup serverside
 // Any interactivty is added by scripts located in the ndla-article-scripts package
 
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import BEMHelper from 'react-bem-helper';
 import { uuid } from '@ndla/util';
 import { LicenseDescription } from '@ndla/notion';

package/src/Figure/FigureLicenseDialog.tsx

@@ -9,7 +9,7 @@
 // N.B This component is used to render static markup serverside
 // Any interactivty is added by scripts located in the ndla-article-scripts package
 
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import Dialog from '../Dialog';
 import { classLicenses, FigureLicenseByline, FigureLicenseCta } from './FigureLicense';
 import { FigureLicense } from './Figure';

package/src/Figure/FigureOpenDialogButton.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import { Play } from '@ndla/icons/common';
 import { ExpandTwoArrows, CursorClick } from '@ndla/icons/action';
 

package/src/FileList/File.tsx

@@ -3,7 +3,6 @@ import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import { Download } from '@ndla/icons/common';
 import SafeLink from '@ndla/safelink';
 import Tooltip from '@ndla/tooltip';
-import React from 'react';
 import { FileFormat, FileType } from './FileList';
 
 const LinkTextWrapper = styled.div`

package/src/FileList/FileList.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { colors, fonts, spacing } from '@ndla/core';
 import File from './File';