@ndla/ui 55.0.13-alpha.0 → 55.0.14-alpha.0

package/src/Embed/ConceptListEmbed.tsx

@@ -7,29 +7,32 @@
  */
 
 import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { colors } from "@ndla/core";
+import { Figure } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 import { ConceptListMetaData } from "@ndla/types-embed";
 import { BlockConcept } from "./ConceptEmbed";
-import { Figure } from "../Figure";
 
 interface Props {
   embed: ConceptListMetaData;
   lang?: string;
 }
 
-const ConceptList = styled.div`
-  & > figure:first-of-type {
-    margin-top: 32px;
-  }
-  & li {
-    display: block;
-  }
-`;
+// TODO: Find out if we're actually still going to use this.
+// If we are, we need to re-add some margin between the list items. We should also probably parse the concept content to HTML, like we do in ConceptEmbed.
+
+const ConceptList = styled("div", {
+  base: {
+    "& li": {
+      display: "block",
+    },
+  },
+});
 
-const StyledSpan = styled.span`
-  color: ${colors.support.red};
-`;
+const StyledSpan = styled("span", {
+  base: {
+    color: "text.error",
+  },
+});
 
 const ConceptListEmbed = ({ embed, lang }: Props) => {
   const { t } = useTranslation();
@@ -39,20 +42,18 @@ const ConceptListEmbed = ({ embed, lang }: Props) => {
   const { embedData, data } = embed;
   return (
     <div>
-      <Figure type="full">
+      <Figure>
         {embedData.title && <h2 lang={lang}>{embedData.title}</h2>}
         <ConceptList>
           <ul lang={lang}>
             {data.concepts.map(({ concept, visualElement }) => (
               <li key={concept.id}>
                 <BlockConcept
-                  title={concept.title}
+                  title={concept.title.title}
                   content={concept.content.content}
-                  metaImage={concept.metaImage}
                   copyright={concept.copyright}
-                  source={concept.source}
                   visualElement={visualElement}
-                  conceptType={concept.conceptType}
+                  lang={lang}
                 />
               </li>
             ))}

package/src/Embed/ContentLinkEmbed.tsx

@@ -8,27 +8,25 @@
 
 import { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { colors } from "@ndla/core";
+import { Text } from "@ndla/primitives";
 import { ContentLinkMetaData } from "@ndla/types-embed";
+
 interface Props {
   embed: ContentLinkMetaData;
   isOembed?: boolean;
   children?: ReactNode;
 }
 
-const StyledSpan = styled.span`
-  color: ${colors.support.red};
-`;
-
 const ContentLinkEmbed = ({ embed, isOembed, children }: Props) => {
   const { t } = useTranslation();
   if (embed.status === "error") {
     return (
-      <StyledSpan>
-        <span>{`${t("embed.linkError")}: `}</span>
-        {children}
-      </StyledSpan>
+      <Text color="text.error" asChild consumeCss>
+        <span>
+          <span>{`${t("embed.linkError")}: `}</span>
+          {children}
+        </span>
+      </Text>
     );
   }
 

package/src/Embed/CopyrightEmbed.tsx

@@ -7,7 +7,6 @@
  */
 
 import { ReactNode } from "react";
-import styled from "@emotion/styled";
 import { CopyrightMetaData } from "@ndla/types-embed";
 import { EmbedByline } from "../LicenseByline";
 
@@ -16,20 +15,11 @@ interface Props {
   children?: ReactNode;
 }
 
-const StyledFigCaption = styled.figcaption`
-  background: unset;
-  font-size: unset;
-  padding: unset;
-  color: unset;
-`;
-
 const CopyrightEmbed = ({ embed, children }: Props) => {
   return (
     <figure>
       {children}
-      <StyledFigCaption contentEditable={false}>
-        <EmbedByline type="copyright" copyright={embed.embedData.copyright} bottomRounded />
-      </StyledFigCaption>
+      <EmbedByline type="copyright" copyright={embed.embedData.copyright} bottomRounded />
     </figure>
   );
 };

package/src/Embed/ExternalEmbed.tsx

@@ -8,24 +8,26 @@
 
 import { useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
+import { Figure } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 import { OembedMetaData } from "@ndla/types-embed";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
-import { Figure } from "../Figure";
 import { ResourceBox } from "../ResourceBox";
 
 interface Props {
   embed: OembedMetaData;
-  isConcept?: boolean;
 }
 
-const StyledFigure = styled(Figure)`
-  iframe {
-    height: auto;
-  }
-`;
+const StyledFigure = styled(Figure, {
+  base: {
+    "& iframe": {
+      height: "auto",
+      width: "100%",
+    },
+  },
+});
 
-const ExternalEmbed = ({ embed, isConcept }: Props) => {
+const ExternalEmbed = ({ embed }: Props) => {
   const { t } = useTranslation();
   const figRef = useRef<HTMLElement>(null);
 
@@ -38,6 +40,7 @@ const ExternalEmbed = ({ embed, isConcept }: Props) => {
       iframe.height = "";
     }
   }, []);
+
   if (embed.status === "error") {
     return <EmbedErrorPlaceholder type="external" />;
   }
@@ -50,7 +53,7 @@ const ExternalEmbed = ({ embed, isConcept }: Props) => {
       alt: embedData.alt !== undefined ? embedData.alt : data.iframeImage?.alttext?.alttext ?? "",
     };
     return (
-      <Figure type="full">
+      <Figure>
         <ResourceBox
           image={image}
           title={embedData.title ?? ""}
@@ -62,13 +65,7 @@ const ExternalEmbed = ({ embed, isConcept }: Props) => {
     );
   }
 
-  return (
-    <StyledFigure
-      ref={figRef}
-      type={isConcept ? "full-column" : undefined}
-      dangerouslySetInnerHTML={{ __html: data.oembed.html ?? "" }}
-    />
-  );
+  return <StyledFigure ref={figRef} dangerouslySetInnerHTML={{ __html: data.oembed.html ?? "" }} />;
 };
 
 export default ExternalEmbed;

package/src/Embed/FootnoteEmbed.stories.tsx

@@ -99,11 +99,7 @@ const otherFootnoteMeta: FootnoteData = {
 export const WithSeveralFootnotes: StoryFn<typeof FootnoteEmbed> = ({ ...args }) => (
   <div>
     <p>
-      Her kan det ligge en fotnote
-      <FootnoteEmbed {...args} />
-    </p>
-    <p>
-      Her kan det ligge en til
+      Her kan det ligge en fotnote <FootnoteEmbed {...args} /> for eksempel. Her kan det ligge en til
       <FootnoteEmbed
         embed={{
           resource: "footnote",
@@ -112,6 +108,7 @@ export const WithSeveralFootnotes: StoryFn<typeof FootnoteEmbed> = ({ ...args })
           embedData: otherFootnoteEmbedData,
         }}
       />
+      .
     </p>
     <ArticleByline
       footnotes={

package/src/Embed/FootnoteEmbed.tsx

@@ -7,24 +7,21 @@
  */
 
 import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { spacing } from "@ndla/core";
+import { styled } from "@ndla/styled-system/jsx";
 import { FootnoteMetaData } from "@ndla/types-embed";
 
 interface Props {
   embed: FootnoteMetaData;
 }
 
-const FootnoteRef = styled.span`
-  sup {
-    a {
-      margin-left: -2px;
-      padding: ${spacing.small} ${spacing.xsmall};
-      box-shadow: none;
-      text-decoration: underline;
-    }
-  }
-`;
+const StyledSup = styled("sup", {
+  base: {
+    "& a": {
+      textStyle: "label.xsmall",
+      marginInlineStart: "1",
+    },
+  },
+});
 
 const FootnoteEmbed = ({ embed }: Props) => {
   const { t } = useTranslation();
@@ -33,11 +30,11 @@ const FootnoteEmbed = ({ embed }: Props) => {
   }
 
   return (
-    <FootnoteRef id={`ref${embed.data.entryNum}`}>
-      <sup>
+    <span id={`ref${embed.data.entryNum}`}>
+      <StyledSup>
         <a href={`#note${embed.data.entryNum}`} target="_self">{`[${embed.data.entryNum}]`}</a>
-      </sup>
-    </FootnoteRef>
+      </StyledSup>
+    </span>
   );
 };
 

package/src/Embed/GlossEmbed.stories.tsx

@@ -0,0 +1,140 @@
+/**
+ * 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 { Meta, StoryObj } from "@storybook/react";
+import { ConceptData, ConceptEmbedData } from "@ndla/types-embed";
+import { GlossEmbed } from "./GlossEmbed";
+
+const glossBlockEmbedData: ConceptEmbedData = {
+  contentId: "4942",
+  resource: "concept",
+  type: "block",
+  linkText: "",
+};
+
+const glossInlineEmbedData: ConceptEmbedData = {
+  contentId: "23",
+  linkText: "glose",
+  resource: "concept",
+  type: "inline",
+};
+
+const glossMetaData: ConceptData["concept"] = {
+  id: 4942,
+  revision: 6,
+  title: {
+    title: "Ma Hong",
+    language: "nb",
+  },
+  content: {
+    content: "Hei",
+    htmlContent: "Hei",
+    language: "nb",
+  },
+  copyright: {
+    creators: [],
+    processors: [],
+    rightsholders: [],
+    processed: false,
+  },
+  source: "",
+  metaImage: {
+    url: "",
+    alt: "",
+    language: "und",
+  },
+  created: "2023-07-19T09:30:40.000Z",
+  updated: "2023-09-19T17:13:56.573Z",
+  updatedBy: ["XxnkdI7rApMl58MeG3p4g4B8", "hd5ZL5Lm4kKkumWgN2gjy9wx"],
+  supportedLanguages: ["nb"],
+  articleIds: [],
+  status: {
+    current: "IN_PROGRESS",
+    other: [],
+  },
+  responsible: {
+    responsibleId: "XxnkdI7rApMl58MeG3p4g4B8",
+    lastUpdated: "2023-07-19T09:30:40.000Z",
+  },
+  conceptType: "gloss",
+  glossData: {
+    gloss: "马红",
+    wordClass: "personal-pronoun",
+    originalLanguage: "zh",
+    transcriptions: {},
+    examples: [
+      [
+        {
+          example: "我叫马红",
+          language: "zh",
+          transcriptions: {
+            pinyin: "wo jiao ma hong ",
+          },
+        },
+        {
+          example: "Jeg heter ma hong",
+          language: "nb",
+          transcriptions: {},
+        },
+      ],
+    ],
+  },
+};
+
+const glossBlockData: ConceptData = {
+  concept: glossMetaData,
+};
+
+export default {
+  title: "Embeds/GlossEmbed",
+  component: GlossEmbed,
+  tags: ["autodocs"],
+  render: (args) => <GlossEmbed {...args} />,
+} satisfies Meta<typeof GlossEmbed>;
+
+export const Block: StoryObj<typeof GlossEmbed> = {
+  args: {
+    embed: {
+      resource: "concept",
+      status: "success",
+      embedData: glossBlockEmbedData,
+      data: glossBlockData,
+    },
+  },
+};
+
+export const BlockFailed: StoryObj<typeof GlossEmbed> = {
+  args: {
+    embed: {
+      resource: "concept",
+      status: "error",
+      embedData: glossBlockEmbedData,
+    },
+  },
+};
+
+export const Inline: StoryObj<typeof GlossEmbed> = {
+  args: {
+    embed: {
+      resource: "concept",
+      status: "success",
+      embedData: glossInlineEmbedData,
+      data: glossBlockData,
+    },
+  },
+};
+
+export const InlineFailed: StoryObj<typeof GlossEmbed> = {
+  args: {
+    embed: {
+      resource: "concept",
+      status: "error",
+      embedData: glossInlineEmbedData,
+    },
+  },
+};

package/src/Embed/GlossEmbed.tsx

@@ -0,0 +1,64 @@
+/**
+ * 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 { Figure, PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+import { ConceptMetaData } from "@ndla/types-embed";
+import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
+import { InlineTriggerButton } from "./InlineTriggerButton";
+import { Gloss } from "../Gloss";
+
+interface Props {
+  embed: ConceptMetaData;
+}
+
+const StyledPopoverContent = styled(PopoverContent, {
+  base: {
+    width: "surface.xlarge",
+  },
+});
+
+export const GlossEmbed = ({ embed }: Props) => {
+  if (embed.status === "error" && embed.embedData.type === "inline") {
+    return <span>{embed.embedData.linkText}</span>;
+  }
+  if (embed.status === "error" || !embed.data.concept.glossData) {
+    return <EmbedErrorPlaceholder type="gloss" />;
+  }
+
+  const { concept, visualElement } = embed.data;
+
+  const audio =
+    visualElement?.status === "success" && visualElement.resource === "audio"
+      ? {
+          src: visualElement.data.audioFile.url,
+          title: visualElement.data.title.title,
+        }
+      : undefined;
+
+  if (embed.embedData.type === "inline") {
+    return (
+      <PopoverRoot>
+        <PopoverTrigger asChild>
+          <InlineTriggerButton>{embed.embedData.linkText}</InlineTriggerButton>
+        </PopoverTrigger>
+        <StyledPopoverContent>
+          <Figure>
+            <Gloss glossData={concept.glossData} title={concept.title} audio={audio} />
+          </Figure>
+        </StyledPopoverContent>
+      </PopoverRoot>
+    );
+  }
+
+  return (
+    <Figure>
+      <Gloss glossData={concept.glossData} title={concept.title} audio={audio} variant="bordered" />
+    </Figure>
+  );
+};

package/src/Embed/H5pEmbed.tsx

@@ -6,38 +6,44 @@
  *
  */
 
-import styled from "@emotion/styled";
+import { Figure } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 import { H5pMetaData } from "@ndla/types-embed";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
-import { Figure } from "../Figure";
 
 interface Props {
   embed: H5pMetaData;
-  isConcept?: boolean;
 }
 
-const StyledFigure = styled(Figure)`
-  iframe {
-    height: auto;
-  }
-`;
+const StyledFigure = styled(Figure, {
+  base: {
+    "& iframe": {
+      height: "auto",
+      width: "100%",
+    },
+  },
+});
+
+const FigureOembed = styled(Figure, {
+  base: {
+    width: "100%",
+    "& iframe": {
+      width: "100%",
+    },
+  },
+});
 
-const H5pEmbed = ({ embed, isConcept }: Props) => {
+const H5pEmbed = ({ embed }: Props) => {
   if (embed.status === "error") {
     return <EmbedErrorPlaceholder type="h5p" />;
   }
 
   if (embed.data.oembed) {
-    return (
-      <Figure
-        type={isConcept ? "full-column" : undefined}
-        dangerouslySetInnerHTML={{ __html: embed.data.oembed.html ?? "" }}
-      />
-    );
+    return <FigureOembed dangerouslySetInnerHTML={{ __html: embed.data.oembed.html ?? "" }} />;
   }
 
   return (
-    <StyledFigure type={isConcept ? "full-column" : undefined}>
+    <StyledFigure>
       <iframe title={embed.embedData.url} aria-label={embed.embedData.url} src={embed.embedData.url} />
     </StyledFigure>
   );

package/src/Embed/IframeEmbed.tsx

@@ -8,17 +8,23 @@
 
 import { useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
+import { Figure } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 import { IframeMetaData } from "@ndla/types-embed";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
-import { Figure } from "../Figure";
 import { ResourceBox } from "../ResourceBox";
 
 interface Props {
   embed: IframeMetaData;
-  isConcept?: boolean;
 }
 
-const IframeEmbed = ({ embed, isConcept }: Props) => {
+const StyledIframe = styled("iframe", {
+  base: {
+    width: "100%",
+  },
+});
+
+const IframeEmbed = ({ embed }: Props) => {
   const { t } = useTranslation();
   const iframeRef = useRef<HTMLIFrameElement>(null);
 
@@ -43,7 +49,7 @@ const IframeEmbed = ({ embed, isConcept }: Props) => {
     const alt = embedData.alt !== undefined ? embedData.alt : iframeImage?.alttext.alttext;
     const image = { src: iframeImage?.image.imageUrl ?? "", alt: alt ?? "" };
     return (
-      <Figure type="full">
+      <Figure>
         <ResourceBox
           image={image}
           title={embedData.title ?? ""}
@@ -62,8 +68,8 @@ const IframeEmbed = ({ embed, isConcept }: Props) => {
   const urlOrTitle = title || url;
 
   return (
-    <Figure type={isConcept ? "full-column" : undefined}>
-      <iframe
+    <Figure>
+      <StyledIframe
         ref={iframeRef}
         title={urlOrTitle}
         aria-label={urlOrTitle}

package/src/Embed/InlineTriggerButton.tsx

@@ -0,0 +1,72 @@
+/**
+ * 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 { ComponentPropsWithRef, KeyboardEvent, forwardRef, useCallback, useRef } from "react";
+import { styled } from "@ndla/styled-system/jsx";
+import { composeRefs } from "@ndla/util";
+
+const StyledSpan = styled("span", {
+  base: {
+    position: "relative",
+    overflow: "visible",
+    borderBottom: "1px solid",
+    borderStyle: "dashed",
+    borderColor: "stroke.hover",
+    paddingBlock: "4xsmall",
+    paddingInline: "4xsmall",
+    width: "fit-content",
+    cursor: "pointer",
+    _hover: {
+      borderColor: "text.link",
+      background: "surface.actionSubtle.hover",
+    },
+    _active: {
+      borderColor: "text.link",
+      background: "surface.actionSubtle.active",
+    },
+    // The global focus ring forces the border-radius to be xsmall, causing the dashed border to be cut off. This is a workaround.
+    _focusVisible: {
+      outline: "none",
+      borderRadius: "0",
+      _after: {
+        content: '""',
+        position: "absolute",
+        inset: "0",
+        outline: "3px",
+        borderRadius: "xsmall",
+        outlineColor: "stroke.default",
+        outlineOffset: "3px",
+        outlineStyle: "solid",
+      },
+    },
+  },
+});
+
+export const InlineTriggerButton = forwardRef<HTMLSpanElement, ComponentPropsWithRef<"span">>(
+  ({ onClick, ...props }, ref) => {
+    const spanRef = useRef<HTMLSpanElement>(null);
+
+    // Emulate a button click when pressing Enter or Space
+    const onKeyboardEvent = useCallback((event: KeyboardEvent<HTMLSpanElement>) => {
+      if (event.key === "Enter" || event.key === " ") {
+        spanRef.current?.click();
+      }
+    }, []);
+
+    return (
+      <StyledSpan
+        ref={composeRefs(spanRef, ref)}
+        onKeyUp={onKeyboardEvent}
+        onClick={onClick}
+        role="button"
+        tabIndex={0}
+        {...props}
+      />
+    );
+  },
+);

package/src/Embed/UnknownEmbed.tsx

@@ -7,21 +7,20 @@
  */
 
 import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { colors } from "@ndla/core";
+import { Text } from "@ndla/primitives";
 import { MetaData } from "@ndla/types-embed";
 
 interface Props {
   embed: MetaData<any, any>;
 }
 
-const StyledSpan = styled.span`
-  color: ${colors.support.red};
-`;
-
 const UnknownEmbed = ({ embed }: Props) => {
   const { t } = useTranslation();
-  return <StyledSpan>{t("embed.unsupported", { type: embed.resource })}</StyledSpan>;
+  return (
+    <Text color="text.error" asChild consumeCss>
+      <span>{t("embed.unsupported", { type: embed.resource })}</span>
+    </Text>
+  );
 };
 
 export default UnknownEmbed;