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

package/src/Embed/EmbedErrorPlaceholder.tsx

@@ -7,51 +7,54 @@
  */
 
 import { ReactNode } from "react";
-import styled from "@emotion/styled";
-import { colors, spacing } from "@ndla/core";
 import { WarningOutline } from "@ndla/icons/common";
-import { Figure, FigureType } from "../Figure";
+import { Figure, type FigureFloat, type FigureSize } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 import { EmbedByline } from "../LicenseByline";
 import { EmbedBylineErrorProps } from "../LicenseByline/EmbedByline";
 
 interface Props {
   type: EmbedBylineErrorProps["type"];
-  figureType?: FigureType;
+  figureType?: FigureSize;
+  float?: FigureFloat;
   children?: ReactNode;
 }
 
-const ErrorPlaceholder = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: ${colors.brand.greyLighter};
-  height: 330px;
+const ErrorPlaceholder = styled("div", {
+  base: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "surface.disabled",
+    height: "surface.xsmall",
+    "& svg": {
+      fill: "text.subtle",
+      height: "90%",
+      width: "90%",
+    },
+    "&[data-embed-type='audio']": {
+      height: "surface.3xsmall",
+    },
+  },
+});
 
-  svg {
-    fill: ${colors.text.light};
-    height: 90%;
-    width: 90%;
-  }
-  &[data-embed-type="audio"] {
-    height: 150px;
-  }
-`;
+const StyledFigure = styled(Figure, {
+  base: {
+    "& > *:not(:first-child)": {
+      marginBlockStart: "3xsmall",
+    },
+  },
+});
 
-const StyledFigure = styled(Figure)`
-  display: flex;
-  flex-direction: column;
-  gap: ${spacing.xsmall};
-`;
-
-const EmbedErrorPlaceholder = ({ type, children, figureType }: Props) => {
+const EmbedErrorPlaceholder = ({ type, children, figureType, float }: Props) => {
   return (
-    <StyledFigure type={figureType}>
+    <StyledFigure size={figureType} float={float}>
       {children ?? (
         <ErrorPlaceholder data-embed-type={type}>
           <WarningOutline />
         </ErrorPlaceholder>
       )}
-      <EmbedByline error type={type} topRounded bottomRounded />
+      <EmbedByline error type={type} />
     </StyledFigure>
   );
 };

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/ImageEmbed.stories.tsx

@@ -7,11 +7,15 @@
  */
 
 import { ReactNode } from "react";
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryFn, StoryObj } from "@storybook/react";
+import { Text } from "@ndla/primitives";
+import { css } from "@ndla/styled-system/css";
+import { styled } from "@ndla/styled-system/jsx";
 import { IImageMetaInformationV3 } from "@ndla/types-backend/image-api";
 import { ImageEmbedData } from "@ndla/types-embed";
 import ImageEmbed from "./ImageEmbed";
 import { ArticleWrapper } from "../Article";
+import { Grid } from "../Grid";
 import LayoutItem, { OneColumn } from "../Layout";
 
 const embedData: ImageEmbedData = {
@@ -184,26 +188,27 @@ export const Cropped: StoryObj<typeof ImageEmbed> = {
 };
 
 const TextWrapper = ({ children }: { children: ReactNode }) => (
-  <>
-    <p>
+  // TODO: Replace this with regular css once we drop emotion
+  <styled.div css={css.raw({ "& > p": { marginBlock: "medium", width: "100%" } })}>
+    <Text>
       Du har en kjempegod idé til en kortfilm. Men det koster mange penger å produsere filmen. Derfor er du avhengig av
       at noen tenner på idéen din og bestemmer seg for å bruke ressurser på nettopp dette prosjektet.
-    </p>
+    </Text>
     {children}
 
-    <p>
+    <Text>
       Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen du
       planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
-    </p>
-    <p>
+    </Text>
+    <Text>
       Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen du
       planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
-    </p>
-    <p>
+    </Text>
+    <Text>
       Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen du
       planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
-    </p>
-  </>
+    </Text>
+  </styled.div>
 );
 
 export const FloatLeft: StoryObj<typeof ImageEmbed> = {
@@ -324,3 +329,40 @@ export const FloatLeftExtraSmall: StoryObj<typeof ImageEmbed> = {
     </TextWrapper>
   ),
 };
+
+export const In2x2Grid: StoryFn<typeof ImageEmbed> = (args) => {
+  const items = new Array(4).fill(
+    <ImageEmbed
+      {...args}
+      embed={{
+        resource: "image",
+        status: "success",
+        embedData: {
+          ...embedData,
+          align: "left",
+          border: "true",
+        },
+        data: metaData,
+      }}
+    />,
+  );
+  return <Grid columns="2x2">{items}</Grid>;
+};
+
+export const In4Grid: StoryFn<typeof ImageEmbed> = (args) => {
+  const items = new Array(4).fill(
+    <ImageEmbed
+      {...args}
+      embed={{
+        resource: "image",
+        status: "success",
+        embedData: {
+          ...embedData,
+          border: "true",
+        },
+        data: metaData,
+      }}
+    />,
+  );
+  return <Grid columns="4">{items}</Grid>;
+};