@ndla/ui 16.1.1 → 18.0.0

package/lib/index.js

@@ -68,6 +68,7 @@ var _exportNames = {
   FigureLicenseDialog: true,
   FigureExpandButton: true,
   FigureOpenDialogButton: true,
+  FigureBylineExpandButton: true,
   LanguageSelector: true,
   LearningPathWrapper: true,
   LearningPathContent: true,
@@ -94,7 +95,7 @@ var _exportNames = {
   Breadcrumblist: true,
   MessageBox: true,
   MessageBoxTag: true,
-  MessageBoxType: true,
+  MessageBanner: true,
   ResourceBox: true,
   AudioPlayer: true,
   initAudioPlayers: true,
@@ -178,7 +179,6 @@ var _exportNames = {
   Notion: true,
   ConceptNotion: true,
   BannerCard: true,
-  VerticalNavigation: true,
   Folder: true,
   FolderInput: true,
   ListResource: true,
@@ -560,6 +560,12 @@ Object.defineProperty(exports, "FigureOpenDialogButton", {
     return _Figure.FigureOpenDialogButton;
   }
 });
+Object.defineProperty(exports, "FigureBylineExpandButton", {
+  enumerable: true,
+  get: function get() {
+    return _Figure.FigureBylineExpandButton;
+  }
+});
 Object.defineProperty(exports, "LanguageSelector", {
   enumerable: true,
   get: function get() {
@@ -707,19 +713,19 @@ Object.defineProperty(exports, "Breadcrumblist", {
 Object.defineProperty(exports, "MessageBox", {
   enumerable: true,
   get: function get() {
-    return _MessageBox.MessageBox;
+    return _Messages.MessageBox;
   }
 });
 Object.defineProperty(exports, "MessageBoxTag", {
   enumerable: true,
   get: function get() {
-    return _MessageBox.MessageBoxTag;
+    return _Messages.MessageBoxTag;
   }
 });
-Object.defineProperty(exports, "MessageBoxType", {
+Object.defineProperty(exports, "MessageBanner", {
   enumerable: true,
   get: function get() {
-    return _MessageBox.MessageBoxType;
+    return _Messages.MessageBanner;
   }
 });
 Object.defineProperty(exports, "ResourceBox", {
@@ -1220,12 +1226,6 @@ Object.defineProperty(exports, "BannerCard", {
     return _BannerCard.BannerCard;
   }
 });
-Object.defineProperty(exports, "VerticalNavigation", {
-  enumerable: true,
-  get: function get() {
-    return _MyNdla.VerticalNavigation;
-  }
-});
 Object.defineProperty(exports, "Folder", {
   enumerable: true,
   get: function get() {
@@ -1354,7 +1354,7 @@ var _CreatedBy = _interopRequireDefault(require("./CreatedBy"));
 
 var _Breadcrumblist = _interopRequireDefault(require("./Breadcrumblist"));
 
-var _MessageBox = require("./MessageBox");
+var _Messages = require("./Messages");
 
 var _ResourceBox = require("./ResourceBox");
 

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

@@ -64,6 +64,8 @@ declare const messages: {
         newFolderUnder: string;
         myAccount: string;
         favourites: string;
+        addToFavourites: string;
+        alreadyFavourited: string;
         help: string;
         more: string;
         listView: string;
@@ -124,6 +126,10 @@ declare const messages: {
         help: string;
     };
     treeStructure: {
+        folderChildOptions: {
+            edit: string;
+            delete: string;
+        };
         createFolder: string;
         newFolder: {
             placeholder: string;
@@ -131,6 +137,7 @@ declare const messages: {
         };
     };
     tagSelector: {
+        label: string;
         placeholder: string;
         removeTag: string;
         hideAllTags: string;

package/lib/locale/messages-en.js

@@ -29,6 +29,10 @@ var titleTemplate = ' - NDLA';
 
 var messages = _objectSpread(_objectSpread({
   treeStructure: {
+    folderChildOptions: {
+      edit: 'Edit foldername',
+      "delete": 'Delete'
+    },
     createFolder: 'Create folder',
     newFolder: {
       placeholder: 'Add foldername',
@@ -36,7 +40,8 @@ var messages = _objectSpread(_objectSpread({
     }
   },
   tagSelector: {
-    placeholder: 'Add to tag',
+    label: 'Add tag',
+    placeholder: 'Enter tag name',
     removeTag: 'Remove tag {{name}}',
     hideAllTags: 'Hide all tags',
     showAllTags: 'Show all tags'
@@ -318,7 +323,7 @@ var messages = _objectSpread(_objectSpread({
     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.',
     subjectOutdated: 'This course is not updated to the current curriculum.',
-    subjectBeta: 'This course is in beta.',
+    subjectBeta: 'This course is in beta. New resources are being added continously.',
     newVersion: 'This learning resource is not updated to the current curriculum. You can find an updated version here: ',
     frontPageBeta: 'Revised subjects have been revised in accordance with the new curriculum that will be put into effect from August 2022. Beta versions of subjects are subjects we are still working on. We hope, however, that the learning resources available by now may come in useful already.',
     frontPageExpired: 'Expired subjects are not being taught any longer, but it may still be possible to take exams in these subjects.',
@@ -951,6 +956,8 @@ var messages = _objectSpread(_objectSpread({
     newFolderUnder: 'Create new folder under {{folderName}}',
     myAccount: 'My account',
     favourites: 'Favourites',
+    addToFavourites: 'Add to my favourites',
+    alreadyFavourited: 'Already in my favourites',
     help: 'Help',
     more: 'More options',
     listView: 'List view',

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

@@ -64,6 +64,8 @@ declare const messages: {
         newFolderUnder: string;
         myAccount: string;
         favourites: string;
+        addToFavourites: string;
+        alreadyFavourited: string;
         help: string;
         more: string;
         listView: string;
@@ -124,6 +126,10 @@ declare const messages: {
         help: string;
     };
     treeStructure: {
+        folderChildOptions: {
+            edit: string;
+            delete: string;
+        };
         createFolder: string;
         newFolder: {
             placeholder: string;
@@ -131,6 +137,7 @@ declare const messages: {
         };
     };
     tagSelector: {
+        label: string;
         placeholder: string;
         removeTag: string;
         hideAllTags: string;

package/lib/locale/messages-nb.js

@@ -29,6 +29,10 @@ var titleTemplate = ' - NDLA';
 
 var messages = _objectSpread(_objectSpread({
   treeStructure: {
+    folderChildOptions: {
+      edit: 'Endre mappenavn',
+      "delete": 'Slett'
+    },
     createFolder: 'Lag mappe',
     newFolder: {
       placeholder: 'Skriv navn på mappe',
@@ -36,8 +40,9 @@ var messages = _objectSpread(_objectSpread({
     }
   },
   tagSelector: {
-    placeholder: 'Tilknytt tag',
-    removeTag: 'Ta vekk tilknytning til {{name}}',
+    label: 'Legg til tag',
+    placeholder: 'Skriv tag navn',
+    removeTag: 'Ta vekk {{name}}',
     hideAllTags: 'Skjul alle tagger',
     showAllTags: 'Vis alle tagger'
   },
@@ -318,7 +323,7 @@ var messages = _objectSpread(_objectSpread({
     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.',
     subjectOutdated: 'Dette faget følger en utgått læreplan.',
-    subjectBeta: 'Dette faget er i betaversjon.',
+    subjectBeta: 'Dette faget er i betaversjon. Vi fyller på med ressurser fortløpende.',
     newVersion: 'Denne læringsressursen er ikke oppdatert etter gjeldende læreplan. Du finner en oppdatert versjon her: ',
     frontPageBeta: 'Kommende fag er tilpassa ny læreplan som gjelder fra høsten 2022. Betafag er fag under arbeid. Vi håper likevel at læringsressursene i betafaga kan være nyttige allerede nå.',
     frontPageExpired: 'Utgåtte fag undervises det ikke i lenger, men det kan fortsatt være mulig å ta eksamen i faga som privatist.',
@@ -951,6 +956,8 @@ var messages = _objectSpread(_objectSpread({
     newFolderUnder: 'Lag ny mappe under {{folderName}}',
     myAccount: 'Min konto',
     favourites: 'Favoritter',
+    addToFavourites: 'Legg til i mine favoritter',
+    alreadyFavourited: 'Allerede lagt til i mine favoritter',
     help: 'Hjelp',
     more: 'Flere valg',
     listView: 'Listevisning',

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

@@ -64,6 +64,8 @@ declare const messages: {
         newFolderUnder: string;
         myAccount: string;
         favourites: string;
+        addToFavourites: string;
+        alreadyFavourited: string;
         help: string;
         more: string;
         listView: string;
@@ -124,6 +126,10 @@ declare const messages: {
         help: string;
     };
     treeStructure: {
+        folderChildOptions: {
+            edit: string;
+            delete: string;
+        };
         createFolder: string;
         newFolder: {
             placeholder: string;
@@ -131,6 +137,7 @@ declare const messages: {
         };
     };
     tagSelector: {
+        label: string;
         placeholder: string;
         removeTag: string;
         hideAllTags: string;

package/lib/locale/messages-nn.js

@@ -29,15 +29,20 @@ var titleTemplate = ' - NDLA';
 
 var messages = _objectSpread(_objectSpread({
   treeStructure: {
+    folderChildOptions: {
+      edit: 'Endre mappenamn',
+      "delete": 'Slett'
+    },
     createFolder: 'Lag mappe',
     newFolder: {
-      placeholder: 'Skriv navn på mappe',
+      placeholder: 'Skriv namn på mappe',
       defaultName: 'Ny mappe'
     }
   },
   tagSelector: {
-    placeholder: 'Tilknytt tag',
-    removeTag: 'Ta vekk tilknytninga til {{name}}',
+    label: 'Legg til tag',
+    placeholder: 'Skriv tag namn',
+    removeTag: 'Ta vekk {{name}}',
     hideAllTags: 'Skjul alle tagger',
     showAllTags: 'Vis alle tagger'
   },
@@ -318,7 +323,7 @@ var messages = _objectSpread(_objectSpread({
     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.',
     subjectOutdated: 'Dette faget følgjer ein utgått læreplan.',
-    subjectBeta: 'Dette faget er i betaversjon.',
+    subjectBeta: 'Dette faget er i betaversjon. Vi fyller på med ressurser fortløpande.',
     newVersion: 'Denne læringsressursen er ikkje oppdatert etter gjeldande læreplan. Du finn ein oppdatert versjon her: ',
     frontPageBeta: 'Kommande fag er tilpassa ny læreplan som gjeld fra hausten 2022. Betafag er fag under arbeid. Vi håper likevel at læringsressursane i betafaga kan vere nyttige allereie no.',
     frontPageExpired: 'Utgåtte fag blir det ikkje undervist i lenger, men det kan framleis vere mogleg å ta eksamen i faget som privatist.',
@@ -951,6 +956,8 @@ var messages = _objectSpread(_objectSpread({
     newFolderUnder: 'Lag ny mappe under {{folderName}}',
     myAccount: 'Min konto',
     favourites: 'Favorittar',
+    addToFavourites: 'Legg til i mine favorittar',
+    alreadyFavourited: 'Allereie lagt til i mine favorittar',
     help: 'Hjelp',
     more: 'Fleire val',
     listView: 'Listevisning',

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

@@ -64,6 +64,8 @@ declare const messages: {
         newFolderUnder: string;
         myAccount: string;
         favourites: string;
+        addToFavourites: string;
+        alreadyFavourited: string;
         help: string;
         more: string;
         listView: string;
@@ -124,6 +126,10 @@ declare const messages: {
         help: string;
     };
     treeStructure: {
+        folderChildOptions: {
+            edit: string;
+            delete: string;
+        };
         createFolder: string;
         newFolder: {
             placeholder: string;
@@ -131,6 +137,7 @@ declare const messages: {
         };
     };
     tagSelector: {
+        label: string;
         placeholder: string;
         removeTag: string;
         hideAllTags: string;

package/lib/locale/messages-se.js

@@ -29,6 +29,10 @@ var titleTemplate = ' - NDLA';
 
 var messages = _objectSpread(_objectSpread({
   treeStructure: {
+    folderChildOptions: {
+      edit: 'Endre mappenavn',
+      "delete": 'Slett'
+    },
     createFolder: 'Lag mappe',
     newFolder: {
       placeholder: 'Skriv navn på mappe',
@@ -36,8 +40,9 @@ var messages = _objectSpread(_objectSpread({
     }
   },
   tagSelector: {
-    placeholder: 'Legg til tag',
-    removeTag: 'Ta vekk tilknytninga til {{name}}',
+    label: 'Legg til tag',
+    placeholder: 'Skriv tag navn',
+    removeTag: 'Ta vekk {{name}}',
     hideAllTags: 'Skjul alla tags',
     showAllTags: 'Vis alla tags'
   },
@@ -318,7 +323,7 @@ var messages = _objectSpread(_objectSpread({
     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.',
     subjectOutdated: 'Dette faget følger en utgått læreplan.',
-    subjectBeta: 'Dette faget er i betaversjon.',
+    subjectBeta: 'Dette faget er i betaversjon. Vi fyller på med ressurser fortløpende.',
     newVersion: 'Denne læringsressursen er ikke oppdatert etter gjeldende læreplan. Du finner en oppdatert versjon her: ',
     frontPageBeta: 'Kommende fag er tilpassa ny læreplan som gjelder fra høsten 2022. Betafag er fag under arbeid. Vi håper likevel at læringsressursene i betafaga kan være nyttige allerede nå.',
     frontPageExpired: 'Utgåtte fag undervises det ikke i lenger, men det kan fortsatt være mulig å ta eksamen i faga som privatist.',
@@ -951,6 +956,8 @@ var messages = _objectSpread(_objectSpread({
     newFolderUnder: 'Lag ny mappe under {{folderName}}',
     myAccount: 'Min konto',
     favourites: 'Favoritter',
+    addToFavourites: 'Legg til i mine favoritter',
+    alreadyFavourited: 'Allerede lagt til i mine favoritter',
     help: 'Hjelp',
     more: 'Flere valg',
     listView: 'Listevisning',

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

@@ -64,6 +64,8 @@ declare const messages: {
         newFolderUnder: string;
         myAccount: string;
         favourites: string;
+        addToFavourites: string;
+        alreadyFavourited: string;
         help: string;
         more: string;
         listView: string;
@@ -124,6 +126,10 @@ declare const messages: {
         help: string;
     };
     treeStructure: {
+        folderChildOptions: {
+            edit: string;
+            delete: string;
+        };
         createFolder: string;
         newFolder: {
             placeholder: string;
@@ -131,6 +137,7 @@ declare const messages: {
         };
     };
     tagSelector: {
+        label: string;
         placeholder: string;
         removeTag: string;
         hideAllTags: string;

package/lib/locale/messages-sma.js

@@ -29,6 +29,10 @@ var titleTemplate = ' - NDLA';
 
 var messages = _objectSpread(_objectSpread({
   treeStructure: {
+    folderChildOptions: {
+      edit: 'Endre mappenavn',
+      "delete": 'Slett'
+    },
     createFolder: 'Lag mappe',
     newFolder: {
       placeholder: 'Skriv navn på mappe',
@@ -36,8 +40,9 @@ var messages = _objectSpread(_objectSpread({
     }
   },
   tagSelector: {
-    placeholder: 'Tilknytt tag',
-    removeTag: 'Ta vekk tilknytning til {{name}}',
+    label: 'Legg til tag',
+    placeholder: 'Skriv tag navn',
+    removeTag: 'Ta vekk {{name}}',
     hideAllTags: 'Skjul alle tagger',
     showAllTags: 'Vis alle tagger'
   },
@@ -318,7 +323,7 @@ var messages = _objectSpread(_objectSpread({
     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.',
     subjectOutdated: 'Dette faget følger en utgått læreplan.',
-    subjectBeta: 'Dette faget er i betaversjon.',
+    subjectBeta: 'Dette faget er i betaversjon. Vi fyller på med ressurser fortløpende.',
     newVersion: 'Denne læringsressursen er ikke oppdatert etter gjeldende læreplan. Du finner en oppdatert versjon her: ',
     frontPageBeta: 'Kommende fag er tilpassa ny læreplan som gjelder fra høsten 2022. Betafag er fag under arbeid. Vi håper likevel at læringsressursene i betafaga kan være nyttige allerede nå.',
     frontPageExpired: 'Utgåtte fag undervises det ikke i lenger, men det kan fortsatt være mulig å ta eksamen i faga som privatist.',
@@ -951,6 +956,8 @@ var messages = _objectSpread(_objectSpread({
     newFolderUnder: 'Lag ny mappe under {{folderName}}',
     myAccount: 'Min konto',
     favourites: 'Favoritter',
+    addToFavourites: 'Legg til i mine favoritter',
+    alreadyFavourited: 'Allerede lagt til i mine favoritter',
     help: 'Hjelp',
     more: 'Flere valg',
     listView: 'Listevisning',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "16.1.1",
+  "version": "18.0.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,18 +31,18 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^2.4.1",
-    "@ndla/carousel": "^1.2.9",
-    "@ndla/core": "^2.1.1",
+    "@ndla/button": "^2.6.0",
+    "@ndla/carousel": "^1.2.11",
+    "@ndla/core": "^2.3.0",
     "@ndla/hooks": "^1.1.4",
-    "@ndla/icons": "^1.8.1",
-    "@ndla/licenses": "^5.0.0",
-    "@ndla/modal": "^1.2.10",
-    "@ndla/notion": "^3.1.14",
-    "@ndla/safelink": "^2.0.5",
-    "@ndla/switch": "^0.1.5",
-    "@ndla/tabs": "^1.1.8",
-    "@ndla/tooltip": "^2.1.0",
+    "@ndla/icons": "^1.10.0",
+    "@ndla/licenses": "^5.0.2",
+    "@ndla/modal": "^1.2.12",
+    "@ndla/notion": "^3.1.17",
+    "@ndla/safelink": "^2.0.8",
+    "@ndla/switch": "^0.1.7",
+    "@ndla/tabs": "^1.1.10",
+    "@ndla/tooltip": "^2.1.2",
     "@ndla/util": "^3.0.0",
     "@reach/menu-button": "^0.16.2",
     "@reach/slider": "^0.16.0",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f0ced3947f6cb38fc17be3ba1b914ba21996e4b5"
+  "gitHead": "917673dcc652e2cbc9106b8b4c30cd393c00cff5"
 }

package/src/Article/Article.tsx

@@ -24,7 +24,7 @@ import LayoutItem from '../Layout';
 import ArticleHeaderWrapper from './ArticleHeaderWrapper';
 import ArticleNotions, { NotionRelatedContent } from './ArticleNotions';
 import ArticleAccessMessage from './ArticleAccessMessage';
-import MessageBox from '../MessageBox/MessageBox';
+import MessageBox from '../Messages/MessageBox';
 import { ConceptNotionType } from '../Notion/ConceptNotion';
 
 const classes = new BEMHelper({

package/src/Article/ArticleFavoritesButton.tsx

@@ -23,14 +23,15 @@ export const ArticleFavoritesButton = ({ isFavorite, onToggleAddToFavorites, art
   const removeFromFavoritesLabel = t('myNdla.resource.addToMyNdla');
   const addToFavoritesLabel = t('myNdla.resource.addedToMyNdla');
   return (
-    <Tooltip tooltip={isFavorite ? removeFromFavoritesLabel : addToFavoritesLabel}>
+    <Tooltip tooltip={isFavorite ? addToFavoritesLabel : removeFromFavoritesLabel}>
       <IconButtonDualStates
-        ariaLabelActive={addToFavoritesLabel}
-        ariaLabelInActive={removeFromFavoritesLabel}
+        ariaLabelActive={t('myNdla.addToFavourites')}
+        ariaLabelInActive={t('myNdla.alreadyFavourited')}
         activeIcon={<Heart />}
         inactiveIcon={<HeartOutline />}
         active={isFavorite}
         size="small"
+        ghostPill
         onClick={() => onToggleAddToFavorites(articleId, !isFavorite)}
       />
     </Tooltip>

package/src/Breadcrumblist/Breadcrumblist.tsx

@@ -18,7 +18,7 @@ import {
 } from '@ndla/icons/action';
 import SafeLink from '@ndla/safelink';
 import { useTranslation } from 'react-i18next';
-import MessageBoxTag from '../MessageBox/MessageBoxTag';
+import MessageBoxTag from '../Messages/MessageBoxTag';
 import { useMastheadHeight } from '../Masthead';
 
 type WrapperProps = {

package/src/Breadcrumblist/{index.tsx → index.ts}

@@ -1,3 +1,4 @@
 import Breadcrumblist from './Breadcrumblist';
 
+export type { BreadcrumbItemProps } from './Breadcrumblist';
 export default Breadcrumblist;

package/src/Frontpage/FrontpageAllSubjects.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import Tabs from '@ndla/tabs';
 import SafeLink from '@ndla/safelink';
 import { colors, fonts, mq, breakpoints } from '@ndla/core';
-import { MessageBox } from '../MessageBox';
+import { MessageBox } from '../Messages';
 // @ts-ignore
 import { ToggleItem } from '../Filter';
 

package/src/Masthead/Masthead.tsx

@@ -10,7 +10,7 @@ import React, { ReactNode, useEffect, useRef } from 'react';
 import BEMHelper from 'react-bem-helper';
 import { WithTranslation, withTranslation } from 'react-i18next';
 import { DisplayOnPageYOffset } from '../Animation';
-import { MessageBox, MessageBoxType } from '../MessageBox';
+import { MessageBanner } from '../Messages';
 
 const classes = new BEMHelper({
   name: 'masthead',
@@ -95,12 +95,9 @@ export const Masthead = ({
       )}
       <div id="masthead" {...classes('', { fixed: !!fixed, infoContent: !!infoContent, ndlaFilm: !!ndlaFilm })}>
         {messages?.map((message) => (
-          <MessageBox
-            type={MessageBoxType.masthead}
-            showCloseButton={message.closable}
-            onClose={() => onCloseAlert?.(message.number)}>
+          <MessageBanner showCloseButton={message.closable} onClose={() => onCloseAlert?.(message.number)}>
             {message.content}
-          </MessageBox>
+          </MessageBanner>
         ))}
         {infoContent && (
           <DisplayOnPageYOffset yOffsetMin={0} yOffsetMax={90}>

package/src/Messages/MessageBanner.tsx

@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2022-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 styled from '@emotion/styled';
+import { colors, spacing } from '@ndla/core';
+// @ts-ignore
+import { Remarkable } from 'remarkable';
+import { CloseButton } from '@ndla/button';
+
+interface WrapperProps {
+  small?: boolean;
+}
+
+const MessageBannerWrapper = styled.div<WrapperProps>`
+  display: grid;
+  grid-template-areas: '. content closebutton';
+  grid-template-columns: minmax(30px, 1fr) minmax(0, auto) minmax(30px, 1fr);
+  padding: ${({ small }) => (small ? spacing.xxsmall : spacing.small)};
+  background: ${colors.support.yellowLight};
+  color: ${colors.brand.greyDark};
+  border: none;
+`;
+
+const TextWrapper = styled.div`
+  display: flex;
+  grid-area: content;
+  align-items: center;
+  & p {
+    margin: 0;
+  }
+`;
+
+const StyledClosebutton = styled(CloseButton)`
+  grid-area: closebutton;
+  padding: 0;
+  justify-self: flex-end;
+  align-self: flex-start;
+`;
+
+interface Props {
+  small?: boolean;
+  children?: string;
+  showCloseButton?: boolean;
+  onClose?: () => void;
+}
+
+const markdown = new Remarkable({ breaks: true });
+markdown.inline.ruler.enable(['sub', 'sup']);
+markdown.block.ruler.disable(['list', 'table']);
+
+const MessageBanner = ({ children, onClose, showCloseButton, small }: Props) => {
+  return (
+    <MessageBannerWrapper small={small}>
+      <TextWrapper dangerouslySetInnerHTML={{ __html: markdown.render(children) }} />
+      {showCloseButton && <StyledClosebutton onClick={onClose} />}
+    </MessageBannerWrapper>
+  );
+};
+
+export default MessageBanner;