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..10260a6 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,7 +26,9 @@ export type InputProps = { icon?: ComponentType; unit?: string; error?: string; + countryCode?: string; isDivisible?: boolean; + thousandSeparator?: boolean; inputRef?: any; }; @@ -80,6 +82,8 @@ export const Input: FC = ({ unit, error, isDivisible = true, + thousandSeparator = true, + countryCode = '+1', disabled, ...props }) => { @@ -92,7 +96,7 @@ export const Input: FC = ({ ...(isBasic ? { type } : {}), ...(isAmount ? { - thousandSeparator: true, + thousandSeparator, allowNegative: false, decimalScale: isDivisible ? 6 : 0, onWheel: (e: WheelEvent) => { @@ -128,7 +132,13 @@ export const Input: FC = ({ margin="0 s 0 0" /> )} - + {unit && {unit}} {error && (