Prevent multiple <a> tags in progressively enhanced usa-link

[bjmfactory]

Summary

Prevented multiple tags in progressively enhanced usa-link Fixed an issue in which there are nested tags in the usa-link when a childLink is provided.

Problem statement

We want only one tag in the output HTML when we use the progressively enhanced usa-link.

Desired state:

<usa-link>
  #shadow-root (open)
  <!--?lit$464523568$-->
  <a href="http://designsystem.digital.gov" class="usa-link"><!--?lit$019672011$-->It's dangerous to go alone. Here, take this.</a>
  <!--?-->
</usa-link>

The actual state

<usa-link>
  #shadow-root (open)
  <a href="http://designsystem.digital.gov"><!--?lit$464523568$-->It's dangerous to go alone. Here, take this.</a>
  <!---->
  <a class="usa-link" href="http://designsystem.digital.gov/"><slot></slot></a>
</usa-link>

Consequences of remaining in the current state
It is invalid HTML.

Solution

I removed the wrapper tag and instead added the usa-link class to the existing link that is passed as a child. It's quite possible I did not follow Web Component best practices or your company best practices, or that there are other things I'm not considering, so there are lots of limitations :)

Testing and review

I added a test that asserts that there is only one tag.

[bjmfactory]

Without this line, I was observing the slot template is always rendered and the child template is never rendered.

[bjmfactory]

When I ran npm run dev I got an error that said to remove node_modules and package-lock.json and re-run npm install. I'm not sure what the root cause of that is, but there was some error about Rollup I think.

[bjmfactory]

I'm happy to remove this change if you like the other fix but don't want to touch package-lock.json at the moment.

[bjmfactory]

This test successfully captures the current bug on develop. If you add it on develop it should fail with a 2 does not equal 1