@ndla/ui 16.2.0 → 17.0.0

package/lib/TopicMenu/TopicMenu.js

@@ -41,7 +41,7 @@ var _NavigationBox = _interopRequireDefault(require("../Navigation/NavigationBox
 
 var _Programme = require("../Programme");
 
-var _MessageBox = require("../MessageBox");
+var _Messages = require("../Messages");
 
 var _core = require("@emotion/core");
 
@@ -212,9 +212,7 @@ var TopicMenu = function TopicMenu(_ref) {
   var disableSubTopic = disableMain && hasExpandedSubtopics;
   var sliderCounter = !expandedTopicId ? 0 : expandedSubtopicsId.length + 1;
   return (0, _core.jsx)("nav", null, messages === null || messages === void 0 ? void 0 : messages.map(function (message) {
-    return (0, _core.jsx)(_MessageBox.MessageBox, {
-      type: _MessageBox.MessageBoxType.masthead
-    }, message);
+    return (0, _core.jsx)(_Messages.MessageBanner, null, message);
   }), (0, _core.jsx)(_modal.ModalHeader, {
     modifier: ['white', 'menu']
   }, (0, _core.jsx)("div", classes('masthead-left'), (0, _core.jsx)("button", _extends({

package/lib/index.d.ts

@@ -45,7 +45,7 @@ export { default as AuthModal } from './User';
 export type { FeideGoGroup, FeideGroup, FeideOrg, FeideUserApiType, FeideMembershipType, FeideUser } from './User';
 export { default as CreatedBy } from './CreatedBy';
 export { default as Breadcrumblist } from './Breadcrumblist';
-export { MessageBox, MessageBoxTag, MessageBoxType } from './MessageBox';
+export { MessageBox, MessageBoxTag, MessageBanner } from './Messages';
 export { ResourceBox } from './ResourceBox';
 export { default as AudioPlayer, initAudioPlayers } from './AudioPlayer';
 export { NavigationHeading, NavigationBox, NavigationTopicAbout } from './Navigation';

package/lib/index.js

@@ -95,7 +95,7 @@ var _exportNames = {
   Breadcrumblist: true,
   MessageBox: true,
   MessageBoxTag: true,
-  MessageBoxType: true,
+  MessageBanner: true,
   ResourceBox: true,
   AudioPlayer: true,
   initAudioPlayers: true,
@@ -714,19 +714,19 @@ Object.defineProperty(exports, "Breadcrumblist", {
 Object.defineProperty(exports, "MessageBox", {
   enumerable: true,
   get: function get() {
-    return _MessageBox.MessageBox;
+    return _Messages.MessageBox;
   }
 });
 Object.defineProperty(exports, "MessageBoxTag", {
   enumerable: true,
   get: function get() {
-    return _MessageBox.MessageBoxTag;
+    return _Messages.MessageBoxTag;
   }
 });
-Object.defineProperty(exports, "MessageBoxType", {
+Object.defineProperty(exports, "MessageBanner", {
   enumerable: true,
   get: function get() {
-    return _MessageBox.MessageBoxType;
+    return _Messages.MessageBanner;
   }
 });
 Object.defineProperty(exports, "ResourceBox", {
@@ -1361,7 +1361,7 @@ var _CreatedBy = _interopRequireDefault(require("./CreatedBy"));
 
 var _Breadcrumblist = _interopRequireDefault(require("./Breadcrumblist"));
 
-var _MessageBox = require("./MessageBox");
+var _Messages = require("./Messages");
 
 var _ResourceBox = require("./ResourceBox");
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "16.2.0",
+  "version": "17.0.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,18 +31,18 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^2.5.0",
-    "@ndla/carousel": "^1.2.10",
-    "@ndla/core": "^2.2.0",
+    "@ndla/button": "^2.5.1",
+    "@ndla/carousel": "^1.2.11",
+    "@ndla/core": "^2.3.0",
     "@ndla/hooks": "^1.1.4",
-    "@ndla/icons": "^1.9.0",
-    "@ndla/licenses": "^5.0.1",
-    "@ndla/modal": "^1.2.11",
-    "@ndla/notion": "^3.1.15",
-    "@ndla/safelink": "^2.0.6",
-    "@ndla/switch": "^0.1.6",
-    "@ndla/tabs": "^1.1.9",
-    "@ndla/tooltip": "^2.1.1",
+    "@ndla/icons": "^1.10.0",
+    "@ndla/licenses": "^5.0.2",
+    "@ndla/modal": "^1.2.12",
+    "@ndla/notion": "^3.1.16",
+    "@ndla/safelink": "^2.0.7",
+    "@ndla/switch": "^0.1.7",
+    "@ndla/tabs": "^1.1.10",
+    "@ndla/tooltip": "^2.1.2",
     "@ndla/util": "^3.0.0",
     "@reach/menu-button": "^0.16.2",
     "@reach/slider": "^0.16.0",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "97d16d07a6f4d4fc04c5114f01aac6c9480b0341"
+  "gitHead": "224c9c0d69875fa7d84a591cfbf15b6df340adc5"
 }

package/src/Article/Article.tsx

@@ -24,7 +24,7 @@ import LayoutItem from '../Layout';
 import ArticleHeaderWrapper from './ArticleHeaderWrapper';
 import ArticleNotions, { NotionRelatedContent } from './ArticleNotions';
 import ArticleAccessMessage from './ArticleAccessMessage';
-import MessageBox from '../MessageBox/MessageBox';
+import MessageBox from '../Messages/MessageBox';
 import { ConceptNotionType } from '../Notion/ConceptNotion';
 
 const classes = new BEMHelper({

package/src/Breadcrumblist/Breadcrumblist.tsx

@@ -18,7 +18,7 @@ import {
 } from '@ndla/icons/action';
 import SafeLink from '@ndla/safelink';
 import { useTranslation } from 'react-i18next';
-import MessageBoxTag from '../MessageBox/MessageBoxTag';
+import MessageBoxTag from '../Messages/MessageBoxTag';
 import { useMastheadHeight } from '../Masthead';
 
 type WrapperProps = {

package/src/Frontpage/FrontpageAllSubjects.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import Tabs from '@ndla/tabs';
 import SafeLink from '@ndla/safelink';
 import { colors, fonts, mq, breakpoints } from '@ndla/core';
-import { MessageBox } from '../MessageBox';
+import { MessageBox } from '../Messages';
 // @ts-ignore
 import { ToggleItem } from '../Filter';
 

package/src/Masthead/Masthead.tsx

@@ -10,7 +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';
+import { MessageBanner } from '../Messages';
 
 const classes = new BEMHelper({
   name: 'masthead',
@@ -95,12 +95,9 @@ export const Masthead = ({
       )}
       <div id="masthead" {...classes('', { fixed: !!fixed, infoContent: !!infoContent, ndlaFilm: !!ndlaFilm })}>
         {messages?.map((message) => (
-          <MessageBox
-            type={MessageBoxType.masthead}
-            showCloseButton={message.closable}
-            onClose={() => onCloseAlert?.(message.number)}>
+          <MessageBanner showCloseButton={message.closable} onClose={() => onCloseAlert?.(message.number)}>
             {message.content}
-          </MessageBox>
+          </MessageBanner>
         ))}
         {infoContent && (
           <DisplayOnPageYOffset yOffsetMin={0} yOffsetMax={90}>

package/src/Messages/MessageBanner.tsx

@@ -0,0 +1,66 @@
+/**
+ * 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, spacing } from '@ndla/core';
+// @ts-ignore
+import { Remarkable } from 'remarkable';
+import { CloseButton } from '@ndla/button';
+
+interface WrapperProps {
+  small?: boolean;
+}
+
+const MessageBannerWrapper = styled.div<WrapperProps>`
+  display: grid;
+  grid-template-areas: '. content closebutton';
+  grid-template-columns: minmax(30px, 1fr) minmax(0, auto) minmax(30px, 1fr);
+  padding: ${({ small }) => (small ? spacing.xxsmall : spacing.small)};
+  background: ${colors.support.yellowLight};
+  color: ${colors.brand.greyDark};
+  border: none;
+`;
+
+const TextWrapper = styled.div`
+  display: flex;
+  grid-area: content;
+  align-items: center;
+  & p {
+    margin: 0;
+  }
+`;
+
+const StyledClosebutton = styled(CloseButton)`
+  grid-area: closebutton;
+  padding: 0;
+  justify-self: flex-end;
+  align-self: flex-start;
+`;
+
+interface Props {
+  small?: boolean;
+  children?: string;
+  showCloseButton?: boolean;
+  onClose?: () => void;
+}
+
+const markdown = new Remarkable({ breaks: true });
+markdown.inline.ruler.enable(['sub', 'sup']);
+markdown.block.ruler.disable(['list', 'table']);
+
+const MessageBanner = ({ children, onClose, showCloseButton, small }: Props) => {
+  return (
+    <MessageBannerWrapper small={small}>
+      <TextWrapper dangerouslySetInnerHTML={{ __html: markdown.render(children) }} />
+      {showCloseButton && <StyledClosebutton onClick={onClose} />}
+    </MessageBannerWrapper>
+  );
+};
+
+export default MessageBanner;

package/src/Messages/MessageBox.tsx

@@ -0,0 +1,156 @@
+/**
+ * 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 { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
+import { InformationOutline, HumanMaleBoard, Forward, WarningOutline } from '@ndla/icons/common';
+import { WithTranslation, withTranslation } from 'react-i18next';
+
+// @ts-ignore
+import { Remarkable } from 'remarkable';
+import { CloseButton } from '@ndla/button';
+import { css } from '@emotion/core';
+
+const markdown = new Remarkable({ breaks: true });
+markdown.inline.ruler.enable(['sub', 'sup']);
+markdown.block.ruler.disable(['list', 'table']);
+
+type MessageBoxType = 'ghost' | 'danger';
+
+interface StyledProps {
+  type?: MessageBoxType;
+}
+
+const MessageBoxWrapper = styled.div<StyledProps>`
+  display: flex;
+  padding: ${spacing.small};
+  font-family: ${fonts.sans};
+  border-radius: 5px;
+  background: ${colors.support.yellowLight};
+  color: ${colors.brand.greyDark};
+
+  ${fonts.sizes('18px')};
+  ${mq.range({ until: breakpoints.tabletWide })} {
+    ${fonts.sizes('16px')};
+  }
+
+  ${({ type }) =>
+    type === 'ghost' &&
+    css`
+      background: transparent;
+      border: 1px solid ${colors.brand.neutral7};
+      color: ${colors.brand.greyDark};
+    `}
+
+  ${({ type }) =>
+    type === 'danger' &&
+    css`
+      background: ${colors.support.redLightest};
+      color: ${colors.support.red};
+    `}
+`;
+
+const InfoWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  padding: ${spacing.small};
+  padding-right: 0;
+`;
+
+const TextWrapper = styled.div`
+  & p {
+    margin: 0;
+  }
+`;
+
+const IconWrapper = styled.div`
+  display: flex;
+  align-items: flex-start;
+  padding-right: ${spacing.small};
+
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+`;
+
+const LinkWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${spacing.normal};
+  padding-top: ${spacing.nsmall};
+
+  svg {
+    flex-shrink: 0;
+  }
+`;
+
+const Link = styled.a`
+  display: flex;
+  align-items: center;
+  color: ${colors.brand.primary};
+  gap: ${spacing.xxsmall};
+  font-weight: ${fonts.weight.semibold};
+`;
+
+const StyledClosebutton = styled(CloseButton)`
+  padding: 0;
+`;
+
+interface LinkProps {
+  href?: string;
+  text?: string;
+}
+
+interface Props {
+  type?: MessageBoxType;
+  children?: string;
+  links?: LinkProps[];
+  showCloseButton?: boolean;
+  onClose?: () => void;
+}
+
+const Icon = ({ type }: StyledProps) => {
+  if (type === 'ghost') {
+    return <HumanMaleBoard />;
+  }
+  if (type === 'danger') {
+    return <WarningOutline />;
+  }
+  return <InformationOutline />;
+};
+
+export const MessageBox = ({ type, children = '', links, showCloseButton, onClose }: Props & WithTranslation) => {
+  return (
+    <MessageBoxWrapper type={type}>
+      <InfoWrapper>
+        <IconWrapper>
+          <Icon type={type} />
+        </IconWrapper>
+        <div>
+          <TextWrapper dangerouslySetInnerHTML={{ __html: markdown.render(children) }} />
+          {links && (
+            <LinkWrapper>
+              {links.map((x) => (
+                <Link href={x.href}>
+                  <span>{x.text}</span>
+                  <Forward />
+                </Link>
+              ))}
+            </LinkWrapper>
+          )}
+        </div>
+      </InfoWrapper>
+      {showCloseButton && <StyledClosebutton onClick={onClose} />}
+    </MessageBoxWrapper>
+  );
+};
+
+export default withTranslation()(MessageBox);

package/src/{MessageBox → Messages}/index.ts

@@ -6,8 +6,8 @@
  *
  */
 
-import MessageBox from './MessageBox';
 import MessageBoxTag from './MessageBoxTag';
-import { MessageBoxType } from './MessageBox';
+import MessageBox from './MessageBox';
+import MessageBanner from './MessageBanner';
 
-export { MessageBox, MessageBoxTag, MessageBoxType };
+export { MessageBox, MessageBoxTag, MessageBanner };

package/src/Programme/Programme.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import LayoutItem, { OneColumn } from '../Layout';
 import ProgrammeSubjects from './ProgrammeSubjects';
 import { GradesProps } from './ProgrammeSubjects';
-import MessageBox from '../MessageBox/MessageBox';
+import MessageBox from '../Messages/MessageBox';
 import { NavigationHeading } from '..';
 const StyledWrapper = styled.div`
   display: flex;

package/src/Programme/ProgrammeSubjects.tsx

@@ -12,7 +12,7 @@ import styled from '@emotion/styled';
 import Button from '@ndla/button';
 import { breakpoints, mq } from '@ndla/core';
 import { NavigationBox } from '../Navigation';
-import { MessageBox } from '../MessageBox';
+import { MessageBox } from '../Messages';
 
 const GradesMenu = styled.div`
   margin-bottom: 28px;

package/src/Topic/Topic.tsx

@@ -21,7 +21,7 @@ import Loader from './Loader';
 import { ItemProps } from '../Navigation/NavigationBox';
 import { NavigationBox } from '../Navigation';
 import { makeSrcQueryString, ImageCrop, ImageFocalPoint } from '../Image';
-import { MessageBox, MessageBoxType } from '../MessageBox';
+import { MessageBox } from '../Messages';
 
 type InvertItProps = {
   invertedStyle?: boolean;
@@ -331,7 +331,7 @@ const Topic = ({
                   </StyledAdditionalResource>
                 )}
               </TopicHeading>
-              {messageBox && <MessageBox type={MessageBoxType.medium}>{messageBox}</MessageBox>}
+              {messageBox && <MessageBox>{messageBox}</MessageBox>}
               <TopicIntroduction invertedStyle={invertedStyle}>
                 {renderMarkdown ? parse(renderMarkdown(topic.introduction)) : topic.introduction}
               </TopicIntroduction>

package/src/TopicMenu/TopicMenu.jsx

@@ -28,7 +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';
+import { MessageBanner } from '../Messages';
 
 const classes = new BEMHelper({
   name: 'topic-menu',
@@ -153,7 +153,7 @@ export const TopicMenu = ({
   return (
     <nav>
       {messages?.map((message) => (
-        <MessageBox type={MessageBoxType.masthead}>{message}</MessageBox>
+        <MessageBanner>{message}</MessageBanner>
       ))}
       <ModalHeader modifier={['white', 'menu']}>
         <div {...classes('masthead-left')}>

package/src/index.ts

@@ -127,7 +127,7 @@ export { default as CreatedBy } from './CreatedBy';
 
 export { default as Breadcrumblist } from './Breadcrumblist';
 
-export { MessageBox, MessageBoxTag, MessageBoxType } from './MessageBox';
+export { MessageBox, MessageBoxTag, MessageBanner } from './Messages';
 
 export { ResourceBox } from './ResourceBox';