va-card-status: add new component by ediiotero · Pull Request #1862 · department-of-veterans-affairs/component-library

ediiotero · 2025-11-13T17:15:59Z

Chromatic

https://4519-Card-status-comp--65a6e2ed2314f7b8f98609d8.chromatic.com

Description

Adding a new va-card-status component. It uses va-card as a child and includes props for heading, footer links, and tag status.

Screenshots

Testing and review

Running unit test and manual testing within the story.

Approvals

See the QA Checklists section below for suggested approvals. Use your best judgment if additional reviews are needed. When in doubt, request a review.

Approval groups

Add approval groups to the PR as needed:

Engineering: platform-design-system-fe
Accessibility: platform-design-system-a11y
Design: platform-design-system-designer

QA checklists

Use the QA checklists below as guides, not rules. Not all checklists will apply to every PR but there could be some overlap.

In all scenarios, changes should be fully tested by the author and verified by the reviewer(s); functionality, responsiveness, etc.

✨ New Component Added

🌱 New Component Variation Added

The PR has the minor label
The variation matches its Figma design.
Any new properties, custom events, or utility functions have e2e and/or unit tests
A new story has been added to the component's existing Storybook page
Any Chromatic UI snapshot changes have been accepted by a design reviewer
Tested in vets-website using Verdaccio
Engineering has approved the PR
Design has approved the PR

🐞 Component Fix

The PR has the patch label
Any new properties, custom events, or utility functions have e2e and/or unit tests
Any markup changes are evaluated for impact on vets-website.
- Will any vets-website tests fail from the change?
Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
Engineering has approved the PR

♿️ Component Fix - Accessibility

The PR has the patch label
Any new properties, custom events, or utility functions have e2e and/or unit tests
Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
Engineering has approved the PR
Accessibility has approved the PR

🚨 Component Fix - Breaking API Change

The PR has the major label
vets-website and content-build have been evaluated to determine the impact of the breaking change
Any new properties, custom events, or utility functions have e2e and/or unit tests
Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
Tested in vets-website using Verdaccio
Engineering has approved the PR

🔧 Component Update - Non-Breaking API Change

The PR has the minor label
Any new properties, custom events, or utility functions have e2e and/or unit tests
Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
Engineering has approved the PR

📖 Storybook Update

The PR has the ignore-for-release label
Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
Engineering has approved the PR

🎨 CSS-Library Update

The PR has the css-library label
vets-website and content-build have been checked to determine the impact of any breaking changes
Engineering has approved the PR

Signed-off-by: ediiotero <e.otero81@gmail.com>

jamigibbs

@edmondpewing Is this accessibility and architecture outline still accurate for the development of this? If not, could you note what has changed? That will help us with our reviews.

It would also be helpful to link to the Figma designs.

re-reviewing

jamigibbs

Thanks for working on this Eddie! I've left a few comments/questions but mostly I think we just need to make sure we're developing for the requirements in the accessibility review doc linked above. That might mean creating a separate component using va-card as a child but I'll leave that up to you to determine.

Signed-off-by: ediiotero <e.otero81@gmail.com>

jeana-adhoc · 2025-12-03T13:00:14Z

+              <footer>
+                {linkHref && linkText ? (
+                  <va-link
+                    aria-describedby={ariaDescribedbyIds}


this should use va-link-action with type="secondary"

Thanks. I missed that. Its changed now.

jamigibbs

Hi @ediiotero! Do you mind updating the description of this PR so that it more accurately reflects the changes made since switching from a va-card update to a new va-card-status component?

Also can you confirm that we want all of those different Storybook examples instead of just error? I was thinking that this component would only have an error state/status. Maybe in the future there would be other statuses but I didn't think it would yet. I could have missed some detail somewhere though.

I will hold off on doing a code review until those things are clarified.

Error Status in Storybook

amyleadem

Hi @ediiotero, thanks for all your work on this. I did a preliminary review and noticed that there were some opportunities to simplify this implementation by removing some slot support. Can you take a look at the comments and let me know if you have any questions or concerns?

I can come back for a deeper review after these updates.

ediiotero · 2025-12-19T16:35:02Z

All requested changes complete. I'm including this link to the Figma file I used while working on this. It might be helpful in understanding some of the decisions I made. As an FYI the Figma is outdated now: Card-Status Figma

amyleadem

@ediiotero I have some more testing to do, but wanted to add a few more comments with some issues I found. Let me know if you have questions!

Signed-off-by: ediiotero <e.otero81@gmail.com>

amyleadem

LGTM!

I reviewed the component for accessibility by checking the component in the following environments:

MacOS/VoiceOver/Safari
MacOS/VoiceOverChrome
iOS/VoiceOver/Safari
Windows/NVDA/Chrome
Windows/JAWS/Chrome
Android/Talkback
- Note: On my Pixel device, I did hear some unexpected announcements when swiping through the content, but I think it was an anomaly. It would occasionally announce "start 17px color black background color white font family source sans pro" when swiping to the telphone number. However, I did not see this behavior before today, there is nothing in the code that would indicate that this should be read out, and we were not able to replicate this behavior in other devices/emulators. Additionally, the issue was happening in other stable components on the failing device. All of this points to it being a strange glitch, but interested to learn if other discover this. Update: This was related to a recent settings update in Talkback. The style announcements stopped once I updated the text styling announcement settings (Settings > Accessibility > TalkBack > Settings > Verbosity > Speak text formatting). This was not caused by the component.

I completed the tests in the component's accessibility checklist, which included testing for zoom, keyboard, font resizing, forced colors/high contrast mode, and visual design cues like color contrast.

Before merge, let's get another engineering review and design/content review (@jeana-adhoc ?).

powellkerry

LGTM

RyanMunsch

LGTM. Nice work, @ediiotero!

jeana-adhoc · 2026-01-23T15:47:00Z

+/**
+ * @componentName Card Status
+ * @maturityCategory use
+ * @maturityLevel deployed


Is this the right maturity level we should be using? For new components, should we be using "Available". After this is used on production in 3x products looks like we can promote it to deployed

I'm not sure. I was following the Card component @amyleadem Do you know what the maturityLevel should be?

@ediiotero New components should be "Use with caution: Candidate". For example, va-button-icon:

https://github.com/department-of-veterans-affairs/component-library/blob/main/packages/web-components/src/components/va-button-icon/va-button-icon.tsx#L16-L17

@jamigibbs Thanks

jeana-adhoc

LGTM! Thanks for all of your work on this.

ediiotero added 3 commits September 30, 2025 10:37

setting up card status comp

4f6f1af

Merge branch 'main' into 4519-Card-status-comp

6574834

Signed-off-by: ediiotero <e.otero81@gmail.com>

remove card-status comp and move changes into va-card comp

b35f23d

ediiotero requested a review from a team as a code owner November 13, 2025 17:16

ediiotero added the minor For a minor Semantic Version change label Nov 13, 2025

ediiotero requested review from a team November 13, 2025 17:16

ediiotero mentioned this pull request Nov 13, 2025

Step 4: Card component status state - Development department-of-veterans-affairs/vets-design-system-documentation#4519

Closed

14 tasks

jamigibbs previously requested changes Nov 13, 2025

View reviewed changes

jamigibbs requested review from a team November 13, 2025 17:43

jamigibbs reviewed Nov 13, 2025

View reviewed changes

ediiotero added 3 commits December 1, 2025 09:39

reset va-card and added new va-card-status

6ba20da

Merge branch 'main' into 4519-Card-status-comp

385bf4d

Signed-off-by: ediiotero <e.otero81@gmail.com>

adding tests

95ca813

jeana-adhoc reviewed Dec 2, 2025

View reviewed changes

Comment thread packages/web-components/src/components/va-card-status/va-card-status.tsx

jeana-adhoc reviewed Dec 3, 2025

View reviewed changes

update heading style and added va-link-action, updated tests

1b2bd5c

amyleadem linked an issue Dec 11, 2025 that may be closed by this pull request

Step 4: Card component status state - Development department-of-veterans-affairs/vets-design-system-documentation#4519

Closed

14 tasks

Merge branch 'main' into 4519-Card-status-comp

78e86ad

jamigibbs changed the title ~~VA-Card status variant~~ va-card-status: add new component Dec 16, 2025

jamigibbs reviewed Dec 16, 2025

View reviewed changes

amyleadem suggested changes Dec 17, 2025

View reviewed changes

ediiotero added 3 commits December 18, 2025 15:21

Removed slots, updated stories and tests

c4eec97

Update for 54.4.0 release

f6d01ad

removing a story example

e80ba7b

ediiotero requested review from jamigibbs and jeana-adhoc December 19, 2025 16:35

amyleadem suggested changes Jan 14, 2026

View reviewed changes

ediiotero and others added 3 commits January 15, 2026 11:21

Merge branch 'main' into 4519-Card-status-comp

927d37e

merge with main

a89e13d

fix conflict merge with main

56068db

amyleadem mentioned this pull request Jan 16, 2026

Step 5: Card component status state - Accessibility review department-of-veterans-affairs/vets-design-system-documentation#4522

Closed

9 tasks

ediiotero added 3 commits January 16, 2026 10:54

Change heading to header, and updated tests

266b4b6

Merge branch 'main' into 4519-Card-status-comp

d4dacc8

Signed-off-by: ediiotero <e.otero81@gmail.com>

merge with main updates to index file

c8332e4

ediiotero requested a review from amyleadem January 16, 2026 16:59

ediiotero added 2 commits January 16, 2026 18:33

fix header moving when level is changed

7f4e6f8

update string for messageAriaDescribedby

152c6fe

jeana-adhoc suggested changes Jan 20, 2026

View reviewed changes

Comment thread packages/storybook/stories/va-card-status.stories.tsx Outdated

Comment thread packages/web-components/src/components/va-card-status/va-card-status.tsx

amyleadem reviewed Jan 20, 2026

View reviewed changes

Comment thread packages/web-components/src/components/va-card-status/va-card-status.tsx Outdated

amyleadem reviewed Jan 20, 2026

View reviewed changes

Comment thread packages/web-components/src/components/va-card-status/va-card-status.tsx

add sr-only text to card header and update error message

f4dddcc

ediiotero requested review from amyleadem and jeana-adhoc January 21, 2026 20:13

amyleadem approved these changes Jan 22, 2026

View reviewed changes

powellkerry approved these changes Jan 22, 2026

View reviewed changes

RyanMunsch approved these changes Jan 22, 2026

View reviewed changes

jeana-adhoc suggested changes Jan 23, 2026

View reviewed changes

update maturityCategory and maturityLevel

a4b505c

ediiotero requested a review from jeana-adhoc January 27, 2026 14:21

jeana-adhoc approved these changes Jan 27, 2026

View reviewed changes

ediiotero and others added 2 commits January 27, 2026 16:14

Merge branch 'main' into 4519-Card-status-comp

c725695

Merge branch 'main' into 4519-Card-status-comp

0e96933

ediiotero merged commit 48b2815 into main Jan 28, 2026
8 checks passed

ediiotero deleted the 4519-Card-status-comp branch January 28, 2026 17:24

amyleadem mentioned this pull request Feb 2, 2026

54.6.0 release #1966

Merged

44 tasks

jamigibbs mentioned this pull request Feb 16, 2026

Update package versions for v55.0.0 release #1994

Closed

44 tasks

Conversation

ediiotero commented Nov 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Chromatic

Description

Related tickets and links

Screenshots

Testing and review

Approvals

QA checklists

Uh oh!

jamigibbs left a comment

Choose a reason for hiding this comment

Uh oh!

jamigibbs left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jeana-adhoc Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

ediiotero Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

jamigibbs left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

amyleadem left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ediiotero commented Dec 19, 2025

Uh oh!

amyleadem left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

amyleadem left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

powellkerry left a comment

Choose a reason for hiding this comment

Uh oh!

RyanMunsch left a comment

Choose a reason for hiding this comment

Uh oh!

jeana-adhoc Jan 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ediiotero Jan 23, 2026

Choose a reason for hiding this comment

Uh oh!

ediiotero commented Nov 13, 2025 •

edited

Loading

jamigibbs left a comment •

edited

Loading

amyleadem left a comment •

edited

Loading

amyleadem left a comment •

edited

Loading

jeana-adhoc Jan 23, 2026 •

edited

Loading