@ndla/ui 50.8.0 → 50.8.2

package/src/NDLAFilm/FilmMovieSearch.tsx

@@ -6,15 +6,15 @@
  *
  */
 
-import { useCallback, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { spacing, mq, breakpoints, colors } from '@ndla/core';
-import SafeLink from '@ndla/safelink';
-import { Option, Select, SingleValue } from '@ndla/select';
-import { StyledHeadingH2 } from './filmStyles';
-import { MovieResourceType } from './types';
-import { OneColumn } from '..';
+import { useCallback, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { spacing, mq, breakpoints, colors } from "@ndla/core";
+import SafeLink from "@ndla/safelink";
+import { Option, Select, SingleValue } from "@ndla/select";
+import { StyledHeadingH2 } from "./filmStyles";
+import { MovieResourceType } from "./types";
+import { OneColumn } from "..";
 
 const FilmMovieSearchContainer = styled.div`
   margin: ${spacing.normal} 0 ${spacing.large};
@@ -73,19 +73,25 @@ const FilmMovieSearch = ({
   const { t } = useTranslation();
   const selectedOption = useMemo(() => {
     if (resourceTypeSelected) {
-      return { value: resourceTypeSelected.id, label: resourceTypeSelected.name };
+      return {
+        value: resourceTypeSelected.id,
+        label: resourceTypeSelected.name,
+      };
     }
-    return { value: 'fromNdla', label: t('ndlaFilm.search.categoryFromNdla') };
+    return { value: "fromNdla", label: t("ndlaFilm.search.categoryFromNdla") };
   }, [resourceTypeSelected, t]);
 
   const options: Option[] = useMemo(() => {
-    const fromNdla = { value: 'fromNdla', label: t('ndlaFilm.search.categoryFromNdla') };
+    const fromNdla = {
+      value: "fromNdla",
+      label: t("ndlaFilm.search.categoryFromNdla"),
+    };
     return [fromNdla].concat(resourceTypes.map((rt) => ({ value: rt.id, label: rt.name })));
   }, [resourceTypes, t]);
 
   const onChange = useCallback(
     (value: SingleValue) => {
-      if (value?.value === 'fromNdla') {
+      if (value?.value === "fromNdla") {
         onChangeResourceType();
       } else {
         onChangeResourceType(value?.value);
@@ -99,7 +105,7 @@ const FilmMovieSearch = ({
       <OneColumn>
         <TopicNavigation>
           <StyledHeadingH2 id={skipToContentId} className="u-12/12 u-4/12@tablet">
-            {`${t('ndlaFilm.subjectsInMovies')}:`}
+            {`${t("ndlaFilm.subjectsInMovies")}:`}
           </StyledHeadingH2>
           <nav className="u-12/12 u-8/12@tablet" aria-labelledby={skipToContentId}>
             <StyledUl>
@@ -118,8 +124,8 @@ const FilmMovieSearch = ({
           value={selectedOption}
           onChange={onChange}
           colorTheme="white"
-          placeholder={t('ndlaFilm.search.chooseCategory')}
-          prefix={`${t('ndlaFilm.search.chooseCategory')} `}
+          placeholder={t("ndlaFilm.search.chooseCategory")}
+          prefix={`${t("ndlaFilm.search.chooseCategory")} `}
         />
       </OneColumn>
     </FilmMovieSearchContainer>

package/src/NDLAFilm/FilmSlideshow.tsx

@@ -6,16 +6,16 @@
  *
  */
 
-import { useCallback, useState } from 'react';
-import styled from '@emotion/styled';
-import { IconButtonV2 } from '@ndla/button';
-import { Carousel } from '@ndla/carousel';
-import { breakpoints, colors, misc, mq, spacing } from '@ndla/core';
-import { ChevronLeft, ChevronRight } from '@ndla/icons/common';
-import SafeLink from '@ndla/safelink';
-import FilmContentCard from './FilmContentCard';
-import { MovieType } from './types';
-import Image from '../Image';
+import { useCallback, useState } from "react";
+import styled from "@emotion/styled";
+import { IconButtonV2 } from "@ndla/button";
+import { Carousel } from "@ndla/carousel";
+import { breakpoints, colors, misc, mq, spacing } from "@ndla/core";
+import { ChevronLeft, ChevronRight } from "@ndla/icons/common";
+import SafeLink from "@ndla/safelink";
+import FilmContentCard from "./FilmContentCard";
+import { MovieType } from "./types";
+import Image from "../Image";
 
 interface Props {
   slideshow: MovieType[];
@@ -87,11 +87,13 @@ const SlideshowButton = styled(IconButtonV2)`
   margin-top: ${spacing.normal};
 `;
 
-const shouldForwardProp = (p: string) => p !== 'current';
+const shouldForwardProp = (p: string) => p !== "current";
 
-const StyledFilmContentCard = styled(FilmContentCard, { shouldForwardProp })<StyledFilmContentCardProps>`
+const StyledFilmContentCard = styled(FilmContentCard, {
+  shouldForwardProp,
+})<StyledFilmContentCardProps>`
   margin-bottom: 2%;
-  transform: ${(p) => (p.current ? 'translateY(0%)' : 'translateY(10%)')};
+  transform: ${(p) => (p.current ? "translateY(0%)" : "translateY(10%)")};
   transition: all 200ms;
 `;
 
@@ -102,7 +104,7 @@ const FilmSlideshow = ({ slideshow }: Props) => {
     <section>
       <StyledSafeLink to={currentSlide.path} tabIndex={-1} aria-hidden>
         <StyledImg
-          src={currentSlide.metaImage?.url ?? ''}
+          src={currentSlide.metaImage?.url ?? ""}
           sizes="(min-width: 1140px) 1140px, (min-width: 720px) 100vw, 100vw"
           alt=""
         />
@@ -164,7 +166,7 @@ const FilmCard = ({ setCurrentSlide, movie, current }: FilmCardProps) => {
       }}
       onFocus={() => setCurrentSlide(movie)}
       current={current}
-      aria-describedby={'currentMovieDescription'}
+      aria-describedby={"currentMovieDescription"}
       key={movie.id}
       movie={movie}
       resourceTypes={[]}

package/src/NDLAFilm/MovieGrid.tsx

@@ -6,12 +6,12 @@
  *
  */
 
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { breakpoints, mq, spacing } from '@ndla/core';
-import FilmContentCard from './FilmContentCard';
-import { setAnimations, StyledHeadingH1 } from './filmStyles';
-import { MovieResourceType, MovieType } from './types';
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { breakpoints, mq, spacing } from "@ndla/core";
+import FilmContentCard from "./FilmContentCard";
+import { setAnimations, StyledHeadingH1 } from "./filmStyles";
+import { MovieResourceType, MovieType } from "./types";
 
 interface MovieListingProps {
   marginLeft?: number;
@@ -68,8 +68,8 @@ const MovieGrid = ({
         {resourceTypeName && resourceTypeName.name}
         <small>
           {fetchingMoviesByType
-            ? t('ndlaFilm.loadingMovies')
-            : `${moviesByType.length} ${t('ndlaFilm.movieMatchInCategory')}`}
+            ? t("ndlaFilm.loadingMovies")
+            : `${moviesByType.length} ${t("ndlaFilm.movieMatchInCategory")}`}
         </small>
       </StyledHeadingH1>
       <MovieListing>

package/src/NDLAFilm/VisualElement.tsx

@@ -6,8 +6,8 @@
  *
  */
 
-import styled from '@emotion/styled';
-import Image from '../Image';
+import styled from "@emotion/styled";
+import Image from "../Image";
 
 const StylediFrame = styled.iframe`
   height: 100%;
@@ -26,9 +26,9 @@ interface Props {
 }
 const VisualElement = ({ visualElement }: Props) => {
   const { type, url, alt } = visualElement;
-  if (type === 'image') {
-    return <Image src={url} alt={alt ?? ''} />;
-  } else if (type === 'brightcove') {
+  if (type === "image") {
+    return <Image src={url} alt={alt ?? ""} />;
+  } else if (type === "brightcove") {
     return <StylediFrame allowFullScreen={true} src={url} />;
   } else {
     return null;

package/src/NDLAFilm/__tests__/isLetter-test.jsx

@@ -8,13 +8,13 @@
 
 /* eslint-env jest */
 
-import { isLetter } from '../isLetter';
+import { isLetter } from "../isLetter";
 
-test('Check is letter', () => {
-  expect(isLetter('A')).toBe(true);
-  expect(isLetter('1')).toBe(false);
-  expect(isLetter('æ')).toBe(true);
-  expect(isLetter('?')).toBe(false);
-  expect(isLetter('!')).toBe(false);
-  expect(isLetter(' ')).toBe(false);
+test("Check is letter", () => {
+  expect(isLetter("A")).toBe(true);
+  expect(isLetter("1")).toBe(false);
+  expect(isLetter("æ")).toBe(true);
+  expect(isLetter("?")).toBe(false);
+  expect(isLetter("!")).toBe(false);
+  expect(isLetter(" ")).toBe(false);
 });

package/src/NDLAFilm/filmStyles.ts

@@ -6,22 +6,22 @@
  *
  */
 
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { fonts, spacing, colors, mq, breakpoints } from '@ndla/core';
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { fonts, spacing, colors, mq, breakpoints } from "@ndla/core";
 
 export const setAnimations = () => {
   const styles: any = {};
   for (let i = 1; i < 20; i++) {
     styles[`> div:nth-child(${i + 1})`] = {
-      'animation-delay': `${i * 50}ms`,
+      "animation-delay": `${i * 50}ms`,
     };
   }
   return styles;
 };
 
 const headingStyle = css`
-  ${fonts.sizes('22px', '26px')};
+  ${fonts.sizes("22px", "26px")};
   font-weight: ${fonts.weight.semibold};
   text-transform: uppercase;
   letter-spacing: 0.05em;

package/src/NDLAFilm/index.ts

@@ -6,10 +6,10 @@
  *
  */
 
-import AllMoviesAlphabetically from './AllMoviesAlphabetically';
-import FilmMovieList from './FilmMovieList';
-import FilmMovieSearch from './FilmMovieSearch';
-import FilmSlideshow from './FilmSlideshow';
-import MovieGrid from './MovieGrid';
+import AllMoviesAlphabetically from "./AllMoviesAlphabetically";
+import FilmMovieList from "./FilmMovieList";
+import FilmMovieSearch from "./FilmMovieSearch";
+import FilmSlideshow from "./FilmSlideshow";
+import MovieGrid from "./MovieGrid";
 
 export { FilmSlideshow, MovieGrid, FilmMovieSearch, FilmMovieList, AllMoviesAlphabetically };

package/src/Navigation/NavigationBox.tsx

@@ -6,17 +6,17 @@
  *
  */
 
-import { MouseEvent } from 'react';
-import { useTranslation } from 'react-i18next';
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { ButtonV2 } from '@ndla/button';
-import { breakpoints, colors, misc, mq, spacing } from '@ndla/core';
-import { Additional, HumanMaleBoard } from '@ndla/icons/common';
-import { SafeLinkButton } from '@ndla/safelink';
-import { Switch } from '@ndla/switch';
-import { Heading } from '@ndla/typography';
-import { uuid } from '@ndla/util';
+import { MouseEvent } from "react";
+import { useTranslation } from "react-i18next";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { ButtonV2 } from "@ndla/button";
+import { breakpoints, colors, misc, mq, spacing } from "@ndla/core";
+import { Additional, HumanMaleBoard } from "@ndla/icons/common";
+import { SafeLinkButton } from "@ndla/safelink";
+import { Switch } from "@ndla/switch";
+import { Heading } from "@ndla/typography";
+import { uuid } from "@ndla/util";
 
 const StyledWrapper = styled.nav`
   margin: ${spacing.normal} 0 ${spacing.mediumlarge};
@@ -29,7 +29,7 @@ const StyledHeadingWrapper = styled.div`
 `;
 
 const StyledHeading = styled(Heading)`
-  &[data-inverted='true'] {
+  &[data-inverted="true"] {
     color: ${colors.white};
   }
 `;
@@ -41,7 +41,7 @@ const StyledList = styled.ul`
   flex-direction: column;
   gap: ${spacing.xxsmall};
 
-  &[data-direction='horizontal'] {
+  &[data-direction="horizontal"] {
     ${mq.range({ from: breakpoints.tablet })} {
       column-count: 2;
       gap: 20px;
@@ -60,7 +60,7 @@ const StyledListItem = styled.li`
   padding: 0;
   break-inside: avoid;
 
-  &[data-direction='floating'] {
+  &[data-direction="floating"] {
     display: inline-block;
     margin: 0 ${spacing.xsmall} ${spacing.xsmall} 0;
     ${mq.range({ until: breakpoints.mobileWide })} {
@@ -77,13 +77,13 @@ const StyledButtonContent = styled.span`
 `;
 
 const StyledButtonContentText = styled.span`
-  &[data-additional='true'][data-restricted='true'] {
+  &[data-additional="true"][data-restricted="true"] {
     padding-left: ${spacing.medium};
   }
-  &[data-additional='true'] {
+  &[data-additional="true"] {
     padding-left: ${spacing.small};
   }
-  &[data-restricted='true'] {
+  &[data-restricted="true"] {
     padding-left: ${spacing.small};
   }
 `;
@@ -123,7 +123,7 @@ const StyledButtonContentSelected = styled.span`
 
 const StyledListElementWrapper = styled.div`
   position: relative;
-  &[data-additional='true'] {
+  &[data-additional="true"] {
     & > * {
       border: 1px dashed ${colors.brand.dark};
       background-clip: padding-box;
@@ -133,7 +133,7 @@ const StyledListElementWrapper = styled.div`
         background-clip: padding-box;
         color: ${colors.white};
       }
-      &[data-color-mode='light'][data-selected='false'] {
+      &[data-color-mode="light"][data-selected="false"] {
         border: 1px dashed ${colors.brand.tertiary};
       }
     }
@@ -157,26 +157,26 @@ export type ItemProps = {
 
 type Props = {
   heading?: string;
-  colorMode?: 'primary' | 'darker' | 'light' | 'greyLightest' | 'greyLighter';
+  colorMode?: "primary" | "darker" | "light" | "greyLightest" | "greyLighter";
   isButtonElements?: boolean;
   items?: ItemProps[];
   onClick?: (event: MouseEvent<HTMLElement>, id?: string) => void;
   hasAdditionalResources?: boolean;
   showAdditionalResources?: boolean;
-  listDirection?: 'horizontal' | 'floating';
+  listDirection?: "horizontal" | "floating";
   invertedStyle?: boolean;
   onToggleAdditionalResources?: (checked: boolean) => void;
 };
 
 export const NavigationBox = ({
   heading,
-  colorMode = 'primary',
+  colorMode = "primary",
   items,
   isButtonElements,
   onClick,
   hasAdditionalResources,
   showAdditionalResources = false,
-  listDirection = 'horizontal',
+  listDirection = "horizontal",
   invertedStyle,
   onToggleAdditionalResources = () => {},
 }: Props) => {
@@ -194,9 +194,9 @@ export const NavigationBox = ({
           <Switch
             id={uuid()}
             checked={showAdditionalResources}
-            label={t('navigation.additionalTopics')}
+            label={t("navigation.additionalTopics")}
             onChange={onToggleAdditionalResources}
-            css={invertedStyle ? { color: '#fff' } : {}}
+            css={invertedStyle ? { color: "#fff" } : {}}
           />
         )}
       </StyledHeadingWrapper>
@@ -209,8 +209,8 @@ export const NavigationBox = ({
               data-selected={item.selected}
             >
               <ListElementType
-                to={item.url ?? ''}
-                colorTheme={item.selected ? 'darker' : colorMode}
+                to={item.url ?? ""}
+                colorTheme={item.selected ? "darker" : colorMode}
                 size="medium"
                 shape="sharp"
                 css={listElementStyle}
@@ -227,7 +227,7 @@ export const NavigationBox = ({
                     data-color-mode={colorMode}
                   >
                     <StyledMarksWrapper>
-                      {item.isAdditionalResource && <StyledAdditional aria-label={t('resource.additionalTooltip')} />}
+                      {item.isAdditionalResource && <StyledAdditional aria-label={t("resource.additionalTooltip")} />}
                       {item.isRestrictedResource && (
                         <StyledHumanBoardIconWrapper>
                           <HumanMaleBoard />

package/src/Navigation/index.ts

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

package/src/NoContentBox/NoContentBox.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { ButtonV2 } from '@ndla/button';
+import { ButtonV2 } from "@ndla/button";
 
 interface Props {
   onClick?: () => void;

package/src/NoContentBox/index.ts

@@ -6,6 +6,6 @@
  *
  */
 
-import NoContentBox from './NoContentBox';
+import NoContentBox from "./NoContentBox";
 
 export default NoContentBox;

package/src/Notion/Notion.tsx

@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { Fragment, ReactNode } from 'react';
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { breakpoints, fonts, mq, spacing } from '@ndla/core';
+import { Fragment, ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { breakpoints, fonts, mq, spacing } from "@ndla/core";
 
 const ContentWrapper = styled.div`
   ${mq.range({ until: breakpoints.tabletWide })} {
@@ -29,13 +29,13 @@ const ContentWrapper = styled.div`
   }
 `;
 const TextWrapper = styled.div<{ hasVisualElement: boolean }>`
-  width: ${(props) => (props.hasVisualElement ? '75%' : '100%')};
+  width: ${(props) => (props.hasVisualElement ? "75%" : "100%")};
 
   ${mq.range({ until: breakpoints.tabletWide })} {
     width: 100%;
   }
   font-family: ${fonts.sans};
-  ${fonts.sizes('18px', '28px')};
+  ${fonts.sizes("18px", "28px")};
   ${ContentWrapper} .c-figure.expanded + & {
     width: 100%;
   }
@@ -58,7 +58,7 @@ const ClearWrapper = styled.div`
 const LabelsContainer = styled.div`
   display: flex;
   align-items: center;
-  ${fonts.sizes('14px', '24px')};
+  ${fonts.sizes("14px", "24px")};
   font-family: ${fonts.sans};
   margin: ${spacing.small} 0;
 `;
@@ -87,10 +87,10 @@ const Notion = ({ id, labels = [], text, title, visualElement, imageElement, chi
           {text}
           {!!labels.length && (
             <LabelsContainer>
-              {t('searchPage.resultType.notionLabels')}
+              {t("searchPage.resultType.notionLabels")}
               {labels.map((label, i) => (
                 <Fragment key={`notion-${id}-label-${i + 1}`}>
-                  {' '}
+                  {" "}
                   {label}
                   {i < labels?.length - 1 && <> &#8226;</>}
                 </Fragment>

package/src/Notion/NotionImage.tsx

@@ -6,11 +6,11 @@
  *
  */
 
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { animations, breakpoints, mq, spacing } from '@ndla/core';
-import { Figure, FigureOpenDialogButton } from '../Figure';
-import Image from '../Image';
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { animations, breakpoints, mq, spacing } from "@ndla/core";
+import { Figure, FigureOpenDialogButton } from "../Figure";
+import Image from "../Image";
 
 const StyledImageWrapper = styled.div`
   overflow: hidden;
@@ -38,7 +38,7 @@ const StyledImage = styled(Image)`
 `;
 
 interface Props {
-  type: 'image' | 'video' | 'h5p' | 'iframe' | 'external' | 'audio' | undefined;
+  type: "image" | "video" | "h5p" | "iframe" | "external" | "audio" | undefined;
   id: string;
   src: string;
   alt: string;
@@ -49,7 +49,7 @@ export const NotionImage = ({ id, src, alt, type }: Props) => {
   const imageFigureId = `image-figure-${id}`;
 
   return (
-    <Figure resizeIframe id={imageFigureId} type={'full-column'}>
+    <Figure resizeIframe id={imageFigureId} type={"full-column"}>
       <StyledImageWrapper>
         <StyledImage
           alt={alt}
@@ -58,8 +58,8 @@ export const NotionImage = ({ id, src, alt, type }: Props) => {
             <FigureOpenDialogButton
               type={type}
               messages={{
-                zoomImageButtonLabel: t('license.images.itemImage.zoomImageButtonLabel'),
-                zoomOutImageButtonLabel: t('license.image.itemImage.zoomOutImageButtonLabel'),
+                zoomImageButtonLabel: t("license.images.itemImage.zoomImageButtonLabel"),
+                zoomOutImageButtonLabel: t("license.image.itemImage.zoomOutImageButtonLabel"),
               }}
             />
           }

package/src/Notion/index.ts

@@ -6,4 +6,4 @@
  *
  */
 
-export { default as Notion } from './Notion';
+export { default as Notion } from "./Notion";

package/src/Programme/Programme.tsx

@@ -6,13 +6,13 @@
  *
  */
 
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { breakpoints, mq, spacing } from '@ndla/core';
-import { Heading } from '@ndla/typography';
-import ProgrammeSubjects, { GradesProps } from './ProgrammeSubjects';
-import LayoutItem, { OneColumn } from '../Layout';
-import MessageBox from '../Messages/MessageBox';
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { breakpoints, mq, spacing } from "@ndla/core";
+import { Heading } from "@ndla/typography";
+import ProgrammeSubjects, { GradesProps } from "./ProgrammeSubjects";
+import LayoutItem, { OneColumn } from "../Layout";
+import MessageBox from "../Messages/MessageBox";
 const StyledWrapper = styled.div`
   display: flex;
   flex-direction: column;

package/src/Programme/ProgrammeSubjects.tsx

@@ -6,13 +6,13 @@
  *
  */
 
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { spacing } from '@ndla/core';
-import { SafeLinkButton } from '@ndla/safelink';
-import { MessageBox } from '../Messages';
-import { NavigationBox } from '../Navigation';
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { spacing } from "@ndla/core";
+import { SafeLinkButton } from "@ndla/safelink";
+import { MessageBox } from "../Messages";
+import { NavigationBox } from "../Navigation";
 
 const GradesMenu = styled.ul`
   display: flex;
@@ -43,7 +43,7 @@ type Props = GradesProps & {
   onNavigate?: () => void;
 };
 
-const ProgrammeSubjects = ({ grades, onNavigate, selectedGrade = 'vg1' }: Props) => {
+const ProgrammeSubjects = ({ grades, onNavigate, selectedGrade = "vg1" }: Props) => {
   const { t } = useTranslation();
 
   const grade = useMemo(
@@ -53,14 +53,14 @@ const ProgrammeSubjects = ({ grades, onNavigate, selectedGrade = 'vg1' }: Props)
 
   return (
     <>
-      <GradesMenu aria-label={t('programmes.grades')}>
+      <GradesMenu aria-label={t("programmes.grades")}>
         {grades?.map((item) => {
           const current = item.name.toLowerCase() === selectedGrade;
           return (
             <li key={item.name}>
               <SafeLinkButton
-                to={current ? '' : item.name.toLowerCase()}
-                colorTheme={item !== grade ? 'lighter' : undefined}
+                to={current ? "" : item.name.toLowerCase()}
+                colorTheme={item !== grade ? "lighter" : undefined}
                 shape="pill"
                 size="normal"
                 aria-current={current}
@@ -71,7 +71,7 @@ const ProgrammeSubjects = ({ grades, onNavigate, selectedGrade = 'vg1' }: Props)
           );
         })}
       </GradesMenu>
-      {grade?.missingProgrammeSubjects && <MessageBox>{t('messageBoxInfo.noContent')}</MessageBox>}
+      {grade?.missingProgrammeSubjects && <MessageBox>{t("messageBoxInfo.noContent")}</MessageBox>}
       {grade?.categories?.map((category) => (
         <NavigationBox key={category.name} heading={category.name} items={category.subjects} onClick={onNavigate} />
       ))}

package/src/Programme/index.ts

@@ -6,8 +6,8 @@
  *
  */
 
-import Programme from './Programme';
-import ProgrammeSubjects from './ProgrammeSubjects';
+import Programme from "./Programme";
+import ProgrammeSubjects from "./ProgrammeSubjects";
 
 export { ProgrammeSubjects };
 export default Programme;