va-telephone: Allow non-US phone numbers (#1389)

* va-telephone: support non-US phone numbers * Refactoring static functions to use object destructuring * Fixing a typo
department-of-veterans-affairs · Nov 7, 2024 · e4c4a8e · e4c4a8e
1 parent 4857159
commit e4c4a8e
Show file tree

Hide file tree

Showing 5 changed files with 209 additions and 49 deletions.
diff --git a/packages/storybook/stories/va-telephone.stories.jsx b/packages/storybook/stories/va-telephone.stories.jsx
@@ -60,21 +60,21 @@ const Template = ({
   extension,
   'not-clickable': notClickable,
   international,
+  'country-code': countryCode,
   vanity,
   tty,
   sms,
   'message-aria-describedby': messageAriaDescribedBy,
 }) => {
   return (
     <div>
-      {messageAriaDescribedBy && (
-        <span>Main number to facility </span>
-      )}
+      {messageAriaDescribedBy && <span>Main number to facility </span>}
       <va-telephone
         contact={contact}
         extension={extension}
         not-clickable={notClickable}
         international={international}
+        country-code={countryCode}
         vanity={vanity}
         tty={tty}
         sms={sms}
@@ -89,6 +89,7 @@ const defaultArgs = {
   'extension': undefined,
   'not-clickable': false,
   'international': false,
+  'country-code': undefined,
   'tty': false,
   'sms': false,
   'vanity': undefined,
@@ -125,6 +126,13 @@ International.args = {
   international: true,
 };
 
+export const CountryCode = Template.bind(null);
+CountryCode.args = {
+  ...defaultArgs,
+  'contact': '(02) 8555 8888',
+  'country-code': '63',
+};
+
 export const TTY = Template.bind(null);
 TTY.args = {
   ...defaultArgs,

diff --git a/packages/web-components/src/components.d.ts b/packages/web-components/src/components.d.ts
@@ -1516,6 +1516,10 @@ export namespace Components {
           * Numeric string representing the contact number. Typical length is 3 or 10 digits - SMS short codes will be 5 or 6 digits.
          */
         "contact": string;
+        /**
+          * Prepends the country code to the given contact number. Do NOT include the '+'
+         */
+        "countryCode"?: string;
         /**
           * Optional numeric string phone number extension
          */
@@ -4746,6 +4750,10 @@ declare namespace LocalJSX {
           * Numeric string representing the contact number. Typical length is 3 or 10 digits - SMS short codes will be 5 or 6 digits.
          */
         "contact": string;
+        /**
+          * Prepends the country code to the given contact number. Do NOT include the '+'
+         */
+        "countryCode"?: string;
         /**
           * Optional numeric string phone number extension
          */

diff --git a/packages/web-components/src/components/va-telephone/test/va-telephone.e2e.ts b/packages/web-components/src/components/va-telephone/test/va-telephone.e2e.ts
@@ -42,9 +42,20 @@ describe('va-telephone', () => {
     await axeCheck(page);
   });
 
+  it('passes an axe check for a phone number with a country code', async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      '<va-telephone country-code="63" contact="(02) 8555 8888"></va-telephone>',
+    );
+
+    await axeCheck(page);
+  });
+
   it('ignores non-digits in the contact prop', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-telephone contact="(877) 955-1234"></va-telephone>');
+    await page.setContent(
+      '<va-telephone contact="(877) 955-1234"></va-telephone>',
+    );
 
     const link = await page.find('va-telephone >>> a');
     expect(link.getAttribute('href')).toEqual('tel:+18779551234');
@@ -118,6 +129,17 @@ describe('va-telephone', () => {
     expect(link.innerText).toEqual('877-955-1234, ext. 123');
   });
 
+  it('handles a phone number with a country code', async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      '<va-telephone country-code="63" contact="(02) 8555 8888"></va-telephone>',
+    );
+
+    const link = await page.find('va-telephone >>> a');
+    expect(link.getAttribute('href')).toEqual('tel:+630285558888');
+    expect(link.innerText).toEqual('+63 (02) 8555 8888');
+  });
+
   it('handles a 3 digit contact prop', async () => {
     const page = await newE2EPage();
     await page.setContent('<va-telephone contact="711"></va-telephone>');

diff --git a/packages/web-components/src/components/va-telephone/test/va-telephone.spec.tsx b/packages/web-components/src/components/va-telephone/test/va-telephone.spec.tsx
@@ -2,57 +2,131 @@ import { VaTelephone } from '../va-telephone';
 
 describe('formatPhoneNumber', () => {
   const contact = '8885551234';
+  const countryCode = '63';
+  const intlContact = '(02) 8555 8888';
   const N11 = '911';
   const extension = '123';
   const vanity = 'ABCD';
   it('formats a contact number with no extension', () => {
-    expect(VaTelephone.formatPhoneNumber(contact, null, null, null)).toBe('888-555-1234');
+    expect(
+      VaTelephone.formatPhoneNumber({
+        contact,
+      }),
+    ).toBe('888-555-1234');
   });
 
   it('formats a contact number with extension', () => {
-    expect(VaTelephone.formatPhoneNumber(contact, extension, null, null)).toBe(
-      '888-555-1234, ext. 123',
-    );
+    expect(
+      VaTelephone.formatPhoneNumber({
+        contact,
+        extension,
+      }),
+    ).toBe('888-555-1234, ext. 123');
   });
 
   it('formats a 3 digit contact number', () => {
-    expect(VaTelephone.formatPhoneNumber(N11, null, null, null)).toBe('911');
+    expect(
+      VaTelephone.formatPhoneNumber({
+        contact: N11,
+      }),
+    ).toBe('911');
   });
 
   it('does not use extension for 3 digit contact', () => {
-    expect(VaTelephone.formatPhoneNumber(N11, extension, null, null)).toBe('911');
+    expect(
+      VaTelephone.formatPhoneNumber({
+        contact: N11,
+        extension,
+      }),
+    ).toBe('911');
   });
 
   it('does not use international formatting for 3 digit contact', () => {
-    expect(VaTelephone.formatPhoneNumber(N11, extension, true, null)).toBe('911');
+    expect(
+      VaTelephone.formatPhoneNumber({
+        contact: N11,
+        extension,
+        international: true,
+      }),
+    ).toBe('911');
   });
 
   it('formats a contact number with vanity prop', () => {
-    expect(VaTelephone.formatPhoneNumber(contact, null, null, vanity)).toBe('888-555-ABCD (1234)');
+    expect(
+      VaTelephone.formatPhoneNumber({
+        contact,
+        vanity,
+      }),
+    ).toBe('888-555-ABCD (1234)');
   });
 
   it('formats a TTY number', () => {
-    expect(VaTelephone.formatPhoneNumber(N11, null, null, null, true)).toBe('TTY: 911');
+    expect(
+      VaTelephone.formatPhoneNumber({
+        contact: N11,
+        tty: true,
+      }),
+    ).toBe('TTY: 911');
+  });
+
+  it('formats a contact number with a country code', () => {
+    expect(
+      VaTelephone.formatPhoneNumber({
+        contact: intlContact,
+        countryCode,
+      }),
+    ).toBe('+63 (02) 8555 8888');
   });
 });
 
 describe('createHref', () => {
   const contact = '8885551234';
+  const countryCode = '63';
+  const intlContact = '(02) 8555 8888';
   const contactSms = '123456';
   const n11 = '911';
   const extension = '123';
+
   it('creates a tel link for a phone number', () => {
-    expect(VaTelephone.createHref(contact, null, null)).toBe('tel:+18885551234');
+    expect(
+      VaTelephone.createHref({
+        contact,
+      }),
+    ).toBe('tel:+18885551234');
   });
+
   it('creates a tel link for a phone number with extension', () => {
-    expect(VaTelephone.createHref(contact, extension, null)).toBe(
-      'tel:+18885551234,123',
-    );
+    expect(
+      VaTelephone.createHref({
+        contact,
+        extension,
+      }),
+    ).toBe('tel:+18885551234,123');
   });
+
+  it('creates a tel link for a phone number with a country code', () => {
+    expect(
+      VaTelephone.createHref({
+        contact: intlContact,
+        countryCode,
+      }),
+    ).toBe('tel:+630285558888');
+  });
+
   it('creates a tel link for an N11 number', () => {
-    expect(VaTelephone.createHref(n11, null, null)).toBe('tel:911');
+    expect(
+      VaTelephone.createHref({
+        contact: n11,
+      }),
+    ).toBe('tel:911');
   });
+
   it('creates an sms link for an SMS number', () => {
-    expect(VaTelephone.createHref(contactSms, null, true)).toBe('sms:123456');
+    expect(
+      VaTelephone.createHref({
+        contact: contactSms,
+        sms: true,
+      }),
+    ).toBe('sms:123456');
   });
 });