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

package/dist/panda.buildinfo.json

@@ -179,6 +179,7 @@
       "opacity]___[value:0",
       "cursor]___[value:pointer",
       "opacity]___[value:1]___[cond:&:focus, &:focus-visible, &:active",
+      "clear]___[value:both",
       "marginBlockStart]___[value:3xsmall",
       "border]___[value:0",
       "height]___[value:auto",
@@ -215,7 +216,6 @@
       "fill]___[value:stroke.default]___[cond:& svg",
       "marginBlockStart]___[value:3xsmall]___[cond:& > *:not(:first-child)",
       "clear]___[value:both]___[cond:& + [data-embed-wrapper]",
-      "clear]___[value:both",
       "height]___[value:auto]___[cond:& iframe",
       "width]___[value:100%]___[cond:& iframe",
       "textStyle]___[value:label.xsmall]___[cond:& a",

package/dist/styles.css

@@ -393,6 +393,10 @@
     cursor: pointer;
 }
 
+  .clear_both {
+    clear: both;
+}
+
   .mbs_3xsmall {
     margin-block-start: var(--spacing-3xsmall);
 }
@@ -437,10 +441,6 @@
     background: var(--colors-background-subtle);
 }
 
-  .clear_both {
-    clear: both;
-}
-
   .z_docked {
     z-index: var(--z-index-docked);
 }

package/es/Embed/AudioEmbed.js

@@ -7,11 +7,17 @@
  */
 
 import { Figure } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
 import AudioPlayer from "../AudioPlayer";
 import { EmbedByline } from "../LicenseByline";
 import { licenseAttributes } from "../utils/licenseAttributes";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledFigure = styled(Figure, {
+  base: {
+    clear: "both"
+  }
+});
 export const getFirstNonEmptyLicenseCredits = authors => Object.values(authors).find(i => i.length > 0) ?? [];
 const AudioEmbed = _ref => {
   let {
@@ -45,7 +51,7 @@ const AudioEmbed = _ref => {
     alt: coverPhoto.altText
   };
   const licenseProps = licenseAttributes(data.copyright.license.license, lang, embedData.url);
-  return /*#__PURE__*/_jsxs(Figure, {
+  return /*#__PURE__*/_jsxs(StyledFigure, {
     lang: lang,
     "data-embed-type": type,
     ...licenseProps,

package/es/Embed/IframeEmbed.js

@@ -19,6 +19,11 @@ const StyledIframe = styled("iframe", {
     border: 0
   }
 });
+const StyledFigure = styled(Figure, {
+  base: {
+    clear: "both"
+  }
+});
 const IframeEmbed = _ref => {
   let {
     embed
@@ -52,7 +57,7 @@ const IframeEmbed = _ref => {
       src: iframeImage?.image.imageUrl,
       alt: alt ?? ""
     };
-    return /*#__PURE__*/_jsx(Figure, {
+    return /*#__PURE__*/_jsx(StyledFigure, {
       "data-embed-type": "iframe",
       children: /*#__PURE__*/_jsx(ResourceBox, {
         image: image,
@@ -72,7 +77,7 @@ const IframeEmbed = _ref => {
   const strippedWidth = typeof width === "number" ? width : width?.replace(/\s*px/, "");
   const strippedHeight = typeof height === "number" ? height : height?.replace(/\s*px/, "");
   const urlOrTitle = title || url;
-  return /*#__PURE__*/_jsx(Figure, {
+  return /*#__PURE__*/_jsx(StyledFigure, {
     "data-embed-type": "iframe",
     children: /*#__PURE__*/_jsx(StyledIframe, {
       ref: iframeRef,

package/es/Embed/UuDisclaimerEmbed.js

@@ -37,6 +37,11 @@ const StyledSafeLink = styled(SafeLink, {
     }
   }
 });
+const Wrapper = styled("div", {
+  base: {
+    clear: "both"
+  }
+});
 const UuDisclaimerEmbed = _ref => {
   let {
     embed,
@@ -55,7 +60,7 @@ const UuDisclaimerEmbed = _ref => {
     rel: "noopener noreferrer",
     children: data.disclaimerLink.text
   }) : null;
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsxs(Wrapper, {
     role: "region",
     "data-embed-type": "uu-disclaimer",
     children: [/*#__PURE__*/_jsxs(StyledMessageBox, {

package/es/RelatedArticleList/RelatedArticleList.js

@@ -88,7 +88,8 @@ const StyledSection = styled("section", {
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
-    gap: "medium"
+    gap: "medium",
+    clear: "both"
   }
 });
 const StyledButton = styled(Button, {

package/lib/Embed/AudioEmbed.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getFirstNonEmptyLicenseCredits = exports.default = void 0;
 var _primitives = require("@ndla/primitives");
+var _jsx2 = require("@ndla/styled-system/jsx");
 var _EmbedErrorPlaceholder = _interopRequireDefault(require("./EmbedErrorPlaceholder"));
 var _AudioPlayer = _interopRequireDefault(require("../AudioPlayer"));
 var _LicenseByline = require("../LicenseByline");
@@ -19,6 +20,11 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  *
  */
 
+const StyledFigure = (0, _jsx2.styled)(_primitives.Figure, {
+  base: {
+    clear: "both"
+  }
+});
 const getFirstNonEmptyLicenseCredits = authors => Object.values(authors).find(i => i.length > 0) ?? [];
 exports.getFirstNonEmptyLicenseCredits = getFirstNonEmptyLicenseCredits;
 const AudioEmbed = _ref => {
@@ -53,7 +59,7 @@ const AudioEmbed = _ref => {
     alt: coverPhoto.altText
   };
   const licenseProps = (0, _licenseAttributes.licenseAttributes)(data.copyright.license.license, lang, embedData.url);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.Figure, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledFigure, {
     lang: lang,
     "data-embed-type": type,
     ...licenseProps,

package/lib/Embed/IframeEmbed.js

@@ -26,6 +26,11 @@ const StyledIframe = (0, _jsx2.styled)("iframe", {
     border: 0
   }
 });
+const StyledFigure = (0, _jsx2.styled)(_primitives.Figure, {
+  base: {
+    clear: "both"
+  }
+});
 const IframeEmbed = _ref => {
   let {
     embed
@@ -59,7 +64,7 @@ const IframeEmbed = _ref => {
       src: iframeImage?.image.imageUrl,
       alt: alt ?? ""
     };
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Figure, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFigure, {
       "data-embed-type": "iframe",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResourceBox.ResourceBox, {
         image: image,
@@ -79,7 +84,7 @@ const IframeEmbed = _ref => {
   const strippedWidth = typeof width === "number" ? width : width?.replace(/\s*px/, "");
   const strippedHeight = typeof height === "number" ? height : height?.replace(/\s*px/, "");
   const urlOrTitle = title || url;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Figure, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFigure, {
     "data-embed-type": "iframe",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledIframe, {
       ref: iframeRef,

package/lib/Embed/UuDisclaimerEmbed.js

@@ -43,6 +43,11 @@ const StyledSafeLink = (0, _jsx2.styled)(_safelink.SafeLink, {
     }
   }
 });
+const Wrapper = (0, _jsx2.styled)("div", {
+  base: {
+    clear: "both"
+  }
+});
 const UuDisclaimerEmbed = _ref => {
   let {
     embed,
@@ -61,7 +66,7 @@ const UuDisclaimerEmbed = _ref => {
     rel: "noopener noreferrer",
     children: data.disclaimerLink.text
   }) : null;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
     role: "region",
     "data-embed-type": "uu-disclaimer",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledMessageBox, {

package/lib/RelatedArticleList/RelatedArticleList.js

@@ -95,7 +95,8 @@ const StyledSection = (0, _jsx2.styled)("section", {
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
-    gap: "medium"
+    gap: "medium",
+    clear: "both"
   }
 });
 const StyledButton = (0, _jsx2.styled)(_primitives.Button, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.85-alpha.0",
+  "version": "56.0.86-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -35,8 +35,8 @@
     "@ndla/core": "^5.0.3",
     "@ndla/icons": "^8.0.49-alpha.0",
     "@ndla/licenses": "^8.0.6-alpha.0",
-    "@ndla/primitives": "^1.0.68-alpha.0",
-    "@ndla/safelink": "^7.0.69-alpha.0",
+    "@ndla/primitives": "^1.0.69-alpha.0",
+    "@ndla/safelink": "^7.0.70-alpha.0",
     "@ndla/styled-system": "^0.0.30",
     "@ndla/util": "^5.0.5-alpha.0",
     "html-react-parser": "^5.1.19",
@@ -52,11 +52,11 @@
   "devDependencies": {
     "@ndla/preset-panda": "^0.0.49",
     "@ndla/types-backend": "^1.0.1",
-    "@ndla/types-embed": "^5.0.6-alpha.0",
+    "@ndla/types-embed": "^5.0.7-alpha.0",
     "@pandacss/dev": "^0.48.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7960790a61f90467f2c0b0919201967eac276662"
+  "gitHead": "ed6699652dec494cf9cf12712316ba5f4036438a"
 }

package/src/Embed/AudioEmbed.tsx

@@ -7,6 +7,7 @@
  */
 
 import { Figure } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 import type { AudioMetaData } from "@ndla/types-embed";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
 import type { Author } from "./ImageEmbed";
@@ -14,6 +15,12 @@ import AudioPlayer from "../AudioPlayer";
 import { EmbedByline } from "../LicenseByline";
 import { licenseAttributes } from "../utils/licenseAttributes";
 
+const StyledFigure = styled(Figure, {
+  base: {
+    clear: "both",
+  },
+});
+
 interface Props {
   embed: AudioMetaData;
   lang?: string;
@@ -46,7 +53,7 @@ const AudioEmbed = ({ embed, lang }: Props) => {
   const licenseProps = licenseAttributes(data.copyright.license.license, lang, embedData.url);
 
   return (
-    <Figure lang={lang} data-embed-type={type} {...licenseProps}>
+    <StyledFigure lang={lang} data-embed-type={type} {...licenseProps}>
       <AudioPlayer
         description={data.podcastMeta?.introduction ?? ""}
         img={img}
@@ -64,7 +71,7 @@ const AudioEmbed = ({ embed, lang }: Props) => {
         type={data.audioType === "standard" ? "audio" : "podcast"}
         copyright={embed.data.copyright}
       />
-    </Figure>
+    </StyledFigure>
   );
 };
 

package/src/Embed/BrightcoveEmbed.stories.tsx

@@ -105,7 +105,7 @@ const visuallyInterpretedEmbedMetaData: BrightcoveMetaData = {
         src: "https://cf-images.eu-west-1.prod.boltdns.net/v1/static/4806596774001/a09bcb7b-ffe1-4c3a-98ea-bf997340a8cd/23f01e33-413e-418c-a4de-2c87c8b05c26/1280x720/match/image.jpg",
       },
     },
-    link: { text: "6242635463001" },
+    link: { text: "6242635463001", url: "" },
     long_description: null,
     name: "Frivillighet i helse og omsorgstjenesten (synstolket)",
     published_at: "2021-03-25T11:40:38.476Z",

package/src/Embed/IframeEmbed.tsx

@@ -25,6 +25,12 @@ const StyledIframe = styled("iframe", {
   },
 });
 
+const StyledFigure = styled(Figure, {
+  base: {
+    clear: "both",
+  },
+});
+
 const IframeEmbed = ({ embed }: Props) => {
   const { t } = useTranslation();
   const iframeRef = useRef<HTMLIFrameElement>(null);
@@ -50,7 +56,7 @@ const IframeEmbed = ({ embed }: Props) => {
     const alt = embedData.alt !== undefined ? embedData.alt : iframeImage?.alttext.alttext;
     const image = { src: iframeImage?.image.imageUrl, alt: alt ?? "" };
     return (
-      <Figure data-embed-type="iframe">
+      <StyledFigure data-embed-type="iframe">
         <ResourceBox
           image={image}
           title={embedData.title ?? ""}
@@ -58,7 +64,7 @@ const IframeEmbed = ({ embed }: Props) => {
           caption={embedData.caption ?? ""}
           buttonText={t("license.other.itemImage.ariaLabel")}
         />
-      </Figure>
+      </StyledFigure>
     );
   }
 
@@ -69,7 +75,7 @@ const IframeEmbed = ({ embed }: Props) => {
   const urlOrTitle = title || url;
 
   return (
-    <Figure data-embed-type="iframe">
+    <StyledFigure data-embed-type="iframe">
       <StyledIframe
         ref={iframeRef}
         title={urlOrTitle}
@@ -80,7 +86,7 @@ const IframeEmbed = ({ embed }: Props) => {
         allow="fullscreen; encrypted-media"
         loading="lazy"
       />
-    </Figure>
+    </StyledFigure>
   );
 };
 

package/src/Embed/UuDisclaimerEmbed.tsx

@@ -45,6 +45,12 @@ const StyledSafeLink = styled(SafeLink, {
   },
 });
 
+const Wrapper = styled("div", {
+  base: {
+    clear: "both",
+  },
+});
+
 const UuDisclaimerEmbed = ({ embed, children }: Props) => {
   if (embed.status === "error") {
     return null;
@@ -59,7 +65,7 @@ const UuDisclaimerEmbed = ({ embed, children }: Props) => {
   ) : null;
 
   return (
-    <div role="region" data-embed-type="uu-disclaimer">
+    <Wrapper role="region" data-embed-type="uu-disclaimer">
       <StyledMessageBox variant="warning" contentEditable={false}>
         <InformationLine />
         <Disclaimer>
@@ -68,7 +74,7 @@ const UuDisclaimerEmbed = ({ embed, children }: Props) => {
         </Disclaimer>
       </StyledMessageBox>
       <div data-uu-content="">{children}</div>
-    </div>
+    </Wrapper>
   );
 };
 

package/src/RelatedArticleList/RelatedArticleList.tsx

@@ -98,6 +98,7 @@ const StyledSection = styled("section", {
     flexDirection: "column",
     alignItems: "center",
     gap: "medium",
+    clear: "both",
   },
 });