@ndla/ui 28.0.0 → 30.0.0

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/Resource/ListResource.tsx

@@ -216,7 +216,7 @@ const ListResource = ({
   const showDescription = description !== undefined;
   const imageType = showDescription ? 'normal' : 'compact';
   const linkRef = useRef<HTMLAnchorElement>(null);
-  const firstContentType = resourceTypes?.[0].id ?? '';
+  const firstContentType = resourceTypes?.[0]?.id ?? '';
   const Title = ResourceTitle.withComponent(headingLevel);
   const handleClick = () => {
     if (linkRef.current) {

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';

package/src/SearchTypeResult/SearchItem.tsx

@@ -39,42 +39,12 @@ const ItemWrapper = styled.div`
   height: 100%;
   border: 1px solid ${colors.brand.neutral7};
   border-radius: 5px;
-  transition: all ${animations.durations.fast} ease-in-out;
-  &:hover {
-    height: calc(100% + 4px);
-    width: calc(100% + 4px);
-    .topic-header-image {
-      height: calc(100% + 6px);
-      width: calc(100% + 6px);
-    }
-    .topic-label {
-      svg {
-        transform: scale(1.2);
-      }
-    }
-    .topic-label-list {
-      margin-left: 2px;
-    }
-    .resource-type-wrapper {
-      padding: 0 calc(${spacing.normal} + 2px);
-      .resource-icon-wrapper {
-        left: 19px;
-        svg {
-          transform: scale(1.2);
-        }
-      }
-    }
-    .resource-no-image {
-      background-color: ${colors.brand.greyLightest};
-      .c-content-type-badge {
-        width: 26px;
-        height: 26px;
-        left: 45px;
-        margin-left: 0;
-        top: 100%;
-        margin-top: -13px;
-        opacity: 1;
-      }
+  img {
+    transition: all ${animations.durations.fast} ease-in-out;
+  }
+  :hover {
+    img {
+      transform: scale(1.1);
     }
   }
 `;
@@ -92,16 +62,10 @@ const ItemLink = styled(SafeLink)`
 
 const TextWrapper = styled.div`
   padding: 0 ${spacing.normal} ${spacing.small};
-  transition: all ${animations.durations.fast} ease-in-out;
 `;
 
 const ItemTitleWrapper = styled.div<ItemTypeProps>`
-  transition: all ${animations.durations.fast} ease-in-out;
   margin-top: ${spacing.small};
-  ${(props) =>
-    props.isTopic &&
-    `${ItemWrapper}:hover & {
-    padding-left:2px; padding-right: 2px;}`};
 `;
 
 const ItemTitle = styled.h3<ItemTypeProps>`
@@ -121,7 +85,6 @@ const ItemText = styled.div<ItemTypeProps>`
   ${fonts.sizes('16px', '24px')};
   word-break: break-word;
   overflow-wrap: anywhere;
-  transition: all ${animations.durations.fast} ease-in-out;
   margin-top: ${spacing.small};
   ${(props) =>
     props.isTopic &&
@@ -133,12 +96,6 @@ const ItemText = styled.div<ItemTypeProps>`
 const ContextWrapper = styled.div`
   background: white;
   padding: 0 ${spacing.normal} ${spacing.small};
-  transition: all ${animations.durations.fast} ease-in-out;
-  ${ItemWrapper}:hover & {
-    padding-left: calc(${spacing.normal} + 2px);
-    padding-right: calc(${spacing.normal} + 2px);
-    padding-bottom: calc(${spacing.small} + 2px);
-  }
 `;
 
 export type SearchItemProps = {

package/src/SearchTypeResult/SearchItemList.tsx

@@ -27,11 +27,14 @@ const Container = styled.div`
   height: 100%;
   border: 1px solid ${colors.brand.neutral7};
   border-radius: 5px;
-  transition: all ${animations.durations.fast} ease-in-out;
-  &:hover {
-    margin: -2px;
-    min-height: 196px;
-    height: calc(100% + 4px);
+
+  img {
+    transition: all ${animations.durations.fast} ease-in-out;
+  }
+  :hover {
+    img {
+      transform: scale(1.1);
+    }
   }
 `;
 
@@ -52,11 +55,6 @@ const TextWrapper = styled.div`
   flex: 1;
   margin: ${spacing.small} ${spacing.small} ${spacing.small} ${spacing.normal};
   max-width: 800px;
-  transition: all ${animations.durations.fast} ease-in-out;
-  ${Container}:hover & {
-    margin: calc(${spacing.small} + 2px) calc(${spacing.small} + 2px) calc(${spacing.small} + 2px)
-      calc(${spacing.normal} + 2px);
-  }
 `;
 const ContentTypeWrapper = styled.div`
   display: flex;
@@ -99,21 +97,16 @@ const ImageWrapper = styled.div<{ isTopic: boolean }>`
   justify-content: center;
   align-items: center;
   margin: ${spacing.small};
-  transition: all ${animations.durations.fast} ease-in-out;
-  ${Container}:hover & {
-    width: ${(props) => (props.isTopic ? `168px` : `228px`)};
-    height: 168px;
-  }
+  overflow: hidden;
+  ${(props) => props.isTopic && `border-radius: 50%;`};
 `;
 
-const ImageElement = styled.img<{ isTopic: boolean }>`
+const ImageElement = styled.img`
   border-radius: 2px;
   width: 100%;
   height: 100%;
   object-fit: cover;
-  transition: all ${animations.durations.fast} ease-in-out;
   max-width: unset;
-  ${(props) => props.isTopic && `border-radius: 50%;`};
 `;
 
 const ContextWrapper = styled.div`
@@ -156,7 +149,7 @@ const SearchItemList = ({ item, type }: SearchItemType) => {
         </TextWrapper>
         {img && (
           <ImageWrapper isTopic={isTopic}>
-            <ImageElement src={img.url} alt={img.alt} isTopic={isTopic} />
+            <ImageElement src={img.url} alt={img.alt} />
           </ImageWrapper>
         )}
       </ItemLink>