diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/info.mdx index f4e72f83691..4bf60a2f66d 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/info.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/info.mdx @@ -24,3 +24,9 @@ The component returns the `emptyValue` when no number is set, which defaults to ### Default country code The default country code is set to `+47`. + +## Structure and format of phone numbers + +Creating a list of all possible phone numbers would be impractical due to the vast number of combinations, especially considering the various country codes, area codes, and local numbers. Additionally, new numbers are constantly being allocated, and existing numbers may be reassigned over time. + +Therefore, the structure and format is only used when `+47` is selected. diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx index 107b6543eee..e3a505d93af 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx @@ -30,6 +30,20 @@ export type Props = FieldHelpProps & // Important for the default value to be defined here, and not after the useDataValue call, to avoid the UI jumping // back to +47 once the user empty the field so handleChange send out undefined. const defaultCountryCode = '+47' +const defaultPlaceholder = '00 00 00 00' +const defaultMask = [ + /\d/, + /\d/, + ' ', + /\d/, + /\d/, + ' ', + /\d/, + /\d/, + ' ', + /\d/, + /\d/, +] function PhoneNumber(props: Props) { const sharedContext = useContext(SharedContext) @@ -186,6 +200,8 @@ function PhoneNumber(props: Props) { [handleFocus, lang] ) + const isNorway = countryCodeRef.current.includes('47') + return ( { expect(selectedItemElement().textContent).toBe('+47 Norge') }) + it('should only have a mask when +47 is given', async () => { + const { rerender } = render() + + const codeElement = () => + document.querySelector( + '.dnb-forms-field-phone-number__country-code input' + ) as HTMLInputElement + const numberElement = () => + document.querySelector( + '.dnb-forms-field-phone-number__number input' + ) as HTMLInputElement + + expect(codeElement().value).toBe('NO (+47)') + expect(numberElement().value).toBe('99 99 99 99') + + await userEvent.type(numberElement(), '123') + + expect(numberElement().value).toBe('99 99 99 99') + + rerender() + + expect(codeElement().value).toBe('CH (+41)') + expect(numberElement().value).toBe('999999991234') + + await userEvent.type(numberElement(), '123') + + expect(numberElement().value).toBe('999999991234') + }) + + it('should only have a placeholder when +47 is given', async () => { + const { rerender } = render() + + expect( + document.querySelector('.dnb-input__placeholder').textContent + ).toBe('00 00 00 00') + + rerender() + + expect( + document.querySelector('.dnb-input__placeholder') + ).not.toBeInTheDocument() + }) + it('should return correct value onFocus and onBlur event', async () => { const onFocus = jest.fn() const onBlur = jest.fn() @@ -160,7 +203,7 @@ describe('Field.PhoneNumber', () => { document.querySelectorAll('li.dnb-drawer-list__option')[0] expect(codeElement.value).toEqual('CH (+41)') - expect(phoneElement.value).toEqual('2​ ​​ ​​ ​​') + expect(phoneElement.value).toEqual('2​​​​​​​​​​​') // Change PhoneNumber fireEvent.change(phoneElement, { target: { value: '234' } }) @@ -169,7 +212,7 @@ describe('Field.PhoneNumber', () => { expect(onChange).toHaveBeenNthCalledWith(1, '+41 234') expect(onFocus).toHaveBeenNthCalledWith(1, '+41 234') expect(codeElement.value).toEqual('CH (+41)') - expect(phoneElement.value).toEqual('23 4​ ​​ ​​') + expect(phoneElement.value).toEqual('234​​​​​​​​​') // Change CountryCode fireEvent.focus(codeElement) @@ -259,9 +302,9 @@ describe('Field.PhoneNumber', () => { phoneNumber: '99999999', }) expect(codeElement.value).toEqual('CH (+41)') - expect(phoneElement.value).toEqual('99 99 99 99') + expect(phoneElement.value).toEqual('99999999​​​​') - await userEvent.type(phoneElement, '{Backspace>8}') + await userEvent.type(phoneElement, '{Backspace>12}') expect(onChange).toHaveBeenLastCalledWith(undefined, { countryCode: '+41', @@ -327,7 +370,7 @@ describe('Field.PhoneNumber', () => { phoneNumber: '456', }) expect(codeElement.value).toEqual('CH (+41)') - expect(phoneElement.value).toEqual('45 6​ ​​ ​​') + expect(phoneElement.value).toEqual('456​​​​​​​​​') }) it('should handle events correctly', async () => { @@ -372,7 +415,7 @@ describe('Field.PhoneNumber', () => { phoneNumber: '456', }) expect(codeElement.value).toEqual('CH (+41)') - expect(phoneElement.value).toEqual('45 6​ ​​ ​​') + expect(phoneElement.value).toEqual('456​​​​​​​​​') }) it('should support spacing props', () => {