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

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;

package/src/Embed/UuDisclaimerEmbed.stories.tsx

@@ -7,6 +7,7 @@
  */
 
 import { Meta, StoryObj } from "@storybook/react";
+import { ExpandableBox, ExpandableBoxSummary, FramedContent } from "@ndla/primitives";
 import { UuDisclaimerEmbedData } from "@ndla/types-embed";
 import H5pEmbed from "./H5pEmbed";
 import IframeEmbed from "./IframeEmbed";
@@ -14,7 +15,6 @@ import UuDisclaimerEmbed from "./UuDisclaimerEmbed";
 import { ArticleWrapper } from "../Article";
 import CopyParagraphButton from "../CopyParagraphButton";
 import FactBox from "../FactBox";
-import FramedContent from "../FramedContent";
 import LayoutItem, { OneColumn } from "../Layout";
 
 const embedData: UuDisclaimerEmbedData = {
@@ -143,10 +143,10 @@ export const WithHtml: StoryObj<typeof UuDisclaimerEmbed> = {
     children: (
       <>
         <p>Dette er html med en ekspanderboks</p>
-        <details>
-          <summary>Tittel</summary>
+        <ExpandableBox>
+          <ExpandableBoxSummary>Tittel</ExpandableBoxSummary>
           <p>innhold</p>
-        </details>
+        </ExpandableBox>
       </>
     ),
   },

package/src/Embed/UuDisclaimerEmbed.tsx

@@ -8,36 +8,28 @@
 
 import { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { fonts, spacing } from "@ndla/core";
 import { InformationOutline } from "@ndla/icons/common";
+import { MessageBox } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
+import { styled } from "@ndla/styled-system/jsx";
 import { UuDisclaimerMetaData } from "@ndla/types-embed";
-import { MessageBox } from "../Messages";
+
 interface Props {
   embed: UuDisclaimerMetaData;
   children?: ReactNode;
 }
 
-const StyledMessageBox = styled(MessageBox)`
-  display: flex;
-  flex-align: center;
-`;
-
-const Disclaimer = styled.div`
-  display: flow;
-  ${fonts.sizes("18px", "24px")};
-  user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-`;
-
-const DisclaimerWrapper = styled.div`
-  > :nth-child(2) {
-    margin-top: ${spacing.xsmall};
-  }
-`;
+const StyledMessageBox = styled(MessageBox, {
+  base: {
+    display: "flex",
+    alignItems: "center",
+  },
+});
+const Disclaimer = styled("div", {
+  base: {
+    textStyle: "body.medium",
+  },
+});
 
 const UuDisclaimerEmbed = ({ embed, children }: Props) => {
   const { t } = useTranslation();
@@ -58,8 +50,8 @@ const UuDisclaimerEmbed = ({ embed, children }: Props) => {
   ) : null;
 
   return (
-    <DisclaimerWrapper role="region">
-      <StyledMessageBox type="info" contentEditable={false}>
+    <div role="region">
+      <StyledMessageBox variant="warning" contentEditable={false}>
         <InformationOutline />
         <Disclaimer>
           {embedData.disclaimer}
@@ -67,7 +59,7 @@ const UuDisclaimerEmbed = ({ embed, children }: Props) => {
         </Disclaimer>
       </StyledMessageBox>
       {children}
-    </DisclaimerWrapper>
+    </div>
   );
 };
 

package/src/Embed/index.ts

@@ -15,11 +15,10 @@ export { default as FootnoteEmbed } from "./FootnoteEmbed";
 export { default as BrightcoveEmbed } from "./BrightcoveEmbed";
 export { default as ContentLinkEmbed } from "./ContentLinkEmbed";
 export { default as RelatedContentEmbed } from "./RelatedContentEmbed";
-export { default as ConceptEmbed } from "./ConceptEmbed";
-export { ConceptNotionV2 } from "./conceptComponents";
+export { ConceptEmbed, InlineConcept, BlockConcept } from "./ConceptEmbed";
+export type { InlineConceptProps, BlockConceptProps } from "./ConceptEmbed";
 export { default as ConceptListEmbed } from "./ConceptListEmbed";
 export { default as UnknownEmbed } from "./UnknownEmbed";
-export { InlineConcept, BlockConcept } from "./ConceptEmbed";
 export { default as UuDisclaimerEmbed } from "./UuDisclaimerEmbed";
 export { default as CopyrightEmbed } from "./CopyrightEmbed";
 export { default as CodeEmbed } from "./CodeEmbed";