@ndla/ui 3.3.14 → 4.0.0

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>

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/index.ts

@@ -117,7 +117,7 @@ export { default as Breadcrumblist } from './Breadcrumblist';
 
 export { MessageBox, MessageBoxTag, MessageBoxType } from './MessageBox';
 
-export { CloseButton } from './CloseButton';
+export { default as CloseButton } from './CloseButton';
 export { default as AudioPlayer, initAudioPlayers } from './AudioPlayer';
 
 export { NavigationHeading, NavigationBox, NavigationTopicAbout } from './Navigation';

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;
 };