@ndla/ui 56.0.129-alpha.0 → 56.0.131-alpha.0

package/src/Embed/ConceptEmbed.tsx

@@ -7,7 +7,7 @@
  */
 
 import parse from "html-react-parser";
-import { forwardRef, useMemo, useRef } from "react";
+import { forwardRef, useMemo, useRef, type ReactNode } from "react";
 import { Portal } from "@ark-ui/react";
 import { PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
@@ -26,6 +26,7 @@ interface BaseProps {
 
 interface Props extends BaseProps {
   embed: ConceptMetaData;
+  children?: ReactNode;
 }
 
 const StyledPopoverContent = styled(PopoverContent, {
@@ -36,7 +37,7 @@ const StyledPopoverContent = styled(PopoverContent, {
   },
 });
 
-export const ConceptEmbed = ({ embed, renderContext, lang, previewAlt }: Props) => {
+export const ConceptEmbed = ({ embed, renderContext, lang, previewAlt, children }: Props) => {
   const parsedContent = useMemo(() => {
     if (embed.status === "error" || !embed.data.concept.content) return undefined;
     return parse(embed.data.concept.content.htmlContent);
@@ -48,7 +49,7 @@ export const ConceptEmbed = ({ embed, renderContext, lang, previewAlt }: Props)
   );
 
   if (embed.status === "error" && embed.embedData.type === "inline") {
-    return <span>{embed.embedData.linkText}</span>;
+    return <span>{children}</span>;
   }
   if (embed.status === "error") {
     // TODO: This could be either concept or gloss. We don't know if it errors out. :)
@@ -66,7 +67,7 @@ export const ConceptEmbed = ({ embed, renderContext, lang, previewAlt }: Props)
     return (
       <InlineConcept
         previewAlt={previewAlt}
-        linkText={embed.embedData.linkText}
+        linkContent={children}
         copyright={concept.copyright}
         visualElement={visualElement}
         lang={lang}
@@ -93,18 +94,18 @@ export const ConceptEmbed = ({ embed, renderContext, lang, previewAlt }: Props)
 };
 
 export interface InlineConceptProps extends ConceptProps, BaseProps {
-  linkText?: string;
+  linkContent?: ReactNode;
   source?: string;
 }
 
 export const InlineConcept = forwardRef<HTMLSpanElement, InlineConceptProps>(
-  ({ linkText, copyright, visualElement, previewAlt, lang, children, title, source, ...rest }, ref) => {
+  ({ linkContent, copyright, visualElement, previewAlt, lang, children, title, source, ...rest }, ref) => {
     const contentRef = useRef<HTMLDivElement>(null);
     return (
       <PopoverRoot initialFocusEl={() => contentRef.current}>
         {/* @ts-expect-error placing ref and rest on popover trigger somehow removes a bug where the popover target becomes a bit bigger */}
         <PopoverTrigger asChild ref={ref} {...rest}>
-          <ConceptInlineTriggerButton>{linkText}</ConceptInlineTriggerButton>
+          <ConceptInlineTriggerButton>{linkContent}</ConceptInlineTriggerButton>
         </PopoverTrigger>
         <Portal>
           <StyledPopoverContent ref={contentRef}>

package/src/Embed/GlossEmbed.stories.tsx

@@ -14,12 +14,10 @@ const glossBlockEmbedData: ConceptEmbedData = {
   contentId: "4942",
   resource: "concept",
   type: "block",
-  linkText: "",
 };
 
 const glossInlineEmbedData: ConceptEmbedData = {
   contentId: "23",
-  linkText: "glose",
   resource: "concept",
   type: "inline",
 };
@@ -89,6 +87,9 @@ export default {
   title: "Embeds/GlossEmbed",
   component: GlossEmbed,
   tags: ["autodocs"],
+  argTypes: {
+    children: { control: false },
+  },
   render: (args) => <GlossEmbed {...args} />,
 } satisfies Meta<typeof GlossEmbed>;
 
@@ -121,6 +122,7 @@ export const Inline: StoryObj<typeof GlossEmbed> = {
       embedData: glossInlineEmbedData,
       data: glossBlockData,
     },
+    children: "glose",
   },
 };
 
@@ -131,5 +133,6 @@ export const InlineFailed: StoryObj<typeof GlossEmbed> = {
       status: "error",
       embedData: glossInlineEmbedData,
     },
+    children: "glose",
   },
 };

package/src/Embed/GlossEmbed.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { useRef } from "react";
+import { useRef, type ReactNode } from "react";
 import { Portal } from "@ark-ui/react";
 import { Figure, PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
@@ -17,6 +17,7 @@ import { Gloss } from "../Gloss";
 
 interface Props {
   embed: ConceptMetaData;
+  children?: ReactNode;
 }
 
 const StyledPopoverContent = styled(PopoverContent, {
@@ -25,10 +26,10 @@ const StyledPopoverContent = styled(PopoverContent, {
   },
 });
 
-export const GlossEmbed = ({ embed }: Props) => {
+export const GlossEmbed = ({ embed, children }: Props) => {
   const contentRef = useRef<HTMLDivElement>(null);
   if (embed.status === "error" && embed.embedData.type === "inline") {
-    return <span>{embed.embedData.linkText}</span>;
+    return <span>{children}</span>;
   }
   if (embed.status === "error" || !embed.data.concept.glossData) {
     return <EmbedErrorPlaceholder type="gloss" />;
@@ -48,7 +49,7 @@ export const GlossEmbed = ({ embed }: Props) => {
     return (
       <PopoverRoot initialFocusEl={() => contentRef.current}>
         <PopoverTrigger asChild>
-          <ConceptInlineTriggerButton>{embed.embedData.linkText}</ConceptInlineTriggerButton>
+          <ConceptInlineTriggerButton>{children}</ConceptInlineTriggerButton>
         </PopoverTrigger>
         <Portal>
           <StyledPopoverContent ref={contentRef}>