@scrippsproduct/networks-ui-library 1.1.9 → 1.1.10

package/dist/components/GradientButton/GradientButton.js

@@ -1,6 +1,6 @@
-import { jsx as g, Fragment as w } from "react/jsx-runtime";
+import { jsx as i, Fragment as w } from "react/jsx-runtime";
 import { classes as m } from "../../utils/helpers.js";
-import '../../assets/GradientButton.css';const a = {
+import '../../assets/GradientButton.css';const e = {
   "gradient-btn": "_gradient-btn_1nwnc_1",
   "gradient-btn--small": "_gradient-btn--small_1nwnc_23",
   "gradient-btn--large": "_gradient-btn--large_1nwnc_30",
@@ -9,58 +9,60 @@ import '../../assets/GradientButton.css';const a = {
   "gradient-btn--info": "_gradient-btn--info_1nwnc_45",
   "gradient-btn--danger": "_gradient-btn--danger_1nwnc_49"
 };
-function y({
-  type: $ = "button",
-  label: r = "",
-  onClick: l = () => {
+function h({
+  type: l = "button",
+  label: g = "",
+  onClick: $ = () => {
   },
-  varient: e = "primary",
-  size: i = "regular",
-  classname: _ = "",
-  href: b = "",
+  varient: a = "primary",
+  size: r = "regular",
+  classname: d = "",
+  href: _ = "",
   gradientStartColor: n = "",
   gradientEndColor: t = "",
-  ...c
+  hoverGradientStartColor: p = "",
+  hoverGradientEndColor: u = "",
+  ...b
 }) {
-  const d = e === "" ? "" : `gradient-btn--${e}`, s = i === "" ? "" : `gradient-btn--${i}`;
-  return /* @__PURE__ */ g(w, { children: b === "" ? /* @__PURE__ */ g(
+  const c = a === "" ? "" : `gradient-btn--${a}`, s = r === "" ? "" : `gradient-btn--${r}`;
+  return /* @__PURE__ */ i(w, { children: _ === "" ? /* @__PURE__ */ i(
     "button",
     {
       className: m([
-        _,
-        a["gradient-btn"],
+        d,
+        e["gradient-btn"],
         "gradient-btn",
-        e === "" ? "" : a[d],
-        i === "" ? "" : a[s]
+        a === "" ? "" : e[c],
+        r === "" ? "" : e[s]
       ]),
       style: n !== "" && t !== "" ? {
         "--gradient": `linear-gradient(180deg, ${t}, ${n}, ${n},${t})`
       } : {},
-      type: $,
-      onClick: l,
-      ...c,
-      children: r
+      type: l,
+      onClick: $,
+      ...b,
+      children: g
     }
-  ) : /* @__PURE__ */ g(
+  ) : /* @__PURE__ */ i(
     "a",
     {
       className: m([
-        _,
-        a["gradient-btn"],
+        d,
+        e["gradient-btn"],
         "gradient-btn",
-        e === "" ? "" : a[d],
-        i === "" ? "" : a[s]
+        a === "" ? "" : e[c],
+        r === "" ? "" : e[s]
       ]),
-      href: b,
+      href: _,
       style: n !== "" && t !== "" ? {
         "--gradient": `linear-gradient(180deg, ${t}, ${n}, ${n},${t})`
       } : {},
-      ...c,
-      children: r
+      ...b,
+      children: g
     }
   ) });
 }
 export {
-  y as GradientButton,
-  y as default
+  h as GradientButton,
+  h as default
 };

package/dist/components/GradientButton/GradientButton.test.js

@@ -0,0 +1,457 @@
+import { jsx as a } from "react/jsx-runtime";
+import { v as u, d as i, b as c, a as g, i as l, r, s as o, g as e } from "../../react.esm-DLSrfVwM.mjs";
+import { u as b } from "../../index-BUN4jQ3m.mjs";
+import { GradientButton as n } from "./GradientButton.js";
+u.mock("../../utils/helpers", () => ({
+  classes: (t) => t.filter(Boolean).join(" ")
+}));
+u.mock("./GradientButton.module.scss", () => ({
+  default: {
+    "gradient-btn": "gradient-btn-module",
+    "gradient-btn--primary": "gradient-btn--primary-module",
+    "gradient-btn--secondary": "gradient-btn--secondary-module",
+    "gradient-btn--tertiary": "gradient-btn--tertiary-module",
+    "gradient-btn--small": "gradient-btn--small-module",
+    "gradient-btn--regular": "gradient-btn--regular-module",
+    "gradient-btn--large": "gradient-btn--large-module"
+  }
+}));
+i("GradientButton", () => {
+  c(() => {
+    u.clearAllMocks();
+  }), g(() => {
+    u.restoreAllMocks();
+  }), i("Basic Rendering", () => {
+    l("should render a button by default when no href is provided", () => {
+      r(/* @__PURE__ */ a(n, { label: "Click me" }));
+      const t = o.getByRole("button", { name: "Click me" });
+      e(t).toBeInTheDocument(), e(t.tagName).toBe("BUTTON");
+    }), l("should render an anchor when href is provided", () => {
+      r(/* @__PURE__ */ a(n, { href: "https://example.com", label: "Click me" }));
+      const t = o.getByRole("link", { name: "Click me" });
+      e(t).toBeInTheDocument(), e(t.tagName).toBe("A"), e(t).toHaveAttribute("href", "https://example.com");
+    }), l("should render button when href is empty string", () => {
+      r(/* @__PURE__ */ a(n, { href: "", label: "Click me" }));
+      const t = o.getByRole("button", { name: "Click me" });
+      e(t).toBeInTheDocument();
+    }), l("should display the label text", () => {
+      r(/* @__PURE__ */ a(n, { label: "Test Label" })), e(o.getByText("Test Label")).toBeInTheDocument();
+    });
+  }), i("Button Type Attribute", () => {
+    l('should use "button" type by default', () => {
+      r(/* @__PURE__ */ a(n, { label: "Click me" }));
+      const t = o.getByRole("button");
+      e(t).toHaveAttribute("type", "button");
+    }), l('should accept "submit" type', () => {
+      r(/* @__PURE__ */ a(n, { label: "Submit", type: "submit" }));
+      const t = o.getByRole("button");
+      e(t).toHaveAttribute("type", "submit");
+    }), l('should accept "reset" type', () => {
+      r(/* @__PURE__ */ a(n, { label: "Reset", type: "reset" }));
+      const t = o.getByRole("button");
+      e(t).toHaveAttribute("type", "reset");
+    }), l("should not apply type attribute to anchor element", () => {
+      r(/* @__PURE__ */ a(n, { href: "https://example.com", label: "Link", type: "submit" }));
+      const t = o.getByRole("link");
+      e(t).not.toHaveAttribute("type");
+    });
+  }), i("Click Handler", () => {
+    l("should call onClick when button is clicked", async () => {
+      const t = b.setup(), s = u.fn();
+      r(/* @__PURE__ */ a(n, { label: "Click me", onClick: s }));
+      const d = o.getByRole("button");
+      await t.click(d), e(s).toHaveBeenCalledTimes(1);
+    }), l("should receive event object in onClick handler", async () => {
+      const t = b.setup(), s = u.fn();
+      r(/* @__PURE__ */ a(n, { label: "Click me", onClick: s }));
+      const d = o.getByRole("button");
+      await t.click(d), e(s).toHaveBeenCalledWith(e.objectContaining({
+        type: "click"
+      }));
+    }), l("should not call onClick for anchor elements", async () => {
+      const t = b.setup(), s = u.fn();
+      r(/* @__PURE__ */ a(n, { href: "#test", label: "Link", onClick: s }));
+      const d = o.getByRole("link");
+      await t.click(d), e(s).not.toHaveBeenCalled();
+    }), l("should use default noop function when onClick is not provided", async () => {
+      const t = b.setup();
+      r(/* @__PURE__ */ a(n, { label: "Click me" }));
+      const s = o.getByRole("button");
+      await t.click(s), e(s).toBeInTheDocument();
+    });
+  }), i("Variant Classes", () => {
+    l("should apply primary variant class by default", () => {
+      r(/* @__PURE__ */ a(n, { label: "Button" }));
+      const t = o.getByRole("button");
+      e(t).toHaveClass("gradient-btn--primary-module");
+    }), l("should apply secondary variant class", () => {
+      r(/* @__PURE__ */ a(n, { label: "Button", varient: "secondary" }));
+      const t = o.getByRole("button");
+      e(t).toHaveClass("gradient-btn--secondary-module");
+    }), l("should apply tertiary variant class", () => {
+      r(/* @__PURE__ */ a(n, { label: "Button", varient: "tertiary" }));
+      const t = o.getByRole("button");
+      e(t).toHaveClass("gradient-btn--tertiary-module");
+    }), l("should not apply variant class when empty string", () => {
+      r(/* @__PURE__ */ a(n, { label: "Button", varient: "" }));
+      const t = o.getByRole("button");
+      e(t).not.toHaveClass("gradient-btn--primary-module"), e(t).not.toHaveClass("gradient-btn--secondary-module"), e(t).not.toHaveClass("gradient-btn--tertiary-module");
+    }), l("should apply variant class to anchor element", () => {
+      r(/* @__PURE__ */ a(n, { href: "https://example.com", label: "Link", varient: "secondary" }));
+      const t = o.getByRole("link");
+      e(t).toHaveClass("gradient-btn--secondary-module");
+    });
+  }), i("Size Classes", () => {
+    l("should apply regular size class by default", () => {
+      r(/* @__PURE__ */ a(n, { label: "Button" }));
+      const t = o.getByRole("button");
+      e(t).toHaveClass("gradient-btn--regular-module");
+    }), l("should apply small size class", () => {
+      r(/* @__PURE__ */ a(n, { label: "Button", size: "small" }));
+      const t = o.getByRole("button");
+      e(t).toHaveClass("gradient-btn--small-module");
+    }), l("should apply large size class", () => {
+      r(/* @__PURE__ */ a(n, { label: "Button", size: "large" }));
+      const t = o.getByRole("button");
+      e(t).toHaveClass("gradient-btn--large-module");
+    }), l("should not apply size class when empty string", () => {
+      r(/* @__PURE__ */ a(n, { label: "Button", size: "" }));
+      const t = o.getByRole("button");
+      e(t).not.toHaveClass("gradient-btn--small-module"), e(t).not.toHaveClass("gradient-btn--regular-module"), e(t).not.toHaveClass("gradient-btn--large-module");
+    }), l("should apply size class to anchor element", () => {
+      r(/* @__PURE__ */ a(n, { href: "https://example.com", label: "Link", size: "large" }));
+      const t = o.getByRole("link");
+      e(t).toHaveClass("gradient-btn--large-module");
+    });
+  }), i("Custom Classes", () => {
+    l("should apply base classes to button", () => {
+      r(/* @__PURE__ */ a(n, { label: "Button" }));
+      const t = o.getByRole("button");
+      e(t).toHaveClass("gradient-btn-module"), e(t).toHaveClass("gradient-btn");
+    }), l("should apply custom classname to button", () => {
+      r(/* @__PURE__ */ a(n, { classname: "custom-class", label: "Button" }));
+      const t = o.getByRole("button");
+      e(t).toHaveClass("custom-class");
+    }), l("should apply custom classname to anchor", () => {
+      r(/* @__PURE__ */ a(n, { classname: "custom-link", href: "https://example.com", label: "Link" }));
+      const t = o.getByRole("link");
+      e(t).toHaveClass("custom-link");
+    }), l("should combine multiple classes correctly", () => {
+      r(
+        /* @__PURE__ */ a(
+          n,
+          {
+            classname: "custom-class",
+            label: "Button",
+            size: "large",
+            varient: "secondary"
+          }
+        )
+      );
+      const t = o.getByRole("button");
+      e(t).toHaveClass("custom-class"), e(t).toHaveClass("gradient-btn-module"), e(t).toHaveClass("gradient-btn"), e(t).toHaveClass("gradient-btn--secondary-module"), e(t).toHaveClass("gradient-btn--large-module");
+    });
+  }), i("Custom Gradient Styles", () => {
+    l("should apply custom gradient when both colors are provided on button", () => {
+      r(
+        /* @__PURE__ */ a(
+          n,
+          {
+            gradientEndColor: "#00ff00",
+            gradientStartColor: "#ff0000",
+            label: "Button"
+          }
+        )
+      );
+      const t = o.getByRole("button");
+      e(t).toHaveStyle({
+        "--gradient": "linear-gradient(180deg, #00ff00, #ff0000, #ff0000,#00ff00)"
+      });
+    }), l("should apply custom gradient when both colors are provided on anchor", () => {
+      r(
+        /* @__PURE__ */ a(
+          n,
+          {
+            gradientEndColor: "#00ff00",
+            gradientStartColor: "#ff0000",
+            href: "https://example.com",
+            label: "Link"
+          }
+        )
+      );
+      const t = o.getByRole("link");
+      e(t).toHaveStyle({
+        "--gradient": "linear-gradient(180deg, #00ff00, #ff0000, #ff0000,#00ff00)"
+      });
+    }), l("should not apply gradient when only start color is provided", () => {
+      r(
+        /* @__PURE__ */ a(
+          n,
+          {
+            gradientStartColor: "#ff0000",
+            label: "Button"
+          }
+        )
+      );
+      const t = o.getByRole("button");
+      e(t.getAttribute("style")).toBeNull();
+    }), l("should not apply gradient when only end color is provided", () => {
+      r(
+        /* @__PURE__ */ a(
+          n,
+          {
+            gradientEndColor: "#00ff00",
+            label: "Button"
+          }
+        )
+      );
+      const t = o.getByRole("button");
+      e(t.getAttribute("style")).toBeNull();
+    }), l("should not apply gradient when both colors are empty strings", () => {
+      r(
+        /* @__PURE__ */ a(
+          n,
+          {
+            gradientEndColor: "",
+            gradientStartColor: "",
+            label: "Button"
+          }
+        )
+      );
+      const t = o.getByRole("button");
+      e(t.getAttribute("style")).toBeNull();
+    }), l("should use gradient color order correctly (end, start, start, end)", () => {
+      r(
+        /* @__PURE__ */ a(
+          n,
+          {
+            gradientEndColor: "red",
+            gradientStartColor: "blue",
+            label: "Button"
+          }
+        )
+      );
+      const s = o.getByRole("button").getAttribute("style");
+      e(s).toContain("linear-gradient(180deg, red, blue, blue,red)");
+    });
+  }), i("Href Attribute", () => {
+    l("should apply href to anchor element", () => {
+      r(/* @__PURE__ */ a(n, { href: "https://example.com", label: "Link" }));
+      const t = o.getByRole("link");
+      e(t).toHaveAttribute("href", "https://example.com");
+    }), l("should handle relative URLs", () => {
+      r(/* @__PURE__ */ a(n, { href: "/about", label: "Link" }));
+      const t = o.getByRole("link");
+      e(t).toHaveAttribute("href", "/about");
+    }), l("should handle anchor links", () => {
+      r(/* @__PURE__ */ a(n, { href: "#section", label: "Link" }));
+      const t = o.getByRole("link");
+      e(t).toHaveAttribute("href", "#section");
+    });
+  }), i("Spread Attributes", () => {
+    l("should pass additional attributes to button", () => {
+      r(
+        /* @__PURE__ */ a(
+          n,
+          {
+            "aria-label": "Custom aria label",
+            "data-testid": "custom-button",
+            label: "Button"
+          }
+        )
+      );
+      const t = o.getByTestId("custom-button");
+      e(t).toHaveAttribute("aria-label", "Custom aria label");
+    }), l("should pass additional attributes to anchor", () => {
+      r(
+        /* @__PURE__ */ a(
+          n,
+          {
+            "data-testid": "custom-link",
+            href: "https://example.com",
+            label: "Link",
+            rel: "noopener noreferrer",
+            target: "_blank"
+          }
+        )
+      );
+      const t = o.getByTestId("custom-link");
+      e(t).toHaveAttribute("target", "_blank"), e(t).toHaveAttribute("rel", "noopener noreferrer");
+    }), l("should handle disabled attribute on button", () => {
+      r(/* @__PURE__ */ a(n, { disabled: !0, label: "Button" }));
+      const t = o.getByRole("button");
+      e(t).toBeDisabled();
+    }), l("should handle aria attributes", () => {
+      r(
+        /* @__PURE__ */ a(
+          n,
+          {
+            "aria-describedby": "description",
+            "aria-pressed": "true",
+            label: "Button"
+          }
+        )
+      );
+      const t = o.getByRole("button");
+      e(t).toHaveAttribute("aria-describedby", "description"), e(t).toHaveAttribute("aria-pressed", "true");
+    }), l("should handle data attributes", () => {
+      r(
+        /* @__PURE__ */ a(
+          n,
+          {
+            "data-category": "primary",
+            "data-index": 0,
+            label: "Button"
+          }
+        )
+      );
+      const t = o.getByRole("button");
+      e(t).toHaveAttribute("data-category", "primary"), e(t).toHaveAttribute("data-index", "0");
+    });
+  }), i("Default Props", () => {
+    l("should use all default props when none are provided", () => {
+      r(/* @__PURE__ */ a(n, {}));
+      const t = o.getByRole("button");
+      e(t).toHaveAttribute("type", "button"), e(t).toHaveClass("gradient-btn--primary-module"), e(t).toHaveClass("gradient-btn--regular-module"), e(t).toHaveTextContent("");
+    }), l("should use empty string label by default", () => {
+      r(/* @__PURE__ */ a(n, {}));
+      const t = o.getByRole("button");
+      e(t).toHaveTextContent("");
+    }), l("should use primary variant by default", () => {
+      r(/* @__PURE__ */ a(n, { label: "Button" }));
+      const t = o.getByRole("button");
+      e(t).toHaveClass("gradient-btn--primary-module");
+    }), l("should use regular size by default", () => {
+      r(/* @__PURE__ */ a(n, { label: "Button" }));
+      const t = o.getByRole("button");
+      e(t).toHaveClass("gradient-btn--regular-module");
+    });
+  }), i("Edge Cases", () => {
+    l("should handle empty label", () => {
+      r(/* @__PURE__ */ a(n, { label: "" }));
+      const t = o.getByRole("button");
+      e(t).toHaveTextContent("");
+    }), l("should handle special characters in label", () => {
+      r(/* @__PURE__ */ a(n, { label: "Click & Submit!" }));
+      const t = o.getByRole("button");
+      e(t).toHaveTextContent("Click & Submit!");
+    }), l("should handle unicode characters in label", () => {
+      r(/* @__PURE__ */ a(n, { label: "🚀 Launch" }));
+      const t = o.getByRole("button");
+      e(t).toHaveTextContent("🚀 Launch");
+    }), l("should handle very long href", () => {
+      const t = "https://example.com/" + "a".repeat(1e3);
+      r(/* @__PURE__ */ a(n, { href: t, label: "Link" }));
+      const s = o.getByRole("link");
+      e(s).toHaveAttribute("href", t);
+    }), l("should handle complex gradient colors with rgba", () => {
+      r(
+        /* @__PURE__ */ a(
+          n,
+          {
+            gradientEndColor: "rgba(0, 255, 0, 0.8)",
+            gradientStartColor: "rgba(255, 0, 0, 0.5)",
+            label: "Button"
+          }
+        )
+      );
+      const t = o.getByRole("button");
+      e(t).toHaveStyle({
+        "--gradient": "linear-gradient(180deg, rgba(0, 255, 0, 0.8), rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0.5),rgba(0, 255, 0, 0.8))"
+      });
+    }), l("should handle all empty string optional props", () => {
+      r(
+        /* @__PURE__ */ a(
+          n,
+          {
+            classname: "",
+            gradientEndColor: "",
+            gradientStartColor: "",
+            href: "",
+            label: "",
+            size: "",
+            varient: ""
+          }
+        )
+      );
+      const t = o.getByRole("button");
+      e(t).toBeInTheDocument();
+    });
+  }), i("Integration", () => {
+    l("should render complete button with all features", () => {
+      const t = u.fn();
+      r(
+        /* @__PURE__ */ a(
+          n,
+          {
+            "aria-label": "Submit contact form",
+            classname: "form-button",
+            "data-form-id": "contact",
+            gradientEndColor: "#4ecdc4",
+            gradientStartColor: "#ff6b6b",
+            label: "Submit Form",
+            size: "large",
+            type: "submit",
+            varient: "secondary",
+            onClick: t
+          }
+        )
+      );
+      const s = o.getByRole("button", { name: "Submit contact form" });
+      e(s).toHaveAttribute("type", "submit"), e(s).toHaveTextContent("Submit Form"), e(s).toHaveClass("form-button"), e(s).toHaveClass("gradient-btn--secondary-module"), e(s).toHaveClass("gradient-btn--large-module"), e(s).toHaveAttribute("data-form-id", "contact"), e(s).toHaveStyle({
+        "--gradient": "linear-gradient(180deg, #4ecdc4, #ff6b6b, #ff6b6b,#4ecdc4)"
+      });
+    }), l("should render complete anchor with all features", () => {
+      r(
+        /* @__PURE__ */ a(
+          n,
+          {
+            classname: "external-link",
+            "data-analytics": "click-external",
+            gradientEndColor: "#764ba2",
+            gradientStartColor: "#667eea",
+            href: "https://example.com",
+            label: "External Link",
+            rel: "noopener noreferrer",
+            size: "small",
+            target: "_blank",
+            varient: "tertiary"
+          }
+        )
+      );
+      const t = o.getByRole("link", { name: "External Link" });
+      e(t).toHaveAttribute("href", "https://example.com"), e(t).toHaveClass("external-link"), e(t).toHaveClass("gradient-btn--tertiary-module"), e(t).toHaveClass("gradient-btn--small-module"), e(t).toHaveAttribute("target", "_blank"), e(t).toHaveAttribute("rel", "noopener noreferrer"), e(t).toHaveAttribute("data-analytics", "click-external"), e(t).toHaveStyle({
+        "--gradient": "linear-gradient(180deg, #764ba2, #667eea, #667eea,#764ba2)"
+      });
+    }), l("should switch between button and anchor when href changes", () => {
+      const { rerender: t } = r(/* @__PURE__ */ a(n, { label: "Element" }));
+      e(o.getByRole("button")).toBeInTheDocument(), t(/* @__PURE__ */ a(n, { href: "https://example.com", label: "Element" })), e(o.queryByRole("button")).not.toBeInTheDocument(), e(o.getByRole("link")).toBeInTheDocument();
+    });
+  }), i("Unused Props", () => {
+    l("should accept hoverGradientStartColor prop without error", () => {
+      r(
+        /* @__PURE__ */ a(
+          n,
+          {
+            hoverGradientStartColor: "#ff0000",
+            label: "Button"
+          }
+        )
+      );
+      const t = o.getByRole("button");
+      e(t).toBeInTheDocument();
+    }), l("should accept hoverGradientEndColor prop without error", () => {
+      r(
+        /* @__PURE__ */ a(
+          n,
+          {
+            hoverGradientEndColor: "#00ff00",
+            label: "Button"
+          }
+        )
+      );
+      const t = o.getByRole("button");
+      e(t).toBeInTheDocument();
+    });
+  });
+});