@ndla/ui 6.2.2 → 8.0.1

package/src/Masthead/Masthead.tsx

@@ -40,13 +40,20 @@ const MastheadInfo = ({ children }: MastheadInfoProps) => (
   </div>
 );
 
+interface Alert {
+  content: string;
+  closable?: boolean;
+  number: number;
+}
+
 interface Props {
   children?: ReactNode;
   fixed?: boolean;
   infoContent?: ReactNode;
   ndlaFilm?: boolean;
   skipToMainContentId?: string;
-  messages?: string[];
+  messages?: Alert[];
+  onCloseAlert?: (id: number) => void;
 }
 
 export const Masthead = ({
@@ -56,6 +63,7 @@ export const Masthead = ({
   ndlaFilm,
   skipToMainContentId,
   messages,
+  onCloseAlert,
   t,
 }: Props & WithTranslation) => {
   const mastheadRef = useRef<HTMLDivElement>(null);
@@ -87,7 +95,12 @@ export const Masthead = ({
       )}
       <div id="masthead" {...classes('', { fixed: !!fixed, infoContent: !!infoContent, ndlaFilm: !!ndlaFilm })}>
         {messages?.map((message) => (
-          <MessageBox type={MessageBoxType.masthead}>{message}</MessageBox>
+          <MessageBox
+            type={MessageBoxType.masthead}
+            showCloseButton={message.closable}
+            onClose={() => onCloseAlert?.(message.number)}>
+            {message.content}
+          </MessageBox>
         ))}
         {infoContent && (
           <DisplayOnPageYOffset yOffsetMin={0} yOffsetMax={90}>

package/src/MessageBox/MessageBox.tsx

@@ -12,6 +12,9 @@ import Sticky from 'react-sticky-el';
 import { breakpoints, fonts, mq, spacing } from '@ndla/core';
 import { InformationOutline, HumanMaleBoard } from '@ndla/icons/common';
 import { WithTranslation, withTranslation } from 'react-i18next';
+
+// @ts-ignore
+import { Remarkable } from 'remarkable';
 import { CloseButton } from '../CloseButton';
 
 export enum MessageBoxType {
@@ -45,6 +48,7 @@ const StyleByType = (type: WrapperProps['boxType']) => {
       styles.width = '100vw';
       styles.position = 'relative';
       styles.left = '50%';
+      styles.padding = '0';
       styles.transform = 'translateX(-50%)';
       break;
     case 'medium':
@@ -102,6 +106,9 @@ const TextWrapper = styled.div<WrapperProps>`
     line-height: 24px;
     font-size: 16px;
   }
+  & p {
+    margin: 0;
+  }
 `;
 
 const IconWrapper = styled.div<WrapperProps>`
@@ -152,12 +159,25 @@ type Props = {
   children?: string;
   links?: LinkProps[];
   showCloseButton?: boolean;
+  onClose?: () => void;
 };
 
-export const MessageBox = ({ type, sticky = false, children, links, t, showCloseButton }: Props & WithTranslation) => {
+const markdown = new Remarkable({ breaks: true });
+markdown.inline.ruler.enable(['sub', 'sup']);
+markdown.block.ruler.disable(['list', 'table']);
+
+export const MessageBox = ({
+  type,
+  sticky = false,
+  children = '',
+  links,
+  showCloseButton,
+  onClose,
+}: Props & WithTranslation) => {
   const [hideMessageBox, setHideMessageBox] = useState(false);
   const onCloseMessageBox = () => {
     setHideMessageBox(true);
+    onClose?.();
   };
   const Icon = type === 'ghost' ? HumanMaleBoard : InformationOutline;
   return (
@@ -168,7 +188,7 @@ export const MessageBox = ({ type, sticky = false, children, links, t, showClose
           <IconWrapper boxType={type}>
             <Icon style={{ width: '24px', height: '24px' }} />
           </IconWrapper>
-          <TextWrapper>{children}</TextWrapper>
+          <TextWrapper dangerouslySetInnerHTML={{ __html: markdown.render(children) }}></TextWrapper>
         </InfoWrapper>
         {showCloseButton && (
           <CloseButtonWrapper>

package/src/Notion/FigureNotion.tsx

@@ -57,7 +57,6 @@ const FigureNotion = ({
               hideFigcaption={hideFigCaption}
               figureId={figureId}
               id={id}
-              caption={title}
               reuseLabel={t(`${type}.reuse`)}
               authors={contributors}
               licenseRights={license.rights}>

package/src/Notion/Notion.tsx

@@ -8,7 +8,7 @@
 
 import styled from '@emotion/styled';
 import { useTranslation } from 'react-i18next';
-import HTMLReactParser from 'html-react-parser';
+import { parseMarkdown } from '@ndla/util';
 import React, { Fragment, ReactNode } from 'react';
 import { keyframes } from '@emotion/core';
 import Button from '@ndla/button';
@@ -174,7 +174,6 @@ type VisualElementProps = {
 export type NotionProps = {
   id: string | number;
   labels?: string[];
-  renderMarkdown?: (text: string) => string;
   text: ReactNode;
   title: string;
   visualElement?: VisualElementProps;
@@ -182,16 +181,7 @@ export type NotionProps = {
   children?: ReactNode;
 };
 
-const Notion = ({
-  id,
-  labels = [],
-  renderMarkdown,
-  text,
-  title,
-  visualElement,
-  imageElement,
-  children,
-}: NotionProps) => {
+const Notion = ({ id, labels = [], text, title, visualElement, imageElement, children }: NotionProps) => {
   const { t } = useTranslation();
 
   return (
@@ -224,9 +214,7 @@ const Notion = ({
           </ImageWrapper>
         )}
         <TextWrapper hasVisualElement={!!(imageElement || visualElement?.metaImage)}>
-          {HTMLReactParser(
-            renderMarkdown ? renderMarkdown(`**${title}** \u2013 ${text}`) : `<b>${title}</b> \u2013 ${text}`,
-          )}
+          {parseMarkdown(`**${title}** \u2013 ${text}`, 'body')}
           {!!labels.length && (
             <LabelsContainer>
               {t('searchPage.resultType.notionLabels')}

package/src/Notion/NotionVisualElement.tsx

@@ -24,7 +24,7 @@ interface Props {
   visualElement: NotionVisualElementType;
 }
 
-const supportedEmbedTypes = ['brightcove', 'h5p'];
+const supportedEmbedTypes = ['brightcove', 'h5p', 'iframe', 'external'];
 const NotionVisualElement = ({ visualElement }: Props) => {
   const id = '1';
   const figureId = 'figure-1';