International Phone Number Input

[cengagenathan]

As we look for greater Global adoption of React Magma, it would be beneficial to build an International phone number input that validates format and is accessible for multiple regions. See below.

Discussed in https://github.com/cengage/react-magma/discussions/265

^{Originally posted by **itsreallynotadam** May 12, 2021} Can we get something like this implemented for i13n? [https://intl-tel-input.com/]

[orion-cengage]

Purpose: Create configurable phone inputs that better help users with formatting, masking, and internationalization.

inVision: https://cengage.invisionapp.com/share/FW11Y91D8TQZ

Acceptance Criteria:

There should probably be two separate components instead of one that tries to do it all. This could be a simple version and an advanced or international version.

• Simple

  -- The input can be configured to enforce a specified format --- Example: US format would appear as (###) ###–#### -- The optional placeholder displays an example of the properly formatted phone number

-- Using masking, the proper format is automatically applied as they type the numbers

• Advanced / International

  -- A more advanced input is also available with enhancements for internationalization -- Based on the 3rd party input here: https://intl-tel-input.com/ --- Automatically select the user's current country using an IP lookup --- Automatically set the input placeholder to an example number for the selected country --- Navigate the country dropdown by typing a country's name, or using up/down keys --- Handle phone number extensions --- The user types their national number and the input gives you the full standardized international number --- Full validation, including specific error types

[silvalaura]

@orion-cengage Can you update this ticket to only have requirements related to International numbers? We'll address input masking in https://github.com/cengage/react-magma/issues/1119