Update telephone component to allow International phone numbers

[laflannery]

Bug Report

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

What happened

The current telephone component has an international prop which is slightly misleading because this can only be used for 10-digit, US numbers. If I have a local number for a location that is international (non-US) and therefore not 10-digits and has a different country code than +1, I am unable to use the component because:

• +1 is automatically added to the href (even without the international prop)
• with the international prop +1 is added to the visual display
• I am not able to specify the proper county code of the formatting of the non-10-digit number

You can see the issue on the Mental Health number on the Manila VA clinic. This is a local number and it should be +63 (02) 8550 3888.

What I expected to happen

In order to properly add an international number, I expect to:

• Be able to specify the country code (in this case +63)
• Be able to format the local number so it's clear

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 appropriate 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

While there are a few issues here, the most pressing issue is the incorrect country code and the +1 being automatically added to the href as this is stopping the number from being auto dialed

[caw310]

Hey team! Please add your planning poker estimate with Zenhub @Andrew565 @ataker @harshil1793 @it-harrison @jamigibbs @micahchiang @powellkerry @rmessina1010 @rsmithadhoc

[jamigibbs]

@caw310 Was this done already? #2673

[laflannery]

@jamigibbs and @caw310 I saw that but that looks like the Telephone pattern for the text input, not the telephone component, which was why I filed this. Apologies if I misunderstood but if this is the same, could you point me to any documentation on how to implement a non-US country code?

[caw310]

@laflannery Not sure what you were looking at but we did recently do work to accommodate international phone nubmers.
https://design.va.gov/components/telephone
https://design.va.gov/storybook/?path=/story/components-va-telephone--international

[laflannery]

Thanks @caw310 I had seen that particular prop, however, that's for a 10-digit phone number that is intended to be called outside the US, so it automatically adds a +1 to the number:

What we need is a true international number, a non-US number that has a different country code. In this case it's for the Manila VA Clinic and the number is +63 (02) 8550 3888. There currently isn't a way to accommodate a country code that isn't +1 in the component, or a number that isn't 10-digits, which is what this request is for. Let me know if that helps to clarify, thanks!