[V1 & 3 Components] Implement available components for Resources & Support Detail Page

[FranECross]

Description

The Design team is releasing a Typography update (sometime in March) which means that the PW team needs to upgrade any of our products where components aren't currently being using, but a V1 or V3 component is available.

If the updates aren't made prior to the Typography update, there's a chance that Veteran-facing issues may occur.

Example pages:

• How to use your Login.gov or ID.me account to access My HealtheVet)
• In-state tuition rates under the Veterans Choice Act
• Example page with alert

Elements that are not using components that should be

1. Link
   • We should be using the V1 component everywhere we can, including content inside accordions and other components
2. Telephone
   • The V1 component is not being used anywhere but should be, including inside accordions and other content

Possibly templated into all Resources & Support pages so may only need to be completed once

1. Radio buttons

   • There are rating radio buttons that should be using v3 component

2. Button

   • Submit button for the rating should use the v3 component

3. Telephone

   • Within this reused section, the V1 component should be added into the "Need more help?" section

4. Tags

   • There is a component for tags however ours are interactive and actually links so this might be a limitation and we might not be able to use this?
     DST component does not have functionality that we have built already.

Might be resolved with the Resources Landing page ticket but if not:

1. Breadcrumbs
   • Not using any component but should be using v3
2. Search input
   • We should be using the v3
3. Radio buttons
   • There might be some technical limitations here, I'm not sure but if possible we should be using v3 components

User story

AS A PO/PM for Public Websites products
I WANT to implement available components (V1 or V3) in features & products currently under Public Websites management where components aren't currently being used
SO THAT all PW products are in alignment with the current component version
AND Veterans and other users have a consistent experience throughout VA.gov tools and information

Engineering notes / background

Analytics considerations

Quality / testing notes

Acceptance criteria

• Telephone is using V1
• Radio buttons are using V3
• Buttons are using V3
• Search input is using V3
• other features display correctly
• verify/review the E2E tests
• check desktop and mobile
• a11y review

[chriskim2311]

Note for Tags: Component is only using a css class and no functionality. Current usage is more complex and I think we should keep our usage of the tags.

[FranECross]

@laflannery Please see Chris's note above. Anything we need to communicate to the Design team, or do in order to ensure these continue to work correctly after the typography update? Thanks in advance! cc @chriskim2311

[laflannery]

Ahh I see! I don't think anything should break so for the scope of this ticket keeping as is would be fine. However this does break material honesty (meaning these visually look like a button but programmatically it's a link). This is something I would ticket separately and ask @thejordanwood to see if she can provide a better suggestion for what we should be doing here. Maybe it's just a standard link, or maybe it's something else.

[thejordanwood]

@laflannery I think we can keep as is for now. I have a future ticket to audit the components we use in PW products and can make a recommendation then.

[chriskim2311]

@randimays @thejordanwood @laflannery @FranECross

Another question about implementation. The telephone DST component has specific ways of displaying phone numbers.
For the Need More Help section we currently display the phone number string from the CMS for telephone numbers.

Example from CMS:

The DST component can't take this field and display it properly. Question would be to update the CMS fields to use the correct formatting or also opt out of using this component in favor of our current implementation?

[laflannery]

@chriskim2311 Let me know if you disagree but I looked at the current FE code and we aren't using any inline styles or anything like that in this particular Vanity phone number so I believe the risk of this breaking with the DS typography updates should be very little or even none.

Assuming that's accurate, my opinion is that we leave this particular phone number as is for now. A CMS change of this nature is out of scope and we should ticket that separately.

[chriskim2311]

@laflannery Correct no inline styles. But the DST component cannot take any letters as part of the number being passed in so it will cause rendering issues. Formatting changes can be made at the component level but the phone number needs to be only numbers. I agree changing the CMS values would be a big lift and out of scope.

[laflannery]

Thanks @chriskim2311 Given that, let's update only those phone numbers where it's currently technically possible to do so.

I am going to make a separate ticket to consider any BE CMS changes. And I am also going to make a DST ticket because I have seen another vanity URL that doesn't follow the typical pattern and currently wouldn't be supported by the component anyway (888-GIBILL-1 (888-442-4551))

[randimays]

Noting here that the search input & radio buttons for Resources & Support were taken care of in this PR: department-of-veterans-affairs/vets-website#28236

[chriskim2311]

PR has been approved and will merge once CI pipeline completes

[jilladams]

@chriskim2311 @laflannery from what I can tell, from the remaining ACs:

• Breadcrumbs were punted to the now-delayed Facilities ticket to handle
• Tags aren't using a component still -- seems like we weren't able to get that done?
• I couldn't find any accordions within R&S to check for links inside them, but on https://www.va.gov/resources/choosing-between-urgent-and-emergency-care/ there are plenty of URLs on the page that come from Drupal content, and are not handled as components. I think that's to be expected. Could you confirm?
• Chris, could you check off the ACs you addressed re: tests / reviews/ etc?

If that all jives, this can probably close.

[chriskim2311]

@jilladams Sorry for not catching tags in this ticket. The current functionality would not be able to use the DST tag component.

And yep for the R&S accordions those links come from the CMS, can't use a component there.

Other than that all good ready to close!