@ndla/ui 50.8.0 → 50.8.2

package/src/Messages/MessageBox.stories.tsx

@@ -6,16 +6,16 @@
  *
  */
 
-import { useTranslation } from 'react-i18next';
-import { Meta, StoryFn } from '@storybook/react';
-import { Alarm, HumanMaleBoard, InformationOutline, WarningOutline } from '@ndla/icons/common';
-import MessageBox from './MessageBox';
-import { defaultParameters } from '../../../../stories/defaults';
+import { useTranslation } from "react-i18next";
+import { Meta, StoryFn } from "@storybook/react";
+import { Alarm, HumanMaleBoard, InformationOutline, WarningOutline } from "@ndla/icons/common";
+import MessageBox from "./MessageBox";
+import { defaultParameters } from "../../../../stories/defaults";
 
 export default {
-  title: 'Patterns/MessageBox',
+  title: "Patterns/MessageBox",
   component: MessageBox,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   parameters: {
     inlineStories: true,
     ...defaultParameters,
@@ -30,7 +30,7 @@ export const Default: StoryFn<typeof MessageBox> = ({ ...args }) => {
   return (
     <MessageBox {...args}>
       <InformationOutline />
-      {t('messageBoxInfo.noContent')}
+      {t("messageBoxInfo.noContent")}
     </MessageBox>
   );
 };
@@ -40,7 +40,7 @@ export const WithoutCloseButton: StoryFn<typeof MessageBox> = () => {
   return (
     <MessageBox>
       <InformationOutline />
-      {t('messageBoxInfo.subjectOutdated')}
+      {t("messageBoxInfo.subjectOutdated")}
     </MessageBox>
   );
 };
@@ -50,13 +50,13 @@ export const WithLinks: StoryFn<typeof MessageBox> = () => {
   return (
     <MessageBox
       links={[
-        { text: 'link 1', href: '#' },
-        { text: 'link 2', href: '#' },
-        { text: 'link 3', href: '#' },
+        { text: "link 1", href: "#" },
+        { text: "link 2", href: "#" },
+        { text: "link 3", href: "#" },
       ]}
     >
       <InformationOutline />
-      {t('messageBoxInfo.newVersion')}
+      {t("messageBoxInfo.newVersion")}
     </MessageBox>
   );
 };
@@ -66,7 +66,7 @@ export const Ghost: StoryFn<typeof MessageBox> = () => {
   return (
     <MessageBox type="ghost">
       <HumanMaleBoard />
-      {t('messageBoxInfo.feide')}
+      {t("messageBoxInfo.feide")}
     </MessageBox>
   );
 };
@@ -76,7 +76,7 @@ export const Danger: StoryFn<typeof MessageBox> = () => {
   return (
     <MessageBox type="danger">
       <WarningOutline />
-      {t('messageBoxInfo.feide')}
+      {t("messageBoxInfo.feide")}
     </MessageBox>
   );
 };
@@ -86,12 +86,12 @@ export const WithCustomIcon: StoryFn<typeof MessageBox> = () => {
   return (
     <MessageBox type="danger">
       <Alarm />
-      {t('messageBoxInfo.feide')}
+      {t("messageBoxInfo.feide")}
     </MessageBox>
   );
 };
 
 export const WithoutIcon: StoryFn<typeof MessageBox> = () => {
   const { t } = useTranslation();
-  return <MessageBox type="danger">{t('messageBoxInfo.feide')}</MessageBox>;
+  return <MessageBox type="danger">{t("messageBoxInfo.feide")}</MessageBox>;
 };

package/src/Messages/MessageBox.tsx

@@ -6,14 +6,14 @@
  *
  */
 
-import { ReactNode } from 'react';
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { CloseButton } from '@ndla/button';
-import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
-import { Forward } from '@ndla/icons/common';
+import { ReactNode } from "react";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { CloseButton } from "@ndla/button";
+import { breakpoints, colors, fonts, mq, spacing } from "@ndla/core";
+import { Forward } from "@ndla/icons/common";
 
-type MessageBoxType = 'ghost' | 'danger';
+type MessageBoxType = "ghost" | "danger";
 
 interface LinkProps {
   href?: string;
@@ -36,15 +36,15 @@ const MessageBoxWrapper = styled.div`
   background: ${colors.support.yellowLight};
   color: ${colors.brand.greyDark};
 
-  ${fonts.sizes('18px')};
+  ${fonts.sizes("18px")};
   ${mq.range({ until: breakpoints.tabletWide })} {
-    ${fonts.sizes('16px')};
+    ${fonts.sizes("16px")};
   }
-  &[data-type='ghost'] {
+  &[data-type="ghost"] {
     background: transparent;
     color: ${colors.brand.greyDark};
   }
-  &[data-type='danger'] {
+  &[data-type="danger"] {
     background: ${colors.support.redLightest};
     color: ${colors.text.primary};
   }

package/src/Messages/index.ts

@@ -6,7 +6,7 @@
  *
  */
 
-import MessageBanner from './MessageBanner';
-import MessageBox from './MessageBox';
+import MessageBanner from "./MessageBanner";
+import MessageBox from "./MessageBox";
 
 export { MessageBox, MessageBanner };

package/src/MyNdla/Resource/Folder.stories.tsx

@@ -6,21 +6,21 @@
  *
  */
 
-import styled from '@emotion/styled';
-import { Meta, StoryFn, StoryObj } from '@storybook/react';
-import { ButtonV2, IconButtonV2 } from '@ndla/button';
-import { spacing } from '@ndla/core';
-import { DropdownMenu, DropdownTrigger, DropdownContent, DropdownItem } from '@ndla/dropdown-menu';
-import { Pencil } from '@ndla/icons/action';
-import { HorizontalMenu } from '@ndla/icons/contentType';
-import { DeleteForever } from '@ndla/icons/editor';
-import Folder from './Folder';
-import { defaultParameters } from '../../../../../stories/defaults';
+import styled from "@emotion/styled";
+import { Meta, StoryFn, StoryObj } from "@storybook/react";
+import { ButtonV2, IconButtonV2 } from "@ndla/button";
+import { spacing } from "@ndla/core";
+import { DropdownMenu, DropdownTrigger, DropdownContent, DropdownItem } from "@ndla/dropdown-menu";
+import { Pencil } from "@ndla/icons/action";
+import { HorizontalMenu } from "@ndla/icons/contentType";
+import { DeleteForever } from "@ndla/icons/editor";
+import Folder from "./Folder";
+import { defaultParameters } from "../../../../../stories/defaults";
 
 export default {
-  title: 'My NDLA/Folder',
+  title: "My NDLA/Folder",
   component: Folder,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   parameters: {
     ...defaultParameters,
   },
@@ -30,13 +30,13 @@ export default {
     },
   },
   args: {
-    id: '3d88300c-1186-47f5-a99a-8ea93fa20981',
-    title: 'Dette er min tittel',
+    id: "3d88300c-1186-47f5-a99a-8ea93fa20981",
+    title: "Dette er min tittel",
     subFolders: 3,
     subResources: 3,
-    description: '',
-    link: '',
-    type: 'list',
+    description: "",
+    link: "",
+    type: "list",
     menu: (
       <DropdownMenu>
         <DropdownTrigger>

package/src/MyNdla/Resource/Folder.tsx

@@ -6,15 +6,15 @@
  *
  */
 
-import { ReactNode } from 'react';
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { fonts, spacing, colors, mq, breakpoints } from '@ndla/core';
-import { FileDocumentOutline, Share } from '@ndla/icons/common';
-import { FolderOutlined, FolderSharedOutlined } from '@ndla/icons/contentType';
-import { ResourceTitleLink } from '../../Resource/resourceComponents';
+import { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { fonts, spacing, colors, mq, breakpoints } from "@ndla/core";
+import { FileDocumentOutline, Share } from "@ndla/icons/common";
+import { FolderOutlined, FolderSharedOutlined } from "@ndla/icons/contentType";
+import { ResourceTitleLink } from "../../Resource/resourceComponents";
 
-export type LayoutType = 'list' | 'listLarger' | 'block';
+export type LayoutType = "list" | "listLarger" | "block";
 
 const FolderWrapper = styled.div`
   display: flex;
@@ -26,13 +26,13 @@ const FolderWrapper = styled.div`
   word-break: break-word;
 
   ${mq.range({ until: breakpoints.mobileWide })} {
-    &:not([data-type='list']) {
+    &:not([data-type="list"]) {
       flex-direction: column;
       align-items: unset;
     }
   }
 
-  &[data-type='block'] {
+  &[data-type="block"] {
     flex-direction: column;
     align-items: unset;
   }
@@ -59,7 +59,7 @@ const TitleWrapper = styled.div`
   align-items: center;
   gap: ${spacing.xsmall};
   justify-content: space-between;
-  &[data-type='block'] {
+  &[data-type="block"] {
     margin-bottom: 0;
   }
 `;
@@ -75,7 +75,7 @@ const IconWrapper = styled.div`
 `;
 
 const FolderTitle = styled.h2`
-  ${fonts.sizes('16px', '20px')};
+  ${fonts.sizes("16px", "20px")};
   font-weight: ${fonts.weight.semibold};
   margin: 0px !important;
   flex: 1;
@@ -106,7 +106,7 @@ const CountContainer = styled.div`
   margin: 0 ${spacing.small} 0 ${spacing.nsmall};
 
   ${mq.range({ until: breakpoints.tablet })} {
-    &[data-type='list'] {
+    &[data-type="list"] {
       display: none;
     }
   }
@@ -126,13 +126,13 @@ const IconTextWrapper = styled.div`
 `;
 
 interface IconCountProps {
-  type: 'resource' | 'folder';
+  type: "resource" | "folder";
   count?: number;
   layoutType: LayoutType;
 }
 
 const Count = ({ type, count, layoutType }: IconCountProps) => {
-  const Icon = type === 'resource' ? FileDocumentOutline : FolderOutlined;
+  const Icon = type === "resource" ? FileDocumentOutline : FolderOutlined;
   const { t } = useTranslation();
   if (!count) return null;
 
@@ -156,7 +156,7 @@ interface Props {
   isShared?: boolean;
 }
 
-const Folder = ({ id, link, title, subFolders, subResources, type = 'list', menu, isShared }: Props) => {
+const Folder = ({ id, link, title, subFolders, subResources, type = "list", menu, isShared }: Props) => {
   const { t } = useTranslation();
   const Icon = isShared ? FolderSharedOutlined : FolderOutlined;
 
@@ -164,7 +164,7 @@ const Folder = ({ id, link, title, subFolders, subResources, type = 'list', menu
     <FolderWrapper data-type={type} id={id}>
       <TitleWrapper data-type={type}>
         <IconWrapper
-          aria-label={`${isShared ? `${t('myNdla.folder.sharing.shared')} ` : ''}${t('myNdla.folder.folder')}`}
+          aria-label={`${isShared ? `${t("myNdla.folder.sharing.shared")} ` : ""}${t("myNdla.folder.folder")}`}
         >
           <Icon />
         </IconWrapper>
@@ -180,11 +180,11 @@ const Folder = ({ id, link, title, subFolders, subResources, type = 'list', menu
             // Information regarding the shared status of a folder is read previously, ignore this
             <IconTextWrapper aria-hidden>
               <Share />
-              <span>{t('myNdla.folder.sharing.shared')}</span>
+              <span>{t("myNdla.folder.sharing.shared")}</span>
             </IconTextWrapper>
           )}
-          <Count layoutType={type} type={'folder'} count={subFolders} />
-          <Count layoutType={type} type={'resource'} count={subResources} />
+          <Count layoutType={type} type={"folder"} count={subFolders} />
+          <Count layoutType={type} type={"resource"} count={subResources} />
         </CountContainer>
         {menu}
       </MenuWrapper>

package/src/MyNdla/Resource/FolderInput.stories.tsx

@@ -6,13 +6,13 @@
  *
  */
 
-import { Meta, StoryObj } from '@storybook/react';
-import FolderInput from './FolderInput';
-import { defaultParameters } from '../../../../../stories/defaults';
+import { Meta, StoryObj } from "@storybook/react";
+import FolderInput from "./FolderInput";
+import { defaultParameters } from "../../../../../stories/defaults";
 
 export default {
-  title: 'My NDLA/FolderInput',
-  tags: ['autodocs'],
+  title: "My NDLA/FolderInput",
+  tags: ["autodocs"],
   component: FolderInput,
   parameters: {
     inlineStories: true,
@@ -21,8 +21,8 @@ export default {
   args: {
     labelHidden: false,
     loading: false,
-    label: 'Create new folder',
-    name: 'folder',
+    label: "Create new folder",
+    name: "folder",
   },
 } as Meta<typeof FolderInput>;
 

package/src/MyNdla/Resource/FolderInput.tsx

@@ -6,17 +6,17 @@
  *
  */
 
-import { ComponentPropsWithRef, forwardRef, useEffect, useRef } from 'react';
-import { isMobile } from 'react-device-detect';
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { IconButtonV2 } from '@ndla/button';
-import { colors, spacing } from '@ndla/core';
-import { InputContainer, FieldErrorMessage, InputV3, FieldHelper, FormControl, Label } from '@ndla/forms';
-import { Spinner } from '@ndla/icons';
-import { Cross } from '@ndla/icons/action';
-import { Done } from '@ndla/icons/editor';
-import { composeRefs } from '@ndla/util';
+import { ComponentPropsWithRef, forwardRef, useEffect, useRef } from "react";
+import { isMobile } from "react-device-detect";
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { IconButtonV2 } from "@ndla/button";
+import { colors, spacing } from "@ndla/core";
+import { InputContainer, FieldErrorMessage, InputV3, FieldHelper, FormControl, Label } from "@ndla/forms";
+import { Spinner } from "@ndla/icons";
+import { Cross } from "@ndla/icons/action";
+import { Done } from "@ndla/icons/editor";
+import { composeRefs } from "@ndla/util";
 
 interface Props {
   loading?: boolean;
@@ -58,7 +58,7 @@ const StyledInputContainer = styled(InputContainer)<StyledInputProps>`
     border-color: ${colors.brand.light};
   }
 
-  &[data-error='true'] {
+  &[data-error="true"] {
     background-image: ${borderStyle(true)};
   }
   input {
@@ -81,14 +81,14 @@ const Row = styled.div`
   padding-right: ${spacing.xsmall};
 `;
 
-const FolderInput = forwardRef<HTMLInputElement, Props & ComponentPropsWithRef<'input'>>(
+const FolderInput = forwardRef<HTMLInputElement, Props & ComponentPropsWithRef<"input">>(
   ({ loading, label, error, onClose, onSave, ...rest }, ref) => {
     const { t } = useTranslation();
     const inputRef = useRef<HTMLInputElement | null>(null);
 
     useEffect(() => {
       if (isMobile) {
-        inputRef.current?.scrollIntoView({ behavior: 'smooth' });
+        inputRef.current?.scrollIntoView({ behavior: "smooth" });
       }
     }, []);
 
@@ -102,24 +102,24 @@ const FolderInput = forwardRef<HTMLInputElement, Props & ComponentPropsWithRef<'
               <>
                 {!error && (
                   <IconButtonV2
-                    variant={'ghost'}
+                    variant={"ghost"}
                     colorTheme="light"
                     tabIndex={0}
-                    aria-label={t('save')}
-                    title={t('save')}
+                    aria-label={t("save")}
+                    title={t("save")}
                     size="small"
                     onClick={onSave}
                   >
                     <Done />
                   </IconButtonV2>
                 )}
-                <IconButtonV2 aria-label={t('close')} title={t('close')} size="small" variant="ghost" onClick={onClose}>
+                <IconButtonV2 aria-label={t("close")} title={t("close")} size="small" variant="ghost" onClick={onClose}>
                   <Cross />
                 </IconButtonV2>
               </>
             ) : (
               <FieldHelper>
-                <StyledSpinner size="normal" aria-label={t('loading')} />
+                <StyledSpinner size="normal" aria-label={t("loading")} />
               </FieldHelper>
             )}
           </Row>

package/src/MyNdla/Resource/index.ts

@@ -6,6 +6,6 @@
  *
  */
 
-import Folder from './Folder';
-import FolderInput from './FolderInput';
+import Folder from "./Folder";
+import FolderInput from "./FolderInput";
 export { Folder, FolderInput };

package/src/MyNdla/index.ts

@@ -6,6 +6,6 @@
  *
  */
 
-import Folder from './Resource/Folder';
-import FolderInput from './Resource/FolderInput';
+import Folder from "./Resource/Folder";
+import FolderInput from "./Resource/FolderInput";
 export { Folder, FolderInput };

package/src/NDLAFilm/AllMoviesAlphabetically.tsx

@@ -6,15 +6,15 @@
  *
  */
 
-import groupBy from 'lodash/groupBy';
-import sortBy from 'lodash/sortBy';
-import { RefObject, useMemo, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { breakpoints, mq, spacing, spacingUnit, colors } from '@ndla/core';
-import SafeLink from '@ndla/safelink';
-import { MovieType } from './types';
-import { makeSrcQueryString } from '../Image';
+import groupBy from "lodash/groupBy";
+import sortBy from "lodash/sortBy";
+import { RefObject, useMemo, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { breakpoints, mq, spacing, spacingUnit, colors } from "@ndla/core";
+import SafeLink from "@ndla/safelink";
+import { MovieType } from "./types";
+import { makeSrcQueryString } from "../Image";
 
 const IMAGE_WIDTH = 143;
 
@@ -24,7 +24,7 @@ const Letter = styled.h2`
     text-indent: ${spacingUnit * 0.75}px;
   }
   &:after {
-    content: '';
+    content: "";
     display: block;
     height: 1px;
     background: ${colors.brand.greyDark};
@@ -110,9 +110,12 @@ const groupMovies = (movies: MovieType[]) => {
   const grouped = groupBy(sortedMovies, (movie) => {
     const firstChar = movie.title[0]?.toUpperCase();
     const isLetter = firstChar?.match(/[A-Z\WÆØÅ]+/);
-    return isLetter ? firstChar : '#';
+    return isLetter ? firstChar : "#";
   });
-  return Object.entries(grouped).map(([letter, movies]) => ({ letter, movies }));
+  return Object.entries(grouped).map(([letter, movies]) => ({
+    letter,
+    movies,
+  }));
 };
 
 const AllMoviesAlphabetically = ({ movies }: Props) => {
@@ -125,7 +128,7 @@ const AllMoviesAlphabetically = ({ movies }: Props) => {
     <StyledWrapper ref={wrapperRef}>
       {groupedMovies.map(({ letter, movies }) => (
         <MovieGroup key={letter}>
-          <Letter aria-label={t('filmfrontpage.allMovieGroupTitleLabel', { letter })}>{letter}</Letter>
+          <Letter aria-label={t("filmfrontpage.allMovieGroupTitleLabel", { letter })}>{letter}</Letter>
           {movies.map((movie) => (
             <MovieItem key={movie.id}>
               <StyledSafeLink to={movie.path}>

package/src/NDLAFilm/FilmContentCard.tsx

@@ -6,13 +6,13 @@
  *
  */
 
-import { HTMLAttributes } from 'react';
-import styled from '@emotion/styled';
-import { spacing, colors, fonts, breakpoints, misc, mq } from '@ndla/core';
-import SafeLink from '@ndla/safelink';
-import FilmContentCardTags from './FilmContentCardTags';
-import { MovieResourceType, MovieType } from './types';
-import { makeSrcQueryString } from '../Image';
+import { HTMLAttributes } from "react";
+import styled from "@emotion/styled";
+import { spacing, colors, fonts, breakpoints, misc, mq } from "@ndla/core";
+import SafeLink from "@ndla/safelink";
+import FilmContentCardTags from "./FilmContentCardTags";
+import { MovieResourceType, MovieType } from "./types";
+import { makeSrcQueryString } from "../Image";
 
 interface Props extends HTMLAttributes<HTMLElement> {
   movie: MovieType;
@@ -20,7 +20,7 @@ interface Props extends HTMLAttributes<HTMLElement> {
   hideTags?: boolean;
   className?: string;
   lazy?: boolean;
-  type?: 'slideshow' | 'list';
+  type?: "slideshow" | "list";
 }
 
 const FilmContentCard = ({
@@ -28,11 +28,11 @@ const FilmContentCard = ({
   resourceTypes,
   hideTags = false,
   className,
-  type = 'slideshow',
+  type = "slideshow",
   lazy,
   ...rest
 }: Props) => {
-  const backgroundImage = metaImage ? `${metaImage.url}?${makeSrcQueryString(600)}` : '';
+  const backgroundImage = metaImage ? `${metaImage.url}?${makeSrcQueryString(600)}` : "";
   const contentTypeId = `${type}-content-type-${id}`;
 
   return (
@@ -45,7 +45,7 @@ const FilmContentCard = ({
       {...rest}
     >
       <ImageWrapper>
-        <StyledImage src={backgroundImage} loading={lazy ? 'lazy' : 'eager'} alt="" />
+        <StyledImage src={backgroundImage} loading={lazy ? "lazy" : "eager"} alt="" />
         {movieResourceTypes && !hideTags && (
           <FilmContentCardTags
             id={contentTypeId}
@@ -60,14 +60,14 @@ const FilmContentCard = ({
 };
 
 const StyledMovieTitle = styled.span`
-  ${fonts.sizes('14px', '20px')};
+  ${fonts.sizes("14px", "20px")};
   font-weight: ${fonts.weight.semibold};
   color: #fff;
   @media (min-width: ${breakpoints.mobileWide}) {
-    ${fonts.sizes('16px', '22px')};
+    ${fonts.sizes("16px", "22px")};
   }
   @media (min-width: ${breakpoints.tablet}) {
-    ${fonts.sizes('18px', '24px')};
+    ${fonts.sizes("18px", "24px")};
   }
 `;
 
@@ -88,9 +88,11 @@ interface StyledSlideWrapperProps {
   columnWidth?: number;
 }
 
-const shouldForwardProp = (p: string) => p !== 'columnWidth';
+const shouldForwardProp = (p: string) => p !== "columnWidth";
 
-const StyledSafeLink = styled(SafeLink, { shouldForwardProp })<StyledSlideWrapperProps>`
+const StyledSafeLink = styled(SafeLink, {
+  shouldForwardProp,
+})<StyledSlideWrapperProps>`
   display: flex;
   flex-direction: column;
   gap: ${spacing.small};
@@ -110,7 +112,7 @@ const StyledSafeLink = styled(SafeLink, { shouldForwardProp })<StyledSlideWrappe
       opacity: 0.7;
     }
   }
-  &[data-type='slideshow'] {
+  &[data-type="slideshow"] {
     width: 30vw;
     ${mq.range({ until: breakpoints.tablet })} {
       width: 40vw;
@@ -119,7 +121,7 @@ const StyledSafeLink = styled(SafeLink, { shouldForwardProp })<StyledSlideWrappe
       width: 30vw;
     }
   }
-  &[data-type='list'] {
+  &[data-type="list"] {
     width: 40vw;
     ${mq.range({ from: breakpoints.tablet, until: breakpoints.desktop })} {
       width: 28vw;

package/src/NDLAFilm/FilmContentCardTags.tsx

@@ -6,9 +6,9 @@
  *
  */
 
-import styled from '@emotion/styled';
-import { spacing, spacingUnit, colors, fonts, misc } from '@ndla/core';
-import { MovieResourceType } from './types';
+import styled from "@emotion/styled";
+import { spacing, spacingUnit, colors, fonts, misc } from "@ndla/core";
+import { MovieResourceType } from "./types";
 
 const StyledWrapperDiv = styled.div`
   transition: opacity 200ms ease;
@@ -21,7 +21,7 @@ const StyledWrapperDiv = styled.div`
 `;
 
 const StyledMovieTags = styled.span`
-  ${fonts.sizes('14px', '16px')};
+  ${fonts.sizes("14px", "16px")};
   font-weight: ${fonts.weight.semibold};
   background: ${colors.brand.greyLight};
   padding: calc(${spacing.xsmall} / 2) ${spacing.xsmall};

package/src/NDLAFilm/FilmMovieList.tsx

@@ -6,14 +6,14 @@
  *
  */
 
-import styled from '@emotion/styled';
-import { IconButtonV2 } from '@ndla/button';
-import { Carousel } from '@ndla/carousel';
-import { breakpoints, mq, spacing } from '@ndla/core';
-import { ChevronLeft, ChevronRight } from '@ndla/icons/common';
-import FilmContentCard from './FilmContentCard';
-import { StyledHeadingH2 } from './filmStyles';
-import { MovieResourceType, MovieType } from './types';
+import styled from "@emotion/styled";
+import { IconButtonV2 } from "@ndla/button";
+import { Carousel } from "@ndla/carousel";
+import { breakpoints, mq, spacing } from "@ndla/core";
+import { ChevronLeft, ChevronRight } from "@ndla/icons/common";
+import FilmContentCard from "./FilmContentCard";
+import { StyledHeadingH2 } from "./filmStyles";
+import { MovieResourceType, MovieType } from "./types";
 
 interface Props {
   movies: MovieType[];