@ndla/ui 56.0.38-alpha.0 → 56.0.40-alpha.0

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/KeyFigure/KeyFigure.js

@@ -21,7 +21,11 @@ const ContentWrapper = (0, _jsx2.styled)("div", {
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
-    justifyContent: "center"
+    justifyContent: "center",
+    gap: "xsmall",
+    "&:not(:has(> img))": {
+      paddingBlock: "xxlarge"
+    }
   }
 });
 const StyledImage = (0, _jsx2.styled)("img", {

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: {
@@ -1397,9 +1394,6 @@ declare const messages: {
             pinyin: string;
         };
     };
-    uuDisclaimer: {
-        alternative: string;
-    };
     wordClass: {
         [x: string]: string;
     };

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: {
@@ -1414,9 +1411,6 @@ const messages = {
       pinyin: "Pinyin"
     }
   },
-  uuDisclaimer: {
-    alternative: "You can find alternative content in the article"
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjective",
     [wordClass.wordClass.adverb]: "Adverb",

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: {
@@ -1397,9 +1394,6 @@ declare const messages: {
             pinyin: string;
         };
     };
-    uuDisclaimer: {
-        alternative: string;
-    };
     wordClass: {
         [x: string]: string;
     };

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: {
@@ -1414,9 +1411,6 @@ const messages = {
       pinyin: "Pinyin"
     }
   },
-  uuDisclaimer: {
-    alternative: "Du kan finne alternativt innhold i artikkelen"
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiv",
     [wordClass.wordClass.adverb]: "Adverb",

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: {
@@ -1397,9 +1394,6 @@ declare const messages: {
             pinyin: string;
         };
     };
-    uuDisclaimer: {
-        alternative: string;
-    };
     wordClass: {
         [x: string]: string;
     };

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: {
@@ -1414,9 +1411,6 @@ const messages = {
       pinyin: "Pinyin"
     }
   },
-  uuDisclaimer: {
-    alternative: "Du kan finne alternativt innhald i artikkelen"
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiv",
     [wordClass.wordClass.adverb]: "Adverb",

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: {
@@ -1397,9 +1394,6 @@ declare const messages: {
             pinyin: string;
         };
     };
-    uuDisclaimer: {
-        alternative: string;
-    };
     wordClass: {
         [x: string]: string;
     };

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: {
@@ -1414,9 +1411,6 @@ const messages = {
       pinyin: "Pinyin"
     }
   },
-  uuDisclaimer: {
-    alternative: "Du kan finne alternativt innhold i artikkelen"
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiivvat",
     [wordClass.wordClass.adverb]: "Advearba",

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: {
@@ -1397,9 +1394,6 @@ declare const messages: {
             pinyin: string;
         };
     };
-    uuDisclaimer: {
-        alternative: string;
-    };
     wordClass: {
         [x: string]: string;
     };

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: {
@@ -1414,9 +1411,6 @@ const messages = {
       pinyin: "Pinyin"
     }
   },
-  uuDisclaimer: {
-    alternative: "Du kan finne alternativt innhold i artikkelen"
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiv",
     [wordClass.wordClass.adverb]: "Adverb",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.38-alpha.0",
+  "version": "56.0.40-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.35-alpha.0",
-    "@ndla/safelink": "^7.0.35-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": "53f7afbd4c31ab255da453bbd11bc206ecdbd7e1"
+  "gitHead": "4bdd26c1af4c3ed459924af5888de4040de6d47b"
 }

package/src/Article/Article.tsx

@@ -113,6 +113,7 @@ const StyledStack = styled(Stack, {
 interface ArticleTitleProps {
   heartButton?: ReactNode;
   contentType?: ContentType;
+  contentTypeLabel?: ReactNode;
   competenceGoals?: ReactNode;
   id: string;
   lang?: string;
@@ -127,6 +128,7 @@ export const ArticleTitle = ({
   lang,
   id,
   introduction,
+  contentTypeLabel,
   competenceGoals,
 }: ArticleTitleProps) => {
   return (
@@ -134,7 +136,7 @@ export const ArticleTitle = ({
       <ArticleHGroup>
         {(!!contentType || !!heartButton) && (
           <StyledStack justify="space-between" align="center" direction="row" gap="small">
-            {!!contentType && <ContentTypeBadgeNew contentType={contentType} />}
+            {!!contentType && <ContentTypeBadgeNew contentType={contentType}>{contentTypeLabel}</ContentTypeBadgeNew>}
             {heartButton}
           </StyledStack>
         )}
@@ -157,6 +159,7 @@ interface Props {
   article: ArticleType;
   licenseBox?: ReactNode;
   contentType?: ContentType;
+  contentTypeLabel?: ReactNode;
   children?: ReactNode;
   competenceGoals?: ReactNode;
   id: string;
@@ -169,6 +172,7 @@ export const Article = ({
   licenseBox,
   children,
   competenceGoals,
+  contentTypeLabel,
   id,
   heartButton,
   lang,
@@ -188,6 +192,7 @@ export const Article = ({
         introduction={introduction}
         competenceGoals={competenceGoals}
         lang={lang}
+        contentTypeLabel={contentTypeLabel}
       />
       <ArticleContent>{content}</ArticleContent>
       <ArticleFooter>

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

@@ -7,7 +7,6 @@
  */
 
 import { ReactNode } from "react";
-import { useTranslation } from "react-i18next";
 import { InformationLine } from "@ndla/icons/common";
 import { MessageBox } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
@@ -23,6 +22,7 @@ const StyledMessageBox = styled(MessageBox, {
   base: {
     display: "flex",
     alignItems: "center",
+    marginBlockEnd: "xsmall",
   },
 });
 const Disclaimer = styled("div", {
@@ -30,10 +30,13 @@ const Disclaimer = styled("div", {
     textStyle: "body.medium",
   },
 });
+const StyledSafeLink = styled(SafeLink, {
+  base: {
+    paddingInlineStart: "4xsmall",
+  },
+});
 
 const UuDisclaimerEmbed = ({ embed, children }: Props) => {
-  const { t } = useTranslation();
-
   if (embed.status === "error") {
     return null;
   }
@@ -41,12 +44,9 @@ const UuDisclaimerEmbed = ({ embed, children }: Props) => {
   const { embedData, data } = embed;
 
   const disclaimerLink = data?.disclaimerLink ? (
-    <>
-      {` ${t("uuDisclaimer.alternative")} `}
-      <SafeLink to={data.disclaimerLink.href} target="_blank" rel="noopener noreferrer">
-        {data.disclaimerLink.text}
-      </SafeLink>
-    </>
+    <StyledSafeLink to={data.disclaimerLink.href} target="_blank" rel="noopener noreferrer">
+      {data.disclaimerLink.text}
+    </StyledSafeLink>
   ) : null;
 
   return (
@@ -58,7 +58,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/Grid/Grid.stories.tsx

@@ -50,7 +50,11 @@ export const GridKeyPerformanceStory: StoryFn<typeof Grid> = ({ ...args }) => {
   const columns = args.columns === "2x2" ? 4 : parseInt(args.columns);
   const items = new Array(columns).fill(0).map((_, idx) => {
     const args = keyFigureArgs[idx % keyFigureArgs.length];
-    return <Plain key={idx} {...args} />;
+    return (
+      <div key={idx} data-type="grid-cell" data-parallax-cell="false">
+        <Plain key={idx} {...args} />
+      </div>
+    );
   });
   return <Grid {...args}>{items}</Grid>;
 };
@@ -58,14 +62,16 @@ export const GridKeyPerformanceStory: StoryFn<typeof Grid> = ({ ...args }) => {
 export const GridBlogPostStory: StoryFn<typeof Grid> = ({ ...args }) => {
   const columns = args.columns === "2x2" ? 4 : parseInt(args.columns);
   const items = new Array(columns).fill(
-    <BlogPostStory
-      metaImage={BlogPostStory.args?.metaImage!}
-      title={BlogPostStory.args?.title!}
-      size={"normal"}
-      headingLevel={BlogPostStory.args?.headingLevel}
-      url={BlogPostStory.args?.url!}
-      author={BlogPostStory.args?.author}
-    />,
+    <div data-type="grid-cell" data-parallax-cell="false">
+      <BlogPostStory
+        metaImage={BlogPostStory.args?.metaImage!}
+        title={BlogPostStory.args?.title!}
+        size={"normal"}
+        headingLevel={BlogPostStory.args?.headingLevel}
+        url={BlogPostStory.args?.url!}
+        author={BlogPostStory.args?.author}
+      />
+    </div>,
   );
   return <Grid {...args}>{items}</Grid>;
 };

package/src/KeyFigure/KeyFigure.tsx

@@ -15,6 +15,11 @@ const ContentWrapper = styled("div", {
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "center",
+    gap: "xsmall",
+
+    "&:not(:has(> img))": {
+      paddingBlock: "xxlarge",
+    },
   },
 });