@ndla/ui 53.0.0 → 54.0.0

package/lib/i18n/i18n.js

@@ -12,7 +12,7 @@ var _messagesNb = _interopRequireDefault(require("../locale/messages-nb"));
 var _messagesNn = _interopRequireDefault(require("../locale/messages-nn"));
 var _messagesSe = _interopRequireDefault(require("../locale/messages-se"));
 var _messagesSma = _interopRequireDefault(require("../locale/messages-sma"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * Copyright (c) 2021-present, NDLA.
  *

package/lib/index.d.ts

@@ -44,7 +44,7 @@ export { default as messagesSMA } from "./locale/messages-sma";
 export { default as Breadcrumb, HomeBreadcrumb } from "./Breadcrumb";
 export type { SimpleBreadcrumbItem, IndexedBreadcrumbItem } from "./Breadcrumb";
 export { i18nInstance, formatNestedMessages } from "./i18n";
-export { default as LayoutItem, OneColumn, PageContainer, Content } from "./Layout";
+export { default as LayoutItem, OneColumn, PageContainer } from "./Layout";
 export { MediaList, MediaListItem, MediaListItemBody, MediaListItemActions, MediaListItemImage, MediaListItemMeta, } from "./MediaList";
 export type { ItemType } from "./MediaList";
 export { default as ContentTypeBadge, SubjectMaterialBadge, TasksAndActivitiesBadge, AssessmentResourcesBadge, LearningPathBadge, SubjectBadge, SourceMaterialBadge, ConceptBadge, } from "./ContentTypeBadge";

package/lib/index.js

@@ -171,12 +171,6 @@ Object.defineProperty(exports, "ContactBlock", {
     return _ContactBlock.default;
   }
 });
-Object.defineProperty(exports, "Content", {
-  enumerable: true,
-  get: function () {
-    return _Layout.Content;
-  }
-});
 Object.defineProperty(exports, "ContentLinkEmbed", {
   enumerable: true,
   get: function () {
@@ -874,4 +868,4 @@ var _LinkBlock = require("./LinkBlock");
 var _CodeBlock = require("./CodeBlock");
 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; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

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

@@ -923,6 +923,7 @@ declare const messages: {
                 unShare: string;
                 copyLink: string;
                 link: string;
+                savedLink: string;
                 header: {
                     shared: string;
                 };
@@ -1153,6 +1154,7 @@ declare const messages: {
         examLockInfo: string;
         copyFolderDisclaimer: string;
         loginCopyFolderPitch: string;
+        loginSaveFolderLinkPitch: string;
         help: string;
         more: string;
         selectView: string;

package/lib/locale/messages-en.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _licenses = require("@ndla/licenses");
 var _model = _interopRequireDefault(require("../model"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * Copyright (c) 2018-present, NDLA.
  *
@@ -940,6 +940,7 @@ const messages = {
         unShare: "Sharing stopped. The folder is no longer shared",
         copyLink: "Copy link to folder",
         link: "Link is copied",
+        savedLink: "Link to {{ name }} has been added to My folders.",
         header: {
           shared: "This folder is shared"
         },
@@ -1170,6 +1171,7 @@ const messages = {
     examLockInfo: "Editing content on Min NDLA is deactivated for pupils during the exam period.",
     copyFolderDisclaimer: "This creates a copy of the folder. Any changes made to the original folder will not be updated here.",
     loginCopyFolderPitch: "Do you wish to copy this folder?",
+    loginSaveFolderLinkPitch: "Do you wish to save the link to this shared folder?",
     help: "Help",
     more: "More options",
     selectView: "Select view",

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

@@ -923,6 +923,7 @@ declare const messages: {
                 unShare: string;
                 copyLink: string;
                 link: string;
+                savedLink: string;
                 header: {
                     shared: string;
                 };
@@ -1153,6 +1154,7 @@ declare const messages: {
         examLockInfo: string;
         copyFolderDisclaimer: string;
         loginCopyFolderPitch: string;
+        loginSaveFolderLinkPitch: string;
         help: string;
         more: string;
         selectView: string;

package/lib/locale/messages-nb.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _licenses = require("@ndla/licenses");
 var _model = _interopRequireDefault(require("../model"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * Copyright (c) 2018-present, NDLA.
  *
@@ -940,6 +940,7 @@ const messages = {
         unShare: "Delingen er avsluttet. Mappen er ikke lenger delt.",
         copyLink: "Kopier lenke til mappa",
         link: "Lenken er kopiert",
+        savedLink: "Lenke til  {{ name }} er lagt til i Mine mapper.",
         header: {
           shared: "Denne mappa er delt"
         },
@@ -1170,6 +1171,7 @@ const messages = {
     examLockInfo: "Redigering av innhold på Min NDLA er deaktivert for elever i eksamensperioden.",
     copyFolderDisclaimer: "Dette lager en kopi av mappen. Eventuelle endringer i originalmappen vil ikke bli oppdatert her.",
     loginCopyFolderPitch: "Ønsker du å kopiere denne mappen?",
+    loginSaveFolderLinkPitch: "Ønsker du å lagre lenken til denne delte mappen?",
     help: "Hjelp",
     more: "Flere valg",
     selectView: "Velg visning",

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

@@ -922,6 +922,7 @@ declare const messages: {
                 sharedFolder: string;
                 unShare: string;
                 link: string;
+                savedLink: string;
                 copyLink: string;
                 header: {
                     shared: string;
@@ -1153,6 +1154,7 @@ declare const messages: {
         examLockInfo: string;
         copyFolderDisclaimer: string;
         loginCopyFolderPitch: string;
+        loginSaveFolderLinkPitch: string;
         help: string;
         more: string;
         selectView: string;

package/lib/locale/messages-nn.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _licenses = require("@ndla/licenses");
 var _model = _interopRequireDefault(require("../model"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * Copyright (c) 2018-present, NDLA.
  *
@@ -939,6 +939,7 @@ const messages = {
         sharedFolder: "Delt mappe",
         unShare: "Delinga er avslutta. Mappa er ikkje lenger delt",
         link: "Lenka er kopiert",
+        savedLink: "Lenka til  {{ name }} er lagt til i Mine mapper.",
         copyLink: "Kopier lenke til mappa",
         header: {
           shared: "Denne mappa er delt"
@@ -1170,6 +1171,7 @@ const messages = {
     examLockInfo: "Redigering av innhald på Min NDLA er deaktivert for elevar i eksamensperioden.",
     copyFolderDisclaimer: "Dette lagar ein kopi av mappa. Eventuelle endringar i originalmappa vil ikkje bli oppdatert her.",
     loginCopyFolderPitch: "Ønsker du å kopiere denne mappa?",
+    loginSaveFolderLinkPitch: "Ønsker du å lagra lenka til denne delte mappa?",
     help: "Hjelp",
     more: "Fleire val",
     selectView: "Velg visning",

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

@@ -923,6 +923,7 @@ declare const messages: {
                 unShare: string;
                 copyLink: string;
                 link: string;
+                savedLink: string;
                 header: {
                     shared: string;
                 };
@@ -1153,6 +1154,7 @@ declare const messages: {
         examLockInfo: string;
         copyFolderDisclaimer: string;
         loginCopyFolderPitch: string;
+        loginSaveFolderLinkPitch: string;
         help: string;
         more: string;
         selectView: string;

package/lib/locale/messages-se.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _licenses = require("@ndla/licenses");
 var _model = _interopRequireDefault(require("../model"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * Copyright (c) 2018-present, NDLA.
  *
@@ -940,6 +940,7 @@ const messages = {
         unShare: "Delingen er avsluttet. Mappen er ikke lenger delt.",
         copyLink: "Kopier lenke til mappa",
         link: "Lenken er kopiert",
+        savedLink: "Lenke til  {{ name }} er lagt til i Mine mapper.",
         header: {
           shared: "Denne mappa er delt"
         },
@@ -1170,6 +1171,7 @@ const messages = {
     examLockInfo: "Redigering av innhold på Min NDLA er deaktivert for elever i eksamensperioden.",
     copyFolderDisclaimer: "Dette lager en kopi av mappen. Eventuelle endringer i originalmappen vil ikke bli oppdatert her.",
     loginCopyFolderPitch: "Ønsker du å kopiere denne mappen?",
+    loginSaveFolderLinkPitch: "Ønsker du å lagre lenken til denne delte mappen?",
     help: "Hjelp",
     more: "Flere valg",
     selectView: "Velg visning",

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

@@ -923,6 +923,7 @@ declare const messages: {
                 unShare: string;
                 copyLink: string;
                 link: string;
+                savedLink: string;
                 header: {
                     shared: string;
                 };
@@ -1153,6 +1154,7 @@ declare const messages: {
         examLockInfo: string;
         copyFolderDisclaimer: string;
         loginCopyFolderPitch: string;
+        loginSaveFolderLinkPitch: string;
         help: string;
         more: string;
         selectView: string;

package/lib/locale/messages-sma.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _licenses = require("@ndla/licenses");
 var _model = _interopRequireDefault(require("../model"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * Copyright (c) 2018-present, NDLA.
  *
@@ -940,6 +940,7 @@ const messages = {
         unShare: "Delingen er avsluttet. Mappen er ikke lenger delt.",
         copyLink: "Kopier lenke til mappa",
         link: "Lenken er kopiert",
+        savedLink: "Lenke til  {{ name }} er lagt til i Mine mapper.",
         header: {
           shared: "Denne mappa er delt"
         },
@@ -1170,6 +1171,7 @@ const messages = {
     examLockInfo: "Redigering av innhold på Min NDLA er deaktivert for elever i eksamensperioden.",
     copyFolderDisclaimer: "Dette lager en kopi av mappen. Eventuelle endringer i originalmappen vil ikke bli oppdatert her.",
     loginCopyFolderPitch: "Ønsker du å kopiere denne mappen?",
+    loginSaveFolderLinkPitch: "Ønsker du å lagre lenken til denne delte mappen?",
     help: "Hjelp",
     more: "Flere valg",
     selectView: "Velg visning",

package/lib/utils/resourceTypeColor.js

@@ -7,7 +7,7 @@ exports.resourceTypeColor = exports.default = void 0;
 var _core = require("@ndla/core");
 var _model = _interopRequireDefault(require("../model"));
 var _ContentType = require("../model/ContentType");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * Copyright (c) 2022-present, NDLA.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "53.0.0",
+  "version": "54.0.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,19 +31,19 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^4.0.0",
-    "@ndla/button": "^13.0.0",
-    "@ndla/core": "^5.0.0",
-    "@ndla/dropdown-menu": "^1.0.37",
-    "@ndla/forms": "^8.0.0",
+    "@ndla/accordion": "^4.0.2",
+    "@ndla/button": "^13.0.2",
+    "@ndla/core": "^5.0.1",
+    "@ndla/dropdown-menu": "^1.0.38",
+    "@ndla/forms": "^8.0.2",
     "@ndla/hooks": "^2.1.7",
-    "@ndla/icons": "^6.1.4",
+    "@ndla/icons": "^6.1.5",
     "@ndla/licenses": "^7.2.6",
-    "@ndla/modal": "^6.0.0",
-    "@ndla/notion": "^7.0.0",
-    "@ndla/safelink": "^5.1.3",
-    "@ndla/tooltip": "^8.0.0",
-    "@ndla/typography": "^0.4.20",
+    "@ndla/modal": "^6.0.1",
+    "@ndla/notion": "^7.0.1",
+    "@ndla/safelink": "^5.1.5",
+    "@ndla/tooltip": "^8.0.1",
+    "@ndla/typography": "^0.4.21",
     "@ndla/util": "^4.0.4",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-slider": "^1.1.2",
@@ -51,6 +51,7 @@
     "html-react-parser": "^5.1.8",
     "i18next-browser-languagedetector": "^7.1.0",
     "lodash.throttle": "^4.1.1",
+    "punycode.js": "^2.3.1",
     "react-device-detect": "^2.2.3",
     "react-select": "^5.8.0",
     "react-swipeable": "^7.0.0"
@@ -65,8 +66,8 @@
     "react-router-dom": "> 6.0.0"
   },
   "devDependencies": {
-    "@ndla/types-backend": "^0.2.64",
-    "@ndla/types-embed": "^4.1.6",
+    "@ndla/types-backend": "^0.2.82",
+    "@ndla/types-embed": "^4.1.7",
     "css-loader": "^6.7.3",
     "mini-css-extract-plugin": "^2.7.5",
     "sass-loader": "^13.2.2",
@@ -76,5 +77,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "fe4060794eb3eafc6231ef802b7f44df65155467"
+  "gitHead": "c778ba48c327f14eaae3e2da21ed24b183719167"
 }

package/src/CodeBlock/CodeBlock.stories.tsx

@@ -61,13 +61,11 @@ export default {
   argTypes: {
     actionButton: {
       table: {
+        disable: true,
         type: {
           detail: "Takes any ReactNode, but as the name implies: use a button component, preferably an icon-button",
         },
       },
-      control: {
-        type: null,
-      },
     },
   },
 } as Meta<typeof CodeBlock>;

package/src/Embed/AudioEmbed.stories.tsx

@@ -11,7 +11,7 @@ import { AudioEmbedData, AudioMeta } from "@ndla/types-embed";
 import AudioEmbed from "./AudioEmbed";
 import StoryFavoriteButton from "../../../../stories/StoryFavoriteButton";
 import { ArticleWrapper } from "../Article";
-import { OneColumn } from "../Layout";
+import LayoutItem, { OneColumn } from "../Layout";
 
 const embedData: AudioEmbedData = {
   resource: "audio",
@@ -190,11 +190,11 @@ const meta: Meta<typeof AudioEmbed> = {
     (Story) => (
       <OneColumn>
         <ArticleWrapper modifier="clean">
-          <section className="u-4/6@desktop u-push-1/6@desktop u-10/12@tablet u-push-1/12@tablet">
+          <LayoutItem layout="center">
             <section>
               <Story />
             </section>
-          </section>
+          </LayoutItem>
         </ArticleWrapper>
       </OneColumn>
     ),

package/src/Embed/BrightcoveEmbed.stories.tsx

@@ -11,7 +11,7 @@ import { BrightcoveData, BrightcoveEmbedData, BrightcoveMetaData } from "@ndla/t
 import BrightcoveEmbed from "./BrightcoveEmbed";
 import StoryFavoriteButton from "../../../../stories/StoryFavoriteButton";
 import { ArticleWrapper } from "../Article";
-import { OneColumn } from "../Layout";
+import LayoutItem, { OneColumn } from "../Layout";
 
 const embedData: BrightcoveEmbedData = {
   resource: "brightcove",
@@ -163,11 +163,11 @@ const meta: Meta<typeof BrightcoveEmbed> = {
     (Story) => (
       <OneColumn>
         <ArticleWrapper modifier="clean">
-          <section className="u-4/6@desktop u-push-1/6@desktop u-10/12@tablet u-push-1/12@tablet">
+          <LayoutItem layout="center">
             <section>
               <Story />
             </section>
-          </section>
+          </LayoutItem>
         </ArticleWrapper>
       </OneColumn>
     ),

package/src/Embed/ConceptEmbed.stories.tsx

@@ -11,7 +11,7 @@ import { ConceptData, ConceptEmbedData } from "@ndla/types-embed";
 import ConceptEmbed from "./ConceptEmbed";
 import StoryFavoriteButton from "../../../../stories/StoryFavoriteButton";
 import { ArticleWrapper } from "../Article";
-import { OneColumn } from "../Layout";
+import LayoutItem, { OneColumn } from "../Layout";
 
 const blockEmbedData: ConceptEmbedData = {
   contentId: "35",
@@ -235,11 +235,11 @@ const meta: Meta<typeof ConceptEmbed> = {
     (Story) => (
       <OneColumn>
         <ArticleWrapper modifier="clean">
-          <section className="u-4/6@desktop u-push-1/6@desktop u-10/12@tablet u-push-1/12@tablet">
+          <LayoutItem layout="center">
             <section>
               <Story />
             </section>
-          </section>
+          </LayoutItem>
         </ArticleWrapper>
       </OneColumn>
     ),

package/src/Embed/ConceptEmbed.tsx

@@ -177,6 +177,7 @@ interface InlineConceptProps extends ConceptNotionData {
   conceptHeartButton?: ReactNode;
   exampleIds?: string;
   exampleLangs?: string;
+  setSelection?: (e: MouseEvent) => void;
 }
 
 const NotionButton = styled.span`
@@ -238,6 +239,7 @@ export const InlineConcept = forwardRef<HTMLSpanElement, InlineConceptProps>(
       lang,
       exampleIds,
       exampleLangs,
+      setSelection,
       ...rest
     },
     ref,
@@ -258,13 +260,29 @@ export const InlineConcept = forwardRef<HTMLSpanElement, InlineConceptProps>(
       }
     }, []);
 
+    const preventAutoFocusInEditor = useCallback(
+      (e: MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setSelection?.(e);
+      },
+      [setSelection],
+    );
+
     return (
       <Root modal={isMobile} onOpenChange={onOpenChange}>
         <StyledAnchor ref={anchorRef} asChild>
           <StyledAnchorSpan contentEditable={false} />
         </StyledAnchor>
-        <Trigger asChild type={undefined}>
-          <NotionButton role="button" data-open={modalPos !== -9999} tabIndex={0} ref={ref} {...rest}>
+        <Trigger asChild>
+          <NotionButton
+            onMouseDown={(e) => (setSelection ? preventAutoFocusInEditor(e.nativeEvent) : undefined)}
+            data-open={modalPos !== -9999}
+            role="button"
+            tabIndex={0}
+            ref={ref}
+            {...rest}
+          >
             {linkText}
           </NotionButton>
         </Trigger>

package/src/Embed/ExternalEmbed.stories.tsx

@@ -10,7 +10,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { OembedEmbedData, OembedData } from "@ndla/types-embed";
 import ExternalEmbed from "./ExternalEmbed";
 import { ArticleWrapper } from "../Article";
-import { OneColumn } from "../Layout";
+import LayoutItem, { OneColumn } from "../Layout";
 
 const embedData: OembedEmbedData = {
   resource: "external",
@@ -57,11 +57,11 @@ const meta: Meta<typeof ExternalEmbed> = {
     (Story) => (
       <OneColumn>
         <ArticleWrapper modifier="clean">
-          <section className="u-4/6@desktop u-push-1/6@desktop u-10/12@tablet u-push-1/12@tablet">
+          <LayoutItem layout="center">
             <section>
               <Story />
             </section>
-          </section>
+          </LayoutItem>
         </ArticleWrapper>
       </OneColumn>
     ),

package/src/Embed/H5pEmbed.stories.tsx

@@ -10,7 +10,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { H5pEmbedData, H5pData } from "@ndla/types-embed";
 import H5pEmbed from "./H5pEmbed";
 import { ArticleWrapper } from "../Article";
-import { OneColumn } from "../Layout";
+import LayoutItem, { OneColumn } from "../Layout";
 
 const embedData: H5pEmbedData = {
   resource: "h5p",
@@ -54,11 +54,11 @@ const meta: Meta<typeof H5pEmbed> = {
     (Story) => (
       <OneColumn>
         <ArticleWrapper modifier="clean">
-          <section className="u-4/6@desktop u-push-1/6@desktop u-10/12@tablet u-push-1/12@tablet">
+          <LayoutItem layout="center">
             <section>
               <Story />
             </section>
-          </section>
+          </LayoutItem>
         </ArticleWrapper>
       </OneColumn>
     ),

package/src/Embed/IframeEmbed.stories.tsx

@@ -10,7 +10,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { IframeData, IframeEmbedData } from "@ndla/types-embed";
 import IframeEmbed from "./IframeEmbed";
 import { ArticleWrapper } from "../Article";
-import { OneColumn } from "../Layout";
+import LayoutItem, { OneColumn } from "../Layout";
 
 const embedData: IframeEmbedData = {
   width: "708px",
@@ -29,11 +29,11 @@ const meta: Meta<typeof IframeEmbed> = {
     (Story) => (
       <OneColumn>
         <ArticleWrapper modifier="clean">
-          <section className="u-4/6@desktop u-push-1/6@desktop u-10/12@tablet u-push-1/12@tablet">
+          <LayoutItem layout="center">
             <section>
               <Story />
             </section>
-          </section>
+          </LayoutItem>
         </ArticleWrapper>
       </OneColumn>
     ),

package/src/Embed/ImageEmbed.stories.tsx

@@ -13,7 +13,7 @@ import { ImageEmbedData } from "@ndla/types-embed";
 import ImageEmbed from "./ImageEmbed";
 import StoryFavoriteButton from "../../../../stories/StoryFavoriteButton";
 import { ArticleWrapper } from "../Article";
-import { OneColumn } from "../Layout";
+import LayoutItem, { OneColumn } from "../Layout";
 
 const embedData: ImageEmbedData = {
   resource: "image",
@@ -96,11 +96,11 @@ const meta: Meta<typeof ImageEmbed> = {
     (Story) => (
       <OneColumn>
         <ArticleWrapper modifier="clean">
-          <section className="u-4/6@desktop u-push-1/6@desktop u-10/12@tablet u-push-1/12@tablet">
+          <LayoutItem layout="center">
             <section>
               <Story />
             </section>
-          </section>
+          </LayoutItem>
         </ArticleWrapper>
       </OneColumn>
     ),

package/src/Embed/ImageEmbed.tsx

@@ -161,6 +161,10 @@ const ImageEmbed = ({
 
   const { data, embedData } = embed;
 
+  // Full-size figures automatically get a margin of {spacing.normal} on its y-axis if a float is not set (or if float is an empty string).
+  // This adds some margin to normal figures within an article, but should not happen for figures in a grid.
+  const floatAttr = inGrid && !embedData.align ? {} : { "data-float": embedData.align };
+
   const altText = embedData.alt || "";
 
   const figureType = getFigureType(embedData.size, embedData.align);
@@ -172,7 +176,7 @@ const ImageEmbed = ({
   const isCopyrighted = data.copyright.license.license.toLowerCase() === COPYRIGHTED;
 
   return (
-    <StyledFigure type={imageSizes ? undefined : figureType} data-float={embedData.align}>
+    <StyledFigure type={imageSizes ? undefined : figureType} {...floatAttr}>
       {children}
       <ImageWrapper
         src={!isCopyrighted ? canonicalUrl?.(data) : undefined}

package/src/Embed/RelatedContentEmbed.stories.tsx

@@ -10,7 +10,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { RelatedContentMetaData } from "@ndla/types-embed";
 import RelatedContentEmbed from "./RelatedContentEmbed";
 import { ArticleWrapper } from "../Article";
-import { OneColumn } from "../Layout";
+import LayoutItem, { OneColumn } from "../Layout";
 import RelatedArticleList from "../RelatedArticleList";
 
 const filmResourceMeta: RelatedContentMetaData = {
@@ -369,11 +369,11 @@ const meta: Meta<typeof RelatedContentEmbed> = {
     (Story) => (
       <OneColumn>
         <ArticleWrapper modifier="clean">
-          <section className="u-4/6@desktop u-push-1/6@desktop u-10/12@tablet u-push-1/12@tablet">
+          <LayoutItem layout="center">
             <section>
               <Story />
             </section>
-          </section>
+          </LayoutItem>
         </ArticleWrapper>
       </OneColumn>
     ),
@@ -404,6 +404,17 @@ const linkEmbed2: RelatedContentMetaData = {
   status: "success",
 };
 
+const linkEmbed3: RelatedContentMetaData = {
+  resource: "related-content",
+  embedData: {
+    resource: "related-content",
+    title: "Valg av tillitselev fra klassen",
+    url: "https://xn--elevrd-mua.no",
+  },
+  data: undefined,
+  status: "success",
+};
+
 export const RelatedContentStory: StoryObj<typeof RelatedContentEmbed> = {
   render: () => (
     <RelatedArticleList>
@@ -429,6 +440,7 @@ export const WithLinks: StoryObj<typeof RelatedContentEmbed> = {
     <RelatedArticleList>
       <RelatedContentEmbed embed={linkEmbed1} />
       <RelatedContentEmbed embed={linkEmbed2} />
+      <RelatedContentEmbed embed={linkEmbed3} />
     </RelatedArticleList>
   ),
 };

package/src/Embed/RelatedContentEmbed.tsx

@@ -6,6 +6,7 @@
  *
  */
 
+import punycode from "punycode/";
 import { useTranslation } from "react-i18next";
 import { RelatedContentMetaData } from "@ndla/types-embed";
 import { contentTypeMapping } from "../model/ContentType";
@@ -53,7 +54,9 @@ const RelatedContentEmbed = ({ embed, isOembed, subject, ndlaFrontendDomain }: P
         type={"external"}
         linkInfo={`${t("related.linkInfo")} ${
           // Get domain name only from url
-          embedData.url.match(/^(?:https?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:/\n]+)/im)?.[1] || embedData.url
+          punycode.toUnicode(
+            embedData.url.match(/^(?:https?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:/\n]+)/im)?.[1] || embedData.url,
+          )
         }`}
       />
     );