ECHOES-1368 Add BadgeCounter Accent variety

[gregaubert]

Part of

---

Summary by Gitar

• New feature:
  • Added BadgeCounterVariety enum to support default and accent visual styles.
  • Implemented variety prop in BadgeCounter to apply corresponding CSS variables.
• Refactoring:
  • Updated BadgeCounter to use a standard component function instead of forwardRef.
  • Added BADGE_COUNTER_VARIETY_STYLES to manage component style variants via CSS variables.
• Documentation & Testing:
  • Added an Accent story in BadgeCounter-stories.tsx for visual verification.
  • Expanded test coverage in BadgeCounter-test.tsx to validate both varieties and accessibility.

_{This will update automatically on new commits.}

[netlify]

✅ Deploy Preview for echoes-react ready!

Name	Link
🔨 Latest commit	ed75237
🔍 Latest deploy log	https://app.netlify.com/projects/echoes-react/deploys/6a2c1587922e070008fb67db
😎 Deploy Preview	https://deploy-preview-702--echoes-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[hashicorp-vault-sonar-prod]

ECHOES-1368

[gitar-bot]

Code Review ✅ Approved 1 resolved / 1 findings

Introduces a new accent variety for the BadgeCounter component with accompanying stories and test coverage. Note that removing forwardRef deviates from the existing component pattern used by sibling badges.

✅ 1 resolved

✅ Quality: BadgeCounter diverges from forwardRef pattern used by sibling badges

📄 src/components/badges/BadgeCounter.tsx:45-52
This PR migrates BadgeCounter from forwardRef to a plain function component that receives ref as a regular prop (valid in React 19.2.4). However, the sibling components in the same directory — Badge.tsx (forwardRef at ~line 87) and BadgeSeverity.tsx (forwardRef at ~line 105) — still use the forwardRef pattern. This introduces an inconsistency within the badges module. It's functionally correct, but consider either keeping forwardRef here for consistency, or planning to migrate the sibling components too so the codebase stays uniform.

File: src/components/badges/BadgeCounter.tsx:45-52

Options

Auto-apply is off → Gitar will not commit updates to this branch.
Display: compact → Showing less information.

Comment with these commands to change:

Auto-apply	Compact
gitar auto-apply:on	gitar display:verbose

_{Was this helpful? React with 👍 / 👎 | Gitar}

[sonarqube-next]

Quality Gate passed

Issues
0 New issues
0 Fixed issues
0 Accepted issues

Measures
0 Security Hotspots
0 Dependency risks
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube

[david-cho-lerat-sonarsource]

Nice 👍