VBA template: adopt V1 and V3 components where components are not used

[laflannery]

Description

The VBA needs the following updates to components:

Cleveland VA Regional Benefit Office (This is a tugboat)

Elements that are not using components that should be

Updated 3/20

Alert - Expandable
I believe the Operating status alert should work like Vet Center not VAMC? Right now it's like VAMC and linking to a 404 Operating Status page. I think it should be a Alert-expandable component and not link to a separate page.

1. Telephone
   • VA benefits hotline number should be updated to use the message-aria-describedby prop: https://design.va.gov/components/telephone#aria-described-by
   • Both phone numbers (Standard and TTY number) in the "Can't find services" block are updated to use the component
2. Spotlights
   • Per the comment from Amanda below , we will be updating the spotlights to use the card component.
   • Figma design with full annotation notes.

Future future state:

Engineering notes

We will adapt spotlights on other products to use the card component for spotlights as well. Anything we do here could be reusable, if we're thoughtful about implementation being reusable / extensible.

Acceptance Criteria

• Spotlights on use card component. Cases to handle:
  • National and local spotlights
  • any standard link in the CTA uses action link class
  • any email in the CTA is an email link (no component available)
  • any phone number in the CTA, if possible, use the telephone component. If Drupal updates block this / make it hard, add a comment and treat it as a standard link.
  • without CTA
  • Any link or phone number in the description will not use a component
• Alert-expandable component has been added
• Update and run existing test(s).
• If additional tests are needed, stub a ticket to note this for future work.
• Requires accessibility review

[laflannery]

@xiongjaneg I did a component review of VBA when I was reviewing Max's PR this morning. There are some updates we can do if we can fit them in with the current work I just don't know what epic to put this in

[xiongjaneg]

@laflannery How about #14933 (centralized content) for now? Or #14957 (regional subsections) is rolling over.

[laflannery]

@xiongjaneg I added the phone number update to #14957 because that made sense and that work is being done now. The other 2 (breadcrumbs and operating status seemed out of scope?) so I wonder if this ticket should just be either pulled in separately or we can work those in if/as they come up?

[xiongjaneg]

@laflannery I'll stub a ticket for those separately. > #17103 for your edits/comments.

[maxx1128]

I would estimate this ticket at a 3 since the larger number of components to update increases the scope and number of elements to check.

[mmiddaugh]

Is there anything remaining to be done in this issue @maxx1128 @eselkin ?

• On this page has no V3 version and is in the Icebox
• Telephone was added to Front End: Full VBA regional subsection content #14957 to be completed as part of that ticket
• Alert - Expandable was demoed by Max today

[aklausmeier]

We need to include any elements that should be using components but are not as it will become a staging blocker flag.

These should use the cards component. @thejordanwood is updating design to match design system card component.

[laflannery]

@mmiddaugh I reviewed the current state of VBA and confirmed that there were still a couple instances of the phone number that needed some tweaks. I have updated the ticket description with those specific instances as well as the new spotlight updates from Amanda

[aklausmeier]

updated ticket with a link to the finalized annotated Figma design

[laflannery]

Telephone moved to #16148

[eselkin]

Moving to cards is a 3. Moving to action links for some types of links and statements of type of email or phone links makes it a 5. Moving just to action links is a 3 still if not differentiating link types.

[jilladams]

Final answer: 3. Because: right now we're moving spotlights to a card component, and all CTAs will regular links.

In future future state: we will do Spotlight Drupal work on fields, and in FE will then split links into some action links, some not.

[jilladams]

@eselkin Laura found that the Service Locations also are not using the card component on VBA templates. That won't block SL launch, but: noting that it's now included in the ticket here to update anything possible on VBA to use components. Please update estimate, if it changes this from a 3.

[laflannery]

Note in reference to @jilladams's comment that we included Service locations to update to the Card component:

I have now removed this because with PW help Josh got to this sooner that we anticipated and mucking around with Service Locations a few days before we planned to launch seemed like a bad plan. So I pulled that out into it's own ticket. For more context/decision see slack thread

[davidmpickett]

@eselkin In order to Verify this on SL Tugboat, we'll need to rebase department-of-veterans-affairs/content-build#1912 and then rerelease content yes?

[laflannery]

We don't need to have this on the SL integration branch - we can just preview on staging or prod

[laflannery]

I previewed in Prod and there isn't any space between the spotlights when there are multiple

If it helps determine the spacing/classes needed, we have this on Vet Centers already with the proper spacing for when there are 1, 2, or 3 spotlights present:

• Example with 3
• Example with 2

[laflannery]

Confirmed on Prod preview: