@ndla/ui 16.1.0 → 17.0.0

package/lib/index.d.ts

@@ -25,9 +25,12 @@ export { default as InfoWidget } from './InfoWidget';
 export { FrontpageInfo, FrontpageFilm, FrontpageToolbox, FrontpageMultidisciplinarySubject, FrontpageHeader, FrontpageSubjectIllustration, FrontpageSearch, FrontpageProgramMenu, } from './Frontpage';
 export { default as FactBox } from './FactBox';
 export { default as Image, ImageLink, makeSrcQueryString } from './Image';
+export type { ImageCrop, ImageFocalPoint } from './Image';
+export type { HeroContentType } from './Hero';
 export { SubjectMaterialHero, TasksAndActivitiesHero, AssessmentResourcesHero, SubjectHero, ExternalLearningResourcesHero, SourceMaterialHero, Hero, NdlaFilmHero, } from './Hero';
 export { Footer, EditorName, FooterText, FooterAuth } from './Footer';
-export { Figure, FigureCaption, FigureLicenseDialog, FigureExpandButton, FigureOpenDialogButton } from './Figure';
+export { Figure, FigureCaption, FigureLicenseDialog, FigureExpandButton, FigureOpenDialogButton, FigureBylineExpandButton, } from './Figure';
+export type { FigureType } from './Figure';
 export { LanguageSelector } from './LanguageSelector';
 export { LearningPathWrapper, LearningPathContent, LearningPathMenu, LearningPathSticky, LearningPathInformation, LearningPathStickySibling, LearningPathStickyPlaceholder, LearningPathLastStepNavigation, LearningPathMobileStepInfo, LearningPathMobileHeader, } from './LearningPaths';
 export { Translation, TranslationLine, TranslationBox } from './Translation';
@@ -42,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';
@@ -62,7 +65,7 @@ export { default as Aside } from './Aside';
 export { default as AuthorInfo } from './AuthorInfo';
 export { default as Breadcrumb, HeaderBreadcrumb, HomeBreadcrumb, ActionBreadcrumb } from './Breadcrumb';
 export type { SimpleBreadcrumbItem, IndexedBreadcrumbItem } from './Breadcrumb';
-export type { BreadcrumbItemProps } from './Breadcrumblist/Breadcrumblist';
+export type { BreadcrumbItemProps } from './Breadcrumblist';
 export { i18nInstance, formatNestedMessages, formatMessage } from './i18n';
 export { default as ResourceGroup } from './ResourceGroup';
 export { default as LayoutItem, OneColumn, PageContainer, Content } from './Layout';
@@ -75,6 +78,7 @@ export { default as ContentCard } from './ContentCard';
 export { default as CopyParagraphButton } from './CopyParagraphButton';
 export { default as ContentPlaceholder } from './ContentPlaceholder';
 export { Notion, ConceptNotion } from './Notion';
+export type { NotionVisualElementType, ConceptNotionType } from './Notion';
 export { BannerCard } from './BannerCard';
 export { VerticalNavigation, Folder, FolderInput } from './MyNdla';
 export { ListResource, BlockResource } from './Resource';

package/lib/index.js

@@ -68,6 +68,7 @@ var _exportNames = {
   FigureLicenseDialog: true,
   FigureExpandButton: true,
   FigureOpenDialogButton: true,
+  FigureBylineExpandButton: true,
   LanguageSelector: true,
   LearningPathWrapper: true,
   LearningPathContent: true,
@@ -94,7 +95,7 @@ var _exportNames = {
   Breadcrumblist: true,
   MessageBox: true,
   MessageBoxTag: true,
-  MessageBoxType: true,
+  MessageBanner: true,
   ResourceBox: true,
   AudioPlayer: true,
   initAudioPlayers: true,
@@ -560,6 +561,12 @@ Object.defineProperty(exports, "FigureOpenDialogButton", {
     return _Figure.FigureOpenDialogButton;
   }
 });
+Object.defineProperty(exports, "FigureBylineExpandButton", {
+  enumerable: true,
+  get: function get() {
+    return _Figure.FigureBylineExpandButton;
+  }
+});
 Object.defineProperty(exports, "LanguageSelector", {
   enumerable: true,
   get: function get() {
@@ -707,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", {
@@ -1354,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/lib/locale/messages-en.js

@@ -318,7 +318,7 @@ var messages = _objectSpread(_objectSpread({
     feide: 'This resource is accessible only to teachers who are logged in with Feide.',
     resources: 'This is not a complete course produced by NDLA, but a collection of resources we hope you will find useful.',
     subjectOutdated: 'This course is not updated to the current curriculum.',
-    subjectBeta: 'This course is in beta.',
+    subjectBeta: 'This course is in beta. New resources are being added continously.',
     newVersion: 'This learning resource is not updated to the current curriculum. You can find an updated version here: ',
     frontPageBeta: 'Revised subjects have been revised in accordance with the new curriculum that will be put into effect from August 2022. Beta versions of subjects are subjects we are still working on. We hope, however, that the learning resources available by now may come in useful already.',
     frontPageExpired: 'Expired subjects are not being taught any longer, but it may still be possible to take exams in these subjects.',

package/lib/locale/messages-nb.js

@@ -318,7 +318,7 @@ var messages = _objectSpread(_objectSpread({
     feide: 'Denne ressursen er bare tilgjengelig for lærere som er pålogget med Feide.',
     resources: 'Dette er ikke et komplett læremiddel produsert av NDLA, men ei ressurssamling som vi håper kan være nyttig for deg.',
     subjectOutdated: 'Dette faget følger en utgått læreplan.',
-    subjectBeta: 'Dette faget er i betaversjon.',
+    subjectBeta: 'Dette faget er i betaversjon. Vi fyller på med ressurser fortløpende.',
     newVersion: 'Denne læringsressursen er ikke oppdatert etter gjeldende læreplan. Du finner en oppdatert versjon her: ',
     frontPageBeta: 'Kommende fag er tilpassa ny læreplan som gjelder fra høsten 2022. Betafag er fag under arbeid. Vi håper likevel at læringsressursene i betafaga kan være nyttige allerede nå.',
     frontPageExpired: 'Utgåtte fag undervises det ikke i lenger, men det kan fortsatt være mulig å ta eksamen i faga som privatist.',

package/lib/locale/messages-nn.js

@@ -318,7 +318,7 @@ var messages = _objectSpread(_objectSpread({
     feide: 'Denne ressursen er berre tilgjengeleg for lærarar som er pålogga med Feide.',
     resources: 'Dette er ikkje eit komplett læremiddel produsert av NDLA, men ei ressurssamling som vi håper kan vere nyttig for deg.',
     subjectOutdated: 'Dette faget følgjer ein utgått læreplan.',
-    subjectBeta: 'Dette faget er i betaversjon.',
+    subjectBeta: 'Dette faget er i betaversjon. Vi fyller på med ressurser fortløpande.',
     newVersion: 'Denne læringsressursen er ikkje oppdatert etter gjeldande læreplan. Du finn ein oppdatert versjon her: ',
     frontPageBeta: 'Kommande fag er tilpassa ny læreplan som gjeld fra hausten 2022. Betafag er fag under arbeid. Vi håper likevel at læringsressursane i betafaga kan vere nyttige allereie no.',
     frontPageExpired: 'Utgåtte fag blir det ikkje undervist i lenger, men det kan framleis vere mogleg å ta eksamen i faget som privatist.',

package/lib/locale/messages-se.js

@@ -318,7 +318,7 @@ var messages = _objectSpread(_objectSpread({
     feide: 'Denne ressursen er bare tilgjengelig for lærere som er pålogget med Feide.',
     resources: 'Dette er ikke et komplett læremiddel produsert av NDLA, men ei ressurssamling som vi håper kan være nyttig for deg.',
     subjectOutdated: 'Dette faget følger en utgått læreplan.',
-    subjectBeta: 'Dette faget er i betaversjon.',
+    subjectBeta: 'Dette faget er i betaversjon. Vi fyller på med ressurser fortløpende.',
     newVersion: 'Denne læringsressursen er ikke oppdatert etter gjeldende læreplan. Du finner en oppdatert versjon her: ',
     frontPageBeta: 'Kommende fag er tilpassa ny læreplan som gjelder fra høsten 2022. Betafag er fag under arbeid. Vi håper likevel at læringsressursene i betafaga kan være nyttige allerede nå.',
     frontPageExpired: 'Utgåtte fag undervises det ikke i lenger, men det kan fortsatt være mulig å ta eksamen i faga som privatist.',

package/lib/locale/messages-sma.js

@@ -318,7 +318,7 @@ var messages = _objectSpread(_objectSpread({
     feide: 'Denne ressursen er bare tilgjengelig for lærere som er pålogget med Feide.',
     resources: 'Dette er ikke et komplett læremiddel produsert av NDLA, men ei ressurssamling som vi håper kan være nyttig for deg.',
     subjectOutdated: 'Dette faget følger en utgått læreplan.',
-    subjectBeta: 'Dette faget er i betaversjon.',
+    subjectBeta: 'Dette faget er i betaversjon. Vi fyller på med ressurser fortløpende.',
     newVersion: 'Denne læringsressursen er ikke oppdatert etter gjeldende læreplan. Du finner en oppdatert versjon her: ',
     frontPageBeta: 'Kommende fag er tilpassa ny læreplan som gjelder fra høsten 2022. Betafag er fag under arbeid. Vi håper likevel at læringsressursene i betafaga kan være nyttige allerede nå.',
     frontPageExpired: 'Utgåtte fag undervises det ikke i lenger, men det kan fortsatt være mulig å ta eksamen i faga som privatist.',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "16.1.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.4.0",
-    "@ndla/carousel": "^1.2.9",
-    "@ndla/core": "^2.1.1",
+    "@ndla/button": "^2.5.1",
+    "@ndla/carousel": "^1.2.11",
+    "@ndla/core": "^2.3.0",
     "@ndla/hooks": "^1.1.4",
-    "@ndla/icons": "^1.8.1",
-    "@ndla/licenses": "^5.0.0",
-    "@ndla/modal": "^1.2.10",
-    "@ndla/notion": "^3.1.13",
-    "@ndla/safelink": "^2.0.4",
-    "@ndla/switch": "^0.1.5",
-    "@ndla/tabs": "^1.1.8",
-    "@ndla/tooltip": "^2.1.0",
+    "@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": "d0828e0cc8cef62893e54aab44b37f6459438e9b"
+  "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/Breadcrumblist/{index.tsx → index.ts}

@@ -1,3 +1,4 @@
 import Breadcrumblist from './Breadcrumblist';
 
+export type { BreadcrumbItemProps } from './Breadcrumblist';
 export default Breadcrumblist;

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/NDLAFilm/MovieGrid.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
-import { spacing } from '@ndla/core/src';
+import { spacing } from '@ndla/core';
 import { CalculatedCarouselProps } from '@ndla/carousel';
 import { useTranslation } from 'react-i18next';
 import FilmContentCard from './FilmContentCard';

package/src/Notion/ConceptNotion.tsx

@@ -16,7 +16,8 @@ import { getLicenseCredits } from '@ndla/licenses';
 import Notion, { NotionDialogContent, NotionDialogText, NotionDialogLicenses } from '@ndla/notion';
 import { Notion as UINotion } from '.';
 import { NotionImage } from './NotionImage';
-import NotionVisualElement, { NotionVisualElementType } from './NotionVisualElement';
+import NotionVisualElement from './NotionVisualElement';
+import type { NotionVisualElementType } from './NotionVisualElement';
 import FigureNotion from './FigureNotion';
 import { Copyright } from '../types';
 import { FigureType } from '../Figure';

package/src/Notion/index.ts

@@ -1,2 +1,5 @@
-export { default as Notion } from './Notion';
 export { default as ConceptNotion } from './ConceptNotion';
+export { default as Notion } from './Notion';
+export { default as NotionVisualElement } from './NotionVisualElement';
+export type { NotionVisualElementType } from './NotionVisualElement';
+export type { ConceptNotionType } from './ConceptNotion';

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/Resource/resourceComponents.tsx

@@ -17,10 +17,8 @@ export interface ResourceImageProps {
   src: string;
 }
 
-export const ResourceTitle = styled.h2`
-  ${fonts.sizes(18)};
+export const ResourceTitle = styled.h3`
   min-width: 50px;
-  font-weight: ${fonts.weight.bold};
   margin: 0;
   flex: 1;
   overflow: hidden;

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