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

package/dist/panda.buildinfo.json

@@ -218,6 +218,16 @@
       "clear]___[value:both]___[cond:& + [data-embed-wrapper]",
       "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

@@ -441,6 +441,26 @@
     background: var(--colors-background-subtle);
 }
 
+  .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 {
     z-index: var(--z-index-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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.86-alpha.0",
+  "version": "56.0.87-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -52,11 +52,11 @@
   "devDependencies": {
     "@ndla/preset-panda": "^0.0.49",
     "@ndla/types-backend": "^1.0.1",
-    "@ndla/types-embed": "^5.0.7-alpha.0",
+    "@ndla/types-embed": "^5.0.8-alpha.0",
     "@pandacss/dev": "^0.48.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ed6699652dec494cf9cf12712316ba5f4036438a"
+  "gitHead": "34ad8530b56efe3dc38052ccffaa6cd03d940d01"
 }

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;