From c5c1ec26f691b5a40e245fcc3d5566759bfe86b2 Mon Sep 17 00:00:00 2001
From: Mehdi Raash <leasksin@gmail.com>
Date: Mon, 27 Sep 2021 21:28:07 -0400
Subject: [PATCH 1/2] feat: adding phone formating to the <Input />

---
 src/components/Input/Input.stories.tsx |  8 ++++++++
 src/components/Input/Input.tsx         | 12 ++++++++++--
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/Input/Input.stories.tsx b/src/components/Input/Input.stories.tsx
index cd23b3b..17b373e 100644
--- a/src/components/Input/Input.stories.tsx
+++ b/src/components/Input/Input.stories.tsx
@@ -45,6 +45,14 @@ Amount.args = {
   label: 'Texbox with amount formatting',
 };
 
+export const Phone = Template.bind({});
+Phone.args = {
+  variant: 'amount',
+  type: 'phone',
+  countryCode: '+1',
+  label: 'Texbox with phone number formatting',
+};
+
 export const Error = Template.bind({});
 Error.args = {
   variant: 'basic',
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index a8d22e3..4332c91 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -16,7 +16,7 @@ export type InputProps = {
   margin?: string;
   id?: string;
   name?: string;
-  type?: 'text' | 'password' | 'email';
+  type?: 'text' | 'password' | 'email' | 'phone';
   disabled?: boolean;
   label?: string;
   placeholder?: string;
@@ -26,6 +26,7 @@ export type InputProps = {
   icon?: ComponentType;
   unit?: string;
   error?: string;
+  countryCode?: string;
   isDivisible?: boolean;
   inputRef?: any;
 };
@@ -80,6 +81,7 @@ export const Input: FC<InputProps> = ({
   unit,
   error,
   isDivisible = true,
+  countryCode = "+1",
   disabled,
   ...props
 }) => {
@@ -128,7 +130,13 @@ export const Input: FC<InputProps> = ({
             margin="0 s 0 0"
           />
         )}
-        <Component as={isAmount ? NumberInput : 'input'} {...componentProps} />
+        <Component
+          as={isAmount ? NumberInput : 'input'}
+          {...(type === 'phone'
+            ? { format: `${countryCode} (###) ###-####`, mask: '_' }
+            : {})}
+          {...componentProps}
+        />
         {unit && <Unit>{unit}</Unit>}
       </InputWrapper>
       {error && (

From f3f37223ebfc16321ff31431e4d0bc8e3b97b9bc Mon Sep 17 00:00:00 2001
From: Mehdi Raash <leasksin@gmail.com>
Date: Mon, 27 Sep 2021 21:30:54 -0400
Subject: [PATCH 2/2] fix: adding thousandSeparator as an option

---
 src/components/Input/Input.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index 4332c91..10260a6 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -28,6 +28,7 @@ export type InputProps = {
   error?: string;
   countryCode?: string;
   isDivisible?: boolean;
+  thousandSeparator?: boolean;
   inputRef?: any;
 };
 
@@ -81,7 +82,8 @@ export const Input: FC<InputProps> = ({
   unit,
   error,
   isDivisible = true,
-  countryCode = "+1",
+  thousandSeparator = true,
+  countryCode = '+1',
   disabled,
   ...props
 }) => {
@@ -94,7 +96,7 @@ export const Input: FC<InputProps> = ({
     ...(isBasic ? { type } : {}),
     ...(isAmount
       ? {
-          thousandSeparator: true,
+          thousandSeparator,
           allowNegative: false,
           decimalScale: isDivisible ? 6 : 0,
           onWheel: (e: WheelEvent<HTMLInputElement>) => {