@ndla/ui 3.3.15 → 3.3.16

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

@@ -61,12 +61,7 @@ interface Props {
   };
 }
 
-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,7 +10,6 @@ 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';
@@ -105,7 +104,7 @@ interface Props {
   showLearningPathButton: Object;
 }
 
-const LearningPathMenu: React.FunctionComponent<Props> = ({
+const LearningPathMenu = ({
   learningsteps,
   currentIndex,
   name,
@@ -116,7 +115,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';
@@ -110,14 +109,14 @@ type Props = {
   };
 };
 
-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';
 
@@ -43,7 +42,7 @@ type Props = {
   };
 };
 
-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

@@ -25,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/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 = ({

package/src/Notion/Notion.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { useTranslation } from 'react-i18next';
 import HTMLReactParser from 'html-react-parser';
-import React from 'react';
+import React, { MouseEventHandler, ReactNode } from 'react';
 
 // @ts-ignore
 import Button from '@ndla/button';
@@ -59,10 +59,10 @@ export type NotionProps = {
   labels?: string[];
   license?: string;
   locale?: Locale;
-  media?: React.ReactNode;
-  onReferenceClick?: React.MouseEventHandler<HTMLButtonElement>;
+  media?: ReactNode;
+  onReferenceClick?: MouseEventHandler<HTMLButtonElement>;
   renderMarkdown?: (text: string) => string;
-  text: React.ReactNode;
+  text: ReactNode;
   title: string;
 };
 

package/src/RadioButtonGroup/RadioButtonGroup.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { Fragment, Component } from 'react';
+import React, { Fragment, Component, ChangeEvent } from 'react';
 import BEMHelper from 'react-bem-helper';
 import { uuid } from '@ndla/util';
 
@@ -39,7 +39,7 @@ class RadioButtonGroup extends Component<Props, State> {
     this.uuid = this.props.uniqeIds ? uuid() : undefined;
   }
 
-  handleOnChange(e: React.ChangeEvent<HTMLInputElement>) {
+  handleOnChange(e: ChangeEvent<HTMLInputElement>) {
     this.setState({
       selected: e.target.value,
     });

package/src/RelatedArticleList/RelatedArticleList.tsx

@@ -1,4 +1,4 @@
-import React, { cloneElement, ReactElement } from 'react';
+import React, { Children, cloneElement, ReactElement } from 'react';
 import BEMHelper from 'react-bem-helper';
 //@ts-ignore
 import Button from '@ndla/button';
@@ -61,13 +61,13 @@ interface Props {
 const RelatedArticleList = ({ messages, children, articleCount, dangerouslySetInnerHTML }: Props) => {
   const clonedChildren =
     !dangerouslySetInnerHTML && children
-      ? React.Children.map(children, (article, i) =>
-          React.cloneElement(article, {
+      ? Children.map(children, (article, i) =>
+          cloneElement(article, {
             modifier: i >= 2 ? `${article.props.modifier} hidden` : article.props.modifier,
           }),
         )
       : null;
-  const childrenCount = articleCount || React.Children.count(children);
+  const childrenCount = articleCount || Children.count(children);
 
   return (
     <section {...classes('')}>

package/src/ResourceGroup/ResourceItem.tsx

@@ -14,11 +14,8 @@ import { keyframes } from '@emotion/core';
 import SafeLink from '@ndla/safelink';
 import { Additional, Core, HumanMaleBoard } from '@ndla/icons/common';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
-
-// @ts-ignore
 import Tooltip from '@ndla/tooltip';
 import { Resource } from '../types';
-// @ts-ignore
 import ContentTypeBadge from '../ContentTypeBadge';
 import * as contentTypes from '../model/ContentType';
 

package/src/ResourceGroup/ResourceList.tsx

@@ -11,7 +11,6 @@ import styled from '@emotion/styled';
 import css from '@emotion/css';
 import { keyframes } from '@emotion/core';
 import { useTranslation } from 'react-i18next';
-// @ts-ignore
 import NoContentBox from '../NoContentBox';
 import ResourceItem from './ResourceItem';
 import { Resource } from '../types';

package/src/ResourcesWrapper/ResourcesTopicTitle.tsx

@@ -3,7 +3,6 @@ import { css } from '@emotion/core';
 import styled from '@emotion/styled';
 import { spacing } from '@ndla/core';
 import { HelpCircleDual } from '@ndla/icons/common';
-//@ts-ignore
 import Modal, { ModalBody, ModalHeader, ModalCloseButton } from '@ndla/modal';
 import Tooltip from '@ndla/tooltip';
 import { Switch } from '@ndla/switch';

package/src/Search/ContentTypeResult.tsx

@@ -1,13 +1,10 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, ReactElement } from 'react';
 // @ts-ignore
 import Button from '@ndla/button';
-// @ts-ignore
 import Tooltip from '@ndla/tooltip';
-// @ts-ignore
 import { Additional, ChevronUp, ChevronDown } from '@ndla/icons/common';
 import SafeLink from '@ndla/safelink';
 import { useTranslation } from 'react-i18next';
-// @ts-ignore
 import ContentTypeBadge from '../ContentTypeBadge';
 import { ContentTypeResultType, Resource } from '../types';
 import {
@@ -24,7 +21,7 @@ import {
 } from './ContentTypeResultStyles';
 import { isPathToHighlight } from './IsPathToHighlight';
 
-const renderAdditionalIcon = (label: string, isAdditional?: boolean): React.ReactElement | null => {
+const renderAdditionalIcon = (label: string, isAdditional?: boolean): ReactElement | null => {
   if (isAdditional && label) {
     return (
       <Tooltip tooltip={label} align="top" css={tooltipStyle}>
@@ -58,7 +55,7 @@ type Props = {
   unGrouped?: boolean;
 };
 
-const ContentTypeResult: React.FC<Props> = ({
+const ContentTypeResult = ({
   contentTypeResult,
   onNavigate,
   defaultCount,
@@ -70,7 +67,7 @@ const ContentTypeResult: React.FC<Props> = ({
   inMenu,
   animateList,
   unGrouped,
-}) => {
+}: Props) => {
   const { t } = useTranslation();
   const [showAll, toggleShowAll] = useState(false);
   const showAllRef = useRef<HTMLLIElement>(null);

package/src/Search/LoadingWrapper.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { spacing, spacingUnit, animations } from '@ndla/core';
-// @ts-ignore
 import Spinner from '../Spinner';
 
 const StyledWrapper = styled.div`
@@ -26,7 +25,7 @@ type Props = {
   value: string;
 };
 
-const LoadingWrapper: React.FC<Props> = ({ value }) => (
+const LoadingWrapper = ({ value }: Props) => (
   <StyledWrapper>
     <span>{value}</span>
     <div>