<va-telephone> component does not have enough flexibility to support various vanity phone numbers

[laflannery]

Bug Report

• I’ve searched for any related issues and avoided creating a duplicate issue.

What happened

When updating the vanity numbers in our products to use the <va-telephone> with the vanity prop we ran into a case that we use often that is not supported by the current component: 888-GIBILL-1 (888-442-4551)

This is used on the Education Benefits Hub landing page as well as at the bottom of multiple resources and support detail pages, possibly other places as well.

Currently the component only allows the vanity piece of the phone number to be the last 4 digits of the phone number, this pattern will not work for this phone number.

What I expected to happen

I would expect to be able to customize the vanity piece of the phone number in the component in cases where it is not the last for digits of the number.

Reproducing

• Formation version:
• Device: (e.g. iPhone 8, Macbook)
• Browser: (e.g. Firefox, IE 11)

Steps to reproduce:

Urgency

How urgent is this request? Please select the approriate option below and/or provide details

• This bug is blocking work currently in progress
• This bug is affecting work currently in progress but we have a workaround
• This bug is blocking work planned within the next few sprints
• This bug is not blocking any work
• Other

Details