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

package/lib/Embed/ContentLinkEmbed.js

@@ -33,7 +33,7 @@ const ContentLinkEmbed = _ref => {
   if (embed.status === "error") {
     return (0, _jsxRuntime.jsxs)(StyledSpan, {
       children: [(0, _jsxRuntime.jsx)("span", {
-        children: "".concat(t("embed.linkError"), ": ")
+        children: `${t("embed.linkError")}: `
       }), children]
     });
   }

package/lib/Embed/EmbedErrorPlaceholder.d.ts

@@ -6,12 +6,13 @@
  *
  */
 import { ReactNode } from "react";
-import { FigureType } from "../Figure";
+import { type FigureFloat, type FigureSize } from "@ndla/primitives";
 import { EmbedBylineErrorProps } from "../LicenseByline/EmbedByline";
 interface Props {
     type: EmbedBylineErrorProps["type"];
-    figureType?: FigureType;
+    figureType?: FigureSize;
+    float?: FigureFloat;
     children?: ReactNode;
 }
-declare const EmbedErrorPlaceholder: ({ type, children, figureType }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const EmbedErrorPlaceholder: ({ type, children, figureType, float }: Props) => import("react/jsx-runtime").JSX.Element;
 export default EmbedErrorPlaceholder;

package/lib/Embed/EmbedErrorPlaceholder.js

@@ -4,13 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _core = require("@ndla/core");
 var _common = require("@ndla/icons/common");
-var _Figure = require("../Figure");
+var _primitives = require("@ndla/primitives");
+var _jsx2 = require("@ndla/styled-system/jsx");
 var _LicenseByline = require("../LicenseByline");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * Copyright (c) 2023-present, NDLA.
  *
@@ -19,30 +17,46 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  *
  */
 
-const ErrorPlaceholder = /*#__PURE__*/(0, _base.default)("div", {
-  target: "etnx1j51",
-  label: "ErrorPlaceholder"
-})("display:flex;align-items:center;justify-content:center;background-color:", _core.colors.brand.greyLighter, ";height:330px;svg{fill:", _core.colors.text.light, ";height:90%;width:90%;}&[data-embed-type=\"audio\"]{height:150px;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkVtYmVkRXJyb3JQbGFjZWhvbGRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0JtQyIsImZpbGUiOiJFbWJlZEVycm9yUGxhY2Vob2xkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjMtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgeyBSZWFjdE5vZGUgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgY29sb3JzLCBzcGFjaW5nIH0gZnJvbSBcIkBuZGxhL2NvcmVcIjtcbmltcG9ydCB7IFdhcm5pbmdPdXRsaW5lIH0gZnJvbSBcIkBuZGxhL2ljb25zL2NvbW1vblwiO1xuaW1wb3J0IHsgRmlndXJlLCBGaWd1cmVUeXBlIH0gZnJvbSBcIi4uL0ZpZ3VyZVwiO1xuaW1wb3J0IHsgRW1iZWRCeWxpbmUgfSBmcm9tIFwiLi4vTGljZW5zZUJ5bGluZVwiO1xuaW1wb3J0IHsgRW1iZWRCeWxpbmVFcnJvclByb3BzIH0gZnJvbSBcIi4uL0xpY2Vuc2VCeWxpbmUvRW1iZWRCeWxpbmVcIjtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgdHlwZTogRW1iZWRCeWxpbmVFcnJvclByb3BzW1widHlwZVwiXTtcbiAgZmlndXJlVHlwZT86IEZpZ3VyZVR5cGU7XG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlO1xufVxuXG5jb25zdCBFcnJvclBsYWNlaG9sZGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGJhY2tncm91bmQtY29sb3I6ICR7Y29sb3JzLmJyYW5kLmdyZXlMaWdodGVyfTtcbiAgaGVpZ2h0OiAzMzBweDtcblxuICBzdmcge1xuICAgIGZpbGw6ICR7Y29sb3JzLnRleHQubGlnaHR9O1xuICAgIGhlaWdodDogOTAlO1xuICAgIHdpZHRoOiA5MCU7XG4gIH1cbiAgJltkYXRhLWVtYmVkLXR5cGU9XCJhdWRpb1wiXSB7XG4gICAgaGVpZ2h0OiAxNTBweDtcbiAgfVxuYDtcblxuY29uc3QgU3R5bGVkRmlndXJlID0gc3R5bGVkKEZpZ3VyZSlgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGdhcDogJHtzcGFjaW5nLnhzbWFsbH07XG5gO1xuXG5jb25zdCBFbWJlZEVycm9yUGxhY2Vob2xkZXIgPSAoeyB0eXBlLCBjaGlsZHJlbiwgZmlndXJlVHlwZSB9OiBQcm9wcykgPT4ge1xuICByZXR1cm4gKFxuICAgIDxTdHlsZWRGaWd1cmUgdHlwZT17ZmlndXJlVHlwZX0+XG4gICAgICB7Y2hpbGRyZW4gPz8gKFxuICAgICAgICA8RXJyb3JQbGFjZWhvbGRlciBkYXRhLWVtYmVkLXR5cGU9e3R5cGV9PlxuICAgICAgICAgIDxXYXJuaW5nT3V0bGluZSAvPlxuICAgICAgICA8L0Vycm9yUGxhY2Vob2xkZXI+XG4gICAgICApfVxuICAgICAgPEVtYmVkQnlsaW5lIGVycm9yIHR5cGU9e3R5cGV9IHRvcFJvdW5kZWQgYm90dG9tUm91bmRlZCAvPlxuICAgIDwvU3R5bGVkRmlndXJlPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgRW1iZWRFcnJvclBsYWNlaG9sZGVyO1xuIl19 */"));
-const StyledFigure = /*#__PURE__*/(0, _base.default)(_Figure.Figure, {
-  target: "etnx1j50",
-  label: "StyledFigure"
-})("display:flex;flex-direction:column;gap:", _core.spacing.xsmall, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkVtYmVkRXJyb3JQbGFjZWhvbGRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUNtQyIsImZpbGUiOiJFbWJlZEVycm9yUGxhY2Vob2xkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjMtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgeyBSZWFjdE5vZGUgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgY29sb3JzLCBzcGFjaW5nIH0gZnJvbSBcIkBuZGxhL2NvcmVcIjtcbmltcG9ydCB7IFdhcm5pbmdPdXRsaW5lIH0gZnJvbSBcIkBuZGxhL2ljb25zL2NvbW1vblwiO1xuaW1wb3J0IHsgRmlndXJlLCBGaWd1cmVUeXBlIH0gZnJvbSBcIi4uL0ZpZ3VyZVwiO1xuaW1wb3J0IHsgRW1iZWRCeWxpbmUgfSBmcm9tIFwiLi4vTGljZW5zZUJ5bGluZVwiO1xuaW1wb3J0IHsgRW1iZWRCeWxpbmVFcnJvclByb3BzIH0gZnJvbSBcIi4uL0xpY2Vuc2VCeWxpbmUvRW1iZWRCeWxpbmVcIjtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgdHlwZTogRW1iZWRCeWxpbmVFcnJvclByb3BzW1widHlwZVwiXTtcbiAgZmlndXJlVHlwZT86IEZpZ3VyZVR5cGU7XG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlO1xufVxuXG5jb25zdCBFcnJvclBsYWNlaG9sZGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGJhY2tncm91bmQtY29sb3I6ICR7Y29sb3JzLmJyYW5kLmdyZXlMaWdodGVyfTtcbiAgaGVpZ2h0OiAzMzBweDtcblxuICBzdmcge1xuICAgIGZpbGw6ICR7Y29sb3JzLnRleHQubGlnaHR9O1xuICAgIGhlaWdodDogOTAlO1xuICAgIHdpZHRoOiA5MCU7XG4gIH1cbiAgJltkYXRhLWVtYmVkLXR5cGU9XCJhdWRpb1wiXSB7XG4gICAgaGVpZ2h0OiAxNTBweDtcbiAgfVxuYDtcblxuY29uc3QgU3R5bGVkRmlndXJlID0gc3R5bGVkKEZpZ3VyZSlgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGdhcDogJHtzcGFjaW5nLnhzbWFsbH07XG5gO1xuXG5jb25zdCBFbWJlZEVycm9yUGxhY2Vob2xkZXIgPSAoeyB0eXBlLCBjaGlsZHJlbiwgZmlndXJlVHlwZSB9OiBQcm9wcykgPT4ge1xuICByZXR1cm4gKFxuICAgIDxTdHlsZWRGaWd1cmUgdHlwZT17ZmlndXJlVHlwZX0+XG4gICAgICB7Y2hpbGRyZW4gPz8gKFxuICAgICAgICA8RXJyb3JQbGFjZWhvbGRlciBkYXRhLWVtYmVkLXR5cGU9e3R5cGV9PlxuICAgICAgICAgIDxXYXJuaW5nT3V0bGluZSAvPlxuICAgICAgICA8L0Vycm9yUGxhY2Vob2xkZXI+XG4gICAgICApfVxuICAgICAgPEVtYmVkQnlsaW5lIGVycm9yIHR5cGU9e3R5cGV9IHRvcFJvdW5kZWQgYm90dG9tUm91bmRlZCAvPlxuICAgIDwvU3R5bGVkRmlndXJlPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgRW1iZWRFcnJvclBsYWNlaG9sZGVyO1xuIl19 */"));
+const ErrorPlaceholder = (0, _jsx2.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"
+    }
+  }
+});
+const StyledFigure = (0, _jsx2.styled)(_primitives.Figure, {
+  base: {
+    "& > *:not(:first-child)": {
+      marginBlockStart: "3xsmall"
+    }
+  }
+});
 const EmbedErrorPlaceholder = _ref => {
   let {
     type,
     children,
-    figureType
+    figureType,
+    float
   } = _ref;
   return (0, _jsxRuntime.jsxs)(StyledFigure, {
-    type: figureType,
-    children: [children !== null && children !== void 0 ? children : (0, _jsxRuntime.jsx)(ErrorPlaceholder, {
+    size: figureType,
+    float: float,
+    children: [children ?? (0, _jsxRuntime.jsx)(ErrorPlaceholder, {
       "data-embed-type": type,
       children: (0, _jsxRuntime.jsx)(_common.WarningOutline, {})
     }), (0, _jsxRuntime.jsx)(_LicenseByline.EmbedByline, {
       error: true,
-      type: type,
-      topRounded: true,
-      bottomRounded: true
+      type: type
     })]
   });
 };

package/lib/Embed/ExternalEmbed.js

@@ -32,7 +32,6 @@ const StyledFigure = /*#__PURE__*/(0, _base.default)(_Figure.Figure, {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 const ExternalEmbed = _ref => {
-  var _data$oembed$html;
   let {
     embed,
     isConcept
@@ -42,11 +41,10 @@ const ExternalEmbed = _ref => {
   } = (0, _reactI18next.useTranslation)();
   const figRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
-    var _figRef$current;
-    const iframe = (_figRef$current = figRef.current) === null || _figRef$current === void 0 ? void 0 : _figRef$current.querySelector("iframe");
+    const iframe = figRef.current?.querySelector("iframe");
     if (iframe) {
       const [width, height] = [Number.parseInt(iframe.width), Number.parseInt(iframe.height)];
-      iframe.style.aspectRatio = "".concat(width ? width : 16, "/").concat(height ? height : 9);
+      iframe.style.aspectRatio = `${width ? width : 16}/${height ? height : 9}`;
       iframe.width = "";
       iframe.height = "";
     }
@@ -61,18 +59,17 @@ const ExternalEmbed = _ref => {
     data
   } = embed;
   if (embedData.type === "fullscreen") {
-    var _data$iframeImage$ima, _data$iframeImage, _data$iframeImage$alt, _data$iframeImage2, _embedData$title, _embedData$caption;
     const image = {
-      src: (_data$iframeImage$ima = (_data$iframeImage = data.iframeImage) === null || _data$iframeImage === void 0 ? void 0 : _data$iframeImage.image.imageUrl) !== null && _data$iframeImage$ima !== void 0 ? _data$iframeImage$ima : "",
-      alt: embedData.alt !== undefined ? embedData.alt : (_data$iframeImage$alt = (_data$iframeImage2 = data.iframeImage) === null || _data$iframeImage2 === void 0 || (_data$iframeImage2 = _data$iframeImage2.alttext) === null || _data$iframeImage2 === void 0 ? void 0 : _data$iframeImage2.alttext) !== null && _data$iframeImage$alt !== void 0 ? _data$iframeImage$alt : ""
+      src: data.iframeImage?.image.imageUrl ?? "",
+      alt: embedData.alt !== undefined ? embedData.alt : data.iframeImage?.alttext?.alttext ?? ""
     };
     return (0, _jsxRuntime.jsx)(_Figure.Figure, {
       type: "full",
       children: (0, _jsxRuntime.jsx)(_ResourceBox.ResourceBox, {
         image: image,
-        title: (_embedData$title = embedData.title) !== null && _embedData$title !== void 0 ? _embedData$title : "",
+        title: embedData.title ?? "",
         url: embedData.url,
-        caption: (_embedData$caption = embedData.caption) !== null && _embedData$caption !== void 0 ? _embedData$caption : "",
+        caption: embedData.caption ?? "",
         buttonText: t("license.other.itemImage.ariaLabel")
       })
     });
@@ -81,7 +78,7 @@ const ExternalEmbed = _ref => {
     ref: figRef,
     type: isConcept ? "full-column" : undefined,
     dangerouslySetInnerHTML: {
-      __html: (_data$oembed$html = data.oembed.html) !== null && _data$oembed$html !== void 0 ? _data$oembed$html : ""
+      __html: data.oembed.html ?? ""
     }
   });
 };

package/lib/Embed/FootnoteEmbed.js

@@ -34,12 +34,12 @@ const FootnoteEmbed = _ref => {
     });
   }
   return (0, _jsxRuntime.jsx)(FootnoteRef, {
-    id: "ref".concat(embed.data.entryNum),
+    id: `ref${embed.data.entryNum}`,
     children: (0, _jsxRuntime.jsx)("sup", {
       children: (0, _jsxRuntime.jsx)("a", {
-        href: "#note".concat(embed.data.entryNum),
+        href: `#note${embed.data.entryNum}`,
         target: "_self",
-        children: "[".concat(embed.data.entryNum, "]")
+        children: `[${embed.data.entryNum}]`
       })
     })
   });

package/lib/Embed/H5pEmbed.js

@@ -39,11 +39,10 @@ const H5pEmbed = _ref => {
     });
   }
   if (embed.data.oembed) {
-    var _embed$data$oembed$ht;
     return (0, _jsxRuntime.jsx)(_Figure.Figure, {
       type: isConcept ? "full-column" : undefined,
       dangerouslySetInnerHTML: {
-        __html: (_embed$data$oembed$ht = embed.data.oembed.html) !== null && _embed$data$oembed$ht !== void 0 ? _embed$data$oembed$ht : ""
+        __html: embed.data.oembed.html ?? ""
       }
     });
   }

package/lib/Embed/IframeEmbed.js

@@ -32,7 +32,7 @@ const IframeEmbed = _ref => {
     const iframe = iframeRef.current;
     if (iframe) {
       const [width, height] = [Number.parseInt(iframe.width), Number.parseInt(iframe.height)];
-      iframe.style.aspectRatio = "".concat(width ? width : 16, "/").concat(height ? height : 9);
+      iframe.style.aspectRatio = `${width ? width : 16}/${height ? height : 9}`;
       iframe.width = "";
       iframe.height = "";
     }
@@ -47,20 +47,19 @@ const IframeEmbed = _ref => {
     data
   } = embed;
   if (embedData.type === "fullscreen") {
-    var _iframeImage$image$im, _embedData$title, _embedData$caption;
     const iframeImage = embed.status === "success" ? data.iframeImage : undefined;
-    const alt = embedData.alt !== undefined ? embedData.alt : iframeImage === null || iframeImage === void 0 ? void 0 : iframeImage.alttext.alttext;
+    const alt = embedData.alt !== undefined ? embedData.alt : iframeImage?.alttext.alttext;
     const image = {
-      src: (_iframeImage$image$im = iframeImage === null || iframeImage === void 0 ? void 0 : iframeImage.image.imageUrl) !== null && _iframeImage$image$im !== void 0 ? _iframeImage$image$im : "",
-      alt: alt !== null && alt !== void 0 ? alt : ""
+      src: iframeImage?.image.imageUrl ?? "",
+      alt: alt ?? ""
     };
     return (0, _jsxRuntime.jsx)(_Figure.Figure, {
       type: "full",
       children: (0, _jsxRuntime.jsx)(_ResourceBox.ResourceBox, {
         image: image,
-        title: (_embedData$title = embedData.title) !== null && _embedData$title !== void 0 ? _embedData$title : "",
+        title: embedData.title ?? "",
         url: embedData.url,
-        caption: (_embedData$caption = embedData.caption) !== null && _embedData$caption !== void 0 ? _embedData$caption : "",
+        caption: embedData.caption ?? "",
         buttonText: t("license.other.itemImage.ariaLabel")
       })
     });
@@ -71,8 +70,8 @@ const IframeEmbed = _ref => {
     title,
     url
   } = embedData;
-  const strippedWidth = typeof width === "number" ? width : width === null || width === void 0 ? void 0 : width.replace(/\s*px/, "");
-  const strippedHeight = typeof height === "number" ? height : height === null || height === void 0 ? void 0 : height.replace(/\s*px/, "");
+  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 (0, _jsxRuntime.jsx)(_Figure.Figure, {
     type: isConcept ? "full-column" : undefined,

package/lib/Embed/ImageEmbed.d.ts

@@ -11,7 +11,6 @@ import { RenderContext } from "./types";
 interface Props {
     embed: ImageMetaData;
     previewAlt?: boolean;
-    inGrid?: boolean;
     lang?: string;
     renderContext?: RenderContext;
     children?: ReactNode;
@@ -40,5 +39,5 @@ export declare const getCrop: (data: ImageEmbedData) => {
     endX: number;
     endY: number;
 } | undefined;
-declare const ImageEmbed: ({ embed, previewAlt, inGrid, lang, renderContext, children }: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const ImageEmbed: ({ embed, previewAlt, lang, renderContext, children }: Props) => import("react/jsx-runtime").JSX.Element;
 export default ImageEmbed;