VACMS-17280: benefit hub component upgrade

[chriskim2311]

Summary

Benefit hub landing template component upgrade v1 to v3

Related issue(s)

department-of-veterans-affairs/va.gov-cms#17280

Testing done

Tested new components locally
/health-care/

Screenshots

What areas of the site does it impact?

Benefit Hubs

Acceptance criteria

[chriskim2311]

@laflannery
Working on the telephone component upgrade on benefit hubs. Came across this where we are setting the title and the phone number. We have the same issue as before in the other PR where the component cannot take custom non-digit numbers from the CMS. We can make them va-links, or keep them a tags until DST accounts for custom strings.

@thejordanwood Also this would be the new look since the va-link cannot use the title like we did in the previous implementation. Thoughts on this if its okay to use the va-link?

Old

New

[laflannery]

@chriskim2311 totally my bad for not calling this out because when I did my investigation the first time you brought this up I knew this was used here too - so sorry!

But that being said, the discovery ticket I made to figure this all out will handle this eventually so at least that's covered for future.

For now, I'm not sure <va-link> is going to work because a couple don't seem to have an href that is formatted properly:

• The TTY number is tel:1+771. Having the + in the middle is going to be not ideal and I'm also questioning the 1, I feel like that might mess it up as well?
• The VETS number on the Health care page has tel:1-877-222-VETS(8387) the non-digit characters in the number I think are going to mess up using this properly

So with that - because we can't guarantee proper formatting for these numbers here, we may want to keep these as they are?

[chriskim2311]

@laflannery Thanks for the quick response! That makes sense to me, I think we should hold off then on changing the telephones until we have a more complete component.

[thejordanwood]

@chriskim2311 I agree with that approach!

[va-vfs-bot]

Icon found

Icons can be decorative, but sometimes they are used to convey meaning. If there are any semantics associated with an icon, those semantics should also be conveyed to a screen reader.

What you can do

Review the markup and see if the icon provides information that isn't represented textually, or wait for a VSP review.

[eselkin]

LGTM