@ndla/ui 3.2.1-alpha.5 → 3.2.3

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,8 +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 { makeSrcQueryString, ImageCrop, ImageFocalPoint } from '../Image';
 
 type InvertItProps = {
   invertedStyle?: boolean;
@@ -223,8 +222,8 @@ export type TopicProps = {
     image?: {
       url: string;
       alt: string;
-      crop?: object;
-      focalPoint?: object;
+      crop?: ImageCrop;
+      focalPoint?: ImageFocalPoint;
     };
     visualElement?: VisualElementProps;
     resources?: React.ReactNode;

package/src/Translation/{Translation.jsx → Translation.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';
 
 const classes = new BEMHelper({
@@ -15,16 +14,16 @@ const classes = new BEMHelper({
   prefix: 'c-',
 });
 
-const Translation = ({ children, index }) => (
+interface Props {
+  children: ReactNode;
+  index: number;
+}
+
+const Translation = ({ children, index }: Props) => (
   <div {...classes('')}>
     <div {...classes('index')}>{index}</div>
     <dl {...classes('wrapper')}>{children}</dl>
   </div>
 );
 
-Translation.propTypes = {
-  index: PropTypes.number.isRequired,
-  children: PropTypes.node.isRequired,
-};
-
 export default Translation;

package/src/Translation/TranslationBox.tsx

@@ -0,0 +1,20 @@
+import React, { ReactNode } from 'react';
+//@ts-ignore
+import { ArticleTabs } from '@ndla/tabs';
+
+interface Props {
+  tabs: {
+    id: string;
+    title: string;
+    content: () => ReactNode | ReactNode;
+  }[];
+}
+const TranslationBox = ({ tabs }: Props) => (
+  <div className="c-translation-box">
+    <div className="c-bodybox c-bodybox--translation">
+      <ArticleTabs tabs={tabs} />
+    </div>
+  </div>
+);
+
+export default TranslationBox;

package/src/Translation/{TranslationLine.jsx → TranslationLine.tsx}

@@ -6,8 +6,7 @@
  *
  */
 
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
 import BEMHelper from 'react-bem-helper';
 
 const classes = new BEMHelper({
@@ -15,15 +14,22 @@ const classes = new BEMHelper({
   prefix: 'c-',
 });
 
-const TranslationLine = ({ children, lang, langName, isTerm }) => {
+interface Props {
+  isTerm?: boolean;
+  children: ReactNode;
+  lang?: string;
+  langName?: string;
+}
+
+const TranslationLine = ({ children, lang, langName, isTerm = false }: Props) => {
   const hasLang = langName && lang;
   const content = (
-    <Fragment>
+    <>
       <div {...classes('line-body')} lang={lang}>
         {children}
       </div>
       {hasLang && <div {...classes('line-lang')}>{langName}</div>}
-    </Fragment>
+    </>
   );
 
   if (isTerm) {
@@ -33,17 +39,4 @@ const TranslationLine = ({ children, lang, langName, isTerm }) => {
   return <dd {...classes('line', hasLang ? 'lang' : '')}>{content}</dd>;
 };
 
-TranslationLine.propTypes = {
-  isTerm: PropTypes.bool,
-  children: PropTypes.node.isRequired,
-  lang: PropTypes.string,
-  langName: PropTypes.string,
-};
-
-TranslationLine.defaultProps = {
-  isTerm: false,
-  lang: undefined,
-  langName: undefined,
-};
-
 export default TranslationLine;

package/src/Translation/index.ts

@@ -0,0 +1,3 @@
+export { default as Translation } from './Translation';
+export { default as TranslationBox } from './TranslationBox';
+export { default as TranslationLine } from './TranslationLine';

package/src/index-javascript.js

@@ -6,13 +6,8 @@
  *
  */
 
-export { InfoBox } from './InfoBox';
-
-export { default as Logo } from './Logo';
 export { default as Table } from './Table';
 export { FilterList, FilterListPhone, FilterButtons } from './Filter';
-export { default as FactBox } from './FactBox';
-export { default as FileList, File } from './FileList';
 
 export {
   SearchOverlay,
@@ -39,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,
@@ -51,21 +44,6 @@ export {
   CompetenceGoalsDialog,
 } from './CompetenceGoals';
 
-export { default as NoContentBox } from './NoContentBox';
-
-export { default as ResourcesWrapper, ResourcesTitle, ResourcesTopicTitle } from './ResourcesWrapper';
-export {
-  SubjectMaterialHero,
-  TasksAndActivitiesHero,
-  AssessmentResourcesHero,
-  SubjectHero,
-  ExternalLearningResourcesHero,
-  SourceMaterialHero,
-  Hero,
-  NdlaFilmHero,
-} from './Hero';
-export { default as Masthead, MastheadItem } from './Masthead';
-export { Figure, FigureCaption, FigureLicenseDialog, FigureExpandButton } from './Figure';
 export {
   MediaList,
   MediaListItem,
@@ -77,17 +55,8 @@ export {
 
 export { EmbeddedTwitter, EmbeddedFacebook, EmbeddedFacebookPage } from './Embedded';
 
-export { default as Image, ImageLink } from './Image';
-export { makeSrcQueryString } from './Image';
-export { default as Portrait } from './Portrait';
-export { Translation, TranslationLine, TranslationBox } from './Translation';
-
-export { default as ContentLoader } from './ContentLoader';
-
 export { DisplayOnPageYOffset } from './Animation';
 
-export { default as InfoWidget } from './InfoWidget';
-
 export {
   FilmSlideshow,
   MovieGrid,
@@ -96,5 +65,3 @@ export {
   FilmMovieList,
   AllMoviesAlphabetically,
 } from './NDLAFilm';
-
-export { default as Spinner } from './Spinner';

package/src/index.ts

@@ -24,10 +24,32 @@ 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';
+
+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';
+
 export { BlogPost, BlogPostWrapper } from './BlogPosts';
 
+export { default as Logo } from './Logo';
+
+export { InfoBox } from './InfoBox';
+
+export { default as InfoWidget } from './InfoWidget';
+
 export {
   FrontpageInfo,
   FrontpageFilm,
@@ -39,8 +61,26 @@ export {
   FrontpageProgramMenu,
 } from './Frontpage';
 
+export { default as FactBox } from './FactBox';
+
+export { default as Image, ImageLink } from './Image';
+export { makeSrcQueryString } from './Image';
+
+export {
+  SubjectMaterialHero,
+  TasksAndActivitiesHero,
+  AssessmentResourcesHero,
+  SubjectHero,
+  ExternalLearningResourcesHero,
+  SourceMaterialHero,
+  Hero,
+  NdlaFilmHero,
+} from './Hero';
+
 export { Footer, EditorName, FooterText, FooterAuth } from './Footer';
 
+export { Figure, FigureCaption, FigureLicenseDialog, FigureExpandButton } from './Figure';
+
 export { LanguageSelector } from './LanguageSelector';
 
 export {
@@ -55,6 +95,9 @@ export {
   LearningPathMobileStepInfo,
   LearningPathMobileHeader,
 } from './LearningPaths';
+export { Translation, TranslationLine, TranslationBox } from './Translation';
+
+export { default as Spinner } from './Spinner';
 
 export { default as SearchResultSleeve } from './Search/SearchResultSleeve';
 

package/src/locale/messages-en.ts

@@ -808,6 +808,10 @@ const messages = {
     reuse: 'Use video',
     error: 'Sorry, an error occurred while loading the video or metadata about the video.',
   },
+  other: {
+    download: 'Download content',
+    reuse: 'Use content',
+  },
   concept: {
     showDescription: 'Show concept description',
     error: {

package/src/locale/messages-nb.ts

@@ -538,7 +538,7 @@ const messages = {
     es: 'Spansk',
     zh: 'Kinesisk',
     unknown: 'Ukjent',
-    prefixChangeLanguage: 'Velg målform',
+    prefixChangeLanguage: 'Velg språk',
   },
   changeLanguage: {
     nb: 'Endre språk til bokmål',
@@ -807,6 +807,10 @@ const messages = {
     reuse: 'Bruk video',
     error: 'Beklager, en feil oppstod ved lasting av videoen eller metadata om videoen.',
   },
+  other: {
+    download: 'Last ned innhold',
+    reuse: 'Bruk innhold',
+  },
   concept: {
     showDescription: 'Vis beskrivelsen av forklaringen.',
     error: {

package/src/locale/messages-nn.ts

@@ -539,7 +539,7 @@ const messages = {
     es: 'Spansk',
     zh: 'Kinesisk',
     unknown: 'Ukjent',
-    prefixChangeLanguage: 'Vel målform',
+    prefixChangeLanguage: 'Vel språk',
   },
   changeLanguage: {
     nb: 'Endre språk til bokmål',
@@ -808,6 +808,10 @@ const messages = {
     reuse: 'Bruk video',
     error: 'Orsak, ein feil oppstod ved lasting av videoen eller metadata om videoen.',
   },
+  other: {
+    download: 'Last ned innhald',
+    reuse: 'Bruk innhald',
+  },
   concept: {
     showDescription: 'Vis skildring av forklaringa',
     error: {

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

package/es/Image/shapes.js

@@ -1,18 +0,0 @@
-/**
- * Copyright (c) 2019-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-import PropTypes from 'prop-types';
-export var CropShape = PropTypes.shape({
-  startX: PropTypes.number.isRequired,
-  startY: PropTypes.number.isRequired,
-  endX: PropTypes.number.isRequired,
-  endY: PropTypes.number.isRequired
-});
-export var FocalPointShape = PropTypes.shape({
-  x: PropTypes.number.isRequired,
-  y: PropTypes.number.isRequired
-});

package/lib/Image/shapes.js

@@ -1,33 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FocalPointShape = exports.CropShape = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-/**
- * Copyright (c) 2019-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-var CropShape = _propTypes["default"].shape({
-  startX: _propTypes["default"].number.isRequired,
-  startY: _propTypes["default"].number.isRequired,
-  endX: _propTypes["default"].number.isRequired,
-  endY: _propTypes["default"].number.isRequired
-});
-
-exports.CropShape = CropShape;
-
-var FocalPointShape = _propTypes["default"].shape({
-  x: _propTypes["default"].number.isRequired,
-  y: _propTypes["default"].number.isRequired
-});
-
-exports.FocalPointShape = FocalPointShape;