[Web components] [Facility locator] Convert links to va-link where possible or update link text

[randimays]

Description

The facility locator app (in vets-website) has many links that can be converted to web components (va-link). For those links that cannot be converted (due to requiring new tab behavior), "(opens in a new tab)" should be added to the link text.

Acceptance Criteria:

Converted to va-link:

• VABenefitsCall.jsx#L9
  • https://va.gov/find-locations/facility/vba_344p
• OperationStatus.jsx#L13
  • Can't find an NCA page with a status not NORMAL
• OperationStatus.jsx#L19
  • https://www.va.gov/find-locations/facility/vba_306j
• Covid19Result.jsx#L45
  • We don't return COVID-19 results right now because we aren't using the data from the KISS JSON
• VaFacilityResult.jsx#L37
  • Result list
• LocationDirectionsLink.jsx#L18
  • See above result list (any directions link on the results)
• LocationInfoBlock.jsx#L34
  • This is the facility name link in a result list as above (sometimes it is a Link and sometimes an anchor tag). The reason it is a Link sometimes is because facility details pages use react-router to route to the pages.
• FacilityDetail.jsx#L74
  • https://va.gov/find-locations/facility/vba_344
• ProviderDetail.jsx#L83
  • not used

Added "(opens in a new tab)" to the link text, and keep the <a> tag:

• ProviderDetail.jsx#L75
  • not used
• ProviderDetail.jsx#L132
  • not used
• UrgentCareAlert.jsx#L19
  • removed

    Considerations:

• Links opening in a new tab
  • va-link does not support opening links in a new tab
  • If the link should open in a new tab per DST guidance (will otherwise result in loss of user data / progress), "(opens in a new tab)" should be added to the link text
• va-link analytics send the current URL, destination URL and the link text. If converting the link to a va-link makes the custom GA event duplicative, remove the custom GA event

Quality / testing notes

• [ ] Relevant unit/e2e tests have been updated

[randimays]

@FranECross @Agile6MSkinner I noticed we had a bunch of links in facility locator that could be converted to va-link (or otherwise need an update). I'm not super familiar with the facility locator yet, so I don't have example URLs / "how to get there" instructions, so this ticket will need some refinement (in addition to user story / ACs). I estimated it at a 2 though because the changes are simple.

[eselkin]

In this result list

The result list titles (titles of the facilities) appear as h3 even though these classes are added vads-u-font-size--h5... Right now, if you take that class off, it doesn't do anything (maybe because of the importance of some other sizes somewhere)

If you change the anchor tag (<a>) to a va-link, the font does shrink to the h5 size. Should we be showing them as h5-sized linked h3s?

@laflannery @thejordanwood

[laflannery]

@thejordanwood As I'm sure you know, I would very much prefer not doing this - I would rather just have H3 tags with default styles, but let me know if you disagree

[thejordanwood]

@eselkin @laflannery I agree with Laura, let's use H3 tags with the default styles.

[eselkin]

Slightly related, and just visual @thejordanwood The line height of a wrapped <h3><a>text</a></h3> is 1.5 (keeps the a tag line height) but the wrapped <h3><va-link text="text"></va-link><h3> is 1.3 (keeps the h3 line height)

Should I make the lineheight 4 (1.5) in-line with the a tag (there's no 1.3 line height only 1.35)?

Below: top link is 1.3, bottom is 1.5

[laflannery]

@eselkin to clarify, you are asking if you should add a custom line-height declaration on the new <va-link> component to match the current line height being used on the Facility names in the search results?

If that is correct, we should not - we want to avoid overwriting the DS styles unless there are drastic differences or very clear reasons why we need different styles. In this case the difference in line-height (1.5 vs. 1.3) is very slight and we should keep the default DS style

[thejordanwood]

@eselkin @laflannery I agree, we should use the default DS style. Sounds like that's 1.5 in this case?

[eselkin]

@laflannery @thejordanwood thanks, that's what I expected

[jilladams]

Deployed and ready to verify.

[laflannery]

I have verified these on prod. However I am just noting in case someone else sees this, that there is a currently regression from DST regarding when <va-link> wrapped in a <hX> tag so the style is not correct. This should hopefully be resolved today or tomorrow: