@ndla/ui 5.0.0 → 6.1.0

package/lib/index.d.ts

@@ -12,7 +12,7 @@ export { default as Table } from './Table';
 export { default as ResourcesWrapper, ResourcesTitle, ResourcesTopicTitle } from './ResourcesWrapper';
 export { createUniversalPortal } from './utils/createUniversalPortal';
 export { default as NoContentBox } from './NoContentBox';
-export { default as Masthead, MastheadItem } from './Masthead';
+export { default as Masthead, MastheadItem, getMastheadHeight, useMastheadHeight } from './Masthead';
 export { default as Portrait } from './Portrait';
 export { default as ContentLoader } from './ContentLoader';
 export { default as RelatedArticleList, RelatedArticle } from './RelatedArticleList';
@@ -71,4 +71,5 @@ export { default as ContentTypeBadge, SubjectMaterialBadge, TasksAndActivitiesBa
 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';
+export { default as ContentPlaceholder } from './ContentPlaceholder';
 export { Notion, ConceptNotion } from './Notion';

package/lib/index.js

@@ -23,6 +23,8 @@ var _exportNames = {
   NoContentBox: true,
   Masthead: true,
   MastheadItem: true,
+  getMastheadHeight: true,
+  useMastheadHeight: true,
   Portrait: true,
   ContentLoader: true,
   RelatedArticleList: true,
@@ -167,6 +169,7 @@ var _exportNames = {
   SubjectBanner: true,
   ContentCard: true,
   CopyParagraphButton: true,
+  ContentPlaceholder: true,
   Notion: true,
   ConceptNotion: true
 };
@@ -272,6 +275,18 @@ Object.defineProperty(exports, "MastheadItem", {
     return _Masthead.MastheadItem;
   }
 });
+Object.defineProperty(exports, "getMastheadHeight", {
+  enumerable: true,
+  get: function get() {
+    return _Masthead.getMastheadHeight;
+  }
+});
+Object.defineProperty(exports, "useMastheadHeight", {
+  enumerable: true,
+  get: function get() {
+    return _Masthead.useMastheadHeight;
+  }
+});
 Object.defineProperty(exports, "Portrait", {
   enumerable: true,
   get: function get() {
@@ -1136,6 +1151,12 @@ Object.defineProperty(exports, "CopyParagraphButton", {
     return _CopyParagraphButton["default"];
   }
 });
+Object.defineProperty(exports, "ContentPlaceholder", {
+  enumerable: true,
+  get: function get() {
+    return _ContentPlaceholder["default"];
+  }
+});
 Object.defineProperty(exports, "Notion", {
   enumerable: true,
   get: function get() {
@@ -1284,6 +1305,8 @@ var _ContentCard = _interopRequireDefault(require("./ContentCard"));
 
 var _CopyParagraphButton = _interopRequireDefault(require("./CopyParagraphButton"));
 
+var _ContentPlaceholder = _interopRequireDefault(require("./ContentPlaceholder"));
+
 var _Notion = require("./Notion");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "5.0.0",
+  "version": "6.1.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,18 +31,18 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^2.1.1",
-    "@ndla/carousel": "^1.2.1",
-    "@ndla/core": "^1.0.1",
-    "@ndla/hooks": "^1.1.1",
+    "@ndla/button": "^2.1.2",
+    "@ndla/carousel": "^1.2.2",
+    "@ndla/core": "^2.0.0",
+    "@ndla/hooks": "^1.1.2",
     "@ndla/icons": "^1.6.1",
-    "@ndla/licenses": "^4.0.0",
-    "@ndla/modal": "^1.2.1",
-    "@ndla/safelink": "^1.1.1",
-    "@ndla/switch": "^0.1.1",
-    "@ndla/tabs": "^1.1.1",
-    "@ndla/tooltip": "^0.3.1",
-    "@ndla/util": "^2.0.3",
+    "@ndla/licenses": "^4.0.1",
+    "@ndla/modal": "^1.2.2",
+    "@ndla/safelink": "^1.1.3",
+    "@ndla/switch": "^0.1.2",
+    "@ndla/tabs": "^1.1.2",
+    "@ndla/tooltip": "^0.3.2",
+    "@ndla/util": "^2.0.4",
     "@reach/menu-button": "^0.16.2",
     "@reach/slider": "^0.16.0",
     "focus-trap-react": "^8.9.2",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "bf0e9abb4b4533a54b6c9efda0465b5a27072921"
+  "gitHead": "75732577f9b9d681d2153323a4316ecf08a0fe9f"
 }

package/src/Breadcrumblist/Breadcrumblist.tsx

@@ -19,12 +19,14 @@ import {
 import SafeLink from '@ndla/safelink';
 import { useTranslation } from 'react-i18next';
 import MessageBoxTag from '../MessageBox/MessageBoxTag';
+import { useMastheadHeight } from '../Masthead';
 
 type WrapperProps = {
   startOffset?: number;
   isVisible?: boolean;
   leftAlign?: boolean;
   hideOnNarrow?: boolean;
+  mastheadHeight?: number;
 };
 
 type InvertItProps = {
@@ -46,11 +48,11 @@ const Wrapper = styled.div<WrapperProps>`
     width: 240px;
     position: fixed;
     left: 22px;
-    top: 85px;
+    top: ${(props) => props.mastheadHeight || 85}px;
     ${(props) =>
       props.startOffset &&
       `
-        top: calc(${props.startOffset}px + 85px); 
+        top: calc(${props.startOffset}px + ${props.mastheadHeight || 85}px); 
     `}
   }
   ${mq.range({ from: breakpoints.wide })} {
@@ -230,6 +232,8 @@ const Breadcrumblist = ({
   const [wrapperOffset, setWrapperOffset] = useState(startOffset);
   const [useScrollEvent, setUseScrollEvent] = useState(false);
 
+  const { height: mastheadHeight } = useMastheadHeight();
+
   useEffect(() => {
     const handleScroll = () => {
       let position = 0;
@@ -270,7 +274,12 @@ const Breadcrumblist = ({
 
   return (
     <>
-      <Wrapper leftAlign={leftAlign} startOffset={wrapperOffset} hideOnNarrow={hideOnNarrow} isVisible={isVisible}>
+      <Wrapper
+        leftAlign={leftAlign}
+        startOffset={wrapperOffset}
+        hideOnNarrow={hideOnNarrow}
+        isVisible={isVisible}
+        mastheadHeight={mastheadHeight}>
         {items.length > 0 && (
           <>
             <Heading invertedStyle={invertedStyle}>{t('breadcrumb.youAreHere')}</Heading>

package/src/ContentPlaceholder/ContentPlaceholder.tsx

@@ -0,0 +1,68 @@
+/**
+ * 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 } from '@ndla/core';
+
+const Wrapper = styled.div`
+  position: fixed;
+  z-index: 98;
+  top: 0;
+  left: 0;
+  right: 0;
+`;
+
+const Background = styled.div`
+  height: 100vh;
+  width: 100vw;
+  background-color: ${colors.brand.greyLightest};
+`;
+
+const Placeholder = styled.div`
+  position: absolute;
+  display: block;
+  height: 100vh;
+  width: 100vw;
+  margin-top: 86px;
+  background-position-x: center;
+  background-position-y: 65px;
+  background-repeat: no-repeat;
+  animation-name: pulseAnimation;
+  animation-duration: 1.6s;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+  @media (max-width: 476px) {
+    background-size: 280px 609px;
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyODBweCIgaGVpZ2h0PSI2MDlweCIgdmlld0JveD0iMCAwIDI4MCA2MDkiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+R3JvdXA8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxnIGlkPSJ0aW55IiBmaWxsPSIjRTZFNkU2IiBmaWxsLXJ1bGU9Im5vbnplcm8iPiAgICAgICAgICAgIDxnIGlkPSJHcm91cCI+ICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgeD0iMCIgeT0iMjEiIHdpZHRoPSIxNjQuMzA1NTU2IiBoZWlnaHQ9IjMyIj48L3JlY3Q+ICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgeD0iMCIgeT0iMCIgd2lkdGg9IjQwLjgzMzMzMzMiIGhlaWdodD0iMTYiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSIxODAiIHdpZHRoPSIyODAiIGhlaWdodD0iMjcwIj48L3JlY3Q+ICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgeD0iMCIgeT0iNzAiIHdpZHRoPSIyODAiIGhlaWdodD0iMjUiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSI5OCIgd2lkdGg9IjI4MCIgaGVpZ2h0PSIyNSI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjEyNSIgd2lkdGg9IjI4MCIgaGVpZ2h0PSIyNSI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjQ4MCIgd2lkdGg9IjI4MCIgaGVpZ2h0PSIxOCI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjUwOCIgd2lkdGg9IjI4MCIgaGVpZ2h0PSIxOCI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjUzNSIgd2lkdGg9IjI4MCIgaGVpZ2h0PSIxOCI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjU2MyIgd2lkdGg9IjI4MCIgaGVpZ2h0PSIxOCI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjU5MSIgd2lkdGg9IjE5Mi41IiBoZWlnaHQ9IjE4Ij48L3JlY3Q+ICAgICAgICAgICAgPC9nPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+);
+  }
+  @media (min-width: 476px) {
+    background-size: 375px 848px;
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIzNzVweCIgaGVpZ2h0PSI4NDhweCIgdmlld0JveD0iMCAwIDM3NSA4NDgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+R3JvdXA8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxnIGlkPSJzbWFsbCIgZmlsbD0iI0U2RTZFNiIgZmlsbC1ydWxlPSJub256ZXJvIj4gICAgICAgICAgICA8ZyBpZD0iR3JvdXAiPiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjI3IiB3aWR0aD0iMjIwLjU4ODIzNSIgaGVpZ2h0PSI0MiI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjAiIHdpZHRoPSI1NC4xNDQzODUiIGhlaWdodD0iMjEiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSIyMTUiIHdpZHRoPSIxMTAuMjk0MTE4IiBoZWlnaHQ9IjIxIj48L3JlY3Q+ICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgeD0iMjY0LjcwNTg4MiIgeT0iMjE1IiB3aWR0aD0iMTEwLjI5NDExOCIgaGVpZ2h0PSIyMSI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjI5MCIgd2lkdGg9IjM3NSIgaGVpZ2h0PSIzNTEiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSI5MSIgd2lkdGg9IjM3NSIgaGVpZ2h0PSIzMiI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjEyNyIgd2lkdGg9IjM3NSIgaGVpZ2h0PSIzMiI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjE2MyIgd2lkdGg9IjM3NSIgaGVpZ2h0PSIzMiI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjY4MCIgd2lkdGg9IjM3NSIgaGVpZ2h0PSIyNCI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjcxNiIgd2lkdGg9IjM3NSIgaGVpZ2h0PSIyNCI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9Ijc1MiIgd2lkdGg9IjM3NSIgaGVpZ2h0PSIyNCI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9Ijc4OCIgd2lkdGg9IjM3NSIgaGVpZ2h0PSIyNCI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjgyNCIgd2lkdGg9IjI1Ny42ODcxNjYiIGhlaWdodD0iMjQiPjwvcmVjdD4gICAgICAgICAgICA8L2c+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=);
+  }
+  @media (min-width: 601px) {
+    background-position-y: 95px;
+    background-size: 530px 848px;
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI1MzBweCIgaGVpZ2h0PSI4NDhweCIgdmlld0JveD0iMCAwIDUzMCA4NDgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+R3JvdXA8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxnIGlkPSJhcnRpY2xlLW1lZGl1bSIgZmlsbD0iI0U2RTZFNiIgZmlsbC1ydWxlPSJub256ZXJvIj4gICAgICAgICAgICA8ZyBpZD0iR3JvdXAiPiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjI3IiB3aWR0aD0iMzExIiBoZWlnaHQ9IjQyIj48L3JlY3Q+ICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgeD0iMCIgeT0iMCIgd2lkdGg9Ijc3IiBoZWlnaHQ9IjIxIj48L3JlY3Q+ICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgeD0iMCIgeT0iMjE1IiB3aWR0aD0iMTU2IiBoZWlnaHQ9IjIxIj48L3JlY3Q+ICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgeD0iMzc0IiB5PSIyMTUiIHdpZHRoPSIxNTYiIGhlaWdodD0iMjEiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSIyOTAiIHdpZHRoPSI1MzAiIGhlaWdodD0iMzUxIj48L3JlY3Q+ICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgeD0iMCIgeT0iOTEiIHdpZHRoPSI1MzAiIGhlaWdodD0iMzIiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSIxMjciIHdpZHRoPSI1MzAiIGhlaWdodD0iMzIiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSIxNjMiIHdpZHRoPSI1MzAiIGhlaWdodD0iMzIiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSI2ODAiIHdpZHRoPSI1MzAiIGhlaWdodD0iMjQiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSI3MTYiIHdpZHRoPSI1MzAiIGhlaWdodD0iMjQiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSI3NTIiIHdpZHRoPSI1MzAiIGhlaWdodD0iMjQiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSI3ODgiIHdpZHRoPSI1MzAiIGhlaWdodD0iMjQiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSI4MjQiIHdpZHRoPSIzNjMiIGhlaWdodD0iMjQiPjwvcmVjdD4gICAgICAgICAgICA8L2c+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=);
+  }
+  @media (min-width: 768px) {
+    background-size: 624px 848px;
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI2MjRweCIgaGVpZ2h0PSI4NDhweCIgdmlld0JveD0iMCAwIDYyNCA4NDgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+R3JvdXA8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxnIGlkPSJhcnRpY2xlLWxhcmdlIiBmaWxsPSIjRTZFNkU2IiBmaWxsLXJ1bGU9Im5vbnplcm8iPiAgICAgICAgICAgIDxnIGlkPSJHcm91cCI+ICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgeD0iMCIgeT0iMjciIHdpZHRoPSIzMjYiIGhlaWdodD0iNDIiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSIwIiB3aWR0aD0iODEiIGhlaWdodD0iMjEiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSIyMTUiIHdpZHRoPSIxNjMiIGhlaWdodD0iMjEiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSI0NjEiIHk9IjIxNSIgd2lkdGg9IjE2MyIgaGVpZ2h0PSIyMSI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjI5MCIgd2lkdGg9IjYyNCIgaGVpZ2h0PSIzNTEiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSI5MSIgd2lkdGg9IjYyNCIgaGVpZ2h0PSIzMiI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjEyNyIgd2lkdGg9IjYyNCIgaGVpZ2h0PSIzMiI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjE2MyIgd2lkdGg9IjYyNCIgaGVpZ2h0PSIzMiI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjY4MCIgd2lkdGg9IjYyNCIgaGVpZ2h0PSIyNCI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjcxNiIgd2lkdGg9IjYyNCIgaGVpZ2h0PSIyNCI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9Ijc1MiIgd2lkdGg9IjYyNCIgaGVpZ2h0PSIyNCI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9Ijc4OCIgd2lkdGg9IjYyNCIgaGVpZ2h0PSIyNCI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjgyNCIgd2lkdGg9IjM4MC42NCIgaGVpZ2h0PSIyNCI+PC9yZWN0PiAgICAgICAgICAgIDwvZz4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==);
+  }
+`;
+
+const ContentPlaceholder = () => {
+  return (
+    <Wrapper>
+      <Placeholder />
+      <Background />
+    </Wrapper>
+  );
+};
+
+export default ContentPlaceholder;

package/src/ContentPlaceholder/index.ts

@@ -0,0 +1,11 @@
+/**
+ * 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 ContentPlaceholder from './ContentPlaceholder';
+
+export default ContentPlaceholder;

package/src/FactBox/FactBox.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode, MouseEvent, useState } from 'react';
+import React, { ReactNode, MouseEvent } from 'react';
 import BEMHelper from 'react-bem-helper';
 import Button from '@ndla/button';
 import { useTranslation } from 'react-i18next';
@@ -21,23 +21,21 @@ interface Props {
   children?: ReactNode;
 }
 
+const toggleFactBox = (event: MouseEvent<HTMLButtonElement>) => {
+  const button = event.currentTarget;
+  const aside = button?.previousSibling?.parentElement;
+  aside?.classList?.toggle('expanded');
+};
 const FactBox = ({ children, dangerouslySetInnerHTML }: Props) => {
-  const [open, setOpen] = useState(false);
   const { t } = useTranslation();
 
-  const toggleFactBox = (event: MouseEvent<HTMLButtonElement>) => {
-    const button = event.currentTarget;
-    const aside = button?.previousSibling?.parentElement;
-    aside?.classList?.toggle('expanded');
-    setOpen((prev) => !prev);
-  };
-
   return (
     <aside {...classes()}>
       <div {...classes('content')} dangerouslySetInnerHTML={dangerouslySetInnerHTML}>
         {children}
       </div>
-      <Button {...classes('button')} onClick={toggleFactBox} title={t(open ? 'factbox.close' : 'factbox.open')} />
+      <Button {...classes('button', 'collapsed')} onClick={toggleFactBox} title={t('factbox.open')} />
+      <Button {...classes('button', 'open')} onClick={toggleFactBox} title={t('factbox.close')} />
     </aside>
   );
 };

package/src/FactBox/component.factbox.scss

@@ -82,8 +82,20 @@ $padding-bottom: 17px;
         transform: rotate(180deg);
         top: 38%;
       }
+      &__button--open {
+        visibility: visible;
+      }
+      &__button--collapsed {
+        visibility: hidden;
+      }
     }
   }
+  &__button--open {
+    visibility: hidden;
+  }
+  &__button--collapsed {
+    visibility: visible;
+  }
 
   &__button {
     position: absolute;

package/src/Frontpage/FrontpageSearch.tsx

@@ -144,6 +144,13 @@ const FrontpageSearch = ({
   }, [inputHasFocus]);
 
   const onBlur = () => {
+    setTimeout(() => {
+      if (searchFieldRef.current) {
+        if (!searchFieldRef.current.contains(document.activeElement)) {
+          onInputBlur();
+        }
+      }
+    }, 0);
     // This is needed when user tabs out of field
     if (!searchFieldValue) {
       onInputBlur();

package/src/Masthead/Masthead.tsx

@@ -10,6 +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';
 
 const classes = new BEMHelper({
   name: 'masthead',
@@ -42,19 +43,19 @@ const MastheadInfo = ({ children }: MastheadInfoProps) => (
 interface Props {
   children?: ReactNode;
   fixed?: boolean;
-  showLoaderWhenNeeded?: boolean;
   infoContent?: ReactNode;
   ndlaFilm?: boolean;
   skipToMainContentId?: string;
+  messages?: string[];
 }
 
 export const Masthead = ({
   children,
   fixed,
   infoContent,
-  showLoaderWhenNeeded = true,
   ndlaFilm,
   skipToMainContentId,
+  messages,
   t,
 }: Props & WithTranslation) => {
   const mastheadRef = useRef<HTMLDivElement>(null);
@@ -84,10 +85,10 @@ export const Masthead = ({
           {t('masthead.skipToContent')}
         </a>
       )}
-      <div {...classes('placeholder', { infoContent: !!infoContent })} />
-      <div
-        {...classes('', { fixed: !!fixed, infoContent: !!infoContent, showLoaderWhenNeeded, ndlaFilm: !!ndlaFilm })}
-        ref={mastheadRef}>
+      <div id="masthead" {...classes('', { fixed: !!fixed, infoContent: !!infoContent, ndlaFilm: !!ndlaFilm })}>
+        {messages?.map((message) => (
+          <MessageBox type={MessageBoxType.masthead}>{message}</MessageBox>
+        ))}
         {infoContent && (
           <DisplayOnPageYOffset yOffsetMin={0} yOffsetMax={90}>
             <MastheadInfo>{infoContent}</MastheadInfo>

package/src/Masthead/component.masthead.scss

@@ -16,7 +16,8 @@
     height: 1px;
     overflow: hidden;
     z-index: -999;
-    &:focus, &:active {
+    &:focus,
+    &:active {
       color: #fff;
       background: $brand-color;
       left: auto;
@@ -38,64 +39,12 @@
 
   &--fixed {
     top: 0;
-    left: 0;
-    right: 0;
-    position: fixed;
+    position: sticky;
     @media print {
       position: relative;
     }
   }
 
-  &--showLoaderWhenNeeded {
-    &:last-child {
-      &:after {
-        content: '';
-        display: block;
-        height: 100vh;
-        width: 100vw;
-        background-color: #f9f9f9;
-      }
-      &:before {
-        content: '';
-        position: absolute;
-        display: block;
-        height: 100vh;
-        width: 100vw;
-        background-position-x: center;
-        background-position-y: 65px;
-        background-repeat: no-repeat;
-        animation-name: pulseAnimation;
-        animation-duration: 1.6s;
-        animation-timing-function: ease-in-out;
-        animation-iteration-count: infinite;
-        @include mq($until: mobileWide) {
-          background-size: 280px 609px;
-          background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyODBweCIgaGVpZ2h0PSI2MDlweCIgdmlld0JveD0iMCAwIDI4MCA2MDkiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+R3JvdXA8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxnIGlkPSJ0aW55IiBmaWxsPSIjRTZFNkU2IiBmaWxsLXJ1bGU9Im5vbnplcm8iPiAgICAgICAgICAgIDxnIGlkPSJHcm91cCI+ICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgeD0iMCIgeT0iMjEiIHdpZHRoPSIxNjQuMzA1NTU2IiBoZWlnaHQ9IjMyIj48L3JlY3Q+ICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgeD0iMCIgeT0iMCIgd2lkdGg9IjQwLjgzMzMzMzMiIGhlaWdodD0iMTYiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSIxODAiIHdpZHRoPSIyODAiIGhlaWdodD0iMjcwIj48L3JlY3Q+ICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgeD0iMCIgeT0iNzAiIHdpZHRoPSIyODAiIGhlaWdodD0iMjUiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSI5OCIgd2lkdGg9IjI4MCIgaGVpZ2h0PSIyNSI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjEyNSIgd2lkdGg9IjI4MCIgaGVpZ2h0PSIyNSI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjQ4MCIgd2lkdGg9IjI4MCIgaGVpZ2h0PSIxOCI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjUwOCIgd2lkdGg9IjI4MCIgaGVpZ2h0PSIxOCI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjUzNSIgd2lkdGg9IjI4MCIgaGVpZ2h0PSIxOCI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjU2MyIgd2lkdGg9IjI4MCIgaGVpZ2h0PSIxOCI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjU5MSIgd2lkdGg9IjE5Mi41IiBoZWlnaHQ9IjE4Ij48L3JlY3Q+ICAgICAgICAgICAgPC9nPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+);
-        }
-        @include mq(mobileWide) {
-          // 475
-          background-size: 375px 848px;
-          background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIzNzVweCIgaGVpZ2h0PSI4NDhweCIgdmlld0JveD0iMCAwIDM3NSA4NDgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+R3JvdXA8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxnIGlkPSJzbWFsbCIgZmlsbD0iI0U2RTZFNiIgZmlsbC1ydWxlPSJub256ZXJvIj4gICAgICAgICAgICA8ZyBpZD0iR3JvdXAiPiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjI3IiB3aWR0aD0iMjIwLjU4ODIzNSIgaGVpZ2h0PSI0MiI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjAiIHdpZHRoPSI1NC4xNDQzODUiIGhlaWdodD0iMjEiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSIyMTUiIHdpZHRoPSIxMTAuMjk0MTE4IiBoZWlnaHQ9IjIxIj48L3JlY3Q+ICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgeD0iMjY0LjcwNTg4MiIgeT0iMjE1IiB3aWR0aD0iMTEwLjI5NDExOCIgaGVpZ2h0PSIyMSI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjI5MCIgd2lkdGg9IjM3NSIgaGVpZ2h0PSIzNTEiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSI5MSIgd2lkdGg9IjM3NSIgaGVpZ2h0PSIzMiI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjEyNyIgd2lkdGg9IjM3NSIgaGVpZ2h0PSIzMiI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjE2MyIgd2lkdGg9IjM3NSIgaGVpZ2h0PSIzMiI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjY4MCIgd2lkdGg9IjM3NSIgaGVpZ2h0PSIyNCI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjcxNiIgd2lkdGg9IjM3NSIgaGVpZ2h0PSIyNCI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9Ijc1MiIgd2lkdGg9IjM3NSIgaGVpZ2h0PSIyNCI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9Ijc4OCIgd2lkdGg9IjM3NSIgaGVpZ2h0PSIyNCI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjgyNCIgd2lkdGg9IjI1Ny42ODcxNjYiIGhlaWdodD0iMjQiPjwvcmVjdD4gICAgICAgICAgICA8L2c+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=);
-        }
-        @include mq(tablet) {
-          // 600
-          background-position-y: 95px;
-          background-size: 530px 848px;
-          background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI1MzBweCIgaGVpZ2h0PSI4NDhweCIgdmlld0JveD0iMCAwIDUzMCA4NDgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+R3JvdXA8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxnIGlkPSJhcnRpY2xlLW1lZGl1bSIgZmlsbD0iI0U2RTZFNiIgZmlsbC1ydWxlPSJub256ZXJvIj4gICAgICAgICAgICA8ZyBpZD0iR3JvdXAiPiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjI3IiB3aWR0aD0iMzExIiBoZWlnaHQ9IjQyIj48L3JlY3Q+ICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgeD0iMCIgeT0iMCIgd2lkdGg9Ijc3IiBoZWlnaHQ9IjIxIj48L3JlY3Q+ICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgeD0iMCIgeT0iMjE1IiB3aWR0aD0iMTU2IiBoZWlnaHQ9IjIxIj48L3JlY3Q+ICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgeD0iMzc0IiB5PSIyMTUiIHdpZHRoPSIxNTYiIGhlaWdodD0iMjEiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSIyOTAiIHdpZHRoPSI1MzAiIGhlaWdodD0iMzUxIj48L3JlY3Q+ICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgeD0iMCIgeT0iOTEiIHdpZHRoPSI1MzAiIGhlaWdodD0iMzIiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSIxMjciIHdpZHRoPSI1MzAiIGhlaWdodD0iMzIiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSIxNjMiIHdpZHRoPSI1MzAiIGhlaWdodD0iMzIiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSI2ODAiIHdpZHRoPSI1MzAiIGhlaWdodD0iMjQiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSI3MTYiIHdpZHRoPSI1MzAiIGhlaWdodD0iMjQiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSI3NTIiIHdpZHRoPSI1MzAiIGhlaWdodD0iMjQiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSI3ODgiIHdpZHRoPSI1MzAiIGhlaWdodD0iMjQiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSI4MjQiIHdpZHRoPSIzNjMiIGhlaWdodD0iMjQiPjwvcmVjdD4gICAgICAgICAgICA8L2c+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=);
-        }
-        @include mq(tabletWide) {
-          // 767
-          background-size: 624px 848px;
-          background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI2MjRweCIgaGVpZ2h0PSI4NDhweCIgdmlld0JveD0iMCAwIDYyNCA4NDgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+R3JvdXA8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxnIGlkPSJhcnRpY2xlLWxhcmdlIiBmaWxsPSIjRTZFNkU2IiBmaWxsLXJ1bGU9Im5vbnplcm8iPiAgICAgICAgICAgIDxnIGlkPSJHcm91cCI+ICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgeD0iMCIgeT0iMjciIHdpZHRoPSIzMjYiIGhlaWdodD0iNDIiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSIwIiB3aWR0aD0iODEiIGhlaWdodD0iMjEiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSIyMTUiIHdpZHRoPSIxNjMiIGhlaWdodD0iMjEiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSI0NjEiIHk9IjIxNSIgd2lkdGg9IjE2MyIgaGVpZ2h0PSIyMSI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjI5MCIgd2lkdGg9IjYyNCIgaGVpZ2h0PSIzNTEiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSI5MSIgd2lkdGg9IjYyNCIgaGVpZ2h0PSIzMiI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjEyNyIgd2lkdGg9IjYyNCIgaGVpZ2h0PSIzMiI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjE2MyIgd2lkdGg9IjYyNCIgaGVpZ2h0PSIzMiI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjY4MCIgd2lkdGg9IjYyNCIgaGVpZ2h0PSIyNCI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjcxNiIgd2lkdGg9IjYyNCIgaGVpZ2h0PSIyNCI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9Ijc1MiIgd2lkdGg9IjYyNCIgaGVpZ2h0PSIyNCI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9Ijc4OCIgd2lkdGg9IjYyNCIgaGVpZ2h0PSIyNCI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjgyNCIgd2lkdGg9IjM4MC42NCIgaGVpZ2h0PSIyNCI+PC9yZWN0PiAgICAgICAgICAgIDwvZz4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==);
-        }
-      }
-    }
-    &:not(:last-child) ~ div {
-      animation-name: fadeIn;
-      animation-duration: 150ms;
-    }
-  }
-
   &--ndlaFilm {
     background: $film-color-light;
     background-image: linear-gradient(0deg, $film-color-light, $film-color);
@@ -110,14 +59,6 @@
     }
   }
 
-  &__placeholder {
-    min-height: $masthead-height;
-    width: 100%;
-    @media print {
-      min-height: revert;
-    }
-  }
-
   &__content {
     justify-content: center;
     align-items: center;

package/src/Masthead/index.ts

@@ -8,6 +8,8 @@
 
 import Masthead, { MastheadItem } from './Masthead';
 
-export { MastheadItem };
+import { getMastheadHeight, useMastheadHeight } from './utils';
+
+export { MastheadItem, getMastheadHeight, useMastheadHeight };
 
 export default Masthead;

package/src/Masthead/utils.ts

@@ -0,0 +1,33 @@
+/**
+ * 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 { useState } from 'react';
+import { resizeObserver } from '@ndla/util';
+
+export const getMastheadHeight = (): number | undefined => {
+  const masthead = document.getElementById('masthead');
+  return masthead?.getBoundingClientRect().height;
+};
+
+export const useMastheadHeight = () => {
+  const [height, setHeight] = useState<number>();
+  const masthead = document.getElementById('masthead');
+
+  const handleHeightChange = (el: HTMLElement) => {
+    const newHeight = el.getBoundingClientRect().height;
+    setHeight(newHeight);
+  };
+
+  if (masthead) {
+    resizeObserver(masthead, handleHeightChange);
+  }
+
+  return {
+    height,
+  };
+};

package/src/MessageBox/MessageBox.tsx

@@ -18,6 +18,7 @@ export enum MessageBoxType {
   ghost = 'ghost',
   fullpage = 'fullpage',
   medium = 'medium',
+  masthead = 'masthead',
 }
 type WrapperProps = {
   boxType?: MessageBoxType;
@@ -51,7 +52,10 @@ const StyleByType = (type: WrapperProps['boxType']) => {
       styles.backgroundColor = 'transparent';
       styles.border = '1px solid #D1D6DB';
       styles.color = '#444444';
-
+      break;
+    case 'masthead':
+      styles.margin = '0 auto';
+      styles.display = 'none';
       break;
   }
   return styles;

package/src/Notion/FigureNotion.tsx

@@ -52,31 +52,33 @@ const FigureNotion = ({
       {({ typeClass }) => (
         <>
           {typeof children === 'function' ? children({ typeClass }) : children}
-          <FigureCaption
-            hideFigcaption={hideFigCaption}
-            figureId={figureId}
-            id={id}
-            caption={title}
-            reuseLabel={t(`${type}.reuse`)}
-            authors={contributors}
-            licenseRights={license.rights}>
-            <FigureLicenseDialog
+          {copyright?.license?.license && (
+            <FigureCaption
+              hideFigcaption={hideFigCaption}
+              figureId={figureId}
               id={id}
+              caption={title}
+              reuseLabel={t(`${type}.reuse`)}
               authors={contributors}
-              locale={i18n.language}
-              title={title}
-              origin={copyright?.origin}
-              license={license}
-              messages={{
-                close: t('close'),
-                rulesForUse: t('license.concept.rules'),
-                source: t('source'),
-                learnAboutLicenses: t('license.learnMore'),
-                title: t('title'),
-              }}>
-              {type === 'image' && <Button outline>{t('license.copyTitle')}</Button>}
-            </FigureLicenseDialog>
-          </FigureCaption>
+              licenseRights={license.rights}>
+              <FigureLicenseDialog
+                id={id}
+                authors={contributors}
+                locale={i18n.language}
+                title={title}
+                origin={copyright?.origin}
+                license={license}
+                messages={{
+                  close: t('close'),
+                  rulesForUse: t('license.concept.rules'),
+                  source: t('source'),
+                  learnAboutLicenses: t('license.learnMore'),
+                  title: t('title'),
+                }}>
+                {type === 'image' && <Button outline>{t('license.copyTitle')}</Button>}
+              </FigureLicenseDialog>
+            </FigureCaption>
+          )}
         </>
       )}
     </Figure>

package/src/Search/ContentTypeResult.tsx

@@ -130,6 +130,7 @@ const ContentTypeResult = ({
             return (
               <StyledListItem key={path} delayAnimation={delayAnimation}>
                 <SafeLink
+                  tabIndex={-1}
                   css={shouldHighlight && highlightStyle}
                   data-highlighted={shouldHighlight || false}
                   {...linkProps}
@@ -153,7 +154,8 @@ const ContentTypeResult = ({
                 ghostPill
                 css={[showAllButtonStyle, shouldHighlightShowAllButton && noWidthhighlightStyle]}
                 data-highlighted={shouldHighlightShowAllButton}
-                onClick={() => toggleShowAll(!showAll)}>
+                onClick={() => toggleShowAll(!showAll)}
+                tabIndex={-1}>
                 {showAll ? messages.showLessResultLabel : messages.allResultLabel}
                 {showAll ? <ChevronUp /> : <ChevronDown />}
               </Button>

package/src/Search/SearchField.jsx

@@ -123,7 +123,8 @@ const SearchField = ({
             if (inputRef) {
               inputRef.current.focus();
             }
-          }}>
+          }}
+          onBlur={onBlur}>
           {t('welcomePage.resetSearch')}
         </button>
       )}