UU-Disclaimer embed updates

packages/icons/src/icons/AccessibilityFill.tsx

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+// N.B! AUTOGENERATED FILE. DO NOT EDIT;
+import Icon, { type Props } from "../Icon";
+const AccessibilityFill = (props: Props) => (
+  <Icon fill="currentColor" data-license="Apache License 2.0" data-source="NDLA" viewBox="0 0 20 20" {...props}>
+    <path d="M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20m0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16" />
+    <path
+      fillRule="evenodd"
+      d="M10 4a1.6 1.6 0 0 0 0 3.22c.88 0 1.6-.72 1.6-1.61A1.6 1.6 0 0 0 10 4m4.5 4.06c0-.66-.59-1.25-1.3-1.11l-.98.21a8.6 8.6 0 0 1-2.21.32h-.02a8.6 8.6 0 0 1-2.21-.32c-.3-.07-.63-.15-.98-.21-.71-.14-1.3.45-1.3 1.11 0 .51.36.98.88 1.09.62.17 1.25.33 1.87.48a15 15 0 0 1-.17 2.01 11.8 11.8 0 0 1-.62 1.94l-.34.92c-.22.62.15 1.37.86 1.49a1.1 1.1 0 0 0 1.2-.74l.82-2.43.82 2.43c.17.49.66.82 1.2.74.7-.12 1.08-.87.86-1.5-.1-.3-.22-.61-.34-.9-.25-.66-.49-1.29-.62-1.95a15 15 0 0 1-.17-2 81.8 81.8 0 0 0 1.87-.5c.52-.1.87-.57.88-1.08"
+      clipRule="evenodd"
+    />
+  </Icon>
+);
+export default AccessibilityFill;

packages/icons/src/icons/index.ts

@@ -7,6 +7,7 @@
  */
 
 // N.B! AUTOGENERATED FILE. DO NOT EDIT
+export { default as AccessibilityFill } from "./AccessibilityFill";
 export { default as AccountCircleFill } from "./AccountCircleFill";
 export { default as AccountCircleLine } from "./AccountCircleLine";
 export { default as AddLine } from "./AddLine";

packages/ndla-ui/src/Embed/UuDisclaimerEmbed.stories.tsx

@@ -47,23 +47,7 @@ export const Regular: StoryObj<typeof UuDisclaimerEmbed> = {
       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",
-        },
-      },
+      data: null,
     },
   },
 };
@@ -74,7 +58,7 @@ export const WithIframe: StoryObj<typeof UuDisclaimerEmbed> = {
       resource: "uu-disclaimer",
       status: "success",
       embedData: embedData,
-      data: {},
+      data: null,
     },
     children: (
       <IframeEmbed
@@ -99,7 +83,7 @@ export const WithH5p: StoryObj<typeof UuDisclaimerEmbed> = {
       resource: "uu-disclaimer",
       status: "success",
       embedData: embedData,
-      data: {},
+      data: null,
     },
     children: (
       <H5pEmbed
@@ -135,7 +119,7 @@ export const WithHtml: StoryObj<typeof UuDisclaimerEmbed> = {
       resource: "uu-disclaimer",
       status: "success",
       embedData: embedData,
-      data: {},
+      data: null,
     },
     children: (
       <>
@@ -155,7 +139,7 @@ export const WithFramedContent: StoryObj<typeof UuDisclaimerEmbed> = {
       resource: "uu-disclaimer",
       status: "success",
       embedData: embedData,
-      data: {},
+      data: null,
     },
     children: (
       <FramedContent>
@@ -171,7 +155,7 @@ export const WithFactBox: StoryObj<typeof UuDisclaimerEmbed> = {
       resource: "uu-disclaimer",
       status: "success",
       embedData: embedData,
-      data: {},
+      data: null,
     },
     children: (
       <FactBox>
@@ -187,7 +171,7 @@ export const WithCopyParagraphLink: StoryObj<typeof UuDisclaimerEmbed> = {
       resource: "uu-disclaimer",
       status: "success",
       embedData: embedData,
-      data: {},
+      data: null,
     },
     children: (
       <CopyParagraphButton copyText="Dette er en overskrift" lang="no">

packages/ndla-ui/src/Embed/UuDisclaimerEmbed.tsx

@@ -7,9 +7,10 @@
  */
 
 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 } from "@ndla/icons";
+import { Text, IconButton, PopoverContent, PopoverRoot, PopoverTrigger, PopoverTitle } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import type { UuDisclaimerMetaData } from "@ndla/types-embed";
 
@@ -18,57 +19,50 @@ interface Props {
   children?: ReactNode;
 }
 
-const StyledMessageBox = styled(MessageBox, {
+const DisclaimerWrapper = styled("div", {
   base: {
     display: "flex",
-    alignItems: "center",
-    marginBlockEnd: "xsmall",
+    flexDirection: "column",
+    gap: "3xsmall",
   },
 });
-const Disclaimer = styled("div", {
-  base: {
-    textStyle: "body.medium",
-  },
-});
-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 UuDisclaimerEmbed = ({ embed, children }: Props) => {
+  const { t } = useTranslation();
   if (embed.status === "error") {
     return null;
   }
 
-  const { embedData, data } = embed;
-
-  const disclaimerLink = data?.disclaimerLink ? (
-    <StyledSafeLink to={data.disclaimerLink.href} target="_blank" rel="noopener noreferrer">
-      {data.disclaimerLink.text}
-    </StyledSafeLink>
-  ) : null;
+  const { embedData } = embed;
 
   return (
-    <div 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>
+            <Text>{embedData.disclaimer}</Text>
+          </PopoverContent>
+        </Portal>
+      </PopoverRoot>
       <div data-uu-content="">{children}</div>
-    </div>
+    </DisclaimerWrapper>
   );
 };
 

packages/ndla-ui/src/locale/messages-en.ts

@@ -1441,6 +1441,7 @@ const messages = {
       code: "Code block",
     },
   },
+  uuDisclaimer: { title: "Accessibility" },
   gloss: {
     examples: "Examples",
     showExamples: "Show examples",

packages/ndla-ui/src/locale/messages-nb.ts

@@ -1442,6 +1442,7 @@ const messages = {
       code: "Kodeblokk",
     },
   },
+  uuDisclaimer: { title: "Tilgjengelighet" },
   gloss: {
     examples: "Eksempler",
     showExamples: "Vis eksempler",

packages/ndla-ui/src/locale/messages-nn.ts

@@ -1441,6 +1441,7 @@ const messages = {
       code: "Kodeblokk",
     },
   },
+  uuDisclaimer: { title: "Tilgjengelighet" },
   gloss: {
     examples: "Eksempler",
     showExamples: "Vis eksempler",

packages/ndla-ui/src/locale/messages-se.ts

@@ -1443,6 +1443,7 @@ const messages = {
       code: "Kodeblokk",
     },
   },
+  uuDisclaimer: { title: "Tilgjengelighet" },
   gloss: {
     examples: "Ovdamearkkat",
     showExamples: "Vis eksempler",

packages/ndla-ui/src/locale/messages-sma.ts

@@ -1445,6 +1445,7 @@ const messages = {
       code: "Kodeblokk",
     },
   },
+  uuDisclaimer: { title: "Tilgjengelighet" },
   gloss: {
     examples: "Eksempler",
     showExamples: "Vis eksempler",

packages/types-embed/src/index.ts

@@ -47,12 +47,7 @@ import type { KeyFigureEmbedData, KeyFigureMeta, KeyFigureMetaData } from "./key
 import type { LinkBlockEmbedData, LinkBlockMetaData } from "./linkBlockTypes";
 import type { PitchEmbedData, PitchMetaData, PitchMeta } from "./pitchTypes";
 import type { RelatedContentData, RelatedContentEmbedData, RelatedContentMetaData } from "./relatedContentTypes";
-import type {
-  DisclaimerLink,
-  UuDisclaimerData,
-  UuDisclaimerEmbedData,
-  UuDisclaimerMetaData,
-} from "./uuDisclaimerTypes";
+import type { UuDisclaimerEmbedData, UuDisclaimerMetaData } from "./uuDisclaimerTypes";
 
 export type EmbedData =
   | AudioEmbedData
@@ -155,7 +150,6 @@ export type { AudioMeta };
 export type { H5pData };
 export type { CampaignBlockMeta };
 export type { OembedProxyData, H5pPreviewResponse, H5pOembedData, H5pLicenseInformation, H5pInfo };
-export type { UuDisclaimerData, DisclaimerLink };
 
 interface MetaDataFailure<T extends EmbedData> {
   resource: T["resource"];

packages/types-embed/src/uuDisclaimerTypes.ts

@@ -8,19 +8,10 @@
 
 import type { MetaData } from ".";
 
-export interface DisclaimerLink {
-  text: string;
-  href: string;
-}
-
 export interface UuDisclaimerEmbedData {
   resource: "uu-disclaimer";
   disclaimer: string;
   articleId?: string;
 }
 
-export interface UuDisclaimerData {
-  disclaimerLink?: DisclaimerLink;
-}
-
-export type UuDisclaimerMetaData = MetaData<UuDisclaimerEmbedData, UuDisclaimerData>;
+export type UuDisclaimerMetaData = MetaData<UuDisclaimerEmbedData, null>;