@ndla/ui 29.0.0 → 30.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "29.0.0",
+  "version": "30.0.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -32,19 +32,19 @@
   ],
   "dependencies": {
     "@ndla/article-scripts": "^3.0.2",
-    "@ndla/button": "^3.7.0",
-    "@ndla/carousel": "^1.2.24",
-    "@ndla/core": "^2.3.6",
-    "@ndla/forms": "^3.3.6",
+    "@ndla/button": "^4.0.0",
+    "@ndla/carousel": "^2.0.0",
+    "@ndla/core": "^3.0.0",
+    "@ndla/forms": "^4.0.0",
     "@ndla/hooks": "^1.1.6",
-    "@ndla/icons": "^1.14.0",
-    "@ndla/licenses": "^5.0.18",
-    "@ndla/modal": "^1.6.1",
-    "@ndla/notion": "^3.1.48",
-    "@ndla/safelink": "^2.2.20",
-    "@ndla/switch": "^0.1.14",
-    "@ndla/tabs": "^1.1.23",
-    "@ndla/tooltip": "^2.2.2",
+    "@ndla/icons": "^2.0.0",
+    "@ndla/licenses": "^6.0.0",
+    "@ndla/modal": "^2.0.0",
+    "@ndla/notion": "^4.0.0",
+    "@ndla/safelink": "^3.0.0",
+    "@ndla/switch": "^1.0.0",
+    "@ndla/tabs": "^2.0.0",
+    "@ndla/tooltip": "^3.0.0",
     "@ndla/types-learningpath-api": "^0.0.13",
     "@ndla/util": "^3.1.0",
     "@reach/menu-button": "^0.16.2",
@@ -65,12 +65,12 @@
     "shave": "^2.5.10"
   },
   "peerDependencies": {
-    "@emotion/core": "^10.0.9",
-    "@emotion/styled": "^10.0.9",
-    "i18next": "^20.3.1",
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
+    "i18next": "^21.9.2",
     "prop-types": "^15.8.1",
     "react": "^16.8.4 || ^17.0.0",
-    "react-i18next": "^11.11.0",
+    "react-i18next": "^11.18.6",
     "react-router-dom": "^6.3.0"
   },
   "devDependencies": {
@@ -86,5 +86,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2c5d6b7038c442a871b4cd69247d243cadd129da"
+  "gitHead": "7f4578ae15653f2f6a1efde17d24991e77f026bc"
 }

package/src/Breadcrumb/BreadcrumbItem.tsx

@@ -11,7 +11,7 @@ import { ChevronRight } from '@ndla/icons/common';
 import SafeLink from '@ndla/safelink';
 import styled from '@emotion/styled';
 import { mq, spacing, breakpoints } from '@ndla/core';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 
 export interface SimpleBreadcrumbItem {
   to: string | Partial<Location>;

package/src/ComponentCursor/ComponentCursor.tsx

@@ -1,6 +1,6 @@
 import React, { MutableRefObject, useRef, useState } from 'react';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { useComponentSize } from '@ndla/hooks';
 import { breakpoints, mq } from '@ndla/core';
 

package/src/CopyParagraphButton/CopyParagraphButton.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode, useEffect, useState, MouseEvent } from 'react';
+import React, { useEffect, useState, MouseEvent } from 'react';
 
 import styled from '@emotion/styled';
 import { Link } from '@ndla/icons/common';
@@ -44,20 +44,23 @@ interface Props {
   hydrate?: boolean;
 }
 
-interface WrapperProps {
+interface CopyButtonProps {
   title: string;
-  hydrate?: boolean;
-  children: ReactNode;
+  onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+  tooltip: string;
+  content?: string | null;
 }
 
-const WrapperComponent = ({ title, hydrate, children }: WrapperProps) => {
-  if (hydrate) {
-    return <>{children}</>;
-  }
+const CopyButton = ({ onClick, title, tooltip, content }: CopyButtonProps) => {
   return (
-    <ContainerDiv data-header-copy-container data-title={title}>
-      {children}
-    </ContainerDiv>
+    <>
+      <IconButton onClick={onClick} data-title={title}>
+        <Tooltip tooltip={tooltip}>
+          <Link title={''} />
+        </Tooltip>
+      </IconButton>
+      <h2 id={title} tabIndex={0} dangerouslySetInnerHTML={{ __html: content || '' }} />
+    </>
   );
 };
 
@@ -86,15 +89,14 @@ const CopyParagraphButton = ({ title, content, hydrate }: Props) => {
   const sanitizedTitle = encodeURIComponent(title.replace(/ /g, '-'));
   const tooltip = hasCopied ? t('article.copyPageLinkCopied') : t('article.copyHeaderLink');
 
+  if (hydrate) {
+    return <CopyButton onClick={onCopyClick} title={sanitizedTitle} tooltip={tooltip} content={content} />;
+  }
+
   return (
-    <WrapperComponent hydrate={hydrate} title={title}>
-      <IconButton onClick={onCopyClick} data-title={sanitizedTitle}>
-        <Tooltip tooltip={tooltip}>
-          <Link title={''} />
-        </Tooltip>
-      </IconButton>
-      <h2 id={sanitizedTitle} tabIndex={0} dangerouslySetInnerHTML={{ __html: content || '' }}></h2>
-    </WrapperComponent>
+    <ContainerDiv data-header-copy-container data-title={title}>
+      <CopyButton onClick={onCopyClick} title={sanitizedTitle} tooltip={tooltip} content={content} />
+    </ContainerDiv>
   );
 };
 

package/src/Filter/FilterCarousel.tsx

@@ -9,7 +9,7 @@
 import React, { ReactChild, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { ChevronLeft, ChevronRight } from '@ndla/icons/common';
 import { useSwipeable } from 'react-swipeable';
 

package/src/Frontpage/FrontpageFilm.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import SafeLink from '@ndla/safelink';
 import { Forward } from '@ndla/icons/common';
 import { withTranslation, WithTranslation } from 'react-i18next';

package/src/Frontpage/illustrations/FrontpageSubjectIllustration.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 
 const cssStyle = css`
   position: relative;

package/src/Image/LazyLoadImage.tsx

@@ -22,7 +22,6 @@ const LazyLoadImage = ({ alt, src, srcSet, lazyLoadSrc, sizes, ...rest }: Props)
     <noscript key="noscript">
       <img alt={alt} src={`${src}`} srcSet={srcSet} sizes={sizes} {...rest} />
     </noscript>
-    ,
     <img
       alt={alt}
       key="img"

package/src/Image/__tests__/Image-test.jsx

@@ -9,25 +9,26 @@
 /* eslint-env jest */
 
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import Image, { makeSrcQueryString } from '../Image';
 
 test('Image renderers correctly', () => {
-  const component = renderer.create(<Image alt="example" src="https://example.com/image.png" />);
+  const { container } = render(<Image alt="example" src="https://example.com/image.png" />, { container: null });
 
-  expect(component.toJSON()).toMatchSnapshot();
+  expect(container.firstChild).toMatchSnapshot();
 });
 
 test('Lazyloaded image renderers correctly', () => {
-  const component = renderer.create(
+  const { container } = render(
     <Image lazyLoad lazyLoadSrc="https://example.com/blurry.png" alt="example" src="https://example.com/image.png" />,
   );
 
-  expect(component.toJSON()).toMatchSnapshot();
+  expect(container.firstChild).toMatchSnapshot();
 });
 
 test('Image with crop and focalpoint props renderers correctly', () => {
-  const component = renderer.create(
+  const { container } = render(
     <Image
       crop={{
         startX: 14.59,
@@ -44,7 +45,7 @@ test('Image with crop and focalpoint props renderers correctly', () => {
     />,
   );
 
-  expect(component.toJSON()).toMatchSnapshot();
+  expect(container.firstChild).toMatchSnapshot();
 });
 
 test('makeSrcQueryString renders correctly', () => {

package/src/Image/__tests__/__snapshots__/Image-test.jsx.snap

@@ -6,12 +6,12 @@ exports[`Image renderers correctly 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 >
   <picture>
     <source
       sizes="(min-width: 1024px) 1024px, 100vw"
-      srcSet="https://example.com/image.png?width=2720 2720w, https://example.com/image.png?width=2080 2080w, https://example.com/image.png?width=1760 1760w, https://example.com/image.png?width=1440 1440w, https://example.com/image.png?width=1120 1120w, https://example.com/image.png?width=1000 1000w, https://example.com/image.png?width=960 960w, https://example.com/image.png?width=800 800w, https://example.com/image.png?width=640 640w, https://example.com/image.png?width=480 480w, https://example.com/image.png?width=320 320w, https://example.com/image.png?width=240 240w, https://example.com/image.png?width=180 180w"
+      srcset="https://example.com/image.png?width=2720 2720w, https://example.com/image.png?width=2080 2080w, https://example.com/image.png?width=1760 1760w, https://example.com/image.png?width=1440 1440w, https://example.com/image.png?width=1120 1120w, https://example.com/image.png?width=1000 1000w, https://example.com/image.png?width=960 960w, https://example.com/image.png?width=800 800w, https://example.com/image.png?width=640 640w, https://example.com/image.png?width=480 480w, https://example.com/image.png?width=320 320w, https://example.com/image.png?width=240 240w, https://example.com/image.png?width=180 180w"
     />
     <img
       alt="example"
@@ -27,12 +27,12 @@ exports[`Image with crop and focalpoint props renderers correctly 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 >
   <picture>
     <source
       sizes="(min-width: 1024px) 1024px, 100vw"
-      srcSet="https://example.com/image.png?width=2720&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 2720w, https://example.com/image.png?width=2080&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 2080w, https://example.com/image.png?width=1760&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 1760w, https://example.com/image.png?width=1440&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 1440w, https://example.com/image.png?width=1120&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 1120w, https://example.com/image.png?width=1000&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 1000w, https://example.com/image.png?width=960&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 960w, https://example.com/image.png?width=800&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 800w, https://example.com/image.png?width=640&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 640w, https://example.com/image.png?width=480&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 480w, https://example.com/image.png?width=320&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 320w, https://example.com/image.png?width=240&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 240w, https://example.com/image.png?width=180&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 180w"
+      srcset="https://example.com/image.png?width=2720&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 2720w, https://example.com/image.png?width=2080&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 2080w, https://example.com/image.png?width=1760&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 1760w, https://example.com/image.png?width=1440&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 1440w, https://example.com/image.png?width=1120&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 1120w, https://example.com/image.png?width=1000&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 1000w, https://example.com/image.png?width=960&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 960w, https://example.com/image.png?width=800&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 800w, https://example.com/image.png?width=640&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 640w, https://example.com/image.png?width=480&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 480w, https://example.com/image.png?width=320&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 320w, https://example.com/image.png?width=240&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 240w, https://example.com/image.png?width=180&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 180w"
     />
     <img
       alt="example"
@@ -48,29 +48,17 @@ exports[`Lazyloaded image renderers correctly 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 >
-  <noscript>
-    <img
-      alt="example"
-      sizes="(min-width: 1024px) 1024px, 100vw"
-      src="https://example.com/image.png?width=1024"
-      srcSet="https://example.com/image.png?width=2720 2720w, https://example.com/image.png?width=2080 2080w, https://example.com/image.png?width=1760 1760w, https://example.com/image.png?width=1440 1440w, https://example.com/image.png?width=1120 1120w, https://example.com/image.png?width=1000 1000w, https://example.com/image.png?width=960 960w, https://example.com/image.png?width=800 800w, https://example.com/image.png?width=640 640w, https://example.com/image.png?width=480 480w, https://example.com/image.png?width=320 320w, https://example.com/image.png?width=240 240w, https://example.com/image.png?width=180 180w"
-    />
-  </noscript>
-  ,
+  <noscript />
   <img
     alt="example"
-    className="lazyload"
+    class="lazyload"
     data-sizes="(min-width: 1024px) 1024px, 100vw"
     data-src="https://example.com/image.png?width=1024"
     data-src-set="https://example.com/image.png?width=2720 2720w, https://example.com/image.png?width=2080 2080w, https://example.com/image.png?width=1760 1760w, https://example.com/image.png?width=1440 1440w, https://example.com/image.png?width=1120 1120w, https://example.com/image.png?width=1000 1000w, https://example.com/image.png?width=960 960w, https://example.com/image.png?width=800 800w, https://example.com/image.png?width=640 640w, https://example.com/image.png?width=480 480w, https://example.com/image.png?width=320 320w, https://example.com/image.png?width=240 240w, https://example.com/image.png?width=180 180w"
     src="https://example.com/blurry.png"
-    style={
-      Object {
-        "width": "100%",
-      }
-    }
+    style="width: 100%;"
   />
 </div>
 `;

package/src/InfoWidget/InfoWidget.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import React, { ReactNode } from 'react';
 import { Forward } from '@ndla/icons/common';
 import SafeLink from '@ndla/safelink';

package/src/LanguageSelector/LanguageSelector.tsx

@@ -8,7 +8,7 @@
 
 import React, { useState } from 'react';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import FocusTrapReact from 'focus-trap-react';
 import { ButtonV2 as Button } from '@ndla/button';
 import { spacing, misc, colors, mq, breakpoints, animations, fonts, spacingUnit } from '@ndla/core';

package/src/LearningPaths/LearningPathLastStepNavigation.tsx

@@ -8,7 +8,7 @@
 
 import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import SafeLink from '@ndla/safelink';
 import { withTranslation, WithTranslation } from 'react-i18next';
 import { fonts, spacing, spacingUnit } from '@ndla/core';

package/src/LearningPaths/LearningPathMenu.tsx

@@ -8,7 +8,7 @@
 
 import React, { useState } from 'react';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { useTranslation } from 'react-i18next';
 import Tooltip from '@ndla/tooltip';
 import { useWindowSize } from '@ndla/hooks';

package/src/LearningPaths/LearningPathMenuAside.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { Time } from '@ndla/icons/common';
 import { SafeLinkButton } from '@ndla/safelink';
 import { WithTranslation, withTranslation } from 'react-i18next';

package/src/LearningPaths/LearningPathMenuContent.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { colors, spacing, spacingUnit, fonts, mq, breakpoints, animations } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
 import { LearningPathRead } from '@ndla/icons/contentType';

package/src/LearningPaths/LearningPathMenuIntro.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { useTranslation } from 'react-i18next';
 import { colors, spacing, spacingUnit, fonts, typography, mq, breakpoints, animations } from '@ndla/core';
 import { ArticleFavoritesButton } from '../Article';

package/src/LearningPaths/LearningPathMenuModalWrapper.tsx

@@ -9,7 +9,7 @@
 import React, { ReactChild, ReactChildren, ReactNode } from 'react';
 import { spacing, mq, breakpoints } from '@ndla/core';
 import Modal, { ModalHeader, ModalBody, ModalCloseButton } from '@ndla/modal';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import Button from '@ndla/button';
 import { LearningPath } from '@ndla/icons/contentType';
 import { useTranslation } from 'react-i18next';

package/src/LearningPaths/LearningPathSticky.tsx

@@ -9,7 +9,7 @@
 import React, { ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { colors, spacing, animations, mq, breakpoints } from '@ndla/core';
 import { Back, Forward } from '@ndla/icons/common';
 import SafeLink from '@ndla/safelink';

package/src/LearningPaths/LearningPathWrapper.tsx

@@ -8,7 +8,7 @@
 
 import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { spacing, spacingUnit, breakpoints, mq } from '@ndla/core';
 
 type PropStyledWrapper = {

package/src/Masthead/Masthead.tsx

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

package/src/Masthead/MastheadSearchModal.tsx

@@ -4,7 +4,7 @@ import { IconButtonV2 as IconButton } from '@ndla/button';
 import { Cross } from '@ndla/icons/action';
 import { isFunction } from '@ndla/util';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { spacing, mq, breakpoints, colors, shadows } from '@ndla/core';
 import { WithTranslation, withTranslation } from 'react-i18next';
 import ToggleSearchButton from '../Search/ToggleSearchButton';

package/src/Messages/MessageBox.tsx

@@ -15,7 +15,7 @@ import { WithTranslation, withTranslation } from 'react-i18next';
 // @ts-ignore
 import { Remarkable } from 'remarkable';
 import { CloseButton } from '@ndla/button';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 
 const markdown = new Remarkable({ breaks: true });
 markdown.inline.ruler.enable(['sub', 'sup']);

package/src/MyNdla/Resource/Folder.tsx

@@ -11,7 +11,7 @@ import React, { useRef } from 'react';
 import { FolderOutlined } from '@ndla/icons/contentType';
 import { FileDocumentOutline } from '@ndla/icons/common';
 import { fonts, spacing, colors, mq, breakpoints } from '@ndla/core';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { useTranslation } from 'react-i18next';
 import SafeLink from '@ndla/safelink';
 import { MenuButton, MenuItemProps } from '@ndla/button';

package/src/NDLAFilm/AllMoviesAlphabetically.tsx

@@ -9,7 +9,7 @@
 import React, { Fragment, RefObject, useEffect, useRef, useState } from 'react';
 import { isIE, browserVersion } from 'react-device-detect';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { throttle } from 'lodash';
 import { breakpoints, mq, spacing, spacingUnit, colors, fonts, animations } from '@ndla/core';
 import SafeLink from '@ndla/safelink';

package/src/NDLAFilm/CategorySelect.tsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import FocusTrapReact from 'focus-trap-react';
 import styled from '@emotion/styled';
-import { keyframes } from '@emotion/core';
+import { keyframes } from '@emotion/react';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import { ChevronDown } from '@ndla/icons/common';
 import { WithTranslation, withTranslation } from 'react-i18next';

package/src/NDLAFilm/FilmSlideshow.tsx

@@ -9,7 +9,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { SwipeEventData, useSwipeable } from 'react-swipeable';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { breakpoints, mq, spacing, spacingUnit, fonts, colors } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
 import { Spinner } from '@ndla/icons';

package/src/NDLAFilm/NavigationArrow.tsx

@@ -10,7 +10,7 @@ import React from 'react';
 import { ChevronRight, ChevronLeft } from '@ndla/icons/common';
 import styled from '@emotion/styled';
 import { breakpoints, colors, mq, spacing } from '@ndla/core';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 
 interface Props {
   slideIndexTarget: number;

package/src/Navigation/NavigationBox.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import { SafeLinkButton } from '@ndla/safelink';
 import Button from '@ndla/button';
 import { breakpoints, colors, fonts, misc, mq, spacing } from '@ndla/core';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { Switch } from '@ndla/switch';
 import { uuid } from '@ndla/util';
 import { useTranslation } from 'react-i18next';

package/src/Navigation/NavigationHeading.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { breakpoints, fonts, mq } from '@ndla/core';
 
 type InvertItProps = {

package/src/Navigation/NavigationTopicAbout.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 import parse from 'html-react-parser';
 import styled from '@emotion/styled';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import Button from '@ndla/button';
 import { ChevronDown, ChevronUp } from '@ndla/icons/common';
 import { useTranslation } from 'react-i18next';

package/src/Notion/ConceptNotion.tsx

@@ -91,7 +91,6 @@ const ConceptNotion = ({ concept, disableScripts, type, hideIconsAndAuthors, fig
             <ImageWrapper>
               <Notion
                 id={notionId}
-                ariaLabel={t('factbox.open')}
                 title={concept.title}
                 subTitle={t('searchPage.resultType.notionsHeading')}
                 hideBaselineIcon
@@ -127,7 +126,6 @@ const ConceptNotion = ({ concept, disableScripts, type, hideIconsAndAuthors, fig
             <ImageWrapper>
               <Notion
                 id={notionId}
-                ariaLabel={t('factbox.open')}
                 title={concept.title}
                 hideBaselineIcon
                 subTitle={t('searchPage.resultType.notionsHeading')}

package/src/Notion/NotionVisualElement.tsx

@@ -4,7 +4,7 @@
  * This source code is licensed under the GPLv3 license found in the
  * LICENSE file in the root directory of this source tree. *
  */
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import React, { ReactNode } from 'react';
 import { Copyright } from '../types';

package/src/ResourceGroup/ResourceItem.tsx

@@ -9,8 +9,8 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
-import { keyframes } from '@emotion/core';
+import { css } from '@emotion/react';
+import { keyframes } from '@emotion/react';
 import SafeLink from '@ndla/safelink';
 import { Additional, Core, HumanMaleBoard } from '@ndla/icons/common';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';

package/src/ResourceGroup/ResourceList.tsx

@@ -8,8 +8,8 @@
 
 import React from 'react';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
-import { keyframes } from '@emotion/core';
+import { css } from '@emotion/react';
+import { keyframes } from '@emotion/react';
 import { useTranslation } from 'react-i18next';
 import NoContentBox from '../NoContentBox';
 import ResourceItem from './ResourceItem';

package/src/ResourcesWrapper/ResourcesTopicTitle.tsx

@@ -1,5 +1,5 @@
 import React, { Fragment, ReactNode } from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { spacing } from '@ndla/core';
 import { HelpCircleDual } from '@ndla/icons/common';

package/src/Search/ActiveFilters.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { spacing, mq, breakpoints } from '@ndla/core';
 import Tooltip from '@ndla/tooltip';
 import { useTranslation } from 'react-i18next';

package/src/Search/ContentTypeResultStyles.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { colors, spacing, spacingUnit, fonts, misc, animations, mq, breakpoints } from '@ndla/core';
 
 export const highlightStyle = css`

package/src/Search/SearchField.tsx

@@ -9,7 +9,7 @@
 import React, { FocusEvent, MouseEvent, RefObject } from 'react';
 import { useTranslation } from 'react-i18next';
 import BEMHelper from 'react-bem-helper';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Search as SearchIcon } from '@ndla/icons/common';
 import { colors, spacing, mq, breakpoints, misc, fonts } from '@ndla/core';

package/src/Search/SearchFieldForm.tsx

@@ -1,6 +1,6 @@
 import React, { FormEvent, ReactNode } from 'react';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { spacing, mq, breakpoints } from '@ndla/core';
 
 interface Props {

package/src/SearchTypeResult/ActiveFilters.tsx

@@ -9,7 +9,7 @@
 import React, { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { spacing, mq, breakpoints } from '@ndla/core';
 import Tooltip from '@ndla/tooltip';
 import Button from '@ndla/button';