Merge pull request #3422 from department-of-veterans-affairs/3316-Add…

…-international-phone-number-guidance-to-phone-number-pattern

3316 Updated guidance for international phone numbers

src/_data/content/patterns/ask-users-for/phone-numbers.csv

@@ -1,3 +1,4 @@
 section,subsection,pattern-or-component,label,label-text,hint-text,sub-questions,error-scenario-1,error-message-1,error-scenario-2,error-message-2,error-scenario-3,error-message-3,label-variations,notes-on-updates
 /patterns,/ask-users-for,/phone-numbers,phone-number,Phone number,Enter a 10-digit phone number,,No entry,Enter a 10-digit phone number (with or without dashes),,,,,,"Removing ""please"" from error message. And removing ""Home"" before phone number to avoid any confusion that this needs to be a landline."
 /patterns,/ask-users-for,/phone-numbers,mobile-phone-number,Mobile phone number,Enter a 10-digit phone number that can send and receive SMS (text messages),,,,,,,,,
+/patterns,/ask-users-for,/phone-numbers,international-phone-number,International phone number,Enter up to a 15-digit phone number,,No entry,Enter up to a 15-digit phone number (with or without dashes),,,,,,

src/_patterns/ask-users-for/phone-numbers.md

@@ -4,7 +4,7 @@ permalink: /patterns/ask-users-for/phone-numbers
 sub-section: ask-users-for
 title: Phone numbers
 intro-text: Follow this pattern when you want to ask for a phone number.
-code-link: https://github.com/department-of-veterans-affairs/vets-website/blob/main/src/platform/forms-system/src/js/web-component-patterns/phonePattern.jsx
+code-link: https://github.com/department-of-veterans-affairs/vets-website/blob/main/src/platform/forms-system/src/js/web-component-patterns/phonePatterns.jsx
 example-link: https://staging.va.gov/mock-form-patterns/phone-and-email-address
 figma-link: https://www.figma.com/file/4A3O3mVx4xDAKfHE7fPF1U/VADS-Templates-(Patterns-%26-Forms)?type=design&node-id=2988%3A9602&mode=design&t=Y0LWxs33fRITMh6x-1
 github-title: pattern-phone-numbers
@@ -26,11 +26,16 @@ anchors:
 
 ## Examples
 
+### U.S. phone numbers
+
 {% include component-example.html alt="Shows the form fields used to obtain home phone number and mobile phone number." file="/images/patterns/ask-users-for/phone-numbers/phone-numbers.png" caption="Example of asking for a home phone number or mobile phone number." class="x2" %}
 
 <a class="vads-c-action-link--blue" href="{{ page.example-link }}">
   View an example
 </a>
+
+### International phone numbers
+{% include component-example.html alt="Shows the form fields used to obtain a international phone number." file="/images/patterns/ask-users-for/phone-numbers/international-phone-number.png" caption="Example of asking for an international phone number." class="x2" %}
 
 ## How to design and build
 
@@ -39,9 +44,16 @@ anchors:
 ### How this pattern works
 
 * **If possible, tell users why you want their phone number.** An example message is: *Please enter your contact information so we can get in touch with you if we have questions about your application.* This message can be at the top of the page if asking for any other contact information.
-* **Validate phone numbers.** Users must provide at least a 10 digit phone number with or without dashes. Example of acceptable formats:
+* **Validate phone numbers.** Users must provide at least a 10 digit phone number with or without dashes for U.S. phone numbers and up to a 15-digit phone number for international phone numbers. 
+
+Example of acceptable formats for U.S. phone numbers:
   * 703-123-4567
   * 7031234567
+
+Example of acceptable formats for international phone numbers:
+  * +52 123 456-7890
+  * 637031234567
+
 * **If a user chooses a home or mobile phone number as their method of contact, phone numbers are required fields.** If a user chooses email or mail as their preferred method then a phone number field won’t be validated. (Note: Method of contact field is form dependent)
 * **“Mobile phone number” is a required field if the user checks (I would like to receive text messages from VA about my [  ] benefits).** An example of this is on the [VA Form 22-10203 (Application for Edith Nourse Rogers STEM Scholarship)](https://www.va.gov/education/other-va-education-benefits/stem-scholarship/apply-for-scholarship-form-22-10203/introduction)
 * **Pair with email address.** Collection of phone numbers is paired with [email address]({{ site.baseurl }}/patterns/ask-users-for/email-address). The two patterns typically appear on the same step/page.
@@ -65,4 +77,4 @@ Use the [VADS templates (Patterns & Forms) for Names in Figma]({{ page.figma-lin
 
 ### Labels, error messages, and hint text
 
-{% include _field-labels.html labels=site.data.content.patterns.ask-users-for.phone-numbers %}
+{% include _field-labels.html labels=site.data.content.patterns.ask-users-for.phone-numbers %}