@ndla/ui 43.0.2 → 44.0.0

package/src/Article/ArticleByline.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode, useCallback, useEffect, useState } from 'react';
+import { ReactNode, useCallback, useEffect, useState } from 'react';
 import styled from '@emotion/styled';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import { useTranslation } from 'react-i18next';

package/src/Article/ArticleFootNotes.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import styled from '@emotion/styled';
 import { colors, spacing } from '@ndla/core';
 import { FootNote as FootNoteType } from '../types';

package/src/Article/ArticleHeaderWrapper.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode, useEffect } from 'react';
+import { ReactNode, useEffect } from 'react';
 import BEMHelper from 'react-bem-helper';
 import { isMobile } from 'react-device-detect';
 

package/src/Article/ArticleNotions.tsx

@@ -6,14 +6,12 @@
  *
  */
 
-import React from 'react';
+import { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { useTranslation } from 'react-i18next';
 import { ModalHeader, ModalCloseButton, ModalBody, Modal, ModalTitle, ModalTrigger, ModalContent } from '@ndla/modal';
 import { mq, breakpoints, fonts, colors } from '@ndla/core';
 import { Explanation, NotionFlip } from '@ndla/icons/common';
-import { ConceptNotion } from '../Notion';
-import { ConceptNotionType } from '../Notion/ConceptNotion';
 
 const ArticleNotionsContainer = styled.div`
   margin-bottom: 26px;
@@ -82,14 +80,6 @@ const NotionsTrigger = styled.div`
 const ModalHeadingContainer = styled.div`
   display: flex;
   align-items: center;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  margin-bottom: 2rem;
-
-  ${mq.range({ from: breakpoints.tablet })} {
-    padding-left: 3.5rem;
-    padding-right: 3.5rem;
-  }
 
   svg {
     display: block;
@@ -104,65 +94,20 @@ const ModalHeadingContainer = styled.div`
       margin: 0 1.5rem 0 -0.5rem;
     }
   }
-
-  h1 {
-    margin: 0;
-  }
-`;
-
-const NotionsContainer = styled.div`
-  padding: 0 20px;
-
-  ${mq.range({ from: breakpoints.tablet })} {
-    padding: 0 3.5rem;
-  }
 `;
 
-const RelatedContentContainer = styled.ul`
+const StyledModalHeader = styled(ModalHeader)`
   display: flex;
-  flex-wrap: wrap;
-  list-style: none;
-  margin: 0 0 2rem;
-  padding: 0 20px;
-
-  ${mq.range({ from: breakpoints.tablet })} {
-    padding: 0 3.5rem;
-  }
-
-  &:not(:last-child) {
-    margin-bottom: 1.5rem;
-  }
-
-  > li {
-    width: 100%;
-
-    &:not(:nth-child(2n)) {
-      margin-right: 0;
-    }
-
-    ${mq.range({ from: breakpoints.tablet })} {
-      width: calc(100% * (1 / 3));
-
-      &:not(:nth-child(2n)) {
-        margin-right: 0.5rem;
-      }
-    }
-  }
+  justify-content: space-between;
+  align-items: center;
 `;
 
-export type NotionRelatedContent = {
-  url: string;
-  label: string;
-};
-
 type ArticleNotionsProps = {
-  notions: ConceptNotionType[];
-  relatedContent?: NotionRelatedContent[];
+  children?: ReactNode;
   buttonOffsetRight: number;
-  type?: 'image' | 'video' | 'h5p' | 'iframe' | 'external';
 };
 
-export const ArticleNotions = ({ notions, relatedContent = [], buttonOffsetRight, type }: ArticleNotionsProps) => {
+export const ArticleNotions = ({ buttonOffsetRight, children }: ArticleNotionsProps) => {
   const { t } = useTranslation();
   const leftOffset = `${buttonOffsetRight - 32}px`;
 
@@ -177,29 +122,14 @@ export const ArticleNotions = ({ notions, relatedContent = [], buttonOffsetRight
           </NotionsTrigger>
         </ModalTrigger>
         <ModalContent size="large">
-          <ModalHeader className="no-padding">
+          <StyledModalHeader>
             <ModalHeadingContainer>
               <Explanation />
               <ModalTitle>{t('article.notionsPrompt')}</ModalTitle>
             </ModalHeadingContainer>
             <ModalCloseButton />
-          </ModalHeader>
-          <ModalBody modifier="notions-modal-body no-padding">
-            <NotionsContainer>
-              {notions.map((notion) => (
-                <ConceptNotion key={notion.id} concept={notion} type={type} />
-              ))}
-            </NotionsContainer>
-            {relatedContent.length > 0 && (
-              <RelatedContentContainer>
-                {relatedContent.map((content, i) => (
-                  <li key={`notion-related-item-${i + 1}`}>
-                    <a href={content.url}>{content.label}</a>
-                  </li>
-                ))}
-              </RelatedContentContainer>
-            )}
-          </ModalBody>
+          </StyledModalHeader>
+          <ModalBody modifier="notions-modal-body no-padding">{children}</ModalBody>
         </ModalContent>
       </Modal>
     </ArticleNotionsContainer>

package/src/Article/index.ts

@@ -8,17 +8,8 @@
 
 import Article, { ArticleTitle, ArticleIntroduction, ArticleWrapper } from './Article';
 import ArticleByline from './ArticleByline';
-import ArticleContent from './ArticleContent';
 import ArticleFootNotes from './ArticleFootNotes';
 import ArticleHeaderWrapper from './ArticleHeaderWrapper';
 
-export {
-  ArticleByline,
-  ArticleContent,
-  ArticleFootNotes,
-  ArticleHeaderWrapper,
-  ArticleTitle,
-  ArticleIntroduction,
-  ArticleWrapper,
-};
+export { ArticleByline, ArticleFootNotes, ArticleHeaderWrapper, ArticleTitle, ArticleIntroduction, ArticleWrapper };
 export default Article;

package/src/Aside/Aside.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import BEMHelper from 'react-bem-helper';
 
 const classes = BEMHelper({

package/src/AudioPlayer/AudioPlayer.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode, useMemo, useState } from 'react';
+import { ReactNode, useMemo, useState } from 'react';
 import styled from '@emotion/styled';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import { ButtonV2 } from '@ndla/button';

package/src/AudioPlayer/Controls.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import styled from '@emotion/styled';
 import { Root as SliderRoot, Track, Range, SliderThumb } from '@radix-ui/react-slider';
 import { Root as PopoverRoot, PopoverContent, PopoverTrigger, PopoverPortal } from '@radix-ui/react-popover';

package/src/AudioPlayer/SpeechControl.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { VolumeUp } from '@ndla/icons/common';
 import Tooltip from '@ndla/tooltip';

package/src/AudioPlayer/initAudioPlayers.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import React from 'react';
+
 import ReactDOM from 'react-dom';
 import shave from 'shave';
 import Controls from './Controls';
@@ -32,8 +32,10 @@ const initAudioPlayers = (locale: Locale) => {
     const speech = el.getAttribute('data-speech');
     if (src && title) {
       if (speech) {
+        // eslint-disable-next-line react/no-deprecated
         ReactDOM.hydrate(<SpeechControl src={src} title={title} />, el);
       } else {
+        // eslint-disable-next-line react/no-deprecated
         ReactDOM.hydrate(<Controls src={src} title={title} />, el);
       }
     }

package/src/BannerCard/BannerCard.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import React from 'react';
+
 import { colors, fonts, breakpoints, mq } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
 import styled from '@emotion/styled';

package/src/BlogPost/BlogPost.stories.tsx

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

package/src/BlogPosts/BlogPost.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import styled from '@emotion/styled';
 import { spacing, colors, fonts, breakpoints, mq, misc, spacingUnit } from '@ndla/core';
 import { getLicenseByAbbreviation } from '@ndla/licenses';

package/src/BlogPosts/BlogPostWrapper.tsx

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

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 {