@ndla/ui 3.2.1 → 3.2.2

package/lib/index.js

@@ -15,10 +15,23 @@ var _exportNames = {
   ArticleHeaderWrapper: true,
   ArticleSideBar: true,
   Article: true,
+  createUniversalPortal: true,
+  NoContentBox: true,
+  Masthead: true,
+  MastheadItem: true,
+  Portrait: true,
+  ContentLoader: true,
+  RelatedArticleList: true,
+  RelatedArticle: true,
   ErrorResourceAccessDenied: true,
   ErrorMessage: true,
+  FileList: true,
+  File: true,
   BlogPost: true,
   BlogPostWrapper: true,
+  Logo: true,
+  InfoBox: true,
+  InfoWidget: true,
   FrontpageInfo: true,
   FrontpageFilm: true,
   FrontpageToolbox: true,
@@ -27,10 +40,26 @@ var _exportNames = {
   FrontpageSubjectIllustration: true,
   FrontpageSearch: true,
   FrontpageProgramMenu: true,
+  FactBox: true,
+  Image: true,
+  ImageLink: true,
+  makeSrcQueryString: true,
+  SubjectMaterialHero: true,
+  TasksAndActivitiesHero: true,
+  AssessmentResourcesHero: true,
+  SubjectHero: true,
+  ExternalLearningResourcesHero: true,
+  SourceMaterialHero: true,
+  Hero: true,
+  NdlaFilmHero: true,
   Footer: true,
   EditorName: true,
   FooterText: true,
   FooterAuth: true,
+  Figure: true,
+  FigureCaption: true,
+  FigureLicenseDialog: true,
+  FigureExpandButton: true,
   LanguageSelector: true,
   LearningPathWrapper: true,
   LearningPathContent: true,
@@ -42,6 +71,10 @@ var _exportNames = {
   LearningPathLastStepNavigation: true,
   LearningPathMobileStepInfo: true,
   LearningPathMobileHeader: true,
+  Translation: true,
+  TranslationLine: true,
+  TranslationBox: true,
+  Spinner: true,
   SearchResultSleeve: true,
   ContentTypeResult: true,
   SearchFieldForm: true,
@@ -160,6 +193,54 @@ Object.defineProperty(exports, "Article", {
     return _Article["default"];
   }
 });
+Object.defineProperty(exports, "createUniversalPortal", {
+  enumerable: true,
+  get: function get() {
+    return _createUniversalPortal.createUniversalPortal;
+  }
+});
+Object.defineProperty(exports, "NoContentBox", {
+  enumerable: true,
+  get: function get() {
+    return _NoContentBox["default"];
+  }
+});
+Object.defineProperty(exports, "Masthead", {
+  enumerable: true,
+  get: function get() {
+    return _Masthead["default"];
+  }
+});
+Object.defineProperty(exports, "MastheadItem", {
+  enumerable: true,
+  get: function get() {
+    return _Masthead.MastheadItem;
+  }
+});
+Object.defineProperty(exports, "Portrait", {
+  enumerable: true,
+  get: function get() {
+    return _Portrait["default"];
+  }
+});
+Object.defineProperty(exports, "ContentLoader", {
+  enumerable: true,
+  get: function get() {
+    return _ContentLoader["default"];
+  }
+});
+Object.defineProperty(exports, "RelatedArticleList", {
+  enumerable: true,
+  get: function get() {
+    return _RelatedArticleList["default"];
+  }
+});
+Object.defineProperty(exports, "RelatedArticle", {
+  enumerable: true,
+  get: function get() {
+    return _RelatedArticleList.RelatedArticle;
+  }
+});
 Object.defineProperty(exports, "ErrorResourceAccessDenied", {
   enumerable: true,
   get: function get() {
@@ -172,6 +253,18 @@ Object.defineProperty(exports, "ErrorMessage", {
     return _ErrorMessage["default"];
   }
 });
+Object.defineProperty(exports, "FileList", {
+  enumerable: true,
+  get: function get() {
+    return _FileList["default"];
+  }
+});
+Object.defineProperty(exports, "File", {
+  enumerable: true,
+  get: function get() {
+    return _FileList.File;
+  }
+});
 Object.defineProperty(exports, "BlogPost", {
   enumerable: true,
   get: function get() {
@@ -184,6 +277,24 @@ Object.defineProperty(exports, "BlogPostWrapper", {
     return _BlogPosts.BlogPostWrapper;
   }
 });
+Object.defineProperty(exports, "Logo", {
+  enumerable: true,
+  get: function get() {
+    return _Logo["default"];
+  }
+});
+Object.defineProperty(exports, "InfoBox", {
+  enumerable: true,
+  get: function get() {
+    return _InfoBox.InfoBox;
+  }
+});
+Object.defineProperty(exports, "InfoWidget", {
+  enumerable: true,
+  get: function get() {
+    return _InfoWidget["default"];
+  }
+});
 Object.defineProperty(exports, "FrontpageInfo", {
   enumerable: true,
   get: function get() {
@@ -232,6 +343,78 @@ Object.defineProperty(exports, "FrontpageProgramMenu", {
     return _Frontpage.FrontpageProgramMenu;
   }
 });
+Object.defineProperty(exports, "FactBox", {
+  enumerable: true,
+  get: function get() {
+    return _FactBox["default"];
+  }
+});
+Object.defineProperty(exports, "Image", {
+  enumerable: true,
+  get: function get() {
+    return _Image["default"];
+  }
+});
+Object.defineProperty(exports, "ImageLink", {
+  enumerable: true,
+  get: function get() {
+    return _Image.ImageLink;
+  }
+});
+Object.defineProperty(exports, "makeSrcQueryString", {
+  enumerable: true,
+  get: function get() {
+    return _Image.makeSrcQueryString;
+  }
+});
+Object.defineProperty(exports, "SubjectMaterialHero", {
+  enumerable: true,
+  get: function get() {
+    return _Hero.SubjectMaterialHero;
+  }
+});
+Object.defineProperty(exports, "TasksAndActivitiesHero", {
+  enumerable: true,
+  get: function get() {
+    return _Hero.TasksAndActivitiesHero;
+  }
+});
+Object.defineProperty(exports, "AssessmentResourcesHero", {
+  enumerable: true,
+  get: function get() {
+    return _Hero.AssessmentResourcesHero;
+  }
+});
+Object.defineProperty(exports, "SubjectHero", {
+  enumerable: true,
+  get: function get() {
+    return _Hero.SubjectHero;
+  }
+});
+Object.defineProperty(exports, "ExternalLearningResourcesHero", {
+  enumerable: true,
+  get: function get() {
+    return _Hero.ExternalLearningResourcesHero;
+  }
+});
+Object.defineProperty(exports, "SourceMaterialHero", {
+  enumerable: true,
+  get: function get() {
+    return _Hero.SourceMaterialHero;
+  }
+});
+Object.defineProperty(exports, "Hero", {
+  enumerable: true,
+  get: function get() {
+    return _Hero.Hero;
+  }
+});
+Object.defineProperty(exports, "NdlaFilmHero", {
+  enumerable: true,
+  get: function get() {
+    return _Hero.NdlaFilmHero;
+  }
+});
 Object.defineProperty(exports, "Footer", {
   enumerable: true,
   get: function get() {
@@ -256,6 +439,30 @@ Object.defineProperty(exports, "FooterAuth", {
     return _Footer.FooterAuth;
   }
 });
+Object.defineProperty(exports, "Figure", {
+  enumerable: true,
+  get: function get() {
+    return _Figure.Figure;
+  }
+});
+Object.defineProperty(exports, "FigureCaption", {
+  enumerable: true,
+  get: function get() {
+    return _Figure.FigureCaption;
+  }
+});
+Object.defineProperty(exports, "FigureLicenseDialog", {
+  enumerable: true,
+  get: function get() {
+    return _Figure.FigureLicenseDialog;
+  }
+});
+Object.defineProperty(exports, "FigureExpandButton", {
+  enumerable: true,
+  get: function get() {
+    return _Figure.FigureExpandButton;
+  }
+});
 Object.defineProperty(exports, "LanguageSelector", {
   enumerable: true,
   get: function get() {
@@ -322,6 +529,30 @@ Object.defineProperty(exports, "LearningPathMobileHeader", {
     return _LearningPaths.LearningPathMobileHeader;
   }
 });
+Object.defineProperty(exports, "Translation", {
+  enumerable: true,
+  get: function get() {
+    return _Translation.Translation;
+  }
+});
+Object.defineProperty(exports, "TranslationLine", {
+  enumerable: true,
+  get: function get() {
+    return _Translation.TranslationLine;
+  }
+});
+Object.defineProperty(exports, "TranslationBox", {
+  enumerable: true,
+  get: function get() {
+    return _Translation.TranslationBox;
+  }
+});
+Object.defineProperty(exports, "Spinner", {
+  enumerable: true,
+  get: function get() {
+    return _Spinner["default"];
+  }
+});
 Object.defineProperty(exports, "SearchResultSleeve", {
   enumerable: true,
   get: function get() {
@@ -716,18 +947,50 @@ Object.keys(_indexJavascript).forEach(function (key) {
 
 var _Article = _interopRequireWildcard(require("./Article"));
 
+var _createUniversalPortal = require("./utils/createUniversalPortal");
+
+var _NoContentBox = _interopRequireDefault(require("./NoContentBox"));
+
+var _Masthead = _interopRequireWildcard(require("./Masthead"));
+
+var _Portrait = _interopRequireDefault(require("./Portrait"));
+
+var _ContentLoader = _interopRequireDefault(require("./ContentLoader"));
+
+var _RelatedArticleList = _interopRequireWildcard(require("./RelatedArticleList"));
+
 var _ErrorMessage = _interopRequireWildcard(require("./ErrorMessage"));
 
+var _FileList = _interopRequireWildcard(require("./FileList"));
+
 var _BlogPosts = require("./BlogPosts");
 
+var _Logo = _interopRequireDefault(require("./Logo"));
+
+var _InfoBox = require("./InfoBox");
+
+var _InfoWidget = _interopRequireDefault(require("./InfoWidget"));
+
 var _Frontpage = require("./Frontpage");
 
+var _FactBox = _interopRequireDefault(require("./FactBox"));
+
+var _Image = _interopRequireWildcard(require("./Image"));
+
+var _Hero = require("./Hero");
+
 var _Footer = require("./Footer");
 
+var _Figure = require("./Figure");
+
 var _LanguageSelector = require("./LanguageSelector");
 
 var _LearningPaths = require("./LearningPaths");
 
+var _Translation = require("./Translation");
+
+var _Spinner = _interopRequireDefault(require("./Spinner"));
+
 var _SearchResultSleeve = _interopRequireDefault(require("./Search/SearchResultSleeve"));
 
 var _ContentTypeResult = _interopRequireDefault(require("./Search/ContentTypeResult"));

package/lib/locale/messages-en.js

@@ -779,6 +779,10 @@ var messages = _objectSpread(_objectSpread({
     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/lib/locale/messages-nb.js

@@ -515,7 +515,7 @@ var messages = _objectSpread(_objectSpread({
     es: 'Spansk',
     zh: 'Kinesisk',
     unknown: 'Ukjent',
-    prefixChangeLanguage: 'Velg målform'
+    prefixChangeLanguage: 'Velg språk'
   },
   changeLanguage: {
     nb: 'Endre språk til bokmål',
@@ -779,6 +779,10 @@ var messages = _objectSpread(_objectSpread({
     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/lib/locale/messages-nn.js

@@ -515,7 +515,7 @@ var messages = _objectSpread(_objectSpread({
     es: 'Spansk',
     zh: 'Kinesisk',
     unknown: 'Ukjent',
-    prefixChangeLanguage: 'Vel målform'
+    prefixChangeLanguage: 'Vel språk'
   },
   changeLanguage: {
     nb: 'Endre språk til bokmål',
@@ -779,6 +779,10 @@ var messages = _objectSpread(_objectSpread({
     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/lib/utils/createUniversalPortal.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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 { ReactNode } from 'react';
+export declare function createUniversalPortal(children: ReactNode, selector: string): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,13 +31,13 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^1.1.0",
+    "@ndla/button": "^1.1.1",
     "@ndla/carousel": "^1.0.6",
     "@ndla/core": "^0.7.2",
     "@ndla/hooks": "^1.0.6",
     "@ndla/icons": "^1.3.1",
     "@ndla/licenses": "^1.0.7",
-    "@ndla/modal": "^1.1.12",
+    "@ndla/modal": "^1.1.13",
     "@ndla/safelink": "^1.0.5",
     "@ndla/switch": "^0.0.32",
     "@ndla/tabs": "^1.0.9",
@@ -92,5 +92,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e2135297c1f57072515a122173674a211b541752"
+  "gitHead": "259407ea66af1f37f0942caf1b63a4ea14336e0a"
 }

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

@@ -6,15 +6,15 @@
  *
  */
 
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactNode, MouseEvent } from 'react';
 import BEMHelper from 'react-bem-helper';
+//@ts-ignore
 import Button from '@ndla/button';
 
-const toggleFactBox = (event) => {
-  const button = event.target;
-  const aside = button.previousSibling.parentNode;
-  aside.classList.toggle('expanded');
+const toggleFactBox = (event: MouseEvent<HTMLButtonElement>) => {
+  const button = event.currentTarget;
+  const aside = button?.previousSibling?.parentElement;
+  aside?.classList?.toggle('expanded');
 };
 
 const classes = new BEMHelper({
@@ -22,7 +22,12 @@ const classes = new BEMHelper({
   prefix: 'c-',
 });
 
-const FactBox = ({ children, dangerouslySetInnerHTML }) => (
+interface Props {
+  dangerouslySetInnerHTML?: { __html: string };
+  children?: ReactNode;
+}
+
+const FactBox = ({ children, dangerouslySetInnerHTML }: Props) => (
   <aside {...classes()}>
     <div {...classes('content')} dangerouslySetInnerHTML={dangerouslySetInnerHTML}>
       {children}
@@ -31,11 +36,4 @@ const FactBox = ({ children, dangerouslySetInnerHTML }) => (
   </aside>
 );
 
-FactBox.propTypes = {
-  dangerouslySetInnerHTML: PropTypes.shape({
-    __html: PropTypes.string.isRequired,
-  }),
-  children: PropTypes.node,
-};
-
 export default FactBox;

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/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,

package/src/index.ts

@@ -24,6 +24,8 @@ export {
   default as Article,
 } from './Article';
 
+export { createUniversalPortal } from './utils/createUniversalPortal';
+
 export { default as NoContentBox } from './NoContentBox';
 
 export { default as Masthead, MastheadItem } from './Masthead';
@@ -32,6 +34,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 +59,8 @@ export {
   FrontpageProgramMenu,
 } from './Frontpage';
 
+export { default as FactBox } from './FactBox';
+
 export { default as Image, ImageLink } from './Image';
 export { makeSrcQueryString } from './Image';
 

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