Skip to content

feat: add hover-preview card on HealthMeter rows/cards (Closes #845) - #907

Closed
waterWang wants to merge 1 commit into
Creditra:mainfrom
waterWang:feat/hover-preview-healthmeter
Closed

waterWang wants to merge 1 commit into
Creditra:mainfrom
waterWang:feat/hover-preview-healthmeter

Conversation

@waterWang

Copy link
Copy Markdown

Summary

Adds a hover-triggered preview card (PreviewCard) to the HealthFactorChart on each credit line card, showing a detailed health factor breakdown.

Changes

  • CreditLines.tsx: Imported PreviewCard, healthBand, and healthBandLabel. Wrapped the HealthFactorChart in each CreditLineCard with a PreviewCard that shows:
    • Health factor value (color-coded: safe/green, caution/yellow, risk/red)
    • Band badge (Safe / Caution / At risk)
    • Credit line metrics: Limit, Utilized, Available
    • HF formula: HF = Limit ÷ Utilized = value
  • Added preview-card-trigger class to the CreditLineCard root div for hover/focus activation
  • CreditLines.css: Added styles for the health factor preview card (.hf-preview-card BEM classes)
  • CreditLines.test.tsx: Added test verifying the preview card renders on each credit line with correct content

Accessibility

  • Preview region has role="region" and aria-label for screen readers
  • WCAG 2.1 AA compliant via existing PreviewCard component
  • Tabular-nums on metric values for numeric alignment

Closes #845

…ra#845)

- Wrap HealthFactorChart with PreviewCard in CreditLineCard
- Show detailed health factor breakdown (value, band, limit, utilized, available)
- Add color-coded health factor value and band badge
- Add CSS for the health factor preview card
- Add test verifying preview card renders with correct content

The PreviewCard shows a hover-triggered preview with health factor details
including the current value, band (safe/caution/risk), limit, utilized,
and available amounts, plus the HF formula.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add hover-preview card on HealthMeter rows/cards [b#032]

2 participants