feat(list-selectable): add cornerTag prop with Highlight Corner Tag (MR-490)

[igor-monteiro-almeida]

Summary

Adds support for the Highlight Corner Tag in ListSelectable (and ListReadOnly via isSelectableDisabled). The new CornerTag lives as an internal subcomponent under src/CornerTag/ (not exported publicly in this release) and is rendered as an overlay at the top-right corner of card containers.

• New CornerTag component with primaryDown / complementaryPure colors (tokens: $color-brand-primary-down / $color-complementary-pure)
• ListSelectable receives a new cornerTag prop via discriminated union: only allowed when type='card'; type='text' sets cornerTag?: never to block at compile-time (per spec OQ-S6 — no runtime warns)
• ListContainer renders CornerTag conditionally for type='card' (single source of truth)
• ListReadOnly accepts and forwards cornerTag (covers isSelectableDisabled flow)
• Stories cover all V-02..V-14 variants from the spec
• Unit tests cover CornerTag standalone + 16 ListSelectable variants
• 722 tests passing in full ocean-react suite — zero regressions

Spec & PRD

• PRD: https://github.com/Pagnet/pagnet/issues/16178
• Technical spec (with all OpenQuestions resolved): https://github.com/Pagnet/pagnet/issues/16178#issuecomment-4343595459
• Jira: MR-490

API contract

<ListSelectable
  type="card"
  title="Plano Premium"
  description="R$ 49,90/mês"
  checkbox={{ id: 'plan-1' }}
  cornerTag={{ label: 'Recomendado' }}                       // primaryDown (default)
/>

<ListSelectable
  type="card"
  title="Plano Plus"
  radio={{ id: 'plan-2', name: 'plan' }}
  cornerTag={{ label: 'Novo', color: 'complementaryPure' }}
/>

type='text' + cornerTag is blocked by TypeScript (discriminated union).

Test plan

• yarn lint — zero errors on changed files
• yarn jest (ocean-react) — 722/722 passing, 64 suites, zero regressions
• CornerTag unit tests — primaryDown/complementaryPure colors, empty label, long label, custom className
• ListSelectable unit tests — V-02..V-14 variants (only inline / only corner / both / none / type=text / disabled / loading / selected / error / checkbox / radio / complementaryPure / forwarded to ListReadOnly when isSelectableDisabled)
• Visual regression (Storybook snapshots) — to be checked by reviewer
• A11y review — span + aria-label, no role="status", reading order after card content

Decisions resolved during the spec

• cornerTag is a discriminated-union prop — type='text' blocks usage at compile-time
• CornerTag is internal-only (not exported in src/index.ts this release; future export is a follow-up when consumers like CardGroup need it)
• Tokens reused from existing scss: $color-brand-primary-down, $color-complementary-pure, $font-family-base, $font-weight-extrabold, $font-size-xxxs
• ListContainer (shared) is the single source of truth — ListSelectable and ListReadOnly both inherit support automatically

🤖 Generated with Claude Code

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[igor-monteiro-almeida]

Heads-up sobre paridade visual com o Figma

Durante a revisão deste PR, percebemos que a borda do card do ListContainer usa hoje \$color-interface-light-deep (#CED1E1), mas o Figma especifica \$color-interface-light-down (#E0E2EE) — uma tonalidade mais clara.

Essa divergência é pré-existente ao MR-490 (não foi introduzida aqui), e afeta todos os consumidores de ListContainer (ListSelectable, ListReadOnly, ListAction, etc.). Para manter o escopo deste PR isolado, abrimos a correção em separado:

🔗 #1242 — fix(list-container): card border color should match Figma spec

Recomendação: mergear este PR (#1240) primeiro com a Corner Tag, e o #1242 logo em sequência para alinhar a borda com o Figma. Não é bloqueante — os dois podem ser revisados em paralelo e mergeados em qualquer ordem.

[igor-monteiro-almeida]

Fechando para recriar a partir de branch direto no repo principal — assim o Chromatic publica o preview visual automaticamente (PRs de fork não conseguem usar os secrets do CI). Vou abrir um novo PR equivalente em seguida. Nada mudou no código.