@ndla/ui 3.3.13 → 3.3.17

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/TopicIntroductionList/{TopicIntroduction.jsx → TopicIntroduction.tsx}

@@ -7,13 +7,13 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import BEMHelper from 'react-bem-helper';
+import { useTranslation } from 'react-i18next';
 import { Additional, Core } from '@ndla/icons/common';
 import Tooltip from '@ndla/tooltip';
 import SafeLink from '@ndla/safelink';
-import { TopicShape, ShortcutShape } from '../shapes';
 import TopicIntroductionShortcuts from './TopicIntroductionShortcuts';
+import { Shortcut, Topic } from './TopicIntroductionList';
 
 const topicClasses = new BEMHelper({
   prefix: 'c-',
@@ -21,23 +21,35 @@ const topicClasses = new BEMHelper({
   outputIsString: true,
 });
 
+interface Props {
+  additional?: boolean;
+  showAdditionalCores?: boolean;
+  topic: Topic;
+  toTopic: (id: string) => string;
+  subjectPage?: boolean;
+  shortcuts?: Shortcut[];
+  twoColumns?: boolean;
+  shortcutAlwaysExpanded?: boolean;
+  id: string;
+}
+
 export const TopicIntroduction = ({
   toTopic,
   topic,
   subjectPage,
   shortcuts,
-  messages,
   shortcutAlwaysExpanded,
-  additional,
-  showAdditionalCores,
+  additional = false,
+  showAdditionalCores = false,
   id,
-}) => {
-  const contentTypeDescription = additional ? messages.tooltipAdditionalTopic : messages.tooltipCoreTopic;
+}: Props) => {
+  const { t } = useTranslation();
+  const contentTypeDescription = t(additional ? 'resource.tooltipAdditionalTopic' : 'resource.tooltipCoreTopic');
 
   return (
     <li
       className={topicClasses('item', {
-        subjectPage,
+        subjectPage: !!subjectPage,
         additional,
         showAdditionalCores,
       })}>
@@ -52,12 +64,12 @@ export const TopicIntroduction = ({
             {contentTypeDescription}
           </span>
           {additional && (
-            <Tooltip tooltip={messages.tooltipAdditionalTopic} align="left">
+            <Tooltip tooltip={t('resource.tooltipAdditionalTopic')} align="left">
               <Additional className="c-icon--20 u-margin-left-tiny" />
             </Tooltip>
           )}
           {!additional && showAdditionalCores && (
-            <Tooltip tooltip={messages.tooltipCoreTopic} align="left">
+            <Tooltip tooltip={t('resource.tooltipCoreTopic')} align="left">
               <Core className="c-icon--20 u-margin-left-tiny" />
             </Tooltip>
           )}
@@ -73,9 +85,6 @@ export const TopicIntroduction = ({
                 alwaysExpanded={shortcutAlwaysExpanded}
                 id={`${topic.id}_shortcuts`}
                 shortcuts={shortcuts}
-                messages={{
-                  toggleButtonText: messages.shortcutButtonText,
-                }}
               />
             )}
           </div>
@@ -89,25 +98,3 @@ export const TopicIntroduction = ({
     </li>
   );
 };
-
-TopicIntroduction.propTypes = {
-  additional: PropTypes.bool,
-  showAdditionalCores: PropTypes.bool,
-  messages: PropTypes.shape({
-    shortcutButtonText: PropTypes.string.isRequired,
-    tooltipAdditionalTopic: PropTypes.string,
-    tooltipCoreTopic: PropTypes.string,
-  }),
-  topic: TopicShape.isRequired,
-  toTopic: PropTypes.func.isRequired,
-  subjectPage: PropTypes.bool,
-  shortcuts: PropTypes.arrayOf(ShortcutShape),
-  twoColumns: PropTypes.bool,
-  shortcutAlwaysExpanded: PropTypes.bool,
-  id: PropTypes.string.isRequired,
-};
-
-TopicIntroduction.defaultProps = {
-  showAdditionalCores: false,
-  additional: false,
-};

package/src/TopicIntroductionList/{TopicIntroductionList.jsx → TopicIntroductionList.tsx}

@@ -7,11 +7,9 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import BEMHelper from 'react-bem-helper';
 import { useTranslation } from 'react-i18next';
 import NoContentBox from '../NoContentBox';
-import { TopicShape } from '../shapes';
 import { TopicIntroduction } from './TopicIntroduction';
 
 const topicClasses = new BEMHelper({
@@ -20,14 +18,42 @@ const topicClasses = new BEMHelper({
   outputIsString: true,
 });
 
+export interface Shortcut {
+  id: string | number;
+  tooltip: string;
+  contentType: string;
+  url: string;
+  count: number;
+}
+export interface Topic {
+  name: string;
+  id: string;
+  additional?: boolean;
+  shortcuts?: Shortcut[];
+  introduction: string;
+  metaImage?: {
+    url?: string;
+    alt?: string;
+  };
+}
+
+interface Props {
+  toTopic: (id: string) => string;
+  topics: Topic[];
+  twoColumns?: boolean;
+  shortcutAlwaysExpanded?: boolean;
+  showAdditionalCores?: boolean;
+  toggleAdditionalCores?: () => void;
+}
+
 const TopicIntroductionList = ({
   topics,
-  twoColumns,
-  shortcutAlwaysExpanded,
-  showAdditionalCores,
+  twoColumns = false,
+  shortcutAlwaysExpanded = false,
+  showAdditionalCores = false,
   toggleAdditionalCores,
   ...rest
-}) => {
+}: Props) => {
   const { t } = useTranslation();
   const renderAdditionalTopicsTrigger =
     !showAdditionalCores &&
@@ -47,11 +73,6 @@ const TopicIntroductionList = ({
             additional={additional}
             showAdditionalCores={showAdditionalCores}
             shortcutAlwaysExpanded={shortcutAlwaysExpanded}
-            messages={{
-              shortcutButtonText: t('resource.label'),
-              tooltipAdditionalTopic: t('resource.tooltipAdditionalTopic'),
-              tooltipCoreTopic: t('resource.tooltipCoreTopic'),
-            }}
             id={`${topic.id}_${index}`}
           />
         );
@@ -69,19 +90,4 @@ const TopicIntroductionList = ({
   );
 };
 
-TopicIntroductionList.propTypes = {
-  toTopic: PropTypes.func.isRequired,
-  topics: PropTypes.arrayOf(TopicShape).isRequired,
-  twoColumns: PropTypes.bool,
-  shortcutAlwaysExpanded: PropTypes.bool,
-  showAdditionalCores: PropTypes.bool,
-  toggleAdditionalCores: PropTypes.func.isRequired,
-};
-
-TopicIntroductionList.defaultProps = {
-  twoColumns: false,
-  shortcutAlwaysExpanded: false,
-  showAdditionalCores: false,
-};
-
 export default TopicIntroductionList;