@ndla/ui 56.0.48-alpha.0 → 56.0.50-alpha.0

package/dist/panda.buildinfo.json

@@ -224,6 +224,8 @@
       "width]___[value:5xlarge]___[cond:& svg",
       "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",
@@ -285,7 +287,6 @@
       "transitionDuration]___[value:slow",
       "transitionTimingFunction]___[value:ease-in-out",
       "justifyItems]___[value:center",
-      "clear]___[value:both",
       "gridTemplateRows]___[value:1fr]___[cond:_open",
       "overflow]___[value:visible]___[cond:_closed<___>_print",
       "maxHeight]___[value:500vh]___[cond:_closed<___>_print",

package/dist/styles.css

@@ -489,6 +489,10 @@
     background: var(--colors-background-subtle);
 }
 
+  .clear_both {
+    clear: both;
+}
+
   .z_docked {
     z-index: var(--z-index-docked);
 }
@@ -545,10 +549,6 @@
     margin-block: var(--spacing-xxlarge);
 }
 
-  .clear_both {
-    clear: both;
-}
-
   .tu-o_2px {
     text-underline-offset: 2px;
 }
@@ -986,6 +986,10 @@
     margin-block-start: var(--spacing-3xsmall);
 }
 
+  .\[\&_\+_\[data-embed-wrapper\]\]\:clear_both + [data-embed-wrapper] {
+    clear: both;
+}
+
   .\[\&_iframe\]\:h_auto iframe {
     height: auto;
 }

package/es/Embed/EmbedWrapper.js

@@ -8,17 +8,44 @@
 
 import { forwardRef } from "react";
 import { ark } from "@ark-ui/react";
+import { css, cva } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
 import { jsx as _jsx } from "react/jsx-runtime";
-const StyledEmbedWrapper = styled(ark.div, {
+const embedWrapperRecipe = cva({
   base: {
     position: "relative"
+  },
+  defaultVariants: {
+    noClear: false
+  },
+  variants: {
+    noClear: {
+      true: {
+        "& + [data-embed-wrapper]": {
+          clear: "both"
+        }
+      },
+      false: {
+        clear: "both"
+      }
+    }
   }
-}, {
+});
+const StyledEmbedWrapper = styled(ark.div, {}, {
   baseComponent: true
 });
-export const EmbedWrapper = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(StyledEmbedWrapper, {
-  "data-embed-wrapper": "",
-  ...props,
-  ref: ref
-}));
+export const EmbedWrapper = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    noClear,
+    css: cssProp,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(StyledEmbedWrapper, {
+    css: css.raw(embedWrapperRecipe.raw({
+      noClear
+    }), cssProp),
+    "data-embed-wrapper": "",
+    ...props,
+    ref: ref
+  });
+});

package/lib/Embed/EmbedWrapper.d.ts

@@ -6,6 +6,25 @@
  *
  */
 /// <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>>;
+import { type HTMLArkProps } from "@ark-ui/react";
+import { JsxStyleProps, RecipeVariantProps } from "@ndla/styled-system/types";
+declare const embedWrapperRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
+    noClear: {
+        true: {
+            "& + [data-embed-wrapper]": {
+                clear: "both";
+            };
+        };
+        false: {
+            clear: "both";
+        };
+    };
+}>;
+export type EmbedWrapperVariantProps = RecipeVariantProps<typeof embedWrapperRecipe>;
+export type EmbedWrapperProps = HTMLArkProps<"div"> & JsxStyleProps & EmbedWrapperVariantProps;
+export declare const EmbedWrapper: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & {
+    noClear?: boolean | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/lib/Embed/EmbedWrapper.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.EmbedWrapper = void 0;
 var _react = require("react");
 var _react2 = require("@ark-ui/react");
+var _css = require("@ndla/styled-system/css");
 var _jsx2 = require("@ndla/styled-system/jsx");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
@@ -16,15 +17,41 @@ var _jsxRuntime = require("react/jsx-runtime");
  *
  */
 
-const StyledEmbedWrapper = (0, _jsx2.styled)(_react2.ark.div, {
+const embedWrapperRecipe = (0, _css.cva)({
   base: {
     position: "relative"
+  },
+  defaultVariants: {
+    noClear: false
+  },
+  variants: {
+    noClear: {
+      true: {
+        "& + [data-embed-wrapper]": {
+          clear: "both"
+        }
+      },
+      false: {
+        clear: "both"
+      }
+    }
   }
-}, {
+});
+const StyledEmbedWrapper = (0, _jsx2.styled)(_react2.ark.div, {}, {
   baseComponent: true
 });
-const EmbedWrapper = exports.EmbedWrapper = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledEmbedWrapper, {
-  "data-embed-wrapper": "",
-  ...props,
-  ref: ref
-}));
+const EmbedWrapper = exports.EmbedWrapper = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    noClear,
+    css: cssProp,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledEmbedWrapper, {
+    css: _css.css.raw(embedWrapperRecipe.raw({
+      noClear
+    }), cssProp),
+    "data-embed-wrapper": "",
+    ...props,
+    ref: ref
+  });
+});

package/lib/Embed/index.d.ts

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

package/lib/index.d.ts

@@ -7,6 +7,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, EmbedWrapper, } from "./Embed";
+export type { EmbedWrapperProps, EmbedWrapperVariantProps } 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.48-alpha.0",
+  "version": "56.0.50-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -33,11 +33,11 @@
   ],
   "dependencies": {
     "@ndla/core": "^5.0.2",
-    "@ndla/icons": "^8.0.29-alpha.0",
+    "@ndla/icons": "^8.0.30-alpha.0",
     "@ndla/licenses": "^8.0.3-alpha.0",
-    "@ndla/primitives": "^1.0.43-alpha.0",
-    "@ndla/safelink": "^7.0.43-alpha.0",
-    "@ndla/styled-system": "^0.0.23",
+    "@ndla/primitives": "^1.0.44-alpha.0",
+    "@ndla/safelink": "^7.0.44-alpha.0",
+    "@ndla/styled-system": "^0.0.24",
     "@ndla/util": "^5.0.0-alpha.0",
     "html-react-parser": "^5.1.8",
     "i18next-browser-languagedetector": "^7.1.0"
@@ -50,7 +50,7 @@
     "react-router-dom": "> 6.0.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.38",
+    "@ndla/preset-panda": "^0.0.39",
     "@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": "58ee18eab14c58d6e75fb4074f7a1f39dd538957"
+  "gitHead": "98f727d2e22b4030ec61672a8f843b2d0d0ef278"
 }

package/src/Embed/EmbedWrapper.tsx

@@ -6,20 +6,46 @@
  *
  */
 
-import { ComponentPropsWithRef, forwardRef } from "react";
-import { ark } from "@ark-ui/react";
+import { forwardRef } from "react";
+import { ark, type HTMLArkProps } from "@ark-ui/react";
+import { css, cva } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
+import { JsxStyleProps, RecipeVariantProps } from "@ndla/styled-system/types";
 
-const StyledEmbedWrapper = styled(
-  ark.div,
-  {
-    base: {
-      position: "relative",
+const embedWrapperRecipe = cva({
+  base: {
+    position: "relative",
+  },
+  defaultVariants: {
+    noClear: false,
+  },
+  variants: {
+    noClear: {
+      true: {
+        "& + [data-embed-wrapper]": {
+          clear: "both",
+        },
+      },
+      false: {
+        clear: "both",
+      },
     },
   },
-  { baseComponent: true },
-);
+});
+
+export type EmbedWrapperVariantProps = RecipeVariantProps<typeof embedWrapperRecipe>;
 
-export const EmbedWrapper = forwardRef<HTMLDivElement, ComponentPropsWithRef<"div">>((props, ref) => (
-  <StyledEmbedWrapper data-embed-wrapper="" {...props} ref={ref} />
-));
+export type EmbedWrapperProps = HTMLArkProps<"div"> & JsxStyleProps & EmbedWrapperVariantProps;
+
+const StyledEmbedWrapper = styled(ark.div, {}, { baseComponent: true });
+
+export const EmbedWrapper = forwardRef<HTMLDivElement, EmbedWrapperProps>(
+  ({ noClear, css: cssProp, ...props }, ref) => (
+    <StyledEmbedWrapper
+      css={css.raw(embedWrapperRecipe.raw({ noClear }), cssProp)}
+      data-embed-wrapper=""
+      {...props}
+      ref={ref}
+    />
+  ),
+);

package/src/Embed/index.ts

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

package/src/index.ts

@@ -34,6 +34,8 @@ export {
   EmbedWrapper,
 } from "./Embed";
 
+export type { EmbedWrapperProps, EmbedWrapperVariantProps } from "./Embed";
+
 export { LicenseLink, EmbedByline } from "./LicenseByline";
 
 export {