@ndla/ui 50.9.13 → 50.9.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "50.9.13",
+  "version": "50.9.14",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,23 +31,23 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^3.0.28",
-    "@ndla/button": "^12.0.33",
-    "@ndla/carousel": "^4.0.31",
-    "@ndla/core": "^4.4.0",
-    "@ndla/dropdown-menu": "^1.0.28",
-    "@ndla/forms": "^6.0.0",
+    "@ndla/accordion": "^3.0.29",
+    "@ndla/button": "^12.0.34",
+    "@ndla/carousel": "^4.0.32",
+    "@ndla/core": "^4.4.1",
+    "@ndla/dropdown-menu": "^1.0.29",
+    "@ndla/forms": "^6.0.1",
     "@ndla/hooks": "^2.1.5",
-    "@ndla/icons": "^5.0.10",
+    "@ndla/icons": "^5.0.11",
     "@ndla/licenses": "^7.2.5",
-    "@ndla/modal": "^5.0.30",
-    "@ndla/notion": "^6.0.31",
-    "@ndla/safelink": "^4.1.58",
-    "@ndla/select": "^3.3.5",
-    "@ndla/switch": "^1.1.34",
-    "@ndla/tabs": "^3.2.14",
-    "@ndla/tooltip": "^6.0.17",
-    "@ndla/typography": "^0.4.11",
+    "@ndla/modal": "^5.0.31",
+    "@ndla/notion": "^6.0.32",
+    "@ndla/safelink": "^4.1.59",
+    "@ndla/select": "^3.3.6",
+    "@ndla/switch": "^1.1.35",
+    "@ndla/tabs": "^3.2.15",
+    "@ndla/tooltip": "^6.0.18",
+    "@ndla/typography": "^0.4.12",
     "@ndla/util": "^4.0.4",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-slider": "^1.1.2",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f601ba5d0bb18af3191f6898ab4ef17d4a3889de"
+  "gitHead": "fa56ac6f7c5fa3a4f877f02d9d52c216ab496fa7"
 }

package/src/Embed/UuDisclaimerEmbed.stories.tsx

@@ -12,6 +12,8 @@ import H5pEmbed from "./H5pEmbed";
 import IframeEmbed from "./IframeEmbed";
 import UuDisclaimerEmbed from "./UuDisclaimerEmbed";
 import { defaultParameters } from "../../../../stories/defaults";
+import FactBox from "../FactBox";
+import FramedContent from "../FramedContent";
 
 const embedData: UuDisclaimerEmbedData = {
   resource: "uu-disclaimer",
@@ -139,7 +141,7 @@ export const WithHtml: StoryObj<typeof UuDisclaimerEmbed> = {
     },
     children: (
       <>
-        <h2>Dette er html med en ekspanderboks</h2>
+        <p>Dette er html med en ekspanderboks</p>
         <details>
           <summary>Tittel</summary>
           <p>innhold</p>
@@ -148,3 +150,35 @@ export const WithHtml: StoryObj<typeof UuDisclaimerEmbed> = {
     ),
   },
 };
+
+export const WithFramedContent: StoryObj<typeof UuDisclaimerEmbed> = {
+  args: {
+    embed: {
+      resource: "uu-disclaimer",
+      status: "success",
+      embedData: embedData,
+      data: {},
+    },
+    children: (
+      <FramedContent>
+        <p>Dette er tekst i ramme</p>
+      </FramedContent>
+    ),
+  },
+};
+
+export const WithFactBox: StoryObj<typeof UuDisclaimerEmbed> = {
+  args: {
+    embed: {
+      resource: "uu-disclaimer",
+      status: "success",
+      embedData: embedData,
+      data: {},
+    },
+    children: (
+      <FactBox>
+        <p>Dette er faktaboks</p>
+      </FactBox>
+    ),
+  },
+};

package/src/Embed/UuDisclaimerEmbed.tsx

@@ -9,6 +9,7 @@
 import { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
+import { spacing } from "@ndla/core";
 import { InformationOutline } from "@ndla/icons/common";
 import SafeLink from "@ndla/safelink";
 import { UuDisclaimerMetaData } from "@ndla/types-embed";
@@ -31,6 +32,12 @@ const Disclaimer = styled.div`
   -ms-user-select: none;
 `;
 
+const DisclaimerWrapper = styled.div`
+  > :nth-child(2) {
+    margin-top: ${spacing.xsmall};
+  }
+`;
+
 const UuDisclaimerEmbed = ({ embed, children }: Props) => {
   const { t } = useTranslation();
 
@@ -50,7 +57,7 @@ const UuDisclaimerEmbed = ({ embed, children }: Props) => {
   ) : null;
 
   return (
-    <>
+    <DisclaimerWrapper role="region">
       <StyledMessageBox type="info">
         <InformationOutline />
         <Disclaimer>
@@ -59,7 +66,7 @@ const UuDisclaimerEmbed = ({ embed, children }: Props) => {
         </Disclaimer>
       </StyledMessageBox>
       {children}
-    </>
+    </DisclaimerWrapper>
   );
 };
 

package/src/ExpandableBox/ExpandableBox.tsx

@@ -18,14 +18,6 @@ export const ExpandableBox = ({ children, ...rest }: Props) => {
 
 interface SummaryProps extends HTMLAttributes<HTMLElement> {}
 
-const StyledSummary = styled.summary`
-  & > * {
-    display: inline;
-    font-size: ${fonts.size.text.metaText.medium};
-    font-weight: ${fonts.weight.normal};
-  }
-`;
-
 export const ExpandableBoxSummary = ({ children, ...rest }: SummaryProps) => {
-  return <StyledSummary {...rest}>{children}</StyledSummary>;
+  return <summary {...rest}>{children}</summary>;
 };