@ndla/ui 3.3.15 → 3.3.16

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

@@ -217,7 +217,7 @@ type Props = {
   suggestionUrl?: string;
 };
 
-const SearchResultSleeve: React.FC<Props> = ({
+const SearchResultSleeve = ({
   result,
   allResultUrl,
   resourceToLinkProps,
@@ -229,7 +229,7 @@ const SearchResultSleeve: React.FC<Props> = ({
   frontpage,
   suggestion,
   suggestionUrl,
-}) => {
+}: Props) => {
   const { t } = useTranslation();
   const contentRef = useRef<HTMLDivElement>(null);
   const searchAllRef = useRef<HTMLDivElement>(null);

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 = ({

package/src/Translation/TranslationBox.tsx

@@ -1,5 +1,4 @@
 import React, { ReactNode } from 'react';
-//@ts-ignore
 import { ArticleTabs } from '@ndla/tabs';
 
 interface Props {

package/src/User/AuthModal.tsx

@@ -9,7 +9,6 @@
 import React, { ReactElement, ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { useTranslation } from 'react-i18next';
-// @ts-ignore
 import Modal, { ModalCloseButton } from '@ndla/modal';
 // @ts-ignore
 import Button from '@ndla/button';

package/src/locale/LocaleProvider.tsx

@@ -6,14 +6,14 @@
  *
  */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { I18nextProvider, useTranslation } from 'react-i18next';
 import { i18nInstance } from '../i18n';
 import { Locale } from '../types';
 
 type Props = {
   locale: Locale;
-  children: React.ReactNode;
+  children: ReactNode;
 };
 
 const InitI18nWrapper = ({ locale, children }: Props) => {

package/src/types.ts

@@ -6,6 +6,8 @@
  *
  */
 
+import { ReactNode } from 'react';
+
 const locales = ['nb', 'nn', 'en'] as const;
 export type Locale = typeof locales[number];
 
@@ -114,5 +116,5 @@ export type CompetenceGoalsItemType = {
 
 export type NotionMedia = {
   type: 'video' | 'other';
-  element: React.ReactNode;
+  element: ReactNode;
 };