@windstream/react-shared-components 0.1.93 → 0.1.94

package/src/utils/cookie.ts

@@ -1,84 +1,84 @@
-/**
- * Cookie Helpers for UTM Parameter Storage
- *
- * Provides Base64-encoded JSON cookie storage for UTM parameters.
- */
-import type { UTMProperties } from "../types/utm";
-import { Base64 } from "js-base64";
-import Cookies from "js-cookie";
-
-const UTM_COOKIE_KEY = "utm_parameters";
-const DEFAULT_DOMAIN = ".gokinetic.com";
-
-/**
- * Reads UTM parameters from the Base64-encoded cookie.
- * @returns Parsed UTMProperties or null if cookie doesn't exist / is invalid.
- */
-export function getUTMs(): UTMProperties | null {
-  if (typeof window === "undefined") return null;
-
-  const raw = Cookies.get(UTM_COOKIE_KEY);
-  if (!raw) return null;
-
-  try {
-    const decoded = Base64.decode(raw);
-    return JSON.parse(decoded) as UTMProperties;
-  } catch {
-    return null;
-  }
-}
-
-/**
- * Stores UTM parameters as a Base64-encoded JSON cookie.
- * @param utms - The UTM properties to store.
- * @param domain - Cookie domain (defaults to `.gokinetic.com`).
- */
-export function setUTMs(
-  utms: UTMProperties,
-  domain: string = DEFAULT_DOMAIN
-): void {
-  if (typeof window === "undefined") return;
-
-  const json = JSON.stringify(utms);
-  const encoded = Base64.encode(json);
-
-  Cookies.set(UTM_COOKIE_KEY, encoded, {
-    domain,
-    path: "/",
-    sameSite: "Lax",
-  });
-}
-
-/**
- * Removes the UTM cookie.
- * @param domain - Cookie domain (defaults to `.gokinetic.com`).
- */
-export function removeUTMs(domain: string = DEFAULT_DOMAIN): void {
-  Cookies.remove(UTM_COOKIE_KEY, { domain, path: "/" });
-}
-export function getCookie(key: string): string | null {
-  if (typeof window === "undefined") return "";
-  const encryptedValue = Cookies.get(key);
-
-  if (encryptedValue) return Base64.decode(encryptedValue);
-
-  return null;
-}
-export const getParsedCookie = (key: string) => {
-  try {
-    return JSON.parse(getCookie(key) || "");
-  } catch {
-    return null;
-  }
-};
-export const setCookie = (
-  key: string,
-  value: any,
-  options: Cookies.CookieAttributes
-) => {
-  if (typeof window === "undefined") return;
-  const stringValue = JSON.stringify(value);
-  const encryptedValue = Base64.encode(stringValue);
-
-  Cookies.set(key, encryptedValue, options);
-};
+/**
+ * Cookie Helpers for UTM Parameter Storage
+ *
+ * Provides Base64-encoded JSON cookie storage for UTM parameters.
+ */
+import type { UTMProperties } from "../types/utm";
+import { Base64 } from "js-base64";
+import Cookies from "js-cookie";
+
+const UTM_COOKIE_KEY = "utm_parameters";
+const DEFAULT_DOMAIN = ".gokinetic.com";
+
+/**
+ * Reads UTM parameters from the Base64-encoded cookie.
+ * @returns Parsed UTMProperties or null if cookie doesn't exist / is invalid.
+ */
+export function getUTMs(): UTMProperties | null {
+  if (typeof window === "undefined") return null;
+
+  const raw = Cookies.get(UTM_COOKIE_KEY);
+  if (!raw) return null;
+
+  try {
+    const decoded = Base64.decode(raw);
+    return JSON.parse(decoded) as UTMProperties;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Stores UTM parameters as a Base64-encoded JSON cookie.
+ * @param utms - The UTM properties to store.
+ * @param domain - Cookie domain (defaults to `.gokinetic.com`).
+ */
+export function setUTMs(
+  utms: UTMProperties,
+  domain: string = DEFAULT_DOMAIN
+): void {
+  if (typeof window === "undefined") return;
+
+  const json = JSON.stringify(utms);
+  const encoded = Base64.encode(json);
+
+  Cookies.set(UTM_COOKIE_KEY, encoded, {
+    domain,
+    path: "/",
+    sameSite: "Lax",
+  });
+}
+
+/**
+ * Removes the UTM cookie.
+ * @param domain - Cookie domain (defaults to `.gokinetic.com`).
+ */
+export function removeUTMs(domain: string = DEFAULT_DOMAIN): void {
+  Cookies.remove(UTM_COOKIE_KEY, { domain, path: "/" });
+}
+export function getCookie(key: string): string | null {
+  if (typeof window === "undefined") return "";
+  const encryptedValue = Cookies.get(key);
+
+  if (encryptedValue) return Base64.decode(encryptedValue);
+
+  return null;
+}
+export const getParsedCookie = (key: string) => {
+  try {
+    return JSON.parse(getCookie(key) || "");
+  } catch {
+    return null;
+  }
+};
+export const setCookie = (
+  key: string,
+  value: any,
+  options: Cookies.CookieAttributes
+) => {
+  if (typeof window === "undefined") return;
+  const stringValue = JSON.stringify(value);
+  const encryptedValue = Base64.encode(stringValue);
+
+  Cookies.set(key, encryptedValue, options);
+};

package/src/utils/cx.test.ts

@@ -0,0 +1,90 @@
+import { clsx, cx } from "./cx";
+
+describe("cx utility", () => {
+  describe("basic class merging", () => {
+    it("returns empty string for no arguments", () => {
+      expect(cx()).toBe("");
+    });
+
+    it("returns single class unchanged", () => {
+      expect(cx("text-red-500")).toBe("text-red-500");
+    });
+
+    it("combines multiple classes", () => {
+      const result = cx("p-4", "m-2", "bg-white");
+      expect(result).toContain("p-4");
+      expect(result).toContain("m-2");
+      expect(result).toContain("bg-white");
+    });
+  });
+
+  describe("Tailwind conflict resolution", () => {
+    it("resolves conflicting padding classes (last wins)", () => {
+      expect(cx("p-4", "p-8")).toBe("p-8");
+    });
+
+    it("resolves conflicting text color classes", () => {
+      expect(cx("text-red-500", "text-blue-500")).toBe("text-blue-500");
+    });
+
+    it("resolves conflicting margin classes", () => {
+      expect(cx("m-2", "m-6")).toBe("m-6");
+    });
+  });
+
+  describe("custom font-variants class group", () => {
+    it("resolves conflicting font variant classes", () => {
+      expect(cx("heading1", "body1")).toBe("body1");
+    });
+
+    it("resolves heading vs label variants", () => {
+      expect(cx("heading3", "label2")).toBe("label2");
+    });
+
+    it("keeps non-conflicting classes alongside font variants", () => {
+      const result = cx("heading1", "text-red-500", "body2");
+      expect(result).toContain("body2");
+      expect(result).toContain("text-red-500");
+      expect(result).not.toContain("heading1");
+    });
+  });
+
+  describe("custom button-sizes class group", () => {
+    it("resolves conflicting button size classes", () => {
+      expect(cx("btn-small", "btn-large")).toBe("btn-large");
+    });
+
+    it("resolves btn-medium vs btn-x-large", () => {
+      expect(cx("btn-medium", "btn-x-large")).toBe("btn-x-large");
+    });
+  });
+
+  describe("conditional and falsy values (via clsx)", () => {
+    it("filters out falsy values", () => {
+      expect(cx("p-4", false, null, undefined, 0, "", "m-2")).toBe("p-4 m-2");
+    });
+
+    it("supports conditional object syntax", () => {
+      expect(cx({ "bg-red-500": true, "bg-blue-500": false })).toBe(
+        "bg-red-500"
+      );
+    });
+
+    it("supports arrays", () => {
+      expect(cx(["p-2", "m-4"])).toBe("p-2 m-4");
+    });
+
+    it("supports mixed arguments", () => {
+      const result = cx("base", ["arr1"], { conditional: true }, undefined);
+      expect(result).toContain("base");
+      expect(result).toContain("arr1");
+      expect(result).toContain("conditional");
+    });
+  });
+
+  describe("exports", () => {
+    it("exports clsx function", () => {
+      expect(typeof clsx).toBe("function");
+    });
+  });
+});

package/src/utils/cx.ts

@@ -1,49 +1,49 @@
-import { clsx, type ClassValue } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-
-const twMerge = extendTailwindMerge({
-  // Define class groups so twMerge knows which classes override each other
-  extend: {
-    classGroups: {
-      ["font-variants" as any]: [
-        "heading1",
-        "heading2",
-        "heading3",
-        "heading4",
-        "heading5",
-        "heading6",
-        "subheading1",
-        "subheading2",
-        "subheading3",
-        "subheading4",
-        "subheading5",
-        "subheading6",
-        "body1",
-        "body2",
-        "body3",
-        "footnote",
-        "micro",
-        "label1",
-        "label2",
-        "label3",
-        "label4",
-      ],
-      ["button-sizes" as any]: [
-        "btn-small",
-        "btn-medium",
-        "btn-large",
-        "btn-x-large",
-      ],
-    },
-  },
-});
-
-/**
- * Utility function to combine class names using clsx
- * @param inputs - Class values to combine
- * @returns Combined class string
- */
-export const cx = (...val: ClassValue[]) => twMerge(clsx(...val));
-
-export { clsx };
-export type { ClassValue };
+import { clsx, type ClassValue } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+
+const twMerge = extendTailwindMerge({
+  // Define class groups so twMerge knows which classes override each other
+  extend: {
+    classGroups: {
+      ["font-variants" as any]: [
+        "heading1",
+        "heading2",
+        "heading3",
+        "heading4",
+        "heading5",
+        "heading6",
+        "subheading1",
+        "subheading2",
+        "subheading3",
+        "subheading4",
+        "subheading5",
+        "subheading6",
+        "body1",
+        "body2",
+        "body3",
+        "footnote",
+        "micro",
+        "label1",
+        "label2",
+        "label3",
+        "label4",
+      ],
+      ["button-sizes" as any]: [
+        "btn-small",
+        "btn-medium",
+        "btn-large",
+        "btn-x-large",
+      ],
+    },
+  },
+});
+
+/**
+ * Utility function to combine class names using clsx
+ * @param inputs - Class values to combine
+ * @returns Combined class string
+ */
+export const cx = (...val: ClassValue[]) => twMerge(clsx(...val));
+
+export { clsx };
+export type { ClassValue };

package/src/utils/index.test.ts

@@ -0,0 +1,115 @@
+/**
+ * This test ensures all re-exports from the utils barrel file are resolved,
+ * which satisfies the function coverage requirement for the barrel module.
+ */
+import {
+  buildPreservedQueryHref,
+  clsx,
+  combineExistingAndNewUTMs,
+  cx,
+  getCampaignProperties,
+  getCookie,
+  getOrganicTrafficUtmParameters,
+  getParsedCookie,
+  getUtmParametersFromURL,
+  getUTMs,
+  label1BoldOptions,
+  removeUTMs,
+  renderContentfulRichText,
+  renderContentfulRichTextTable,
+  setCookie,
+  setUTMs,
+  SpeedCardBg,
+  toDocument,
+  useContentfulRichText,
+  useProcessedChecklist,
+  UTM_PARAM_NAMES,
+} from "./index";
+
+describe("utils barrel exports", () => {
+  it("exports cx", () => {
+    expect(typeof cx).toBe("function");
+  });
+
+  it("exports clsx", () => {
+    expect(typeof clsx).toBe("function");
+  });
+
+  it("exports SpeedCardBg", () => {
+    expect(typeof SpeedCardBg).toBe("function");
+  });
+
+  it("exports getUTMs", () => {
+    expect(typeof getUTMs).toBe("function");
+  });
+
+  it("exports setUTMs", () => {
+    expect(typeof setUTMs).toBe("function");
+  });
+
+  it("exports removeUTMs", () => {
+    expect(typeof removeUTMs).toBe("function");
+  });
+
+  it("exports getCookie", () => {
+    expect(typeof getCookie).toBe("function");
+  });
+
+  it("exports getParsedCookie", () => {
+    expect(typeof getParsedCookie).toBe("function");
+  });
+
+  it("exports setCookie", () => {
+    expect(typeof setCookie).toBe("function");
+  });
+
+  it("exports getUtmParametersFromURL", () => {
+    expect(typeof getUtmParametersFromURL).toBe("function");
+  });
+
+  it("exports combineExistingAndNewUTMs", () => {
+    expect(typeof combineExistingAndNewUTMs).toBe("function");
+  });
+
+  it("exports getOrganicTrafficUtmParameters", () => {
+    expect(typeof getOrganicTrafficUtmParameters).toBe("function");
+  });
+
+  it("exports getCampaignProperties", () => {
+    expect(typeof getCampaignProperties).toBe("function");
+  });
+
+  it("exports buildPreservedQueryHref", () => {
+    expect(typeof buildPreservedQueryHref).toBe("function");
+  });
+
+  it("exports UTM_PARAM_NAMES", () => {
+    expect(UTM_PARAM_NAMES).toBeDefined();
+    expect(Array.isArray(UTM_PARAM_NAMES)).toBe(true);
+  });
+
+  it("exports toDocument", () => {
+    expect(typeof toDocument).toBe("function");
+  });
+
+  it("exports renderContentfulRichText", () => {
+    expect(typeof renderContentfulRichText).toBe("function");
+  });
+
+  it("exports useContentfulRichText", () => {
+    expect(typeof useContentfulRichText).toBe("function");
+  });
+
+  it("exports renderContentfulRichTextTable", () => {
+    expect(typeof renderContentfulRichTextTable).toBe("function");
+  });
+
+  it("exports useProcessedChecklist", () => {
+    expect(typeof useProcessedChecklist).toBe("function");
+  });
+
+  it("exports label1BoldOptions", () => {
+    expect(label1BoldOptions).toBeDefined();
+    expect(label1BoldOptions.renderMark).toBeDefined();
+  });
+});

package/src/utils/index.ts

@@ -1,41 +1,41 @@
-export { cx, clsx } from "./cx";
-export type { ClassValue } from "./cx";
-
-// Decorative SVG generators
-export { SpeedCardBg } from "./speed-card-bg";
-
-// UTM & Cookie utilities
-export {
-  getUTMs,
-  setUTMs,
-  removeUTMs,
-  getCookie,
-  getParsedCookie,
-  setCookie,
-} from "./cookie";
-export {
-  getUtmParametersFromURL,
-  combineExistingAndNewUTMs,
-  getOrganicTrafficUtmParameters,
-  getCampaignProperties,
-  buildPreservedQueryHref,
-} from "./utm";
-export type {
-  UTMProperty,
-  UTMProperties,
-  CampaignProperties,
-} from "../types/utm";
-export { UTM_PARAM_NAMES } from "../types/utm";
-
-// Contentful utilities (server-safe, no "use client")
-export { toDocument } from "./contentful/to-document";
-export {
-  renderContentfulRichText,
-  useContentfulRichText,
-  renderContentfulRichTextTable,
-} from "../hooks/contentful/use-contentful-rich-text";
-export {
-  useProcessedChecklist,
-  label1BoldOptions,
-} from "../hooks/contentful/use-processed-check-list";
-export type { ProcessedChecklistItem } from "../hooks/contentful/use-processed-check-list";
+export { cx, clsx } from "./cx";
+export type { ClassValue } from "./cx";
+
+// Decorative SVG generators
+export { SpeedCardBg } from "./speed-card-bg";
+
+// UTM & Cookie utilities
+export {
+  getUTMs,
+  setUTMs,
+  removeUTMs,
+  getCookie,
+  getParsedCookie,
+  setCookie,
+} from "./cookie";
+export {
+  getUtmParametersFromURL,
+  combineExistingAndNewUTMs,
+  getOrganicTrafficUtmParameters,
+  getCampaignProperties,
+  buildPreservedQueryHref,
+} from "./utm";
+export type {
+  UTMProperty,
+  UTMProperties,
+  CampaignProperties,
+} from "../types/utm";
+export { UTM_PARAM_NAMES } from "../types/utm";
+
+// Contentful utilities (server-safe, no "use client")
+export { toDocument } from "./contentful/to-document";
+export {
+  renderContentfulRichText,
+  useContentfulRichText,
+  renderContentfulRichTextTable,
+} from "../hooks/contentful/use-contentful-rich-text";
+export {
+  useProcessedChecklist,
+  label1BoldOptions,
+} from "../hooks/contentful/use-processed-check-list";
+export type { ProcessedChecklistItem } from "../hooks/contentful/use-processed-check-list";

package/src/utils/speed-card-bg.test.ts

@@ -0,0 +1,46 @@
+import SpeedCardBg, { SpeedCardBg as namedExport } from "./speed-card-bg";
+
+describe("SpeedCardBg", () => {
+  it("returns a valid SVG string", () => {
+    const svg = SpeedCardBg();
+    expect(svg).toContain("<svg");
+    expect(svg).toContain("</svg>");
+    expect(svg).toContain('xmlns="http://www.w3.org/2000/svg"');
+  });
+
+  it("uses default color #24A76A when no argument provided", () => {
+    const svg = SpeedCardBg();
+    expect(svg).toContain('fill="#24A76A"');
+    expect(svg).not.toContain("${color}");
+  });
+
+  it("applies custom color to fill attributes", () => {
+    const svg = SpeedCardBg("#FF0000");
+    expect(svg).toContain('fill="#FF0000"');
+    expect(svg).not.toContain('fill="#24A76A"');
+  });
+
+  it("has correct SVG dimensions", () => {
+    const svg = SpeedCardBg();
+    expect(svg).toContain('width="684"');
+    expect(svg).toContain('height="107"');
+    expect(svg).toContain('viewBox="0 0 684 107"');
+  });
+
+  it("contains two path elements for the pinwheel", () => {
+    const svg = SpeedCardBg();
+    const pathMatches = svg.match(/<path /g);
+    expect(pathMatches).toHaveLength(2);
+  });
+
+  it("fills both paths with the provided color", () => {
+    const color = "#ABCDEF";
+    const svg = SpeedCardBg(color);
+    const fillMatches = svg.match(new RegExp(`fill="${color}"`, "g"));
+    expect(fillMatches).toHaveLength(2);
+  });
+
+  it("exports the same function as both default and named", () => {
+    expect(namedExport).toBe(SpeedCardBg);
+  });
+});

package/src/utils/speed-card-bg.ts

@@ -1,24 +1,24 @@
-/**
- * Returns an inline SVG string for the SpeedCard pinwheel decorative
- * background. The two paths are filled with the provided color so callers
- * can theme the background dynamically (used by SimpleCard when
- * `showBackgroundImage` is enabled and a `pinwheelColor` is provided).
- *
- * Output is intended to be embedded as a `data:image/svg+xml;utf8,...`
- * `background-image`. Encode the result with `encodeURIComponent`.
- */
-export const SpeedCardBg = (color: string = "#24A76A"): string => {
-  return `<svg xmlns="http://www.w3.org/2000/svg" width="684" height="107" viewBox="0 0 684 107" fill="none">
-    <g clip-path="url(#clip0_12352_9042)">
-      <path d="M154.09 -70.5605C173.769 -7.58032 204.79 24.8889 328.202 55.2823C444.619 83.9133 629.479 141.332 667.653 80.7015C691.679 45.2165 678.322 -5.62201 670.537 -46.3554C664.452 -73.1846 658.327 -97.1939 652.913 -123.475C651.135 -132.091 638.766 -131.974 637.067 -123.318C628.136 -77.6888 612.526 -44.9062 577.593 -22.4637C517.962 20.1889 377.954 -6.48361 303.148 -38.287C223.245 -70.7171 200.918 -132.366 195.425 -199.341C193.37 -235.257 198.467 -269.841 208.07 -299.569C210.915 -308.303 199.218 -314.178 193.844 -306.697C151.324 -247.751 137.69 -140.395 154.129 -70.5213" fill="${color}" />
-      <path d="M167.605 -417.382C104.062 -397.877 71.302 -367.131 40.6368 -244.813C11.7499 -129.428 -46.182 53.7941 14.9903 91.6292C50.7927 115.443 102.086 102.204 143.183 94.4883C170.253 88.4567 194.476 82.3858 220.992 77.02C229.686 75.2574 229.568 62.9983 220.834 61.3141C174.797 52.4624 141.721 36.9915 119.078 2.36813C76.0441 -56.7345 102.955 -195.502 135.043 -269.645C167.763 -348.84 229.963 -370.969 297.537 -376.414C333.774 -378.45 368.667 -373.398 398.661 -363.88C407.473 -361.06 413.401 -372.654 405.853 -377.98C346.38 -420.124 238.064 -433.636 167.565 -417.343" fill="${color}" />
-    </g>
-    <defs>
-      <clipPath id="clip0_12352_9042">
-        <rect width="684" height="107" fill="white" />
-      </clipPath>
-    </defs>
-  </svg>`;
-};
-
-export default SpeedCardBg;
+/**
+ * Returns an inline SVG string for the SpeedCard pinwheel decorative
+ * background. The two paths are filled with the provided color so callers
+ * can theme the background dynamically (used by SimpleCard when
+ * `showBackgroundImage` is enabled and a `pinwheelColor` is provided).
+ *
+ * Output is intended to be embedded as a `data:image/svg+xml;utf8,...`
+ * `background-image`. Encode the result with `encodeURIComponent`.
+ */
+export const SpeedCardBg = (color: string = "#24A76A"): string => {
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="684" height="107" viewBox="0 0 684 107" fill="none">
+    <g clip-path="url(#clip0_12352_9042)">
+      <path d="M154.09 -70.5605C173.769 -7.58032 204.79 24.8889 328.202 55.2823C444.619 83.9133 629.479 141.332 667.653 80.7015C691.679 45.2165 678.322 -5.62201 670.537 -46.3554C664.452 -73.1846 658.327 -97.1939 652.913 -123.475C651.135 -132.091 638.766 -131.974 637.067 -123.318C628.136 -77.6888 612.526 -44.9062 577.593 -22.4637C517.962 20.1889 377.954 -6.48361 303.148 -38.287C223.245 -70.7171 200.918 -132.366 195.425 -199.341C193.37 -235.257 198.467 -269.841 208.07 -299.569C210.915 -308.303 199.218 -314.178 193.844 -306.697C151.324 -247.751 137.69 -140.395 154.129 -70.5213" fill="${color}" />
+      <path d="M167.605 -417.382C104.062 -397.877 71.302 -367.131 40.6368 -244.813C11.7499 -129.428 -46.182 53.7941 14.9903 91.6292C50.7927 115.443 102.086 102.204 143.183 94.4883C170.253 88.4567 194.476 82.3858 220.992 77.02C229.686 75.2574 229.568 62.9983 220.834 61.3141C174.797 52.4624 141.721 36.9915 119.078 2.36813C76.0441 -56.7345 102.955 -195.502 135.043 -269.645C167.763 -348.84 229.963 -370.969 297.537 -376.414C333.774 -378.45 368.667 -373.398 398.661 -363.88C407.473 -361.06 413.401 -372.654 405.853 -377.98C346.38 -420.124 238.064 -433.636 167.565 -417.343" fill="${color}" />
+    </g>
+    <defs>
+      <clipPath id="clip0_12352_9042">
+        <rect width="684" height="107" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>`;
+};
+
+export default SpeedCardBg;