Banner de cookie-uri

Prezentare

Informează despre folosirea cookie-urilor și păstrează consimțământul înregistrat, rămânând vizibil până când persoana îl acordă explicit.

Când se folosește

• pe fiecare pagină, până la înregistrarea unui consimțământ real.

Când nu se folosește

• dacă site-ul nu folosește deloc cookie-uri opționale — un banner fără scop real induce în eroare.

Anatomie

Un `<section class="sd-cookie-banner" data-sd-cookie-banner>` (poziționat sticky, la baza ecranului) cu `__inner` (flex) → `__content` și un buton de acceptare (`data-sd-cookie-accept`).

Variante

• implicit — o singură variantă

Stări

• vizibil (implicit, fără JS)
• ascuns (`[hidden]`, doar după acceptare, cu JS)

Comportament

Fără JavaScript: bannerul rămâne vizibil la fiecare încărcare de pagină — alegere sigură, nu un fals negativ. Cu JavaScript (`enhanceCookieBanner`): la accept, consimțământul se salvează în `localStorage` (cheie implicită `sd-cookie-consent`) și bannerul se ascunde; dacă `localStorage` nu e disponibil, bannerul reapare la vizita următoare, fără eroare.

Reguli de conținut

• spune explicit ce tip de cookie-uri sunt folosite (esențiale/urmărire), nu doar formula generică „acest site folosește cookie-uri".

Responsabilitățile implementatorului

• nu ascunde bannerul din markup-ul implicit — starea vizibilă e cea corectă până la un consimțământ real, înregistrat de utilizator.

Cercetare

• https://github.com/ciprian-rus/sistem.digital/pull/88 (site extern)

Istoric

Structura completă a acestei secțiuni urmează șablonul canonic al paginii unei componente. Accesibilitatea (semantică, tastatură, focus) rămâne documentată separat, conform șablonului de accesibilitate.

Preview și markup canonic

Previzualizarea de mai jos redă exact șirul HTML afișat în exemplul de cod. Nu există o implementare paralelă pentru documentație.

Instalare și importuri

pnpm add @sistem-digital/tokens @sistem-digital/components

@import '@sistem-digital/components/navigation.css';

import { enhanceCookieBanner } from '@sistem-digital/components';

<section class="sd-cookie-banner" data-sd-cookie-banner aria-label="Cookie-uri"><div class="container sd-cookie-banner__inner"><div class="sd-cookie-banner__content"><h2>Acest site folosește doar cookie-uri esențiale</h2><p>Nu folosim cookie-uri de urmărire sau publicitate.</p></div><button type="button" class="sd-button sd-button--primary" data-sd-cookie-accept>Am înțeles</button></div></section>

Contract și surse

• Documentația familiei Navigație
• Codul sursă (site extern)
• Changelog (site extern)

Schimbarea claselor publice, a markup-ului canonic sau a comportamentului helperelor necesită versionare și instrucțiuni de migrare.

Matricea design–cod

Disponibilitatea reală a acestei componente, calculată din pachetele publicate, conform schemei matricei design–cod. Rândurile Figma, testare cu tastatura și testare cu cititor de ecran rămân „Indisponibil” până la dovezi publicate separat (kit Figma, respectiv auditul manual de accesibilitate).