@scrippsproduct/networks-ui-library 1.1.9 → 1.1.10-alpha.0

package/dist/components/LogoListItem/LogoListItem.test.js

@@ -0,0 +1,303 @@
+import { jsx as o } from "react/jsx-runtime";
+import { v as c, d as s, i as n, r as a, s as i, g as t } from "../../react.esm-DLSrfVwM.mjs";
+import { LogoListItem as l } from "./LogoListItem.js";
+c.mock("../../utils/helpers", () => ({
+  classes: (e) => e.filter(Boolean).join(" ")
+}));
+c.mock("./LogoListItem.module.scss", () => ({
+  default: {
+    "icon-list-item": "icon-list-item-module",
+    "icon-list-item__link": "icon-list-item__link-module",
+    "ion-list-item__image": "ion-list-item__image-module",
+    "icon-list-item__img-wrapper": "icon-list-item__img-wrapper-module"
+  }
+}));
+s("LogoListItem", () => {
+  s("Basic Rendering", () => {
+    n("should render list item element", () => {
+      a(/* @__PURE__ */ o(l, { imageSource: "/logo.png" }));
+      const e = i.getByRole("listitem");
+      t(e).toBeInTheDocument(), t(e.tagName).toBe("LI");
+    }), n("should apply list item classes", () => {
+      a(/* @__PURE__ */ o(l, { imageSource: "/logo.png" }));
+      const e = i.getByRole("listitem");
+      t(e).toHaveClass("icon-list-item-module"), t(e).toHaveClass("icon-list-item");
+    }), n("should render image with imageSource", () => {
+      a(/* @__PURE__ */ o(l, { imageSource: "/test-logo.png" }));
+      const e = i.getByRole("img");
+      t(e).toBeInTheDocument(), t(e).toHaveAttribute("src", "/test-logo.png");
+    }), n('should render image with alt text including "logo"', () => {
+      a(/* @__PURE__ */ o(l, { altText: "Company", imageSource: "/logo.png" }));
+      const e = i.getByRole("img");
+      t(e).toHaveAttribute("alt", "Company logo");
+    });
+  }), s("With href (Link Mode)", () => {
+    n("should render link when href is provided", () => {
+      a(/* @__PURE__ */ o(l, { href: "https://example.com", imageSource: "/logo.png" }));
+      const e = i.getByRole("link");
+      t(e).toBeInTheDocument(), t(e).toHaveAttribute("href", "https://example.com");
+    }), n("should apply link classes", () => {
+      a(/* @__PURE__ */ o(l, { href: "https://example.com", imageSource: "/logo.png" }));
+      const e = i.getByRole("link");
+      t(e).toHaveClass("icon-list-item__link-module"), t(e).toHaveClass("icon-list-item__link");
+    }), n("should render sr-only span with altText", () => {
+      const { container: e } = a(
+        /* @__PURE__ */ o(
+          l,
+          {
+            altText: "Company Name",
+            href: "https://example.com",
+            imageSource: "/logo.png"
+          }
+        )
+      ), r = e.querySelector(".sr-only");
+      t(r).toBeInTheDocument(), t(r).toHaveTextContent("Company Name");
+    }), n("should default target to _self", () => {
+      a(/* @__PURE__ */ o(l, { href: "https://example.com", imageSource: "/logo.png" }));
+      const e = i.getByRole("link");
+      t(e).toHaveAttribute("target", "_self");
+    }), n("should apply target _blank", () => {
+      a(
+        /* @__PURE__ */ o(
+          l,
+          {
+            href: "https://example.com",
+            imageSource: "/logo.png",
+            target: "_blank"
+          }
+        )
+      );
+      const e = i.getByRole("link");
+      t(e).toHaveAttribute("target", "_blank");
+    }), n("should apply target _parent", () => {
+      a(
+        /* @__PURE__ */ o(
+          l,
+          {
+            href: "https://example.com",
+            imageSource: "/logo.png",
+            target: "_parent"
+          }
+        )
+      );
+      const e = i.getByRole("link");
+      t(e).toHaveAttribute("target", "_parent");
+    }), n("should apply target _top", () => {
+      a(
+        /* @__PURE__ */ o(
+          l,
+          {
+            href: "https://example.com",
+            imageSource: "/logo.png",
+            target: "_top"
+          }
+        )
+      );
+      const e = i.getByRole("link");
+      t(e).toHaveAttribute("target", "_top");
+    }), n("should render image inside link with class", () => {
+      a(
+        /* @__PURE__ */ o(
+          l,
+          {
+            altText: "Brand",
+            href: "https://example.com",
+            imageSource: "/logo.png"
+          }
+        )
+      );
+      const e = i.getByRole("img");
+      t(e).toHaveClass("ion-list-item__image-module"), t(e).toHaveAttribute("alt", "Brand logo"), t(e).toHaveAttribute("src", "/logo.png");
+    }), n("should not render span wrapper when href is provided", () => {
+      const { container: e } = a(
+        /* @__PURE__ */ o(
+          l,
+          {
+            href: "https://example.com",
+            imageSource: "/logo.png"
+          }
+        )
+      ), r = e.querySelector(".icon-list-item__img-wrapper");
+      t(r).not.toBeInTheDocument();
+    });
+  }), s("Without href (Span Mode)", () => {
+    n("should not render link when href is empty", () => {
+      a(/* @__PURE__ */ o(l, { href: "", imageSource: "/logo.png" })), t(i.queryByRole("link")).not.toBeInTheDocument();
+    }), n("should not render link when href is not provided", () => {
+      a(/* @__PURE__ */ o(l, { imageSource: "/logo.png" })), t(i.queryByRole("link")).not.toBeInTheDocument();
+    }), n("should render span wrapper when href is empty", () => {
+      const { container: e } = a(/* @__PURE__ */ o(l, { imageSource: "/logo.png" })), r = e.querySelector(".icon-list-item__img-wrapper");
+      t(r).toBeInTheDocument(), t(r == null ? void 0 : r.tagName).toBe("SPAN");
+    }), n("should apply span wrapper classes", () => {
+      const { container: e } = a(/* @__PURE__ */ o(l, { imageSource: "/logo.png" })), r = e.querySelector(".icon-list-item__img-wrapper");
+      t(r).toHaveClass("icon-list-item__img-wrapper-module"), t(r).toHaveClass("icon-list-item__img-wrapper");
+    }), n("should render image inside span wrapper", () => {
+      const { container: e } = a(
+        /* @__PURE__ */ o(
+          l,
+          {
+            altText: "Company",
+            imageSource: "/logo.png"
+          }
+        )
+      ), r = e.querySelector(".icon-list-item__img-wrapper"), g = i.getByRole("img");
+      t(r == null ? void 0 : r.contains(g)).toBe(!0), t(g).toHaveAttribute("alt", "Company logo"), t(g).toHaveAttribute("src", "/logo.png");
+    }), n("should not render sr-only span when no href", () => {
+      const { container: e } = a(
+        /* @__PURE__ */ o(
+          l,
+          {
+            altText: "Company",
+            imageSource: "/logo.png"
+          }
+        )
+      ), r = e.querySelector(".sr-only");
+      t(r).not.toBeInTheDocument();
+    }), n("should not have class on image in span mode", () => {
+      const { container: e } = a(/* @__PURE__ */ o(l, { imageSource: "/logo.png" })), r = e.querySelector(".icon-list-item__img-wrapper"), g = r == null ? void 0 : r.querySelector("img");
+      t(g == null ? void 0 : g.className).toBe("");
+    });
+  }), s("Alt Text Handling", () => {
+    n("should use empty altText by default", () => {
+      a(/* @__PURE__ */ o(l, { imageSource: "/logo.png" }));
+      const e = i.getByRole("img");
+      t(e).toHaveAttribute("alt", " logo");
+    }), n("should use custom altText when provided", () => {
+      a(/* @__PURE__ */ o(l, { altText: "My Brand", imageSource: "/logo.png" }));
+      const e = i.getByRole("img");
+      t(e).toHaveAttribute("alt", "My Brand logo");
+    }), n('should append "logo" to altText in link mode', () => {
+      a(
+        /* @__PURE__ */ o(
+          l,
+          {
+            altText: "Facebook",
+            href: "https://example.com",
+            imageSource: "/logo.png"
+          }
+        )
+      );
+      const e = i.getByRole("img");
+      t(e).toHaveAttribute("alt", "Facebook logo");
+    }), n('should append "logo" to altText in span mode', () => {
+      a(
+        /* @__PURE__ */ o(
+          l,
+          {
+            altText: "Twitter",
+            imageSource: "/logo.png"
+          }
+        )
+      );
+      const e = i.getByRole("img");
+      t(e).toHaveAttribute("alt", "Twitter logo");
+    }), n("should handle altText with special characters", () => {
+      a(/* @__PURE__ */ o(l, { altText: "Company & Co.", imageSource: "/logo.png" }));
+      const e = i.getByRole("img");
+      t(e).toHaveAttribute("alt", "Company & Co. logo");
+    });
+  }), s("Image Source Variations", () => {
+    n("should handle absolute URLs", () => {
+      a(/* @__PURE__ */ o(l, { imageSource: "https://cdn.example.com/logo.png" }));
+      const e = i.getByRole("img");
+      t(e).toHaveAttribute("src", "https://cdn.example.com/logo.png");
+    }), n("should handle relative paths", () => {
+      a(/* @__PURE__ */ o(l, { imageSource: "./assets/logo.png" }));
+      const e = i.getByRole("img");
+      t(e).toHaveAttribute("src", "./assets/logo.png");
+    }), n("should handle root-relative paths", () => {
+      a(/* @__PURE__ */ o(l, { imageSource: "/images/brand/logo.svg" }));
+      const e = i.getByRole("img");
+      t(e).toHaveAttribute("src", "/images/brand/logo.svg");
+    }), n("should handle different image formats", () => {
+      [
+        "/logo.png",
+        "/logo.jpg",
+        "/logo.svg",
+        "/logo.webp",
+        "/logo.gif"
+      ].forEach((r) => {
+        const { unmount: g } = a(/* @__PURE__ */ o(l, { imageSource: r })), m = i.getByRole("img");
+        t(m).toHaveAttribute("src", r), g();
+      });
+    });
+  }), s("Complete Examples", () => {
+    n("should render complete linked logo", () => {
+      a(
+        /* @__PURE__ */ o(
+          l,
+          {
+            altText: "Facebook",
+            href: "https://facebook.com/page",
+            imageSource: "/facebook.svg",
+            target: "_blank"
+          }
+        )
+      );
+      const e = i.getByRole("listitem"), r = i.getByRole("link"), g = i.getByRole("img");
+      t(e).toBeInTheDocument(), t(r).toHaveAttribute("href", "https://facebook.com/page"), t(r).toHaveAttribute("target", "_blank"), t(g).toHaveAttribute("src", "/facebook.svg"), t(g).toHaveAttribute("alt", "Facebook logo");
+    }), n("should render complete non-linked logo", () => {
+      const { container: e } = a(
+        /* @__PURE__ */ o(
+          l,
+          {
+            altText: "Partner Company",
+            imageSource: "/partner-logo.png"
+          }
+        )
+      ), r = i.getByRole("listitem"), g = e.querySelector(".icon-list-item__img-wrapper"), m = i.getByRole("img");
+      t(r).toBeInTheDocument(), t(g).toBeInTheDocument(), t(i.queryByRole("link")).not.toBeInTheDocument(), t(m).toHaveAttribute("src", "/partner-logo.png"), t(m).toHaveAttribute("alt", "Partner Company logo");
+    });
+  }), s("Edge Cases", () => {
+    n("should handle empty imageSource gracefully", () => {
+      a(/* @__PURE__ */ o(l, { imageSource: "" }));
+      const e = i.getByRole("img");
+      t(e).toHaveAttribute("src", "");
+    }), n("should handle very long altText", () => {
+      const e = "A".repeat(200);
+      a(/* @__PURE__ */ o(l, { altText: e, imageSource: "/logo.png" }));
+      const r = i.getByRole("img");
+      t(r).toHaveAttribute("alt", `${e} logo`);
+    }), n("should handle very long href", () => {
+      const e = "https://example.com/" + "path/".repeat(50);
+      a(/* @__PURE__ */ o(l, { href: e, imageSource: "/logo.png" }));
+      const r = i.getByRole("link");
+      t(r).toHaveAttribute("href", e);
+    }), n("should render correctly when only imageSource is provided", () => {
+      a(/* @__PURE__ */ o(l, { imageSource: "/minimal.png" })), t(i.getByRole("listitem")).toBeInTheDocument(), t(i.getByRole("img")).toHaveAttribute("src", "/minimal.png"), t(i.queryByRole("link")).not.toBeInTheDocument();
+    }), n("should switch modes when href changes from empty to populated", () => {
+      const { rerender: e } = a(/* @__PURE__ */ o(l, { imageSource: "/logo.png" }));
+      t(i.queryByRole("link")).not.toBeInTheDocument(), e(/* @__PURE__ */ o(l, { href: "https://example.com", imageSource: "/logo.png" })), t(i.getByRole("link")).toBeInTheDocument();
+    });
+  }), s("Accessibility", () => {
+    n("should provide sr-only text for screen readers in link mode", () => {
+      const { container: e } = a(
+        /* @__PURE__ */ o(
+          l,
+          {
+            altText: "Company Website",
+            href: "https://example.com",
+            imageSource: "/logo.png"
+          }
+        )
+      ), r = e.querySelector(".sr-only");
+      t(r).toHaveTextContent("Company Website");
+    }), n("should have meaningful alt text on image", () => {
+      a(
+        /* @__PURE__ */ o(
+          l,
+          {
+            altText: "Accessible Company",
+            imageSource: "/logo.png"
+          }
+        )
+      );
+      const e = i.getByRole("img");
+      t(e).toHaveAttribute("alt", "Accessible Company logo");
+    }), n("should maintain semantic list structure", () => {
+      a(/* @__PURE__ */ o(l, { imageSource: "/logo.png" }));
+      const e = i.getByRole("listitem");
+      t(e.tagName).toBe("LI");
+    });
+  });
+});

package/dist/components/LogoNavigation/LogoNavigation.test.js

@@ -0,0 +1,352 @@
+import { jsx as o } from "react/jsx-runtime";
+import { v as c, d as m, i as n, r as s, g as t, s as r } from "../../react.esm-DLSrfVwM.mjs";
+import { LogoNavigation as i } from "./LogoNavigation.js";
+c.mock("../ImageReplacementAnchor", () => ({
+  default: ({ href: l, text: a, image: e, height: g, baselineAdjustment: h, target: d }) => /* @__PURE__ */ o(
+    "div",
+    {
+      "data-baseline": h,
+      "data-height": g,
+      "data-href": l,
+      "data-image-alt": e == null ? void 0 : e.altText,
+      "data-image-url": e == null ? void 0 : e.url,
+      "data-target": d,
+      "data-testid": "image-replacement-anchor",
+      "data-text": a,
+      children: a
+    }
+  )
+}));
+c.mock("./LogoNavigation.scss", () => ({}));
+m("LogoNavigation", () => {
+  const l = {
+    url: "/logo.png",
+    altText: "Test Logo",
+    aspectRatio: 1
+  };
+  m("Basic Rendering", () => {
+    n("should render logo-navigation custom element", () => {
+      const { container: a } = s(/* @__PURE__ */ o(i, {})), e = a.querySelector("logo-navigation");
+      t(e).toBeInTheDocument();
+    }), n("should render with default empty items array", () => {
+      const { container: a } = s(/* @__PURE__ */ o(i, {})), e = a.querySelector("logo-navigation");
+      t(e == null ? void 0 : e.children).toHaveLength(0);
+    }), n("should render with default height of 4rem", () => {
+      const { container: a } = s(/* @__PURE__ */ o(i, {})), e = a.querySelector("logo-navigation");
+      t(e).toHaveStyle({ "--logo-nav-max-height": "4rem" });
+    }), n("should apply custom height", () => {
+      const { container: a } = s(/* @__PURE__ */ o(i, { height: 6 })), e = a.querySelector("logo-navigation");
+      t(e).toHaveStyle({ "--logo-nav-max-height": "6rem" });
+    }), n("should handle height of 0", () => {
+      const { container: a } = s(/* @__PURE__ */ o(i, { height: 0 })), e = a.querySelector("logo-navigation");
+      t(e).toHaveStyle({ "--logo-nav-max-height": "0rem" });
+    });
+  }), m("Items Rendering", () => {
+    n("should render single item", () => {
+      s(/* @__PURE__ */ o(i, { items: [
+        {
+          href: "https://example.com",
+          image: l,
+          text: "Example"
+        }
+      ] }));
+      const e = r.getAllByTestId("image-replacement-anchor");
+      t(e).toHaveLength(1);
+    }), n("should render multiple items", () => {
+      s(/* @__PURE__ */ o(i, { items: [
+        { href: "https://example1.com", image: l, text: "Example 1" },
+        { href: "https://example2.com", image: l, text: "Example 2" },
+        { href: "https://example3.com", image: l, text: "Example 3" }
+      ] }));
+      const e = r.getAllByTestId("image-replacement-anchor");
+      t(e).toHaveLength(3);
+    }), n("should not render when items array is empty", () => {
+      s(/* @__PURE__ */ o(i, { items: [] }));
+      const a = r.queryAllByTestId("image-replacement-anchor");
+      t(a).toHaveLength(0);
+    }), n("should not render when items is not provided", () => {
+      s(/* @__PURE__ */ o(i, {}));
+      const a = r.queryAllByTestId("image-replacement-anchor");
+      t(a).toHaveLength(0);
+    });
+  }), m("ImageReplacementAnchor Props", () => {
+    n("should pass href to ImageReplacementAnchor", () => {
+      s(/* @__PURE__ */ o(i, { items: [
+        {
+          href: "https://test.com",
+          image: l
+        }
+      ] }));
+      const e = r.getByTestId("image-replacement-anchor");
+      t(e).toHaveAttribute("data-href", "https://test.com");
+    }), n("should pass text to ImageReplacementAnchor", () => {
+      s(/* @__PURE__ */ o(i, { items: [
+        {
+          image: l,
+          text: "Logo Text"
+        }
+      ] }));
+      const e = r.getByTestId("image-replacement-anchor");
+      t(e).toHaveAttribute("data-text", "Logo Text"), t(e).toHaveTextContent("Logo Text");
+    }), n("should pass image object to ImageReplacementAnchor", () => {
+      s(/* @__PURE__ */ o(i, { items: [
+        {
+          image: {
+            url: "/custom-logo.svg",
+            altText: "Custom Logo",
+            aspectRatio: 1
+          }
+        }
+      ] }));
+      const g = r.getByTestId("image-replacement-anchor");
+      t(g).toHaveAttribute("data-image-url", "/custom-logo.svg"), t(g).toHaveAttribute("data-image-alt", "Custom Logo");
+    }), n("should pass height to ImageReplacementAnchor", () => {
+      s(/* @__PURE__ */ o(i, { items: [
+        {
+          image: l,
+          height: 100
+        }
+      ] }));
+      const e = r.getByTestId("image-replacement-anchor");
+      t(e).toHaveAttribute("data-height", "100");
+    }), n("should pass baselineAdjustment when provided", () => {
+      s(/* @__PURE__ */ o(i, { items: [
+        {
+          image: l,
+          baselineAdjustment: 5
+        }
+      ] }));
+      const e = r.getByTestId("image-replacement-anchor");
+      t(e).toHaveAttribute("data-baseline", "5");
+    }), n("should default baselineAdjustment to 0 when not provided", () => {
+      s(/* @__PURE__ */ o(i, { items: [
+        {
+          image: l
+        }
+      ] }));
+      const e = r.getByTestId("image-replacement-anchor");
+      t(e).toHaveAttribute("data-baseline", "0");
+    }), n("should pass target when provided", () => {
+      s(/* @__PURE__ */ o(i, { items: [
+        {
+          image: l,
+          target: "_blank"
+        }
+      ] }));
+      const e = r.getByTestId("image-replacement-anchor");
+      t(e).toHaveAttribute("data-target", "_blank");
+    }), n("should default target to _self when not provided", () => {
+      s(/* @__PURE__ */ o(i, { items: [
+        {
+          image: l
+        }
+      ] }));
+      const e = r.getByTestId("image-replacement-anchor");
+      t(e).toHaveAttribute("data-target", "_self");
+    });
+  }), m("Target Attribute Values", () => {
+    n("should handle target _self", () => {
+      s(/* @__PURE__ */ o(i, { items: [
+        {
+          image: l,
+          target: "_self"
+        }
+      ] }));
+      const e = r.getByTestId("image-replacement-anchor");
+      t(e).toHaveAttribute("data-target", "_self");
+    }), n("should handle target _blank", () => {
+      s(/* @__PURE__ */ o(i, { items: [
+        {
+          image: l,
+          target: "_blank"
+        }
+      ] }));
+      const e = r.getByTestId("image-replacement-anchor");
+      t(e).toHaveAttribute("data-target", "_blank");
+    }), n("should handle target _parent", () => {
+      s(/* @__PURE__ */ o(i, { items: [
+        {
+          image: l,
+          target: "_parent"
+        }
+      ] }));
+      const e = r.getByTestId("image-replacement-anchor");
+      t(e).toHaveAttribute("data-target", "_parent");
+    }), n("should handle target _top", () => {
+      s(/* @__PURE__ */ o(i, { items: [
+        {
+          image: l,
+          target: "_top"
+        }
+      ] }));
+      const e = r.getByTestId("image-replacement-anchor");
+      t(e).toHaveAttribute("data-target", "_top");
+    });
+  }), m("Complete Items", () => {
+    n("should render item with all properties", () => {
+      s(/* @__PURE__ */ o(i, { items: [
+        {
+          href: "https://example.com",
+          target: "_blank",
+          image: l,
+          text: "Example Logo",
+          height: 50,
+          baselineAdjustment: 3
+        }
+      ] }));
+      const e = r.getByTestId("image-replacement-anchor");
+      t(e).toHaveAttribute("data-href", "https://example.com"), t(e).toHaveAttribute("data-target", "_blank"), t(e).toHaveAttribute("data-image-url", "/logo.png"), t(e).toHaveAttribute("data-image-alt", "Test Logo"), t(e).toHaveAttribute("data-text", "Example Logo"), t(e).toHaveAttribute("data-height", "50"), t(e).toHaveAttribute("data-baseline", "3");
+    }), n("should render item with minimal properties", () => {
+      s(/* @__PURE__ */ o(i, { items: [
+        {
+          image: l
+        }
+      ] }));
+      const e = r.getByTestId("image-replacement-anchor");
+      t(e).toHaveAttribute("data-image-url", "/logo.png"), t(e).toHaveAttribute("data-baseline", "0"), t(e).toHaveAttribute("data-target", "_self");
+    }), n("should render multiple items with different properties", () => {
+      s(/* @__PURE__ */ o(i, { items: [
+        {
+          href: "https://site1.com",
+          image: { url: "/logo1.png", altText: "Logo 1", aspectRatio: 1 },
+          text: "Site 1",
+          height: 40
+        },
+        {
+          href: "https://site2.com",
+          image: { url: "/logo2.png", altText: "Logo 2", aspectRatio: 1 },
+          text: "Site 2",
+          target: "_blank"
+        },
+        {
+          image: { url: "/logo3.png", altText: "Logo 3", aspectRatio: 1 },
+          baselineAdjustment: 2
+        }
+      ] }));
+      const e = r.getAllByTestId("image-replacement-anchor");
+      t(e).toHaveLength(3), t(e[0]).toHaveAttribute("data-href", "https://site1.com"), t(e[0]).toHaveAttribute("data-height", "40"), t(e[1]).toHaveAttribute("data-target", "_blank"), t(e[1]).toHaveAttribute("data-image-url", "/logo2.png"), t(e[2]).toHaveAttribute("data-baseline", "2"), t(e[2]).toHaveAttribute("data-image-url", "/logo3.png");
+    });
+  }), m("CSS Custom Properties", () => {
+    n("should set --logo-nav-max-height with default height", () => {
+      const { container: a } = s(/* @__PURE__ */ o(i, {})), e = a.querySelector("logo-navigation");
+      t(e).toHaveStyle({ "--logo-nav-max-height": "4rem" });
+    }), n("should set --logo-nav-max-height with custom height", () => {
+      const { container: a } = s(/* @__PURE__ */ o(i, { height: 8 })), e = a.querySelector("logo-navigation");
+      t(e).toHaveStyle({ "--logo-nav-max-height": "8rem" });
+    }), n("should handle decimal height values", () => {
+      const { container: a } = s(/* @__PURE__ */ o(i, { height: 3.5 })), e = a.querySelector("logo-navigation");
+      t(e).toHaveStyle({ "--logo-nav-max-height": "3.5rem" });
+    }), n("should handle very large height values", () => {
+      const { container: a } = s(/* @__PURE__ */ o(i, { height: 100 })), e = a.querySelector("logo-navigation");
+      t(e).toHaveStyle({ "--logo-nav-max-height": "100rem" });
+    });
+  }), m("Integration", () => {
+    n("should render navigation with items and custom height", () => {
+      const a = [
+        {
+          href: "https://example.com",
+          image: l,
+          text: "Example"
+        }
+      ], { container: e } = s(/* @__PURE__ */ o(i, { height: 5, items: a })), g = e.querySelector("logo-navigation");
+      t(g).toHaveStyle({ "--logo-nav-max-height": "5rem" }), t(r.getAllByTestId("image-replacement-anchor")).toHaveLength(1);
+    }), n("should render multiple logos with different configurations", () => {
+      const a = [
+        {
+          href: "https://facebook.com",
+          image: { url: "/fb.svg", altText: "Facebook", aspectRatio: 1 },
+          text: "Facebook",
+          target: "_blank",
+          height: 48
+        },
+        {
+          href: "https://twitter.com",
+          image: { url: "/tw.svg", altText: "Twitter", aspectRatio: 1 },
+          text: "Twitter",
+          target: "_blank",
+          baselineAdjustment: 2
+        }
+      ], { container: e } = s(/* @__PURE__ */ o(i, { height: 6, items: a })), g = e.querySelector("logo-navigation"), h = r.getAllByTestId("image-replacement-anchor");
+      t(g).toHaveStyle({ "--logo-nav-max-height": "6rem" }), t(h).toHaveLength(2), t(h[0]).toHaveTextContent("Facebook"), t(h[1]).toHaveTextContent("Twitter");
+    });
+  }), m("Edge Cases", () => {
+    n("should handle empty items array", () => {
+      s(/* @__PURE__ */ o(i, { items: [] }));
+      const a = r.queryAllByTestId("image-replacement-anchor");
+      t(a).toHaveLength(0);
+    }), n("should handle undefined items", () => {
+      s(/* @__PURE__ */ o(i, { items: void 0 }));
+      const a = r.queryAllByTestId("image-replacement-anchor");
+      t(a).toHaveLength(0);
+    }), n("should handle large number of items", () => {
+      const a = Array.from({ length: 20 }, (g, h) => ({
+        href: `https://example${h}.com`,
+        image: { url: `/logo${h}.png`, altText: `Logo ${h}`, aspectRatio: 1 },
+        text: `Logo ${h}`
+      }));
+      s(/* @__PURE__ */ o(i, { items: a }));
+      const e = r.getAllByTestId("image-replacement-anchor");
+      t(e).toHaveLength(20);
+    }), n("should handle item with undefined optional properties", () => {
+      s(/* @__PURE__ */ o(i, { items: [
+        {
+          image: l,
+          href: void 0,
+          text: void 0,
+          height: void 0,
+          baselineAdjustment: void 0,
+          target: void 0
+        }
+      ] }));
+      const e = r.getByTestId("image-replacement-anchor");
+      t(e).toBeInTheDocument(), t(e).toHaveAttribute("data-baseline", "0"), t(e).toHaveAttribute("data-target", "_self");
+    }), n("should handle baselineAdjustment of 0", () => {
+      s(/* @__PURE__ */ o(i, { items: [
+        {
+          image: l,
+          baselineAdjustment: 0
+        }
+      ] }));
+      const e = r.getByTestId("image-replacement-anchor");
+      t(e).toHaveAttribute("data-baseline", "0");
+    }), n("should handle negative baselineAdjustment", () => {
+      s(/* @__PURE__ */ o(i, { items: [
+        {
+          image: l,
+          baselineAdjustment: -3
+        }
+      ] }));
+      const e = r.getByTestId("image-replacement-anchor");
+      t(e).toHaveAttribute("data-baseline", "-3");
+    }), n("should handle height of 0", () => {
+      s(/* @__PURE__ */ o(i, { items: [
+        {
+          image: l,
+          height: 0
+        }
+      ] }));
+      const e = r.getByTestId("image-replacement-anchor");
+      t(e).toHaveAttribute("data-height", "0");
+    }), n("should handle empty href string", () => {
+      s(/* @__PURE__ */ o(i, { items: [
+        {
+          image: l,
+          href: ""
+        }
+      ] }));
+      const e = r.getByTestId("image-replacement-anchor");
+      t(e).toHaveAttribute("data-href", "");
+    });
+  }), m("Default Props", () => {
+    n("should use default items array when not provided", () => {
+      const { container: a } = s(/* @__PURE__ */ o(i, {})), e = a.querySelector("logo-navigation");
+      t(e == null ? void 0 : e.children).toHaveLength(0);
+    }), n("should use default height of 4 when not provided", () => {
+      const { container: a } = s(/* @__PURE__ */ o(i, {})), e = a.querySelector("logo-navigation");
+      t(e).toHaveStyle({ "--logo-nav-max-height": "4rem" });
+    }), n("should override defaults when props provided", () => {
+      const a = [{ image: l }], { container: e } = s(/* @__PURE__ */ o(i, { height: 10, items: a })), g = e.querySelector("logo-navigation");
+      t(g).toHaveStyle({ "--logo-nav-max-height": "10rem" }), t(r.getAllByTestId("image-replacement-anchor")).toHaveLength(1);
+    });
+  });
+});

package/dist/components/ModalContainer/ModalContainer.js

@@ -1,9 +1,9 @@
 import { jsx as s, jsxs as k, Fragment as B } from "react/jsx-runtime";
 import { useState as i, useRef as x, useEffect as v, Suspense as M, Children as w, isValidElement as F, cloneElement as K } from "react";
-import { r as N } from "../../index-C-kn9Zhn.mjs";
+import { r as N } from "../../index-DzfYkULW.mjs";
 import { classes as D } from "../../utils/helpers.js";
 import { blockLayoutsMap as q } from "../../settings.js";
-import { X as R } from "../../x-C-QzJ-qD.mjs";
+import { X as R } from "../../x-Ck9Vk5Fo.mjs";
 import '../../assets/ModalContainer.css';const T = "_modal_ojmou_1", C = {
   modal: T,
   "modal__close-btn": "_modal__close-btn_ojmou_48"