Step 4: Card component status state - Development

[caw310]

Description

The primary use case for the card in error state is when the user is viewing prefilled information (which is displayed in cards, per the "Help Users to... Know When Their Information is Prefilled" pattern) and some of their prefilled information is missing and required for the form.

Build a web component of [component name]. Be sure to add analytics if necessary, see guidance.

Details

• Design files (Figma)
• Product outline template
• Design decision log template
• Properties / architecture document templates
• Any related references or documentation
• Review Design System Engineering Best Practices document
• Experimental Design - Card component error state

Tasks

Planning & Design

• Review component requirements and confirm details with the design team
• Ensure Figma designs are complete and accessible (attach links)
• Identify dependencies and technical constraints

Development

• Set up the component's folder structure and boilerplate code follow Creating a new component documentation
• Implement the component's core functionality
• Add styles (CSS/SCSS) to match the design system standards and import USWDS styles where possible
• Add accessibility features (ARIA roles, keyboard navigation, etc.)
• Write unit tests for core functionality
• Write integration tests for broader compatibility
• Add the component to the design system library (e.g., Storybook)

Review & Testing

• Conduct a code review with peers
• Conduct a design review with the design team
• Perform cross-browser and cross-device testing
• Perform accessibility testing (using tools like Axe, NVDA, or VoiceOver)

[caw310]

Dev work will start in sprint 11 but due to design changes, it will primarily be worked on in sprint 12.

[ediiotero]

Finishing unit test and manual testing to submit PR today.

[ediiotero]

PR: department-of-veterans-affairs/component-library#1862