Merge pull request #872 from gympass/feat/countries-input-phone

Feat: add countries props for input phone component

packages/doc/content/components/components/input/phone-web.mdx

@@ -1,12 +1,10 @@
-### Usage
-
 ```javascript state
 render(() => {
   const [value, setValue] = useState('');
 
   return (
     <Input.Phone
-      defaultCountry='br'
+      defaultCountry="br"
       label="Mobile number"
       value={value}
       onChange={(value = '') => {
@@ -18,7 +16,3 @@ render(() => {
   );
 });
 ```
-
-### Props
-
-<PropsTable component="Input" platform="web" />

packages/doc/content/components/components/input/phone.mdx

@@ -10,4 +10,32 @@ import PhoneWeb from './phone-web.mdx';
 
 Input.Phone let users enter and edit telephone numbers contextualized to their country.
 
+### Default
+
 <PhoneWeb />
+
+### With countries props for filtering countries
+
+```javascript state
+render(() => {
+  const [value, setValue] = useState('');
+  const countries = ['br', 'pt'];
+  return (
+    <Input.Phone
+      defaultCountry="br"
+      label="Mobile number"
+      value={value}
+      countries={countries}
+      onChange={(value = '') => {
+        const newValue = value.length > 0 ? `+${value}` : '';
+        setValue(newValue);
+      }}
+      helper={'This is an helper text'}
+    />
+  );
+});
+```
+
+### Props
+
+<PropsTable component="Input" platform="web" />

packages/yoga/src/Input/web/Phone.jsx

@@ -36,6 +36,7 @@ const Phone = React.forwardRef(
       label = '',
       placeholder = '+55 (11) 999999999',
       value = '',
+      countries = phoneBaseSettings.onlyCountries,
       onChange = noop,
       cleanable = true,
       ...rest
@@ -51,6 +52,11 @@ const Phone = React.forwardRef(
       }
     }, []);
 
+    const availableCountries = {
+      onlyCountries:
+        countries?.length > 0 ? countries : phoneBaseSettings.onlyCountries,
+    };
+
     return (
       <Input
         {...{
@@ -69,7 +75,7 @@ const Phone = React.forwardRef(
       >
         <S.Container error={error} disabled={disabled} full={full}>
           <BasePhoneInput
-            {...phoneBaseSettings}
+            {...availableCountries}
             ref={phoneRef => {
               inputRef.current = phoneRef?.numberInputRef;
             }}
@@ -115,6 +121,8 @@ Phone.propTypes = {
   onChange: func,
   /** placeholder to show when the input is cleared */
   placeholder: string,
+  /** countries for mask field and dropdown, make sure to use ISO 3166-1 alpha-2 lowercase */
+  countries: PropTypes.arrayOf(string),
 };
 
 export default Phone;

packages/yoga/src/Input/web/Phone.test.jsx

@@ -77,6 +77,31 @@ describe('<Input.Phone />', () => {
       });
     });
 
+    it(`Should only format and show countries numbers when props is given`, () => {
+      const USPhone = numbersFormats[1];
+
+      const { queryByDisplayValue } = render(
+        <ThemeProvider>
+          <Input.Phone countries={['br', 'pt']} value={USPhone.base} />
+        </ThemeProvider>,
+      );
+
+      expect(queryByDisplayValue(USPhone.expected)).not.toBeInTheDocument();
+    });
+
+    it(`Should return all countries validation if countries equals to empty array`, () => {
+      const USPhone = numbersFormats[1];
+
+      const { getAllByRole } = render(
+        <ThemeProvider>
+          <Input.Phone countries={[]} value={USPhone.base} />
+        </ThemeProvider>,
+      );
+
+      fireEvent.click(getAllByRole('button')[0]);
+      expect(getAllByRole('option').length).toBe(12);
+    });
+
     it('should prefix the phone number with newly selected country dial code', async () => {
       const { getByRole, getByText, getByDisplayValue } = render(
         <ThemeProvider>

packages/yoga/src/Menu/web/__snapshots__/Menu.test.jsx.snap

@@ -80,7 +80,6 @@ exports[`<Menu /> should match snapshot Menu with a onMouseHover props false 1`]
 
 <div>
   <button
-    aria-disabled="false"
     aria-expanded="false"
     aria-haspopup="menu"
     class="c0"
@@ -180,7 +179,6 @@ exports[`<Menu /> should match snapshot Menu with an align props end 1`] = `
 <div>
   <div>
     <button
-      aria-disabled="false"
       aria-expanded="false"
       aria-haspopup="menu"
       class="c0"
@@ -281,7 +279,6 @@ exports[`<Menu /> should match snapshot Menu with an align props start 1`] = `
 <div>
   <div>
     <button
-      aria-disabled="false"
       aria-expanded="false"
       aria-haspopup="menu"
       class="c0"
@@ -382,7 +379,6 @@ exports[`<Menu /> should match snapshot Menu.Item with active 1`] = `
 <div>
   <div>
     <button
-      aria-disabled="false"
       aria-expanded="false"
       aria-haspopup="menu"
       class="c0"
@@ -483,7 +479,6 @@ exports[`<Menu /> should match snapshot Menu.Item with disabled 1`] = `
 <div>
   <div>
     <button
-      aria-disabled="false"
       aria-expanded="false"
       aria-haspopup="menu"
       class="c0"
@@ -584,7 +579,6 @@ exports[`<Menu /> should match snapshot Menu.Item with disabled and icon 1`] = `
 <div>
   <div>
     <button
-      aria-disabled="false"
       aria-expanded="false"
       aria-haspopup="menu"
       class="c0"
@@ -685,7 +679,6 @@ exports[`<Menu /> should match snapshot Menu.Item with icon 1`] = `
 <div>
   <div>
     <button
-      aria-disabled="false"
       aria-expanded="false"
       aria-haspopup="menu"
       class="c0"
@@ -786,7 +779,6 @@ exports[`<Menu /> should match snapshot Menu.Item with link 1`] = `
 <div>
   <div>
     <button
-      aria-disabled="false"
       aria-expanded="false"
       aria-haspopup="menu"
       class="c0"
@@ -887,7 +879,6 @@ exports[`<Menu /> should match snapshot in default Menu 1`] = `
 <div>
   <div>
     <button
-      aria-disabled="false"
       aria-expanded="false"
       aria-haspopup="menu"
       class="c0"