@ndla/ui 56.0.87-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",
@@ -220,7 +221,6 @@
       "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",
@@ -251,8 +251,8 @@
       "transitionProperty]___[value:transform]___[cond:& svg",
       "transitionDuration]___[value:normal]___[cond:& svg",
       "transitionTimingFunction]___[value:ease-out]___[cond:& svg",
-      "paddingInlineStart]___[value:4xsmall",
-      "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",
@@ -352,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);
 }
@@ -445,10 +449,6 @@
     color: var(--colors-text-link);
 }
 
-  .gap_small {
-    gap: var(--spacing-small);
-}
-
   .bdr_xxsmall {
     border-radius: xxsmall;
 }
@@ -489,8 +489,8 @@
     border-radius: var(--radii-large);
 }
 
-  .ps_4xsmall {
-    padding-inline-start: var(--spacing-4xsmall);
+  .fill_icon\.subtle {
+    fill: var(--colors-icon-subtle);
 }
 
   .my_xxlarge {
@@ -589,6 +589,10 @@
     align-items: flex-start;
 }
 
+  .flex-wrap_wrap {
+    flex-wrap: wrap;
+}
+
   .bd-c_stroke\.subtle {
     border-color: var(--colors-stroke-subtle);
 }
@@ -617,10 +621,6 @@
     flex-shrink: 0;
 }
 
-  .flex-wrap_wrap {
-    flex-wrap: wrap;
-}
-
   .ai_flex-end {
     align-items: flex-end;
 }
@@ -716,6 +716,10 @@
     background-color: var(--colors-surface-action);
 }
 
+  .as_flex-end {
+    align-self: flex-end;
+}
+
   .mb_medium {
     margin-bottom: var(--spacing-medium);
 }

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/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, {

package/lib/Embed/UuDisclaimerEmbed.d.ts

@@ -9,7 +9,8 @@ import { type ReactNode } from "react";
 import type { UuDisclaimerMetaData } from "@ndla/types-embed";
 interface Props {
     embed: UuDisclaimerMetaData;
+    transformedDisclaimer: ReactNode;
     children?: ReactNode;
 }
-declare const UuDisclaimerEmbed: ({ embed, children }: Props) => import("react/jsx-runtime").JSX.Element | null;
+declare const UuDisclaimerEmbed: ({ embed, transformedDisclaimer, children }: Props) => import("react/jsx-runtime").JSX.Element;
 export default UuDisclaimerEmbed;

package/lib/Embed/UuDisclaimerEmbed.js

@@ -4,9 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _reactI18next = require("react-i18next");
+var _react = require("@ark-ui/react");
 var _icons = require("@ndla/icons");
 var _primitives = require("@ndla/primitives");
-var _safelink = require("@ndla/safelink");
 var _jsx2 = require("@ndla/styled-system/jsx");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
@@ -17,63 +18,67 @@ var _jsxRuntime = require("react/jsx-runtime");
  *
  */
 
-const StyledMessageBox = (0, _jsx2.styled)(_primitives.MessageBox, {
+const DisclaimerWrapper = (0, _jsx2.styled)("div", {
   base: {
     display: "flex",
-    alignItems: "center",
-    marginBlockEnd: "xsmall"
+    flexDirection: "column",
+    gap: "3xsmall",
+    clear: "both"
   }
 });
-const Disclaimer = (0, _jsx2.styled)("div", {
+const StyledIconButton = (0, _jsx2.styled)(_primitives.IconButton, {
   base: {
-    textStyle: "body.medium"
+    alignSelf: "flex-end"
   }
 });
-const StyledSafeLink = (0, _jsx2.styled)(_safelink.SafeLink, {
+const StyledErrorWarningFill = (0, _jsx2.styled)(_icons.ErrorWarningFill, {
   base: {
-    paddingInlineStart: "4xsmall",
-    color: "text.link",
-    textDecoration: "underline",
-    whiteSpace: "nowrap",
-    _hover: {
-      textDecoration: "none"
-    },
-    _focusWithin: {
-      textDecoration: "none"
-    }
-  }
-});
-const Wrapper = (0, _jsx2.styled)("div", {
-  base: {
-    clear: "both"
+    alignSelf: "flex-end",
+    fill: "icon.subtle"
   }
 });
 const UuDisclaimerEmbed = _ref => {
   let {
     embed,
+    transformedDisclaimer,
     children
   } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)();
   if (embed.status === "error") {
-    return null;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(DisclaimerWrapper, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(StyledSafeLink, {
-    to: data.disclaimerLink.href,
-    target: "_blank",
-    rel: "noopener noreferrer",
-    children: data.disclaimerLink.text
-  }) : null;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(DisclaimerWrapper, {
     role: "region",
     "data-embed-type": "uu-disclaimer",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledMessageBox, {
-      variant: "warning",
-      contentEditable: false,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.InformationLine, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Disclaimer, {
-        children: [embedData.disclaimer, disclaimerLink]
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.PopoverRoot, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.PopoverTrigger, {
+        asChild: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledIconButton, {
+          size: "small",
+          variant: "secondary",
+          "aria-label": t("uuDisclaimer.title"),
+          title: t("uuDisclaimer.title"),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.AccessibilityFill, {})
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Portal, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.PopoverContent, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.PopoverTitle, {
+            children: t("uuDisclaimer.title")
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: transformedDisclaimer
+          })]
+        })
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       "data-uu-content": "",

package/lib/locale/messages-en.d.ts

@@ -1396,8 +1396,12 @@ declare const messages: {
             gloss: string;
             copyright: string;
             code: string;
+            disclaimer: string;
         };
     };
+    uuDisclaimer: {
+        title: string;
+    };
     gloss: {
         examples: string;
         showExamples: string;

package/lib/locale/messages-en.js

@@ -1412,9 +1412,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/lib/locale/messages-nb.d.ts

@@ -1396,8 +1396,12 @@ declare const messages: {
             gloss: string;
             copyright: string;
             code: string;
+            disclaimer: string;
         };
     };
+    uuDisclaimer: {
+        title: string;
+    };
     gloss: {
         examples: string;
         showExamples: string;

package/lib/locale/messages-nb.js

@@ -1412,9 +1412,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/lib/locale/messages-nn.d.ts

@@ -1396,8 +1396,12 @@ declare const messages: {
             gloss: string;
             copyright: string;
             code: string;
+            disclaimer: string;
         };
     };
+    uuDisclaimer: {
+        title: string;
+    };
     gloss: {
         examples: string;
         showExamples: string;

package/lib/locale/messages-nn.js

@@ -1412,9 +1412,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/lib/locale/messages-se.d.ts

@@ -1396,8 +1396,12 @@ declare const messages: {
             gloss: string;
             copyright: string;
             code: string;
+            disclaimer: string;
         };
     };
+    uuDisclaimer: {
+        title: string;
+    };
     gloss: {
         examples: string;
         showExamples: string;

package/lib/locale/messages-se.js

@@ -1412,9 +1412,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/lib/locale/messages-sma.d.ts

@@ -1396,8 +1396,12 @@ declare const messages: {
             gloss: string;
             copyright: string;
             code: string;
+            disclaimer: string;
         };
     };
+    uuDisclaimer: {
+        title: string;
+    };
     gloss: {
         examples: string;
         showExamples: string;

package/lib/locale/messages-sma.js

@@ -1412,9 +1412,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.87-alpha.0",
+  "version": "56.0.88-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -33,7 +33,7 @@
   ],
   "dependencies": {
     "@ndla/core": "^5.0.3",
-    "@ndla/icons": "^8.0.49-alpha.0",
+    "@ndla/icons": "^8.0.50-alpha.0",
     "@ndla/licenses": "^8.0.6-alpha.0",
     "@ndla/primitives": "^1.0.69-alpha.0",
     "@ndla/safelink": "^7.0.70-alpha.0",
@@ -52,11 +52,11 @@
   "devDependencies": {
     "@ndla/preset-panda": "^0.0.49",
     "@ndla/types-backend": "^1.0.1",
-    "@ndla/types-embed": "^5.0.8-alpha.0",
+    "@ndla/types-embed": "^5.0.9-alpha.0",
     "@pandacss/dev": "^0.48.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "34ad8530b56efe3dc38052ccffaa6cd03d940d01"
+  "gitHead": "695e6f669f22dfac4d5fef96fd0463b690bb7973"
 }

package/src/Article/Article.tsx

@@ -109,6 +109,15 @@ const StyledStack = styled(Stack, {
   },
 });
 
+const StyledWrapper = styled("div", {
+  base: {
+    display: "flex",
+    gap: "small",
+    flexWrap: "wrap",
+    alignItems: "center",
+  },
+});
+
 interface ArticleTitleProps {
   heartButton?: ReactNode;
   contentType?: ContentType;
@@ -118,6 +127,7 @@ interface ArticleTitleProps {
   lang?: string;
   title?: ReactNode;
   introduction?: ReactNode;
+  disclaimer?: ReactNode;
 }
 
 export const ArticleTitle = ({
@@ -129,6 +139,7 @@ export const ArticleTitle = ({
   introduction,
   contentTypeLabel,
   competenceGoals,
+  disclaimer,
 }: ArticleTitleProps) => {
   return (
     <ArticleHeader>
@@ -148,7 +159,10 @@ export const ArticleTitle = ({
           <div>{introduction}</div>
         </Text>
       )}
-      {competenceGoals}
+      <StyledWrapper>
+        {competenceGoals}
+        {disclaimer}
+      </StyledWrapper>
     </ArticleHeader>
   );
 };
@@ -163,6 +177,7 @@ interface Props {
   competenceGoals?: ReactNode;
   id: string;
   lang?: string;
+  disclaimer?: ReactNode;
 }
 
 export const Article = ({
@@ -175,6 +190,7 @@ export const Article = ({
   id,
   heartButton,
   lang,
+  disclaimer,
 }: Props) => {
   const { title, introduction, published, content, footNotes, copyright } = article;
 
@@ -192,6 +208,7 @@ export const Article = ({
         competenceGoals={competenceGoals}
         lang={lang}
         contentTypeLabel={contentTypeLabel}
+        disclaimer={disclaimer}
       />
       <ArticleContent>{content}</ArticleContent>
       <ArticleFooter>

package/src/Embed/UuDisclaimerEmbed.stories.tsx

@@ -8,7 +8,7 @@
 
 import type { Meta, StoryObj } from "@storybook/react";
 import { ExpandableBox, ExpandableBoxSummary, FramedContent, PageContent } from "@ndla/primitives";
-import type { UuDisclaimerEmbedData } from "@ndla/types-embed";
+import type { UUDisclaimerData, UuDisclaimerEmbedData } from "@ndla/types-embed";
 import H5pEmbed from "./H5pEmbed";
 import IframeEmbed from "./IframeEmbed";
 import UuDisclaimerEmbed from "./UuDisclaimerEmbed";
@@ -19,13 +19,17 @@ import FactBox from "../FactBox";
 const embedData: UuDisclaimerEmbedData = {
   resource: "uu-disclaimer",
   disclaimer: "Dette inholdet er ikke tastaturvennlig.",
-  articleId: "123",
+};
+
+const data: UUDisclaimerData = {
+  transformedContent: "Dette inholdet er ikke tastaturvennlig.",
 };
 
 const meta: Meta<typeof UuDisclaimerEmbed> = {
   title: "Embeds/UuDisclaimerEmbed",
   component: UuDisclaimerEmbed,
   tags: ["autodocs"],
+  args: { transformedDisclaimer: data.transformedContent },
   decorators: [
     (Story) => (
       <PageContent variant="content" asChild>
@@ -46,24 +50,8 @@ export const Regular: StoryObj<typeof UuDisclaimerEmbed> = {
     embed: {
       resource: "uu-disclaimer",
       status: "success",
-      embedData: embedData,
-      data: {},
-    },
-  },
-};
-
-export const WithLink: StoryObj<typeof UuDisclaimerEmbed> = {
-  args: {
-    embed: {
-      resource: "uu-disclaimer",
-      status: "success",
-      embedData: embedData,
-      data: {
-        disclaimerLink: {
-          href: "https://ndla.no/article/123",
-          text: "Navn på artikkel med innhold",
-        },
-      },
+      embedData,
+      data,
     },
   },
 };
@@ -73,8 +61,8 @@ export const WithIframe: StoryObj<typeof UuDisclaimerEmbed> = {
     embed: {
       resource: "uu-disclaimer",
       status: "success",
-      embedData: embedData,
-      data: {},
+      embedData,
+      data,
     },
     children: (
       <IframeEmbed
@@ -98,8 +86,8 @@ export const WithH5p: StoryObj<typeof UuDisclaimerEmbed> = {
     embed: {
       resource: "uu-disclaimer",
       status: "success",
-      embedData: embedData,
-      data: {},
+      embedData,
+      data,
     },
     children: (
       <H5pEmbed
@@ -134,8 +122,8 @@ export const WithHtml: StoryObj<typeof UuDisclaimerEmbed> = {
     embed: {
       resource: "uu-disclaimer",
       status: "success",
-      embedData: embedData,
-      data: {},
+      embedData,
+      data,
     },
     children: (
       <>
@@ -154,8 +142,8 @@ export const WithFramedContent: StoryObj<typeof UuDisclaimerEmbed> = {
     embed: {
       resource: "uu-disclaimer",
       status: "success",
-      embedData: embedData,
-      data: {},
+      embedData,
+      data,
     },
     children: (
       <FramedContent>
@@ -170,8 +158,8 @@ export const WithFactBox: StoryObj<typeof UuDisclaimerEmbed> = {
     embed: {
       resource: "uu-disclaimer",
       status: "success",
-      embedData: embedData,
-      data: {},
+      embedData,
+      data,
     },
     children: (
       <FactBox>
@@ -186,8 +174,23 @@ export const WithCopyParagraphLink: StoryObj<typeof UuDisclaimerEmbed> = {
     embed: {
       resource: "uu-disclaimer",
       status: "success",
-      embedData: embedData,
-      data: {},
+      embedData,
+      data,
+    },
+    children: (
+      <CopyParagraphButton copyText="Dette er en overskrift" lang="no">
+        <h2>Dette er en overskrift</h2>
+      </CopyParagraphButton>
+    ),
+  },
+};
+
+export const Error: StoryObj<typeof UuDisclaimerEmbed> = {
+  args: {
+    embed: {
+      resource: "uu-disclaimer",
+      status: "error",
+      embedData,
     },
     children: (
       <CopyParagraphButton copyText="Dette er en overskrift" lang="no">

package/src/Embed/UuDisclaimerEmbed.tsx

@@ -7,74 +7,77 @@
  */
 
 import { type ReactNode } from "react";
-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 type { UuDisclaimerMetaData } from "@ndla/types-embed";
 
 interface Props {
   embed: UuDisclaimerMetaData;
+  transformedDisclaimer: ReactNode;
   children?: ReactNode;
 }
 
-const StyledMessageBox = styled(MessageBox, {
+const DisclaimerWrapper = styled("div", {
   base: {
     display: "flex",
-    alignItems: "center",
-    marginBlockEnd: "xsmall",
-  },
-});
-const Disclaimer = styled("div", {
-  base: {
-    textStyle: "body.medium",
+    flexDirection: "column",
+    gap: "3xsmall",
+    clear: "both",
   },
 });
-const StyledSafeLink = styled(SafeLink, {
+
+const StyledIconButton = styled(IconButton, {
   base: {
-    paddingInlineStart: "4xsmall",
-    color: "text.link",
-    textDecoration: "underline",
-    whiteSpace: "nowrap",
-    _hover: {
-      textDecoration: "none",
-    },
-    _focusWithin: {
-      textDecoration: "none",
-    },
+    alignSelf: "flex-end",
   },
 });
 
-const Wrapper = styled("div", {
+const StyledErrorWarningFill = styled(ErrorWarningFill, {
   base: {
-    clear: "both",
+    alignSelf: "flex-end",
+    fill: "icon.subtle",
   },
 });
 
-const UuDisclaimerEmbed = ({ embed, children }: Props) => {
+const UuDisclaimerEmbed = ({ embed, transformedDisclaimer, children }: Props) => {
+  const { t } = useTranslation();
   if (embed.status === "error") {
-    return null;
+    return (
+      <DisclaimerWrapper>
+        <StyledErrorWarningFill
+          aria-label={t("embed.embedError", { type: t("embed.type.disclaimer") })}
+          title={t("embed.embedError", { type: t("embed.type.disclaimer") })}
+        />
+        {children}
+      </DisclaimerWrapper>
+    );
   }
 
-  const { embedData, data } = embed;
-
-  const disclaimerLink = data?.disclaimerLink ? (
-    <StyledSafeLink to={data.disclaimerLink.href} target="_blank" rel="noopener noreferrer">
-      {data.disclaimerLink.text}
-    </StyledSafeLink>
-  ) : null;
-
   return (
-    <Wrapper role="region" data-embed-type="uu-disclaimer">
-      <StyledMessageBox variant="warning" contentEditable={false}>
-        <InformationLine />
-        <Disclaimer>
-          {embedData.disclaimer}
-          {disclaimerLink}
-        </Disclaimer>
-      </StyledMessageBox>
+    <DisclaimerWrapper role="region" data-embed-type="uu-disclaimer">
+      <PopoverRoot>
+        <PopoverTrigger asChild>
+          <StyledIconButton
+            size="small"
+            variant="secondary"
+            aria-label={t("uuDisclaimer.title")}
+            title={t("uuDisclaimer.title")}
+          >
+            <AccessibilityFill />
+          </StyledIconButton>
+        </PopoverTrigger>
+        <Portal>
+          <PopoverContent>
+            <PopoverTitle>{t("uuDisclaimer.title")}</PopoverTitle>
+            <div>{transformedDisclaimer}</div>
+          </PopoverContent>
+        </Portal>
+      </PopoverRoot>
       <div data-uu-content="">{children}</div>
-    </Wrapper>
+    </DisclaimerWrapper>
   );
 };
 

package/src/locale/messages-en.ts

@@ -1439,8 +1439,10 @@ const messages = {
       gloss: "Gloss",
       copyright: "Text",
       code: "Code block",
+      disclaimer: "Accessibility warning",
     },
   },
+  uuDisclaimer: { title: "Accessibility" },
   gloss: {
     examples: "Examples",
     showExamples: "Show examples",

package/src/locale/messages-nb.ts

@@ -1440,8 +1440,10 @@ const messages = {
       gloss: "Glose",
       copyright: "Tekst",
       code: "Kodeblokk",
+      disclaimer: "UU-advarsel",
     },
   },
+  uuDisclaimer: { title: "Tilgjengelighet" },
   gloss: {
     examples: "Eksempler",
     showExamples: "Vis eksempler",

package/src/locale/messages-nn.ts

@@ -1439,8 +1439,10 @@ const messages = {
       gloss: "Glose",
       copyright: "Tekst",
       code: "Kodeblokk",
+      disclaimer: "UU-advarsel",
     },
   },
+  uuDisclaimer: { title: "Tilgjengelighet" },
   gloss: {
     examples: "Eksempler",
     showExamples: "Vis eksempler",

package/src/locale/messages-se.ts

@@ -1441,8 +1441,10 @@ const messages = {
       gloss: "Glose",
       copyright: "Tekst",
       code: "Kodeblokk",
+      disclaimer: "UU-advarsel",
     },
   },
+  uuDisclaimer: { title: "Tilgjengelighet" },
   gloss: {
     examples: "Ovdamearkkat",
     showExamples: "Vis eksempler",

package/src/locale/messages-sma.ts

@@ -1443,8 +1443,10 @@ const messages = {
       gloss: "Glosa",
       copyright: "Tekst",
       code: "Kodeblokk",
+      disclaimer: "UU-advarsel",
     },
   },
+  uuDisclaimer: { title: "Tilgjengelighet" },
   gloss: {
     examples: "Eksempler",
     showExamples: "Vis eksempler",