@ndla/ui 6.1.1 → 6.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "6.1.1",
+  "version": "6.2.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,17 +31,17 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^2.1.2",
-    "@ndla/carousel": "^1.2.2",
-    "@ndla/core": "^2.0.0",
+    "@ndla/button": "^2.1.3",
+    "@ndla/carousel": "^1.2.3",
+    "@ndla/core": "^2.0.1",
     "@ndla/hooks": "^1.1.2",
     "@ndla/icons": "^1.6.1",
-    "@ndla/licenses": "^4.0.1",
-    "@ndla/modal": "^1.2.2",
-    "@ndla/safelink": "^1.1.3",
-    "@ndla/switch": "^0.1.2",
+    "@ndla/licenses": "^4.0.2",
+    "@ndla/modal": "^1.2.3",
+    "@ndla/safelink": "^1.1.4",
+    "@ndla/switch": "^0.1.3",
     "@ndla/tabs": "^1.1.2",
-    "@ndla/tooltip": "^0.3.2",
+    "@ndla/tooltip": "^0.3.3",
     "@ndla/util": "^2.0.4",
     "@reach/menu-button": "^0.16.2",
     "@reach/slider": "^0.16.0",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "fa8891f69438a94440d4fbb73c8ed7dfff867311"
+  "gitHead": "69b0ff1d72d2650ffbe42383bc7416d14d774d91"
 }

package/src/Masthead/utils.ts

@@ -6,26 +6,38 @@
  *
  */
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { resizeObserver } from '@ndla/util';
 
 export const getMastheadHeight = (): number | undefined => {
-  const masthead = document && document.getElementById('masthead');
-  return masthead?.getBoundingClientRect().height;
+  if (typeof window !== 'undefined') {
+    const masthead = document.getElementById('masthead');
+    return masthead?.getBoundingClientRect().height;
+  }
 };
 
 export const useMastheadHeight = () => {
   const [height, setHeight] = useState<number>();
-  const masthead = document && document.getElementById('masthead');
+  const [mounted, setMounted] = useState(false);
 
-  const handleHeightChange = (el: HTMLElement) => {
-    const newHeight = el.getBoundingClientRect().height;
-    setHeight(newHeight);
-  };
+  useEffect(() => {
+    setMounted(true);
+  }, []);
 
-  if (masthead) {
-    resizeObserver(masthead, handleHeightChange);
-  }
+  useEffect(() => {
+    if (mounted) {
+      const masthead = document.getElementById('masthead');
+
+      const handleHeightChange = (el: HTMLElement) => {
+        const newHeight = el.getBoundingClientRect().height;
+        setHeight(newHeight);
+      };
+
+      if (masthead) {
+        resizeObserver(masthead, handleHeightChange);
+      }
+    }
+  }, [mounted]);
 
   return {
     height,

package/src/MessageBox/MessageBox.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { useState } from 'react';
+import React, { HTMLAttributes, useState } from 'react';
 import styled from '@emotion/styled';
 import Sticky from 'react-sticky-el';
 import { breakpoints, fonts, mq, spacing } from '@ndla/core';
@@ -25,13 +25,15 @@ type WrapperProps = {
 };
 
 const StyleByType = (type: WrapperProps['boxType']) => {
-  const styles = {
+  const styles: HTMLAttributes<HTMLElement>['style'] = {
     margin: '1px',
     color: '#444444',
     backgroundColor: '#f9f4c8',
     border: 'none',
     display: 'flex',
+    padding: '10px',
     width: 'auto',
+    borderRadius: '5px',
     position: 'relative',
     transform: 'auto',
     left: 'auto',
@@ -56,6 +58,8 @@ const StyleByType = (type: WrapperProps['boxType']) => {
     case 'masthead':
       styles.margin = '0 auto';
       styles.display = 'none';
+      styles.padding = '0';
+      styles.borderRadius = '0';
       break;
   }
   return styles;
@@ -71,7 +75,7 @@ const Wrapper = styled.div<WrapperProps>`
   padding: ${spacing.small};
   position: ${(props) => StyleByType(props.boxType).position};
   border: ${(props) => StyleByType(props.boxType).border};
-  border-radius: 5px;
+  border-radius: ${(props) => StyleByType(props.boxType).borderRadius};
   transform: ${(props) => StyleByType(props.boxType).transform};
   left: ${(props) => StyleByType(props.boxType).left};
   z-index: 10;
@@ -80,7 +84,7 @@ const Wrapper = styled.div<WrapperProps>`
 
 const InfoWrapper = styled.div<WrapperProps>`
   margin: ${(props) => StyleByType(props.boxType).margin};
-  padding: 10px;
+  padding: ${(props) => StyleByType(props.boxType).padding};
   display: flex;
   ${mq.range({ until: breakpoints.tabletWide })} {
     padding: 0 90px 0 0;

package/src/Notion/ConceptNotion.tsx

@@ -28,16 +28,19 @@ export interface ConceptNotionType {
 }
 interface Props {
   concept: ConceptNotionType;
+  disableScripts?: boolean;
 }
 
-const ConceptNotion = ({ concept }: Props) => {
+const ConceptNotion = ({ concept, disableScripts }: Props) => {
   const notionId = `notion-${concept.id}`;
   const figureId = `notion-figure-${concept.id}`;
   const visualElementId = `visual-element-${concept.id}`;
 
   useEffect(() => {
-    initArticleScripts();
-  }, []);
+    if (!disableScripts) {
+      initArticleScripts();
+    }
+  }, [disableScripts]);
   return (
     <FigureNotion
       id={figureId}

package/src/TopicMenu/TopicMenu.jsx

@@ -28,6 +28,7 @@ import Logo from '../Logo';
 import FrontpageAllSubjects from '../Frontpage/FrontpageAllSubjects';
 import NavigationBox from '../Navigation/NavigationBox';
 import { ProgrammeSubjects } from '../Programme';
+import { MessageBox, MessageBoxType } from '../MessageBox';
 
 const classes = new BEMHelper({
   name: 'topic-menu',
@@ -72,6 +73,7 @@ export const TopicMenu = ({
   programmes,
   currentProgramme,
   initialSelectedMenu,
+  messages,
 }) => {
   const { t } = useTranslation();
   const [isNarrowScreen, setIsNarrowScreen] = useState(false);
@@ -148,6 +150,9 @@ export const TopicMenu = ({
 
   return (
     <nav>
+      {messages?.map((message) => (
+        <MessageBox type={MessageBoxType.masthead}>{message}</MessageBox>
+      ))}
       <ModalHeader modifier={['white', 'menu']}>
         <div {...classes('masthead-left')}>
           <button type="button" {...classes('close-button')} onClick={closeMenu}>