@ndla/ui 56.0.85-alpha.0 → 56.0.87-alpha.0

package/dist/panda.buildinfo.json

@@ -179,6 +179,7 @@
       "opacity]___[value:0",
       "cursor]___[value:pointer",
       "opacity]___[value:1]___[cond:&:focus, &:focus-visible, &:active",
+      "clear]___[value:both",
       "marginBlockStart]___[value:3xsmall",
       "border]___[value:0",
       "height]___[value:auto",
@@ -215,9 +216,18 @@
       "fill]___[value:stroke.default]___[cond:& svg",
       "marginBlockStart]___[value:3xsmall]___[cond:& > *:not(:first-child)",
       "clear]___[value:both]___[cond:& + [data-embed-wrapper]",
-      "clear]___[value:both",
       "height]___[value:auto]___[cond:& iframe",
       "width]___[value:100%]___[cond:& iframe",
+      "color]___[value:text.link",
+      "textDecoration]___[value:unset]___[cond:_hover",
+      "gap]___[value:small",
+      "backgroundColor]___[value:surface.brand.2.subtle",
+      "borderRadius]___[value:xxsmall",
+      "borderColor]___[value:stroke.info",
+      "textOverflow]___[value:ellipsis",
+      "whiteSpace]___[value:nowrap",
+      "inset]___[value:0]___[cond:_before",
+      "zIndex]___[value:0]___[cond:_before",
       "textStyle]___[value:label.xsmall]___[cond:& a",
       "marginInlineStart]___[value:1]___[cond:& a",
       "borderRadius]___[value:0]___[cond:& img",
@@ -242,8 +252,6 @@
       "transitionDuration]___[value:normal]___[cond:& svg",
       "transitionTimingFunction]___[value:ease-out]___[cond:& svg",
       "paddingInlineStart]___[value:4xsmall",
-      "color]___[value:text.link",
-      "whiteSpace]___[value:nowrap",
       "textDecoration]___[value:none]___[cond:_focusWithin",
       "color]___[value:text.strong]___[cond:& a",
       "marginTop]___[value:0]___[cond:& h1",
@@ -291,12 +299,9 @@
       "paddingInlineEnd]___[value:medium",
       "paddingInlineStart]___[value:small",
       "flexDirection]___[value:row",
-      "inset]___[value:0]___[cond:_before",
-      "zIndex]___[value:0]___[cond:_before",
       "background]___[value:surface.infoSubtle",
       "borderBlockEnd]___[value:1px solid",
       "backgroundColor]___[value:surface.infoSubtle.hover]___[cond:_hover",
-      "gap]___[value:small",
       "paddingInline]___[value:0",
       "background]___[value:surface.brand.1.subtle]___[cond:_first",
       "borderColor]___[value:stroke.default]___[cond:_first",

package/dist/styles.css

@@ -393,6 +393,10 @@
     cursor: pointer;
 }
 
+  .clear_both {
+    clear: both;
+}
+
   .mbs_3xsmall {
     margin-block-start: var(--spacing-3xsmall);
 }
@@ -437,8 +441,24 @@
     background: var(--colors-background-subtle);
 }
 
-  .clear_both {
-    clear: both;
+  .c_text\.link {
+    color: var(--colors-text-link);
+}
+
+  .gap_small {
+    gap: var(--spacing-small);
+}
+
+  .bdr_xxsmall {
+    border-radius: xxsmall;
+}
+
+  .tov_ellipsis {
+    text-overflow: ellipsis;
+}
+
+  .white-space_nowrap {
+    white-space: nowrap;
 }
 
   .z_docked {
@@ -473,14 +493,6 @@
     padding-inline-start: var(--spacing-4xsmall);
 }
 
-  .c_text\.link {
-    color: var(--colors-text-link);
-}
-
-  .white-space_nowrap {
-    white-space: nowrap;
-}
-
   .my_xxlarge {
     margin-block: var(--spacing-xxlarge);
 }
@@ -509,10 +521,6 @@
     border-block-end: 1px solid;
 }
 
-  .gap_small {
-    gap: var(--spacing-small);
-}
-
   .px_0 {
     padding-inline: 0;
 }
@@ -669,6 +677,14 @@
     border-color: var(--colors-stroke-hover);
 }
 
+  .bg-c_surface\.brand\.2\.subtle {
+    background-color: var(--colors-surface-brand-2-subtle);
+}
+
+  .bd-c_stroke\.info {
+    border-color: var(--colors-stroke-info);
+}
+
   .top_xsmall {
     top: var(--spacing-xsmall);
 }
@@ -895,6 +911,14 @@
     width: 100%;
 }
 
+  .before\:inset_0::before {
+    inset: 0;
+}
+
+  .before\:z_0::before {
+    z-index: 0;
+}
+
   .\[\&_a\]\:ms_1 a {
     margin-inline-start: var(--spacing-1);
 }
@@ -963,14 +987,6 @@
     padding-block-end: var(--spacing-xsmall);
 }
 
-  .before\:inset_0::before {
-    inset: 0;
-}
-
-  .before\:z_0::before {
-    z-index: 0;
-}
-
   .first\:bg_surface\.brand\.1\.subtle:first-child {
     background: var(--colors-surface-brand-1-subtle);
 }
@@ -1126,6 +1142,10 @@
     background: var(--colors-surface-action-subtle-hover);
 }
 
+  .hover\:td_unset:is(:hover, [data-hover]) {
+    text-decoration: unset;
+}
+
   .hover\:bd-c_text\.link:is(:hover, [data-hover]) {
     border-color: var(--colors-text-link);
 }

package/es/Embed/AudioEmbed.js

@@ -7,11 +7,17 @@
  */
 
 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 {
@@ -45,7 +51,7 @@ const AudioEmbed = _ref => {
     alt: coverPhoto.altText
   };
   const licenseProps = licenseAttributes(data.copyright.license.license, lang, embedData.url);
-  return /*#__PURE__*/_jsxs(Figure, {
+  return /*#__PURE__*/_jsxs(StyledFigure, {
     lang: lang,
     "data-embed-type": type,
     ...licenseProps,

package/es/Embed/ExternalEmbed.js

@@ -8,11 +8,14 @@
 
 import { useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { Figure } from "@ndla/primitives";
+import { ArrowRightShortLine } from "@ndla/icons";
+import { Figure, Text } from "@ndla/primitives";
+import { SafeLink } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
+import { linkOverlay } from "@ndla/styled-system/patterns";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
 import { ResourceBox } from "../ResourceBox";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const StyledFigure = styled(Figure, {
   base: {
     "& iframe": {
@@ -21,6 +24,55 @@ const StyledFigure = styled(Figure, {
     }
   }
 });
+
+// TODO: Move this to own component in UI? Use variant of existing?
+const StyledSafeLink = styled(SafeLink, {
+  base: {
+    textDecoration: "underline",
+    textStyle: "label.large",
+    color: "text.link",
+    fontWeight: "bold",
+    _hover: {
+      textDecoration: "unset"
+    }
+  }
+});
+const LinkWrapper = styled("div", {
+  base: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "xsmall"
+  }
+});
+const TextWrapper = styled("div", {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    gap: "xxsmall"
+  }
+});
+const Wrapper = styled("div", {
+  base: {
+    display: "flex",
+    width: "100%",
+    gap: "small",
+    flexDirection: "column",
+    backgroundColor: "surface.brand.2.subtle",
+    borderRadius: "xxsmall",
+    padding: "medium",
+    border: "1px solid",
+    borderColor: "stroke.info"
+  }
+});
+const UrlText = styled(Text, {
+  base: {
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    overflow: "hidden"
+  }
+});
 const ExternalEmbed = _ref => {
   let {
     embed
@@ -63,11 +115,35 @@ const ExternalEmbed = _ref => {
       })
     });
   }
+  if (embedData.type === "link") {
+    return /*#__PURE__*/_jsx(Figure, {
+      "data-embed-type": "external",
+      children: /*#__PURE__*/_jsxs(Wrapper, {
+        children: [/*#__PURE__*/_jsxs(LinkWrapper, {
+          children: [/*#__PURE__*/_jsxs(TextWrapper, {
+            children: [/*#__PURE__*/_jsx(StyledSafeLink, {
+              to: embedData.url,
+              unstyled: true,
+              css: linkOverlay.raw(),
+              children: embedData.title
+            }), /*#__PURE__*/_jsx(Text, {
+              textStyle: "label.medium",
+              children: embedData.caption
+            })]
+          }), /*#__PURE__*/_jsx(ArrowRightShortLine, {})]
+        }), /*#__PURE__*/_jsx(UrlText, {
+          textStyle: "label.medium",
+          color: "text.subtle",
+          children: embedData.url
+        })]
+      })
+    });
+  }
   return /*#__PURE__*/_jsx(StyledFigure, {
     "data-embed-type": "external",
     ref: figRef,
     dangerouslySetInnerHTML: {
-      __html: data.oembed.html ?? ""
+      __html: data?.oembed?.html ?? ""
     }
   });
 };

package/es/Embed/IframeEmbed.js

@@ -19,6 +19,11 @@ const StyledIframe = styled("iframe", {
     border: 0
   }
 });
+const StyledFigure = styled(Figure, {
+  base: {
+    clear: "both"
+  }
+});
 const IframeEmbed = _ref => {
   let {
     embed
@@ -52,7 +57,7 @@ const IframeEmbed = _ref => {
       src: iframeImage?.image.imageUrl,
       alt: alt ?? ""
     };
-    return /*#__PURE__*/_jsx(Figure, {
+    return /*#__PURE__*/_jsx(StyledFigure, {
       "data-embed-type": "iframe",
       children: /*#__PURE__*/_jsx(ResourceBox, {
         image: image,
@@ -72,7 +77,7 @@ const IframeEmbed = _ref => {
   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 /*#__PURE__*/_jsx(Figure, {
+  return /*#__PURE__*/_jsx(StyledFigure, {
     "data-embed-type": "iframe",
     children: /*#__PURE__*/_jsx(StyledIframe, {
       ref: iframeRef,

package/es/Embed/UuDisclaimerEmbed.js

@@ -37,6 +37,11 @@ const StyledSafeLink = styled(SafeLink, {
     }
   }
 });
+const Wrapper = styled("div", {
+  base: {
+    clear: "both"
+  }
+});
 const UuDisclaimerEmbed = _ref => {
   let {
     embed,
@@ -55,7 +60,7 @@ const UuDisclaimerEmbed = _ref => {
     rel: "noopener noreferrer",
     children: data.disclaimerLink.text
   }) : null;
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsxs(Wrapper, {
     role: "region",
     "data-embed-type": "uu-disclaimer",
     children: [/*#__PURE__*/_jsxs(StyledMessageBox, {

package/es/RelatedArticleList/RelatedArticleList.js

@@ -88,7 +88,8 @@ const StyledSection = styled("section", {
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
-    gap: "medium"
+    gap: "medium",
+    clear: "both"
   }
 });
 const StyledButton = styled(Button, {

package/lib/Embed/AudioEmbed.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getFirstNonEmptyLicenseCredits = exports.default = void 0;
 var _primitives = require("@ndla/primitives");
+var _jsx2 = require("@ndla/styled-system/jsx");
 var _EmbedErrorPlaceholder = _interopRequireDefault(require("./EmbedErrorPlaceholder"));
 var _AudioPlayer = _interopRequireDefault(require("../AudioPlayer"));
 var _LicenseByline = require("../LicenseByline");
@@ -19,6 +20,11 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  *
  */
 
+const StyledFigure = (0, _jsx2.styled)(_primitives.Figure, {
+  base: {
+    clear: "both"
+  }
+});
 const getFirstNonEmptyLicenseCredits = authors => Object.values(authors).find(i => i.length > 0) ?? [];
 exports.getFirstNonEmptyLicenseCredits = getFirstNonEmptyLicenseCredits;
 const AudioEmbed = _ref => {
@@ -53,7 +59,7 @@ const AudioEmbed = _ref => {
     alt: coverPhoto.altText
   };
   const licenseProps = (0, _licenseAttributes.licenseAttributes)(data.copyright.license.license, lang, embedData.url);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.Figure, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledFigure, {
     lang: lang,
     "data-embed-type": type,
     ...licenseProps,

package/lib/Embed/ExternalEmbed.js

@@ -6,8 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _reactI18next = require("react-i18next");
+var _icons = require("@ndla/icons");
 var _primitives = require("@ndla/primitives");
+var _safelink = require("@ndla/safelink");
 var _jsx2 = require("@ndla/styled-system/jsx");
+var _patterns = require("@ndla/styled-system/patterns");
 var _EmbedErrorPlaceholder = _interopRequireDefault(require("./EmbedErrorPlaceholder"));
 var _ResourceBox = require("../ResourceBox");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -28,6 +31,55 @@ const StyledFigure = (0, _jsx2.styled)(_primitives.Figure, {
     }
   }
 });
+
+// TODO: Move this to own component in UI? Use variant of existing?
+const StyledSafeLink = (0, _jsx2.styled)(_safelink.SafeLink, {
+  base: {
+    textDecoration: "underline",
+    textStyle: "label.large",
+    color: "text.link",
+    fontWeight: "bold",
+    _hover: {
+      textDecoration: "unset"
+    }
+  }
+});
+const LinkWrapper = (0, _jsx2.styled)("div", {
+  base: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "xsmall"
+  }
+});
+const TextWrapper = (0, _jsx2.styled)("div", {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    gap: "xxsmall"
+  }
+});
+const Wrapper = (0, _jsx2.styled)("div", {
+  base: {
+    display: "flex",
+    width: "100%",
+    gap: "small",
+    flexDirection: "column",
+    backgroundColor: "surface.brand.2.subtle",
+    borderRadius: "xxsmall",
+    padding: "medium",
+    border: "1px solid",
+    borderColor: "stroke.info"
+  }
+});
+const UrlText = (0, _jsx2.styled)(_primitives.Text, {
+  base: {
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    overflow: "hidden"
+  }
+});
 const ExternalEmbed = _ref => {
   let {
     embed
@@ -70,11 +122,35 @@ const ExternalEmbed = _ref => {
       })
     });
   }
+  if (embedData.type === "link") {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Figure, {
+      "data-embed-type": "external",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(LinkWrapper, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(TextWrapper, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSafeLink, {
+              to: embedData.url,
+              unstyled: true,
+              css: _patterns.linkOverlay.raw(),
+              children: embedData.title
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
+              textStyle: "label.medium",
+              children: embedData.caption
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ArrowRightShortLine, {})]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(UrlText, {
+          textStyle: "label.medium",
+          color: "text.subtle",
+          children: embedData.url
+        })]
+      })
+    });
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFigure, {
     "data-embed-type": "external",
     ref: figRef,
     dangerouslySetInnerHTML: {
-      __html: data.oembed.html ?? ""
+      __html: data?.oembed?.html ?? ""
     }
   });
 };

package/lib/Embed/IframeEmbed.js

@@ -26,6 +26,11 @@ const StyledIframe = (0, _jsx2.styled)("iframe", {
     border: 0
   }
 });
+const StyledFigure = (0, _jsx2.styled)(_primitives.Figure, {
+  base: {
+    clear: "both"
+  }
+});
 const IframeEmbed = _ref => {
   let {
     embed
@@ -59,7 +64,7 @@ const IframeEmbed = _ref => {
       src: iframeImage?.image.imageUrl,
       alt: alt ?? ""
     };
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Figure, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFigure, {
       "data-embed-type": "iframe",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResourceBox.ResourceBox, {
         image: image,
@@ -79,7 +84,7 @@ const IframeEmbed = _ref => {
   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 /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Figure, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFigure, {
     "data-embed-type": "iframe",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledIframe, {
       ref: iframeRef,

package/lib/Embed/UuDisclaimerEmbed.js

@@ -43,6 +43,11 @@ const StyledSafeLink = (0, _jsx2.styled)(_safelink.SafeLink, {
     }
   }
 });
+const Wrapper = (0, _jsx2.styled)("div", {
+  base: {
+    clear: "both"
+  }
+});
 const UuDisclaimerEmbed = _ref => {
   let {
     embed,
@@ -61,7 +66,7 @@ const UuDisclaimerEmbed = _ref => {
     rel: "noopener noreferrer",
     children: data.disclaimerLink.text
   }) : null;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
     role: "region",
     "data-embed-type": "uu-disclaimer",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledMessageBox, {

package/lib/RelatedArticleList/RelatedArticleList.js

@@ -95,7 +95,8 @@ const StyledSection = (0, _jsx2.styled)("section", {
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
-    gap: "medium"
+    gap: "medium",
+    clear: "both"
   }
 });
 const StyledButton = (0, _jsx2.styled)(_primitives.Button, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.85-alpha.0",
+  "version": "56.0.87-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -35,8 +35,8 @@
     "@ndla/core": "^5.0.3",
     "@ndla/icons": "^8.0.49-alpha.0",
     "@ndla/licenses": "^8.0.6-alpha.0",
-    "@ndla/primitives": "^1.0.68-alpha.0",
-    "@ndla/safelink": "^7.0.69-alpha.0",
+    "@ndla/primitives": "^1.0.69-alpha.0",
+    "@ndla/safelink": "^7.0.70-alpha.0",
     "@ndla/styled-system": "^0.0.30",
     "@ndla/util": "^5.0.5-alpha.0",
     "html-react-parser": "^5.1.19",
@@ -52,11 +52,11 @@
   "devDependencies": {
     "@ndla/preset-panda": "^0.0.49",
     "@ndla/types-backend": "^1.0.1",
-    "@ndla/types-embed": "^5.0.6-alpha.0",
+    "@ndla/types-embed": "^5.0.8-alpha.0",
     "@pandacss/dev": "^0.48.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7960790a61f90467f2c0b0919201967eac276662"
+  "gitHead": "34ad8530b56efe3dc38052ccffaa6cd03d940d01"
 }

package/src/Embed/AudioEmbed.tsx

@@ -7,6 +7,7 @@
  */
 
 import { Figure } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 import type { AudioMetaData } from "@ndla/types-embed";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
 import type { Author } from "./ImageEmbed";
@@ -14,6 +15,12 @@ import AudioPlayer from "../AudioPlayer";
 import { EmbedByline } from "../LicenseByline";
 import { licenseAttributes } from "../utils/licenseAttributes";
 
+const StyledFigure = styled(Figure, {
+  base: {
+    clear: "both",
+  },
+});
+
 interface Props {
   embed: AudioMetaData;
   lang?: string;
@@ -46,7 +53,7 @@ const AudioEmbed = ({ embed, lang }: Props) => {
   const licenseProps = licenseAttributes(data.copyright.license.license, lang, embedData.url);
 
   return (
-    <Figure lang={lang} data-embed-type={type} {...licenseProps}>
+    <StyledFigure lang={lang} data-embed-type={type} {...licenseProps}>
       <AudioPlayer
         description={data.podcastMeta?.introduction ?? ""}
         img={img}
@@ -64,7 +71,7 @@ const AudioEmbed = ({ embed, lang }: Props) => {
         type={data.audioType === "standard" ? "audio" : "podcast"}
         copyright={embed.data.copyright}
       />
-    </Figure>
+    </StyledFigure>
   );
 };
 

package/src/Embed/BrightcoveEmbed.stories.tsx

@@ -105,7 +105,7 @@ const visuallyInterpretedEmbedMetaData: BrightcoveMetaData = {
         src: "https://cf-images.eu-west-1.prod.boltdns.net/v1/static/4806596774001/a09bcb7b-ffe1-4c3a-98ea-bf997340a8cd/23f01e33-413e-418c-a4de-2c87c8b05c26/1280x720/match/image.jpg",
       },
     },
-    link: { text: "6242635463001" },
+    link: { text: "6242635463001", url: "" },
     long_description: null,
     name: "Frivillighet i helse og omsorgstjenesten (synstolket)",
     published_at: "2021-03-25T11:40:38.476Z",

package/src/Embed/ExternalEmbed.stories.tsx

@@ -174,3 +174,14 @@ export const Fullscreen: StoryObj<typeof ExternalEmbed> = {
     },
   },
 };
+
+export const Link: StoryObj<typeof ExternalEmbed> = {
+  args: {
+    embed: {
+      resource: "external",
+      status: "success",
+      embedData: { ...embedDataFullscreen, type: "link" },
+      data: opensInNewMetaData,
+    },
+  },
+};

package/src/Embed/ExternalEmbed.tsx

@@ -8,8 +8,11 @@
 
 import { useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { Figure } from "@ndla/primitives";
+import { ArrowRightShortLine } from "@ndla/icons";
+import { Figure, Text } from "@ndla/primitives";
+import { SafeLink } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
+import { linkOverlay } from "@ndla/styled-system/patterns";
 import type { OembedMetaData } from "@ndla/types-embed";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
 import { ResourceBox } from "../ResourceBox";
@@ -27,6 +30,59 @@ const StyledFigure = styled(Figure, {
   },
 });
 
+// TODO: Move this to own component in UI? Use variant of existing?
+const StyledSafeLink = styled(SafeLink, {
+  base: {
+    textDecoration: "underline",
+    textStyle: "label.large",
+    color: "text.link",
+    fontWeight: "bold",
+    _hover: {
+      textDecoration: "unset",
+    },
+  },
+});
+
+const LinkWrapper = styled("div", {
+  base: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "xsmall",
+  },
+});
+
+const TextWrapper = styled("div", {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    gap: "xxsmall",
+  },
+});
+
+const Wrapper = styled("div", {
+  base: {
+    display: "flex",
+    width: "100%",
+    gap: "small",
+    flexDirection: "column",
+    backgroundColor: "surface.brand.2.subtle",
+    borderRadius: "xxsmall",
+    padding: "medium",
+    border: "1px solid",
+    borderColor: "stroke.info",
+  },
+});
+
+const UrlText = styled(Text, {
+  base: {
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+  },
+});
+
 const ExternalEmbed = ({ embed }: Props) => {
   const { t } = useTranslation();
   const figRef = useRef<HTMLElement>(null);
@@ -65,13 +121,33 @@ const ExternalEmbed = ({ embed }: Props) => {
     );
   }
 
+  if (embedData.type === "link") {
+    return (
+      <Figure data-embed-type="external">
+        <Wrapper>
+          <LinkWrapper>
+            <TextWrapper>
+              <StyledSafeLink to={embedData.url} unstyled css={linkOverlay.raw()}>
+                {embedData.title}
+              </StyledSafeLink>
+              <Text textStyle="label.medium">{embedData.caption}</Text>
+            </TextWrapper>
+            <ArrowRightShortLine />
+          </LinkWrapper>
+          <UrlText textStyle="label.medium" color="text.subtle">
+            {embedData.url}
+          </UrlText>
+        </Wrapper>
+      </Figure>
+    );
+  }
+
   return (
     <StyledFigure
       data-embed-type="external"
       ref={figRef}
-      dangerouslySetInnerHTML={{ __html: data.oembed.html ?? "" }}
+      dangerouslySetInnerHTML={{ __html: data?.oembed?.html ?? "" }}
     />
   );
 };
-
 export default ExternalEmbed;

package/src/Embed/IframeEmbed.tsx

@@ -25,6 +25,12 @@ const StyledIframe = styled("iframe", {
   },
 });
 
+const StyledFigure = styled(Figure, {
+  base: {
+    clear: "both",
+  },
+});
+
 const IframeEmbed = ({ embed }: Props) => {
   const { t } = useTranslation();
   const iframeRef = useRef<HTMLIFrameElement>(null);
@@ -50,7 +56,7 @@ const IframeEmbed = ({ embed }: Props) => {
     const alt = embedData.alt !== undefined ? embedData.alt : iframeImage?.alttext.alttext;
     const image = { src: iframeImage?.image.imageUrl, alt: alt ?? "" };
     return (
-      <Figure data-embed-type="iframe">
+      <StyledFigure data-embed-type="iframe">
         <ResourceBox
           image={image}
           title={embedData.title ?? ""}
@@ -58,7 +64,7 @@ const IframeEmbed = ({ embed }: Props) => {
           caption={embedData.caption ?? ""}
           buttonText={t("license.other.itemImage.ariaLabel")}
         />
-      </Figure>
+      </StyledFigure>
     );
   }
 
@@ -69,7 +75,7 @@ const IframeEmbed = ({ embed }: Props) => {
   const urlOrTitle = title || url;
 
   return (
-    <Figure data-embed-type="iframe">
+    <StyledFigure data-embed-type="iframe">
       <StyledIframe
         ref={iframeRef}
         title={urlOrTitle}
@@ -80,7 +86,7 @@ const IframeEmbed = ({ embed }: Props) => {
         allow="fullscreen; encrypted-media"
         loading="lazy"
       />
-    </Figure>
+    </StyledFigure>
   );
 };
 

package/src/Embed/UuDisclaimerEmbed.tsx

@@ -45,6 +45,12 @@ const StyledSafeLink = styled(SafeLink, {
   },
 });
 
+const Wrapper = styled("div", {
+  base: {
+    clear: "both",
+  },
+});
+
 const UuDisclaimerEmbed = ({ embed, children }: Props) => {
   if (embed.status === "error") {
     return null;
@@ -59,7 +65,7 @@ const UuDisclaimerEmbed = ({ embed, children }: Props) => {
   ) : null;
 
   return (
-    <div role="region" data-embed-type="uu-disclaimer">
+    <Wrapper role="region" data-embed-type="uu-disclaimer">
       <StyledMessageBox variant="warning" contentEditable={false}>
         <InformationLine />
         <Disclaimer>
@@ -68,7 +74,7 @@ const UuDisclaimerEmbed = ({ embed, children }: Props) => {
         </Disclaimer>
       </StyledMessageBox>
       <div data-uu-content="">{children}</div>
-    </div>
+    </Wrapper>
   );
 };
 

package/src/RelatedArticleList/RelatedArticleList.tsx

@@ -98,6 +98,7 @@ const StyledSection = styled("section", {
     flexDirection: "column",
     alignItems: "center",
     gap: "medium",
+    clear: "both",
   },
 });