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

package/dist/panda.buildinfo.json

@@ -22,6 +22,8 @@
       "gap]___[value:xxlarge",
       "paddingBlockEnd]___[value:5xlarge]___[cond:& > :is(:last-child)",
       "minHeight]___[value:xxlarge",
+      "gap]___[value:small",
+      "flexWrap]___[value:wrap",
       "marginBlockStart]___[value:medium",
       "paddingBlockStart]___[value:xsmall",
       "borderTop]___[value:1px solid",
@@ -99,7 +101,6 @@
       "height]___[value:surface.3xsmall",
       "minWidth]___[value:small",
       "paddingInline]___[value:small",
-      "flexWrap]___[value:wrap",
       "alignItems]___[value:flex-start]___[cond:mobileDown",
       "justifyContent]___[value:center]___[cond:mobileDown",
       "flexDirection]___[value:column]___[cond:mobileDown",
@@ -218,6 +219,15 @@
       "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",
+      "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",
@@ -241,10 +251,8 @@
       "transitionProperty]___[value:transform]___[cond:& svg",
       "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",
+      "alignSelf]___[value:flex-end",
+      "fill]___[value:icon.subtle",
       "color]___[value:text.strong]___[cond:& a",
       "marginTop]___[value:0]___[cond:& h1",
       "marginBottom]___[value:medium",
@@ -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",
@@ -347,6 +352,7 @@
       "whiteSpace]___[value:pre-wrap]___[cond:mobileWideDown<___>_open",
       "maxHeight]___[value:none]___[cond:mobileWideDown<___>_open",
       "display]___[value:none]___[cond:mobileWide",
+      "textDecoration]___[value:none]___[cond:_focusWithin",
       "display]___[value:none]___[cond:mobileWideDown<___>_disabled",
       "textDecoration]___[value:underline]___[cond:& h3",
       "transitionProperty]___[value:width, height]___[cond:& [data-forward]",

package/dist/styles.css

@@ -160,6 +160,10 @@
     min-height: var(--sizes-xxlarge);
 }
 
+  .gap_small {
+    gap: var(--spacing-small);
+}
+
   .mbs_medium {
     margin-block-start: var(--spacing-medium);
 }
@@ -441,6 +445,22 @@
     background: var(--colors-background-subtle);
 }
 
+  .c_text\.link {
+    color: var(--colors-text-link);
+}
+
+  .bdr_xxsmall {
+    border-radius: xxsmall;
+}
+
+  .tov_ellipsis {
+    text-overflow: ellipsis;
+}
+
+  .white-space_nowrap {
+    white-space: nowrap;
+}
+
   .z_docked {
     z-index: var(--z-index-docked);
 }
@@ -469,16 +489,8 @@
     border-radius: var(--radii-large);
 }
 
-  .ps_4xsmall {
-    padding-inline-start: var(--spacing-4xsmall);
-}
-
-  .c_text\.link {
-    color: var(--colors-text-link);
-}
-
-  .white-space_nowrap {
-    white-space: nowrap;
+  .fill_icon\.subtle {
+    fill: var(--colors-icon-subtle);
 }
 
   .my_xxlarge {
@@ -509,10 +521,6 @@
     border-block-end: 1px solid;
 }
 
-  .gap_small {
-    gap: var(--spacing-small);
-}
-
   .px_0 {
     padding-inline: 0;
 }
@@ -581,6 +589,10 @@
     align-items: flex-start;
 }
 
+  .flex-wrap_wrap {
+    flex-wrap: wrap;
+}
+
   .bd-c_stroke\.subtle {
     border-color: var(--colors-stroke-subtle);
 }
@@ -609,10 +621,6 @@
     flex-shrink: 0;
 }
 
-  .flex-wrap_wrap {
-    flex-wrap: wrap;
-}
-
   .ai_flex-end {
     align-items: flex-end;
 }
@@ -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);
 }
@@ -700,6 +716,10 @@
     background-color: var(--colors-surface-action);
 }
 
+  .as_flex-end {
+    align-self: flex-end;
+}
+
   .mb_medium {
     margin-bottom: var(--spacing-medium);
 }
@@ -895,6 +915,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 +991,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 +1146,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/Article/Article.js

@@ -100,6 +100,14 @@ const StyledStack = styled(Stack, {
     minHeight: "xxlarge"
   }
 });
+const StyledWrapper = styled("div", {
+  base: {
+    display: "flex",
+    gap: "small",
+    flexWrap: "wrap",
+    alignItems: "center"
+  }
+});
 export const ArticleTitle = _ref2 => {
   let {
     contentType,
@@ -109,7 +117,8 @@ export const ArticleTitle = _ref2 => {
     id,
     introduction,
     contentTypeLabel,
-    competenceGoals
+    competenceGoals,
+    disclaimer
   } = _ref2;
   return /*#__PURE__*/_jsxs(ArticleHeader, {
     children: [/*#__PURE__*/_jsxs(ArticleHGroup, {
@@ -137,7 +146,9 @@ export const ArticleTitle = _ref2 => {
       children: /*#__PURE__*/_jsx("div", {
         children: introduction
       })
-    }), competenceGoals]
+    }), /*#__PURE__*/_jsxs(StyledWrapper, {
+      children: [competenceGoals, disclaimer]
+    })]
   });
 };
 export const Article = _ref3 => {
@@ -150,7 +161,8 @@ export const Article = _ref3 => {
     contentTypeLabel,
     id,
     heartButton,
-    lang
+    lang,
+    disclaimer
   } = _ref3;
   const {
     title,
@@ -170,7 +182,8 @@ export const Article = _ref3 => {
       introduction: introduction,
       competenceGoals: competenceGoals,
       lang: lang,
-      contentTypeLabel: contentTypeLabel
+      contentTypeLabel: contentTypeLabel,
+      disclaimer: disclaimer
     }), /*#__PURE__*/_jsx(ArticleContent, {
       children: content
     }), /*#__PURE__*/_jsxs(ArticleFooter, {

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/UuDisclaimerEmbed.js

@@ -6,68 +6,73 @@
  *
  */
 
-import { InformationLine } from "@ndla/icons";
-import { MessageBox } from "@ndla/primitives";
-import { SafeLink } from "@ndla/safelink";
+import { useTranslation } from "react-i18next";
+import { Portal } from "@ark-ui/react";
+import { AccessibilityFill, ErrorWarningFill } from "@ndla/icons";
+import { IconButton, PopoverContent, PopoverRoot, PopoverTrigger, PopoverTitle } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const StyledMessageBox = styled(MessageBox, {
+const DisclaimerWrapper = styled("div", {
   base: {
     display: "flex",
-    alignItems: "center",
-    marginBlockEnd: "xsmall"
+    flexDirection: "column",
+    gap: "3xsmall",
+    clear: "both"
   }
 });
-const Disclaimer = styled("div", {
+const StyledIconButton = styled(IconButton, {
   base: {
-    textStyle: "body.medium"
+    alignSelf: "flex-end"
   }
 });
-const StyledSafeLink = styled(SafeLink, {
+const StyledErrorWarningFill = styled(ErrorWarningFill, {
   base: {
-    paddingInlineStart: "4xsmall",
-    color: "text.link",
-    textDecoration: "underline",
-    whiteSpace: "nowrap",
-    _hover: {
-      textDecoration: "none"
-    },
-    _focusWithin: {
-      textDecoration: "none"
-    }
-  }
-});
-const Wrapper = styled("div", {
-  base: {
-    clear: "both"
+    alignSelf: "flex-end",
+    fill: "icon.subtle"
   }
 });
 const UuDisclaimerEmbed = _ref => {
   let {
     embed,
+    transformedDisclaimer,
     children
   } = _ref;
+  const {
+    t
+  } = useTranslation();
   if (embed.status === "error") {
-    return null;
+    return /*#__PURE__*/_jsxs(DisclaimerWrapper, {
+      children: [/*#__PURE__*/_jsx(StyledErrorWarningFill, {
+        "aria-label": t("embed.embedError", {
+          type: t("embed.type.disclaimer")
+        }),
+        title: t("embed.embedError", {
+          type: t("embed.type.disclaimer")
+        })
+      }), children]
+    });
   }
-  const {
-    embedData,
-    data
-  } = embed;
-  const disclaimerLink = data?.disclaimerLink ? /*#__PURE__*/_jsx(StyledSafeLink, {
-    to: data.disclaimerLink.href,
-    target: "_blank",
-    rel: "noopener noreferrer",
-    children: data.disclaimerLink.text
-  }) : null;
-  return /*#__PURE__*/_jsxs(Wrapper, {
+  return /*#__PURE__*/_jsxs(DisclaimerWrapper, {
     role: "region",
     "data-embed-type": "uu-disclaimer",
-    children: [/*#__PURE__*/_jsxs(StyledMessageBox, {
-      variant: "warning",
-      contentEditable: false,
-      children: [/*#__PURE__*/_jsx(InformationLine, {}), /*#__PURE__*/_jsxs(Disclaimer, {
-        children: [embedData.disclaimer, disclaimerLink]
+    children: [/*#__PURE__*/_jsxs(PopoverRoot, {
+      children: [/*#__PURE__*/_jsx(PopoverTrigger, {
+        asChild: true,
+        children: /*#__PURE__*/_jsx(StyledIconButton, {
+          size: "small",
+          variant: "secondary",
+          "aria-label": t("uuDisclaimer.title"),
+          title: t("uuDisclaimer.title"),
+          children: /*#__PURE__*/_jsx(AccessibilityFill, {})
+        })
+      }), /*#__PURE__*/_jsx(Portal, {
+        children: /*#__PURE__*/_jsxs(PopoverContent, {
+          children: [/*#__PURE__*/_jsx(PopoverTitle, {
+            children: t("uuDisclaimer.title")
+          }), /*#__PURE__*/_jsx("div", {
+            children: transformedDisclaimer
+          })]
+        })
       })]
     }), /*#__PURE__*/_jsx("div", {
       "data-uu-content": "",

package/es/locale/messages-en.js

@@ -1405,9 +1405,13 @@ const messages = {
       external: "External resource",
       gloss: "Gloss",
       copyright: "Text",
-      code: "Code block"
+      code: "Code block",
+      disclaimer: "Accessibility warning"
     }
   },
+  uuDisclaimer: {
+    title: "Accessibility"
+  },
   gloss: {
     examples: "Examples",
     showExamples: "Show examples",

package/es/locale/messages-nb.js

@@ -1405,9 +1405,13 @@ const messages = {
       external: "Ekstern ressurs",
       gloss: "Glose",
       copyright: "Tekst",
-      code: "Kodeblokk"
+      code: "Kodeblokk",
+      disclaimer: "UU-advarsel"
     }
   },
+  uuDisclaimer: {
+    title: "Tilgjengelighet"
+  },
   gloss: {
     examples: "Eksempler",
     showExamples: "Vis eksempler",

package/es/locale/messages-nn.js

@@ -1405,9 +1405,13 @@ const messages = {
       external: "Ekstern ressurs",
       gloss: "Glose",
       copyright: "Tekst",
-      code: "Kodeblokk"
+      code: "Kodeblokk",
+      disclaimer: "UU-advarsel"
     }
   },
+  uuDisclaimer: {
+    title: "Tilgjengelighet"
+  },
   gloss: {
     examples: "Eksempler",
     showExamples: "Vis eksempler",

package/es/locale/messages-se.js

@@ -1405,9 +1405,13 @@ const messages = {
       external: "Olgguldas resursa",
       gloss: "Glose",
       copyright: "Tekst",
-      code: "Kodeblokk"
+      code: "Kodeblokk",
+      disclaimer: "UU-advarsel"
     }
   },
+  uuDisclaimer: {
+    title: "Tilgjengelighet"
+  },
   gloss: {
     examples: "Ovdamearkkat",
     showExamples: "Vis eksempler",

package/es/locale/messages-sma.js

@@ -1405,9 +1405,13 @@ const messages = {
       external: "Ekstern ressurs",
       gloss: "Glosa",
       copyright: "Tekst",
-      code: "Kodeblokk"
+      code: "Kodeblokk",
+      disclaimer: "UU-advarsel"
     }
   },
+  uuDisclaimer: {
+    title: "Tilgjengelighet"
+  },
   gloss: {
     examples: "Eksempler",
     showExamples: "Vis eksempler",

package/lib/Article/Article.d.ts

@@ -26,8 +26,9 @@ interface ArticleTitleProps {
     lang?: string;
     title?: ReactNode;
     introduction?: ReactNode;
+    disclaimer?: ReactNode;
 }
-export declare const ArticleTitle: ({ contentType, heartButton, title, lang, id, introduction, contentTypeLabel, competenceGoals, }: ArticleTitleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ArticleTitle: ({ contentType, heartButton, title, lang, id, introduction, contentTypeLabel, competenceGoals, disclaimer, }: ArticleTitleProps) => import("react/jsx-runtime").JSX.Element;
 interface Props {
     heartButton?: ReactNode;
     article: ArticleType;
@@ -38,6 +39,7 @@ interface Props {
     competenceGoals?: ReactNode;
     id: string;
     lang?: string;
+    disclaimer?: ReactNode;
 }
-export declare const Article: ({ article, contentType, licenseBox, children, competenceGoals, contentTypeLabel, id, heartButton, lang, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Article: ({ article, contentType, licenseBox, children, competenceGoals, contentTypeLabel, id, heartButton, lang, disclaimer, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/Article/Article.js

@@ -106,6 +106,14 @@ const StyledStack = (0, _jsx2.styled)(_jsx2.Stack, {
     minHeight: "xxlarge"
   }
 });
+const StyledWrapper = (0, _jsx2.styled)("div", {
+  base: {
+    display: "flex",
+    gap: "small",
+    flexWrap: "wrap",
+    alignItems: "center"
+  }
+});
 const ArticleTitle = _ref2 => {
   let {
     contentType,
@@ -115,7 +123,8 @@ const ArticleTitle = _ref2 => {
     id,
     introduction,
     contentTypeLabel,
-    competenceGoals
+    competenceGoals,
+    disclaimer
   } = _ref2;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ArticleHeader, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ArticleHGroup, {
@@ -143,7 +152,9 @@ const ArticleTitle = _ref2 => {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         children: introduction
       })
-    }), competenceGoals]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledWrapper, {
+      children: [competenceGoals, disclaimer]
+    })]
   });
 };
 exports.ArticleTitle = ArticleTitle;
@@ -157,7 +168,8 @@ const Article = _ref3 => {
     contentTypeLabel,
     id,
     heartButton,
-    lang
+    lang,
+    disclaimer
   } = _ref3;
   const {
     title,
@@ -177,7 +189,8 @@ const Article = _ref3 => {
       introduction: introduction,
       competenceGoals: competenceGoals,
       lang: lang,
-      contentTypeLabel: contentTypeLabel
+      contentTypeLabel: contentTypeLabel,
+      disclaimer: disclaimer
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ArticleContent, {
       children: content
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ArticleFooter, {