@ndlib/component-library 1.0.27 → 1.0.28

package/dist/components/elements/ConsentBanner/ConsentBanner.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ConsentBanner } from './consentBanner';
+declare global {
+    interface Window {
+        clarity?: unknown;
+    }
+}
+declare const meta: Meta<typeof ConsentBanner>;
+export default meta;
+type Story = StoryObj<typeof ConsentBanner>;
+export declare const EEA_Shows: Story;
+export declare const NonEEA_Hides: Story;
+export declare const AcceptFlow: Story;
+export declare const DenyFlow: Story;
+export declare const AutoDetect_FetchMock: Story;

package/dist/components/elements/ConsentBanner/ConsentBanner.stories.js

@@ -0,0 +1,109 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ConsentBanner } from './consentBanner';
+function clearConsent() {
+    try {
+        localStorage.removeItem('clarityConsent');
+        document.cookie = 'clarityConsent=; Max-Age=0; path=/';
+    }
+    catch (_a) {
+    }
+}
+function cleanupClarityScripts() {
+    document
+        .querySelectorAll('script[src*="clarity.ms"]')
+        .forEach((s) => { var _a; return (_a = s.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(s); });
+    if (window.clarity) {
+        delete window.clarity;
+    }
+}
+const meta = {
+    title: 'Components/ConsentBanner',
+    component: ConsentBanner,
+    argTypes: {
+        clarityProjectId: { control: 'text' },
+        countryCode: { control: 'text' },
+        autoDetect: { control: 'boolean' },
+        geoEndpoint: { control: 'text' },
+        storageKey: { control: 'text' },
+    },
+    decorators: [
+        (Story) => {
+            clearConsent();
+            cleanupClarityScripts();
+            const containerStyle = {
+                minHeight: 180,
+                border: '1px dashed #ccc',
+                padding: 16,
+                position: 'relative',
+            };
+            return (_jsxs("div", Object.assign({ style: containerStyle }, { children: [_jsx("p", Object.assign({ style: { marginTop: 0 } }, { children: "The banner (if shown) is fixed to the bottom of the viewport." })), _jsx(Story, {})] })));
+        },
+    ],
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+export const EEA_Shows = {
+    name: 'EEA (DE) → Banner shows',
+    args: {
+        clarityProjectId: 'CLARITY_PROJECT_ID',
+        countryCode: 'DE',
+        autoDetect: false,
+    },
+};
+export const NonEEA_Hides = {
+    name: 'Non-EEA (US) → No banner',
+    args: {
+        clarityProjectId: 'CLARITY_PROJECT_ID',
+        countryCode: 'US',
+        autoDetect: false,
+    },
+};
+export const AcceptFlow = {
+    name: 'Accept flow (DE)',
+    args: {
+        clarityProjectId: 'CLARITY_PROJECT_ID',
+        countryCode: 'DE',
+    },
+};
+export const DenyFlow = {
+    name: 'Deny flow (DE)',
+    args: {
+        clarityProjectId: 'CLARITY_PROJECT_ID',
+        countryCode: 'DE',
+    },
+};
+export const AutoDetect_FetchMock = {
+    name: 'Auto-detect (fetch override → DE)',
+    args: {
+        clarityProjectId: 'CLARITY_PROJECT_ID',
+        autoDetect: true,
+        geoEndpoint: '/api/geo',
+    },
+    decorators: [
+        (Story) => {
+            const g = global;
+            const originalFetch = g.fetch;
+            g.fetch = () => __awaiter(void 0, void 0, void 0, function* () {
+                return ({
+                    text: () => __awaiter(void 0, void 0, void 0, function* () { return 'DE'; }),
+                });
+            });
+            const node = _jsx(Story, {});
+            queueMicrotask(() => {
+                g.fetch = originalFetch;
+            });
+            return node;
+        },
+    ],
+};

package/dist/components/elements/ConsentBanner/ConsentBanner.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/elements/ConsentBanner/ConsentBanner.test.js

@@ -0,0 +1,68 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ConsentBanner } from './consentBanner';
+function cleanupClarityScripts() {
+    document
+        .querySelectorAll('script[src*="clarity.ms"]')
+        .forEach((s) => { var _a; return (_a = s.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(s); });
+}
+function resetConsent() {
+    try {
+        localStorage.removeItem('clarityConsent');
+    }
+    catch (_a) { }
+    document.cookie = 'clarityConsent=; Max-Age=0; path=/';
+    cleanupClarityScripts();
+    if (window.clarity)
+        delete window.clarity;
+}
+beforeEach(() => {
+    resetConsent();
+});
+describe('ConsentBanner', () => {
+    test('shows banner for EEA country (DE) when no prior decision', () => {
+        render(_jsx(ConsentBanner, { clarityProjectId: "PID", countryCode: "DE", autoDetect: false }));
+        expect(screen.getByRole('dialog', { name: /consent for analytics/i })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: /accept/i })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: /deny/i })).toBeInTheDocument();
+    });
+    test('does not show banner for non-EEA country (US)', () => {
+        render(_jsx(ConsentBanner, { clarityProjectId: "PID", countryCode: "US", autoDetect: false }));
+        expect(screen.queryByRole('dialog', { name: /consent for analytics/i })).not.toBeInTheDocument();
+    });
+    test('clicking Deny stores decision and hides banner (no script injected)', () => __awaiter(void 0, void 0, void 0, function* () {
+        const user = userEvent.setup();
+        render(_jsx(ConsentBanner, { clarityProjectId: "PID", countryCode: "DE" }));
+        const deny = yield screen.findByRole('button', { name: /deny/i });
+        yield user.click(deny);
+        yield waitFor(() => expect(screen.queryByRole('dialog', { name: /consent for analytics/i })).not.toBeInTheDocument());
+        expect(localStorage.getItem('clarityConsent')).toBe('false');
+        expect(document.querySelector('script[src*="clarity.ms"]')).not.toBeInTheDocument();
+    }));
+    test('autoDetect fetch → banner shows for mocked DE (runner-agnostic)', () => __awaiter(void 0, void 0, void 0, function* () {
+        const originalFetch = globalThis.fetch;
+        globalThis.fetch = () => __awaiter(void 0, void 0, void 0, function* () {
+            return ({
+                text: () => __awaiter(void 0, void 0, void 0, function* () { return 'DE'; }),
+            });
+        });
+        try {
+            render(_jsx(ConsentBanner, { clarityProjectId: "PID", autoDetect: true }));
+            yield waitFor(() => expect(screen.getByRole('dialog', { name: /consent for analytics/i })).toBeInTheDocument());
+        }
+        finally {
+            ;
+            globalThis.fetch = originalFetch;
+        }
+    }));
+});

package/dist/components/elements/ConsentBanner/consentBanner.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+type ConsentBannerProps = {
+    clarityProjectId: string;
+    countryCode?: string | null;
+    autoDetect?: boolean;
+    geoEndpoint?: string;
+    storageKey?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    onConsentChange?: (consented: boolean) => void;
+};
+export declare const ConsentBanner: React.FC<ConsentBannerProps>;
+export default ConsentBanner;

package/dist/components/elements/ConsentBanner/consentBanner.js

@@ -0,0 +1,201 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+const EEA_UK_CH = new Set([
+    'AT',
+    'BE',
+    'BG',
+    'HR',
+    'CY',
+    'CZ',
+    'DK',
+    'EE',
+    'FI',
+    'FR',
+    'DE',
+    'GR',
+    'HU',
+    'IS',
+    'IE',
+    'IT',
+    'LV',
+    'LI',
+    'LT',
+    'LU',
+    'MT',
+    'NL',
+    'NO',
+    'PL',
+    'PT',
+    'RO',
+    'SK',
+    'SI',
+    'ES',
+    'SE',
+    'GB',
+    'CH',
+]);
+const isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
+function getStoredDecision(key) {
+    var _a, _b, _c;
+    if (!isBrowser)
+        return null;
+    try {
+        const v = (_c = (_a = localStorage.getItem(key)) !== null && _a !== void 0 ? _a : (_b = document.cookie.match(new RegExp(`${key}=([^;]+)`))) === null || _b === void 0 ? void 0 : _b[1]) !== null && _c !== void 0 ? _c : null;
+        if (v === 'true')
+            return true;
+        if (v === 'false')
+            return false;
+        return null;
+    }
+    catch (_d) {
+        return null;
+    }
+}
+function setStoredDecision(key, val) {
+    if (!isBrowser)
+        return;
+    try {
+        localStorage.setItem(key, String(val));
+    }
+    catch (_a) {
+    }
+    try {
+        const days = 180;
+        const expires = new Date(Date.now() + days * 864e5).toUTCString();
+        document.cookie = `${key}=${val}; path=/; SameSite=Lax; expires=${expires}`;
+    }
+    catch (_b) {
+    }
+}
+function loadClarity(clarityProjectId) {
+    if (!isBrowser)
+        return;
+    const w = window;
+    if (typeof w.clarity === 'function')
+        return;
+    w.clarity = (...args) => {
+        w.clarity.q = w.clarity.q || [];
+        w.clarity.q.push(args);
+    };
+    const t = document.createElement('script');
+    t.async = true;
+    t.src = `https://www.clarity.ms/tag/${clarityProjectId}`;
+    const scripts = document.getElementsByTagName('script');
+    const y = scripts && scripts.length ? scripts[0] : null;
+    if (y && y.parentNode) {
+        y.parentNode.insertBefore(t, y);
+    }
+    else if (document.head) {
+        document.head.appendChild(t);
+    }
+    else if (document.body) {
+        document.body.appendChild(t);
+    }
+    else {
+        document.documentElement.appendChild(t);
+    }
+}
+export const ConsentBanner = ({ clarityProjectId, countryCode = null, autoDetect = false, geoEndpoint, storageKey = 'clarityConsent', className, style, onConsentChange, }) => {
+    const [shouldShow, setShouldShow] = React.useState(false);
+    const [resolvedCountry, setResolvedCountry] = React.useState(countryCode);
+    React.useEffect(() => {
+        if (!isBrowser)
+            return;
+        const prior = getStoredDecision(storageKey);
+        if (prior === true) {
+            try {
+                loadClarity(clarityProjectId);
+            }
+            catch (_a) {
+            }
+        }
+    }, [clarityProjectId, storageKey]);
+    React.useEffect(() => {
+        if (countryCode) {
+            setResolvedCountry(countryCode.toUpperCase());
+            return;
+        }
+        if (!autoDetect || !isBrowser)
+            return;
+        const endpoint = geoEndpoint || 'https://ipapi.co/country/';
+        let cancelled = false;
+        (() => __awaiter(void 0, void 0, void 0, function* () {
+            try {
+                const res = yield fetch(endpoint, { credentials: 'omit' });
+                const text = (yield res.text()).trim().slice(0, 2).toUpperCase();
+                if (!cancelled && /^[A-Z]{2}$/.test(text)) {
+                    setResolvedCountry(text);
+                }
+            }
+            catch (_a) {
+            }
+        }))();
+        return () => {
+            cancelled = true;
+        };
+    }, [autoDetect, geoEndpoint, countryCode]);
+    React.useEffect(() => {
+        if (!isBrowser)
+            return;
+        const prior = getStoredDecision(storageKey);
+        if (prior !== null) {
+            setShouldShow(false);
+            return;
+        }
+        if (!resolvedCountry) {
+            setShouldShow(false);
+            return;
+        }
+        setShouldShow(EEA_UK_CH.has(resolvedCountry));
+    }, [resolvedCountry, storageKey]);
+    const handleAccept = () => {
+        setStoredDecision(storageKey, true);
+        setShouldShow(false);
+        onConsentChange === null || onConsentChange === void 0 ? void 0 : onConsentChange(true);
+        try {
+            loadClarity(clarityProjectId);
+        }
+        catch (_a) {
+        }
+    };
+    const handleDeny = () => {
+        setStoredDecision(storageKey, false);
+        setShouldShow(false);
+        onConsentChange === null || onConsentChange === void 0 ? void 0 : onConsentChange(false);
+    };
+    if (!shouldShow)
+        return null;
+    return (_jsxs("div", Object.assign({ role: "dialog", "aria-live": "polite", "aria-label": "Consent for analytics", className: className, style: Object.assign({ position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 99999, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '0.75rem', padding: '0.9rem 1rem', background: 'rgba(17, 24, 39, 0.98)', color: 'white', boxShadow: '0 -6px 24px rgba(0,0,0,0.25)', flexWrap: 'wrap' }, style) }, { children: [_jsx("p", Object.assign({ style: {
+                    fontFamily: 'Arial, sans-serif',
+                    textAlign: 'center',
+                    margin: 0,
+                    lineHeight: 1.4,
+                    flex: '1 1 420px',
+                } }, { children: "We use Microsoft Clarity to improve our site. Do you consent to analytics cookies?" })), _jsxs("div", Object.assign({ style: { display: 'flex', gap: '0.5rem', flexShrink: 0 } }, { children: [_jsx("button", Object.assign({ onClick: handleDeny, type: "button", style: {
+                            border: '1px solid rgba(255,255,255,0.65)',
+                            background: 'transparent',
+                            color: 'white',
+                            padding: '0.6rem 0.9rem',
+                            borderRadius: 8,
+                            cursor: 'pointer',
+                            fontWeight: 600,
+                        } }, { children: "Deny" })), _jsx("button", Object.assign({ onClick: handleAccept, type: "button", style: {
+                            border: 'none',
+                            background: 'white',
+                            color: '#111827',
+                            padding: '0.6rem 0.9rem',
+                            borderRadius: 8,
+                            cursor: 'pointer',
+                            fontWeight: 700,
+                        } }, { children: "Accept" }))] }))] })));
+};
+export default ConsentBanner;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndlib/component-library",
-  "version": "1.0.27",
+  "version": "1.0.28",
   "type": "module",
   "sideEffects": false,
   "files": [