@ndla/ui 3.2.1 → 3.2.5

package/src/Hero/Hero.tsx

@@ -16,20 +16,22 @@ const classes = new BEMHelper({
   prefix: 'c-',
 });
 
+export type HeroContentType =
+  | 'subject-material'
+  | 'tasks-and-activities'
+  | 'assessment-resources'
+  | 'subject'
+  | 'external-learning-resources'
+  | 'source-material'
+  | 'learning-path'
+  | 'topic'
+  | 'beta'
+  | 'ndla-film'
+  | 'ndla-film has-image';
+
 interface HeroProps {
   children?: ReactNode;
-  contentType:
-    | 'subject-material'
-    | 'tasks-and-activities'
-    | 'assessment-resources'
-    | 'subject'
-    | 'external-learning-resources'
-    | 'source-material'
-    | 'learning-path'
-    | 'topic'
-    | 'beta'
-    | 'ndla-film'
-    | 'ndla-film has-image';
+  contentType?: HeroContentType;
 }
 
 export const Hero = ({ children, contentType }: HeroProps) => (

package/src/Hero/index.ts

@@ -16,3 +16,5 @@ export {
   Hero,
   NdlaFilmHero,
 } from './Hero';
+
+export type { HeroContentType } from './Hero';

package/src/Image/Image.tsx

@@ -10,7 +10,17 @@ import React, { ReactNode } from 'react';
 import defined from 'defined';
 import styled from '@emotion/styled';
 import LazyLoadImage from './LazyLoadImage';
-import { ImageCrop, ImageFocalPoint } from '../types';
+export interface ImageCrop {
+  startX: number;
+  startY: number;
+  endX: number;
+  endY: number;
+}
+
+export interface ImageFocalPoint {
+  x: number;
+  y: number;
+}
 
 export const makeSrcQueryString = (width: number | undefined, crop?: ImageCrop, focalPoint?: ImageFocalPoint) => {
   const widthParams = width && `width=${width}`;

package/src/Image/ImageLink.tsx

@@ -9,7 +9,7 @@
 import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { makeSrcQueryString } from './Image';
-import { ImageCrop, ImageFocalPoint } from '../types';
+import { ImageCrop, ImageFocalPoint } from '.';
 
 const StyledLink = styled.a`
   box-shadow: inset 0 0;

package/src/Image/index.ts

@@ -9,5 +9,6 @@
 import Image from './Image';
 export { makeSrcQueryString } from './Image';
 export { ImageLink } from './ImageLink';
+export type { ImageCrop, ImageFocalPoint } from './Image';
 
 export default Image;

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

@@ -1,6 +1,6 @@
-import React, { cloneElement } from 'react';
-import PropTypes from 'prop-types';
+import React, { cloneElement, ReactElement } from 'react';
 import BEMHelper from 'react-bem-helper';
+//@ts-ignore
 import Button from '@ndla/button';
 import SafeLink from '@ndla/safelink';
 import SectionHeading from '../SectionHeading';
@@ -10,14 +10,32 @@ const classes = new BEMHelper({
   prefix: 'c-',
 });
 
-export const RelatedArticle = ({ title, introduction, icon, modifier, to, linkInfo = '', target = '' }) => {
+interface RelatedArticleProps {
+  icon: ReactElement;
+  title: string;
+  modifier?: string;
+  introduction: string;
+  to: string;
+  linkInfo?: string;
+  target?: string;
+}
+
+export const RelatedArticle = ({
+  title,
+  introduction,
+  icon,
+  modifier,
+  to,
+  linkInfo = '',
+  target = '',
+}: RelatedArticleProps) => {
   const iconWithClass = cloneElement(icon, { className: 'c-icon--medium' });
   return (
     <article {...classes('item', modifier)}>
       <h1 {...classes('title')}>
         {iconWithClass}
         <span {...classes('link-wrapper')}>
-          <SafeLink to={to} {...classes('link')} target={target} rel={linkInfo ? 'noopener noreferrer' : null}>
+          <SafeLink to={to} {...classes('link')} target={target} rel={linkInfo ? 'noopener noreferrer' : undefined}>
             {title}
           </SafeLink>
         </span>
@@ -28,24 +46,27 @@ export const RelatedArticle = ({ title, introduction, icon, modifier, to, linkIn
   );
 };
 
-RelatedArticle.propTypes = {
-  icon: PropTypes.node.isRequired,
-  title: PropTypes.string.isRequired,
-  modifier: PropTypes.string,
-  introduction: PropTypes.string.isRequired,
-  to: PropTypes.string.isRequired,
-  linkInfo: PropTypes.string,
-  target: PropTypes.string,
-};
-
-const RelatedArticleList = ({ messages, children, articleCount, dangerouslySetInnerHTML }) => {
-  const clonedChildren = !dangerouslySetInnerHTML
-    ? React.Children.map(children, (article, i) =>
-        React.cloneElement(article, {
-          modifier: i >= 2 ? `${article.props.modifier} hidden` : article.props.modifier,
-        }),
-      )
-    : null;
+interface Props {
+  messages: {
+    title: string;
+    showMore: string;
+    showLess: string;
+  };
+  children?: ReactElement;
+  dangerouslySetInnerHTML?: {
+    __html: string;
+  };
+  articleCount?: number;
+}
+const RelatedArticleList = ({ messages, children, articleCount, dangerouslySetInnerHTML }: Props) => {
+  const clonedChildren =
+    !dangerouslySetInnerHTML && children
+      ? React.Children.map(children, (article, i) =>
+          React.cloneElement(article, {
+            modifier: i >= 2 ? `${article.props.modifier} hidden` : article.props.modifier,
+          }),
+        )
+      : null;
   const childrenCount = articleCount || React.Children.count(children);
 
   return (
@@ -67,12 +88,4 @@ const RelatedArticleList = ({ messages, children, articleCount, dangerouslySetIn
   );
 };
 
-RelatedArticleList.propTypes = {
-  children: PropTypes.node,
-  messages: PropTypes.shape({ title: PropTypes.string.isRequired }),
-  dangerouslySetInnerHTML: PropTypes.shape({
-    __html: PropTypes.string.isRequired,
-  }),
-  articleCount: PropTypes.number,
-};
 export default RelatedArticleList;

package/src/ResourcesWrapper/{ResourcesTitle.jsx → ResourcesTitle.tsx}

@@ -6,20 +6,18 @@
  *
  */
 
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
 import { classes } from './ResourcesWrapper';
 import { SubjectBadge } from '../ContentTypeBadge';
 
-const ResourceTitle = ({ children }) => (
+interface Props {
+  children: ReactNode;
+}
+const ResourceTitle = ({ children }: Props) => (
   <div {...classes('title-wrapper')}>
     <SubjectBadge size="large" background />
     <h1 {...classes('title')}>{children}</h1>
   </div>
 );
 
-ResourceTitle.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
 export default ResourceTitle;

package/src/ResourcesWrapper/{ResourcesTopicTitle.jsx → ResourcesTopicTitle.tsx}

@@ -1,9 +1,9 @@
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
+import React, { Fragment, ReactNode } from 'react';
 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';
@@ -11,7 +11,10 @@ import { useTranslation } from 'react-i18next';
 
 import { classes } from './ResourcesWrapper';
 
-const HelpIcon = ({ invertedStyle }) => (
+interface HelpIconProps {
+  invertedStyle: boolean;
+}
+const HelpIcon = ({ invertedStyle }: HelpIconProps) => (
   <div {...classes('topic-title-icon', { invertedStyle })}>
     <HelpCircleDual className={`c-icon--22 u-margin-left-tiny ${classes('icon').className}`} />
   </div>
@@ -37,14 +40,25 @@ const TooltipButton = styled.button`
   cursor: pointer;
 `;
 
+interface Props {
+  title?: string;
+  toggleAdditionalResources: () => void;
+  hasAdditionalResources: boolean;
+  showAdditionalResources: boolean;
+  invertedStyle?: boolean;
+  messages: {
+    label: string;
+    additionalFilterLabel: string;
+  };
+}
 const ResourcesTopicTitle = ({
   title,
   hasAdditionalResources,
   toggleAdditionalResources,
   showAdditionalResources,
   messages,
-  invertedStyle,
-}) => {
+  invertedStyle = false,
+}: Props) => {
   const { t } = useTranslation();
   // Fix for heading while title not required when ready.
   let heading;
@@ -70,7 +84,7 @@ const ResourcesTopicTitle = ({
           />
           <Modal
             narrow
-            wrapperFunctionForButton={(activateButton) => (
+            wrapperFunctionForButton={(activateButton: ReactNode) => (
               <TooltipWrapper>
                 <Tooltip tooltip={t('resource.dialogTooltip')}>{activateButton}</Tooltip>
               </TooltipWrapper>
@@ -80,8 +94,8 @@ const ResourcesTopicTitle = ({
                 <HelpIcon invertedStyle={invertedStyle} />
               </TooltipButton>
             }>
-            {(onClose) => (
-              <Fragment>
+            {(onClose: () => void) => (
+              <>
                 <ModalHeader>
                   <ModalCloseButton title={t('modal.closeModal')} onClick={onClose} />
                 </ModalHeader>
@@ -91,7 +105,7 @@ const ResourcesTopicTitle = ({
                   <p>{t('resource.dialogText1')}</p>
                   <p>{t('resource.dialogText2')}</p>
                 </ModalBody>
-              </Fragment>
+              </>
             )}
           </Modal>
         </div>
@@ -100,17 +114,4 @@ const ResourcesTopicTitle = ({
   );
 };
 
-/* eslint-disable no-console */
-ResourcesTopicTitle.propTypes = {
-  title: PropTypes.string, // Should be required
-  toggleAdditionalResources: PropTypes.func.isRequired,
-  hasAdditionalResources: PropTypes.bool.isRequired,
-  showAdditionalResources: PropTypes.bool.isRequired,
-  invertedStyle: PropTypes.bool,
-  messages: PropTypes.shape({
-    label: PropTypes.string.isRequired,
-    additionalFilterLabel: PropTypes.string.isRequired,
-  }).isRequired,
-};
-
 export default ResourcesTopicTitle;

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

@@ -6,8 +6,7 @@
  *
  */
 
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
 import BEMHelper from 'react-bem-helper';
 
 export const classes = new BEMHelper({
@@ -15,22 +14,18 @@ export const classes = new BEMHelper({
   prefix: 'c-',
 });
 
-const ResourcesWrapper = ({ children, header, subjectPage, id }) => (
+interface Props {
+  header?: ReactNode;
+  children: ReactNode;
+  subjectPage?: boolean;
+  id?: string;
+}
+
+const ResourcesWrapper = ({ children, header, subjectPage = false, id }: Props) => (
   <section {...classes('', { subjectPage })} id={id}>
     {header}
     <div {...classes('content')}>{children}</div>
   </section>
 );
 
-ResourcesWrapper.propTypes = {
-  header: PropTypes.node,
-  children: PropTypes.node.isRequired,
-  subjectPage: PropTypes.bool,
-  id: PropTypes.string,
-};
-
-ResourcesWrapper.defaultProps = {
-  subjectPage: false,
-};
-
 export default ResourcesWrapper;

package/src/Topic/Topic.tsx

@@ -22,9 +22,7 @@ import { useTranslation } from 'react-i18next';
 import Loader from './Loader';
 import { ItemProps } from '../Navigation/NavigationBox';
 import { NavigationBox } from '../Navigation';
-// @ts-ignore
-import { makeSrcQueryString } from '../Image';
-import { ImageCrop, ImageFocalPoint } from '../types';
+import { makeSrcQueryString, ImageCrop, ImageFocalPoint } from '../Image';
 
 type InvertItProps = {
   invertedStyle?: boolean;

package/src/Translation/TranslationBox.tsx

@@ -6,7 +6,7 @@ interface Props {
   tabs: {
     id: string;
     title: string;
-    content: () => ReactNode | ReactNode;
+    content: (() => ReactNode) | ReactNode;
   }[];
 }
 const TranslationBox = ({ tabs }: Props) => (

package/src/index-javascript.js

@@ -8,7 +8,6 @@
 
 export { default as Table } from './Table';
 export { FilterList, FilterListPhone, FilterButtons } from './Filter';
-export { default as FactBox } from './FactBox';
 
 export {
   SearchOverlay,
@@ -35,10 +34,8 @@ export {
   ExternalLearningResourcesBadge,
   SourceMaterialBadge,
 } from './ContentTypeBadge';
-export { createUniversalPortal } from './utils/createUniversalPortal';
 export { default as TopicIntroductionList } from './TopicIntroductionList';
 export { default as TopicMenu, TopicMenuButton } from './TopicMenu';
-export { default as RelatedArticleList, RelatedArticle } from './RelatedArticleList';
 export {
   default as CompetenceGoals,
   CompetenceGoalList,
@@ -47,7 +44,6 @@ export {
   CompetenceGoalsDialog,
 } from './CompetenceGoals';
 
-export { default as ResourcesWrapper, ResourcesTitle, ResourcesTopicTitle } from './ResourcesWrapper';
 export {
   MediaList,
   MediaListItem,

package/src/index.ts

@@ -24,6 +24,10 @@ export {
   default as Article,
 } from './Article';
 
+export { default as ResourcesWrapper, ResourcesTitle, ResourcesTopicTitle } from './ResourcesWrapper';
+
+export { createUniversalPortal } from './utils/createUniversalPortal';
+
 export { default as NoContentBox } from './NoContentBox';
 
 export { default as Masthead, MastheadItem } from './Masthead';
@@ -32,6 +36,8 @@ export { default as Portrait } from './Portrait';
 
 export { default as ContentLoader } from './ContentLoader';
 
+export { default as RelatedArticleList, RelatedArticle } from './RelatedArticleList';
+
 export { ErrorResourceAccessDenied, default as ErrorMessage } from './ErrorMessage';
 
 export { default as FileList, File } from './FileList';
@@ -55,6 +61,8 @@ export {
   FrontpageProgramMenu,
 } from './Frontpage';
 
+export { default as FactBox } from './FactBox';
+
 export { default as Image, ImageLink } from './Image';
 export { makeSrcQueryString } from './Image';
 

package/src/types.ts

@@ -45,18 +45,6 @@ export interface License {
   license: string;
 }
 
-export interface ImageCrop {
-  startX: number;
-  startY: number;
-  endX: number;
-  endY: number;
-}
-
-export interface ImageFocalPoint {
-  x: number;
-  y: number;
-}
-
 export interface Copyright {
   license: License;
   creators: Array<Contributor>;

package/src/utils/{createUniversalPortal.jsx → createUniversalPortal.tsx}

@@ -8,7 +8,7 @@
 
 // N.B This helper is intended to be used in https://github.com/ndlano/article-converter. It is not a general soultion for using portals in SSR applications.
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import ReactDOM from 'react-dom';
 
 function canUseDOM() {
@@ -20,9 +20,9 @@ function canUseDOM() {
   ); // window.document.hidden === jsdom check
 }
 
-export function createUniversalPortal(children, selector) {
+export function createUniversalPortal(children: ReactNode, selector: string) {
   if (!canUseDOM()) {
     return <div data-react-universal-portal>{children}</div>;
   }
-  return ReactDOM.createPortal(children, document.querySelector(selector));
+  return ReactDOM.createPortal(children, document.querySelector(selector) as Element);
 }