@ndla/ui 3.3.13 → 3.3.17

package/src/Breadcrumb/Breadcrumb.tsx

@@ -6,11 +6,10 @@
  *
  */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import BEMHelper, { ReturnObject } from 'react-bem-helper';
 import { uuid } from '@ndla/util';
 import { withTranslation, WithTranslation } from 'react-i18next';
-// @ts-ignore
 import { Home } from '@ndla/icons/common';
 import BreadcrumbItem from './BreadcrumbItem';
 
@@ -24,13 +23,13 @@ export interface BreadcrumbItemI {
   name: string;
 }
 
-interface Props {
-  children: React.ReactNode;
+interface Props extends WithTranslation {
+  children?: ReactNode;
   items: BreadcrumbItemI[];
   invertedStyle: boolean;
 }
 
-const Breadcrumb: React.FunctionComponent<Props & WithTranslation> = ({ children, items, invertedStyle, t }) => (
+const Breadcrumb = ({ children, items, invertedStyle, t }: Props) => (
   <nav aria-label={t('breadcrumb.breadcrumb')}>
     {children}
     <ol {...classes('list')}>

package/src/Breadcrumb/BreadcrumbBlock.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { useRef } from 'react';
+import React, { ReactNode, useRef } from 'react';
 import BEMHelper, { ReturnObject } from 'react-bem-helper';
 import { useComponentSize, useIsomorphicLayoutEffect } from '@ndla/hooks';
 import { useTranslation } from 'react-i18next';
@@ -19,11 +19,11 @@ const classes: BEMHelper<ReturnObject> = BEMHelper({
 });
 
 interface Props {
-  children: React.ReactNode;
+  children?: ReactNode;
   items: BreadcrumbItemI[];
 }
 
-const BreadcrumbBlock: React.FunctionComponent<Props> = ({ children, items }) => {
+const BreadcrumbBlock = ({ children, items }: Props) => {
   const { t } = useTranslation();
   const olRef = useRef<any>();
   const containerRef = useRef<HTMLDivElement>(null);

package/src/Breadcrumb/BreadcrumbItem.tsx

@@ -6,8 +6,7 @@
  *
  */
 
-import React, { useRef, useImperativeHandle } from 'react';
-// @ts-ignore
+import React, { useRef, useImperativeHandle, ReactNode, forwardRef } from 'react';
 import { ChevronRight } from '@ndla/icons/common';
 import SafeLink from '@ndla/safelink';
 import BEMHelper, { ReturnObject } from 'react-bem-helper';
@@ -16,14 +15,14 @@ import * as H from 'history';
 interface Props {
   classes: BEMHelper<ReturnObject>;
   isCurrent: boolean;
-  children: React.ReactNode;
+  children: ReactNode;
   to: H.LocationDescriptor;
   home: boolean;
   name: string;
   invertedStyle: boolean;
 }
 
-const BreadcrumbItem = React.forwardRef<any, Props>(
+const BreadcrumbItem = forwardRef<any, Props>(
   ({ to, children, classes, isCurrent, home, invertedStyle, name }, ref) => {
     const liRef = useRef<any>();
     useImperativeHandle(ref, () => ({

package/src/Breadcrumblist/Breadcrumblist.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { ReactNode, useEffect, useState, MouseEvent } from 'react';
 import styled from '@emotion/styled';
 import { mq, breakpoints, colors } from '@ndla/core';
 import {
@@ -15,7 +15,6 @@ import {
   Bookmark as BookmarkIcon,
   Class as ClassIcon,
   Home as HomeIcon,
-  // @ts-ignore
 } from '@ndla/icons/action';
 import SafeLink from '@ndla/safelink';
 import { useTranslation } from 'react-i18next';
@@ -201,18 +200,18 @@ export type BreadcrumbItemProps = {
   url: string;
   typename?: 'Subjecttype' | 'Subject' | 'Topic' | 'Subtopic' | 'SubSubtopic' | 'Home';
   isCurrent?: boolean | false;
-  icon?: React.ReactNode;
+  icon?: ReactNode;
 };
 
 type BreadCrumbProps = {
-  children?: React.ReactNode;
+  children?: ReactNode;
   items: BreadcrumbItemProps[];
   startOffset?: number;
   isVisible?: boolean;
   invertedStyle?: boolean;
   leftAlign?: boolean;
   hideOnNarrow?: boolean;
-  onNav?: (e: React.MouseEvent<HTMLElement>, item: BreadcrumbItemProps) => void;
+  onNav?: (e: MouseEvent<HTMLElement>, item: BreadcrumbItemProps) => void;
   messageBoxTagMessage?: string;
 };
 
@@ -285,7 +284,7 @@ const Breadcrumblist = ({
                     <SafeLink
                       className="linkitem"
                       to={url}
-                      onClick={(e: React.MouseEvent<HTMLElement>) => {
+                      onClick={(e: MouseEvent<HTMLElement>) => {
                         onNav && onNav(e, item);
                       }}
                       aria-label={label}>

package/src/CompetenceGoalTab/CompetenceGoalTab.tsx

@@ -10,7 +10,6 @@ import React, { useState } from 'react';
 import styled from '@emotion/styled';
 import { colors, spacing, mq, breakpoints } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
-// @ts-ignore
 import { ArrowFeatureTips } from '@ndla/icons/common';
 // @ts-ignore
 import Button from '@ndla/button';

package/src/CompetenceGoalTab/CompetenceItem.tsx

@@ -8,11 +8,7 @@
 
 import React from 'react';
 import styled from '@emotion/styled';
-// @ts-ignore
-import {
-  MenuBook,
-  // @ts-ignore
-} from '@ndla/icons/action';
+import { MenuBook } from '@ndla/icons/action';
 import { fonts } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
 import CompetenceGoalItem from './CompetenceGoalItem';

package/src/ComponentCursor/ComponentCursor.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { MutableRefObject, useRef, useState } from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { useComponentSize } from '@ndla/hooks';
@@ -82,7 +82,7 @@ type Props = {
 
 const ComponentCursor = ({ variant = 'left', text = '' }: Props) => {
   const [componentSize, setComponentSize] = useState(null);
-  const textRef = useRef(null) as unknown as React.MutableRefObject<HTMLSpanElement>;
+  const textRef = useRef(null) as unknown as MutableRefObject<HTMLSpanElement>;
   const size: any = useComponentSize(textRef);
   if (!componentSize && textRef && textRef.current) {
     setComponentSize(size.width + 5);

package/src/CopyParagraphButton/CopyParagraphButton.tsx

@@ -6,12 +6,11 @@
  *
  */
 
-import React, { ReactNode, useEffect, useState } from 'react';
+import React, { ReactNode, useEffect, useState, MouseEvent } from 'react';
 
 import styled from '@emotion/styled';
 import { Link } from '@ndla/icons/common';
 import { useTranslation } from 'react-i18next';
-// @ts-ignore
 import Tooltip from '@ndla/tooltip';
 import { copyTextToClipboard } from '@ndla/util';
 
@@ -73,7 +72,7 @@ const CopyParagraphButton = ({ title, content, hydrate }: Props) => {
 
   if (!title) return null;
 
-  const onCopyClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void => {
+  const onCopyClick = (event: MouseEvent<HTMLButtonElement>): void => {
     setHasCopied(true);
     const copyId = event.currentTarget.getAttribute('data-title');
     const { location } = window;

package/src/CreatedBy/CreatedBy.tsx

@@ -11,7 +11,6 @@ import { LinkProps } from 'react-router-dom';
 import styled from '@emotion/styled';
 import { colors, fonts } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
-// @ts-ignore
 import Logo from '../Logo';
 
 const Container = styled.div`

package/src/Dialog/Dialog.tsx

@@ -11,7 +11,6 @@
 
 import React, { ReactNode } from 'react';
 import BEMHelper from 'react-bem-helper';
-//@ts-ignore
 import { createUniversalPortal } from '../utils/createUniversalPortal';
 
 const classes = new BEMHelper({

package/src/Embedded/Twitter.jsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import { Component, createElement } from 'react';
 import PropTypes from 'prop-types';
 
-class EmbeddedTwitter extends React.Component {
+class EmbeddedTwitter extends Component {
   static removeChildren(node) {
     if (node) {
       while (node.firstChild) {
@@ -51,7 +51,7 @@ class EmbeddedTwitter extends React.Component {
   }
 
   render() {
-    return React.createElement('div', {
+    return createElement('div', {
       ref: (c) => {
         this.widgetWrapper = c;
       },

package/src/ErrorMessage/ErrorMessage.tsx

@@ -54,14 +54,9 @@ interface Props {
   };
   illustrationElement?: ReactNode;
   customElement?: ReactNode;
+  children?: ReactNode;
 }
-export const ErrorMessage: React.FunctionComponent<Props> = ({
-  children,
-  messages,
-  illustration,
-  illustrationElement,
-  customElement,
-}) => (
+export const ErrorMessage = ({ children, messages, illustration, illustrationElement, customElement }: Props) => (
   <StyledErrorMessage>
     {illustration && (
       <IllustrationWrapper>

package/src/Figure/Figure.tsx

@@ -121,8 +121,9 @@ interface FigureCaptionProps {
 
 const Figure = ({ children, type = 'full', resizeIframe, ...rest }: Props) => {
   const typeClass = type === 'full-column' ? 'c-figure--full-column' : `u-float-${type}`;
+  const right = ['small-right', 'xsmall-right'].includes(type);
   return (
-    <figure data-sizetype={type} {...classes('', { resize: !!resizeIframe }, typeClass)} {...rest}>
+    <figure data-sizetype={type} {...classes('', { resize: !!resizeIframe, right }, typeClass)} {...rest}>
       {isFunction(children) ? children({ typeClass }) : children}
     </figure>
   );

package/src/Figure/FigureLicenseDialog.tsx

@@ -10,7 +10,6 @@
 // Any interactivty is added by scripts located in the ndla-article-scripts package
 
 import React, { ReactNode } from 'react';
-//@ts-ignore
 import Dialog from '../Dialog';
 import { classLicenses, FigureLicenseByline, FigureLicenseCta } from './FigureLicense';
 import { FigureLicense } from './Figure';

package/src/Figure/component.figure.scss

@@ -17,6 +17,25 @@
 **/
 
 /* 1. */
+
+@keyframes rightFloatTransition {
+  0% {
+    left: 75%;
+  }
+  100% {
+    left: -16.6%;
+  }
+}
+
+@keyframes smallRightFloatTransition {
+  0% {
+    left: 78.5%;
+  }
+  100% {
+    left: -16.6%;
+  }
+}
+
 .c-figure {
   img {
     width: 100%;
@@ -51,6 +70,21 @@
     padding-bottom: $spacing--large;
     margin-bottom: 0;
   }
+  &--right {
+    &.expanded {
+      @include mq($from: desktop) {
+        animation-name: rightFloatTransition;
+        animation-duration: 0.4s;
+      }
+
+      &[data-sizetype='xsmall-right'] {
+        @include mq($from: desktop) {
+          animation-name: smallRightFloatTransition;
+          animation-duration: 0.4s;
+        }
+      }
+    }
+  }
   &.expanded {
     .c-figure__caption--hidden-caption {
       display: block;
@@ -74,7 +108,7 @@
   background-color: $white;
   padding: $spacing--small 0;
   display: block;
-  border-bottom: 1px solid #D1D6DB;
+  border-bottom: 1px solid #d1d6db;
 }
 
 .c-figure__caption--hidden-caption {
@@ -119,7 +153,7 @@
     margin-bottom: $spacing--small;
   }
   p {
-    margin:0;
+    margin: 0;
   }
 }
 
@@ -179,7 +213,7 @@
   padding: $spacing--small;
   transition: all 0.3s ease-out;
   background: rgba($white, 0.2);
-  border:0;
+  border: 0;
 
   .expanded-icon {
     display: none;

package/src/Filter/FilterButtons.tsx

@@ -12,11 +12,8 @@ import styled from '@emotion/styled';
 import Button from '@ndla/button';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
-// @ts-ignore
 import { Cross as CrossIcon, Plus as PlusIcon } from '@ndla/icons/action';
-// @ts-ignore
 import Modal, { ModalHeader, ModalBody, ModalCloseButton } from '@ndla/modal';
-
 // @ts-ignore
 import ToggleItem from './ToggleItem';
 

package/src/Footer/EditorName.tsx

@@ -13,7 +13,7 @@ type EditorNameProps = {
   name: string;
 };
 
-export const EditorName: React.FunctionComponent<EditorNameProps> = ({ title, name }) => (
+export const EditorName = ({ title, name }: EditorNameProps) => (
   <span>
     <strong>{title}</strong> {name}
   </span>

package/src/Footer/Footer.tsx

@@ -10,7 +10,6 @@ import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { useTranslation } from 'react-i18next';
 import { colors, spacing, fonts, mq, breakpoints, spacingUnit } from '@ndla/core';
-// @ts-ignore
 import { FooterHeaderIcon } from '@ndla/icons/common';
 import { OneColumn } from '../Layout';
 import FooterLinks from './FooterLinks';
@@ -110,22 +109,22 @@ const StyledLanguageWrapper = styled.div`
 `;
 
 type Props = {
-  children: React.ReactNode;
+  children: ReactNode;
   lang: Locale;
   links?: [
     {
       to: string;
       text: string;
-      icon: React.ReactNode;
+      icon: ReactNode;
       facebook: string;
       twitter: string;
     },
   ];
-  languageSelector?: React.ReactNode;
+  languageSelector?: ReactNode;
   auth?: ReactNode;
 };
 
-const Footer: React.FunctionComponent<Props> = ({ lang, children, links, languageSelector, auth }) => {
+const Footer = ({ lang, children, links, languageSelector, auth }: Props) => {
   const { t } = useTranslation();
   const mainContent = (
     <>

package/src/Footer/FooterLinks.tsx

@@ -1,13 +1,9 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { LinkProps } from 'react-router-dom';
 import { spacing, fonts, colors, mq, breakpoints, spacingUnit } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
-import {
-  Forward,
-  Launch,
-  // @ts-ignore
-} from '@ndla/icons/common';
+import { Forward, Launch } from '@ndla/icons/common';
 import { WithTranslation, withTranslation } from 'react-i18next';
 
 const StyledLinksWrapper = styled.div`
@@ -34,7 +30,7 @@ type FooterLinksProps = {
     {
       to: string;
       text: string;
-      icon: React.ReactNode;
+      icon: ReactNode;
       facebook: string;
       twitter: string;
     },
@@ -97,7 +93,7 @@ const StyledHeaderLinks = styled.h1`
   margin: ${spacing.xsmall} 0;
 `;
 
-const FooterLinks: React.FunctionComponent<FooterLinksProps & WithTranslation> = ({ t, links }) => (
+const FooterLinks = ({ t, links }: FooterLinksProps & WithTranslation) => (
   <>
     <StyledLinksWrapper>
       <section>

package/src/Footer/FooterPrivacy.tsx

@@ -8,7 +8,6 @@
 
 import React from 'react';
 import styled from '@emotion/styled';
-// @ts-ignore
 import Modal, { ModalHeader, ModalBody, ModalCloseButton } from '@ndla/modal';
 import { spacing, fonts, misc, mq, breakpoints } from '@ndla/core';
 import { OneColumn } from '../Layout';
@@ -68,7 +67,7 @@ const StyledFooterText = styled.div`
   }
 `;
 
-const FooterPrivacy: React.FunctionComponent<FooterPrivacyProps> = ({ lang, label }) => (
+const FooterPrivacy = ({ lang, label }: FooterPrivacyProps) => (
   <StyledFooterText>
     <Modal activateButton={<StyledPrivacyButton type="button">{label}</StyledPrivacyButton>} size="fullscreen">
       {(onClose: () => void) => (

package/src/Footer/FooterText.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { spacing, fonts, mq, breakpoints } from '@ndla/core';
 
@@ -33,9 +33,7 @@ const StyledFooterText = styled.p`
 `;
 
 type FooterTextProps = {
-  children: React.ReactNode;
+  children: ReactNode;
 };
 
-export const FooterText: React.FunctionComponent<FooterTextProps> = ({ children }) => (
-  <StyledFooterText>{children}</StyledFooterText>
-);
+export const FooterText = ({ children }: FooterTextProps) => <StyledFooterText>{children}</StyledFooterText>;

package/src/Footer/privacy_en.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const PrivacyEn: React.FunctionComponent = () => (
+const PrivacyEn = () => (
   <>
     <h1>Cookies Policy</h1>
     <hr />

package/src/Footer/privacy_nb.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const PrivacyNb: React.FunctionComponent = () => (
+const PrivacyNb = () => (
   <>
     <h1>Personvernerklæring</h1>
     <hr />

package/src/Footer/privacy_nn.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const PrivacyNn: React.FunctionComponent = () => (
+const PrivacyNn = () => (
   <>
     <h2>Cookies og lovtekst</h2>
     <p>

package/src/Frontpage/FrontpageAllSubjects.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import styled from '@emotion/styled';
 import { useTranslation } from 'react-i18next';
-// @ts-ignore
 import Tabs from '@ndla/tabs';
 import SafeLink from '@ndla/safelink';
 import { colors, fonts, mq, breakpoints } from '@ndla/core';
@@ -134,9 +133,9 @@ const renderList = (
   <StyledList>
     {sortAlphabetically(subjects).map((letter: any) => {
       return (
-        <React.Fragment key={letter.letter}>
+        <Fragment key={letter.letter}>
           {letter.items.map((subject: subjectProps, index: number) => (
-            <React.Fragment key={subject.name}>
+            <Fragment key={subject.name}>
               <StyledListItem>
                 {index === 0 && <StyledLetterItem subjectViewType={subjectViewType}>{letter.letter}</StyledLetterItem>}
                 {subjectViewType === 'checkbox' && subject.id ? (
@@ -168,9 +167,9 @@ const renderList = (
                 )}
                 {letter.items.length - 1 === index && <StyledLetterSpacing />}
               </StyledListItem>
-            </React.Fragment>
+            </Fragment>
           ))}
-        </React.Fragment>
+        </Fragment>
       );
     })}
   </StyledList>

package/src/Frontpage/FrontpageFilm.tsx

@@ -2,11 +2,9 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import SafeLink from '@ndla/safelink';
-// @ts-ignore
 import { Forward } from '@ndla/icons/common';
 import { withTranslation, WithTranslation } from 'react-i18next';
 import { spacing, spacingUnit, colors, breakpoints, fonts, mq } from '@ndla/core';
-// @ts-ignore
 import SectionHeading from '../SectionHeading';
 
 const StyledSection = styled.section`
@@ -76,7 +74,7 @@ type Props = {
   imageUrl: string;
 };
 
-const FrontpageFilm: React.FunctionComponent<Props & WithTranslation> = ({ url, imageUrl, t }) => (
+const FrontpageFilm = ({ url, imageUrl, t }: Props & WithTranslation) => (
   <StyledSection>
     <SectionHeading large>{t('welcomePage.film.header')}</SectionHeading>
     <StyledImage imageUrl={imageUrl}>

package/src/Frontpage/FrontpageHeader.tsx

@@ -1,10 +1,9 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { colors, spacing, spacingUnit, mq, breakpoints } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
 import { WithTranslation, withTranslation } from 'react-i18next';
 import FrontpageHeaderIllustration from './illustrations/FrontpageHeaderIllustration';
-// @ts-ignore
 import SvgLogo from '../Logo/SvgLogo';
 
 const StyledHeader = styled.div`
@@ -52,14 +51,10 @@ const HeaderIllustrationWrapper = styled.div`
 export type FrontPageHeaderProps = {
   locale: string;
   showHeader: boolean;
+  children?: ReactNode;
 };
 
-const FrontpageHeader: React.FunctionComponent<FrontPageHeaderProps & WithTranslation> = ({
-  locale,
-  showHeader = true,
-  children,
-  t,
-}) => (
+const FrontpageHeader = ({ locale, showHeader = true, children, t }: FrontPageHeaderProps & WithTranslation) => (
   <StyledHeaderWrapper>
     <StyledHeader>
       <StyledLogo to="/" aria-label={t('logo.altText')}>

package/src/Frontpage/FrontpageInfo.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { spacing, spacingUnit, mq, breakpoints } from '@ndla/core';
 
@@ -37,9 +37,9 @@ const StyledWrapper = styled.div`
 `;
 
 type Props = {
-  children: React.ReactNode;
+  children: ReactNode;
 };
 
-const FrontpageInfo: React.FunctionComponent<Props> = ({ children }) => <StyledWrapper>{children}</StyledWrapper>;
+const FrontpageInfo = ({ children }: Props) => <StyledWrapper>{children}</StyledWrapper>;
 
 export default FrontpageInfo;

package/src/Frontpage/FrontpageMultidisciplinarySubject.tsx

@@ -3,7 +3,6 @@ import SafeLink, { SafeLinkButton } from '@ndla/safelink';
 import styled from '@emotion/styled';
 import { spacing, breakpoints, mq } from '@ndla/core';
 import { withTranslation, WithTranslation } from 'react-i18next';
-// @ts-ignore
 import SectionHeading from '../SectionHeading';
 import ComponentCursor from '../ComponentCursor';
 import { MultidisciplinarySubjectIllustration as Illustration } from './illustrations/FrontpageIllustrations';
@@ -75,7 +74,7 @@ type Props = {
   topics?: { url: string; title: string; id: string }[];
 };
 
-const FrontpageMultidisciplinarySubject: React.FunctionComponent<Props & WithTranslation> = ({ url, t, topics }) => (
+const FrontpageMultidisciplinarySubject = ({ url, t, topics }: Props & WithTranslation) => (
   <StyledSection>
     <ComponentCursor variant="left" text={t('frontpageMultidisciplinarySubject.cursorText')} />
     <Wrapper>

package/src/Frontpage/FrontpageSearch.tsx

@@ -1,14 +1,12 @@
-import React, { useEffect, useRef } from 'react';
+import React, { FormEvent, useEffect, useRef } from 'react';
 import { isIE, browserVersion, isMobileSafari } from 'react-device-detect';
 import styled from '@emotion/styled';
 import { colors, spacing, mq, breakpoints, animations } from '@ndla/core';
-// @ts-ignore
 import { noScroll } from '@ndla/util';
 import { useTranslation } from 'react-i18next';
 // @ts-ignore
 import { SearchField } from '../Search';
 import { SearchFieldForm } from '../Search/SearchFieldForm';
-// @ts-ignore
 import SearchResultSleeve from '../Search/SearchResultSleeve';
 import { ContentTypeResultType, Resource } from '../types';
 
@@ -51,7 +49,7 @@ type Props = {
   resourceToLinkProps: (resource: Resource) => {
     to: string;
   };
-  onSearch: (event: React.FormEvent) => void;
+  onSearch: (event: FormEvent) => void;
   allResultUrl: string;
   searchResult?: Array<ContentTypeResultType>;
   loading: boolean;
@@ -59,7 +57,7 @@ type Props = {
   suggestionUrl?: string;
 };
 
-const FrontpageSearch: React.FunctionComponent<Props> = ({
+const FrontpageSearch = ({
   resourceToLinkProps,
   inputHasFocus,
   searchFieldValue,
@@ -73,7 +71,7 @@ const FrontpageSearch: React.FunctionComponent<Props> = ({
   loading,
   suggestion,
   suggestionUrl,
-}) => {
+}: Props) => {
   const { t } = useTranslation();
   const inputRef = useRef<HTMLInputElement>(null);
   const searchFieldRef = useRef<HTMLDivElement>(null);