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

package/lib/Embed/BrightcoveEmbed.js

@@ -1,142 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.makeIframeString = exports.isNumeric = exports.default = void 0;
-var _htmlReactParser = _interopRequireDefault(require("html-react-parser"));
-var _react = require("react");
-var _reactI18next = require("react-i18next");
-var _primitives = require("@ndla/primitives");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _EmbedErrorPlaceholder = _interopRequireDefault(require("./EmbedErrorPlaceholder"));
-var _LicenseByline = require("../LicenseByline");
-var _licenseAttributes = require("../utils/licenseAttributes");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * 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.
- *
- */
-
-const LinkedVideoButton = (0, _jsx2.styled)(_primitives.Button, {
-  base: {
-    marginBlockStart: "3xsmall"
-  }
-});
-const BrightcoveIframe = (0, _jsx2.styled)("iframe", {
-  base: {
-    border: 0,
-    height: "auto",
-    width: "100%"
-  }
-});
-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>`;
-};
-exports.makeIframeString = makeIframeString;
-const isNumeric = value => !Number.isNaN(value - Number.parseFloat(value));
-exports.isNumeric = isNumeric;
-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] = (0, _react.useState)(true);
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)();
-  const iframeRef = (0, _react.useRef)(null);
-  const {
-    embedData
-  } = embed;
-  const fallbackTitle = `${t("embed.type.video")}: ${embedData.videoid}`;
-  const parsedDescription = (0, _react.useMemo)(() => {
-    if (embed.embedData.caption || renderContext === "article") {
-      return embed.embedData.caption ? (0, _htmlReactParser.default)(embed.embedData.caption) : undefined;
-    } else if (embed.status === "success" && embed.data.description) {
-      return (0, _htmlReactParser.default)(embed.data.description);
-    }
-  }, [embed, renderContext]);
-  (0, _react.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__*/(0, _jsxRuntime.jsx)(_EmbedErrorPlaceholder.default, {
-      type: "video",
-      children: /*#__PURE__*/(0, _jsxRuntime.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 = (0, _licenseAttributes.licenseAttributes)(data?.copyright?.license.license, lang, embedData.pageUrl);
-  const title = data.name?.trim() ? `${t("embed.type.video")}: ${data.name}` : fallbackTitle;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.Figure, {
-    "data-embed-type": "brightcove",
-    ...licenseProps,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "brightcove-video",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BrightcoveIframe, {
-        ref: iframeRef,
-        className: "original",
-        title: title,
-        "aria-label": title,
-        ...(alternativeVideoProps && !showOriginalVideo ? alternativeVideoProps : originalVideoProps),
-        allow: "fullscreen; encrypted-media"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LicenseByline.EmbedByline, {
-      type: "video",
-      copyright: data.copyright,
-      description: parsedDescription,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        children: !!linkedVideoId && /*#__PURE__*/(0, _jsxRuntime.jsx)(LinkedVideoButton, {
-          size: "small",
-          variant: "secondary",
-          onClick: () => setShowOriginalVideo(p => !p),
-          children: t(`figure.button.${!showOriginalVideo ? "original" : "alternative"}`)
-        })
-      })
-    })]
-  });
-};
-var _default = exports.default = BrightcoveEmbed;

package/lib/Embed/CodeEmbed.js

@@ -1,86 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _reactI18next = require("react-i18next");
-var _icons = require("@ndla/icons");
-var _primitives = require("@ndla/primitives");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _util = require("@ndla/util");
-var _EmbedErrorPlaceholder = _interopRequireDefault(require("./EmbedErrorPlaceholder"));
-var _CodeBlock = require("../CodeBlock");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * 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.
- *
- */
-
-const StyledFigCaption = (0, _jsx2.styled)("figcaption", {
-  base: {
-    textStyle: "label.large",
-    fontWeight: "bold"
-  }
-});
-const StyledFigure = (0, _jsx2.styled)(_primitives.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 = _CodeBlock.codeLanguageOptions.find(item => item.format === format);
-  if (selectedLanguage) {
-    return selectedLanguage.title;
-  }
-  return;
-};
-const CodeEmbed = _ref => {
-  let {
-    embed
-  } = _ref;
-  const [isCopied, setIsCopied] = (0, _react.useState)(false);
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)();
-  (0, _react.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__*/(0, _jsxRuntime.jsx)(_EmbedErrorPlaceholder.default, {
-      type: "code"
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledFigure, {
-    "data-embed-type": "code-block",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFigCaption, {
-      children: embed.embedData.title || getTitleFromFormat(embed.embedData.codeFormat)
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CodeBlock.CodeBlock, {
-      highlightedCode: embed.status === "success" ? embed.data.highlightedCode : "",
-      format: embed.embedData.codeFormat
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.Button, {
-      variant: "secondary",
-      onClick: () => {
-        (0, _util.copyTextToClipboard)(embed.status === "success" ? embed.data.decodedContent : "");
-        setIsCopied(true);
-      },
-      children: [isCopied ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CheckLine, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.FileCopyLine, {}), isCopied ? t("codeBlock.copiedCode") : t("codeBlock.copyCode")]
-    })]
-  });
-};
-var _default = exports.default = CodeEmbed;

package/lib/Embed/ConceptEmbed.js

@@ -1,131 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.InlineConcept = exports.ConceptEmbed = exports.BlockConcept = void 0;
-var _htmlReactParser = _interopRequireDefault(require("html-react-parser"));
-var _react = require("react");
-var _react2 = require("@ark-ui/react");
-var _primitives = require("@ndla/primitives");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _ConceptInlineTriggerButton = require("./ConceptInlineTriggerButton");
-var _EmbedErrorPlaceholder = _interopRequireDefault(require("./EmbedErrorPlaceholder"));
-var _GlossEmbed = require("./GlossEmbed");
-var _Concept = require("../Concept/Concept");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * 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.
- *
- */
-
-const StyledPopoverContent = (0, _jsx2.styled)(_primitives.PopoverContent, {
-  base: {
-    width: "surface.xlarge",
-    maxHeight: "50vh",
-    overflowY: "auto"
-  }
-});
-const ConceptEmbed = _ref => {
-  let {
-    embed,
-    renderContext,
-    lang,
-    previewAlt
-  } = _ref;
-  const parsedContent = (0, _react.useMemo)(() => {
-    if (embed.status === "error" || !embed.data.concept.content) return undefined;
-    return (0, _htmlReactParser.default)(embed.data.concept.content.htmlContent);
-  }, [embed]);
-  if (embed.status === "error" && embed.embedData.type === "inline") {
-    return /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_EmbedErrorPlaceholder.default, {
-      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__*/(0, _jsxRuntime.jsx)(_GlossEmbed.GlossEmbed, {
-      embed: embed
-    });
-  }
-  if (embed.embedData.type === "inline") {
-    return /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(BlockConcept, {
-    previewAlt: previewAlt,
-    copyright: concept.copyright,
-    visualElement: visualElement,
-    lang: lang,
-    title: renderContext === "embed" ? undefined : concept.title.title,
-    source: concept.source,
-    children: parsedContent
-  });
-};
-exports.ConceptEmbed = ConceptEmbed;
-const InlineConcept = exports.InlineConcept = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
-  let {
-    linkText,
-    copyright,
-    visualElement,
-    previewAlt,
-    lang,
-    children,
-    title,
-    source,
-    ...rest
-  } = _ref2;
-  const contentRef = (0, _react.useRef)(null);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.PopoverRoot, {
-    initialFocusEl: () => contentRef.current,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.PopoverTrigger, {
-      asChild: true,
-      ref: ref,
-      ...rest,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConceptInlineTriggerButton.ConceptInlineTriggerButton, {
-        children: linkText
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Portal, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledPopoverContent, {
-        ref: contentRef,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Concept.Concept, {
-          copyright: copyright,
-          visualElement: visualElement,
-          title: title,
-          lang: lang,
-          source: source,
-          previewAlt: previewAlt,
-          children: children
-        })
-      })
-    })]
-  });
-});
-const BlockConcept = exports.BlockConcept = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Concept.Concept, {
-  ...props,
-  "data-embed-type": "concept",
-  ref: ref
-}));

package/lib/Embed/ConceptInlineTriggerButton.js

@@ -1,51 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ConceptInlineTriggerButton = void 0;
-var _jsx = require("@ndla/styled-system/jsx");
-var _InlineTriggerButton = require("./InlineTriggerButton");
-/**
- * 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.
- *
- */
-
-const ConceptInlineTriggerButton = exports.ConceptInlineTriggerButton = (0, _jsx.styled)(_InlineTriggerButton.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"
-      }
-    }
-  }
-});

package/lib/Embed/ContentLinkEmbed.js

@@ -1,57 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _reactI18next = require("react-i18next");
-var _primitives = require("@ndla/primitives");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * 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.
- *
- */
-
-const ContentLinkEmbed = _ref => {
-  let {
-    embed,
-    isOembed,
-    children
-  } = _ref;
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)();
-  if (embed.status === "error") {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
-      color: "text.error",
-      asChild: true,
-      consumeCss: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          children: `${t("embed.linkError")}: `
-        }), children]
-      })
-    });
-  }
-  const {
-    embedData,
-    data
-  } = embed;
-  if (embedData.openIn === "new-context" || isOembed) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
-      href: data.path,
-      "data-embed-type": "content-link",
-      target: "_blank",
-      rel: "noopener noreferrer",
-      children: children
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
-    href: data.path,
-    children: children
-  });
-};
-var _default = exports.default = ContentLinkEmbed;

package/lib/Embed/CopyrightEmbed.js

@@ -1,39 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _LicenseByline = require("../LicenseByline");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * 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.
- *
- */
-
-const StyledCopyrightContent = (0, _jsx2.styled)("div", {
-  base: {
-    marginBlockEnd: "xsmall"
-  }
-});
-const CopyrightEmbed = _ref => {
-  let {
-    embed,
-    children
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("figure", {
-    "data-embed-type": "copyright",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledCopyrightContent, {
-      "data-copyright-content": "",
-      children: children
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LicenseByline.EmbedByline, {
-      type: "copyright",
-      copyright: embed.embedData.copyright
-    })]
-  });
-};
-var _default = exports.default = CopyrightEmbed;

package/lib/Embed/EmbedErrorPlaceholder.js

@@ -1,64 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _icons = require("@ndla/icons");
-var _primitives = require("@ndla/primitives");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _LicenseByline = require("../LicenseByline");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * 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.
- *
- */
-
-const ErrorPlaceholder = (0, _jsx2.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 = (0, _jsx2.styled)(_primitives.Figure, {
-  base: {
-    "& > *:not(:first-child)": {
-      marginBlockStart: "3xsmall"
-    }
-  }
-});
-const EmbedErrorPlaceholder = _ref => {
-  let {
-    type,
-    children,
-    figureType,
-    float
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledFigure, {
-    size: figureType,
-    float: float,
-    "data-embed-type": type,
-    children: [children ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(ErrorPlaceholder, {
-      "data-embed-type": type,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ErrorWarningLine, {})
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LicenseByline.EmbedByline, {
-      error: true,
-      type: type
-    })]
-  });
-};
-var _default = exports.default = EmbedErrorPlaceholder;

package/lib/Embed/EmbedWrapper.js

@@ -1,57 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.EmbedWrapper = void 0;
-var _react = require("react");
-var _react2 = require("@ark-ui/react");
-var _css = require("@ndla/styled-system/css");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * 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.
- *
- */
-
-const embedWrapperRecipe = (0, _css.cva)({
-  base: {
-    position: "relative"
-  },
-  defaultVariants: {
-    noClear: false
-  },
-  variants: {
-    noClear: {
-      true: {
-        "& + [data-embed-wrapper]": {
-          clear: "both"
-        }
-      },
-      false: {
-        clear: "both"
-      }
-    }
-  }
-});
-const StyledEmbedWrapper = (0, _jsx2.styled)(_react2.ark.div, {}, {
-  baseComponent: true
-});
-const EmbedWrapper = exports.EmbedWrapper = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-    noClear,
-    css: cssProp,
-    ...props
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledEmbedWrapper, {
-    css: _css.css.raw(embedWrapperRecipe.raw({
-      noClear
-    }), cssProp),
-    "data-embed-wrapper": "",
-    ...props,
-    ref: ref
-  });
-});