@ndla/ui 56.0.37-alpha.0 → 56.0.39-alpha.0

package/dist/panda.buildinfo.json

@@ -247,6 +247,7 @@
       "width]___[value:surface.xlarge",
       "maxHeight]___[value:50vh",
       "overflowY]___[value:auto",
+      "marginBlockEnd]___[value:xsmall",
       "background]___[value:background.subtle",
       "height]___[value:5xlarge]___[cond:& svg",
       "width]___[value:5xlarge]___[cond:& svg",
@@ -412,6 +413,7 @@
       "color]___[value:text.link",
       "whiteSpace]___[value:nowrap",
       "textDecoration]___[value:none]___[cond:_focusWithin",
+      "display]___[value:none]___[cond:mobileWideDown<___>_disabled",
       "textDecoration]___[value:underline]___[cond:& h3",
       "transitionProperty]___[value:width, height]___[cond:& [data-forward]",
       "transitionTimingFunction]___[value:ease-in-out]___[cond:& [data-forward]",

package/dist/styles.css

@@ -498,6 +498,10 @@
     max-height: 50vh;
 }
 
+  .mbe_xsmall {
+    margin-block-end: var(--spacing-xsmall);
+}
+
   .bg_background\.subtle {
     background: var(--colors-background-subtle);
 }
@@ -1763,6 +1767,12 @@
     .mobileWideDown\:open\:max-h_none:is([open], [data-open], [data-state="open"]) {
       max-height: none;
 }
+}
+
+  @media screen and (max-width: 29.7475rem) {
+    .mobileWideDown\:disabled\:d_none:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']) {
+      display: none;
+}
 }
 
   @media screen and (max-width: 19.9975rem) {

package/es/Embed/CopyrightEmbed.js

@@ -6,8 +6,14 @@
  *
  */
 
+import { styled } from "@ndla/styled-system/jsx";
 import { EmbedByline } from "../LicenseByline";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledCopyrightContent = styled("div", {
+  base: {
+    marginBlockEnd: "xsmall"
+  }
+});
 const CopyrightEmbed = _ref => {
   let {
     embed,
@@ -15,7 +21,10 @@ const CopyrightEmbed = _ref => {
   } = _ref;
   return /*#__PURE__*/_jsxs("figure", {
     "data-embed-type": "copyright",
-    children: [children, /*#__PURE__*/_jsx(EmbedByline, {
+    children: [/*#__PURE__*/_jsx(StyledCopyrightContent, {
+      "data-copyright-content": "",
+      children: children
+    }), /*#__PURE__*/_jsx(EmbedByline, {
       type: "copyright",
       copyright: embed.embedData.copyright
     })]

package/es/Embed/EmbedWrapper.js

@@ -0,0 +1,24 @@
+/**
+ * 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.
+ *
+ */
+
+import { forwardRef } from "react";
+import { ark } from "@ark-ui/react";
+import { styled } from "@ndla/styled-system/jsx";
+import { jsx as _jsx } from "react/jsx-runtime";
+const StyledEmbedWrapper = styled(ark.div, {
+  base: {
+    position: "relative"
+  }
+}, {
+  baseComponent: true
+});
+export const EmbedWrapper = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(StyledEmbedWrapper, {
+  "data-embed-wrapper": "",
+  ...props,
+  ref: ref
+}));

package/es/Embed/UuDisclaimerEmbed.js

@@ -15,7 +15,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 const StyledMessageBox = styled(MessageBox, {
   base: {
     display: "flex",
-    alignItems: "center"
+    alignItems: "center",
+    marginBlockEnd: "xsmall"
   }
 });
 const Disclaimer = styled("div", {
@@ -55,7 +56,10 @@ const UuDisclaimerEmbed = _ref => {
       children: [/*#__PURE__*/_jsx(InformationLine, {}), /*#__PURE__*/_jsxs(Disclaimer, {
         children: [embedData.disclaimer, disclaimerLink]
       })]
-    }), children]
+    }), /*#__PURE__*/_jsx("div", {
+      "data-uu-content": "",
+      children: children
+    })]
   });
 };
 export default UuDisclaimerEmbed;

package/es/Embed/index.js

@@ -20,4 +20,5 @@ export { ConceptEmbed, InlineConcept, BlockConcept } from "./ConceptEmbed";
 export { default as UnknownEmbed } from "./UnknownEmbed";
 export { default as UuDisclaimerEmbed } from "./UuDisclaimerEmbed";
 export { default as CopyrightEmbed } from "./CopyrightEmbed";
-export { default as CodeEmbed } from "./CodeEmbed";
+export { default as CodeEmbed } from "./CodeEmbed";
+export { EmbedWrapper } from "./EmbedWrapper";

package/es/LicenseByline/EmbedByline.js

@@ -19,7 +19,6 @@ const BylineWrapper = styled("figcaption", {
     display: "flex",
     flexDirection: "column",
     paddingBlock: "xsmall",
-    background: "surface.default",
     textStyle: "label.medium",
     color: "text.subtle"
   }
@@ -144,9 +143,10 @@ const StyledButton = styled(Button, {
 });
 const LicenseDescription = _ref2 => {
   let {
-    children
+    children,
+    isOpen,
+    setIsOpen
   } = _ref2;
-  const [isOpen, setIsOpen] = useState(false);
   const open = isOpen ? {
     "data-open": ""
   } : {};
@@ -184,18 +184,22 @@ export const LicenseContainerContent = _ref3 => {
   const license = copyright ? getLicenseByAbbreviation(copyright.license?.license ?? "", i18n.language) : undefined;
   const authors = getLicenseCredits(copyright);
   const captionAuthors = Object.values(authors).find(i => i.length > 0) ?? [];
+  const [isOpen, setIsOpen] = useState(false);
   const content = /*#__PURE__*/_jsxs(_Fragment, {
     children: [children, ` ${t(`embed.type.${type}`)}${captionAuthors.length ? ": " : ""}`, /*#__PURE__*/_jsx("span", {
       property: "cc:attributionName",
       children: captionAuthors.map(author => author.name).join(", ")
     }), license ? /*#__PURE__*/_jsxs(_Fragment, {
       children: [" / ", /*#__PURE__*/_jsx(LicenseLink, {
-        license: license
+        license: license,
+        hideLink: !isOpen && !!children
       })]
     }) : null]
   });
   if (children) {
     return /*#__PURE__*/_jsx(LicenseDescription, {
+      isOpen: isOpen,
+      setIsOpen: setIsOpen,
       children: content
     });
   }

package/es/LicenseByline/LicenseLink.js

@@ -19,13 +19,22 @@ const StyledSafeLink = styled(SafeLink, {
     },
     _focusWithin: {
       textDecoration: "none"
+    },
+    mobileWideDown: {
+      _disabled: {
+        display: "none"
+      }
     }
   }
 });
 export const LicenseLink = _ref => {
   let {
-    license
+    license,
+    hideLink
   } = _ref;
+  const disabled = hideLink ? {
+    "data-disabled": ""
+  } : {};
   if (license.abbreviation === "unknown") {
     return null;
   }
@@ -33,6 +42,7 @@ export const LicenseLink = _ref => {
     return /*#__PURE__*/_jsx(StyledSafeLink, {
       to: license.url,
       rel: "license",
+      ...disabled,
       children: license.abbreviation
     });
   }

package/es/index.js

@@ -10,7 +10,7 @@
 // Move components to this file when they are migrated to typescript
 
 export { Concept } from "./Concept/Concept";
-export { ImageEmbed, getCrop, getFocalPoint, AudioEmbed, H5pEmbed, ExternalEmbed, IframeEmbed, FootnoteEmbed, BrightcoveEmbed, ContentLinkEmbed, RelatedContentEmbed, ConceptEmbed, UnknownEmbed, InlineConcept, BlockConcept, UuDisclaimerEmbed, CopyrightEmbed, CodeEmbed, InlineTriggerButton } from "./Embed";
+export { ImageEmbed, getCrop, getFocalPoint, AudioEmbed, H5pEmbed, ExternalEmbed, IframeEmbed, FootnoteEmbed, BrightcoveEmbed, ContentLinkEmbed, RelatedContentEmbed, ConceptEmbed, UnknownEmbed, InlineConcept, BlockConcept, UuDisclaimerEmbed, CopyrightEmbed, CodeEmbed, InlineTriggerButton, EmbedWrapper } from "./Embed";
 export { LicenseLink, EmbedByline } from "./LicenseByline";
 export { ArticleByline, ArticleBylineAccordionItem, ArticleFootNotes, ArticleWrapper, Article, ArticleFooter, ArticleHeader, ArticleContent, ArticleHGroup, ArticleTitle } from "./Article";
 export { getPossiblyRelativeUrl } from "./utils/relativeUrl";

package/es/locale/messages-en.js

@@ -1218,10 +1218,7 @@ const messages = {
       learningpathUnsupported: "Learning paths and multidisciplinary cases cannot be shown directly in a shared folder. You can open the learning path in a new tab by clicking the link in the navigation menu to the left.",
       drawerButton: "Show folders and resources",
       drawerTitle: "Folders and resources",
-      description: {
-        all: "In this folder you find articles and tasks from NDLA. The articles have been collected and placed in order by a teacher.\n\nYou can use the menu to navigate through the articles.",
-        info1: "In this folder you find articles and tasks from NDLA. The articles have been collected and placed in order by a teacher."
-      },
+      description: "In this folder you find articles and tasks from NDLA. The articles have been collected and placed in order by a teacher.",
       willOpenInNewTab: "Opens in a new tab."
     },
     myPage: {

package/es/locale/messages-nb.js

@@ -1218,10 +1218,7 @@ const messages = {
       learningpathUnsupported: "Læringsstier og tverrfaglige caser kan ikke vises direkte i delte mapper. Dersom du trykker på lenka i navigasjonsmenyen til venstre, vil stien åpnes i en ny fane.",
       drawerButton: "Vis mapper og ressurser",
       drawerTitle: "Mapper og ressurser",
-      description: {
-        all: "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.\n\nDu kan bla i artiklene ved å bruke menyen.",
-        info1: "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer."
-      },
+      description: "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.",
       willOpenInNewTab: "Åpnes i ny fane."
     },
     myPage: {

package/es/locale/messages-nn.js

@@ -1218,10 +1218,7 @@ const messages = {
       drawerButton: "Vis mapper og ressursar",
       drawerTitle: "Mapper og ressursar",
       learningpathUnsupported: "Læringsstiar og tverrfaglege caser kan ikkje visast direkte i delte mapper. Dersom du trykker på lenka i navigasjonsmenyen til venstre, blir stien opna i ei ny fane.",
-      description: {
-        all: "I denne delte mappa finn du fagstoff og oppgåver frå NDLA. Artiklane er samla inn og sette i rekkefølge av ein lærar.\n\nDu kan bla i artiklane ved å bruke menyen.",
-        info1: "I denne delte mappa finn du fagstoff og oppgåver frå NDLA. Artiklane er samla inn og sette i rekkefølge av ein lærar."
-      },
+      description: "I denne delte mappa finn du fagstoff og oppgåver frå NDLA. Artiklane er samla inn og sette i rekkefølge av ein lærar.",
       willOpenInNewTab: "Blir opna i ny fane."
     },
     myPage: {

package/es/locale/messages-se.js

@@ -1218,10 +1218,7 @@ const messages = {
       learningpathUnsupported: "Læringsstier og tverrfaglige caser kan ikke vises direkte i delte mapper. Dersom du trykker på lenka i navigasjonsmenyen til venstre, vil stien åpnes i en ny fane.",
       drawerButton: "Vis mapper og ressurser",
       drawerTitle: "Mapper og ressurser",
-      description: {
-        all: "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.\n\nDu kan bla i artiklene ved å bruke menyen.",
-        info1: "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer."
-      },
+      description: "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.",
       willOpenInNewTab: "Åpnes i ny fane."
     },
     myPage: {

package/es/locale/messages-sma.js

@@ -1218,10 +1218,7 @@ const messages = {
       learningpathUnsupported: "Læringsstier og tverrfaglige caser kan ikke vises direkte i delte mapper. Dersom du trykker på lenka i navigasjonsmenyen til venstre, vil stien åpnes i en ny fane.",
       drawerButton: "Vis mapper og ressurser",
       drawerTitle: "Mapper og ressurser",
-      description: {
-        all: "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.\n\nDu kan bla i artiklene ved å bruke menyen.",
-        info1: "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer."
-      },
+      description: "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.",
       willOpenInNewTab: "Åpnes i ny fane."
     },
     myPage: {

package/lib/Embed/CopyrightEmbed.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _jsx2 = require("@ndla/styled-system/jsx");
 var _LicenseByline = require("../LicenseByline");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
@@ -14,6 +15,11 @@ var _jsxRuntime = require("react/jsx-runtime");
  *
  */
 
+const StyledCopyrightContent = (0, _jsx2.styled)("div", {
+  base: {
+    marginBlockEnd: "xsmall"
+  }
+});
 const CopyrightEmbed = _ref => {
   let {
     embed,
@@ -21,7 +27,10 @@ const CopyrightEmbed = _ref => {
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("figure", {
     "data-embed-type": "copyright",
-    children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_LicenseByline.EmbedByline, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledCopyrightContent, {
+      "data-copyright-content": "",
+      children: children
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LicenseByline.EmbedByline, {
       type: "copyright",
       copyright: embed.embedData.copyright
     })]

package/lib/Embed/EmbedWrapper.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ *
+ */
+/// <reference types="react" />
+export declare const EmbedWrapper: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/lib/Embed/EmbedWrapper.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmbedWrapper = void 0;
+var _react = require("react");
+var _react2 = require("@ark-ui/react");
+var _jsx2 = require("@ndla/styled-system/jsx");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 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.
+ *
+ */
+
+const StyledEmbedWrapper = (0, _jsx2.styled)(_react2.ark.div, {
+  base: {
+    position: "relative"
+  }
+}, {
+  baseComponent: true
+});
+const EmbedWrapper = exports.EmbedWrapper = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledEmbedWrapper, {
+  "data-embed-wrapper": "",
+  ...props,
+  ref: ref
+}));

package/lib/Embed/UuDisclaimerEmbed.js

@@ -21,7 +21,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 const StyledMessageBox = (0, _jsx2.styled)(_primitives.MessageBox, {
   base: {
     display: "flex",
-    alignItems: "center"
+    alignItems: "center",
+    marginBlockEnd: "xsmall"
   }
 });
 const Disclaimer = (0, _jsx2.styled)("div", {
@@ -61,7 +62,10 @@ const UuDisclaimerEmbed = _ref => {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_common.InformationLine, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Disclaimer, {
         children: [embedData.disclaimer, disclaimerLink]
       })]
-    }), children]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      "data-uu-content": "",
+      children: children
+    })]
   });
 };
 var _default = exports.default = UuDisclaimerEmbed;

package/lib/Embed/index.d.ts

@@ -22,3 +22,4 @@ export { default as UuDisclaimerEmbed } from "./UuDisclaimerEmbed";
 export { default as CopyrightEmbed } from "./CopyrightEmbed";
 export { default as CodeEmbed } from "./CodeEmbed";
 export type { HeartButtonType, CanonicalUrlFuncs, RenderContext } from "./types";
+export { EmbedWrapper } from "./EmbedWrapper";

package/lib/Embed/index.js

@@ -45,6 +45,12 @@ Object.defineProperty(exports, "CopyrightEmbed", {
     return _CopyrightEmbed.default;
   }
 });
+Object.defineProperty(exports, "EmbedWrapper", {
+  enumerable: true,
+  get: function () {
+    return _EmbedWrapper.EmbedWrapper;
+  }
+});
 Object.defineProperty(exports, "ExternalEmbed", {
   enumerable: true,
   get: function () {
@@ -132,6 +138,7 @@ var _UnknownEmbed = _interopRequireDefault(require("./UnknownEmbed"));
 var _UuDisclaimerEmbed = _interopRequireDefault(require("./UuDisclaimerEmbed"));
 var _CopyrightEmbed = _interopRequireDefault(require("./CopyrightEmbed"));
 var _CodeEmbed = _interopRequireDefault(require("./CodeEmbed"));
+var _EmbedWrapper = require("./EmbedWrapper");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

package/lib/LicenseByline/EmbedByline.js

@@ -25,7 +25,6 @@ const BylineWrapper = (0, _jsx2.styled)("figcaption", {
     display: "flex",
     flexDirection: "column",
     paddingBlock: "xsmall",
-    background: "surface.default",
     textStyle: "label.medium",
     color: "text.subtle"
   }
@@ -151,9 +150,10 @@ const StyledButton = (0, _jsx2.styled)(_primitives.Button, {
 });
 const LicenseDescription = _ref2 => {
   let {
-    children
+    children,
+    isOpen,
+    setIsOpen
   } = _ref2;
-  const [isOpen, setIsOpen] = (0, _react.useState)(false);
   const open = isOpen ? {
     "data-open": ""
   } : {};
@@ -191,18 +191,22 @@ const LicenseContainerContent = _ref3 => {
   const license = copyright ? (0, _licenses.getLicenseByAbbreviation)(copyright.license?.license ?? "", i18n.language) : undefined;
   const authors = (0, _licenses.getLicenseCredits)(copyright);
   const captionAuthors = Object.values(authors).find(i => i.length > 0) ?? [];
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
   const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [children, ` ${t(`embed.type.${type}`)}${captionAuthors.length ? ": " : ""}`, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       property: "cc:attributionName",
       children: captionAuthors.map(author => author.name).join(", ")
     }), license ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [" / ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_LicenseLink.LicenseLink, {
-        license: license
+        license: license,
+        hideLink: !isOpen && !!children
       })]
     }) : null]
   });
   if (children) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(LicenseDescription, {
+      isOpen: isOpen,
+      setIsOpen: setIsOpen,
       children: content
     });
   }

package/lib/LicenseByline/LicenseLink.d.ts

@@ -8,6 +8,7 @@
 import { LicenseLocaleType } from "@ndla/licenses";
 interface Props {
     license: LicenseLocaleType;
+    hideLink?: boolean;
 }
-export declare const LicenseLink: ({ license }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export declare const LicenseLink: ({ license, hideLink }: Props) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/lib/LicenseByline/LicenseLink.js

@@ -25,13 +25,22 @@ const StyledSafeLink = (0, _jsx2.styled)(_safelink.SafeLink, {
     },
     _focusWithin: {
       textDecoration: "none"
+    },
+    mobileWideDown: {
+      _disabled: {
+        display: "none"
+      }
     }
   }
 });
 const LicenseLink = _ref => {
   let {
-    license
+    license,
+    hideLink
   } = _ref;
+  const disabled = hideLink ? {
+    "data-disabled": ""
+  } : {};
   if (license.abbreviation === "unknown") {
     return null;
   }
@@ -39,6 +48,7 @@ const LicenseLink = _ref => {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSafeLink, {
       to: license.url,
       rel: "license",
+      ...disabled,
       children: license.abbreviation
     });
   }

package/lib/index.d.ts

@@ -6,7 +6,7 @@
  *
  */
 export { Concept } from "./Concept/Concept";
-export { ImageEmbed, getCrop, getFocalPoint, AudioEmbed, H5pEmbed, ExternalEmbed, IframeEmbed, FootnoteEmbed, BrightcoveEmbed, ContentLinkEmbed, RelatedContentEmbed, ConceptEmbed, UnknownEmbed, InlineConcept, BlockConcept, UuDisclaimerEmbed, CopyrightEmbed, CodeEmbed, InlineTriggerButton, } from "./Embed";
+export { ImageEmbed, getCrop, getFocalPoint, AudioEmbed, H5pEmbed, ExternalEmbed, IframeEmbed, FootnoteEmbed, BrightcoveEmbed, ContentLinkEmbed, RelatedContentEmbed, ConceptEmbed, UnknownEmbed, InlineConcept, BlockConcept, UuDisclaimerEmbed, CopyrightEmbed, CodeEmbed, InlineTriggerButton, EmbedWrapper, } from "./Embed";
 export { LicenseLink, EmbedByline } from "./LicenseByline";
 export { ArticleByline, ArticleBylineAccordionItem, ArticleFootNotes, ArticleWrapper, Article, ArticleFooter, ArticleHeader, ArticleContent, ArticleHGroup, ArticleTitle, } from "./Article";
 export { getPossiblyRelativeUrl } from "./utils/relativeUrl";

package/lib/index.js

@@ -207,6 +207,12 @@ Object.defineProperty(exports, "EmbedByline", {
     return _LicenseByline.EmbedByline;
   }
 });
+Object.defineProperty(exports, "EmbedWrapper", {
+  enumerable: true,
+  get: function () {
+    return _Embed.EmbedWrapper;
+  }
+});
 Object.defineProperty(exports, "ErrorMessage", {
   enumerable: true,
   get: function () {

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

@@ -1208,10 +1208,7 @@ declare const messages: {
             learningpathUnsupported: string;
             drawerButton: string;
             drawerTitle: string;
-            description: {
-                all: string;
-                info1: string;
-            };
+            description: string;
             willOpenInNewTab: string;
         };
         myPage: {

package/lib/locale/messages-en.js

@@ -1225,10 +1225,7 @@ const messages = {
       learningpathUnsupported: "Learning paths and multidisciplinary cases cannot be shown directly in a shared folder. You can open the learning path in a new tab by clicking the link in the navigation menu to the left.",
       drawerButton: "Show folders and resources",
       drawerTitle: "Folders and resources",
-      description: {
-        all: "In this folder you find articles and tasks from NDLA. The articles have been collected and placed in order by a teacher.\n\nYou can use the menu to navigate through the articles.",
-        info1: "In this folder you find articles and tasks from NDLA. The articles have been collected and placed in order by a teacher."
-      },
+      description: "In this folder you find articles and tasks from NDLA. The articles have been collected and placed in order by a teacher.",
       willOpenInNewTab: "Opens in a new tab."
     },
     myPage: {

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

@@ -1208,10 +1208,7 @@ declare const messages: {
             learningpathUnsupported: string;
             drawerButton: string;
             drawerTitle: string;
-            description: {
-                all: string;
-                info1: string;
-            };
+            description: string;
             willOpenInNewTab: string;
         };
         myPage: {

package/lib/locale/messages-nb.js

@@ -1225,10 +1225,7 @@ const messages = {
       learningpathUnsupported: "Læringsstier og tverrfaglige caser kan ikke vises direkte i delte mapper. Dersom du trykker på lenka i navigasjonsmenyen til venstre, vil stien åpnes i en ny fane.",
       drawerButton: "Vis mapper og ressurser",
       drawerTitle: "Mapper og ressurser",
-      description: {
-        all: "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.\n\nDu kan bla i artiklene ved å bruke menyen.",
-        info1: "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer."
-      },
+      description: "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.",
       willOpenInNewTab: "Åpnes i ny fane."
     },
     myPage: {

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

@@ -1208,10 +1208,7 @@ declare const messages: {
             drawerButton: string;
             drawerTitle: string;
             learningpathUnsupported: string;
-            description: {
-                all: string;
-                info1: string;
-            };
+            description: string;
             willOpenInNewTab: string;
         };
         myPage: {

package/lib/locale/messages-nn.js

@@ -1225,10 +1225,7 @@ const messages = {
       drawerButton: "Vis mapper og ressursar",
       drawerTitle: "Mapper og ressursar",
       learningpathUnsupported: "Læringsstiar og tverrfaglege caser kan ikkje visast direkte i delte mapper. Dersom du trykker på lenka i navigasjonsmenyen til venstre, blir stien opna i ei ny fane.",
-      description: {
-        all: "I denne delte mappa finn du fagstoff og oppgåver frå NDLA. Artiklane er samla inn og sette i rekkefølge av ein lærar.\n\nDu kan bla i artiklane ved å bruke menyen.",
-        info1: "I denne delte mappa finn du fagstoff og oppgåver frå NDLA. Artiklane er samla inn og sette i rekkefølge av ein lærar."
-      },
+      description: "I denne delte mappa finn du fagstoff og oppgåver frå NDLA. Artiklane er samla inn og sette i rekkefølge av ein lærar.",
       willOpenInNewTab: "Blir opna i ny fane."
     },
     myPage: {

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

@@ -1208,10 +1208,7 @@ declare const messages: {
             learningpathUnsupported: string;
             drawerButton: string;
             drawerTitle: string;
-            description: {
-                all: string;
-                info1: string;
-            };
+            description: string;
             willOpenInNewTab: string;
         };
         myPage: {

package/lib/locale/messages-se.js

@@ -1225,10 +1225,7 @@ const messages = {
       learningpathUnsupported: "Læringsstier og tverrfaglige caser kan ikke vises direkte i delte mapper. Dersom du trykker på lenka i navigasjonsmenyen til venstre, vil stien åpnes i en ny fane.",
       drawerButton: "Vis mapper og ressurser",
       drawerTitle: "Mapper og ressurser",
-      description: {
-        all: "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.\n\nDu kan bla i artiklene ved å bruke menyen.",
-        info1: "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer."
-      },
+      description: "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.",
       willOpenInNewTab: "Åpnes i ny fane."
     },
     myPage: {

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

@@ -1208,10 +1208,7 @@ declare const messages: {
             learningpathUnsupported: string;
             drawerButton: string;
             drawerTitle: string;
-            description: {
-                all: string;
-                info1: string;
-            };
+            description: string;
             willOpenInNewTab: string;
         };
         myPage: {

package/lib/locale/messages-sma.js

@@ -1225,10 +1225,7 @@ const messages = {
       learningpathUnsupported: "Læringsstier og tverrfaglige caser kan ikke vises direkte i delte mapper. Dersom du trykker på lenka i navigasjonsmenyen til venstre, vil stien åpnes i en ny fane.",
       drawerButton: "Vis mapper og ressurser",
       drawerTitle: "Mapper og ressurser",
-      description: {
-        all: "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.\n\nDu kan bla i artiklene ved å bruke menyen.",
-        info1: "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer."
-      },
+      description: "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.",
       willOpenInNewTab: "Åpnes i ny fane."
     },
     myPage: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.37-alpha.0",
+  "version": "56.0.39-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -33,10 +33,10 @@
   ],
   "dependencies": {
     "@ndla/core": "^5.0.2",
-    "@ndla/icons": "^8.0.26-alpha.0",
+    "@ndla/icons": "^8.0.27-alpha.0",
     "@ndla/licenses": "^8.0.3-alpha.0",
-    "@ndla/primitives": "^1.0.34-alpha.0",
-    "@ndla/safelink": "^7.0.34-alpha.0",
+    "@ndla/primitives": "^1.0.36-alpha.0",
+    "@ndla/safelink": "^7.0.36-alpha.0",
     "@ndla/styled-system": "^0.0.23",
     "@ndla/util": "^5.0.0-alpha.0",
     "html-react-parser": "^5.1.8",
@@ -50,7 +50,7 @@
     "react-router-dom": "> 6.0.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.35",
+    "@ndla/preset-panda": "^0.0.36",
     "@ndla/types-backend": "^0.2.86",
     "@ndla/types-embed": "^5.0.3-alpha.0",
     "@pandacss/dev": "^0.46.0"
@@ -58,5 +58,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5bad5d1659659f8f6a1a8cb790d43fdbbfcdedbc"
+  "gitHead": "84234a46743d9d044f220e90e6710e2da307d65d"
 }

package/src/Embed/CopyrightEmbed.tsx

@@ -7,6 +7,7 @@
  */
 
 import { ReactNode } from "react";
+import { styled } from "@ndla/styled-system/jsx";
 import { CopyrightMetaData } from "@ndla/types-embed";
 import { EmbedByline } from "../LicenseByline";
 
@@ -15,10 +16,16 @@ interface Props {
   children?: ReactNode;
 }
 
+const StyledCopyrightContent = styled("div", {
+  base: {
+    marginBlockEnd: "xsmall",
+  },
+});
+
 const CopyrightEmbed = ({ embed, children }: Props) => {
   return (
     <figure data-embed-type="copyright">
-      {children}
+      <StyledCopyrightContent data-copyright-content="">{children}</StyledCopyrightContent>
       <EmbedByline type="copyright" copyright={embed.embedData.copyright} />
     </figure>
   );

package/src/Embed/EmbedWrapper.tsx

@@ -0,0 +1,25 @@
+/**
+ * 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.
+ *
+ */
+
+import { ComponentPropsWithRef, forwardRef } from "react";
+import { ark } from "@ark-ui/react";
+import { styled } from "@ndla/styled-system/jsx";
+
+const StyledEmbedWrapper = styled(
+  ark.div,
+  {
+    base: {
+      position: "relative",
+    },
+  },
+  { baseComponent: true },
+);
+
+export const EmbedWrapper = forwardRef<HTMLDivElement, ComponentPropsWithRef<"div">>((props, ref) => (
+  <StyledEmbedWrapper data-embed-wrapper="" {...props} ref={ref} />
+));

package/src/Embed/UuDisclaimerEmbed.tsx

@@ -23,6 +23,7 @@ const StyledMessageBox = styled(MessageBox, {
   base: {
     display: "flex",
     alignItems: "center",
+    marginBlockEnd: "xsmall",
   },
 });
 const Disclaimer = styled("div", {
@@ -58,7 +59,7 @@ const UuDisclaimerEmbed = ({ embed, children }: Props) => {
           {disclaimerLink}
         </Disclaimer>
       </StyledMessageBox>
-      {children}
+      <div data-uu-content="">{children}</div>
     </div>
   );
 };

package/src/Embed/index.ts

@@ -23,3 +23,4 @@ export { default as UuDisclaimerEmbed } from "./UuDisclaimerEmbed";
 export { default as CopyrightEmbed } from "./CopyrightEmbed";
 export { default as CodeEmbed } from "./CodeEmbed";
 export type { HeartButtonType, CanonicalUrlFuncs, RenderContext } from "./types";
+export { EmbedWrapper } from "./EmbedWrapper";

package/src/LicenseByline/EmbedByline.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { ReactNode, useState } from "react";
+import { Dispatch, ReactNode, SetStateAction, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { AlertLine } from "@ndla/icons/common";
 import { getLicenseByAbbreviation, getLicenseCredits } from "@ndla/licenses";
@@ -78,7 +78,6 @@ const BylineWrapper = styled("figcaption", {
     display: "flex",
     flexDirection: "column",
     paddingBlock: "xsmall",
-    background: "surface.default",
     textStyle: "label.medium",
     color: "text.subtle",
   },
@@ -216,10 +215,11 @@ const StyledButton = styled(Button, {
 
 interface LicenseDescriptionProps {
   children?: ReactNode;
+  isOpen: Boolean;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
 }
 
-const LicenseDescription = ({ children }: LicenseDescriptionProps) => {
-  const [isOpen, setIsOpen] = useState(false);
+const LicenseDescription = ({ children, isOpen, setIsOpen }: LicenseDescriptionProps) => {
   const open = isOpen ? { "data-open": "" } : {};
   const { t } = useTranslation();
 
@@ -244,6 +244,7 @@ export const LicenseContainerContent = ({ children, copyright, type }: LicenseCo
   const license = copyright ? getLicenseByAbbreviation(copyright.license?.license ?? "", i18n.language) : undefined;
   const authors = getLicenseCredits(copyright);
   const captionAuthors = Object.values(authors).find((i) => i.length > 0) ?? [];
+  const [isOpen, setIsOpen] = useState<boolean>(false);
 
   const content = (
     <>
@@ -254,14 +255,18 @@ export const LicenseContainerContent = ({ children, copyright, type }: LicenseCo
       {license ? (
         <>
           {" / "}
-          <LicenseLink license={license} />
+          {<LicenseLink license={license} hideLink={!isOpen && !!children} />}
         </>
       ) : null}
     </>
   );
 
   if (children) {
-    return <LicenseDescription>{content}</LicenseDescription>;
+    return (
+      <LicenseDescription isOpen={isOpen} setIsOpen={setIsOpen}>
+        {content}
+      </LicenseDescription>
+    );
   }
 
   return (

package/src/LicenseByline/LicenseLink.tsx

@@ -12,6 +12,7 @@ import { styled } from "@ndla/styled-system/jsx";
 
 interface Props {
   license: LicenseLocaleType;
+  hideLink?: boolean;
 }
 
 const StyledSafeLink = styled(SafeLink, {
@@ -25,16 +26,22 @@ const StyledSafeLink = styled(SafeLink, {
     _focusWithin: {
       textDecoration: "none",
     },
+    mobileWideDown: {
+      _disabled: {
+        display: "none",
+      },
+    },
   },
 });
 
-export const LicenseLink = ({ license }: Props) => {
+export const LicenseLink = ({ license, hideLink }: Props) => {
+  const disabled = hideLink ? { "data-disabled": "" } : {};
   if (license.abbreviation === "unknown") {
     return null;
   }
   if (license.url?.length) {
     return (
-      <StyledSafeLink to={license.url} rel="license">
+      <StyledSafeLink to={license.url} rel="license" {...disabled}>
         {license.abbreviation}
       </StyledSafeLink>
     );

package/src/index.ts

@@ -31,6 +31,7 @@ export {
   CopyrightEmbed,
   CodeEmbed,
   InlineTriggerButton,
+  EmbedWrapper,
 } from "./Embed";
 
 export { LicenseLink, EmbedByline } from "./LicenseByline";

package/src/locale/messages-en.ts

@@ -1247,11 +1247,8 @@ const messages = {
         "Learning paths and multidisciplinary cases cannot be shown directly in a shared folder. You can open the learning path in a new tab by clicking the link in the navigation menu to the left.",
       drawerButton: "Show folders and resources",
       drawerTitle: "Folders and resources",
-      description: {
-        all: "In this folder you find articles and tasks from NDLA. The articles have been collected and placed in order by a teacher.\n\nYou can use the menu to navigate through the articles.",
-        info1:
-          "In this folder you find articles and tasks from NDLA. The articles have been collected and placed in order by a teacher.",
-      },
+      description:
+        "In this folder you find articles and tasks from NDLA. The articles have been collected and placed in order by a teacher.",
       willOpenInNewTab: "Opens in a new tab.",
     },
     myPage: {

package/src/locale/messages-nb.ts

@@ -1247,11 +1247,8 @@ const messages = {
         "Læringsstier og tverrfaglige caser kan ikke vises direkte i delte mapper. Dersom du trykker på lenka i navigasjonsmenyen til venstre, vil stien åpnes i en ny fane.",
       drawerButton: "Vis mapper og ressurser",
       drawerTitle: "Mapper og ressurser",
-      description: {
-        all: "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.\n\nDu kan bla i artiklene ved å bruke menyen.",
-        info1:
-          "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.",
-      },
+      description:
+        "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.",
       willOpenInNewTab: "Åpnes i ny fane.",
     },
     myPage: {

package/src/locale/messages-nn.ts

@@ -1247,11 +1247,8 @@ const messages = {
       drawerTitle: "Mapper og ressursar",
       learningpathUnsupported:
         "Læringsstiar og tverrfaglege caser kan ikkje visast direkte i delte mapper. Dersom du trykker på lenka i navigasjonsmenyen til venstre, blir stien opna i ei ny fane.",
-      description: {
-        all: "I denne delte mappa finn du fagstoff og oppgåver frå NDLA. Artiklane er samla inn og sette i rekkefølge av ein lærar.\n\nDu kan bla i artiklane ved å bruke menyen.",
-        info1:
-          "I denne delte mappa finn du fagstoff og oppgåver frå NDLA. Artiklane er samla inn og sette i rekkefølge av ein lærar.",
-      },
+      description:
+        "I denne delte mappa finn du fagstoff og oppgåver frå NDLA. Artiklane er samla inn og sette i rekkefølge av ein lærar.",
       willOpenInNewTab: "Blir opna i ny fane.",
     },
     myPage: {

package/src/locale/messages-se.ts

@@ -1249,11 +1249,8 @@ const messages = {
         "Læringsstier og tverrfaglige caser kan ikke vises direkte i delte mapper. Dersom du trykker på lenka i navigasjonsmenyen til venstre, vil stien åpnes i en ny fane.",
       drawerButton: "Vis mapper og ressurser",
       drawerTitle: "Mapper og ressurser",
-      description: {
-        all: "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.\n\nDu kan bla i artiklene ved å bruke menyen.",
-        info1:
-          "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.",
-      },
+      description:
+        "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.",
       willOpenInNewTab: "Åpnes i ny fane.",
     },
     myPage: {

package/src/locale/messages-sma.ts

@@ -1251,11 +1251,8 @@ const messages = {
         "Læringsstier og tverrfaglige caser kan ikke vises direkte i delte mapper. Dersom du trykker på lenka i navigasjonsmenyen til venstre, vil stien åpnes i en ny fane.",
       drawerButton: "Vis mapper og ressurser",
       drawerTitle: "Mapper og ressurser",
-      description: {
-        all: "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.\n\nDu kan bla i artiklene ved å bruke menyen.",
-        info1:
-          "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.",
-      },
+      description:
+        "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.",
       willOpenInNewTab: "Åpnes i ny fane.",
     },
     myPage: {