feat(core-ui): add CookieConsentBanner headless component

Implements the EU-compliant cookie consent banner with:
- modal + banner variants, CNIL equal-prominence Reject/Accept buttons
- granular category toggles (essential non-toggleable)
- __consent_state cookie management (SameSite=Lax, Secure, 1-yr, _v:1)
- render-prop overrides: renderHeader, renderCategoryRow, renderActions
- useConsent() integration when ConsentProvider is present
- CookieConsentBannerLoader SSR-safe wrapper
- RTL behavioral tests: Reject All, Save Selected, ESC=Reject, focus-trap
- Storybook stories for modal, banner, render-prop, and a11y tab demo
- jsdom configured with HTTPS origin for Secure cookie testing

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-05-19 21:21:05 +00:00
parent de178035bd
commit 1b6f2d1e36
14 changed files with 1128 additions and 13 deletions

View File

@@ -0,0 +1,26 @@
"use client";
import { useState, useEffect, type ComponentPropsWithoutRef } from "react";
import { CookieConsentBanner } from "./cookie-consent-banner";
export type CookieConsentBannerLoaderProps = ComponentPropsWithoutRef<
typeof CookieConsentBanner
>;
/**
* SSR-safe wrapper that renders null on the server and mounts
* <CookieConsentBanner> client-side only (after hydration).
*/
export function CookieConsentBannerLoader(
props: CookieConsentBannerLoaderProps,
) {
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
if (!mounted) return null;
return <CookieConsentBanner {...props} />;
}