@ndla/ui 51.0.0 → 53.0.0

package/src/Article/Article.tsx

@@ -6,37 +6,139 @@
  *
  */
 
-import { ReactNode, useEffect, useRef, useState, forwardRef } 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 ArticleAccessMessage from "./ArticleAccessMessage";
 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";
 
-type ArticleWrapperProps = {
-  modifier?: string;
-  children: ReactNode;
+interface ArticleWrapperProps extends ComponentPropsWithRef<"article"> {
+  modifier?: ArticleModifier;
+}
+
+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;
+    }
+  `,
 };
 
-export const ArticleWrapper = forwardRef<HTMLElement, ArticleWrapperProps>(({ children, modifier }, ref) => (
-  <article {...classes(undefined, modifier)} ref={ref}>
-    {children}
-  </article>
-));
+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}
+    </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,30 +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;
-  accessMessage?: string;
   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,
@@ -141,82 +240,43 @@ export const Article = ({
   children,
   competenceGoals,
   id,
-  notions,
-  accessMessage,
   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 && entry.isIntersecting;
-
-  useEffect(() => {
-    if (wrapperRef && wrapperRef.current) {
-      const handler = () => {
-        if (wrapperRef && 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}>
-        <LayoutItem layout="center">
-          {accessMessage && <ArticleAccessMessage message={accessMessage} />}
-
-          {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

@@ -6,36 +6,32 @@
  *
  */
 
-import { ReactNode, useEffect } from "react";
-import BEMHelper from "react-bem-helper";
-import { isMobile } from "react-device-detect";
-
-const classes = new BEMHelper({
-  name: "article",
-  prefix: "c-",
-});
+import { ReactNode } from "react";
+import styled from "@emotion/styled";
+import { breakpoints, mq, spacing } from "@ndla/core";
 
 type Props = {
   competenceGoals?: ReactNode;
   children: ReactNode;
 };
 
-const ArticleHeaderWrapper = ({ children, competenceGoals }: Props) => {
-  useEffect(() => {
-    if (isMobile) {
-      const heroContentList: NodeListOf<HTMLElement> = document.querySelectorAll(".c-article__header");
-      if (heroContentList.length === 1) {
-        heroContentList[0].scrollIntoView(true);
-        window.scrollBy(0, heroContentList[0].offsetTop - 120); // Adjust for header
-      }
-    }
-  }, []);
+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/ArticleParagraph.tsx

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2024-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 { ComponentPropsWithoutRef, ReactNode } from "react";
+import styled from "@emotion/styled";
+
+interface Props extends ComponentPropsWithoutRef<"p"> {
+  children?: ReactNode;
+}
+
+const StyledParagraph = styled.p`
+  &[data-align="center"] {
+    text-align: center;
+  }
+`;
+
+export const ArticleParagraph = (props: Props) => <StyledParagraph {...props} />;

package/src/Article/index.ts

@@ -12,4 +12,8 @@ import ArticleFootNotes from "./ArticleFootNotes";
 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/AudioPlayer/AudioPlayer.tsx

@@ -120,7 +120,7 @@ const TextVersionHeading = styled(Heading)`
 const LinkButton = styled(ButtonV2)`
   box-shadow: none;
   padding-left: 0;
-  padding-right: 4px;
+  padding-right: ${spacing.xxsmall};
   min-height: ${spacing.medium};
   flex: 0 0 auto;
   &:hover,
@@ -200,7 +200,7 @@ const AudioPlayer = ({ src, title, subtitle, speech, description, img, textVersi
         <TextWrapper data-has-image={!!img}>
           <TitleWrapper>
             <div>
-              {subtitle && subtitle.url ? <SafeLink to={subtitle.url}>{subtitle.title}</SafeLink> : subtitle?.title}
+              {subtitle?.url ? <SafeLink to={subtitle.url}>{subtitle.title}</SafeLink> : subtitle?.title}
               <Title element="h3" headingStyle="h4" margin="none" data-has-desc={!!description}>
                 {title}
               </Title>

package/src/AudioPlayer/Controls.tsx

@@ -12,7 +12,7 @@ import styled from "@emotion/styled";
 import { Root as PopoverRoot, PopoverContent, PopoverTrigger, PopoverPortal } from "@radix-ui/react-popover";
 import { Root as SliderRoot, Track, Range, SliderThumb } from "@radix-ui/react-slider";
 import { ButtonV2, IconButtonV2 } from "@ndla/button";
-import { breakpoints, colors, fonts, mq, spacing, stackOrder } from "@ndla/core";
+import { breakpoints, colors, fonts, misc, mq, spacing, stackOrder } from "@ndla/core";
 import { DropdownMenu, DropdownContent, DropdownItem, DropdownTrigger } from "@ndla/dropdown-menu";
 import { Back15, Forward15 } from "@ndla/icons/action";
 import { Play, Pause, VolumeUp } from "@ndla/icons/common";
@@ -82,11 +82,11 @@ const SpeedValueButton = styled(ButtonV2)`
 
 const SpeedSelectedMark = styled.span`
   align-self: flex-start;
-  border-radius: 50%;
+  border-radius: ${misc.borderRadiusLarge};
   background: #d1372e;
   width: 6px;
   height: 6px;
-  margin: 6px 0 0 2px;
+  margin: ${spacing.xsmall} 0 0 2px;
 `;
 
 const Time = styled.div`
@@ -132,7 +132,7 @@ const StyledThumb = styled(SliderThumb)`
   width: 20px;
   height: 20px;
   background: #5cbc80;
-  border-radius: 50%;
+  border-radius: ${misc.borderRadiusLarge};
   outline: none;
 `;
 
@@ -188,7 +188,7 @@ const VolumeSliderHandle = styled(SliderThumb)`
   width: 20px;
   height: 20px;
   background: ${colors.brand.primary};
-  border-radius: 50%;
+  border-radius: ${misc.borderRadiusLarge};
 `;
 
 const formatTime = (seconds: number) => {

package/src/Breadcrumb/Breadcrumb.stories.tsx

@@ -50,10 +50,6 @@ export const CollapseLast: StoryObj<typeof Breadcrumb> = {
   args: { collapseLast: true },
 };
 
-export const AutoCollapse: StoryObj<typeof Breadcrumb> = {
-  args: { autoCollapse: true },
-};
-
 export const CustomSeparator: StoryObj<typeof Breadcrumb> = {
   args: {
     renderSeparator: (item, totalCount) => (

package/src/Breadcrumb/Breadcrumb.tsx

@@ -9,12 +9,10 @@
 import { ReactNode, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
-import { useComponentSize, useIsomorphicLayoutEffect } from "@ndla/hooks";
 import BreadcrumbItem, { IndexedBreadcrumbItem, SimpleBreadcrumbItem } from "./BreadcrumbItem";
 
 interface Props {
   items: SimpleBreadcrumbItem[];
-  autoCollapse?: boolean;
   collapseFirst?: boolean;
   collapseLast?: boolean;
   renderItem?: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;
@@ -31,50 +29,18 @@ const StyledList = styled.ol`
   list-style: none;
 `;
 
-const Breadcrumb = ({
-  items,
-  autoCollapse,
-  renderItem,
-  renderSeparator,
-  collapseFirst,
-  collapseLast = true,
-}: Props) => {
+const Breadcrumb = ({ items, renderItem, renderSeparator, collapseFirst, collapseLast = true }: Props) => {
   const { t } = useTranslation();
   const olRef = useRef<any>();
   const containerRef = useRef<HTMLDivElement>(null);
   // No idiomatic way of dealing with sets of refs yet
   // See: https://github.com/facebook/react/issues/14072#issuecomment-446777406
-  const breadcrumbItemRefs = useRef(new Map()).current;
-  const size = useComponentSize(containerRef);
-
-  useIsomorphicLayoutEffect(() => {
-    if (!autoCollapse) {
-      return;
-    }
-    // Create an array of all breadcrumb item refs
-    const items = Array.from(breadcrumbItemRefs).map(([key, value]) => value);
-
-    // Clear max width on all items
-    items.forEach((el) => {
-      el.setMaxWidth("none");
-    });
-
-    // Set maxWidth on breadcrumb text items iteratively until
-    // the ordered list fits on a single line. It's on a single line
-    // if the height of the list is less then 70.
-    items.forEach((el) => {
-      if (olRef.current.offsetHeight > 60) {
-        el.setMaxWidth("40px");
-      }
-    });
-  }, [size, items]);
 
   return (
     <BreadcrumbNav ref={containerRef} aria-label={t("breadcrumb.breadcrumb")}>
       <StyledList ref={olRef}>
         {items.map((item, index) => (
           <BreadcrumbItem
-            autoCollapse={autoCollapse}
             renderItem={renderItem}
             renderSeparator={renderSeparator}
             ref={(element) => {
@@ -86,9 +52,6 @@ const Breadcrumb = ({
                 if (element) {
                   element.setMaxWidth("none");
                 }
-                breadcrumbItemRefs.delete(item.to);
-              } else {
-                breadcrumbItemRefs.set(item.to, element);
               }
             }}
             key={typeof item.to === "string" ? item.to : item.to.pathname}

package/src/Breadcrumb/BreadcrumbItem.tsx

@@ -7,7 +7,6 @@
  */
 
 import { useRef, useImperativeHandle, ReactNode, forwardRef } from "react";
-import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { mq, spacing, breakpoints } from "@ndla/core";
 import { ChevronRight } from "@ndla/icons/common";
@@ -38,27 +37,14 @@ const StyledListItem = styled.li<AutoCollapseProps>`
   :before {
     display: none;
   }
-
-  ${({ autoCollapse }) =>
-    !autoCollapse &&
-    css`
-      ${mq.range({ until: breakpoints.tablet })} {
-        display: block;
-      }
-    `}
+  ${mq.range({ until: breakpoints.tablet })} {
+    display: block;
+  }
 `;
 
-const CollapseContainer = styled.div<AutoCollapseProps>`
+const CollapseContainer = styled.div`
   display: inline-block;
   color: inherit;
-  ${({ autoCollapse }) =>
-    autoCollapse &&
-    css`
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-      display: inline-block;
-    `}
 `;
 
 const StyledChevron = styled(ChevronRight)`
@@ -92,7 +78,7 @@ const BreadcrumbItem = forwardRef<any, Props>(
     const isLast = index === totalCount - 1;
     return (
       <StyledListItem ref={liRef} autoCollapse={autoCollapse} aria-current={isLast ? "page" : undefined}>
-        <CollapseContainer autoCollapse={autoCollapse}>
+        <CollapseContainer>
           {renderItem ? (
             renderItem(item, totalCount)
           ) : isLast ? (

package/src/Breadcrumb/index.ts

@@ -10,8 +10,6 @@ import Breadcrumb from "./Breadcrumb";
 
 export type { SimpleBreadcrumbItem, IndexedBreadcrumbItem } from "./BreadcrumbItem";
 
-export { default as HeaderBreadcrumb } from "./HeaderBreadcrumb";
-
 export { default as HomeBreadcrumb } from "./HomeBreadcrumb";
 
 export default Breadcrumb;