Banner de fază

Prezentare

Semnalează stadiul de maturitate al serviciului (alfa/beta) și oferă o cale directă către feedback.

Când se folosește

• pe fiecare pagină a unui serviciu aflat în stadiul alfa sau beta.

Când nu se folosește

• după ce serviciul devine stabil — eliminarea bannerului e chiar semnalul de „absolvire", nu ceva de lăsat permanent.

Anatomie

Un `<div class="sd-phase-banner">` cu `__inner` (flex) conținând o etichetă de stadiu (`sd-tag`) și un `<p>` cu link către feedback.

Variante

• implicit — o singură variantă

Stări

• nu are stări interactive proprii

Comportament

Element static, fără JavaScript.

Reguli de conținut

• link-ul de feedback duce la un canal real, monitorizat, niciodată la o adresă generică sau moartă.

Cercetare

• https://github.com/ciprian-rus/sistem.digital/pull/89 (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';

<div class="sd-phase-banner"><div class="sd-phase-banner__inner"><span class="sd-tag sd-tag--info">Beta</span><p>Acesta este un serviciu nou. <a href="#">Trimite-ne feedback</a>.</p></div></div>

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).