@ndla/ui 3.2.1-alpha.3 → 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.d.ts

@@ -818,6 +818,10 @@ declare const messages: {
         reuse: string;
         error: string;
     };
+    other: {
+        download: string;
+        reuse: string;
+    };
     concept: {
         showDescription: string;
         error: {

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.d.ts

@@ -818,6 +818,10 @@ declare const messages: {
         reuse: string;
         error: string;
     };
+    other: {
+        download: string;
+        reuse: string;
+    };
     concept: {
         showDescription: string;
         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.d.ts

@@ -818,6 +818,10 @@ declare const messages: {
         reuse: string;
         error: string;
     };
+    other: {
+        download: string;
+        reuse: string;
+    };
     concept: {
         showDescription: string;
         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/types.d.ts

@@ -37,6 +37,16 @@ export interface Contributor {
 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/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-alpha.3+1c15ee767",
+  "version": "3.2.2",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,17 +31,17 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^1.0.7-alpha.26+1c15ee767",
+    "@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-alpha.23+1c15ee767",
+    "@ndla/modal": "^1.1.13",
     "@ndla/safelink": "^1.0.5",
     "@ndla/switch": "^0.0.32",
-    "@ndla/tabs": "^1.0.8",
-    "@ndla/tooltip": "^0.2.47",
+    "@ndla/tabs": "^1.0.9",
+    "@ndla/tooltip": "^0.2.48",
     "@ndla/util": "^2.0.0",
     "@reach/menu-button": "^0.12.1",
     "@reach/slider": "^0.12.1",
@@ -92,5 +92,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1c15ee767bf22877c3b1176a00117a75496293e9"
+  "gitHead": "259407ea66af1f37f0942caf1b63a4ea14336e0a"
 }

package/src/Article/ArticleAuthorContent.tsx

@@ -12,7 +12,6 @@ import { useTranslation } from 'react-i18next';
 // @ts-ignore
 import Button from '@ndla/button';
 import SafeLink from '@ndla/safelink';
-// @ts-ignore
 import Portrait from '../Portrait';
 
 const classes = new BEMHelper({

package/src/AuthorInfo/AuthorInfo.tsx

@@ -10,7 +10,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import BEMHelper from 'react-bem-helper';
 import SafeLink from '@ndla/safelink';
-// @ts-ignore
 import Portrait from '../Portrait';
 
 const classes = new BEMHelper({

package/src/BackgroundImage/BackgroundImage.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import BEMHelper from 'react-bem-helper';
+
+const classes = BEMHelper('c-background-image');
+
+type ImageType = 'mobile' | 'tablet' | 'desktop' | 'wide';
+
+interface Props {
+  showOverlay?: boolean;
+  className?: string;
+  images: {
+    url: string;
+    types: ImageType[];
+  }[];
+}
+
+const BackgroundImage = ({ images, showOverlay = false }: Props) => (
+  <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>
+);
+
+export default BackgroundImage;

package/src/ContentLoader/{index.js → index.tsx}

@@ -6,21 +6,31 @@
  *
  */
 
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
 import { uuid } from '@ndla/util';
 
+interface Props {
+  children?: ReactNode;
+  speed?: number;
+  width?: number;
+  height?: number;
+  primaryColor?: string;
+  secondaryColor?: string;
+  preserveAspectRatio?: string;
+  className?: string;
+}
+
 const ContentLoader = ({
   children,
-  width,
-  height,
-  preserveAspectRatio,
-  className,
-  primaryColor,
-  secondaryColor,
-  speed,
+  width = 400,
+  height = 130,
+  preserveAspectRatio = 'xMidYMid meet',
+  className = '',
+  primaryColor = '#f0f0f0',
+  secondaryColor = '#e0e0e0',
+  speed = 2,
   ...rest
-}) => {
+}: Props) => {
   const idClip = uuid();
   const idGradient = uuid();
 
@@ -59,24 +69,4 @@ const ContentLoader = ({
   );
 };
 
-ContentLoader.propTypes = {
-  children: PropTypes.node,
-  speed: PropTypes.number,
-  width: PropTypes.number,
-  height: PropTypes.number,
-  primaryColor: PropTypes.string,
-  secondaryColor: PropTypes.string,
-  preserveAspectRatio: PropTypes.string,
-  className: PropTypes.string,
-};
-
-ContentLoader.defaultProps = {
-  speed: 2,
-  width: 400,
-  height: 130,
-  primaryColor: '#f0f0f0',
-  secondaryColor: '#e0e0e0',
-  preserveAspectRatio: 'xMidYMid meet',
-  className: '',
-};
 export default ContentLoader;

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

@@ -9,10 +9,9 @@
 // N.B These component is used to render static markup serverside
 // Any interactivty is added by scripts located in the ndla-article-scripts package
 
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
 import BEMHelper from 'react-bem-helper';
-
+//@ts-ignore
 import { createUniversalPortal } from '../utils/createUniversalPortal';
 
 const classes = new BEMHelper({
@@ -20,18 +19,32 @@ const classes = new BEMHelper({
   prefix: 'c-',
 });
 
+interface Props {
+  id: string;
+  labelledby?: string;
+  label?: string;
+  hidden?: boolean;
+  children?: ReactNode;
+  messages?: {
+    close: string;
+  };
+  modifier?: string | string[];
+  disablePortal?: boolean;
+  onClose?: () => void;
+}
+
 export const Dialog = ({
   children,
-  messages,
+  messages = { close: 'Lukk' },
   id,
   labelledby,
   label,
   modifier,
-  disablePortal,
-  hidden,
+  disablePortal = false,
+  hidden = true,
   onClose,
   ...rest
-}) => {
+}: Props) => {
   const content = (
     <div
       {...classes('', modifier)}
@@ -64,28 +77,3 @@ export const Dialog = ({
 
   return createUniversalPortal(content, 'body');
 };
-
-Dialog.propTypes = {
-  id: PropTypes.string.isRequired,
-  labelledby: PropTypes.string,
-  label: PropTypes.string,
-  hidden: PropTypes.bool,
-  children: PropTypes.node,
-  messages: PropTypes.shape({
-    close: PropTypes.string.isRequired,
-  }),
-  modifier: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
-  disablePortal: PropTypes.bool,
-  onClose: PropTypes.func,
-};
-
-Dialog.defaultProps = {
-  disablePortal: false,
-  labelledby: null,
-  label: null,
-  hidden: true,
-  onClose: null,
-  messages: {
-    close: 'Lukk',
-  },
-};