@ndla/ui 3.3.12 → 3.3.16

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>

package/src/Search/SearchFieldForm.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
+import React, { FormEvent, ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { spacing, mq, breakpoints } from '@ndla/core';
 
 interface Props {
-  children: React.ReactNode;
+  children: ReactNode;
   inputHasFocus?: boolean;
-  onSubmit?: (event: React.FormEvent) => void;
+  onSubmit?: (event: FormEvent) => void;
 }
 
 type StyledProps = {
@@ -56,7 +56,7 @@ const StyledForm = styled.form<StyledProps>`
     `}
 `;
 
-export const SearchFieldForm: React.FC<Props> = ({ children, inputHasFocus, onSubmit }) => {
+export const SearchFieldForm = ({ children, inputHasFocus, onSubmit }: Props) => {
   return (
     <StyledForm action="/search/" inputHasFocus={inputHasFocus} onSubmit={onSubmit}>
       {children}

package/src/Search/SearchPage.jsx

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component, Fragment, createRef } from 'react';
 import BEMHelper from 'react-bem-helper';
 import PropTypes from 'prop-types';
 import { Back } from '@ndla/icons/common';
@@ -23,7 +23,7 @@ class SearchPage extends Component {
     };
 
     this.filterCloseButton = null;
-    this.inputRef = React.createRef();
+    this.inputRef = createRef();
     this.checkScreenSize = this.checkScreenSize.bind(this);
     this.checkScreenSizeDebounce = debounce(() => this.checkScreenSize(), 100);
   }

package/src/Search/SearchResultSleeve.tsx

@@ -7,20 +7,10 @@
  */
 
 import React, { useEffect, useRef, useState } from 'react';
-import { History } from 'history';
 import styled from '@emotion/styled';
 import { breakpoints, colors, fonts, misc, mq, spacing } from '@ndla/core';
-import {
-  ChevronDown,
-  ChevronUp,
-  Esc,
-  KeyboardReturn,
-  Search as SearchIcon,
-  Wrench,
-  // @ts-ignore
-} from '@ndla/icons/common';
+import { ChevronDown, ChevronUp, Esc, KeyboardReturn, Search as SearchIcon, Wrench } from '@ndla/icons/common';
 import SafeLink from '@ndla/safelink';
-// @ts-ignore
 import { useTranslation } from 'react-i18next';
 import ContentTypeResult from './ContentTypeResult';
 import { highlightStyle } from './ContentTypeResultStyles';
@@ -218,17 +208,16 @@ type Props = {
     to: string;
   };
   onNavigate?: VoidFunction;
-  infoText: string;
-  ignoreContentTypeBadge: boolean;
+  infoText?: string;
+  ignoreContentTypeBadge?: boolean;
   searchString: string;
   loading: boolean;
   frontpage?: boolean;
-  history: History;
-  suggestion: string;
-  suggestionUrl: string;
+  suggestion?: string;
+  suggestionUrl?: string;
 };
 
-const SearchResultSleeve: React.FC<Props> = ({
+const SearchResultSleeve = ({
   result,
   allResultUrl,
   resourceToLinkProps,
@@ -238,10 +227,9 @@ const SearchResultSleeve: React.FC<Props> = ({
   searchString,
   loading,
   frontpage,
-  history,
   suggestion,
   suggestionUrl,
-}) => {
+}: Props) => {
   const { t } = useTranslation();
   const contentRef = useRef<HTMLDivElement>(null);
   const searchAllRef = useRef<HTMLDivElement>(null);
@@ -332,7 +320,7 @@ const SearchResultSleeve: React.FC<Props> = ({
               <strong ref={searchAllRef}>{searchString}</strong>
               <small>{t('welcomePage.searchAllInfo')}</small>
             </StyledSearchLink>
-            {suggestion && (
+            {suggestion && suggestionUrl && (
               <StyledSearchLink css={keyboardPathNavigation === GO_TO_SUGGESTION && highlightStyle} to={suggestionUrl}>
                 <SearchIcon className="c-icon--22" />
                 <small>{t('searchPage.resultType.searchPhraseSuggestion')}</small>
@@ -342,7 +330,7 @@ const SearchResultSleeve: React.FC<Props> = ({
           </SearchLinkContainer>
           {result.map((contentTypeResult: ContentTypeResultType) => (
             <ContentTypeResult
-              ignoreContentTypeBadge={ignoreContentTypeBadge}
+              ignoreContentTypeBadge={!!ignoreContentTypeBadge}
               onNavigate={onNavigate}
               contentTypeResult={contentTypeResult}
               resourceToLinkProps={resourceToLinkProps}

package/src/SearchTypeResult/ActiveFilterContent.tsx

@@ -8,7 +8,6 @@
 
 import React from 'react';
 import styled from '@emotion/styled';
-// @ts-ignore
 import { Cross } from '@ndla/icons/action';
 import { spacing, fonts } from '@ndla/core';
 // @ts-ignore

package/src/SearchTypeResult/ActiveFilters.tsx

@@ -6,11 +6,10 @@
  *
  */
 
-import React from 'react';
+import React, { ReactElement } from 'react';
 import styled from '@emotion/styled';
 import css from '@emotion/css';
 import { spacing, mq, breakpoints } from '@ndla/core';
-// @ts-ignore
 import Tooltip from '@ndla/tooltip';
 import { useTranslation } from 'react-i18next';
 import ActiveFilterContent, { FilterProps, StyledActiveFilterTitle } from './ActiveFilterContent';
@@ -88,7 +87,7 @@ type Props = {
   filters: FilterProps[];
   onFilterRemove: (value: string, name: string) => void;
   showOnSmallScreen?: boolean;
-  customElements?: React.ReactElement[];
+  customElements?: ReactElement[];
 };
 
 const ActiveFilters = ({ filters, onFilterRemove, showOnSmallScreen, customElements }: Props) => {

package/src/SearchTypeResult/PopupFilter.tsx

@@ -8,12 +8,10 @@
 
 import React, { useEffect, useRef, useState } from 'react';
 import styled from '@emotion/styled';
-// @ts-ignore
 import Modal, { ModalCloseButton, ModalBody } from '@ndla/modal';
 import { breakpoints, fonts, mq, spacing } from '@ndla/core';
 // @ts-ignore
 import Button from '@ndla/button';
-// @ts-ignore
 import { Plus as PlusIcon } from '@ndla/icons/action';
 import { useTranslation } from 'react-i18next';
 // @ts-ignore

package/src/SearchTypeResult/ResultNavigation.tsx

@@ -8,7 +8,6 @@
 
 import React from 'react';
 import styled from '@emotion/styled';
-// @ts-ignore
 import { ChevronDown } from '@ndla/icons/common';
 // @ts-ignore
 import Button from '@ndla/button';

package/src/SearchTypeResult/SearchFieldHeader.tsx

@@ -9,10 +9,8 @@
 import React, { FormEvent, useEffect, useRef, useState } from 'react';
 import styled from '@emotion/styled';
 import { colors, breakpoints, mq } from '@ndla/core';
-// @ts-ignore
 import { Search as SearchIcon } from '@ndla/icons/common';
 import { spacing } from '@ndla/core';
-// @ts-ignore
 import { Cross as CrossIcon } from '@ndla/icons/action';
 
 import { useTranslation } from 'react-i18next';
@@ -86,7 +84,7 @@ type Props = {
   };
 };
 
-const SearchFieldHeader: React.FC<Props> = ({ value, onSubmit, onChange, filters, activeFilters }) => {
+const SearchFieldHeader = ({ value, onSubmit, onChange, filters, activeFilters }: Props) => {
   const { t } = useTranslation();
   const [hasFocus, setHasFocus] = useState(false);
   const [isNarrowScreen, setIsNarrowScreen] = useState(false);

package/src/SearchTypeResult/SearchItem.tsx

@@ -6,24 +6,19 @@
  *
  */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import parse from 'html-react-parser';
-// @ts-ignore
 import { ChevronRight, Additional, Core } from '@ndla/icons/common';
 import SafeLink from '@ndla/safelink';
 // @ts-ignore
 import Button from '@ndla/button';
-// @ts-ignore
 import Modal, { ModalCloseButton } from '@ndla/modal';
 
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
 import { ContentType } from './SearchTypeResult';
-// @ts-ignore
 import constants from '../model';
-
-// @ts-ignore
 import ContentTypeBadge from '../ContentTypeBadge';
 
 const { contentTypes } = constants;
@@ -210,7 +205,7 @@ export type SearchItemType = {
   contexts?: context[];
   img?: { url: string; alt: string };
   labels?: string[];
-  children?: React.ReactNode;
+  children?: ReactNode;
 };
 type Props = {
   item: SearchItemType;
@@ -221,7 +216,7 @@ const SearchItem = ({ item, type }: Props) => {
   const { title, url, ingress, contexts, img = null, labels = [] } = item;
   const mainContext = contexts?.[0];
 
-  const Breadcrumb = ({ breadcrumb, children }: { breadcrumb: string[]; children?: React.ReactNode }) => (
+  const Breadcrumb = ({ breadcrumb, children }: { breadcrumb: string[]; children?: ReactNode }) => (
     <BreadcrumbPath>
       {breadcrumb.map((breadcrumbItem: string, i: number) => {
         return (

package/src/SearchTypeResult/SearchItems.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React from 'react';
+import React, { memo } from 'react';
 import styled from '@emotion/styled';
 import { breakpoints, mq, spacing } from '@ndla/core';
 import SearchItem, { SearchItemType } from './SearchItem';
@@ -52,4 +52,4 @@ const SearchItems = ({ items, type }: Props) => (
   </Wrapper>
 );
 
-export default React.memo(SearchItems);
+export default memo(SearchItems);

package/src/SearchTypeResult/SearchNotionItem.tsx

@@ -6,20 +6,16 @@
  *
  */
 
-import React from 'react';
+import React, { MouseEventHandler, ReactNode } from 'react';
 import styled from '@emotion/styled';
 import parse from 'html-react-parser';
 
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
-// @ts-ignore
 import { getLicenseByAbbreviation } from '@ndla/licenses';
 // @ts-ignore
 import Button from '@ndla/button';
-// @ts-ignore
 import { Play } from '@ndla/icons/common';
-// @ts-ignore
 import { ArrowExpand } from '@ndla/icons/editor';
-// @ts-ignore
 import Modal, { ModalCloseButton, ModalHeader, ModalBody } from '@ndla/modal';
 import { useTranslation } from 'react-i18next';
 import { joinArrayWithConjunction } from '@ndla/util';
@@ -122,15 +118,15 @@ const AuthorsWrapper = styled.div`
 export type SearchNotionItemProps = {
   id: string | number;
   title: string;
-  text: React.ReactNode;
+  text: ReactNode;
   image?: { url: string; alt: string };
   media?: NotionMedia;
   labels?: string[];
   authors?: { name: string }[];
   license?: string;
   locale?: string;
-  onReferenceClick?: React.MouseEventHandler<HTMLButtonElement>;
-  renderMarkdown: (text: React.ReactNode) => string;
+  onReferenceClick?: MouseEventHandler<HTMLButtonElement>;
+  renderMarkdown: (text: ReactNode) => string;
 };
 
 const SearchNotionItem = ({

package/src/SearchTypeResult/SearchNotionsResult.tsx

@@ -6,12 +6,10 @@
  *
  */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { fonts, mq, breakpoints, spacing } from '@ndla/core';
-// @ts-ignore
 import { ModalCloseButton } from '@ndla/modal';
-// @ts-ignore
 import { withTranslation, WithTranslation } from 'react-i18next';
 import SearchNotionItem, { SearchNotionItemProps } from './SearchNotionItem';
 
@@ -52,7 +50,7 @@ type Props = {
   items: SearchNotionItemProps[];
   totalCount: number;
   onRemove: () => void;
-  renderMarkdown: (text: React.ReactNode) => string;
+  renderMarkdown: (text: ReactNode) => string;
 };
 
 const SearchNotionsResult = ({ items, totalCount, onRemove, renderMarkdown, t }: Props & WithTranslation) => (

package/src/SearchTypeResult/SearchSubjectItem.tsx

@@ -8,7 +8,6 @@
 
 import React from 'react';
 import styled from '@emotion/styled';
-// @ts-ignore
 import SafeLink from '@ndla/safelink';
 import { spacing } from '@ndla/core';
 import { useTranslation } from 'react-i18next';

package/src/SearchTypeResult/SearchTypeHeader.tsx

@@ -6,13 +6,12 @@
  *
  */
 
-import React from 'react'; // useMemo , { Children }
+import React, { MouseEvent, memo } from 'react'; // useMemo , { Children }
 import styled from '@emotion/styled';
 // @ts-ignore
 import Button from '@ndla/button';
 import { breakpoints, mq, spacing } from '@ndla/core';
 import { WithTranslation, withTranslation } from 'react-i18next';
-// @ts-ignore
 import ContentTypeBadge from '../ContentTypeBadge';
 import { ContentType } from './SearchTypeResult';
 
@@ -98,7 +97,7 @@ const SearchTypeHeader = ({ filters, onFilterClick, totalCount, type, t }: Props
             <Button
               size="small"
               lighter={!option.active}
-              onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+              onClick={(e: MouseEvent<HTMLButtonElement>) => {
                 if (e.currentTarget && option.active) {
                   e.currentTarget.blur();
                 }
@@ -112,4 +111,4 @@ const SearchTypeHeader = ({ filters, onFilterClick, totalCount, type, t }: Props
     )}
   </HeaderWrapper>
 );
-export default React.memo(withTranslation()(SearchTypeHeader));
+export default memo(withTranslation()(SearchTypeHeader));

package/src/SearchTypeResult/SearchTypeResult.tsx

@@ -6,10 +6,9 @@
  *
  */
 
-import React from 'react';
+import React, { memo, ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { spacing } from '@ndla/core';
-// @ts-ignore
 import Spinner from '../Spinner';
 import constants from '../model';
 import SearchTypeHeader, { FilterOptionsType } from './SearchTypeHeader';
@@ -58,7 +57,7 @@ type Props = {
   pagination?: PaginationType;
   type?: ContentType;
   loading?: boolean;
-  children?: React.ReactNode;
+  children?: ReactNode;
 };
 
 const SearchTypeResult = ({
@@ -86,4 +85,4 @@ const SearchTypeResult = ({
   </Wrapper>
 );
 
-export default React.memo(SearchTypeResult);
+export default memo(SearchTypeResult);

package/src/ToolboxPage/ToolboxInfo.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React from 'react';
+import React, { MouseEvent } from 'react';
 import styled from '@emotion/styled';
 import { breakpoints, fonts, mq } from '@ndla/core';
 import { WithTranslation, withTranslation } from 'react-i18next';
@@ -43,7 +43,7 @@ type Props = {
   title: string;
   introduction: string;
   topics: ItemProps[];
-  onSelectTopic?: (event: React.MouseEvent<HTMLElement>, id?: string) => void;
+  onSelectTopic?: (event: MouseEvent<HTMLElement>, id?: string) => void;
 };
 
 const ToolboxInfo = ({ title, introduction, topics, onSelectTopic, t }: Props & WithTranslation) => (

package/src/Topic/Loader.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-// @ts-ignore
 import ContentLoader from '../ContentLoader';
 
 const Loader = () => (

package/src/Topic/Topic.tsx

@@ -6,13 +6,12 @@
  *
  */
 
-import React from 'react';
+import React, { ReactNode, MouseEvent } from 'react';
 import styled from '@emotion/styled';
 import { animations, breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 
 import parse from 'html-react-parser';
 import { ChevronDown, ChevronUp, PlayCircleFilled } from '@ndla/icons/common';
-// @ts-ignore
 import Modal, { ModalCloseButton, ModalHeader, ModalBody } from '@ndla/modal';
 // @ts-ignore
 import Button from '@ndla/button';
@@ -212,7 +211,7 @@ const StyledNavigationBoxWrapper = styled.div`
 
 type VisualElementProps = {
   type: 'image' | 'video' | 'other';
-  element: React.ReactNode;
+  element: ReactNode;
 };
 
 export type TopicProps = {
@@ -226,10 +225,10 @@ export type TopicProps = {
       focalPoint?: ImageFocalPoint;
     };
     visualElement?: VisualElementProps;
-    resources?: React.ReactNode;
+    resources?: ReactNode;
   };
   subTopics?: ItemProps[] | null | undefined;
-  onSubTopicSelected?: (event: React.MouseEvent<HTMLElement>, id?: string) => void;
+  onSubTopicSelected?: (event: MouseEvent<HTMLElement>, id?: string) => void;
   isLoading?: boolean;
   renderMarkdown?: (text: string) => string;
   invertedStyle?: boolean;
@@ -237,7 +236,7 @@ export type TopicProps = {
   showContent?: boolean;
   isAdditionalTopic?: boolean;
   frame?: boolean;
-  children?: React.ReactNode;
+  children?: ReactNode;
 };
 
 const Topic = ({