@ndla/ui 56.0.121-alpha.0 → 56.0.122-alpha.0

package/es/Embed/ContentLinkEmbed.js

@@ -1,51 +0,0 @@
-/**
- * Copyright (c) 2023-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 { useTranslation } from "react-i18next";
-import { Text } from "@ndla/primitives";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const ContentLinkEmbed = _ref => {
-  let {
-    embed,
-    isOembed,
-    children
-  } = _ref;
-  const {
-    t
-  } = useTranslation();
-  if (embed.status === "error") {
-    return /*#__PURE__*/_jsx(Text, {
-      color: "text.error",
-      asChild: true,
-      consumeCss: true,
-      children: /*#__PURE__*/_jsxs("span", {
-        children: [/*#__PURE__*/_jsx("span", {
-          children: `${t("embed.linkError")}: `
-        }), children]
-      })
-    });
-  }
-  const {
-    embedData,
-    data
-  } = embed;
-  if (embedData.openIn === "new-context" || isOembed) {
-    return /*#__PURE__*/_jsx("a", {
-      href: data.path,
-      "data-embed-type": "content-link",
-      target: "_blank",
-      rel: "noopener noreferrer",
-      children: children
-    });
-  }
-  return /*#__PURE__*/_jsx("a", {
-    href: data.path,
-    children: children
-  });
-};
-export default ContentLinkEmbed;

package/es/Embed/CopyrightEmbed.js

@@ -1,33 +0,0 @@
-/**
- * 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 { styled } from "@ndla/styled-system/jsx";
-import { EmbedByline } from "../LicenseByline";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const StyledCopyrightContent = styled("div", {
-  base: {
-    marginBlockEnd: "xsmall"
-  }
-});
-const CopyrightEmbed = _ref => {
-  let {
-    embed,
-    children
-  } = _ref;
-  return /*#__PURE__*/_jsxs("figure", {
-    "data-embed-type": "copyright",
-    children: [/*#__PURE__*/_jsx(StyledCopyrightContent, {
-      "data-copyright-content": "",
-      children: children
-    }), /*#__PURE__*/_jsx(EmbedByline, {
-      type: "copyright",
-      copyright: embed.embedData.copyright
-    })]
-  });
-};
-export default CopyrightEmbed;

package/es/Embed/EmbedErrorPlaceholder.js

@@ -1,58 +0,0 @@
-/**
- * Copyright (c) 2023-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 { ErrorWarningLine } from "@ndla/icons";
-import { Figure } from "@ndla/primitives";
-import { styled } from "@ndla/styled-system/jsx";
-import { EmbedByline } from "../LicenseByline";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const ErrorPlaceholder = styled("div", {
-  base: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    background: "background.subtle",
-    height: "surface.xsmall",
-    border: "1px solid",
-    borderColor: "stroke.default",
-    borderRadius: "xsmall",
-    "& svg": {
-      height: "5xlarge",
-      width: "5xlarge",
-      fill: "stroke.default"
-    }
-  }
-});
-const StyledFigure = styled(Figure, {
-  base: {
-    "& > *:not(:first-child)": {
-      marginBlockStart: "3xsmall"
-    }
-  }
-});
-const EmbedErrorPlaceholder = _ref => {
-  let {
-    type,
-    children,
-    figureType,
-    float
-  } = _ref;
-  return /*#__PURE__*/_jsxs(StyledFigure, {
-    size: figureType,
-    float: float,
-    "data-embed-type": type,
-    children: [children ?? /*#__PURE__*/_jsx(ErrorPlaceholder, {
-      "data-embed-type": type,
-      children: /*#__PURE__*/_jsx(ErrorWarningLine, {})
-    }), /*#__PURE__*/_jsx(EmbedByline, {
-      error: true,
-      type: type
-    })]
-  });
-};
-export default EmbedErrorPlaceholder;

package/es/Embed/EmbedWrapper.js

@@ -1,51 +0,0 @@
-/**
- * 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 { forwardRef } from "react";
-import { ark } from "@ark-ui/react";
-import { css, cva } from "@ndla/styled-system/css";
-import { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx } from "react/jsx-runtime";
-const embedWrapperRecipe = cva({
-  base: {
-    position: "relative"
-  },
-  defaultVariants: {
-    noClear: false
-  },
-  variants: {
-    noClear: {
-      true: {
-        "& + [data-embed-wrapper]": {
-          clear: "both"
-        }
-      },
-      false: {
-        clear: "both"
-      }
-    }
-  }
-});
-const StyledEmbedWrapper = styled(ark.div, {}, {
-  baseComponent: true
-});
-export const EmbedWrapper = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    noClear,
-    css: cssProp,
-    ...props
-  } = _ref;
-  return /*#__PURE__*/_jsx(StyledEmbedWrapper, {
-    css: css.raw(embedWrapperRecipe.raw({
-      noClear
-    }), cssProp),
-    "data-embed-wrapper": "",
-    ...props,
-    ref: ref
-  });
-});

package/es/Embed/ExternalEmbed.js

@@ -1,74 +0,0 @@
-/**
- * Copyright (c) 2023-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 { useEffect, useRef } from "react";
-import { useTranslation } from "react-i18next";
-import { Figure } from "@ndla/primitives";
-import { styled } from "@ndla/styled-system/jsx";
-import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
-import { ResourceBox } from "../ResourceBox";
-import { jsx as _jsx } from "react/jsx-runtime";
-const StyledFigure = styled(Figure, {
-  base: {
-    "& iframe": {
-      height: "auto",
-      width: "100%"
-    }
-  }
-});
-const ExternalEmbed = _ref => {
-  let {
-    embed
-  } = _ref;
-  const {
-    t
-  } = useTranslation();
-  const figRef = useRef(null);
-  useEffect(() => {
-    const iframe = figRef.current?.querySelector("iframe");
-    if (iframe) {
-      const [width, height] = [Number.parseInt(iframe.width), Number.parseInt(iframe.height)];
-      iframe.style.aspectRatio = `${width ? width : 16}/${height ? height : 9}`;
-      iframe.width = "";
-      iframe.height = "";
-    }
-  }, []);
-  if (embed.status === "error") {
-    return /*#__PURE__*/_jsx(EmbedErrorPlaceholder, {
-      type: "external"
-    });
-  }
-  const {
-    embedData,
-    data
-  } = embed;
-  if (embedData.type === "fullscreen") {
-    const image = {
-      src: data.iframeImage?.image.imageUrl,
-      alt: embedData.alt !== undefined ? embedData.alt : data.iframeImage?.alttext?.alttext ?? ""
-    };
-    return /*#__PURE__*/_jsx(Figure, {
-      "data-embed-type": "external",
-      children: /*#__PURE__*/_jsx(ResourceBox, {
-        image: image,
-        title: embedData.title ?? "",
-        url: embedData.url,
-        caption: embedData.caption ?? "",
-        buttonText: t("license.other.itemImage.ariaLabel")
-      })
-    });
-  }
-  return /*#__PURE__*/_jsx(StyledFigure, {
-    "data-embed-type": "external",
-    ref: figRef,
-    dangerouslySetInnerHTML: {
-      __html: data?.oembed?.html ?? ""
-    }
-  });
-};
-export default ExternalEmbed;

package/es/Embed/FootnoteEmbed.js

@@ -1,44 +0,0 @@
-/**
- * Copyright (c) 2023-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 { useTranslation } from "react-i18next";
-import { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx } from "react/jsx-runtime";
-const StyledSup = styled("sup", {
-  base: {
-    "& a": {
-      textStyle: "label.xsmall",
-      marginInlineStart: "1"
-    }
-  }
-});
-const FootnoteEmbed = _ref => {
-  let {
-    embed
-  } = _ref;
-  const {
-    t
-  } = useTranslation();
-  if (embed.status === "error") {
-    return /*#__PURE__*/_jsx("div", {
-      children: t("error")
-    });
-  }
-  return /*#__PURE__*/_jsx("span", {
-    id: `ref${embed.data.entryNum}`,
-    "data-embed-type": "footnote",
-    children: /*#__PURE__*/_jsx(StyledSup, {
-      children: /*#__PURE__*/_jsx("a", {
-        href: `#note${embed.data.entryNum}`,
-        target: "_self",
-        children: `[${embed.data.entryNum}]`
-      })
-    })
-  });
-};
-export default FootnoteEmbed;

package/es/Embed/GlossEmbed.js

@@ -1,80 +0,0 @@
-/**
- * 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 { useRef } from "react";
-import { Portal } from "@ark-ui/react";
-import { Figure, PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primitives";
-import { styled } from "@ndla/styled-system/jsx";
-import { ConceptInlineTriggerButton } from "./ConceptInlineTriggerButton";
-import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
-import { Gloss } from "../Gloss";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const StyledPopoverContent = styled(PopoverContent, {
-  base: {
-    width: "surface.xlarge"
-  }
-});
-export const GlossEmbed = _ref => {
-  let {
-    embed
-  } = _ref;
-  const contentRef = useRef(null);
-  if (embed.status === "error" && embed.embedData.type === "inline") {
-    return /*#__PURE__*/_jsx("span", {
-      children: embed.embedData.linkText
-    });
-  }
-  if (embed.status === "error" || !embed.data.concept.glossData) {
-    return /*#__PURE__*/_jsx(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 /*#__PURE__*/_jsxs(PopoverRoot, {
-      initialFocusEl: () => contentRef.current,
-      children: [/*#__PURE__*/_jsx(PopoverTrigger, {
-        asChild: true,
-        children: /*#__PURE__*/_jsx(ConceptInlineTriggerButton, {
-          children: embed.embedData.linkText
-        })
-      }), /*#__PURE__*/_jsx(Portal, {
-        children: /*#__PURE__*/_jsx(StyledPopoverContent, {
-          ref: contentRef,
-          children: /*#__PURE__*/_jsx(Figure, {
-            children: /*#__PURE__*/_jsx(Gloss, {
-              glossData: concept.glossData,
-              title: concept.title,
-              audio: audio,
-              exampleIds: embed.embedData.exampleIds,
-              exampleLangs: embed.embedData.exampleLangs
-            })
-          })
-        })
-      })]
-    });
-  }
-  return /*#__PURE__*/_jsx(Figure, {
-    "data-embed-type": "gloss",
-    children: /*#__PURE__*/_jsx(Gloss, {
-      glossData: concept.glossData,
-      title: concept.title,
-      audio: audio,
-      exampleIds: embed.embedData.exampleIds,
-      exampleLangs: embed.embedData.exampleLangs,
-      variant: "bordered"
-    })
-  });
-};

package/es/Embed/H5pEmbed.js

@@ -1,61 +0,0 @@
-/**
- * Copyright (c) 2023-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 { useTranslation } from "react-i18next";
-import { Figure } from "@ndla/primitives";
-import { styled } from "@ndla/styled-system/jsx";
-import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
-import { jsx as _jsx } from "react/jsx-runtime";
-const StyledFigure = styled(Figure, {
-  base: {
-    "& iframe": {
-      height: "auto",
-      width: "100%"
-    }
-  }
-});
-const FigureOembed = styled(Figure, {
-  base: {
-    width: "100%",
-    "& iframe": {
-      width: "100%"
-    }
-  }
-});
-const H5pEmbed = _ref => {
-  let {
-    embed
-  } = _ref;
-  const {
-    t
-  } = useTranslation();
-  if (embed.status === "error") {
-    return /*#__PURE__*/_jsx(EmbedErrorPlaceholder, {
-      type: "h5p"
-    });
-  }
-  if (embed.data.oembed) {
-    return /*#__PURE__*/_jsx(FigureOembed, {
-      "data-embed-type": "h5p",
-      dangerouslySetInnerHTML: {
-        __html: embed.data.oembed.html ?? ""
-      }
-    });
-  }
-  const title = embed.embedData.title?.trim() ? embed.embedData.title : embed.data.h5pLicenseInformation?.h5p.title?.trim() ? embed.data.h5pLicenseInformation.h5p.title : embed.embedData.url;
-  const titleWithPrefix = `${t("embed.type.h5p")}: ${title}`;
-  return /*#__PURE__*/_jsx(StyledFigure, {
-    "data-embed-type": "h5p",
-    children: /*#__PURE__*/_jsx("iframe", {
-      title: titleWithPrefix,
-      "aria-label": titleWithPrefix,
-      src: embed.embedData.url
-    })
-  });
-};
-export default H5pEmbed;

package/es/Embed/IframeEmbed.js

@@ -1,93 +0,0 @@
-/**
- * Copyright (c) 2023-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 { useEffect, useRef } from "react";
-import { useTranslation } from "react-i18next";
-import { Figure } from "@ndla/primitives";
-import { styled } from "@ndla/styled-system/jsx";
-import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
-import { ResourceBox } from "../ResourceBox";
-import { jsx as _jsx } from "react/jsx-runtime";
-const StyledIframe = styled("iframe", {
-  base: {
-    width: "100%",
-    border: 0
-  }
-});
-const StyledFigure = styled(Figure, {
-  base: {
-    clear: "both"
-  }
-});
-const IframeEmbed = _ref => {
-  let {
-    embed
-  } = _ref;
-  const {
-    t
-  } = useTranslation();
-  const iframeRef = useRef(null);
-  useEffect(() => {
-    const iframe = iframeRef.current;
-    if (iframe) {
-      const [width, height] = [Number.parseInt(iframe.width), Number.parseInt(iframe.height)];
-      iframe.style.aspectRatio = `${width ? width : 16}/${height ? height : 9}`;
-      iframe.width = "";
-      iframe.height = "";
-    }
-  }, []);
-  if (embed.status === "error") {
-    return /*#__PURE__*/_jsx(EmbedErrorPlaceholder, {
-      type: "external"
-    });
-  }
-  const {
-    embedData,
-    data
-  } = embed;
-  if (embedData.type === "fullscreen") {
-    const iframeImage = embed.status === "success" ? data.iframeImage : undefined;
-    const alt = embedData.alt !== undefined ? embedData.alt : iframeImage?.alttext.alttext;
-    const image = {
-      src: iframeImage?.image.imageUrl,
-      alt: alt ?? ""
-    };
-    return /*#__PURE__*/_jsx(StyledFigure, {
-      "data-embed-type": "iframe",
-      children: /*#__PURE__*/_jsx(ResourceBox, {
-        image: image,
-        title: embedData.title ?? "",
-        url: embedData.url,
-        caption: embedData.caption ?? "",
-        buttonText: t("license.other.itemImage.ariaLabel")
-      })
-    });
-  }
-  const {
-    width,
-    height,
-    url
-  } = embedData;
-  const strippedWidth = typeof width === "number" ? width : width?.replace(/\s*px/, "");
-  const strippedHeight = typeof height === "number" ? height : height?.replace(/\s*px/, "");
-  const title = `${t("embed.type.external")}: ${embedData.title?.trim() ? embedData.title : url}`;
-  return /*#__PURE__*/_jsx(StyledFigure, {
-    "data-embed-type": "iframe",
-    children: /*#__PURE__*/_jsx(StyledIframe, {
-      ref: iframeRef,
-      title: title,
-      "aria-label": title,
-      src: url,
-      width: strippedWidth,
-      height: strippedHeight,
-      allow: "fullscreen; encrypted-media",
-      loading: "lazy"
-    })
-  });
-};
-export default IframeEmbed;