@ndla/ui 4.3.2 → 4.3.3-alpha.12

package/src/Masthead/Masthead.tsx

@@ -6,10 +6,11 @@
  *
  */
 
-import React, { ReactNode } from 'react';
+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,37 +43,61 @@ 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) => (
-  <>
-    {skipToMainContentId && (
-      <a tabIndex={0} href={`#${skipToMainContentId}`} {...classes('skip-to-main-content')}>
-        {t('masthead.skipToContent')}
-      </a>
-    )}
-    <div {...classes('placeholder', { infoContent: !!infoContent })} />
-    <div {...classes('', { fixed: !!fixed, infoContent: !!infoContent, showLoaderWhenNeeded, ndlaFilm: !!ndlaFilm })}>
-      {infoContent && (
-        <DisplayOnPageYOffset yOffsetMin={0} yOffsetMax={90}>
-          <MastheadInfo>{infoContent}</MastheadInfo>
-        </DisplayOnPageYOffset>
+}: Props & WithTranslation) => {
+  const mastheadRef = useRef<HTMLDivElement>(null);
+  const focusHandler = (evt: FocusEvent) => {
+    const mastheadHeight = (mastheadRef.current && mastheadRef.current.offsetHeight) || 0;
+    const { target } = evt;
+    const rect = (target as HTMLElement).getBoundingClientRect();
+    // Focused target is hidden behind Masthead
+    if (rect.y < mastheadHeight) {
+      window.scrollTo(window.scrollX, window.scrollY - (mastheadHeight + 10));
+    }
+  };
+
+  useEffect(() => {
+    if (fixed) {
+      document.addEventListener('focusin', focusHandler);
+      return () => {
+        document.removeEventListener('focusin', focusHandler);
+      };
+    }
+  }, [fixed]);
+
+  return (
+    <>
+      {skipToMainContentId && (
+        <a tabIndex={0} href={`#${skipToMainContentId}`} {...classes('skip-to-main-content')}>
+          {t('masthead.skipToContent')}
+        </a>
       )}
-      <div className={`u-1/1 ${classes('content').className}`}>{children}</div>
-    </div>
-  </>
-);
+      <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>
+          </DisplayOnPageYOffset>
+        )}
+        <div className={`u-1/1 ${classes('content').className}`}>{children}</div>
+      </div>
+    </>
+  );
+};
 
 export default withTranslation()(Masthead);

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 } from './utils';
+
+export { MastheadItem, getMastheadHeight };
 
 export default Masthead;

package/src/Masthead/utils.ts

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ *
+ */
+
+export const getMastheadHeight = (): number | undefined => {
+  const masthead = document.getElementById('masthead');
+  return masthead?.getBoundingClientRect().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,9 @@ const StyleByType = (type: WrapperProps['boxType']) => {
       styles.backgroundColor = 'transparent';
       styles.border = '1px solid #D1D6DB';
       styles.color = '#444444';
-
+      break;
+    case 'masthead':
+      styles.display = 'none';
       break;
   }
   return styles;

package/src/Notion/ConceptNotion.tsx

@@ -0,0 +1,80 @@
+/**
+ * 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, { useEffect } from 'react';
+//@ts-ignore
+import { initArticleScripts } from '@ndla/article-scripts';
+import { Notion } from '.';
+import { NotionImage } from './NotionImage';
+import NotionVisualElement, { NotionVisualElementType } from './NotionVisualElement';
+import FigureNotion from './FigureNotion';
+import { Copyright } from '../types';
+
+export interface ConceptNotionType {
+  id: number;
+  copyright?: Partial<Copyright>;
+  title: string;
+  text: string;
+  subjectNames?: string[];
+  visualElement?: NotionVisualElementType;
+  image?: {
+    src: string;
+    alt: string;
+  };
+}
+interface Props {
+  concept: ConceptNotionType;
+}
+
+const ConceptNotion = ({ concept }: Props) => {
+  const notionId = `notion-${concept.id}`;
+  const figureId = `notion-figure-${concept.id}`;
+  const visualElementId = `visual-element-${concept.id}`;
+
+  useEffect(() => {
+    initArticleScripts();
+  }, []);
+  return (
+    <FigureNotion
+      id={figureId}
+      figureId={visualElementId}
+      copyright={concept.copyright}
+      title={concept.title}
+      licenseString={concept.copyright?.license?.license ?? ''}
+      type="concept">
+      <Notion
+        id={notionId}
+        title={concept.title}
+        text={concept.text}
+        labels={concept.subjectNames ?? []}
+        imageElement={
+          concept.visualElement?.resource === 'image' && concept.visualElement.image ? (
+            <NotionImage
+              id={visualElementId}
+              src={concept.visualElement.image.src}
+              alt={concept.visualElement.image.alt ?? ''}
+              imageCopyright={concept.visualElement.copyright}
+            />
+          ) : undefined
+        }
+        visualElement={
+          concept.visualElement && concept.visualElement.resource !== 'image' && concept.visualElement.url
+            ? {
+                type: concept.visualElement.resource === 'brightcove' ? 'video' : 'other',
+                metaImage: concept.image && {
+                  url: concept.image.src,
+                  alt: concept.image.alt,
+                },
+                element: <NotionVisualElement visualElement={concept.visualElement} />,
+              }
+            : undefined
+        }></Notion>
+    </FigureNotion>
+  );
+};
+
+export default ConceptNotion;

package/src/Notion/FigureNotion.tsx

@@ -0,0 +1,88 @@
+/**
+ * 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 Button from '@ndla/button';
+import { getGroupedContributorDescriptionList, getLicenseByAbbreviation } from '@ndla/licenses';
+import React, { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Figure, FigureCaption, FigureLicenseDialog } from '..';
+import { Copyright } from '../types';
+
+interface Props {
+  resizeIframe?: boolean;
+  figureId: string;
+  children: ReactNode | ((params: { typeClass: string }) => ReactNode);
+  id: string;
+  title: string;
+  copyright?: Partial<Copyright>;
+  licenseString: string;
+  type: 'video' | 'h5p' | 'image' | 'concept';
+  hideFigCaption?: boolean;
+}
+
+const FigureNotion = ({
+  resizeIframe,
+  figureId,
+  children,
+  id,
+  copyright,
+  licenseString,
+  title,
+  type,
+  hideFigCaption,
+}: Props) => {
+  const { t, i18n } = useTranslation();
+  const license = getLicenseByAbbreviation(licenseString, i18n.language);
+  const { creators, processors, rightsholders } = copyright ?? {};
+  const contributors = getGroupedContributorDescriptionList(
+    {
+      creators: creators ?? [],
+      processors: processors ?? [],
+      rightsholders: rightsholders ?? [],
+    },
+    i18n.language,
+  ).map((i) => ({ name: i.description, type: i.label }));
+
+  return (
+    <Figure resizeIframe={resizeIframe} id={figureId} type={'full-column'}>
+      {({ typeClass }) => (
+        <>
+          {typeof children === 'function' ? children({ typeClass }) : children}
+          {copyright?.license?.license && (
+            <FigureCaption
+              hideFigcaption={hideFigCaption}
+              figureId={figureId}
+              id={id}
+              caption={title}
+              reuseLabel={t(`${type}.reuse`)}
+              authors={contributors}
+              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>
+  );
+};
+
+export default FigureNotion;