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

package/es/ContentTypeFramedContent/ContentTypeFramedContent.js

@@ -1,32 +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 { FramedContent } from "@ndla/primitives";
-import { jsx as _jsx } from "react/jsx-runtime";
-const contentTypeToVariantMapping = {
-  "subject-material": "brand1",
-  "source-material": "brand1",
-  concept: "brand1",
-  "tasks-and-activities": "brand2",
-  "assessment-resources": "brand2"
-};
-export const ContentTypeFramedContent = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    variant = "neutral",
-    contentType,
-    ...props
-  } = _ref;
-  const color = contentType ? contentTypeToVariantMapping[contentType] ?? "brand1" : "brand1";
-  const variantColor = variant === "colored" ? color : undefined;
-  return /*#__PURE__*/_jsx(FramedContent, {
-    ...props,
-    colorTheme: variantColor,
-    ref: ref
-  });
-});

package/es/ContentTypeHero/ContentTypeHero.js

@@ -1,50 +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 { Hero } from "@ndla/primitives";
-import * as contentTypes from "../model/ContentType";
-import { jsx as _jsx } from "react/jsx-runtime";
-export const contentTypeToHeroMap = {
-  [contentTypes.SUBJECT_MATERIAL]: "primary",
-  [contentTypes.TASKS_AND_ACTIVITIES]: "brand2Bold",
-  [contentTypes.ASSESSMENT_RESOURCES]: "brand2",
-  // This will never happen
-  [contentTypes.SUBJECT]: "primary",
-  [contentTypes.SOURCE_MATERIAL]: "brand1",
-  // This will never happen
-  [contentTypes.LEARNING_PATH]: "primary",
-  [contentTypes.TOPIC]: "neutral",
-  [contentTypes.MULTIDISCIPLINARY]: "primary",
-  [contentTypes.CONCEPT]: "brand1Moderate",
-  [contentTypes.EXTERNAL]: "primary",
-  [contentTypes.IMAGE]: "primary",
-  [contentTypes.AUDIO]: "primary",
-  [contentTypes.PODCAST]: "primary",
-  [contentTypes.VIDEO]: "primary",
-  [contentTypes.MISSING]: "neutral",
-  [contentTypes.GLOSS]: "brand1Moderate",
-  // this will never happen
-  [contentTypes.PROGRAMME]: "primary",
-  // this will never happen
-  [contentTypes.PODCAST_SERIES]: "primary",
-  [contentTypes.FRONTPAGE_ARTICLE]: "primary"
-};
-export const ContentTypeHero = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    contentType,
-    children,
-    ...props
-  } = _ref;
-  return /*#__PURE__*/_jsx(Hero, {
-    variant: contentTypeToHeroMap[contentType ?? "missing"] ?? contentTypeToHeroMap["missing"],
-    ...props,
-    ref: ref,
-    children: children
-  });
-});

package/es/ContentTypeHero/index.js

@@ -1,9 +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.
- *
- */
-
-export { ContentTypeHero } from "./ContentTypeHero";

package/es/CopyParagraphButton/CopyParagraphButton.js

@@ -1,83 +0,0 @@
-/**
- * Copyright (c) 2021-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 { useCallback, useEffect, useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { LinkMedium } from "@ndla/icons";
-import { IconButton } from "@ndla/primitives";
-import { styled } from "@ndla/styled-system/jsx";
-import { copyTextToClipboard } from "@ndla/util";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const ContainerDiv = styled("div", {
-  base: {
-    position: "relative",
-    _hover: {
-      "& [data-copy-button]": {
-        opacity: "1",
-        cursor: "pointer"
-      }
-    }
-  }
-});
-const StyledIconButton = styled(IconButton, {
-  base: {
-    position: "absolute",
-    left: "-xxlarge",
-    top: "-4xsmall",
-    opacity: "0",
-    cursor: "pointer",
-    "&:focus, &:focus-visible, &:active": {
-      opacity: "1"
-    }
-  }
-});
-const CopyParagraphButton = _ref => {
-  let {
-    children,
-    copyText,
-    lang
-  } = _ref;
-  const [hasCopied, setHasCopied] = useState(false);
-  const {
-    t
-  } = useTranslation();
-  const sanitizedTitle = useMemo(() => encodeURIComponent(copyText.replace(/ /g, "-")), [copyText]);
-  useEffect(() => {
-    if (hasCopied) {
-      setTimeout(() => setHasCopied(false), 3000);
-    }
-  }, [hasCopied]);
-  const onCopyClick = useCallback(() => {
-    setHasCopied(true);
-    const {
-      location
-    } = window;
-    const newHash = `#${sanitizedTitle}`;
-    const port = location.port ? `:${location.port}` : "";
-    const urlToCopy = `${location.protocol}//${location.hostname}${port}${location.pathname}${location.search}${newHash}`;
-    copyTextToClipboard(urlToCopy);
-  }, [sanitizedTitle]);
-  const tooltip = hasCopied ? t("article.copyPageLinkCopied") : t("article.copyHeaderLink");
-  return /*#__PURE__*/_jsxs(ContainerDiv, {
-    "data-embed-type": "copy-heading",
-    children: [/*#__PURE__*/_jsx(StyledIconButton, {
-      variant: "clear",
-      "data-copy-button": "",
-      onClick: onCopyClick,
-      title: tooltip,
-      "aria-label": `${tooltip}: ${copyText}`,
-      children: /*#__PURE__*/_jsx(LinkMedium, {})
-    }), /*#__PURE__*/_jsx("h2", {
-      id: sanitizedTitle,
-      tabIndex: -1,
-      lang: lang,
-      children: children
-    })]
-  });
-};
-export default CopyParagraphButton;

package/es/CopyParagraphButton/index.js

@@ -1,11 +0,0 @@
-/**
- * Copyright (c) 2021-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 CopyParagraphButton from "./CopyParagraphButton";
-export { CopyParagraphButton };
-export default CopyParagraphButton;

package/es/Embed/AudioEmbed.js

@@ -1,76 +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 { Figure } from "@ndla/primitives";
-import { styled } from "@ndla/styled-system/jsx";
-import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
-import AudioPlayer from "../AudioPlayer";
-import { EmbedByline } from "../LicenseByline";
-import { licenseAttributes } from "../utils/licenseAttributes";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const StyledFigure = styled(Figure, {
-  base: {
-    clear: "both"
-  }
-});
-export const getFirstNonEmptyLicenseCredits = authors => Object.values(authors).find(i => i.length > 0) ?? [];
-const AudioEmbed = _ref => {
-  let {
-    embed,
-    lang
-  } = _ref;
-  const type = embed.embedData.type === "standard" ? "audio" : "podcast";
-  if (embed.status === "error") {
-    return /*#__PURE__*/_jsx(EmbedErrorPlaceholder, {
-      type: type
-    });
-  }
-  const {
-    data,
-    embedData
-  } = embed;
-  if (embedData.type === "minimal") {
-    return /*#__PURE__*/_jsx(AudioPlayer, {
-      speech: true,
-      src: data.audioFile.url,
-      title: data.title.title
-    });
-  }
-  const subtitle = data.series ? {
-    title: data.series.title.title,
-    url: `/podkast/${data.series.id}`
-  } : undefined;
-  const coverPhoto = data.podcastMeta?.coverPhoto;
-  const img = coverPhoto && {
-    url: coverPhoto.url,
-    alt: coverPhoto.altText
-  };
-  const licenseProps = licenseAttributes(data.copyright.license.license, lang, embedData.url);
-  return /*#__PURE__*/_jsxs(StyledFigure, {
-    lang: lang,
-    "data-embed-type": type,
-    ...licenseProps,
-    children: [/*#__PURE__*/_jsx(AudioPlayer, {
-      description: data.podcastMeta?.introduction ?? "",
-      img: img,
-      src: data.audioFile.url,
-      textVersion: data.manuscript?.manuscript.length ? /*#__PURE__*/_jsx("div", {
-        dangerouslySetInnerHTML: {
-          __html: data.manuscript.manuscript
-        }
-      }) : undefined,
-      title: data.title.title,
-      subtitle: subtitle
-    }), /*#__PURE__*/_jsx(EmbedByline, {
-      error: false,
-      type: data.audioType === "standard" ? "audio" : "podcast",
-      copyright: embed.data.copyright
-    })]
-  });
-};
-export default AudioEmbed;

package/es/Embed/BrightcoveEmbed.js

@@ -1,133 +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 parse from "html-react-parser";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { Button, Figure } from "@ndla/primitives";
-import { styled } from "@ndla/styled-system/jsx";
-import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
-import { EmbedByline } from "../LicenseByline";
-import { licenseAttributes } from "../utils/licenseAttributes";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const LinkedVideoButton = styled(Button, {
-  base: {
-    marginBlockStart: "3xsmall"
-  }
-});
-const BrightcoveIframe = styled("iframe", {
-  base: {
-    border: 0,
-    height: "auto",
-    width: "100%"
-  }
-});
-export const makeIframeString = function (url, width, height) {
-  let title = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "";
-  const strippedWidth = typeof width === "number" ? width : width.replace(/\s*px/, "");
-  const strippedHeight = typeof height === "number" ? height : height.replace(/\s*px/, "");
-  const urlOrTitle = title || url;
-  return `<iframe title="${urlOrTitle}" aria-label="${urlOrTitle}" src="${url}" width="${strippedWidth}" height="${strippedHeight}" allowfullscreen scrolling="no" frameborder="0" loading="lazy"></iframe>`;
-};
-export const isNumeric = value => !Number.isNaN(value - Number.parseFloat(value));
-const getIframeProps = (data, sources) => {
-  const {
-    account,
-    videoid,
-    player = "default"
-  } = data;
-  const source = sources.filter(s => s.width && s.height).toSorted((a, b) => a.height - b.height)[0];
-  return {
-    src: `https://players.brightcove.net/${account}/${player}_default/index.html?videoId=${videoid}`,
-    height: source?.height ?? "480",
-    width: source?.width ?? "640"
-  };
-};
-const BrightcoveEmbed = _ref => {
-  let {
-    embed,
-    renderContext = "article",
-    lang
-  } = _ref;
-  const [showOriginalVideo, setShowOriginalVideo] = useState(true);
-  const {
-    t
-  } = useTranslation();
-  const iframeRef = useRef(null);
-  const {
-    embedData
-  } = embed;
-  const fallbackTitle = `${t("embed.type.video")}: ${embedData.videoid}`;
-  const parsedDescription = useMemo(() => {
-    if (embed.embedData.caption || renderContext === "article") {
-      return embed.embedData.caption ? parse(embed.embedData.caption) : undefined;
-    } else if (embed.status === "success" && embed.data.description) {
-      return parse(embed.data.description);
-    }
-  }, [embed, renderContext]);
-  useEffect(() => {
-    const iframe = iframeRef.current;
-    if (iframe) {
-      const [width, height] = [parseInt(iframe.width), parseInt(iframe.height)];
-      iframe.style.aspectRatio = `${width}/${height}`;
-      iframe.width = "";
-      iframe.height = "";
-    }
-  }, []);
-  if (embed.status === "error") {
-    return /*#__PURE__*/_jsx(EmbedErrorPlaceholder, {
-      type: "video",
-      children: /*#__PURE__*/_jsx(BrightcoveIframe, {
-        ref: iframeRef,
-        title: embedData.alt || fallbackTitle,
-        "aria-label": embedData.alt || fallbackTitle,
-        ...getIframeProps(embedData, []),
-        allow: "fullscreen; encrypted-media"
-      })
-    });
-  }
-  const {
-    data
-  } = embed;
-  const linkedVideoId = isNumeric(data.link?.text) ? data.link?.text : undefined;
-  const originalVideoProps = getIframeProps(embedData, data.sources);
-  const alternativeVideoProps = linkedVideoId ? getIframeProps({
-    ...embedData,
-    videoid: linkedVideoId
-  }, data.sources) : undefined;
-  const licenseProps = licenseAttributes(data?.copyright?.license.license, lang, embedData.pageUrl);
-  const title = data.name?.trim() ? `${t("embed.type.video")}: ${data.name}` : fallbackTitle;
-  return /*#__PURE__*/_jsxs(Figure, {
-    "data-embed-type": "brightcove",
-    ...licenseProps,
-    children: [/*#__PURE__*/_jsx("div", {
-      className: "brightcove-video",
-      children: /*#__PURE__*/_jsx(BrightcoveIframe, {
-        ref: iframeRef,
-        className: "original",
-        title: title,
-        "aria-label": title,
-        ...(alternativeVideoProps && !showOriginalVideo ? alternativeVideoProps : originalVideoProps),
-        allow: "fullscreen; encrypted-media"
-      })
-    }), /*#__PURE__*/_jsx(EmbedByline, {
-      type: "video",
-      copyright: data.copyright,
-      description: parsedDescription,
-      children: /*#__PURE__*/_jsx("div", {
-        children: !!linkedVideoId && /*#__PURE__*/_jsx(LinkedVideoButton, {
-          size: "small",
-          variant: "secondary",
-          onClick: () => setShowOriginalVideo(p => !p),
-          children: t(`figure.button.${!showOriginalVideo ? "original" : "alternative"}`)
-        })
-      })
-    })]
-  });
-};
-export default BrightcoveEmbed;

package/es/Embed/CodeEmbed.js

@@ -1,79 +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, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { FileCopyLine, CheckLine } from "@ndla/icons";
-import { Button, Figure } from "@ndla/primitives";
-import { styled } from "@ndla/styled-system/jsx";
-import { copyTextToClipboard } from "@ndla/util";
-import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
-import { CodeBlock, codeLanguageOptions } from "../CodeBlock";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const StyledFigCaption = styled("figcaption", {
-  base: {
-    textStyle: "label.large",
-    fontWeight: "bold"
-  }
-});
-const StyledFigure = styled(Figure, {
-  base: {
-    clear: "both",
-    // We apply margin here to allow for the float and size props on figure to work as intended.
-    "& > *:not(:where(:first-child))": {
-      marginBlockStart: "xsmall"
-    }
-  }
-});
-const getTitleFromFormat = format => {
-  const selectedLanguage = codeLanguageOptions.find(item => item.format === format);
-  if (selectedLanguage) {
-    return selectedLanguage.title;
-  }
-  return;
-};
-const CodeEmbed = _ref => {
-  let {
-    embed
-  } = _ref;
-  const [isCopied, setIsCopied] = useState(false);
-  const {
-    t
-  } = useTranslation();
-  useEffect(() => {
-    if (isCopied) {
-      const timer = setInterval(() => setIsCopied(false), 3000);
-      // ensure interval is cleared - also if unmounted
-      return () => {
-        clearTimeout(timer);
-      };
-    }
-  }, [isCopied]);
-  if (embed.status === "error") {
-    return /*#__PURE__*/_jsx(EmbedErrorPlaceholder, {
-      type: "code"
-    });
-  }
-  return /*#__PURE__*/_jsxs(StyledFigure, {
-    "data-embed-type": "code-block",
-    children: [/*#__PURE__*/_jsx(StyledFigCaption, {
-      children: embed.embedData.title || getTitleFromFormat(embed.embedData.codeFormat)
-    }), /*#__PURE__*/_jsx(CodeBlock, {
-      highlightedCode: embed.status === "success" ? embed.data.highlightedCode : "",
-      format: embed.embedData.codeFormat
-    }), /*#__PURE__*/_jsxs(Button, {
-      variant: "secondary",
-      onClick: () => {
-        copyTextToClipboard(embed.status === "success" ? embed.data.decodedContent : "");
-        setIsCopied(true);
-      },
-      children: [isCopied ? /*#__PURE__*/_jsx(CheckLine, {}) : /*#__PURE__*/_jsx(FileCopyLine, {}), isCopied ? t("codeBlock.copiedCode") : t("codeBlock.copyCode")]
-    })]
-  });
-};
-export default CodeEmbed;

package/es/Embed/ConceptEmbed.js

@@ -1,123 +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 parse from "html-react-parser";
-import { forwardRef, useMemo, useRef } from "react";
-import { Portal } from "@ark-ui/react";
-import { PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primitives";
-import { styled } from "@ndla/styled-system/jsx";
-import { ConceptInlineTriggerButton } from "./ConceptInlineTriggerButton";
-import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
-import { GlossEmbed } from "./GlossEmbed";
-import { Concept } from "../Concept/Concept";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const StyledPopoverContent = styled(PopoverContent, {
-  base: {
-    width: "surface.xlarge",
-    maxHeight: "50vh",
-    overflowY: "auto"
-  }
-});
-export const ConceptEmbed = _ref => {
-  let {
-    embed,
-    renderContext,
-    lang,
-    previewAlt
-  } = _ref;
-  const parsedContent = useMemo(() => {
-    if (embed.status === "error" || !embed.data.concept.content) return undefined;
-    return parse(embed.data.concept.content.htmlContent);
-  }, [embed]);
-  if (embed.status === "error" && embed.embedData.type === "inline") {
-    return /*#__PURE__*/_jsx("span", {
-      children: embed.embedData.linkText
-    });
-  }
-  if (embed.status === "error") {
-    // TODO: This could be either concept or gloss. We don't know if it errors out. :)
-    return /*#__PURE__*/_jsx(EmbedErrorPlaceholder, {
-      type: "gloss"
-    });
-  }
-  const {
-    concept,
-    visualElement
-  } = embed.data;
-
-  // TODO: Consider whether we should do this in article-converter instead.
-  if (embed.data.concept.glossData) {
-    return /*#__PURE__*/_jsx(GlossEmbed, {
-      embed: embed
-    });
-  }
-  if (embed.embedData.type === "inline") {
-    return /*#__PURE__*/_jsx(InlineConcept, {
-      previewAlt: previewAlt,
-      linkText: embed.embedData.linkText,
-      copyright: concept.copyright,
-      visualElement: visualElement,
-      lang: lang,
-      title: concept.title.title,
-      source: concept.source,
-      children: parsedContent
-    });
-  }
-  return /*#__PURE__*/_jsx(BlockConcept, {
-    previewAlt: previewAlt,
-    copyright: concept.copyright,
-    visualElement: visualElement,
-    lang: lang,
-    title: renderContext === "embed" ? undefined : concept.title.title,
-    source: concept.source,
-    children: parsedContent
-  });
-};
-export const InlineConcept = /*#__PURE__*/forwardRef((_ref2, ref) => {
-  let {
-    linkText,
-    copyright,
-    visualElement,
-    previewAlt,
-    lang,
-    children,
-    title,
-    source,
-    ...rest
-  } = _ref2;
-  const contentRef = useRef(null);
-  return /*#__PURE__*/_jsxs(PopoverRoot, {
-    initialFocusEl: () => contentRef.current,
-    children: [/*#__PURE__*/_jsx(PopoverTrigger, {
-      asChild: true,
-      ref: ref,
-      ...rest,
-      children: /*#__PURE__*/_jsx(ConceptInlineTriggerButton, {
-        children: linkText
-      })
-    }), /*#__PURE__*/_jsx(Portal, {
-      children: /*#__PURE__*/_jsx(StyledPopoverContent, {
-        ref: contentRef,
-        children: /*#__PURE__*/_jsx(Concept, {
-          copyright: copyright,
-          visualElement: visualElement,
-          title: title,
-          lang: lang,
-          source: source,
-          previewAlt: previewAlt,
-          children: children
-        })
-      })
-    })]
-  });
-});
-export const BlockConcept = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(Concept, {
-  ...props,
-  "data-embed-type": "concept",
-  ref: ref
-}));

package/es/Embed/ConceptInlineTriggerButton.js

@@ -1,45 +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 { InlineTriggerButton } from "./InlineTriggerButton";
-export const ConceptInlineTriggerButton = styled(InlineTriggerButton, {
-  base: {
-    position: "relative",
-    overflow: "visible",
-    borderBottom: "1px solid",
-    borderStyle: "dashed",
-    borderColor: "stroke.hover",
-    paddingBlockStart: "5xsmall",
-    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"
-      }
-    }
-  }
-});