Implement WEBDEV-2935

package.json

@@ -6,9 +6,11 @@
     "astro": "astro",
     "build": "astro build",
     "dev": "astro dev",
-    "preview": "astro preview"
+    "preview": "astro preview",
+    "test": "vitest --run"
   },
   "dependencies": {
+    "@astrojs/check": "^0.9.9",
     "@astrojs/mdx": "^4.3.13",
     "@astrojs/react": "^4.4.2",
     "@fontsource-variable/figtree": "^5.2.10",
@@ -24,12 +26,17 @@
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "sst": "^3.17.25",
-    "tailwindcss": "^4.1.18"
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3",
+    "vanilla-cookieconsent": "^3.1.0"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.19",
+    "fast-check": "^3.23.2",
+    "jsdom": "^25.0.1",
     "prettier": "^3.8.0",
     "prettier-plugin-astro": "^0.14.1",
-    "prettier-plugin-tailwindcss": "^0.6.14"
+    "prettier-plugin-tailwindcss": "^0.6.14",
+    "vitest": "^3.2.3"
   }
 }

src/components/CookieConsent.astro

@@ -0,0 +1,137 @@
+---
+import "vanilla-cookieconsent/dist/cookieconsent.css";
+import "../styles/cookies.css";
+---
+
+<script>
+  import * as CookieConsent from "vanilla-cookieconsent";
+
+  CookieConsent.run({
+    manageScriptTags: true,
+
+    guiOptions: {
+      consentModal: {
+        layout: "cloud",
+        position: "bottom center",
+        flipButtons: false,
+      },
+      preferencesModal: {
+        layout: "box",
+      },
+    },
+
+    categories: {
+      necessary: {
+        readOnly: true,
+      },
+      analytics_cookies: {},
+      marketing_cookies: {},
+    },
+
+    onConsent: ({ cookie }) => {
+      // Fires after initial consent or on page load with existing consent
+    },
+
+    onChange: ({ cookie, changedCategories }) => {
+      for (const category of changedCategories) {
+        if (!CookieConsent.acceptedCategory(category)) {
+          CookieConsent.eraseCookies(getCookiesForCategory(category));
+        }
+      }
+    },
+
+    language: {
+      default: "en",
+      translations: {
+        en: {
+          consentModal: {
+            title: "Cookies & Privacy",
+            description:
+              "We use cookies to enhance your experience. You can accept all cookies, reject optional ones, or customise your preferences.",
+            acceptAllBtn: "Accept all Cookies",
+            acceptNecessaryBtn: "Reject all",
+            showPreferencesBtn: "Customise Cookies",
+          },
+          preferencesModal: {
+            title: "Cookie Settings",
+            savePreferencesBtn: "Save settings",
+            acceptAllBtn: "Accept all",
+            acceptNecessaryBtn: "Reject all",
+            closeIconLabel: "Close",
+            sections: [
+              {
+                title: "Cookie Usage",
+                description:
+                  "We use cookies to ensure basic site functionality and enhance your experience. Choose which categories to allow.",
+              },
+              {
+                title: "Necessary Cookies",
+                description:
+                  "These cookies are essential for the website to function and cannot be disabled.",
+                linkedCategory: "necessary",
+              },
+              {
+                title: "Analytics Cookies",
+                description:
+                  "These cookies help us understand how visitors interact with the website by collecting anonymous data.",
+                linkedCategory: "analytics_cookies",
+                cookieTable: {
+                  headers: {
+                    name: "Name",
+                    domain: "Domain",
+                    expiration: "Expiration",
+                    description: "Description",
+                  },
+                  body: [
+                    {
+                      name: "_ga",
+                      domain: "google.com",
+                      expiration: "2 years",
+                      description: "Distinguishes unique users.",
+                    },
+                    {
+                      name: "_gid",
+                      domain: "google.com",
+                      expiration: "1 day",
+                      description: "Distinguishes unique users.",
+                    },
+                  ],
+                },
+              },
+              {
+                title: "Marketing Cookies",
+                description:
+                  "These cookies are used to deliver relevant advertisements and track campaign effectiveness.",
+                linkedCategory: "marketing_cookies",
+                cookieTable: {
+                  headers: {
+                    name: "Name",
+                    domain: "Domain",
+                    expiration: "Expiration",
+                    description: "Description",
+                  },
+                  body: [
+                    {
+                      name: "_gcl_au",
+                      domain: "google.com",
+                      expiration: "90 days",
+                      description: "Stores conversion data for Google Ads.",
+                    },
+                  ],
+                },
+              },
+            ],
+          },
+        },
+      },
+    },
+  });
+
+  function getCookiesForCategory(category: string): string[] {
+    const cookieMap: Record<string, string[]> = {
+      analytics_cookies: ["_ga", "_gid", "_gat"],
+      marketing_cookies: ["_gcl_au"],
+    };
+    return cookieMap[category] ?? [];
+  }
+</script>

src/components/nav/Navbar.tsx

@@ -1,5 +1,16 @@
 import React, { useState, useEffect, useRef } from 'react';
 import LogoImg from '../../assets/CoreCollective_White-Wordmark.png';
+import { pushEvent } from '../../lib/dataLayer';
+
+export function trackNavClick(e: React.MouseEvent<HTMLAnchorElement>): void {
+  const anchor = e.currentTarget;
+  const img = anchor.querySelector("img");
+  const linkText = anchor.textContent?.trim() || img?.alt || "";
+  const linkUrl = anchor.getAttribute("href") || "";
+
+  pushEvent({ event: "nav_click", linkText, linkUrl });
+  // Do NOT call e.preventDefault() — default navigation must proceed
+}
 
 type NavLink =
   | { name: string; href: string }
@@ -50,7 +61,7 @@ export default function Navbar() {
       <header className="bg-cc-blue fixed inset-x-0 top-0 z-50 h-30 text-white">
         <nav className="mx-auto flex h-full items-center justify-between gap-4 px-4 lg:gap-8 lg:px-8">
           <div className="flex h-full min-w-0 max-w-75 items-center">
-            <a href="/">
+            <a href="/" onClick={trackNavClick}>
               <img src={LogoImg.src} alt="Logo" className="h-auto w-full" />
             </a>
           </div>
@@ -101,7 +112,10 @@ export default function Navbar() {
                                   ? 'text-cc-cyan font-bold'
                                   : 'text-white'
                               }`}
-                              onClick={() => setDropdownOpen(null)}
+                              onClick={(e) => {
+                                trackNavClick(e);
+                                setDropdownOpen(null);
+                              }}
                             >
                               {child.name}
                             </a>
@@ -127,6 +141,7 @@ export default function Navbar() {
                     className={`hover:text-cc-cyan transition-colors ${
                       isActive ? 'text-cc-cyan font-bold' : 'text-white'
                     }`}
+                    onClick={trackNavClick}
                   >
                     {link.name}
                   </a>
@@ -211,7 +226,8 @@ export default function Navbar() {
                                 ? 'text-cc-cyan'
                                 : 'text-white'
                             }`}
-                            onClick={() => {
+                            onClick={(e) => {
+                              trackNavClick(e);
                               setIsOpen(false);
                               setDropdownOpen(null);
                             }}
@@ -236,7 +252,10 @@ export default function Navbar() {
                   className={`hover:text-cc-cyan block py-4 ${
                     currentPath === link.href ? 'text-cc-cyan' : 'text-white'
                   }`}
-                  onClick={() => setIsOpen(false)}
+                  onClick={(e) => {
+                    trackNavClick(e);
+                    setIsOpen(false);
+                  }}
                 >
                   {link.name}
                 </a>

src/components/nav/__tests__/Navbar.pbt.test.ts

@@ -0,0 +1,146 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import fc from "fast-check";
+import { trackNavClick } from "../Navbar";
+
+vi.mock("../../../lib/dataLayer", () => ({
+  pushEvent: vi.fn(),
+}));
+
+import { pushEvent } from "../../../lib/dataLayer";
+
+const mockedPushEvent = vi.mocked(pushEvent);
+
+function createMockEvent(
+  anchor: HTMLAnchorElement
+): React.MouseEvent<HTMLAnchorElement> {
+  return {
+    currentTarget: anchor,
+    preventDefault: vi.fn(),
+  } as unknown as React.MouseEvent<HTMLAnchorElement>;
+}
+
+describe("Feature: consent-banner-datalayer, Property 2: Navigation link text extraction", () => {
+  /**
+   * **Validates: Requirements 8.2, 8.3, 8.4**
+   *
+   * For any anchor element containing arbitrary text content (including
+   * leading/trailing whitespace) or an image with an alt attribute, the
+   * trackNavClick extraction logic SHALL produce a linkText equal to the
+   * trimmed textContent of the anchor (or the alt attribute of the contained
+   * img if textContent is empty), and a linkUrl equal to the exact href
+   * attribute value.
+   */
+
+  beforeEach(() => {
+    mockedPushEvent.mockClear();
+  });
+
+  it("extracts trimmed textContent as linkText and preserves href exactly", () => {
+    const arbWhitespace = fc.stringOf(fc.constantFrom(" ", "\t", "\n", "\r"));
+    const arbVisibleText = fc.string({ minLength: 1 }).filter((s) => s.trim().length > 0);
+    const arbHref = fc.string();
+
+    fc.assert(
+      fc.property(
+        arbWhitespace,
+        arbVisibleText,
+        arbWhitespace,
+        arbHref,
+        (leadingWs, text, trailingWs, href) => {
+          mockedPushEvent.mockClear();
+
+          const anchor = document.createElement("a");
+          anchor.setAttribute("href", href);
+          anchor.textContent = leadingWs + text + trailingWs;
+
+          trackNavClick(createMockEvent(anchor));
+
+          expect(mockedPushEvent).toHaveBeenCalledTimes(1);
+          const call = mockedPushEvent.mock.calls[0][0];
+          expect(call).toEqual({
+            event: "nav_click",
+            linkText: (leadingWs + text + trailingWs).trim(),
+            linkUrl: href,
+          });
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it("falls back to img alt when textContent is empty or whitespace-only", () => {
+    const arbWhitespaceOnly = fc.stringOf(fc.constantFrom(" ", "\t", "\n", "\r"));
+    const arbAlt = fc.string({ minLength: 1 });
+    const arbHref = fc.string();
+
+    fc.assert(
+      fc.property(
+        arbWhitespaceOnly,
+        arbAlt,
+        arbHref,
+        (whitespace, alt, href) => {
+          mockedPushEvent.mockClear();
+
+          const anchor = document.createElement("a");
+          anchor.setAttribute("href", href);
+          // Add whitespace-only text node (if any) so textContent.trim() is empty
+          if (whitespace.length > 0) {
+            anchor.appendChild(document.createTextNode(whitespace));
+          }
+          const img = document.createElement("img");
+          img.alt = alt;
+          anchor.appendChild(img);
+
+          trackNavClick(createMockEvent(anchor));
+
+          expect(mockedPushEvent).toHaveBeenCalledTimes(1);
+          const call = mockedPushEvent.mock.calls[0][0];
+
+          // textContent includes alt text from img element in jsdom
+          // The actual behavior: anchor.textContent includes the img alt text
+          // in the DOM (img elements don't have textContent visible),
+          // but whitespace + alt scenario depends on the DOM behavior.
+          // The logic is: textContent?.trim() || img?.alt || ""
+          const anchorTextContent = anchor.textContent?.trim() || "";
+          const expectedLinkText = anchorTextContent || img.alt || "";
+
+          expect(call).toEqual({
+            event: "nav_click",
+            linkText: expectedLinkText,
+            linkUrl: href,
+          });
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it("preserves href attribute value exactly", () => {
+    // Generate various href patterns including special characters
+    const arbHref = fc.oneof(
+      fc.webUrl(),
+      fc.string(),
+      fc.constant("/"),
+      fc.constant("#"),
+      fc.constantFrom("/about/", "/contact?q=hello#top", "https://example.com/path")
+    );
+    const arbText = fc.string({ minLength: 1 }).filter((s) => s.trim().length > 0);
+
+    fc.assert(
+      fc.property(arbHref, arbText, (href, text) => {
+        mockedPushEvent.mockClear();
+
+        const anchor = document.createElement("a");
+        anchor.setAttribute("href", href);
+        anchor.textContent = text;
+
+        trackNavClick(createMockEvent(anchor));
+
+        expect(mockedPushEvent).toHaveBeenCalledTimes(1);
+        const call = mockedPushEvent.mock.calls[0][0];
+        expect((call as any).linkUrl).toBe(href);
+      }),
+      { numRuns: 100 }
+    );
+  });
+});