@ndla/ui 3.3.9 → 3.3.14

package/lib/index-javascript.js

@@ -95,54 +95,6 @@ Object.defineProperty(exports, "ToggleSearchButton", {
     return _Search.ToggleSearchButton;
   }
 });
-Object.defineProperty(exports, "ContentTypeBadge", {
-  enumerable: true,
-  get: function get() {
-    return _ContentTypeBadge["default"];
-  }
-});
-Object.defineProperty(exports, "SubjectMaterialBadge", {
-  enumerable: true,
-  get: function get() {
-    return _ContentTypeBadge.SubjectMaterialBadge;
-  }
-});
-Object.defineProperty(exports, "TasksAndActivitiesBadge", {
-  enumerable: true,
-  get: function get() {
-    return _ContentTypeBadge.TasksAndActivitiesBadge;
-  }
-});
-Object.defineProperty(exports, "AssessmentResourcesBadge", {
-  enumerable: true,
-  get: function get() {
-    return _ContentTypeBadge.AssessmentResourcesBadge;
-  }
-});
-Object.defineProperty(exports, "LearningPathBadge", {
-  enumerable: true,
-  get: function get() {
-    return _ContentTypeBadge.LearningPathBadge;
-  }
-});
-Object.defineProperty(exports, "SubjectBadge", {
-  enumerable: true,
-  get: function get() {
-    return _ContentTypeBadge.SubjectBadge;
-  }
-});
-Object.defineProperty(exports, "ExternalLearningResourcesBadge", {
-  enumerable: true,
-  get: function get() {
-    return _ContentTypeBadge.ExternalLearningResourcesBadge;
-  }
-});
-Object.defineProperty(exports, "SourceMaterialBadge", {
-  enumerable: true,
-  get: function get() {
-    return _ContentTypeBadge.SourceMaterialBadge;
-  }
-});
 Object.defineProperty(exports, "TopicIntroductionList", {
   enumerable: true,
   get: function get() {
@@ -191,42 +143,6 @@ Object.defineProperty(exports, "CompetenceGoalsDialog", {
     return _CompetenceGoals.CompetenceGoalsDialog;
   }
 });
-Object.defineProperty(exports, "MediaList", {
-  enumerable: true,
-  get: function get() {
-    return _MediaList.MediaList;
-  }
-});
-Object.defineProperty(exports, "MediaListItem", {
-  enumerable: true,
-  get: function get() {
-    return _MediaList.MediaListItem;
-  }
-});
-Object.defineProperty(exports, "MediaListItemBody", {
-  enumerable: true,
-  get: function get() {
-    return _MediaList.MediaListItemBody;
-  }
-});
-Object.defineProperty(exports, "MediaListItemActions", {
-  enumerable: true,
-  get: function get() {
-    return _MediaList.MediaListItemActions;
-  }
-});
-Object.defineProperty(exports, "MediaListItemImage", {
-  enumerable: true,
-  get: function get() {
-    return _MediaList.MediaListItemImage;
-  }
-});
-Object.defineProperty(exports, "MediaListItemMeta", {
-  enumerable: true,
-  get: function get() {
-    return _MediaList.MediaListItemMeta;
-  }
-});
 Object.defineProperty(exports, "EmbeddedTwitter", {
   enumerable: true,
   get: function get() {
@@ -245,71 +161,21 @@ Object.defineProperty(exports, "EmbeddedFacebookPage", {
     return _Embedded.EmbeddedFacebookPage;
   }
 });
-Object.defineProperty(exports, "DisplayOnPageYOffset", {
-  enumerable: true,
-  get: function get() {
-    return _Animation.DisplayOnPageYOffset;
-  }
-});
-Object.defineProperty(exports, "FilmSlideshow", {
-  enumerable: true,
-  get: function get() {
-    return _NDLAFilm.FilmSlideshow;
-  }
-});
-Object.defineProperty(exports, "MovieGrid", {
-  enumerable: true,
-  get: function get() {
-    return _NDLAFilm.MovieGrid;
-  }
-});
-Object.defineProperty(exports, "AboutNdlaFilm", {
-  enumerable: true,
-  get: function get() {
-    return _NDLAFilm.AboutNdlaFilm;
-  }
-});
-Object.defineProperty(exports, "FilmMovieSearch", {
-  enumerable: true,
-  get: function get() {
-    return _NDLAFilm.FilmMovieSearch;
-  }
-});
-Object.defineProperty(exports, "FilmMovieList", {
-  enumerable: true,
-  get: function get() {
-    return _NDLAFilm.FilmMovieList;
-  }
-});
-Object.defineProperty(exports, "AllMoviesAlphabetically", {
-  enumerable: true,
-  get: function get() {
-    return _NDLAFilm.AllMoviesAlphabetically;
-  }
-});
 
 var _Filter = require("./Filter");
 
 var _Search = require("./Search");
 
-var _ContentTypeBadge = _interopRequireWildcard(require("./ContentTypeBadge"));
-
 var _TopicIntroductionList = _interopRequireDefault(require("./TopicIntroductionList"));
 
 var _TopicMenu = _interopRequireWildcard(require("./TopicMenu"));
 
 var _CompetenceGoals = _interopRequireWildcard(require("./CompetenceGoals"));
 
-var _MediaList = require("./MediaList");
-
 var _Embedded = require("./Embedded");
 
-var _Animation = require("./Animation");
-
-var _NDLAFilm = require("./NDLAFilm");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/index.d.ts

@@ -41,7 +41,8 @@ export { default as MastheadAuthModal } from './Masthead/MastheadAuthModal';
 export { default as AuthModal } from './User';
 export { default as CreatedBy } from './CreatedBy';
 export { default as Breadcrumblist } from './Breadcrumblist';
-export { MessageBox } from './MessageBox';
+export { MessageBox, MessageBoxTag, MessageBoxType } from './MessageBox';
+export { CloseButton } from './CloseButton';
 export { default as AudioPlayer, initAudioPlayers } from './AudioPlayer';
 export { NavigationHeading, NavigationBox, NavigationTopicAbout } from './Navigation';
 export { default as Programme } from './Programme';
@@ -63,6 +64,10 @@ export type { BreadcrumbItemProps } from './Breadcrumblist/Breadcrumblist';
 export { i18nInstance, formatNestedMessages, formatMessage } from './i18n';
 export { default as ResourceGroup } from './ResourceGroup';
 export { default as LayoutItem, OneColumn, PageContainer, Content } from './Layout';
+export { FilmSlideshow, MovieGrid, AboutNdlaFilm, FilmMovieSearch, FilmMovieList, AllMoviesAlphabetically, } from './NDLAFilm';
+export { DisplayOnPageYOffset } from './Animation';
+export { MediaList, MediaListItem, MediaListItemBody, MediaListItemActions, MediaListItemImage, MediaListItemMeta, } from './MediaList';
+export { default as ContentTypeBadge, SubjectMaterialBadge, TasksAndActivitiesBadge, AssessmentResourcesBadge, LearningPathBadge, SubjectBadge, ExternalLearningResourcesBadge, SourceMaterialBadge, } from './ContentTypeBadge';
 export { SubjectAbout, SubjectArchive, SubjectCarousel, SubjectChildContent, SubjectContent, SubjectFilter, SubjectFlexChild, SubjectFlexWrapper, SubjectHeader, SubjectLinks, SubjectNewContent, SubjectSecondaryContent, SubjectSectionTitle, SubjectShortcuts, SubjectSidebarWrapper, SubjectSocialContent, SubjectSocialSection, SubjectTopics, SubjectBanner, } from './Subject';
 export { default as ContentCard } from './ContentCard';
 export { default as CopyParagraphButton } from './CopyParagraphButton';

package/lib/index.js

@@ -88,6 +88,9 @@ var _exportNames = {
   CreatedBy: true,
   Breadcrumblist: true,
   MessageBox: true,
+  MessageBoxTag: true,
+  MessageBoxType: true,
+  CloseButton: true,
   AudioPlayer: true,
   initAudioPlayers: true,
   NavigationHeading: true,
@@ -121,6 +124,27 @@ var _exportNames = {
   OneColumn: true,
   PageContainer: true,
   Content: true,
+  FilmSlideshow: true,
+  MovieGrid: true,
+  AboutNdlaFilm: true,
+  FilmMovieSearch: true,
+  FilmMovieList: true,
+  AllMoviesAlphabetically: true,
+  DisplayOnPageYOffset: true,
+  MediaList: true,
+  MediaListItem: true,
+  MediaListItemBody: true,
+  MediaListItemActions: true,
+  MediaListItemImage: true,
+  MediaListItemMeta: true,
+  ContentTypeBadge: true,
+  SubjectMaterialBadge: true,
+  TasksAndActivitiesBadge: true,
+  AssessmentResourcesBadge: true,
+  LearningPathBadge: true,
+  SubjectBadge: true,
+  ExternalLearningResourcesBadge: true,
+  SourceMaterialBadge: true,
   SubjectAbout: true,
   SubjectArchive: true,
   SubjectCarousel: true,
@@ -635,6 +659,24 @@ Object.defineProperty(exports, "MessageBox", {
     return _MessageBox.MessageBox;
   }
 });
+Object.defineProperty(exports, "MessageBoxTag", {
+  enumerable: true,
+  get: function get() {
+    return _MessageBox.MessageBoxTag;
+  }
+});
+Object.defineProperty(exports, "MessageBoxType", {
+  enumerable: true,
+  get: function get() {
+    return _MessageBox.MessageBoxType;
+  }
+});
+Object.defineProperty(exports, "CloseButton", {
+  enumerable: true,
+  get: function get() {
+    return _CloseButton.CloseButton;
+  }
+});
 Object.defineProperty(exports, "AudioPlayer", {
   enumerable: true,
   get: function get() {
@@ -833,6 +875,132 @@ Object.defineProperty(exports, "Content", {
     return _Layout.Content;
   }
 });
+Object.defineProperty(exports, "FilmSlideshow", {
+  enumerable: true,
+  get: function get() {
+    return _NDLAFilm.FilmSlideshow;
+  }
+});
+Object.defineProperty(exports, "MovieGrid", {
+  enumerable: true,
+  get: function get() {
+    return _NDLAFilm.MovieGrid;
+  }
+});
+Object.defineProperty(exports, "AboutNdlaFilm", {
+  enumerable: true,
+  get: function get() {
+    return _NDLAFilm.AboutNdlaFilm;
+  }
+});
+Object.defineProperty(exports, "FilmMovieSearch", {
+  enumerable: true,
+  get: function get() {
+    return _NDLAFilm.FilmMovieSearch;
+  }
+});
+Object.defineProperty(exports, "FilmMovieList", {
+  enumerable: true,
+  get: function get() {
+    return _NDLAFilm.FilmMovieList;
+  }
+});
+Object.defineProperty(exports, "AllMoviesAlphabetically", {
+  enumerable: true,
+  get: function get() {
+    return _NDLAFilm.AllMoviesAlphabetically;
+  }
+});
+Object.defineProperty(exports, "DisplayOnPageYOffset", {
+  enumerable: true,
+  get: function get() {
+    return _Animation.DisplayOnPageYOffset;
+  }
+});
+Object.defineProperty(exports, "MediaList", {
+  enumerable: true,
+  get: function get() {
+    return _MediaList.MediaList;
+  }
+});
+Object.defineProperty(exports, "MediaListItem", {
+  enumerable: true,
+  get: function get() {
+    return _MediaList.MediaListItem;
+  }
+});
+Object.defineProperty(exports, "MediaListItemBody", {
+  enumerable: true,
+  get: function get() {
+    return _MediaList.MediaListItemBody;
+  }
+});
+Object.defineProperty(exports, "MediaListItemActions", {
+  enumerable: true,
+  get: function get() {
+    return _MediaList.MediaListItemActions;
+  }
+});
+Object.defineProperty(exports, "MediaListItemImage", {
+  enumerable: true,
+  get: function get() {
+    return _MediaList.MediaListItemImage;
+  }
+});
+Object.defineProperty(exports, "MediaListItemMeta", {
+  enumerable: true,
+  get: function get() {
+    return _MediaList.MediaListItemMeta;
+  }
+});
+Object.defineProperty(exports, "ContentTypeBadge", {
+  enumerable: true,
+  get: function get() {
+    return _ContentTypeBadge["default"];
+  }
+});
+Object.defineProperty(exports, "SubjectMaterialBadge", {
+  enumerable: true,
+  get: function get() {
+    return _ContentTypeBadge.SubjectMaterialBadge;
+  }
+});
+Object.defineProperty(exports, "TasksAndActivitiesBadge", {
+  enumerable: true,
+  get: function get() {
+    return _ContentTypeBadge.TasksAndActivitiesBadge;
+  }
+});
+Object.defineProperty(exports, "AssessmentResourcesBadge", {
+  enumerable: true,
+  get: function get() {
+    return _ContentTypeBadge.AssessmentResourcesBadge;
+  }
+});
+Object.defineProperty(exports, "LearningPathBadge", {
+  enumerable: true,
+  get: function get() {
+    return _ContentTypeBadge.LearningPathBadge;
+  }
+});
+Object.defineProperty(exports, "SubjectBadge", {
+  enumerable: true,
+  get: function get() {
+    return _ContentTypeBadge.SubjectBadge;
+  }
+});
+Object.defineProperty(exports, "ExternalLearningResourcesBadge", {
+  enumerable: true,
+  get: function get() {
+    return _ContentTypeBadge.ExternalLearningResourcesBadge;
+  }
+});
+Object.defineProperty(exports, "SourceMaterialBadge", {
+  enumerable: true,
+  get: function get() {
+    return _ContentTypeBadge.SourceMaterialBadge;
+  }
+});
 Object.defineProperty(exports, "SubjectAbout", {
   enumerable: true,
   get: function get() {
@@ -1041,6 +1209,8 @@ var _Breadcrumblist = _interopRequireDefault(require("./Breadcrumblist"));
 
 var _MessageBox = require("./MessageBox");
 
+var _CloseButton = require("./CloseButton");
+
 var _AudioPlayer = _interopRequireWildcard(require("./AudioPlayer"));
 
 var _Navigation = require("./Navigation");
@@ -1079,6 +1249,14 @@ var _ResourceGroup = _interopRequireDefault(require("./ResourceGroup"));
 
 var _Layout = _interopRequireWildcard(require("./Layout"));
 
+var _NDLAFilm = require("./NDLAFilm");
+
+var _Animation = require("./Animation");
+
+var _MediaList = require("./MediaList");
+
+var _ContentTypeBadge = _interopRequireWildcard(require("./ContentTypeBadge"));
+
 var _Subject = require("./Subject");
 
 var _ContentCard = _interopRequireDefault(require("./ContentCard"));

package/lib/locale/messages-en.d.ts

@@ -329,6 +329,16 @@ declare const messages: {
             h5p: string;
         };
     };
+    messageBoxInfo: {
+        outdatedCoursePlan: string;
+        updateBrowser: string;
+        noContent: string;
+        feide: string;
+        resources: string;
+        beta: string;
+        outdatedSubject: string;
+        newVersion: string;
+    };
     article: {
         edition: string;
         publisher: string;

package/lib/locale/messages-en.js

@@ -289,6 +289,16 @@ var messages = _objectSpread(_objectSpread({
       h5p: 'Interactive'
     }
   },
+  messageBoxInfo: {
+    outdatedCoursePlan: 'This course is not updated to the current curriculum. Follow this link to find the updated version of the course: ',
+    updateBrowser: 'Your browser is outdated. Update it, or find a safe and updated browser on https://browsehappy.com.',
+    noContent: 'We are sorry, but we do not yet offer any program courses.',
+    feide: 'This resource is accessible only to teachers who are logged in with Feide.',
+    resources: 'This is not a complete course produced by NDLA, but a collection of resources we hope you will find useful.',
+    beta: 'This course is in beta.',
+    outdatedSubject: 'This topic is part of a course that is not updated to the current curriculum.',
+    newVersion: 'This learning resource is not updated to the current curriculum. You can find an updated version here: '
+  },
   article: {
     edition: 'Edition',
     publisher: 'Publisher',

package/lib/locale/messages-nb.d.ts

@@ -329,6 +329,16 @@ declare const messages: {
             h5p: string;
         };
     };
+    messageBoxInfo: {
+        outdatedCoursePlan: string;
+        updateBrowser: string;
+        noContent: string;
+        feide: string;
+        resources: string;
+        beta: string;
+        outdatedSubject: string;
+        newVersion: string;
+    };
     article: {
         lastUpdated: string;
         edition: string;

package/lib/locale/messages-nb.js

@@ -289,6 +289,16 @@ var messages = _objectSpread(_objectSpread({
       h5p: 'Interaktiv'
     }
   },
+  messageBoxInfo: {
+    outdatedCoursePlan: 'Dette faget følger en utgått læreplan. Gå til faget som er oppdatert etter gjeldende læreplan:',
+    updateBrowser: 'Nettleseren din er utdatert. Oppdater den, eller finn en trygg og oppdatert nettleser på https://browsehappy.com.',
+    noContent: 'Vi har dessverre ikke noen programfag ennå.',
+    feide: 'Denne ressursen er bare tilgjengelig for lærere som er pålogget med Feide.',
+    resources: 'Dette er ikke et komplett læremiddel produsert av NDLA, men ei ressurssamling som vi håper kan være nyttig for deg.',
+    beta: 'Dette faget er i betaversjon.',
+    outdatedSubject: 'Dette emnet hører til et fag som ikke er oppdatert etter gjeldende læreplan.',
+    newVersion: 'Denne læringsressursen er ikke oppdatert etter gjeldende læreplan. Du finner en oppdatert versjon her: '
+  },
   article: {
     lastUpdated: 'Sist oppdatert',
     edition: 'Utgave',

package/lib/locale/messages-nn.d.ts

@@ -329,6 +329,16 @@ declare const messages: {
             h5p: string;
         };
     };
+    messageBoxInfo: {
+        outdatedCoursePlan: string;
+        updateBrowser: string;
+        noContent: string;
+        feide: string;
+        resources: string;
+        beta: string;
+        outdatedSubject: string;
+        newVersion: string;
+    };
     article: {
         lastUpdated: string;
         edition: string;

package/lib/locale/messages-nn.js

@@ -289,6 +289,16 @@ var messages = _objectSpread(_objectSpread({
       h5p: 'Interaktiv'
     }
   },
+  messageBoxInfo: {
+    outdatedCoursePlan: 'Dette faget følgjer ein utgått læreplan. Gå til faget som er oppdatert etter gjeldande læreplan: ',
+    updateBrowser: 'Nettlesaren din er utdatert. Oppdater han, eller finn ein trygg og oppdatert nettlesar på https://browsehappy.com. ',
+    noContent: 'Vi har dessverre ikkje nokon programfag enno.',
+    feide: 'Denne ressursen er berre tilgjengeleg for lærarar som er pålogga med Feide.',
+    resources: 'Dette er ikkje eit komplett læremiddel produsert av NDLA, men ei ressurssamling som vi håper kan vere nyttig for deg.',
+    beta: 'Dette faget er i betaversjon.',
+    outdatedSubject: 'Dette emnet høyrer til eit fag som ikkje er oppdatert etter gjeldande læreplan.',
+    newVersion: 'Denne læringsressursen er ikkje oppdatert etter gjeldande læreplan. Du finn ein oppdatert versjon her: '
+  },
   article: {
     lastUpdated: 'Sist oppdatert',
     edition: 'Utgåve',

package/lib/shapes.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CompetenceGoalShape = exports.ContentTypeResultShape = exports.ContentTypeShape = exports.ShortcutShape = exports.ResourceShape = exports.ArticleShape = exports.ContributorShape = exports.FootNoteShape = exports.TopicShape = exports.SubjectShape = exports.LicenseShape = exports.LicenseRightShape = void 0;
+exports.CompetenceGoalShape = exports.ContentTypeResultShape = exports.ContentTypeShape = exports.ResourceShape = exports.ArticleShape = exports.ContributorShape = exports.FootNoteShape = exports.TopicShape = exports.SubjectShape = exports.LicenseShape = exports.LicenseRightShape = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -100,15 +100,6 @@ var ResourceShape = _propTypes["default"].shape({
 
 exports.ResourceShape = ResourceShape;
 
-var ShortcutShape = _propTypes["default"].shape({
-  tooltip: _propTypes["default"].string.isRequired,
-  contentType: _propTypes["default"].string.isRequired,
-  url: _propTypes["default"].string.isRequired,
-  count: _propTypes["default"].number.isRequired
-});
-
-exports.ShortcutShape = ShortcutShape;
-
 var ContentTypeShape = _propTypes["default"].oneOf([contentTypes.SUBJECT_MATERIAL, contentTypes.TASKS_AND_ACTIVITIES, contentTypes.ASSESSMENT_RESOURCES, contentTypes.SUBJECT, contentTypes.EXTERNAL_LEARNING_RESOURCES, contentTypes.SOURCE_MATERIAL, contentTypes.LEARNING_PATH, contentTypes.TOPIC, 'beta', 'ndla-film', 'ndla-film has-image']);
 
 exports.ContentTypeShape = ContentTypeShape;

package/lib/types.d.ts

@@ -18,9 +18,9 @@ declare type ResourceTypes = {
     name: string;
 };
 export declare type Resource = {
-    id: string;
+    id: string | number;
     name: string;
-    contentUri: string;
+    contentUri?: string;
     path: string;
     primary?: boolean;
     rank?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "3.3.9",
+  "version": "3.3.14",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,17 +31,17 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^1.1.2",
-    "@ndla/carousel": "^1.1.0",
-    "@ndla/core": "^0.7.2",
+    "@ndla/button": "^1.1.5",
+    "@ndla/carousel": "^1.1.3",
+    "@ndla/core": "^0.7.3",
     "@ndla/hooks": "^1.0.7",
-    "@ndla/icons": "^1.3.2",
-    "@ndla/licenses": "^1.1.4",
-    "@ndla/modal": "^1.1.16",
-    "@ndla/safelink": "^1.0.7",
-    "@ndla/switch": "^0.0.32",
-    "@ndla/tabs": "^1.0.13",
-    "@ndla/tooltip": "^0.2.49",
+    "@ndla/icons": "^1.4.1",
+    "@ndla/licenses": "^1.1.7",
+    "@ndla/modal": "^1.1.19",
+    "@ndla/safelink": "^1.0.9",
+    "@ndla/switch": "^0.0.33",
+    "@ndla/tabs": "^1.0.16",
+    "@ndla/tooltip": "^0.2.50",
     "@ndla/util": "^2.0.1",
     "@reach/menu-button": "^0.12.1",
     "@reach/slider": "^0.12.1",
@@ -92,5 +92,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "071dad15f339c129f987b9eb42af04eb22e76079"
+  "gitHead": "fbf8c794dcdc3e753ae4c19f4805f1387f3bcfc3"
 }

package/src/Article/Article.tsx

@@ -10,6 +10,7 @@ import React, { ComponentType, ReactNode, useEffect, useRef, useState } from 're
 import BEMHelper from 'react-bem-helper';
 import isString from 'lodash/isString';
 import parse from 'html-react-parser';
+import styled from '@emotion/styled';
 
 import { useIntersectionObserver } from '@ndla/hooks';
 import { resizeObserver } from '@ndla/util';
@@ -22,6 +23,7 @@ import ArticleHeaderWrapper from './ArticleHeaderWrapper';
 import ArticleNotions, { NotionRelatedContent } from './ArticleNotions';
 import { NotionProps } from '../Notion/Notion';
 import ArticleAccessMessage from './ArticleAccessMessage';
+import MessageBox from '../MessageBox/MessageBox';
 
 const classes = new BEMHelper({
   name: 'article',
@@ -89,7 +91,11 @@ export const ArticleIntroduction = ({
 
 type Messages = {
   label: string;
+  messageBox?: string;
 };
+const MSGboxWrapper = styled.div`
+  margin-bottom: 50px;
+`;
 
 type Props = {
   article: ArticleType;
@@ -99,6 +105,7 @@ type Props = {
   children: ReactNode;
   messages: Messages;
   locale: Locale;
+  messageBoxLinks?: [];
   competenceGoals?:
     | ((inp: { Dialog: ComponentType; dialogProps: { isOpen: boolean; onClose: () => void } }) => ReactNode)
     | null;
@@ -129,6 +136,7 @@ export const Article = ({
   licenseBox,
   modifier,
   messages,
+  messageBoxLinks,
   children,
   competenceGoals,
   competenceGoalTypes,
@@ -186,6 +194,14 @@ export const Article = ({
       <ArticleWrapper modifier={modifier} id={id} ref={articleRef}>
         <LayoutItem layout="center">
           {accessMessage && <ArticleAccessMessage message={accessMessage} />}
+
+          {messages.messageBox && (
+            <MSGboxWrapper>
+              <MessageBox links={messageBoxLinks} onClose>
+                {messages.messageBox}
+              </MessageBox>
+            </MSGboxWrapper>
+          )}
           <ArticleHeaderWrapper competenceGoals={competenceGoals} competenceGoalTypes={competenceGoalTypes}>
             <ArticleTitle icon={icon} label={messages.label}>
               {title}
@@ -208,6 +224,7 @@ export const Article = ({
           )}
           {getArticleContent(content, locale)}
         </LayoutItem>
+
         <LayoutItem layout="center">
           {footNotes && footNotes.length > 0 && <ArticleFootNotes footNotes={footNotes} />}
           <ArticleByline