@ndla/ui 3.3.14 → 4.0.0

package/src/Frontpage/illustrations/MenuFellesfag.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 
-const Illustration: React.FunctionComponent = () => (
+const Illustration = () => (
   <svg width="940px" height="175px" viewBox="0 0 940 175" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <g id="MenuOpen3" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
       <g id="Group" transform="translate(-0.655172, 9.000000)" stroke="#000000">

package/src/Frontpage/illustrations/MenuStudiespesialiserende.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 
-const Illustration: React.FunctionComponent = () => (
+const Illustration = () => (
   <svg width="940px" height="175px" viewBox="0 0 940 175" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <g id="MenuOpen1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
       <path

package/src/Frontpage/illustrations/MenuYrkesfag.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 
-const Illustration: React.FunctionComponent = () => (
+const Illustration = () => (
   <svg width="940px" height="175px" viewBox="0 0 940 175" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <g id="MenuOpen2" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
       <path

package/src/Frontpage/illustrations/Studiespesialiserende.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 
-const Illustration: React.FunctionComponent = () => (
+const Illustration = () => (
   <svg width="90px" height="90px" viewBox="0 0 90 90" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <g id="Artboard" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
       <path

package/src/Frontpage/illustrations/Yrkesfag.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 
-const Illustration: React.FunctionComponent = () => (
+const Illustration = () => (
   <svg width="90px" height="90px" viewBox="0 0 90 90" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <g id="Artboard" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
       <path

package/src/LanguageSelector/LanguageSelector.tsx

@@ -13,7 +13,6 @@ import FocusTrapReact from 'focus-trap-react';
 // @ts-ignore
 import Button, { appearances } from '@ndla/button';
 import { spacing, misc, colors, mq, breakpoints, animations, fonts, spacingUnit } from '@ndla/core';
-// @ts-ignore
 import { ChevronDown } from '@ndla/icons/common';
 import { useTranslation } from 'react-i18next';
 import LanguageSelectorContent from './LanguageSelectorContent';

package/src/LearningPaths/LearningPathContent.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { mq, breakpoints, colors, spacing, spacingUnit } from '@ndla/core';
 
@@ -27,9 +27,7 @@ const StyledContent = styled.div`
 `;
 
 interface Props {
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
-export const LearningPathContent: React.FunctionComponent<Props> = ({ children }) => (
-  <StyledContent>{children}</StyledContent>
-);
+export const LearningPathContent = ({ children }: Props) => <StyledContent>{children}</StyledContent>;

package/src/LearningPaths/LearningPathInformation.tsx

@@ -56,17 +56,10 @@ interface Props {
   invertedStyle?: boolean;
   license?: {
     license: string;
-    description: string;
-    url: string;
   };
 }
 
-export const LearningPathInformation: React.FunctionComponent<Props> = ({
-  description,
-  title,
-  license,
-  invertedStyle,
-}) => (
+export const LearningPathInformation = ({ description, title, license, invertedStyle }: Props) => (
   <section className="o-wrapper">
     <StyledWrapper invertedStyle={invertedStyle} className="c-article">
       <div>

package/src/LearningPaths/LearningPathLastStepNavigation.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import SafeLink from '@ndla/safelink';
@@ -39,7 +39,7 @@ const OneColumnCss = css`
 `;
 
 interface Props {
-  children: React.ReactNode;
+  children: ReactNode;
   subject?: {
     name: string;
     url: string;
@@ -51,13 +51,7 @@ interface Props {
   learningPathName: string;
 }
 
-const LearningPathLastStepNavigation: React.FunctionComponent<Props & WithTranslation> = ({
-  subject,
-  topic,
-  learningPathName,
-  children,
-  t,
-}) => (
+const LearningPathLastStepNavigation = ({ subject, topic, learningPathName, children, t }: Props & WithTranslation) => (
   <OneColumn css={OneColumnCss}>
     <LayoutItem layout="center">
       <StyledHeader className="c-article__title">

package/src/LearningPaths/LearningPathMenu.tsx

@@ -10,11 +10,9 @@ import React, { useState } from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { useTranslation } from 'react-i18next';
-// @ts-ignore
 import Tooltip from '@ndla/tooltip';
 import { useWindowSize } from '@ndla/hooks';
 import { colors, spacing, misc, mq, breakpoints } from '@ndla/core';
-// @ts-ignore
 import { ArrowExpandRight, ArrowExpandLeft } from '@ndla/icons/action';
 import LearningPathMenuModalWrapper from './LearningPathMenuModalWrapper';
 import LearningPathMenuAside from './LearningPathMenuAside';
@@ -73,17 +71,14 @@ const StyledToggleMenubutton = styled.button`
 
 export type StepProps = {
   title: string;
-  metaUrl: string;
   type: string;
   id: number;
-  current?: boolean;
 };
 
 interface Props {
   learningsteps: StepProps[];
   name: string;
   lastUpdated: string;
-  language: string;
   copyright: {
     contributors: {
       type: string;
@@ -91,8 +86,6 @@ interface Props {
     }[];
     license: {
       license: string;
-      description: string;
-      url: string;
     };
   };
   learningPathURL: string;
@@ -103,10 +96,9 @@ interface Props {
   };
   learningPathId: number;
   toLearningPathUrl(pathId: number, stepId: number): string;
-  showLearningPathButton: Object;
 }
 
-const LearningPathMenu: React.FunctionComponent<Props> = ({
+const LearningPathMenu = ({
   learningsteps,
   currentIndex,
   name,
@@ -117,7 +109,7 @@ const LearningPathMenu: React.FunctionComponent<Props> = ({
   learningPathURL,
   invertedStyle,
   cookies,
-}) => {
+}: Props) => {
   const { t } = useTranslation();
   const [isOpen, toggleOpenState] = useState(false);
   const { innerWidth } = useWindowSize(100);

package/src/LearningPaths/LearningPathMenuAside.tsx

@@ -9,7 +9,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
-// @ts-ignore
 import { Time } from '@ndla/icons/common';
 import { SafeLinkButton } from '@ndla/safelink';
 import { WithTranslation, withTranslation } from 'react-i18next';
@@ -104,20 +103,18 @@ type Props = {
     }[];
     license: {
       license: string;
-      description: string;
-      url: string;
     };
   };
 };
 
-const LearningPathMenuAside: React.FunctionComponent<Props & WithTranslation> = ({
+const LearningPathMenuAside = ({
   lastUpdated,
   learningPathURL,
   copyright,
   isOpen,
   invertedStyle,
   t,
-}) => (
+}: Props & WithTranslation) => (
   <StyledAside isOpen={isOpen} invertedStyle={invertedStyle}>
     <div css={learningPathDetailsCSS}>
       <Time />

package/src/LearningPaths/LearningPathMenuAsideCopyright.tsx

@@ -8,7 +8,6 @@
 
 import React from 'react';
 import styled from '@emotion/styled';
-// @ts-ignore
 import { User } from '@ndla/icons/common';
 import { spacing, fonts } from '@ndla/core';
 
@@ -37,13 +36,11 @@ type Props = {
     }[];
     license: {
       license: string;
-      description: string;
-      url: string;
     };
   };
 };
 
-const LearningPathMenuAsideCopyright: React.FunctionComponent<Props> = ({ copyright }) => (
+const LearningPathMenuAsideCopyright = ({ copyright }: Props) => (
   <StyledLearningPathDetails>
     <User />
     <p>

package/src/LearningPaths/LearningPathMenuContent.tsx

@@ -11,10 +11,8 @@ import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { colors, spacing, spacingUnit, fonts, mq, breakpoints, animations } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
-// @ts-ignore
 import { LearningPathRead } from '@ndla/icons/contentType';
 import { StepProps } from './LearningPathMenu';
-// @ts-ignore
 import ContentTypeBadge from '../ContentTypeBadge';
 import constants from '../model';
 
@@ -227,7 +225,7 @@ const hasRead = (
   },
 ) => !!cookies[id];
 
-const LearningPathMenuContent: React.FunctionComponent<Props> = ({
+const LearningPathMenuContent = ({
   isOpen,
   currentIndex,
   cookies,
@@ -236,7 +234,7 @@ const LearningPathMenuContent: React.FunctionComponent<Props> = ({
   toLearningPathUrl,
   invertedStyle,
   onStepNavigate,
-}) => {
+}: Props) => {
   const getContentTypeBadge = (type?: string) => {
     if (!type) {
       return <ContentTypeBadge type={constants.contentTypes.LEARNING_PATH} background size="small" />;

package/src/LearningPaths/LearningPathMenuIntro.tsx

@@ -9,7 +9,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
-// @ts-ignore
 import { useTranslation } from 'react-i18next';
 import { colors, spacing, spacingUnit, fonts, typography, mq, breakpoints, animations } from '@ndla/core';
 
@@ -101,7 +100,7 @@ interface Props {
   name: string;
 }
 
-const LearningPathMenuIntro: React.FunctionComponent<Props> = ({ isOpen, name, invertedStyle }) => {
+const LearningPathMenuIntro = ({ isOpen, name, invertedStyle }: Props) => {
   const { t } = useTranslation();
   return (
     <StyledMenuIntro isOpen={isOpen} invertedStyle={invertedStyle}>

package/src/LearningPaths/LearningPathMenuModalWrapper.tsx

@@ -6,14 +6,12 @@
  *
  */
 
-import React, { ReactChild, ReactChildren } from 'react';
+import React, { ReactChild, ReactChildren, ReactNode } from 'react';
 import { spacing, mq, breakpoints } from '@ndla/core';
-// @ts-ignore
 import Modal, { ModalHeader, ModalBody, ModalCloseButton } from '@ndla/modal';
 import { css } from '@emotion/core';
 // @ts-ignore
 import Button from '@ndla/button';
-// @ts-ignore
 import { LearningPath } from '@ndla/icons/contentType';
 import { useTranslation } from 'react-i18next';
 
@@ -34,10 +32,10 @@ const buttonToggleCss = css`
 
 type ModalWrapperProps = {
   innerWidth: number;
-  children: (arg: VoidFunction) => ReactChild | ReactChildren | React.ReactNode;
+  children: (arg: VoidFunction) => ReactChild | ReactChildren | ReactNode;
 };
 
-const ModalWrapperComponent: React.FC<ModalWrapperProps> = ({ innerWidth, children }) => {
+const ModalWrapperComponent = ({ innerWidth, children }: ModalWrapperProps) => {
   const { t } = useTranslation();
   if (innerWidth < 601) {
     return (

package/src/LearningPaths/LearningPathMobileHeader.tsx

@@ -10,8 +10,7 @@ import styled from '@emotion/styled';
 import { colors, fonts, spacing } from '@ndla/core';
 import React from 'react';
 import { WithTranslation, withTranslation } from 'react-i18next';
-// @ts-ignore
-import { LearningPathBadge } from '../index-javascript';
+import { LearningPathBadge } from '../';
 
 const StyledWrapper = styled.div`
   display: flex;
@@ -26,7 +25,7 @@ const StyledMiniHeader = styled.span`
   ${fonts.sizes(16, 1.1)};
 `;
 
-const LearningPathMobileHeader: React.FunctionComponent<WithTranslation> = ({ t }) => (
+const LearningPathMobileHeader = ({ t }: WithTranslation) => (
   <StyledWrapper>
     <LearningPathBadge size="xx-small" background />
     <StyledMiniHeader>{t('learningPath.youAreInALearningPath')}</StyledMiniHeader>

package/src/LearningPaths/LearningPathMobileStepInfo.tsx

@@ -24,7 +24,7 @@ type Props = {
   current: number;
 };
 
-const LearningPathMobileStepInfo: React.FunctionComponent<Props & WithTranslation> = ({ total, current, t }) => (
+const LearningPathMobileStepInfo = ({ total, current, t }: Props & WithTranslation) => (
   <StyledInfo>
     {t('learningPath.mobileStepInfo', {
       totalPages: total,

package/src/LearningPaths/LearningPathSticky.tsx

@@ -6,12 +6,11 @@
  *
  */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { colors, spacing, animations, mq, breakpoints } from '@ndla/core';
-// @ts-ignore
 import { Back, Forward } from '@ndla/icons/common';
 import SafeLink from '@ndla/safelink';
 
@@ -42,12 +41,10 @@ const StyledFooter = styled.nav`
 `;
 
 interface Props {
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
-export const LearningPathSticky: React.FunctionComponent<Props> = ({ children }) => (
-  <StyledFooter>{children}</StyledFooter>
-);
+export const LearningPathSticky = ({ children }: Props) => <StyledFooter>{children}</StyledFooter>;
 
 LearningPathSticky.propTypes = {
   children: PropTypes.node,
@@ -122,13 +119,7 @@ type PropsSiblings = {
   stepId: number;
 };
 
-export const LearningPathStickySibling: React.FunctionComponent<PropsSiblings> = ({
-  title,
-  toLearningPathUrl,
-  pathId,
-  stepId,
-  arrow,
-}) => (
+export const LearningPathStickySibling = ({ title, toLearningPathUrl, pathId, stepId, arrow }: PropsSiblings) => (
   <SafeLink to={toLearningPathUrl(pathId, stepId)} css={SafeLinkCSS}>
     {arrow === 'left' && <Back className="c-icon--medium" />}
     <div>
@@ -138,4 +129,4 @@ export const LearningPathStickySibling: React.FunctionComponent<PropsSiblings> =
   </SafeLink>
 );
 
-export const LearningPathStickyPlaceholder: React.FunctionComponent = () => <div css={SafeLinkCSS} />;
+export const LearningPathStickyPlaceholder = () => <div css={SafeLinkCSS} />;

package/src/LearningPaths/LearningPathWrapper.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { spacing, spacingUnit, breakpoints, mq } from '@ndla/core';
@@ -41,10 +41,10 @@ const StyledWrapper = styled.section<PropStyledWrapper>`
 `;
 
 interface Props {
-  children: React.ReactNode;
+  children: ReactNode;
   invertedStyle?: boolean;
 }
 
-export const LearningPathWrapper: React.FunctionComponent<Props> = ({ children, invertedStyle }) => (
+export const LearningPathWrapper = ({ children, invertedStyle }: Props) => (
   <StyledWrapper invertedStyle={invertedStyle}>{children}</StyledWrapper>
 );

package/src/Masthead/MastheadSearchModal.tsx

@@ -1,9 +1,7 @@
-import React, { ReactChild, ReactChildren } from 'react';
-// @ts-ignore
+import React, { ReactChild, ReactChildren, ReactNode } from 'react';
 import Modal from '@ndla/modal';
 // @ts-ignore
 import Button from '@ndla/button';
-// @ts-ignore
 import { Cross } from '@ndla/icons/action';
 import { isFunction } from '@ndla/util';
 import styled from '@emotion/styled';
@@ -15,7 +13,7 @@ import ToggleSearchButton from '../Search/ToggleSearchButton';
 
 interface Props {
   onClose: VoidFunction;
-  children: (arg: Function) => ReactChild | ReactChildren | React.ReactNode;
+  children: (arg: Function) => ReactChild | ReactChildren | ReactNode;
   hideOnNarrowScreen?: boolean;
   ndlaFilm?: boolean;
 }
@@ -112,13 +110,13 @@ const extraBackdrop = css`
   box-shadow: ${shadows.searchHeader};
 `;
 
-const MastheadSearchModal: React.FC<Props & WithTranslation> = ({
+const MastheadSearchModal = ({
   onClose: onSearchClose,
   children,
   hideOnNarrowScreen,
   ndlaFilm,
   t,
-}) => (
+}: Props & WithTranslation) => (
   <Modal
     backgroundColor="grey"
     animation="slide-down"

package/src/MessageBox/MessageBox.tsx

@@ -128,6 +128,11 @@ const Link = styled.a`
     box-shadow: none;
   }
 `;
+const CloseButtonWrapper = styled.div`
+  position: absolute;
+  top: 10px;
+  right: 1px;
+`;
 
 type LinkProps = {
   href?: string;
@@ -136,12 +141,12 @@ type LinkProps = {
 type Props = {
   type?: WrapperProps['boxType'];
   sticky?: boolean;
-  onClose?: boolean;
   children?: string;
   links?: LinkProps[];
+  showCloseButton?: boolean;
 };
 
-export const MessageBox = ({ type, sticky = false, onClose, children, links, t }: Props & WithTranslation) => {
+export const MessageBox = ({ type, sticky = false, children, links, t, showCloseButton }: Props & WithTranslation) => {
   const [hideMessageBox, setHideMessageBox] = useState(false);
   const onCloseMessageBox = () => {
     setHideMessageBox(true);
@@ -157,7 +162,11 @@ export const MessageBox = ({ type, sticky = false, onClose, children, links, t }
           </IconWrapper>
           <TextWrapper>{children}</TextWrapper>
         </InfoWrapper>
-        {onClose && <CloseButton onClick={onCloseMessageBox} color="#444444" />}
+        {showCloseButton && (
+          <CloseButtonWrapper>
+            <CloseButton onClick={onCloseMessageBox} />
+          </CloseButtonWrapper>
+        )}
       </Wrapper>
 
       {links && (

package/src/NDLAFilm/AllMoviesAlphabetically.tsx

@@ -6,14 +6,13 @@
  *
  */
 
-import React, { Fragment, useEffect, useState } from 'react';
+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 throttle from 'lodash/throttle';
 import { breakpoints, mq, spacing, spacingUnit, colors, fonts, animations } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
-// @ts-ignore
 import { makeSrcQueryString } from '../Image';
 import { MovieType } from './types';
 import { isLetter } from './isLetter';
@@ -178,11 +177,11 @@ const hasForEachPolyfill = () => {
   }
 };
 
-const AllMoviesAlphabetically: React.FunctionComponent<Props> = ({ movies, locale }) => {
+const AllMoviesAlphabetically = ({ movies, locale }: Props) => {
   const isIE11 = isIE && parseInt(browserVersion) < 12;
   // Split into Letters.
   let previousLetter = '';
-  const wrapperRef: React.RefObject<HTMLElement> = React.useRef(null);
+  const wrapperRef: RefObject<HTMLElement> = useRef(null);
   const [visibleImages, setVisibleImages] = useState<visibleImagesProps>({});
 
   const scrollEvent = () => {

package/src/NDLAFilm/FilmContentCard.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { spacing, colors, fonts, breakpoints } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
 import styled from '@emotion/styled';
-// @ts-ignore
 import { makeSrcQueryString } from '../Image';
 import FilmContentCardTags from './FilmContentCardTags';
 import { MovieResourceType, MovieType } from './types';

package/src/NDLAFilm/FilmSlideshow.tsx

@@ -7,7 +7,6 @@
  */
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-// @ts-ignore
 import { SwipeEventData, useSwipeable } from 'react-swipeable';
 import BEMHelper from 'react-bem-helper';
 import SafeLink from '@ndla/safelink';
@@ -206,6 +205,8 @@ const FilmSlideshow = ({ autoSlide = false, slideshow = [], slideInterval = 5000
     activeSlide = 0;
   }
 
+  const backgroundImage = slideshow[activeSlide].metaImage;
+
   return (
     <section {...classes('')} {...handlers}>
       <>
@@ -238,9 +239,7 @@ const FilmSlideshow = ({ autoSlide = false, slideshow = [], slideInterval = 5000
             role="img"
             onAnimationEnd={onChangedSlide}
             style={{
-              backgroundImage: `url(${
-                (slideshow[activeSlide].metaImage && slideshow[activeSlide].metaImage.url) || ''
-              })`,
+              backgroundImage: `url(${(backgroundImage && backgroundImage.url) || ''})`,
             }}
           />
         )}

package/src/NDLAFilm/types.ts

@@ -1,8 +1,8 @@
 export interface MovieType {
-  id: string;
+  id: number | string;
   metaDescription: string;
   resourceTypes: MovieResourceType[];
-  metaImage: {
+  metaImage?: {
     alt: string;
     url: string;
   };

package/src/Navigation/NavigationBox.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { MouseEvent, ChangeEventHandler } from 'react';
 import styled from '@emotion/styled';
 import { SafeLinkButton } from '@ndla/safelink';
 // @ts-ignore
@@ -186,12 +186,12 @@ type Props = {
   colorMode?: 'dark' | 'light' | 'greyLightest' | 'greyLighter';
   isButtonElements?: boolean;
   items: ItemProps[];
-  onClick?: (event: React.MouseEvent<HTMLElement>, id?: string) => void;
+  onClick?: (event: MouseEvent<HTMLElement>, id?: string) => void;
   hasAdditionalResources?: boolean;
   showAdditionalResources?: boolean;
   listDirection?: listProps['direction'];
   invertedStyle?: boolean;
-  onToggleAdditionalResources?: React.ChangeEventHandler<HTMLInputElement>;
+  onToggleAdditionalResources?: ChangeEventHandler<HTMLInputElement>;
 };
 
 export const NavigationBox = ({
@@ -240,7 +240,7 @@ export const NavigationBox = ({
                 borderShape="sharpened"
                 width="full"
                 textAlign="left"
-                onClick={(e: React.MouseEvent<HTMLElement>) => {
+                onClick={(e: MouseEvent<HTMLElement>) => {
                   if (onClick) {
                     onClick(e, item.id);
                   }

package/src/Navigation/NavigationHeading.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { breakpoints, fonts, mq } from '@ndla/core';
@@ -43,7 +43,7 @@ const StyledSubText = styled.span`
 
 type Props = {
   subHeading?: string;
-  children: React.ReactNode;
+  children: ReactNode;
   invertedStyle?: boolean;
 };
 

package/src/Navigation/NavigationTopicAbout.tsx

@@ -1,11 +1,10 @@
-import React from 'react';
+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';
 // @ts-ignore
 import Button from '@ndla/button';
-// @ts-ignore
 import { ChevronDown, ChevronUp } from '@ndla/icons/common';
 import { useTranslation } from 'react-i18next';
 
@@ -114,7 +113,7 @@ type Props = {
   isAdditionalTopic?: boolean;
   invertedStyle?: boolean;
   renderMarkdown: (text: string) => string;
-  children: React.ReactNode;
+  children: ReactNode;
 };
 
 export const NavigationTopicAbout = ({