@ndla/ui 52.0.0 → 53.0.1

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

package/src/Article/ArticleHeaderWrapper.tsx

@@ -7,24 +7,31 @@
  */
 
 import { ReactNode } from "react";
-import BEMHelper from "react-bem-helper";
-
-const classes = new BEMHelper({
-  name: "article",
-  prefix: "c-",
-});
+import styled from "@emotion/styled";
+import { breakpoints, mq, spacing } from "@ndla/core";
 
 type Props = {
   competenceGoals?: ReactNode;
   children: ReactNode;
 };
 
+const StyledHeaderWrapper = styled.div`
+  margin-bottom: ${spacing.normal};
+  ${mq.range({ from: breakpoints.tablet })} {
+    margin-bottom: ${spacing.large};
+  }
+`;
+
+const CompetenceWrapper = styled.div`
+  margin-top: ${spacing.normal};
+`;
+
 const ArticleHeaderWrapper = ({ children, competenceGoals }: Props) => {
   return (
-    <div {...classes("header")}>
+    <StyledHeaderWrapper>
       {children}
-      <div {...classes("competence")}>{competenceGoals}</div>
-    </div>
+      <CompetenceWrapper>{competenceGoals}</CompetenceWrapper>
+    </StyledHeaderWrapper>
   );
 };
 

package/src/Article/index.ts

@@ -14,4 +14,6 @@ import ArticleHeaderWrapper from "./ArticleHeaderWrapper";
 export { ArticleByline, ArticleFootNotes, ArticleHeaderWrapper, ArticleTitle, ArticleIntroduction, ArticleWrapper };
 export { ArticleParagraph } from "./ArticleParagraph";
 
+export type { ArticleModifier } from "./Article";
+
 export default Article;

package/src/CodeBlock/CodeBlock.stories.tsx

@@ -61,13 +61,11 @@ export default {
   argTypes: {
     actionButton: {
       table: {
+        disable: true,
         type: {
           detail: "Takes any ReactNode, but as the name implies: use a button component, preferably an icon-button",
         },
       },
-      control: {
-        type: null,
-      },
     },
   },
 } as Meta<typeof CodeBlock>;

package/src/Embed/ImageEmbed.tsx

@@ -161,6 +161,10 @@ const ImageEmbed = ({
 
   const { data, embedData } = embed;
 
+  // Full-size figures automatically get a margin of {spacing.normal} on its y-axis if a float is not set (or if float is an empty string).
+  // This adds some margin to normal figures within an article, but should not happen for figures in a grid.
+  const floatAttr = inGrid && !embedData.align ? {} : { "data-float": embedData.align };
+
   const altText = embedData.alt || "";
 
   const figureType = getFigureType(embedData.size, embedData.align);
@@ -172,7 +176,7 @@ const ImageEmbed = ({
   const isCopyrighted = data.copyright.license.license.toLowerCase() === COPYRIGHTED;
 
   return (
-    <StyledFigure type={imageSizes ? undefined : figureType} data-float={embedData.align}>
+    <StyledFigure type={imageSizes ? undefined : figureType} {...floatAttr}>
       {children}
       <ImageWrapper
         src={!isCopyrighted ? canonicalUrl?.(data) : undefined}

package/src/LicenseByline/EmbedByline.stories.tsx

@@ -63,8 +63,8 @@ export default {
   },
   argTypes: {
     children: {
-      control: {
-        type: null,
+      table: {
+        disable: true,
       },
     },
   },

package/src/all.scss

@@ -1,3 +1,2 @@
-@import '~@ndla/core/scss/core';
-@import './main';
-@import '~@ndla/core/scss/utilities';
+@import "~@ndla/core/scss/core";
+@import "~@ndla/core/scss/utilities";

package/src/index.ts

@@ -47,12 +47,12 @@ export {
   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";

package/src/locale/messages-en.ts

@@ -544,8 +544,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",
@@ -933,6 +935,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",
@@ -941,6 +944,7 @@ const messages = {
         unShare: "Sharing stopped. The folder is no longer shared",
         copyLink: "Copy link to folder",
         link: "Link is copied",
+        savedLink: "Link to {{ name }} has been added to My folders.",
         header: {
           shared: "This folder is shared",
         },
@@ -1187,6 +1191,7 @@ const messages = {
     copyFolderDisclaimer:
       "This creates a copy of the folder. Any changes made to the original folder will not be updated here.",
     loginCopyFolderPitch: "Do you wish to copy this folder?",
+    loginSaveFolderLinkPitch: "Do you wish to save the link to this shared folder?",
     help: "Help",
     more: "More options",
     selectView: "Select view",

package/src/locale/messages-nb.ts

@@ -544,8 +544,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",
@@ -933,6 +935,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",
@@ -941,6 +944,7 @@ const messages = {
         unShare: "Delingen er avsluttet. Mappen er ikke lenger delt.",
         copyLink: "Kopier lenke til mappa",
         link: "Lenken er kopiert",
+        savedLink: "Lenke til  {{ name }} er lagt til i Mine mapper.",
         header: {
           shared: "Denne mappa er delt",
         },
@@ -1187,6 +1191,7 @@ const messages = {
     copyFolderDisclaimer:
       "Dette lager en kopi av mappen. Eventuelle endringer i originalmappen vil ikke bli oppdatert her.",
     loginCopyFolderPitch: "Ønsker du å kopiere denne mappen?",
+    loginSaveFolderLinkPitch: "Ønsker du å lagre lenken til denne delte mappen?",
     help: "Hjelp",
     more: "Flere valg",
     selectView: "Velg visning",

package/src/locale/messages-nn.ts

@@ -544,8 +544,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",
@@ -933,6 +935,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",
@@ -940,6 +943,7 @@ const messages = {
         sharedFolder: "Delt mappe",
         unShare: "Delinga er avslutta. Mappa er ikkje lenger delt",
         link: "Lenka er kopiert",
+        savedLink: "Lenka til  {{ name }} er lagt til i Mine mapper.",
         copyLink: "Kopier lenke til mappa",
         header: {
           shared: "Denne mappa er delt",
@@ -1187,6 +1191,7 @@ const messages = {
     copyFolderDisclaimer:
       "Dette lagar ein kopi av mappa. Eventuelle endringar i originalmappa vil ikkje bli oppdatert her.",
     loginCopyFolderPitch: "Ønsker du å kopiere denne mappa?",
+    loginSaveFolderLinkPitch: "Ønsker du å lagra lenka til denne delte mappa?",
     help: "Hjelp",
     more: "Fleire val",
     selectView: "Velg visning",

package/src/locale/messages-se.ts

@@ -546,8 +546,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",
@@ -935,6 +937,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",
@@ -943,6 +946,7 @@ const messages = {
         unShare: "Delingen er avsluttet. Mappen er ikke lenger delt.",
         copyLink: "Kopier lenke til mappa",
         link: "Lenken er kopiert",
+        savedLink: "Lenke til  {{ name }} er lagt til i Mine mapper.",
         header: {
           shared: "Denne mappa er delt",
         },
@@ -1189,6 +1193,7 @@ const messages = {
     copyFolderDisclaimer:
       "Dette lager en kopi av mappen. Eventuelle endringer i originalmappen vil ikke bli oppdatert her.",
     loginCopyFolderPitch: "Ønsker du å kopiere denne mappen?",
+    loginSaveFolderLinkPitch: "Ønsker du å lagre lenken til denne delte mappen?",
     help: "Hjelp",
     more: "Flere valg",
     selectView: "Velg visning",

package/src/locale/messages-sma.ts

@@ -548,8 +548,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",
@@ -937,6 +939,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",
@@ -945,6 +948,7 @@ const messages = {
         unShare: "Delingen er avsluttet. Mappen er ikke lenger delt.",
         copyLink: "Kopier lenke til mappa",
         link: "Lenken er kopiert",
+        savedLink: "Lenke til  {{ name }} er lagt til i Mine mapper.",
         header: {
           shared: "Denne mappa er delt",
         },
@@ -1191,6 +1195,7 @@ const messages = {
     copyFolderDisclaimer:
       "Dette lager en kopi av mappen. Eventuelle endringer i originalmappen vil ikke bli oppdatert her.",
     loginCopyFolderPitch: "Ønsker du å kopiere denne mappen?",
+    loginSaveFolderLinkPitch: "Ønsker du å lagre lenken til denne delte mappen?",
     help: "Hjelp",
     more: "Flere valg",
     selectView: "Velg visning",