UU-disclaimer to new design

NDLANO · Dec 13, 2024 · 28c4c3d · 28c4c3d
1 parent d4ecacf
commit 28c4c3d
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 78 deletions.
diff --git a/packages/ndla-ui/src/Embed/UuDisclaimerEmbed.stories.tsx b/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">

diff --git a/packages/ndla-ui/src/Embed/UuDisclaimerEmbed.tsx b/packages/ndla-ui/src/Embed/UuDisclaimerEmbed.tsx
@@ -7,9 +7,9 @@
  */
 
 import { type ReactNode } from "react";
-import { InformationLine } from "@ndla/icons";
-import { MessageBox } from "@ndla/primitives";
-import { SafeLink } from "@ndla/safelink";
+import { Portal } from "@ark-ui/react";
+import { AccesibilityLine } from "@ndla/icons";
+import { Text, IconButton, PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import type { UuDisclaimerMetaData } from "@ndla/types-embed";
 
@@ -18,30 +18,17 @@ interface Props {
   children?: ReactNode;
 }
 
-const StyledMessageBox = styled(MessageBox, {
+const DisclaimerWrapper = styled("div", {
   base: {
     display: "flex",
-    alignItems: "center",
-    marginBlockEnd: "xsmall",
+    flexDirection: "column",
   },
 });
-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",
-    },
+    marginInlineStart: "auto",
+    marginBlockEnd: "3xsmall",
   },
 });
 
@@ -50,25 +37,24 @@ const UuDisclaimerEmbed = ({ embed, children }: Props) => {
     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">
+            <AccesibilityLine />
+          </StyledIconButton>
+        </PopoverTrigger>
+        <Portal>
+          <PopoverContent>
+            <Text>{embedData.disclaimer}</Text>
+          </PopoverContent>
+        </Portal>
+      </PopoverRoot>
       <div data-uu-content="">{children}</div>
-    </div>
+    </DisclaimerWrapper>
   );
 };
 

diff --git a/packages/types-embed/src/index.ts b/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"];

diff --git a/packages/types-embed/src/uuDisclaimerTypes.ts b/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>;