@ndla/ui 29.0.0 → 30.0.0

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>

package/src/SearchTypeResult/components/ItemResourceHeader.tsx

@@ -10,7 +10,7 @@ import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 
-import { animations, fonts, spacing } from '@ndla/core';
+import { fonts, spacing } from '@ndla/core';
 
 import { ContentType } from '../SearchTypeResult';
 import { SearchItemType } from '../SearchItem';
@@ -23,32 +23,30 @@ type ItemTypeProps = {
 };
 
 const ImageElement = styled.img`
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
   width: 100%;
   height: 100%;
   object-fit: cover;
+`;
+
+const ImageWrapper = styled.div`
   flex: 1;
-  min-height: 40px;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  overflow: hidden;
 `;
 
 const NoImageElement = styled.div<ItemTypeProps>`
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
   flex: 1;
-  min-height: 40px;
   background: ${(props) => props.contentType && `${resourceTypeColor(props.contentType)}`};
   position: relative;
-  transition: background-color ${animations.durations.normal} ease-in-out;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   .c-content-type-badge {
-    transition: all ${animations.durations.normal} ease-in-out;
-    position: absolute;
     width: 58px;
     height: 58px;
-    left: 50%;
-    margin-left: -29px;
-    top: 50%;
-    margin-top: -18px;
     opacity: 0.2;
     z-index: 3;
     svg {
@@ -68,7 +66,6 @@ const ContentTypeWrapper = styled.div<ItemTypeProps>`
   padding: 0 ${spacing.normal};
   ${fonts.sizes('12px', '16px')};
   font-weight: ${fonts.weight.semibold};
-  transition: all ${animations.durations.fast} ease-in-out;
 `;
 
 const ContentTypeIcon = styled.span<ItemTypeProps>`
@@ -85,11 +82,8 @@ const ContentTypeIcon = styled.span<ItemTypeProps>`
   display: flex;
   justify-content: center;
   align-items: center;
-  transition: all ${animations.durations.fast} ease-in-out;
   z-index: 2;
-
   svg {
-    transition: all ${animations.durations.fast} ease-in-out;
     width: 20px;
     height: 20px;
   }
@@ -106,16 +100,18 @@ const ItemResourceHeader = ({ labels = [], img, type }: Props) => {
   return (
     <>
       {img ? (
-        <ImageElement src={img.url} alt={img.alt} />
+        <ImageWrapper>
+          <ImageElement src={img.url} alt={img.alt} />
+        </ImageWrapper>
       ) : (
-        <NoImageElement className="resource-no-image" contentType={type}>
-          {type && <ContentTypeBadge type={type} border={false} />}
-        </NoImageElement>
+        <NoImageElement contentType={type}>{type && <ContentTypeBadge type={type} border={false} />}</NoImageElement>
       )}
       <ContentTypeWrapper className="resource-type-wrapper" contentType={type}>
-        <ContentTypeIcon className="resource-icon-wrapper" contentType={type}>
-          {img && type && <ContentTypeBadge type={type} border={false} />}
-        </ContentTypeIcon>
+        {img && type && (
+          <ContentTypeIcon className="resource-icon-wrapper" contentType={type}>
+            <ContentTypeBadge type={type} border={false} />
+          </ContentTypeIcon>
+        )}
         {type && t(`contentTypes.${type}`)}
         {labels.length > 0 && (
           <>

package/src/SearchTypeResult/components/ItemTopicHeader.tsx

@@ -9,7 +9,7 @@
 import React, { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
-import { animations, colors, fonts, spacing } from '@ndla/core';
+import { colors, fonts, spacing } from '@ndla/core';
 
 import { SearchItemType } from '../SearchItem';
 import ContentTypeBadge from '../../ContentTypeBadge';
@@ -29,7 +29,6 @@ const Label = styled.div`
   display: flex;
   align-items: center;
   margin-top: ${spacing.small};
-  transition: all ${animations.durations.fast} ease-in-out;
 
   .c-content-type-badge {
     width: 26px;
@@ -38,7 +37,6 @@ const Label = styled.div`
   }
 
   svg {
-    transition: all ${animations.durations.fast} ease-in-out;
     width: 22px;
     height: 22px;
     color: ${colors.text.primary} !important;
@@ -54,14 +52,14 @@ const TopicHeaderVisualElementWrapper = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+  overflow: hidden;
+  border-radius: 50%;
 `;
 
 const TopicHeaderImage = styled.img`
-  border-radius: 50%;
   width: 100%;
   height: 100%;
   object-fit: cover;
-  transition: all ${animations.durations.fast} ease-in-out;
   max-width: unset;
 `;
 

package/src/SectionHeading/SectionHeading.tsx

@@ -1,5 +1,5 @@
 import React, { ElementType, ReactNode } from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { breakpoints, fonts, mq, spacing } from '@ndla/core';
 import styled from '@emotion/styled';
 

package/src/SnackBar/SnackbarProvider.tsx

@@ -7,7 +7,7 @@
  */
 
 import React, { useCallback, useMemo, createContext, ReactNode, useState, useContext, useEffect } from 'react';
-import { keyframes } from '@emotion/core';
+import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
 import { spacing } from '@ndla/core';
 import DefaultSnack from './DefaultSnackbar';

package/src/Subject/Subject.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, colors, mq, spacing, spacingUnit } from '@ndla/core';
 import SectionHeading from '../SectionHeading';
 

package/src/Subject/SubjectAbout.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-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 SectionHeading from '../SectionHeading';

package/src/Subject/SubjectCarousel.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 { Carousel, CarouselAutosize } from '@ndla/carousel';
 import { withTranslation, WithTranslation } from 'react-i18next';
 import { breakpoints, mq, spacing, spacingUnit } from '@ndla/core';

package/src/Subject/SubjectHeader.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 { colors, fonts, mq, spacing, spacingUnit, breakpoints } from '@ndla/core';
 import OneColumn from '../Layout/OneColumn';
 

package/src/TagSelector/Input.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import css from '@emotion/css';
+import { css } from '@emotion/react';
 import { colors, spacing } from '@ndla/core';
 import React from 'react';
 import { components, InputProps } from 'react-select';

package/src/TagSelector/Menu.tsx

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

package/src/Topic/Topic.tsx

@@ -15,7 +15,7 @@ import { ChevronDown, ChevronUp, PlayCircleFilled } from '@ndla/icons/common';
 import Modal, { ModalCloseButton, ModalHeader, ModalBody } from '@ndla/modal';
 import Button from '@ndla/button';
 import { CursorClick, ExpandTwoArrows } from '@ndla/icons/action';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { useTranslation } from 'react-i18next';
 import Loader from './Loader';
 import { ItemProps } from '../Navigation/NavigationBox';

package/src/TopicMenu/SubtopicLinkList.jsx

@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
 import { Back, ChevronRight } from '@ndla/icons/common';
 import { Switch } from '@ndla/switch';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { mq, breakpoints, fonts, spacing } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
 import { withTranslation } from 'react-i18next';

package/src/TopicMenu/TopicMenuButton.jsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { spacing, fonts, colors, mq, breakpoints } from '@ndla/core';
 import { Menu } from '@ndla/icons/common';
 import { ButtonV2 as Button } from '@ndla/button';

package/src/TreeStructure/TreeStructure.tsx

@@ -9,7 +9,7 @@
 import React, { useEffect, useState, useMemo, useRef } from 'react';
 import styled from '@emotion/styled';
 import { colors, fonts, misc, utils } from '@ndla/core';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { uniq } from 'lodash';
 import { IFolder } from '@ndla/types-learningpath-api';
 import FolderItems from './FolderItems';

package/src/locale/messages-en.ts

@@ -965,7 +965,7 @@ const messages = {
     error: 'An error occurred while loading an external resource.',
   },
   concept: {
-    showDescription: 'Show concept description',
+    showDescription: '{{title}}, concept description. Press to open the description',
     reuse: 'Use concept',
     error: {
       title: 'An error occurred',

package/src/locale/messages-nb.ts

@@ -963,7 +963,7 @@ const messages = {
     error: 'En feil oppstod ved lasting av en ekstern ressurs.',
   },
   concept: {
-    showDescription: 'Vis beskrivelsen av forklaringen.',
+    showDescription: '{{title}}, begrepsforklaring. Trykk for å åpne forklaring.',
     reuse: 'Bruk forklaring',
     error: {
       title: 'En feil oppstod',

package/src/locale/messages-nn.ts

@@ -964,7 +964,7 @@ const messages = {
     error: 'Ein feil oppstod ved lasting av ein ekstern ressurs.',
   },
   concept: {
-    showDescription: 'Vis skildring av forklaringa',
+    showDescription: '{{title}}, begrepsforklaring. Trykk for å åpne forklaringa.',
     reuse: 'Bruk forklaring',
     error: {
       title: 'Ein feil oppstod',

package/src/locale/messages-se.ts

@@ -964,7 +964,7 @@ const messages = {
     error: 'Boasttuvuohta čuožžilii olgguldas resurssa viežžamis.',
   },
   concept: {
-    showDescription: 'Čájet čilgehusa govvideami.',
+    showDescription: '{{title}} ,Čájet čilgehusa govvideami.',
     reuse: 'Geavat čilgehusa',
     error: {
       title: 'Boasttuvuohta čuožžilii',

package/src/locale/messages-sma.ts

@@ -964,7 +964,7 @@ const messages = {
     error: 'En feil oppstod ved lasting av en ekstern ressurs.',
   },
   concept: {
-    showDescription: 'Vis beskrivelsen av forklaringen.',
+    showDescription: '{{title}}, begrepsforklaring. Trykk for å åpne forklaring.',
     reuse: 'Bruk forklaring',
     error: {
       title: 'En feil oppstod',