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

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",