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

package/dist/components/Button/Button.test.js

@@ -0,0 +1,434 @@
+import { jsx as l } from "react/jsx-runtime";
+import { d as b, i as n, r as s, s as e, g as o, v as u } from "../../react.esm-DLSrfVwM.mjs";
+import { u as i } from "../../index-BUN4jQ3m.mjs";
+import "../../index-BVxBrkZB.mjs";
+import { Button as a } from "./Button.js";
+b("Button", () => {
+  b("Basic Rendering", () => {
+    n("should render a button element by default", () => {
+      s(/* @__PURE__ */ l(a, { label: "Click Me" }));
+      const t = e.getByRole("button");
+      o(t).toBeInTheDocument();
+    }), n("should render label text", () => {
+      s(/* @__PURE__ */ l(a, { label: "Test Button" })), o(e.getByText("Test Button")).toBeInTheDocument();
+    }), n("should render with empty label", () => {
+      s(/* @__PURE__ */ l(a, { label: "" }));
+      const t = e.getByRole("button");
+      o(t).toBeInTheDocument(), o(t.textContent).toBe("");
+    }), n("should render as anchor when href is provided", () => {
+      s(/* @__PURE__ */ l(a, { href: "https://example.com", label: "Link Button" }));
+      const t = e.getByRole("link");
+      o(t).toBeInTheDocument(), o(t).toHaveAttribute("href", "https://example.com");
+    }), n("should apply btn class", () => {
+      s(/* @__PURE__ */ l(a, { label: "Test" }));
+      const t = e.getByRole("button");
+      o(t).toHaveClass("btn");
+    });
+  }), b("Default Props", () => {
+    n("should use default type of button", () => {
+      s(/* @__PURE__ */ l(a, { label: "Test" }));
+      const t = e.getByRole("button");
+      o(t).toHaveAttribute("type", "button");
+    }), n("should use default label of empty string", () => {
+      const { container: t } = s(/* @__PURE__ */ l(a, {})), r = t.querySelector("button");
+      o(r == null ? void 0 : r.textContent).toBe("");
+    }), n("should use default href of empty string", () => {
+      s(/* @__PURE__ */ l(a, { label: "Test" })), o(e.getByRole("button")).toBeInTheDocument(), o(e.queryByRole("link")).not.toBeInTheDocument();
+    }), n("should use default varient of primary", () => {
+      s(/* @__PURE__ */ l(a, { label: "Test" }));
+      const t = e.getByRole("button");
+      o(t.className).toContain("btn--primary");
+    }), n("should use default size of empty string", () => {
+      s(/* @__PURE__ */ l(a, { label: "Test" }));
+      const t = e.getByRole("button");
+      o(t.className).not.toContain("btn--small"), o(t.className).not.toContain("btn--medium"), o(t.className).not.toContain("btn--large");
+    }), n("should use default classname of empty string", () => {
+      s(/* @__PURE__ */ l(a, { label: "Test" }));
+      const t = e.getByRole("button");
+      o(t).toHaveClass("btn");
+    }), n("should use default empty onClick handler", () => {
+      s(/* @__PURE__ */ l(a, { label: "Test" }));
+      const t = e.getByRole("button");
+      o(t).toBeInTheDocument();
+    });
+  }), b("Type Prop", () => {
+    n("should render with type button", () => {
+      s(/* @__PURE__ */ l(a, { label: "Test", type: "button" }));
+      const t = e.getByRole("button");
+      o(t).toHaveAttribute("type", "button");
+    }), n("should render with type submit", () => {
+      s(/* @__PURE__ */ l(a, { label: "Submit", type: "submit" }));
+      const t = e.getByRole("button");
+      o(t).toHaveAttribute("type", "submit");
+    }), n("should render with type reset", () => {
+      s(/* @__PURE__ */ l(a, { label: "Reset", type: "reset" }));
+      const t = e.getByRole("button");
+      o(t).toHaveAttribute("type", "reset");
+    });
+  }), b("Varient Prop", () => {
+    n("should apply primary varient class", () => {
+      s(/* @__PURE__ */ l(a, { label: "Test", varient: "primary" }));
+      const t = e.getByRole("button");
+      o(t.className).toContain("btn--primary");
+    }), n("should apply secondary varient class", () => {
+      s(/* @__PURE__ */ l(a, { label: "Test", varient: "secondary" }));
+      const t = e.getByRole("button");
+      o(t.className).toContain("btn--secondary");
+    }), n("should apply tertiary varient class", () => {
+      s(/* @__PURE__ */ l(a, { label: "Test", varient: "tertiary" }));
+      const t = e.getByRole("button");
+      o(t.className).toContain("btn--tertiary");
+    }), n("should apply outline varient class", () => {
+      s(/* @__PURE__ */ l(a, { label: "Test", varient: "outline" }));
+      const t = e.getByRole("button");
+      o(t.className).toContain("btn--outline");
+    }), n("should apply text varient class", () => {
+      s(/* @__PURE__ */ l(a, { label: "Test", varient: "text" }));
+      const t = e.getByRole("button");
+      o(t.className).toContain("btn--text");
+    }), n("should not apply varient class when empty string", () => {
+      s(/* @__PURE__ */ l(a, { label: "Test", varient: "" }));
+      const t = e.getByRole("button");
+      o(t.className).not.toContain("btn--");
+    });
+  }), b("Size Prop", () => {
+    n("should apply small size class", () => {
+      s(/* @__PURE__ */ l(a, { label: "Test", size: "small" }));
+      const t = e.getByRole("button");
+      o(t.className).toContain("btn--small");
+    }), n("should apply medium size class", () => {
+      s(/* @__PURE__ */ l(a, { label: "Test", size: "medium" }));
+      const t = e.getByRole("button");
+      o(t.className).toContain("btn--medium");
+    }), n("should apply large size class", () => {
+      s(/* @__PURE__ */ l(a, { label: "Test", size: "large" }));
+      const t = e.getByRole("button");
+      o(t.className).toContain("btn--large");
+    }), n("should not apply size class when empty string", () => {
+      s(/* @__PURE__ */ l(a, { label: "Test", size: "" }));
+      const t = e.getByRole("button");
+      o(t.className).not.toContain("btn--small"), o(t.className).not.toContain("btn--medium"), o(t.className).not.toContain("btn--large");
+    });
+  }), b("Classname Prop", () => {
+    n("should apply custom classname", () => {
+      s(/* @__PURE__ */ l(a, { classname: "custom-btn", label: "Test" }));
+      const t = e.getByRole("button");
+      o(t).toHaveClass("custom-btn");
+    }), n("should apply multiple custom classnames", () => {
+      s(/* @__PURE__ */ l(a, { classname: "custom-btn another-class", label: "Test" }));
+      const t = e.getByRole("button");
+      o(t).toHaveClass("custom-btn"), o(t).toHaveClass("another-class");
+    }), n("should apply custom classname along with default classes", () => {
+      s(/* @__PURE__ */ l(a, { classname: "custom", label: "Test" }));
+      const t = e.getByRole("button");
+      o(t).toHaveClass("custom"), o(t).toHaveClass("btn");
+    });
+  }), b("Href Prop", () => {
+    n("should render as button when href is empty", () => {
+      s(/* @__PURE__ */ l(a, { href: "", label: "Test" })), o(e.getByRole("button")).toBeInTheDocument(), o(e.queryByRole("link")).not.toBeInTheDocument();
+    }), n("should render as anchor when href is provided", () => {
+      s(/* @__PURE__ */ l(a, { href: "/page", label: "Test" })), o(e.queryByRole("button")).not.toBeInTheDocument(), o(e.getByRole("link")).toBeInTheDocument();
+    }), n("should set correct href on anchor", () => {
+      s(/* @__PURE__ */ l(a, { href: "https://example.com", label: "Test" }));
+      const t = e.getByRole("link");
+      o(t).toHaveAttribute("href", "https://example.com");
+    }), n("should apply same classes to anchor as button", () => {
+      s(/* @__PURE__ */ l(a, { href: "/page", label: "Test", varient: "secondary" }));
+      const t = e.getByRole("link");
+      o(t).toHaveClass("btn"), o(t.className).toContain("btn--secondary");
+    });
+  }), b("onClick Handler", () => {
+    n("should call onClick when button is clicked", async () => {
+      const t = i.setup(), r = u.fn();
+      s(/* @__PURE__ */ l(a, { label: "Click", onClick: r }));
+      const c = e.getByRole("button");
+      await t.click(c), o(r).toHaveBeenCalledTimes(1);
+    }), n("should pass event to onClick handler", async () => {
+      const t = i.setup(), r = u.fn();
+      s(/* @__PURE__ */ l(a, { label: "Click", onClick: r }));
+      const c = e.getByRole("button");
+      await t.click(c), o(r).toHaveBeenCalledWith(o.any(Object));
+    }), n("should not error when onClick is not provided", async () => {
+      const t = i.setup();
+      s(/* @__PURE__ */ l(a, { label: "Click" }));
+      const r = e.getByRole("button");
+      await t.click(r), o(r).toBeInTheDocument();
+    }), n("should not have onClick on anchor element", () => {
+      const t = u.fn();
+      s(/* @__PURE__ */ l(a, { href: "/page", label: "Link", onClick: t }));
+      const r = e.getByRole("link");
+      o(r.onclick).toBeNull();
+    });
+  }), b("Custom Colors", () => {
+    n("should apply custom bgColor CSS variable", () => {
+      s(
+        /* @__PURE__ */ l(
+          a,
+          {
+            customColors: { bgColor: "#ff0000" },
+            label: "Test"
+          }
+        )
+      );
+      const t = e.getByRole("button");
+      o(t).toHaveStyle({ "--button-bg-color": "#ff0000" });
+    }), n("should apply custom color CSS variable", () => {
+      s(
+        /* @__PURE__ */ l(
+          a,
+          {
+            customColors: { bgColor: "#000", color: "#fff" },
+            label: "Test"
+          }
+        )
+      );
+      const t = e.getByRole("button");
+      o(t).toHaveStyle({ "--button-color": "#fff" });
+    }), n("should apply custom bgHoverColor CSS variable", () => {
+      s(
+        /* @__PURE__ */ l(
+          a,
+          {
+            customColors: { bgColor: "#000", bgHoverColor: "#333" },
+            label: "Test"
+          }
+        )
+      );
+      const t = e.getByRole("button");
+      o(t).toHaveStyle({ "--button-hover-bg-color": "#333" });
+    }), n("should use bgColor as bgHoverColor when bgHoverColor is empty", () => {
+      s(
+        /* @__PURE__ */ l(
+          a,
+          {
+            customColors: { bgColor: "#000", bgHoverColor: "" },
+            label: "Test"
+          }
+        )
+      );
+      const t = e.getByRole("button");
+      o(t).toHaveStyle({ "--button-hover-bg-color": "#000" });
+    }), n("should apply custom hoverColor CSS variable", () => {
+      s(
+        /* @__PURE__ */ l(
+          a,
+          {
+            customColors: { bgColor: "#000", color: "#fff", hoverColor: "#ccc" },
+            label: "Test"
+          }
+        )
+      );
+      const t = e.getByRole("button");
+      o(t).toHaveStyle({ "--button-hover-color": "#ccc" });
+    }), n("should use color as hoverColor when hoverColor is empty", () => {
+      s(
+        /* @__PURE__ */ l(
+          a,
+          {
+            customColors: { bgColor: "#000", color: "#fff", hoverColor: "" },
+            label: "Test"
+          }
+        )
+      );
+      const t = e.getByRole("button");
+      o(t).toHaveStyle({ "--button-hover-color": "#fff" });
+    }), n("should apply custom borderColor CSS variable", () => {
+      s(
+        /* @__PURE__ */ l(
+          a,
+          {
+            customColors: { bgColor: "#000", borderColor: "#ff0000" },
+            label: "Test"
+          }
+        )
+      );
+      const t = e.getByRole("button");
+      o(t).toHaveStyle({ "--button-border-color": "#ff0000" });
+    }), n("should use bgColor as borderColor when borderColor is empty", () => {
+      s(
+        /* @__PURE__ */ l(
+          a,
+          {
+            customColors: { bgColor: "#000", borderColor: "" },
+            label: "Test"
+          }
+        )
+      );
+      const t = e.getByRole("button");
+      o(t).toHaveStyle({ "--button-border-color": "#000" });
+    }), n("should not apply custom colors when bgColor is empty", () => {
+      s(
+        /* @__PURE__ */ l(
+          a,
+          {
+            customColors: { bgColor: "", color: "#fff" },
+            label: "Test"
+          }
+        )
+      );
+      const t = e.getByRole("button");
+      o(t.style.getPropertyValue("--button-bg-color")).toBe("");
+    }), n("should apply custom colors to anchor element", () => {
+      s(
+        /* @__PURE__ */ l(
+          a,
+          {
+            customColors: { bgColor: "#ff0000" },
+            href: "/page",
+            label: "Test"
+          }
+        )
+      );
+      const t = e.getByRole("link");
+      o(t).toHaveStyle({ "--button-bg-color": "#ff0000" });
+    });
+  }), b("Additional Attributes", () => {
+    n("should spread additional attributes to button", () => {
+      s(/* @__PURE__ */ l(a, { "aria-label": "Accessible Button", label: "Test" }));
+      const t = e.getByRole("button");
+      o(t).toHaveAttribute("aria-label", "Accessible Button");
+    }), n("should spread additional attributes to anchor", () => {
+      s(/* @__PURE__ */ l(a, { "aria-label": "Accessible Link", href: "/page", label: "Test" }));
+      const t = e.getByRole("link");
+      o(t).toHaveAttribute("aria-label", "Accessible Link");
+    }), n("should accept data attributes", () => {
+      s(/* @__PURE__ */ l(a, { "data-testid": "custom-button", label: "Test" })), o(e.getByTestId("custom-button")).toBeInTheDocument();
+    }), n("should accept disabled attribute", () => {
+      s(/* @__PURE__ */ l(a, { disabled: !0, label: "Test" }));
+      const t = e.getByRole("button");
+      o(t).toBeDisabled();
+    });
+  }), b("Edge Cases", () => {
+    n("should handle very long labels", () => {
+      const t = "A".repeat(100);
+      s(/* @__PURE__ */ l(a, { label: t })), o(e.getByText(t)).toBeInTheDocument();
+    }), n("should handle labels with special characters", () => {
+      s(/* @__PURE__ */ l(a, { label: "<Click> & 'Go'" })), o(e.getByText("<Click> & 'Go'")).toBeInTheDocument();
+    }), n("should handle empty customColors object", () => {
+      s(/* @__PURE__ */ l(a, { customColors: {}, label: "Test" }));
+      const t = e.getByRole("button");
+      o(t).toBeInTheDocument();
+    }), n("should handle all custom colors at once", () => {
+      s(
+        /* @__PURE__ */ l(
+          a,
+          {
+            customColors: {
+              bgColor: "#000",
+              bgHoverColor: "#111",
+              color: "#fff",
+              hoverColor: "#eee",
+              borderColor: "#333",
+              borderHoverColor: "#444"
+            },
+            label: "Test"
+          }
+        )
+      );
+      const t = e.getByRole("button");
+      o(t).toHaveStyle({
+        "--button-bg-color": "#000",
+        "--button-hover-bg-color": "#111",
+        "--button-color": "#fff",
+        "--button-hover-color": "#eee",
+        "--button-border-color": "#333",
+        "--button-hover-border-color": "#444"
+      });
+    });
+  }), b("Combined Props", () => {
+    n("should render button with all props", () => {
+      const t = u.fn();
+      s(
+        /* @__PURE__ */ l(
+          a,
+          {
+            classname: "custom-btn",
+            label: "Submit Form",
+            onClick: t,
+            size: "large",
+            type: "submit",
+            varient: "secondary"
+          }
+        )
+      );
+      const r = e.getByRole("button");
+      o(r).toHaveAttribute("type", "submit"), o(r).toHaveClass("custom-btn"), o(r).toHaveClass("btn"), o(r.className).toContain("btn--secondary"), o(r.className).toContain("btn--large"), o(e.getByText("Submit Form")).toBeInTheDocument();
+    }), n("should render anchor with styling props", () => {
+      s(
+        /* @__PURE__ */ l(
+          a,
+          {
+            classname: "link-btn",
+            href: "https://example.com",
+            label: "External Link",
+            size: "small",
+            varient: "outline"
+          }
+        )
+      );
+      const t = e.getByRole("link");
+      o(t).toHaveAttribute("href", "https://example.com"), o(t).toHaveClass("link-btn"), o(t).toHaveClass("btn"), o(t.className).toContain("btn--outline"), o(t.className).toContain("btn--small");
+    }), n("should combine varient and size classes", () => {
+      s(/* @__PURE__ */ l(a, { label: "Test", size: "medium", varient: "tertiary" }));
+      const t = e.getByRole("button");
+      o(t.className).toContain("btn--tertiary"), o(t.className).toContain("btn--medium");
+    });
+  }), b("Accessibility", () => {
+    n("should be keyboard accessible", () => {
+      s(/* @__PURE__ */ l(a, { label: "Test" }));
+      const t = e.getByRole("button");
+      t.focus(), o(t).toHaveFocus();
+    }), n("should have proper button role", () => {
+      s(/* @__PURE__ */ l(a, { label: "Test" })), o(e.getByRole("button")).toBeInTheDocument();
+    }), n("should have proper link role when href is provided", () => {
+      s(/* @__PURE__ */ l(a, { href: "/page", label: "Test" })), o(e.getByRole("link")).toBeInTheDocument();
+    }), n("should support aria attributes", () => {
+      s(/* @__PURE__ */ l(a, { "aria-pressed": "true", label: "Toggle" }));
+      const t = e.getByRole("button");
+      o(t).toHaveAttribute("aria-pressed", "true");
+    });
+  }), b("Integration Tests", () => {
+    n("should render complete primary button", () => {
+      const t = u.fn();
+      s(
+        /* @__PURE__ */ l(
+          a,
+          {
+            classname: "primary-action",
+            label: "Save Changes",
+            onClick: t,
+            size: "large",
+            type: "submit",
+            varient: "primary"
+          }
+        )
+      );
+      const r = e.getByRole("button");
+      o(r).toHaveAttribute("type", "submit"), o(r).toHaveClass("primary-action", "btn"), o(r.className).toContain("btn--primary"), o(r.className).toContain("btn--large"), o(e.getByText("Save Changes")).toBeInTheDocument();
+    }), n("should render complete styled link button", () => {
+      s(
+        /* @__PURE__ */ l(
+          a,
+          {
+            classname: "nav-link",
+            customColors: {
+              bgColor: "#007bff",
+              color: "#ffffff",
+              bgHoverColor: "#0056b3"
+            },
+            href: "/dashboard",
+            label: "Go to Dashboard",
+            size: "medium",
+            varient: "primary"
+          }
+        )
+      );
+      const t = e.getByRole("link");
+      o(t).toHaveAttribute("href", "/dashboard"), o(t).toHaveClass("nav-link", "btn"), o(t.className).toContain("btn--primary"), o(t.className).toContain("btn--medium"), o(t).toHaveStyle({
+        "--button-bg-color": "#007bff",
+        "--button-color": "#ffffff",
+        "--button-hover-bg-color": "#0056b3"
+      });
+    });
+  });
+});

package/dist/components/Carousel/Carousel.js

@@ -4,8 +4,8 @@ import { chunkArray as X, classes as A } from "../../utils/helpers.js";
 import Y from "./CarouselUtils.class.js";
 import { CarouselSlide as Z } from "../CarouselSlide/CarouselSlide.js";
 import { c as a } from "../../Carousel.module-CNJzZW2-.mjs";
-import { C as ee } from "../../chevron-left-DRvpaLmK.mjs";
-import { C as re } from "../../chevron-right-C8yCnmfx.mjs";
+import { C as ee } from "../../chevron-left-D0UjbrKw.mjs";
+import { C as re } from "../../chevron-right-0ZF3LruR.mjs";
 const _ = window.matchMedia("(width <= 600px)"), P = window.matchMedia("(width <= 800px"), b = window.matchMedia("(width <= 1024px"), z = window.matchMedia("(width <= 1280px");
 function ue({
   id: E,