Certificate Expiry Status Indicator
Component Detail
Description
Reusable widget that visually communicates a peer mentor's certificate status across multiple surfaces such as coordinator contact lists, mentor detail screens, and notification banners. Uses color-coded badges aligned with the design token system to indicate active, expiring, or expired states.
expiry-status-indicator
Summaries
The Certificate Expiry Status Indicator is a shared visual component that delivers consistent, at-a-glance certification status across every surface where peer mentor profiles appear — coordinator contact lists, mentor detail screens, and notification banners. By standardizing how expiry status is communicated, coordinators can immediately assess mentor availability without navigating into individual profiles, accelerating decision-making and reducing the risk of assigning sessions to mentors with lapsed certifications. The built-in WCAG 2.2 AA accessibility compliance ensures the application meets recognized accessibility standards across all three status states, reducing legal exposure and ensuring the experience is usable for coordinators across all demographics and accessibility needs.
As a shared component with no external service dependencies, the Certificate Expiry Status Indicator is an ideal early-sprint deliverable and directly unblocks two downstream components — expiry-notification-banner and notification-detail-view — making its timely completion critical to the overall notification feature delivery timeline. Its low complexity makes it low-risk to develop, but design review of the color token assignments for active, expiring-soon, and expired states must be completed before development begins to prevent rework. Acceptance criteria must include WCAG 2.2 AA contrast testing across all three status states in both compact and full display modes. Marking this as shared means its interface is effectively a public contract: any breaking interface changes will require coordinated updates in all consuming components.
A reusable, stateless widget exposing `renderStatusBadge(status: CertificateStatus, daysRemaining: int?)`, `renderCompact()`, and `renderFull()` interfaces for embedding across multiple surfaces. Color resolution is handled via `getStatusColor(status: CertificateStatus) -> Color` and label text via `getStatusLabel(status: CertificateStatus) -> String`, both driven exclusively by the design token system for cross-surface consistency. Has zero external service or component dependencies — all rendering logic operates on passed-in certificate model data, making it trivially testable in isolation. Compact mode is optimized for list row rendering with a minimal vertical footprint; full mode renders the status label, days remaining, and expiry date as structured text.
All color combinations must satisfy WCAG 2.2 AA contrast ratios as verified in the design token definitions. Marked as shared: consumed by expiry-notification-banner and notification-detail-view. Any interface changes require coordinated updates in all consumers. Mobile execution context only.
Responsibilities
- Render color-coded badge for active, expiring-soon, and expired states
- Display days remaining or expiry date as subtitle
- Support WCAG 2.2 AA contrast requirements for all status colors
- Adapt layout for compact (list) and full (detail) display modes
Interfaces
renderStatusBadge(status: CertificateStatus, daysRemaining: int?)
getStatusColor(status: CertificateStatus) -> Color
getStatusLabel(status: CertificateStatus) -> String
renderCompact()
renderFull()
Relationships
Dependents (2)
Components that depend on this component