@ndla/ui 3.2.1-alpha.3 → 3.2.2

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,7 @@ 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 +56,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 +66,3 @@ export {
   FilmMovieList,
   AllMoviesAlphabetically,
 } from './NDLAFilm';
-
-export { default as Spinner } from './Spinner';

package/src/index.ts

@@ -24,10 +24,30 @@ export {
   default as Article,
 } from './Article';
 
+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 +59,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 +93,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/types.ts

@@ -45,6 +45,18 @@ 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);
 }

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;

package/src/BackgroundImage/BackgroundImage.jsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import BEMHelper from 'react-bem-helper';
-
-import { breakpoints } from '@ndla/util';
-
-const classes = BEMHelper('c-background-image');
-
-const BackgroundImage = ({ images, showOverlay }) => (
-  <div {...classes('', showOverlay)}>
-    {images &&
-      images.map((image) =>
-        image.types.map((type) => (
-          <div
-            key={`${image.url}${type}`}
-            {...classes('background', type)}
-            style={{ backgroundImage: `url(${image.url})` }}
-          />
-        )),
-      )}
-  </div>
-);
-
-BackgroundImage.propTypes = {
-  showOverlay: PropTypes.bool,
-  className: PropTypes.string,
-  images: PropTypes.arrayOf(
-    PropTypes.shape({
-      url: PropTypes.string.isRequired,
-      types: PropTypes.arrayOf(PropTypes.oneOf(Object.keys(breakpoints))).isRequired,
-    }),
-  ).isRequired,
-};
-
-BackgroundImage.defaultProps = {
-  showOverlay: false,
-};
-
-export default BackgroundImage;

package/src/FileList/FileList.jsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import BEMHelper from 'react-bem-helper';
-import File from './File';
-
-const classes = BEMHelper('c-file-list');
-
-const FileList = ({ files, heading, id }) => (
-  <section {...classes()}>
-    <h1 {...classes('heading')}>{heading}</h1>
-    <ul {...classes('files')}>
-      {files.map((file) => (
-        <File key={`file-${id}-${file.title}`} file={file} id={id} />
-      ))}
-    </ul>
-  </section>
-);
-
-FileList.propTypes = {
-  id: PropTypes.string.isRequired,
-  heading: PropTypes.string.isRequired,
-  files: PropTypes.arrayOf(
-    PropTypes.shape({
-      title: PropTypes.string.isRequired,
-      formats: PropTypes.arrayOf(
-        PropTypes.shape({
-          url: PropTypes.string.isRequired,
-          fileType: PropTypes.string.isRequired,
-          tooltip: PropTypes.string.isRequired,
-        }),
-      ).isRequired,
-    }),
-  ).isRequired,
-};
-
-export default FileList;

package/src/Hero/Hero.jsx

@@ -1,38 +0,0 @@
-/**
- * Copyright (c) 2016-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 React from 'react';
-import PropTypes from 'prop-types';
-import BEMHelper from 'react-bem-helper';
-import { ContentTypeShape } from '../shapes';
-
-import * as contentTypes from '../model/ContentType';
-
-const classes = new BEMHelper({
-  name: 'hero',
-  prefix: 'c-',
-});
-
-export const Hero = ({ children, contentType }) => <div {...classes('', contentType)}>{children || null}</div>;
-
-Hero.propTypes = {
-  contentType: ContentTypeShape,
-  children: PropTypes.node,
-};
-
-export const SubjectMaterialHero = (props) => <Hero contentType={contentTypes.SUBJECT_MATERIAL} {...props} />;
-export const TasksAndActivitiesHero = (props) => <Hero contentType={contentTypes.TASKS_AND_ACTIVITIES} {...props} />;
-export const AssessmentResourcesHero = (props) => <Hero contentType={contentTypes.ASSESSMENT_RESOURCES} {...props} />;
-export const SubjectHero = (props) => <Hero contentType={contentTypes.SUBJECT} {...props} />;
-export const ExternalLearningResourcesHero = (props) => (
-  <Hero contentType={contentTypes.EXTERNAL_LEARNING_RESOURCES} {...props} />
-);
-export const SourceMaterialHero = (props) => <Hero contentType={contentTypes.SOURCE_MATERIAL} {...props} />;
-export const NdlaFilmHero = ({ hasImage, ...rest }) => (
-  <Hero {...rest} contentType={hasImage ? 'ndla-film has-image' : 'ndla-film'} />
-);

package/src/Image/LazyLoadImage.jsx

@@ -1,39 +0,0 @@
-/**
- * Copyright (c) 2017-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 React from 'react';
-import PropTypes from 'prop-types';
-
-// Lazyload image with lazysizes (https://github.com/aFarkas/lazysizes)
-const LazyLoadImage = ({ alt, src, srcSet, lazyLoadSrc, sizes, ...rest }) => [
-  <noscript key="noscript">
-    <img alt={alt} src={`${src}`} srcSet={srcSet} sizes={sizes} {...rest} />
-  </noscript>,
-  <img
-    alt={alt}
-    key="img"
-    style={{ width: '100%' }}
-    className="lazyload"
-    src={lazyLoadSrc}
-    data-src={src}
-    data-src-set={srcSet}
-    data-sizes={sizes}
-    {...rest}
-  />,
-];
-
-LazyLoadImage.propTypes = {
-  alt: PropTypes.string.isRequired,
-  src: PropTypes.string.isRequired,
-  sizes: PropTypes.string,
-  contentType: PropTypes.string,
-  srcSet: PropTypes.string,
-  lazyLoadSrc: PropTypes.string.isRequired,
-};
-
-export default LazyLoadImage;

package/src/Image/shapes.js

@@ -1,21 +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 const CropShape = PropTypes.shape({
-  startX: PropTypes.number.isRequired,
-  startY: PropTypes.number.isRequired,
-  endX: PropTypes.number.isRequired,
-  endY: PropTypes.number.isRequired,
-});
-
-export const FocalPointShape = PropTypes.shape({
-  x: PropTypes.number.isRequired,
-  y: PropTypes.number.isRequired,
-});

package/src/InfoBox/InfoBox.jsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import BEMHelper from 'react-bem-helper';
-
-const classes = BEMHelper('c-info-box');
-
-const InfoBox = ({ children }) => <div {...classes()}>{children}</div>;
-
-InfoBox.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-export default InfoBox;

package/src/Translation/TranslationBox.jsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import { ArticleTabs } from '@ndla/tabs';
-
-const TranslationBox = (props) => (
-  <div className="c-translation-box">
-    <div className="c-bodybox c-bodybox--translation">
-      <ArticleTabs {...props} />
-    </div>
-  </div>
-);
-
-export default TranslationBox;