@ndla/ui 51.0.0 → 53.0.0

package/src/Embed/ConceptEmbed.tsx

@@ -7,7 +7,7 @@
  */
 
 import parse from "html-react-parser";
-import { ReactElement, ReactNode, useCallback, useMemo, useRef, useState } from "react";
+import { ReactElement, ReactNode, forwardRef, useCallback, useMemo, useRef, useState } from "react";
 import { isMobile } from "react-device-detect";
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
@@ -82,8 +82,8 @@ const StyledButton = styled.button`
   font-family: inherit;
   font-style: inherit;
   line-height: 1em;
-  padding: 0 0 4px 0;
-  margin-bottom: -4px;
+  padding: 0 0 ${spacing.xxsmall} 0;
+  margin-bottom: -${spacing.xxsmall};
   text-decoration: none;
   color: #000;
   position: relative;
@@ -102,7 +102,8 @@ export const ConceptEmbed = ({ embed, fullWidth, heartButton: HeartButton, lang,
   }, [embed]);
   if (embed.status === "error" && embed.embedData.type === "inline") {
     return <span>{embed.embedData.linkText}</span>;
-  } else if (embed.status === "error") {
+  }
+  if (embed.status === "error") {
     return <EmbedErrorPlaceholder type="concept" />;
   }
 
@@ -129,7 +130,8 @@ export const ConceptEmbed = ({ embed, fullWidth, heartButton: HeartButton, lang,
         exampleLangs={embed.embedData.exampleLangs}
       />
     );
-  } else if (embed.embedData.type === "inline") {
+  }
+  if (embed.embedData.type === "inline") {
     return (
       <InlineConcept
         title={concept.title}
@@ -148,25 +150,24 @@ export const ConceptEmbed = ({ embed, fullWidth, heartButton: HeartButton, lang,
         exampleLangs={embed.embedData.exampleLangs}
       />
     );
-  } else {
-    return (
-      <ConceptNotionV2
-        title={concept.title}
-        content={parsedContent}
-        copyright={concept.copyright}
-        source={concept.source}
-        visualElement={visualElement}
-        heartButton={HeartButton}
-        conceptHeartButton={HeartButton && <HeartButton embed={embed} />}
-        conceptType={concept.conceptType}
-        glossData={concept.glossData}
-        lang={lang}
-        exampleIds={embed.embedData.exampleIds}
-        exampleLangs={embed.embedData.exampleLangs}
-        showTitle={renderContext !== "embed"}
-      />
-    );
   }
+  return (
+    <ConceptNotionV2
+      title={concept.title}
+      content={parsedContent}
+      copyright={concept.copyright}
+      source={concept.source}
+      visualElement={visualElement}
+      heartButton={HeartButton}
+      conceptHeartButton={HeartButton && <HeartButton embed={embed} />}
+      conceptType={concept.conceptType}
+      glossData={concept.glossData}
+      lang={lang}
+      exampleIds={embed.embedData.exampleIds}
+      exampleLangs={embed.embedData.exampleLangs}
+      showTitle={renderContext !== "embed"}
+    />
+  );
 };
 
 interface InlineConceptProps extends ConceptNotionData {
@@ -214,86 +215,92 @@ const StyledAnchorSpan = styled.span`
 `;
 
 const getModalPosition = (anchor: HTMLElement) => {
-  const article = anchor.closest(".c-article");
+  const article = anchor.closest("[data-ndla-article]");
   const articlePos = article?.getBoundingClientRect();
   const anchorPos = anchor.getBoundingClientRect();
   return anchorPos.top - (articlePos?.top || -window.scrollY) + 30; // add 30 so that position is under the word
 };
 
-export const InlineConcept = ({
-  title,
-  content,
-  copyright,
-  source,
-  visualElement,
-  linkText,
-  heartButton,
-  conceptHeartButton,
-  glossData,
-  conceptType,
-  headerButtons,
-  lang,
-  exampleIds,
-  exampleLangs,
-}: InlineConceptProps) => {
-  const { t } = useTranslation();
-  const anchorRef = useRef<HTMLDivElement>(null);
-  const [modalPos, setModalPos] = useState(-9999);
+export const InlineConcept = forwardRef<HTMLSpanElement, InlineConceptProps>(
+  (
+    {
+      title,
+      content,
+      copyright,
+      source,
+      visualElement,
+      linkText,
+      heartButton,
+      conceptHeartButton,
+      glossData,
+      conceptType,
+      headerButtons,
+      lang,
+      exampleIds,
+      exampleLangs,
+      ...rest
+    },
+    ref,
+  ) => {
+    const { t } = useTranslation();
+    const anchorRef = useRef<HTMLDivElement>(null);
+    const [modalPos, setModalPos] = useState(-9999);
 
-  const onOpenChange = useCallback((open: boolean) => {
-    if (open) {
-      const anchor = anchorRef.current;
-      if (anchor) {
-        const top = getModalPosition(anchor);
-        setModalPos(top);
+    const onOpenChange = useCallback((open: boolean) => {
+      if (open) {
+        const anchor = anchorRef.current;
+        if (anchor) {
+          const top = getModalPosition(anchor);
+          setModalPos(top);
+        }
+      } else {
+        setModalPos(-9999);
       }
-    } else {
-      setModalPos(-9999);
-    }
-  }, []);
+    }, []);
 
-  return (
-    <Root modal={isMobile} onOpenChange={onOpenChange}>
-      <StyledAnchor ref={anchorRef} asChild>
-        <StyledAnchorSpan contentEditable={false} />
-      </StyledAnchor>
-      <Trigger asChild type={undefined}>
-        <NotionButton role={"button"} data-open={modalPos !== -9999} tabIndex={0}>
-          {linkText}
-        </NotionButton>
-      </Trigger>
-      <Portal container={(anchorRef.current?.closest(".c-article") as HTMLElement | null) || undefined}>
-        <PopoverWrapper top={modalPos}>
-          <Content avoidCollisions={false} side="bottom" asChild>
-            <ConceptNotionV2
-              title={title}
-              content={content}
-              copyright={copyright}
-              source={source}
-              visualElement={visualElement}
-              inPopover
-              heartButton={heartButton}
-              headerButtons={headerButtons}
-              conceptHeartButton={conceptHeartButton}
-              lang={lang}
-              closeButton={
-                <Close asChild>
-                  <IconButtonV2 aria-label={t("close")} variant="ghost">
-                    <Cross />
-                  </IconButtonV2>
-                </Close>
-              }
-              conceptType={conceptType}
-              glossData={glossData}
-              exampleIds={exampleIds}
-              exampleLangs={exampleLangs}
-            />
-          </Content>
-        </PopoverWrapper>
-      </Portal>
-    </Root>
-  );
-};
+    return (
+      <Root modal={isMobile} onOpenChange={onOpenChange}>
+        <StyledAnchor ref={anchorRef} asChild>
+          <StyledAnchorSpan contentEditable={false} />
+        </StyledAnchor>
+        <Trigger asChild type={undefined}>
+          <NotionButton role="button" data-open={modalPos !== -9999} tabIndex={0} ref={ref} {...rest}>
+            {linkText}
+          </NotionButton>
+        </Trigger>
+        <Portal container={(anchorRef.current?.closest("[data-ndla-article]") as HTMLElement | null) || undefined}>
+          <PopoverWrapper top={modalPos}>
+            <Content avoidCollisions={false} side="bottom" asChild>
+              <ConceptNotionV2
+                title={title}
+                content={content}
+                copyright={copyright}
+                source={source}
+                visualElement={visualElement}
+                inPopover
+                heartButton={heartButton}
+                headerButtons={headerButtons}
+                conceptHeartButton={conceptHeartButton}
+                lang={lang}
+                closeButton={
+                  <Close asChild>
+                    <IconButtonV2 aria-label={t("close")} variant="ghost">
+                      <Cross />
+                    </IconButtonV2>
+                  </Close>
+                }
+                conceptType={conceptType}
+                glossData={glossData}
+                exampleIds={exampleIds}
+                exampleLangs={exampleLangs}
+              />
+            </Content>
+          </PopoverWrapper>
+        </Portal>
+      </Root>
+    );
+  },
+);
 
 interface ConceptProps extends ConceptNotionData {
   fullWidth?: boolean;
@@ -380,7 +387,7 @@ export const BlockConcept = ({
                   <Portal
                     container={
                       typeof document !== "undefined"
-                        ? (document.querySelector(".c-article") as HTMLElement | null) || undefined
+                        ? (document.querySelector("[data-ndla-article]") as HTMLElement | null) || undefined
                         : undefined
                     }
                   >

package/src/Embed/ExternalEmbed.stories.tsx

@@ -9,6 +9,8 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { OembedEmbedData, OembedData } from "@ndla/types-embed";
 import ExternalEmbed from "./ExternalEmbed";
+import { ArticleWrapper } from "../Article";
+import { OneColumn } from "../Layout";
 
 const embedData: OembedEmbedData = {
   resource: "external",
@@ -53,15 +55,15 @@ const meta: Meta<typeof ExternalEmbed> = {
   tags: ["autodocs"],
   decorators: [
     (Story) => (
-      <div className="o-wrapper">
-        <article className="c-article c-article--clean">
+      <OneColumn>
+        <ArticleWrapper modifier="clean">
           <section className="u-4/6@desktop u-push-1/6@desktop u-10/12@tablet u-push-1/12@tablet">
             <section>
               <Story />
             </section>
           </section>
-        </article>
-      </div>
+        </ArticleWrapper>
+      </OneColumn>
     ),
   ],
 };

package/src/Embed/ExternalEmbed.tsx

@@ -30,9 +30,9 @@ const ExternalEmbed = ({ embed, isConcept }: Props) => {
   const figRef = useRef<HTMLElement>(null);
 
   useEffect(() => {
-    const iframe = figRef.current?.querySelector(`iframe`);
+    const iframe = figRef.current?.querySelector("iframe");
     if (iframe) {
-      const [width, height] = [parseInt(iframe.width), parseInt(iframe.height)];
+      const [width, height] = [Number.parseInt(iframe.width), Number.parseInt(iframe.height)];
       iframe.style.aspectRatio = `${width ? width : 16}/${height ? height : 9}`;
       iframe.width = "";
       iframe.height = "";

package/src/Embed/H5pEmbed.stories.tsx

@@ -9,6 +9,8 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { H5pEmbedData, H5pData } from "@ndla/types-embed";
 import H5pEmbed from "./H5pEmbed";
+import { ArticleWrapper } from "../Article";
+import { OneColumn } from "../Layout";
 
 const embedData: H5pEmbedData = {
   resource: "h5p",
@@ -50,15 +52,15 @@ const meta: Meta<typeof H5pEmbed> = {
   tags: ["autodocs"],
   decorators: [
     (Story) => (
-      <div className="o-wrapper">
-        <article className="c-article c-article--clean">
+      <OneColumn>
+        <ArticleWrapper modifier="clean">
           <section className="u-4/6@desktop u-push-1/6@desktop u-10/12@tablet u-push-1/12@tablet">
             <section>
               <Story />
             </section>
           </section>
-        </article>
-      </div>
+        </ArticleWrapper>
+      </OneColumn>
     ),
   ],
 };

package/src/Embed/IframeEmbed.stories.tsx

@@ -9,6 +9,8 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { IframeData, IframeEmbedData } from "@ndla/types-embed";
 import IframeEmbed from "./IframeEmbed";
+import { ArticleWrapper } from "../Article";
+import { OneColumn } from "../Layout";
 
 const embedData: IframeEmbedData = {
   width: "708px",
@@ -25,15 +27,15 @@ const meta: Meta<typeof IframeEmbed> = {
   tags: ["autodocs"],
   decorators: [
     (Story) => (
-      <div className="o-wrapper">
-        <article className="c-article c-article--clean">
+      <OneColumn>
+        <ArticleWrapper modifier="clean">
           <section className="u-4/6@desktop u-push-1/6@desktop u-10/12@tablet u-push-1/12@tablet">
             <section>
               <Story />
             </section>
           </section>
-        </article>
-      </div>
+        </ArticleWrapper>
+      </OneColumn>
     ),
   ],
 };

package/src/Embed/IframeEmbed.tsx

@@ -25,7 +25,7 @@ const IframeEmbed = ({ embed, isConcept }: Props) => {
   useEffect(() => {
     const iframe = iframeRef.current;
     if (iframe) {
-      const [width, height] = [parseInt(iframe.width), parseInt(iframe.height)];
+      const [width, height] = [Number.parseInt(iframe.width), Number.parseInt(iframe.height)];
       iframe.style.aspectRatio = `${width ? width : 16}/${height ? height : 9}`;
       iframe.width = "";
       iframe.height = "";

package/src/Embed/ImageEmbed.stories.tsx

@@ -12,6 +12,8 @@ import { IImageMetaInformationV3 } from "@ndla/types-backend/image-api";
 import { ImageEmbedData } from "@ndla/types-embed";
 import ImageEmbed from "./ImageEmbed";
 import StoryFavoriteButton from "../../../../stories/StoryFavoriteButton";
+import { ArticleWrapper } from "../Article";
+import { OneColumn } from "../Layout";
 
 const embedData: ImageEmbedData = {
   resource: "image",
@@ -92,15 +94,15 @@ const meta: Meta<typeof ImageEmbed> = {
   },
   decorators: [
     (Story) => (
-      <div className="o-wrapper">
-        <article className="c-article c-article--clean">
+      <OneColumn>
+        <ArticleWrapper modifier="clean">
           <section className="u-4/6@desktop u-push-1/6@desktop u-10/12@tablet u-push-1/12@tablet">
             <section>
               <Story />
             </section>
           </section>
-        </article>
-      </div>
+        </ArticleWrapper>
+      </OneColumn>
     ),
   ],
 };

package/src/Embed/ImageEmbed.tsx

@@ -82,20 +82,25 @@ const getSizes = (size?: string, align?: string) => {
 };
 
 export const getFocalPoint = (data: ImageEmbedData) => {
-  const focalX = parseFloat(data.focalX ?? "");
-  const focalY = parseFloat(data.focalY ?? "");
-  if (!isNaN(focalX) && !isNaN(focalY)) {
+  const focalX = Number.parseFloat(data.focalX ?? "");
+  const focalY = Number.parseFloat(data.focalY ?? "");
+  if (!Number.isNaN(focalX) && !Number.isNaN(focalY)) {
     return { x: focalX, y: focalY };
   }
   return undefined;
 };
 
 export const getCrop = (data: ImageEmbedData) => {
-  const lowerRightX = parseFloat(data.lowerRightX ?? "");
-  const lowerRightY = parseFloat(data.lowerRightY ?? "");
-  const upperLeftX = parseFloat(data.upperLeftX ?? "");
-  const upperLeftY = parseFloat(data.upperLeftY ?? "");
-  if (!isNaN(lowerRightX) && !isNaN(lowerRightY) && !isNaN(upperLeftX) && !isNaN(upperLeftY)) {
+  const lowerRightX = Number.parseFloat(data.lowerRightX ?? "");
+  const lowerRightY = Number.parseFloat(data.lowerRightY ?? "");
+  const upperLeftX = Number.parseFloat(data.upperLeftX ?? "");
+  const upperLeftY = Number.parseFloat(data.upperLeftY ?? "");
+  if (
+    !Number.isNaN(lowerRightX) &&
+    !Number.isNaN(lowerRightY) &&
+    !Number.isNaN(upperLeftX) &&
+    !Number.isNaN(upperLeftY)
+  ) {
     return {
       startX: lowerRightX,
       startY: lowerRightY,
@@ -142,7 +147,8 @@ const ImageEmbed = ({
   const parsedDescription = useMemo(() => {
     if (embed.embedData.caption || renderContext === "article") {
       return embed.embedData.caption ? parse(embed.embedData.caption) : undefined;
-    } else if (embed.status === "success" && embed.data.caption.caption) {
+    }
+    if (embed.status === "success" && embed.data.caption.caption) {
       return parse(embed.data.caption.caption);
     }
   }, [embed, renderContext]);
@@ -286,7 +292,8 @@ const ExpandButton = ({ size, expanded, bylineHidden, onExpand, onHideByline }:
         {expanded ? <ArrowCollapse /> : <ExpandTwoArrows />}
       </button>
     );
-  } else if (hideByline(size)) {
+  }
+  if (hideByline(size)) {
     return (
       <BylineButton
         type="button"
@@ -297,7 +304,8 @@ const ExpandButton = ({ size, expanded, bylineHidden, onExpand, onHideByline }:
         {bylineHidden ? <ChevronDown /> : <ChevronUp />}
       </BylineButton>
     );
-  } else return null;
+  }
+  return null;
 };
 
 export default ImageEmbed;

package/src/Embed/RelatedContentEmbed.stories.tsx

@@ -9,6 +9,8 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { RelatedContentMetaData } from "@ndla/types-embed";
 import RelatedContentEmbed from "./RelatedContentEmbed";
+import { ArticleWrapper } from "../Article";
+import { OneColumn } from "../Layout";
 import RelatedArticleList from "../RelatedArticleList";
 
 const filmResourceMeta: RelatedContentMetaData = {
@@ -365,15 +367,15 @@ const meta: Meta<typeof RelatedContentEmbed> = {
   tags: ["autodocs"],
   decorators: [
     (Story) => (
-      <div className="o-wrapper">
-        <article className="c-article c-article--clean">
+      <OneColumn>
+        <ArticleWrapper modifier="clean">
           <section className="u-4/6@desktop u-push-1/6@desktop u-10/12@tablet u-push-1/12@tablet">
             <section>
               <Story />
             </section>
           </section>
-        </article>
-      </div>
+        </ArticleWrapper>
+      </OneColumn>
     ),
   ],
 };

package/src/Embed/RelatedContentEmbed.tsx

@@ -42,7 +42,8 @@ const RelatedContentEmbed = ({ embed, isOembed, subject, ndlaFrontendDomain }: P
         type={type}
       />
     );
-  } else if (typeof embedData.url === "string") {
+  }
+  if (typeof embedData.url === "string") {
     return (
       <RelatedArticle
         title={embedData.title ?? ""}
@@ -56,9 +57,8 @@ const RelatedContentEmbed = ({ embed, isOembed, subject, ndlaFrontendDomain }: P
         }`}
       />
     );
-  } else {
-    return <></>;
   }
+  return <></>;
 };
 
 export default RelatedContentEmbed;

package/src/Embed/UuDisclaimerEmbed.stories.tsx

@@ -11,8 +11,11 @@ import { UuDisclaimerEmbedData } from "@ndla/types-embed";
 import H5pEmbed from "./H5pEmbed";
 import IframeEmbed from "./IframeEmbed";
 import UuDisclaimerEmbed from "./UuDisclaimerEmbed";
+import { ArticleWrapper } from "../Article";
+import CopyParagraphButton from "../CopyParagraphButton";
 import FactBox from "../FactBox";
 import FramedContent from "../FramedContent";
+import { OneColumn } from "../Layout";
 
 const embedData: UuDisclaimerEmbedData = {
   resource: "uu-disclaimer",
@@ -26,15 +29,15 @@ const meta: Meta<typeof UuDisclaimerEmbed> = {
   tags: ["autodocs"],
   decorators: [
     (Story) => (
-      <div className="o-wrapper">
-        <article className="c-article c-article--clean">
+      <OneColumn>
+        <ArticleWrapper modifier="clean">
           <section className="u-4/6@desktop u-push-1/6@desktop u-10/12@tablet u-push-1/12@tablet">
             <section>
               <Story />
             </section>
           </section>
-        </article>
-      </div>
+        </ArticleWrapper>
+      </OneColumn>
     ),
   ],
 };
@@ -180,3 +183,19 @@ export const WithFactBox: StoryObj<typeof UuDisclaimerEmbed> = {
     ),
   },
 };
+
+export const WithCopyParagraphLink: StoryObj<typeof UuDisclaimerEmbed> = {
+  args: {
+    embed: {
+      resource: "uu-disclaimer",
+      status: "success",
+      embedData: embedData,
+      data: {},
+    },
+    children: (
+      <CopyParagraphButton copyText="Dette er en overskrift" lang="no">
+        <h2>Dette er en overskrift</h2>
+      </CopyParagraphButton>
+    ),
+  },
+};

package/src/Embed/UuDisclaimerEmbed.tsx

@@ -58,7 +58,7 @@ const UuDisclaimerEmbed = ({ embed, children }: Props) => {
 
   return (
     <DisclaimerWrapper role="region">
-      <StyledMessageBox type="info">
+      <StyledMessageBox type="info" contentEditable={false}>
         <InformationOutline />
         <Disclaimer>
           {embedData.disclaimer}

package/src/Embed/conceptComponents.tsx

@@ -95,6 +95,7 @@ const notionContentCss = css`
   }
   ${mq.range({ from: breakpoints.desktop })} {
     width: 720px;
+    max-width: 60vw;
   }
 
   ${mq.range({ until: breakpoints.tablet })} {