@ndla/ui 52.0.0 → 53.0.0

package/lib/index.d.ts

@@ -10,9 +10,9 @@ export { default as FramedContent } from "./FramedContent";
 export { ConceptNotionV2, ImageEmbed, getCrop, getFocalPoint, AudioEmbed, H5pEmbed, ExternalEmbed, IframeEmbed, FootnoteEmbed, BrightcoveEmbed, ContentLinkEmbed, RelatedContentEmbed, ConceptEmbed, ConceptListEmbed, UnknownEmbed, InlineConcept, BlockConcept, UuDisclaimerEmbed, CopyrightEmbed, CodeEmbed, } from "./Embed";
 export { LicenseLink } from "./LicenseByline";
 export { ArticleByline, ArticleFootNotes, ArticleIntroduction, ArticleTitle, ArticleWrapper, ArticleHeaderWrapper, default as Article, ArticleParagraph, } from "./Article";
+export type { ArticleModifier } from "./Article";
 export { getPossiblyRelativeUrl } from "./utils/relativeUrl";
 export { default as Table, TableStyling } from "./Table";
-export { default as Masthead, getMastheadHeight, useMastheadHeight, SkipToMainContent } from "./Masthead";
 export { default as ContentLoader } from "./ContentLoader";
 export { default as RelatedArticleList, RelatedArticle } from "./RelatedArticleList";
 export { ErrorResourceAccessDenied, default as ErrorMessage } from "./ErrorMessage";

package/lib/index.js

@@ -477,12 +477,6 @@ Object.defineProperty(exports, "Logo", {
     return _Logo.default;
   }
 });
-Object.defineProperty(exports, "Masthead", {
-  enumerable: true,
-  get: function () {
-    return _Masthead.default;
-  }
-});
 Object.defineProperty(exports, "MediaList", {
   enumerable: true,
   get: function () {
@@ -627,12 +621,6 @@ Object.defineProperty(exports, "SearchResultSleeve", {
     return _SearchResultSleeve.default;
   }
 });
-Object.defineProperty(exports, "SkipToMainContent", {
-  enumerable: true,
-  get: function () {
-    return _Masthead.SkipToMainContent;
-  }
-});
 Object.defineProperty(exports, "SnackbarProvider", {
   enumerable: true,
   get: function () {
@@ -765,12 +753,6 @@ Object.defineProperty(exports, "getFocalPoint", {
     return _Embed.getFocalPoint;
   }
 });
-Object.defineProperty(exports, "getMastheadHeight", {
-  enumerable: true,
-  get: function () {
-    return _Masthead.getMastheadHeight;
-  }
-});
 Object.defineProperty(exports, "getPossiblyRelativeUrl", {
   enumerable: true,
   get: function () {
@@ -825,12 +807,6 @@ Object.defineProperty(exports, "resourceTypeColor", {
     return _resourceTypeColor.default;
   }
 });
-Object.defineProperty(exports, "useMastheadHeight", {
-  enumerable: true,
-  get: function () {
-    return _Masthead.useMastheadHeight;
-  }
-});
 Object.defineProperty(exports, "useSnack", {
   enumerable: true,
   get: function () {
@@ -844,7 +820,6 @@ var _LicenseByline = require("./LicenseByline");
 var _Article = _interopRequireWildcard(require("./Article"));
 var _relativeUrl = require("./utils/relativeUrl");
 var _Table = _interopRequireWildcard(require("./Table"));
-var _Masthead = _interopRequireWildcard(require("./Masthead"));
 var _ContentLoader = _interopRequireDefault(require("./ContentLoader"));
 var _RelatedArticleList = _interopRequireWildcard(require("./RelatedArticleList"));
 var _ErrorMessage = _interopRequireWildcard(require("./ErrorMessage"));

package/lib/locale/messages-en.d.ts

@@ -524,8 +524,10 @@ declare const messages: {
     };
     contentTypes: {
         all: string;
+        article: string;
         subject: string;
         "topic-article": string;
+        learningpath: string;
         "learning-path": string;
         "subject-material": string;
         "tasks-and-activities": string;
@@ -912,6 +914,7 @@ declare const messages: {
             onDragEndMissingOver: string;
             onDragCancel: string;
             dragHandle: string;
+            professional: string;
             sharedWarning: string;
             sharing: {
                 share: string;

package/lib/locale/messages-en.js

@@ -541,8 +541,10 @@ const messages = {
   },
   contentTypes: {
     all: "All",
+    article: "Article",
     subject: "Subject",
     "topic-article": "Topic article",
+    learningpath: "Learning path",
     "learning-path": "Learning path",
     "subject-material": "Subject material",
     "tasks-and-activities": "Task and activities",
@@ -929,6 +931,7 @@ const messages = {
       onDragEndMissingOver: "The folder {{name}} was dropped",
       onDragCancel: "Dragging was cancelled. The folder {{name}} was dropped",
       dragHandle: "Drag the folder {{name}}",
+      professional: "a professional",
       sharedWarning: "Name and description will be visible for everyone you share the folder with",
       sharing: {
         share: "Share folder",

package/lib/locale/messages-nb.d.ts

@@ -524,8 +524,10 @@ declare const messages: {
     };
     contentTypes: {
         all: string;
+        article: string;
         subject: string;
         "topic-article": string;
+        learningpath: string;
         "learning-path": string;
         "subject-material": string;
         "tasks-and-activities": string;
@@ -912,6 +914,7 @@ declare const messages: {
             onDragEndMissingOver: string;
             onDragCancel: string;
             dragHandle: string;
+            professional: string;
             sharedWarning: string;
             sharing: {
                 share: string;

package/lib/locale/messages-nb.js

@@ -541,8 +541,10 @@ const messages = {
   },
   contentTypes: {
     all: "Alle",
+    article: "Artikkel",
     subject: "Fag",
     "topic-article": "Emne",
+    learningpath: "Læringssti",
     "learning-path": "Læringssti",
     "subject-material": "Fagstoff",
     "tasks-and-activities": "Oppgaver og aktiviteter",
@@ -929,6 +931,7 @@ const messages = {
       onDragEndMissingOver: "Mappen {{name}} ble sluppet",
       onDragCancel: "Flytting avbrutt. Mappen {{name}} ble sluppet",
       dragHandle: "Sorter mappen {{name}}",
+      professional: "en fagperson",
       sharedWarning: "Navn og beskrivelse blir synlig for alle du deler mappen med.",
       sharing: {
         share: "Del mappe",

package/lib/locale/messages-nn.d.ts

@@ -524,8 +524,10 @@ declare const messages: {
     };
     contentTypes: {
         all: string;
+        article: string;
         subject: string;
         "topic-article": string;
+        learningpath: string;
         "learning-path": string;
         "subject-material": string;
         "tasks-and-activities": string;
@@ -912,6 +914,7 @@ declare const messages: {
             onDragEndMissingOver: string;
             onDragCancel: string;
             dragHandle: string;
+            professional: string;
             sharedWarning: string;
             sharing: {
                 share: string;

package/lib/locale/messages-nn.js

@@ -541,8 +541,10 @@ const messages = {
   },
   contentTypes: {
     all: "Alle",
+    article: "Artikkel",
     subject: "Fag",
     "topic-article": "Emne",
+    learningpath: "Læringssti",
     "learning-path": "Læringssti",
     "subject-material": "Fagstoff",
     "tasks-and-activities": "Oppgåver og aktivitetar",
@@ -929,6 +931,7 @@ const messages = {
       onDragEndMissingOver: "Mappa blei sleppt",
       onDragCancel: "Flytting avbrutt. Mappa {{name}} blei sleppt",
       dragHandle: "Sorter mappa {{name}}",
+      professional: "ein fagperson",
       sharedWarning: "Namn og beskriving blir synleg for alle du deler mappa med.",
       sharing: {
         share: "Del mappe",

package/lib/locale/messages-se.d.ts

@@ -524,8 +524,10 @@ declare const messages: {
     };
     contentTypes: {
         all: string;
+        article: string;
         subject: string;
         "topic-article": string;
+        learningpath: string;
         "learning-path": string;
         "subject-material": string;
         "tasks-and-activities": string;
@@ -912,6 +914,7 @@ declare const messages: {
             onDragEndMissingOver: string;
             onDragCancel: string;
             dragHandle: string;
+            professional: string;
             sharedWarning: string;
             sharing: {
                 share: string;

package/lib/locale/messages-se.js

@@ -541,8 +541,10 @@ const messages = {
   },
   contentTypes: {
     all: "Buot",
+    article: "Artikkel",
     subject: "Fága",
     "topic-article": "Fáddá",
+    learningpath: "Oahppanbálggis",
     "learning-path": "Oahppanbálggis",
     "subject-material": "Fágaávdnasat",
     "tasks-and-activities": "Bihtát ja doaimmat",
@@ -929,6 +931,7 @@ const messages = {
       onDragEndMissingOver: "Mappen {{name}} ble sluppet",
       onDragCancel: "Flytting avbrutt. Mappen {{name}} ble sluppet",
       dragHandle: "Sorter mappen {{name}}",
+      professional: "en fagperson",
       sharedWarning: "Navn og beskrivelse blir synlig for alle du deler mappen med.",
       sharing: {
         share: "Del mappe",

package/lib/locale/messages-sma.d.ts

@@ -524,8 +524,10 @@ declare const messages: {
     };
     contentTypes: {
         all: string;
+        article: string;
         subject: string;
         "topic-article": string;
+        learningpath: string;
         "learning-path": string;
         "subject-material": string;
         "tasks-and-activities": string;
@@ -912,6 +914,7 @@ declare const messages: {
             onDragEndMissingOver: string;
             onDragCancel: string;
             dragHandle: string;
+            professional: string;
             sharedWarning: string;
             sharing: {
                 share: string;

package/lib/locale/messages-sma.js

@@ -541,8 +541,10 @@ const messages = {
   },
   contentTypes: {
     all: "Alle",
+    article: "Artikkel",
     subject: "Faagem",
     "topic-article": "Teema",
+    learningpath: "Lïeremebaalka",
     "learning-path": "Lïeremebaalka",
     "subject-material": "Faage-aamhtese",
     "tasks-and-activities": "Laavenjassh jïh darjomh",
@@ -929,6 +931,7 @@ const messages = {
       onDragEndMissingOver: "Mappen {{name}} ble sluppet",
       onDragCancel: "Flytting avbrutt. Mappen {{name}} ble sluppet",
       dragHandle: "Sorter mappen {{name}}",
+      professional: "en fagperson",
       sharedWarning: "Navn og beskrivelse blir synlig for alle du deler mappen med.",
       sharing: {
         share: "Del mappe",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "52.0.0",
+  "version": "53.0.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -51,7 +51,6 @@
     "html-react-parser": "^5.1.8",
     "i18next-browser-languagedetector": "^7.1.0",
     "lodash.throttle": "^4.1.1",
-    "react-bem-helper": "1.4.1",
     "react-device-detect": "^2.2.3",
     "react-select": "^5.8.0",
     "react-swipeable": "^7.0.0"
@@ -77,5 +76,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "dab99b8c9bf77c2ee7690d348b2ae811af81bd3d"
+  "gitHead": "fe4060794eb3eafc6231ef802b7f44df65155467"
 }

package/src/Article/Article.tsx

@@ -6,37 +6,139 @@
  *
  */
 
-import { ReactNode, useEffect, useRef, useState, forwardRef, ComponentPropsWithRef } from "react";
-import BEMHelper from "react-bem-helper";
+import { ReactNode, forwardRef, ComponentPropsWithRef, useMemo, CSSProperties } from "react";
+import { SerializedStyles, css } from "@emotion/react";
 import styled from "@emotion/styled";
 
-import { spacing, mq, breakpoints } from "@ndla/core";
-import { useIntersectionObserver } from "@ndla/hooks";
+import { spacing, mq, breakpoints, fonts, colors, spacingUnit } from "@ndla/core";
 import { Heading, Text } from "@ndla/typography";
-import { resizeObserver } from "@ndla/util";
 import ArticleByline from "./ArticleByline";
 import ArticleHeaderWrapper from "./ArticleHeaderWrapper";
-import ArticleNotions from "./ArticleNotions";
 import LayoutItem from "../Layout";
 import MessageBox from "../Messages/MessageBox";
 import { Article as ArticleType } from "../types";
 
-const classes = new BEMHelper({
-  name: "article",
-  prefix: "c-",
-});
+export type ArticleModifier =
+  | "clean"
+  | "in-topic"
+  | "subject-material"
+  | "assessment-resources"
+  | "tasks-and-activities"
+  | "concept"
+  | "source-material";
 
 interface ArticleWrapperProps extends ComponentPropsWithRef<"article"> {
-  modifier?: string;
+  modifier?: ArticleModifier;
 }
 
-export const ArticleWrapper = forwardRef<HTMLElement, ArticleWrapperProps>(
-  ({ children, modifier, className, ...rest }, ref) => (
-    <article {...rest} {...classes(undefined, modifier, className)} ref={ref}>
+const StyledArticle = styled.article`
+  font-family: ${fonts.serif};
+  background: ${colors.white};
+  margin-top: ${spacing.large};
+  margin-right: auto;
+  margin-bottom: ${spacing.normal};
+  margin-left: auto;
+  overflow-wrap: break-word;
+  ${fonts.sizes("18px", "29px")};
+  position: relative;
+
+  mjx-stretchy-v > mjx-ext > mjx-c {
+    transform: scaleY(100) translateY(0.075em);
+  }
+
+  > section > p {
+    &:not([class]) {
+      margin-bottom: 29px;
+    }
+  }
+
+  ${mq.range({ from: breakpoints.tablet })} {
+    ${fonts.sizes("18px", "29px")}; //This is probably not needed, but it's here to be sure.
+
+    > section > p {
+      &:not([class]) {
+        margin-bottom: 35px;
+      }
+    }
+    padding: 0 ${spacing.normal} ${spacing.normal};
+    margin-bottom: ${spacing.large};
+    margin-top: -${spacingUnit * 6}px;
+    padding-top: ${spacing.xlarge};
+  }
+  ${mq.range({ from: breakpoints.desktop })} {
+    padding-bottom: ${spacing.large};
+    margin-bottom: ${spacing.large};
+  }
+
+  &::after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+
+  p {
+    margin-top: 0;
+  }
+`;
+
+// Make sure to wrap modifiers in & {} to avoid specificity issues
+const articleModifiers: Partial<Record<ArticleModifier, SerializedStyles>> = {
+  clean: css`
+    & {
+      margin-top: ${spacing.normal} !important;
+      padding: ${spacing.small} !important;
+      ${mq.range({ from: breakpoints.tablet })} {
+        padding: 0 !important;
+      }
+      border: none;
+    }
+  `,
+  "in-topic": css`
+    & {
+      margin-top: 0 !important;
+      padding: 0 !important;
+      padding-left: ${spacing.medium} !important;
+    }
+  `,
+};
+
+const borderCss = css`
+  ${mq.range({ from: breakpoints.tablet })} {
+    border: 2px solid var(--color);
+  }
+`;
+
+export const ArticleWrapper = forwardRef<HTMLElement, ArticleWrapperProps>(({ children, modifier, ...rest }, ref) => {
+  const borderColor = useMemo(() => {
+    let color = undefined;
+    if (modifier === "subject-material") {
+      color = colors.subjectMaterial.light;
+    } else if (modifier === "assessment-resources") {
+      color = colors.assessmentResource.background;
+    } else if (modifier === "tasks-and-activities") {
+      color = colors.tasksAndActivities.background;
+    } else if (modifier === "concept") {
+      color = colors.concept.light;
+    } else if (modifier === "source-material") {
+      color = colors.sourceMaterial.light;
+    }
+    if (color) {
+      return { "--color": color } as CSSProperties;
+    }
+    return undefined;
+  }, [modifier]);
+
+  return (
+    <StyledArticle
+      css={[borderColor ? borderCss : undefined, modifier ? articleModifiers[modifier] : undefined]}
+      style={borderColor}
+      {...rest}
+      ref={ref}
+    >
       {children}
-    </article>
-  ),
-);
+    </StyledArticle>
+  );
+});
 
 type ArticleTitleProps = {
   icon?: ReactNode;
@@ -46,28 +148,40 @@ type ArticleTitleProps = {
   lang?: string;
 };
 
-export const ArticleTitle = ({ children, icon, label, id, lang }: ArticleTitleProps) => {
-  const modifiers = [];
-  if (icon) {
-    modifiers.push("icon");
-  }
-
-  let labelView = null;
+const TitleLabelText = styled(Text)`
+  color: #757575;
+  text-transform: uppercase;
+  font-family: ${fonts.sans};
+`;
 
-  if (label) {
-    labelView = <p>{label}</p>;
+const ArticleTitleWrapper = styled.div`
+  display: flex;
+  gap: ${spacing.normal};
+  align-items: flex-start;
+  h1 {
+    overflow-wrap: anywhere;
   }
+  padding-bottom: ${spacing.medium};
+  [data-badge] {
+    flex-shrink: 0;
+  }
+`;
 
-  return (
-    <div {...classes("title", modifiers)}>
-      {icon}
-      {labelView}
-      <Heading element="h1" headingStyle="h1-resource" id={id} tabIndex={-1} lang={lang}>
+export const ArticleTitle = ({ children, icon, label, id, lang }: ArticleTitleProps) => (
+  <ArticleTitleWrapper>
+    {icon}
+    <hgroup>
+      {!!label && (
+        <TitleLabelText textStyle="meta-text-medium" margin="none">
+          {label}
+        </TitleLabelText>
+      )}
+      <Heading element="h1" margin="none" headingStyle="h1-resource" id={id} tabIndex={-1} lang={lang}>
         {children}
       </Heading>
-    </div>
-  );
-};
+    </hgroup>
+  </ArticleTitleWrapper>
+);
 
 type ArticleIntroductionProps = {
   children: ReactNode;
@@ -107,29 +221,15 @@ type Props = {
   article: ArticleType;
   icon?: ReactNode;
   licenseBox?: ReactNode;
-  modifier?: string;
+  modifier?: ArticleModifier;
   children?: ReactNode;
   messages: Messages;
-  contentTransformed?: boolean;
   messageBoxLinks?: [];
   competenceGoals?: ReactNode;
   id: string;
-  notions?: ReactNode;
   lang?: string;
 };
 
-const getArticleContent = (content: any, contentTransformed?: boolean) => {
-  if (contentTransformed) {
-    return content;
-  }
-  switch (typeof content) {
-    case "function":
-      return content();
-    default:
-      return content;
-  }
-};
-
 export const Article = ({
   article,
   icon,
@@ -140,79 +240,43 @@ export const Article = ({
   children,
   competenceGoals,
   id,
-  notions,
   heartButton,
-  contentTransformed,
   lang,
 }: Props) => {
-  const articleRef = useRef<HTMLDivElement>(null);
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const { entry } = useIntersectionObserver({
-    rootMargin: "400px",
-    target: articleRef.current,
-    threshold: 0.1,
-  });
-  const [articlePositionRight, setArticlePositionRight] = useState(0);
-
-  const showExplainNotions = !!entry?.isIntersecting;
-
-  useEffect(() => {
-    if (wrapperRef?.current) {
-      const handler = () => {
-        if (wrapperRef?.current) {
-          const offset =
-            wrapperRef.current.getBoundingClientRect().left + wrapperRef.current.getBoundingClientRect().width;
-          setArticlePositionRight(offset);
-        }
-      };
-      handler();
-
-      return resizeObserver(document.body, handler);
-    }
-  }, [wrapperRef]);
-
   const { title, introduction, published, content, footNotes, copyright } = article;
 
   const authors =
     copyright?.creators.length || copyright?.rightsholders.length ? copyright.creators : copyright?.processors;
 
   return (
-    <div ref={wrapperRef}>
-      <ArticleWrapper modifier={modifier} ref={articleRef} data-ndla-article="">
-        <LayoutItem layout="center">
-          {messages.messageBox && (
-            <MSGboxWrapper>
-              <MessageBox links={messageBoxLinks}>{messages.messageBox}</MessageBox>
-            </MSGboxWrapper>
-          )}
-          <ArticleHeaderWrapper competenceGoals={competenceGoals}>
-            {heartButton ? <ArticleFavoritesButtonWrapper>{heartButton}</ArticleFavoritesButtonWrapper> : null}
-            <ArticleTitle id={id} icon={icon} label={messages.label} lang={lang}>
-              {title}
-            </ArticleTitle>
-            <ArticleIntroduction lang={lang}>{introduction}</ArticleIntroduction>
-          </ArticleHeaderWrapper>
-        </LayoutItem>
-        <LayoutItem layout="center">
-          {notions && showExplainNotions && (
-            <ArticleNotions buttonOffsetRight={articlePositionRight}>{notions}</ArticleNotions>
-          )}
-          {getArticleContent(content, contentTransformed)}
-        </LayoutItem>
-
-        <LayoutItem layout="center">
-          <ArticleByline
-            footnotes={footNotes}
-            authors={authors}
-            suppliers={copyright?.rightsholders}
-            published={published}
-            license={copyright?.license?.license ?? ""}
-            licenseBox={licenseBox}
-          />
-        </LayoutItem>
-        <LayoutItem layout="extend">{children}</LayoutItem>
-      </ArticleWrapper>
-    </div>
+    <ArticleWrapper modifier={modifier} data-ndla-article="">
+      <LayoutItem layout="center">
+        {messages.messageBox && (
+          <MSGboxWrapper>
+            <MessageBox links={messageBoxLinks}>{messages.messageBox}</MessageBox>
+          </MSGboxWrapper>
+        )}
+        <ArticleHeaderWrapper competenceGoals={competenceGoals}>
+          {heartButton ? <ArticleFavoritesButtonWrapper>{heartButton}</ArticleFavoritesButtonWrapper> : null}
+          <ArticleTitle id={id} icon={icon} label={messages.label} lang={lang}>
+            {title}
+          </ArticleTitle>
+          <ArticleIntroduction lang={lang}>{introduction}</ArticleIntroduction>
+        </ArticleHeaderWrapper>
+      </LayoutItem>
+      <LayoutItem layout="center">{content}</LayoutItem>
+      <LayoutItem layout="center">
+        <ArticleByline
+          footnotes={footNotes}
+          authors={authors}
+          suppliers={copyright?.rightsholders}
+          published={published}
+          license={copyright?.license?.license ?? ""}
+          licenseBox={licenseBox}
+        />
+      </LayoutItem>
+      <LayoutItem layout="extend">{children}</LayoutItem>
+    </ArticleWrapper>
   );
 };