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

package/es/Embed/ContentLinkEmbed.js

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

package/es/Embed/EmbedErrorPlaceholder.js

@@ -1,4 +1,3 @@
-import _styled from "@emotion/styled/base";
 /**
  * Copyright (c) 2023-present, NDLA.
  *
@@ -7,35 +6,51 @@ import _styled from "@emotion/styled/base";
  *
  */
 
-import { colors, spacing } from "@ndla/core";
 import { WarningOutline } from "@ndla/icons/common";
-import { Figure } from "../Figure";
+import { Figure } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 import { EmbedByline } from "../LicenseByline";
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-const ErrorPlaceholder = /*#__PURE__*/_styled("div", {
-  target: "etnx1j51",
-  label: "ErrorPlaceholder"
-})("display:flex;align-items:center;justify-content:center;background-color:", colors.brand.greyLighter, ";height:330px;svg{fill:", 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__*/_styled(Figure, {
-  target: "etnx1j50",
-  label: "StyledFigure"
-})("display:flex;flex-direction:column;gap:", spacing.xsmall, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkVtYmVkRXJyb3JQbGFjZWhvbGRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUNtQyIsImZpbGUiOiJFbWJlZEVycm9yUGxhY2Vob2xkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjMtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgeyBSZWFjdE5vZGUgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgY29sb3JzLCBzcGFjaW5nIH0gZnJvbSBcIkBuZGxhL2NvcmVcIjtcbmltcG9ydCB7IFdhcm5pbmdPdXRsaW5lIH0gZnJvbSBcIkBuZGxhL2ljb25zL2NvbW1vblwiO1xuaW1wb3J0IHsgRmlndXJlLCBGaWd1cmVUeXBlIH0gZnJvbSBcIi4uL0ZpZ3VyZVwiO1xuaW1wb3J0IHsgRW1iZWRCeWxpbmUgfSBmcm9tIFwiLi4vTGljZW5zZUJ5bGluZVwiO1xuaW1wb3J0IHsgRW1iZWRCeWxpbmVFcnJvclByb3BzIH0gZnJvbSBcIi4uL0xpY2Vuc2VCeWxpbmUvRW1iZWRCeWxpbmVcIjtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgdHlwZTogRW1iZWRCeWxpbmVFcnJvclByb3BzW1widHlwZVwiXTtcbiAgZmlndXJlVHlwZT86IEZpZ3VyZVR5cGU7XG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlO1xufVxuXG5jb25zdCBFcnJvclBsYWNlaG9sZGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGJhY2tncm91bmQtY29sb3I6ICR7Y29sb3JzLmJyYW5kLmdyZXlMaWdodGVyfTtcbiAgaGVpZ2h0OiAzMzBweDtcblxuICBzdmcge1xuICAgIGZpbGw6ICR7Y29sb3JzLnRleHQubGlnaHR9O1xuICAgIGhlaWdodDogOTAlO1xuICAgIHdpZHRoOiA5MCU7XG4gIH1cbiAgJltkYXRhLWVtYmVkLXR5cGU9XCJhdWRpb1wiXSB7XG4gICAgaGVpZ2h0OiAxNTBweDtcbiAgfVxuYDtcblxuY29uc3QgU3R5bGVkRmlndXJlID0gc3R5bGVkKEZpZ3VyZSlgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGdhcDogJHtzcGFjaW5nLnhzbWFsbH07XG5gO1xuXG5jb25zdCBFbWJlZEVycm9yUGxhY2Vob2xkZXIgPSAoeyB0eXBlLCBjaGlsZHJlbiwgZmlndXJlVHlwZSB9OiBQcm9wcykgPT4ge1xuICByZXR1cm4gKFxuICAgIDxTdHlsZWRGaWd1cmUgdHlwZT17ZmlndXJlVHlwZX0+XG4gICAgICB7Y2hpbGRyZW4gPz8gKFxuICAgICAgICA8RXJyb3JQbGFjZWhvbGRlciBkYXRhLWVtYmVkLXR5cGU9e3R5cGV9PlxuICAgICAgICAgIDxXYXJuaW5nT3V0bGluZSAvPlxuICAgICAgICA8L0Vycm9yUGxhY2Vob2xkZXI+XG4gICAgICApfVxuICAgICAgPEVtYmVkQnlsaW5lIGVycm9yIHR5cGU9e3R5cGV9IHRvcFJvdW5kZWQgYm90dG9tUm91bmRlZCAvPlxuICAgIDwvU3R5bGVkRmlndXJlPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgRW1iZWRFcnJvclBsYWNlaG9sZGVyO1xuIl19 */"));
+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"
+    }
+  }
+});
+const StyledFigure = styled(Figure, {
+  base: {
+    "& > *:not(:first-child)": {
+      marginBlockStart: "3xsmall"
+    }
+  }
+});
 const EmbedErrorPlaceholder = _ref => {
   let {
     type,
     children,
-    figureType
+    figureType,
+    float
   } = _ref;
   return _jsxs(StyledFigure, {
-    type: figureType,
-    children: [children !== null && children !== void 0 ? children : _jsx(ErrorPlaceholder, {
+    size: figureType,
+    float: float,
+    children: [children ?? _jsx(ErrorPlaceholder, {
       "data-embed-type": type,
       children: _jsx(WarningOutline, {})
     }), _jsx(EmbedByline, {
       error: true,
-      type: type,
-      topRounded: true,
-      bottomRounded: true
+      type: type
     })]
   });
 };

package/es/Embed/ExternalEmbed.js

@@ -27,7 +27,6 @@ const StyledFigure = /*#__PURE__*/_styled(Figure, {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 const ExternalEmbed = _ref => {
-  var _data$oembed$html;
   let {
     embed,
     isConcept
@@ -37,11 +36,10 @@ const ExternalEmbed = _ref => {
   } = useTranslation();
   const figRef = useRef(null);
   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 = "";
     }
@@ -56,18 +54,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 _jsx(Figure, {
       type: "full",
       children: _jsx(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")
       })
     });
@@ -76,7 +73,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/es/Embed/FootnoteEmbed.js

@@ -27,12 +27,12 @@ const FootnoteEmbed = _ref => {
     });
   }
   return _jsx(FootnoteRef, {
-    id: "ref".concat(embed.data.entryNum),
+    id: `ref${embed.data.entryNum}`,
     children: _jsx("sup", {
       children: _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/es/Embed/H5pEmbed.js

@@ -34,11 +34,10 @@ const H5pEmbed = _ref => {
     });
   }
   if (embed.data.oembed) {
-    var _embed$data$oembed$ht;
     return _jsx(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/es/Embed/IframeEmbed.js

@@ -25,7 +25,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 = "";
     }
@@ -40,20 +40,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 _jsx(Figure, {
       type: "full",
       children: _jsx(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")
       })
     });
@@ -64,8 +63,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 _jsx(Figure, {
     type: isConcept ? "full-column" : undefined,