@ndla/ui 6.1.2 → 6.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "6.1.2",
+  "version": "6.2.1",
   "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": "6002d3517851d20c9b1c2ab5267d0c91ec74721b"
+  "gitHead": "156f62b8d836ab751130960be775c219670ea5fc"
 }

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/Notion/Notion.tsx

@@ -42,8 +42,8 @@ const ContentWrapper = styled.div`
     }
   }
 `;
-const TextWrapper = styled.div`
-  width: 75%;
+const TextWrapper = styled.div<{ hasVisualElement: boolean }>`
+  width: ${(props) => (props.hasVisualElement ? '75%' : '100%')};
   ${mq.range({ until: breakpoints.tabletWide })} {
     width: 100%;
   }
@@ -223,7 +223,7 @@ const Notion = ({
             </ExpandVisualElementButton>
           </ImageWrapper>
         )}
-        <TextWrapper>
+        <TextWrapper hasVisualElement={!!(imageElement || visualElement?.metaImage)}>
           {HTMLReactParser(
             renderMarkdown ? renderMarkdown(`**${title}** \u2013 ${text}`) : `<b>${title}</b> \u2013 ${text}`,
           )}

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}>