@ndla/ui 44.0.24 → 45.0.1

package/src/NDLAFilm/FilmContentCard.tsx

@@ -7,7 +7,7 @@
  */
 
 import { HTMLAttributes } from 'react';
-import { spacing, colors, fonts, breakpoints, misc } from '@ndla/core';
+import { spacing, colors, fonts, breakpoints, misc, mq } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
 import styled from '@emotion/styled';
 import { makeSrcQueryString } from '../Image';
@@ -16,46 +16,36 @@ import { MovieResourceType, MovieType } from './types';
 
 interface Props extends HTMLAttributes<HTMLElement> {
   movie: MovieType;
-  columnWidth: number;
-  distanceBetweenItems?: number;
   resourceTypes: MovieResourceType[];
-  resizeThumbnailImages?: boolean;
   hideTags?: boolean;
   className?: string;
+  lazy?: boolean;
+  type?: 'slideshow' | 'list';
 }
 
 const FilmContentCard = ({
   movie: { metaImage, resourceTypes: movieResourceTypes, title, id, path },
-  columnWidth,
-  distanceBetweenItems,
   resourceTypes,
-  resizeThumbnailImages,
   hideTags = false,
   className,
+  type = 'slideshow',
+  lazy,
   ...rest
 }: Props) => {
-  let backgroundImage = `${(metaImage && metaImage.url) || ''}`;
-  const contentTypeId = `content-type-${id}`;
-  if (resizeThumbnailImages && metaImage) {
-    backgroundImage += '?width=480';
-  }
+  const backgroundImage = metaImage ? `${metaImage.url}?${makeSrcQueryString(600)}` : '';
+  const contentTypeId = `${type}-content-type-${id}`;
 
   return (
     <StyledSafeLink
       onMouseDown={(e) => e.preventDefault()}
       to={path}
+      data-type={type}
       aria-describedby={contentTypeId}
-      columnWidth={columnWidth}
       className={className}
-      style={{ marginRight: `${distanceBetweenItems}px` }}
       {...rest}
     >
-      <StyledImage
-        role="img"
-        style={{
-          backgroundImage: `url(${backgroundImage}?${makeSrcQueryString(600)})`,
-        }}
-      >
+      <ImageWrapper>
+        <StyledImage src={backgroundImage} loading={lazy ? 'lazy' : 'eager'} alt="" />
         {movieResourceTypes && !hideTags && (
           <FilmContentCardTags
             id={contentTypeId}
@@ -63,7 +53,7 @@ const FilmContentCard = ({
             resourceTypes={resourceTypes}
           />
         )}
-      </StyledImage>
+      </ImageWrapper>
       <StyledMovieTitle>{title}</StyledMovieTitle>
     </StyledSafeLink>
   );
@@ -81,32 +71,21 @@ const StyledMovieTitle = styled.span`
   }
 `;
 
-const StyledImage = styled.div`
-  aspect-ratio: 16/9;
-  background-size: cover;
+const ImageWrapper = styled.div`
+  position: relative;
   background-color: ${colors.ndlaFilm.filmColorLight};
-  background-position-x: center;
-  background-position-y: center;
   border-radius: ${misc.borderRadius};
-  position: relative;
-  display: flex;
-  align-items: flex-end;
-  &:before {
-    content: '';
-    transition: 200ms ease;
-    display: block;
-    background: ${colors.ndlaFilm.filmColor};
-    opacity: 0;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-  }
+  overflow: hidden;
+`;
+
+const StyledImage = styled.img`
+  aspect-ratio: 16/9;
+  width: 100%;
+  object-fit: cover;
 `;
 
 interface StyledSlideWrapperProps {
-  columnWidth: number;
+  columnWidth?: number;
 }
 
 const shouldForwardProp = (p: string) => p !== 'columnWidth';
@@ -115,8 +94,7 @@ const StyledSafeLink = styled(SafeLink, { shouldForwardProp })<StyledSlideWrappe
   display: flex;
   flex-direction: column;
   gap: ${spacing.small};
-  width: ${(props) => props.columnWidth}px;
-  color: #fff;
+  color: ${colors.white};
   box-shadow: none;
   &:hover,
   &:focus-within,
@@ -125,13 +103,32 @@ const StyledSafeLink = styled(SafeLink, { shouldForwardProp })<StyledSlideWrappe
     ${StyledMovieTitle} {
       text-decoration: underline;
     }
-    ${StyledImage} {
-      &:before {
-        opacity: 0.3;
-      }
-      > div {
-        opacity: 1;
-      }
+    [data-content-cards] {
+      opacity: 1;
+    }
+    img {
+      opacity: 0.7;
+    }
+  }
+  &[data-type='slideshow'] {
+    width: 30vw;
+    ${mq.range({ until: breakpoints.tablet })} {
+      width: 40vw;
+    }
+    ${mq.range({ from: breakpoints.desktop })} {
+      width: 30vw;
+    }
+  }
+  &[data-type='list'] {
+    width: 40vw;
+    ${mq.range({ from: breakpoints.tablet, until: breakpoints.desktop })} {
+      width: 28vw;
+    }
+    ${mq.range({ from: breakpoints.desktop })} {
+      width: 20vw;
+    }
+    ${mq.range({ from: breakpoints.ultraWide })} {
+      width: 14vw;
     }
   }
 `;

package/src/NDLAFilm/FilmContentCardTags.tsx

@@ -6,7 +6,9 @@ const StyledWrapperDiv = styled.div`
   transition: opacity 200ms ease;
   padding: ${spacing.xsmall} ${spacing.xsmall};
   opacity: 0;
-  display: relative;
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
   z-index: 1;
 `;
 
@@ -35,7 +37,8 @@ const FilmContentCardTags = ({ movieResourceTypes, resourceTypes, id }: Props) =
     }
   });
   return (
-    <StyledWrapperDiv id={id}>
+    // data-content-cards is used to set the opacity of tags on hover/focus
+    <StyledWrapperDiv id={id} data-content-cards="">
       {Object.keys(resources).map((resourceName) => (
         <StyledMovieTags key={resourceName}>{resourceName}</StyledMovieTags>
       ))}

package/src/NDLAFilm/FilmMovieList.tsx

@@ -5,7 +5,7 @@
  *
  */
 
-import { Carousel, CalculatedCarouselProps } from '@ndla/carousel';
+import { Carousel } from '@ndla/carousel';
 import styled from '@emotion/styled';
 import { IconButtonV2 } from '@ndla/button';
 import { ChevronLeft, ChevronRight } from '@ndla/icons/common';
@@ -20,8 +20,6 @@ interface Props {
   slideBackwardsLabel: string;
   slideForwardsLabel: string;
   resourceTypes: MovieResourceType[];
-  autoSizedProps: CalculatedCarouselProps;
-  resizeThumbnailImages?: boolean;
 }
 
 const StyledSection = styled.section`
@@ -31,17 +29,9 @@ const StyledSection = styled.section`
   }
 `;
 
-const FilmMovieList = ({
-  name,
-  movies = [],
-  slideBackwardsLabel,
-  slideForwardsLabel,
-  resourceTypes = [],
-  autoSizedProps,
-  resizeThumbnailImages,
-}: Props) => (
+const FilmMovieList = ({ name, movies = [], slideBackwardsLabel, slideForwardsLabel, resourceTypes = [] }: Props) => (
   <StyledSection>
-    {!!name && <StyledHeadingH2 marginLeft={autoSizedProps.margin}>{name}</StyledHeadingH2>}
+    {!!name && <StyledHeadingH2>{name}</StyledHeadingH2>}
     <Carousel
       leftButton={
         <IconButtonV2 aria-label={slideBackwardsLabel}>
@@ -54,15 +44,8 @@ const FilmMovieList = ({
         </IconButtonV2>
       }
       items={movies.map((movie) => (
-        <FilmContentCard
-          key={movie.id}
-          movie={movie}
-          columnWidth={autoSizedProps.columnWidth}
-          resourceTypes={resourceTypes}
-          resizeThumbnailImages={resizeThumbnailImages}
-        />
+        <FilmContentCard key={movie.id} movie={movie} type="list" lazy resourceTypes={resourceTypes} />
       ))}
-      {...autoSizedProps}
     />
   </StyledSection>
 );

package/src/NDLAFilm/FilmMovieSearch.tsx

@@ -33,7 +33,6 @@ const StyledUl = styled.ul`
   display: flex;
   flex-direction: column;
   list-style-type: none;
-  list-style-image: none;
   li {
     flex: 1;
     width: 100%;

package/src/NDLAFilm/FilmSlideshow.tsx

@@ -8,64 +8,14 @@
 
 import { useCallback, useState } from 'react';
 import styled from '@emotion/styled';
-import { Carousel, CarouselAutosize } from '@ndla/carousel';
-import { breakpoints, colors, misc, mq, spacing, spacingUnit } from '@ndla/core';
+import { Carousel } from '@ndla/carousel';
+import { breakpoints, colors, misc, mq, spacing } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
 import { IconButtonV2 } from '@ndla/button';
 import { ChevronLeft, ChevronRight } from '@ndla/icons/common';
 import FilmContentCard from './FilmContentCard';
 import { MovieType } from './types';
-
-export const slideshowBreakpoints: {
-  until?: keyof typeof breakpoints;
-  columnsPrSlide: number;
-  distanceBetweenItems: number;
-  arrowOffset: number;
-  margin?: number;
-  maxColumnWidth?: number;
-}[] = [
-  {
-    until: 'mobileWide',
-    columnsPrSlide: 2,
-    distanceBetweenItems: spacingUnit / 2,
-    margin: spacingUnit,
-    arrowOffset: 13,
-  },
-  {
-    until: 'tabletWide',
-    columnsPrSlide: 3,
-    distanceBetweenItems: spacingUnit / 2,
-    margin: spacingUnit,
-    arrowOffset: 13,
-  },
-  {
-    until: 'desktop',
-    columnsPrSlide: 3,
-    distanceBetweenItems: spacingUnit,
-    margin: spacingUnit * 2,
-    arrowOffset: 0,
-  },
-  {
-    until: 'wide',
-    columnsPrSlide: 3,
-    distanceBetweenItems: spacingUnit,
-    margin: spacingUnit * 2,
-    arrowOffset: 0,
-  },
-  {
-    until: 'ultraWide',
-    columnsPrSlide: 3,
-    distanceBetweenItems: spacingUnit,
-    margin: spacingUnit * 3.5,
-    arrowOffset: 0,
-  },
-  {
-    columnsPrSlide: 3,
-    distanceBetweenItems: spacingUnit,
-    margin: spacingUnit * 3.5,
-    arrowOffset: 0,
-  },
-];
+import Image from '../Image';
 
 interface Props {
   slideshow: MovieType[];
@@ -106,8 +56,9 @@ const InfoWrapper = styled.div`
   }
 `;
 
-const StyledImg = styled.img`
+const StyledImg = styled(Image)`
   max-height: 600px;
+  min-height: 600px;
   object-position: top;
   width: 100%;
   aspect-ratio: 16/9;
@@ -124,7 +75,7 @@ const CarouselContainer = styled.div`
     margin-top: -70px;
   }
   ${mq.range({ from: breakpoints.desktop })} {
-    margin-top: -150px;
+    margin-top: -160px;
   }
 `;
 
@@ -148,62 +99,59 @@ const FilmSlideshow = ({ slideshow }: Props) => {
   const [currentSlide, setCurrentSlide] = useState(slideshow[0]);
 
   return (
-    <CarouselAutosize breakpoints={slideshowBreakpoints} itemsLength={slideshow.length}>
-      {(autoSizedProps) => (
-        <section>
-          <StyledSafeLink to={currentSlide.path} tabIndex={-1} aria-hidden>
-            <StyledImg src={currentSlide.metaImage?.url ?? ''} alt={currentSlide.metaImage?.alt ?? ''} />
-            <SlideInfoWrapper>
-              <InfoWrapper>
-                <h3>{currentSlide.title}</h3>
-                <span id="currentMovieDescription">{currentSlide.metaDescription}</span>
-              </InfoWrapper>
-            </SlideInfoWrapper>
-          </StyledSafeLink>
-          <CarouselContainer>
-            <Carousel
-              leftButton={
-                <SlideshowButton aria-label={''}>
-                  <ChevronLeft />
-                </SlideshowButton>
-              }
-              rightButton={
-                <SlideshowButton aria-label={''}>
-                  <ChevronRight />
-                </SlideshowButton>
-              }
-              items={slideshow.map((movie) => (
-                <FilmCard
-                  key={movie.id}
-                  current={movie.id === currentSlide.id}
-                  movie={movie}
-                  columnWidth={autoSizedProps.columnWidth}
-                  setCurrentSlide={() => setCurrentSlide(movie)}
-                />
-              ))}
-              {...autoSizedProps}
+    <section>
+      <StyledSafeLink to={currentSlide.path} tabIndex={-1} aria-hidden>
+        <StyledImg
+          src={currentSlide.metaImage?.url ?? ''}
+          sizes="(min-width: 1140px) 1140px, (min-width: 720px) 100vw, 100vw"
+          alt=""
+        />
+        <SlideInfoWrapper>
+          <InfoWrapper>
+            <h3>{currentSlide.title}</h3>
+            <span id="currentMovieDescription">{currentSlide.metaDescription}</span>
+          </InfoWrapper>
+        </SlideInfoWrapper>
+      </StyledSafeLink>
+      <CarouselContainer>
+        <Carousel
+          leftButton={
+            <SlideshowButton aria-label="">
+              <ChevronLeft />
+            </SlideshowButton>
+          }
+          rightButton={
+            <SlideshowButton aria-label="">
+              <ChevronRight />
+            </SlideshowButton>
+          }
+          items={slideshow.map((movie) => (
+            <FilmCard
+              key={movie.id}
+              current={movie.id === currentSlide.id}
+              movie={movie}
+              setCurrentSlide={setCurrentSlide}
             />
-          </CarouselContainer>
-        </section>
-      )}
-    </CarouselAutosize>
+          ))}
+        />
+      </CarouselContainer>
+    </section>
   );
 };
 
 interface FilmCardProps {
-  setCurrentSlide: () => void;
+  setCurrentSlide: (movie: MovieType) => void;
   movie: MovieType;
   current: boolean;
-  columnWidth: number;
 }
 
-const FilmCard = ({ setCurrentSlide, movie, current, columnWidth }: FilmCardProps) => {
+const FilmCard = ({ setCurrentSlide, movie, current }: FilmCardProps) => {
   const [hoverCallback, setHoverCallback] = useState<ReturnType<typeof setTimeout> | undefined>(undefined);
 
   const onHover = useCallback(() => {
-    const timeout = setTimeout(() => setCurrentSlide(), 500);
+    const timeout = setTimeout(() => setCurrentSlide(movie), 500);
     setHoverCallback(timeout);
-  }, [setCurrentSlide]);
+  }, [movie, setCurrentSlide]);
 
   return (
     <StyledFilmContentCard
@@ -214,12 +162,11 @@ const FilmCard = ({ setCurrentSlide, movie, current, columnWidth }: FilmCardProp
           setHoverCallback(undefined);
         }
       }}
-      onFocus={() => setCurrentSlide()}
+      onFocus={() => setCurrentSlide(movie)}
       current={current}
       aria-describedby={'currentMovieDescription'}
       key={movie.id}
       movie={movie}
-      columnWidth={columnWidth}
       resourceTypes={[]}
     />
   );

package/src/NDLAFilm/MovieGrid.tsx

@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
-import { spacing } from '@ndla/core';
-import { CalculatedCarouselProps } from '@ndla/carousel';
+import { breakpoints, mq, spacing, spacingUnit } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
 import FilmContentCard from './FilmContentCard';
 import { MovieResourceType, MovieType } from './types';
@@ -13,9 +12,16 @@ interface MovieListingProps {
 const MovieListing = styled.div<MovieListingProps>`
   display: flex;
   flex-wrap: wrap;
+  gap: ${spacing.normal};
   margin: ${spacing.small} 0;
   margin-left: ${(props) => props.marginLeft && `${props.marginLeft}px`};
   ${setAnimations()};
+  margin-left: ${spacing.normal};
+  margin-right: ${spacing.normal};
+  ${mq.range({ from: breakpoints.desktop })} {
+    margin-left: ${spacingUnit * 3}px;
+    margin-right: ${spacingUnit * 3}px;
+  }
   > div {
     opacity: 0;
     animation-fill-mode: forwards;
@@ -33,13 +39,11 @@ const LoadingPlaceholder = styled.div<LoadingPlaceholderProps>`
 `;
 
 interface Props {
-  autoSizedProps: CalculatedCarouselProps;
   resourceTypeName?: MovieResourceType;
   fetchingMoviesByType: boolean;
   moviesByType: MovieType[];
   resourceTypes: MovieResourceType[];
   loadingPlaceholderHeight?: string;
-  resizeThumbnailImages?: boolean;
 }
 
 const MovieGrid = ({
@@ -48,13 +52,11 @@ const MovieGrid = ({
   moviesByType,
   resourceTypes,
   loadingPlaceholderHeight,
-  autoSizedProps,
-  resizeThumbnailImages,
 }: Props) => {
   const { t } = useTranslation();
   return (
     <section>
-      <StyledHeadingH1 marginLeft={autoSizedProps.margin}>
+      <StyledHeadingH1>
         {resourceTypeName && resourceTypeName.name}
         <small>
           {fetchingMoviesByType
@@ -62,19 +64,11 @@ const MovieGrid = ({
             : `${moviesByType.length} ${t('ndlaFilm.movieMatchInCategory')}`}
         </small>
       </StyledHeadingH1>
-      <MovieListing marginLeft={autoSizedProps.margin}>
+      <MovieListing>
         {fetchingMoviesByType && <LoadingPlaceholder height={loadingPlaceholderHeight} />}
         {!fetchingMoviesByType &&
           moviesByType.map((movie, index) => (
-            <FilmContentCard
-              key={index}
-              hideTags
-              movie={movie}
-              columnWidth={autoSizedProps.columnWidth}
-              distanceBetweenItems={autoSizedProps.distanceBetweenItems}
-              resourceTypes={resourceTypes}
-              resizeThumbnailImages={resizeThumbnailImages}
-            />
+            <FilmContentCard key={index} hideTags movie={movie} resourceTypes={resourceTypes} lazy type="list" />
           ))}
       </MovieListing>
     </section>

package/src/NDLAFilm/filmStyles.ts

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { fonts, spacing, colors } from '@ndla/core';
+import { fonts, spacing, colors, mq, breakpoints, spacingUnit } from '@ndla/core';
 
 export const setAnimations = () => {
   const styles: any = {};
@@ -11,23 +11,24 @@ export const setAnimations = () => {
   return styles;
 };
 
-interface StyledHeadingProps {
-  marginLeft?: number;
-}
-
-export const StyledHeadingH1 = styled.h1<StyledHeadingProps>`
+export const StyledHeadingH1 = styled.h1`
   ${fonts.sizes('22px', '26px')};
   font-weight: ${fonts.weight.semibold};
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: ${colors.white};
   margin: ${spacing.xsmall} 0;
-  margin-left: ${(props) => props.marginLeft && `${props.marginLeft}px`};
   small {
     font-weight: normal;
     padding-left: ${spacing.small};
     color: ${colors.brand.grey};
   }
+  margin-left: ${spacing.normal};
+  margin-right: ${spacing.normal};
+  ${mq.range({ from: breakpoints.desktop })} {
+    margin-left: ${spacingUnit * 3}px;
+    margin-right: ${spacingUnit * 3}px;
+  }
 `;
 
 export const StyledHeadingH2 = StyledHeadingH1.withComponent('h2');

package/src/Table/Table.tsx

@@ -143,7 +143,14 @@ export const TableStyling = css`
 
     ol,
     ul {
-      font-size: unset !important;
+      li,
+      li p {
+        ${fonts.sizes('14px', '22px')};
+        ${mq.range({ from: breakpoints.tablet })} {
+          ${fonts.sizes('15px', '30px')};
+        }
+        margin: ${spacing.xsmall} 0 !important;
+      }
     }
 
     p {

package/src/Topic/Topic.tsx

@@ -243,7 +243,6 @@ const Topic = ({
 }: TopicProps) => {
   const { t } = useTranslation();
   const contentId = `expanded-description-${id}`;
-  const testId = 'nav-topic-about';
 
   const VisualElementIcon = useMemo(() => {
     if (!visualElementEmbedMeta || visualElementEmbedMeta.status === 'error') return null;
@@ -267,15 +266,11 @@ const Topic = ({
 
   const wrapperStyle = [frame ? frameStyle : undefined, invertedStyle ? _invertedStyle : undefined];
   if (isLoading) {
-    return (
-      <Wrapper css={wrapperStyle} data-testid={testId}>
-        {isLoading ? <Loader /> : null}
-      </Wrapper>
-    );
+    return <Wrapper css={wrapperStyle}>{isLoading ? <Loader /> : null}</Wrapper>;
   }
 
   return (
-    <Wrapper css={wrapperStyle} data-testid={testId}>
+    <Wrapper css={wrapperStyle}>
       <TopicIntroductionWrapper>
         <div>
           <HeadingWrapper>

package/src/locale/messages-en.ts

@@ -305,7 +305,7 @@ const messages = {
     },
     socialMedia: {
       heading: 'Follow us',
-      description: 'NDLA has several facebook- and twitter accounts. Find the one that suits you, and follow us!',
+      description: 'NDLA has several Facebook- and X-accounts. Find the one that suits you, and follow us!',
       mainLink: {
         name: 'Follow us',
       },
@@ -1052,6 +1052,7 @@ const messages = {
     showLess: 'Show less',
   },
   files: 'Files',
+  fileTypesNotSupported: 'Filetype(s) not supported: {{fileTypes}}',
   download: 'Download file: ',
   expandButton: 'Show large version',
   ...contributorTypes.en,
@@ -1222,7 +1223,7 @@ const messages = {
       loginTextLink: 'privacy policy here',
       loginTerms: 'Log in with Feide to receive access. By logging on your accept your terms of service',
       loginResourcePitch: 'Do you want to favorite this resource?',
-      loginWelcome: 'Welcome to My NDLA! This page allows you to organize your articles in your <i>own</i> way!',
+      loginWelcome: 'Welcome to My NDLA! This page allows you to organize your articles in your own way!',
       deleteAccount: 'Delete My NDLA',
       welcome:
         'Welcome to my NDLA! You can now save your favourite resources from NDLA and organise them in folders with tags',

package/src/locale/messages-nb.ts

@@ -304,7 +304,7 @@ const messages = {
     },
     socialMedia: {
       heading: 'Følg oss',
-      description: 'NDLA har mange Facebook- og Twitter-kontoer. Finn den som passer for deg, og følg oss!',
+      description: 'NDLA har mange Facebook- og X-kontoer. Finn den som passer for deg, og følg oss!!',
       mainLink: {
         name: 'Følg oss',
       },
@@ -1051,6 +1051,7 @@ const messages = {
     showLess: 'Vis mindre',
   },
   files: 'Filer',
+  fileTypesNotSupported: 'Filtypen(e) støttes ikke: {{fileTypes}}',
   download: 'Last ned fil: ',
   expandButton: 'Vis stor versjon',
   ...contributorTypes.nb,
@@ -1220,7 +1221,7 @@ const messages = {
       loginTextLink: 'personvernerklæring her',
       loginTerms: 'Logg på med Feide for å få tilgang. Ved å logge på godkjenner du våre vilkår for bruk',
       loginResourcePitch: 'Ønsker du å favorittmerke denne ressursen?',
-      loginWelcome: 'Velkommen til NDLA! Her kan du organisere fagstoffet på <i>din</i> måte!',
+      loginWelcome: 'Velkommen til NDLA! Her kan du organisere fagstoffet på din måte!',
       welcome:
         'Velkommen til Min NDLA! Nå kan du lagre favorittressursene dine fra NDLA og organisere dem i mapper og med emneknagger.',
       read: { read: 'Les', our: ' vår.' },