feat(PhoneNumber): add pattern property (#2962)

```tsx <PhoneNumber required pattern="^[49]+" /> ```
dnbexperience · Dec 4, 2023 · 86cb6e0 · 86cb6e0
1 parent 4a3c7e2
commit 86cb6e0
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 3 deletions.
diff --git a/...ortal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/properties.mdx b/...ortal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/properties.mdx
@@ -10,6 +10,7 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties.
 
 | Property                                | Type                | Description                                                                                                 |
 | --------------------------------------- | ------------------- | ----------------------------------------------------------------------------------------------------------- |
+| `pattern`                               | `boolean`           | _(optional)_ Validation based on regex pattern for the number field e.g. `pattern="^[49]+"`.                |
 | `help`                                  | `object`            | _(optional)_ Provide a help button. Object consisting of `title` and `contents`.                            |
 | `countries`                             | `string`            | _(optional)_ List only a certain set of countries: `Scandinavia`, `NorthernNordic` or `Europe`              |
 | `omitCountryCodeField`                  | `boolean`           | _(optional)_ If `true` is given, then everything related to country code is removed.                        |

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx
@@ -3,7 +3,7 @@ import { Autocomplete, Flex } from '../../../../components'
 import { InputMaskedProps } from '../../../../components/InputMasked'
 import classnames from 'classnames'
 import countries, { CountryType } from '../../constants/countries'
-import StringComponent from '../String'
+import StringComponent, { Props as InputProps } from '../String'
 import { useDataValue } from '../../hooks'
 import FieldBlock from '../../FieldBlock'
 import { FieldHelpProps, FieldProps } from '../../types'
@@ -17,6 +17,7 @@ export type Props = FieldHelpProps &
     countryCodePlaceholder?: string
     countryCodeLabel?: string
     numberMask?: InputMaskedProps['mask']
+    pattern?: InputProps['pattern']
     width?: 'large' | 'stretch'
     omitCountryCodeField?: boolean
     onCountryCodeChange?: (value: string | undefined) => void
@@ -63,6 +64,7 @@ function PhoneNumber(props: Props) {
   const errorMessages = useMemo(
     () => ({
       required: tr.phoneNumberErrorRequired,
+      pattern: tr.phoneNumberErrorRequired,
       ...props?.errorMessages,
     }),
     [tr, props.errorMessages]
@@ -93,6 +95,7 @@ function PhoneNumber(props: Props) {
     disabled,
     width = 'large',
     help,
+    pattern,
     required,
     validateInitially,
     continuousValidation,
@@ -290,6 +293,8 @@ function PhoneNumber(props: Props) {
           width={omitCountryCodeField ? 'medium' : 'stretch'}
           help={help}
           required={required}
+          pattern={pattern}
+          errorMessages={errorMessages}
           validateInitially={validateInitially}
           continuousValidation={continuousValidation}
           validateUnchanged={validateUnchanged}

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/__tests__/PhoneNumber.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/__tests__/PhoneNumber.test.tsx
@@ -456,6 +456,47 @@ describe('Field.PhoneNumber', () => {
     ).not.toBeInTheDocument()
   })
 
+  it('should handle "pattern" property', async () => {
+    render(
+      <Provider locale="en-GB">
+        <PhoneNumber required pattern="^[49]+" />
+      </Provider>
+    )
+
+    const numberElement: HTMLInputElement = document.querySelector(
+      '.dnb-forms-field-phone-number__number input'
+    )
+
+    await userEvent.type(numberElement, '34')
+    fireEvent.blur(numberElement)
+
+    expect(document.querySelector('[role="alert"]')).toBeInTheDocument()
+    expect(document.querySelector('[role="alert"]').textContent).toContain(
+      'valid number'
+    )
+
+    await userEvent.type(numberElement, '{Backspace>8}89')
+    fireEvent.blur(numberElement)
+
+    expect(document.querySelector('[role="alert"]')).toBeInTheDocument()
+
+    await userEvent.type(numberElement, '{Backspace>8}43')
+    fireEvent.blur(numberElement)
+
+    expect(numberElement.value).toBe('43   ')
+
+    expect(
+      document.querySelector('[role="alert"]')
+    ).not.toBeInTheDocument()
+
+    await userEvent.type(numberElement, '{Backspace>8}98')
+    fireEvent.blur(numberElement)
+
+    expect(
+      document.querySelector('[role="alert"]')
+    ).not.toBeInTheDocument()
+  })
+
   it('should filter countries list with given filterCountries', () => {
     render(
       <PhoneNumber

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/stories/PhoneNumber.stories.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/stories/PhoneNumber.stories.tsx
@@ -15,6 +15,7 @@ export function PhoneNumber() {
   return (
     <Field.PhoneNumber
       required
+      pattern="^[49]+"
       value={state}
       onBlur={console.log}
       onFocus={console.log}

diff --git a/packages/dnb-eufemia/src/shared/locales/en-GB.js b/packages/dnb-eufemia/src/shared/locales/en-GB.js
@@ -205,7 +205,7 @@ export default {
       bankAccountNumberErrorPattern:
         'This is not a valid bank account number',
       phoneNumberLabel: 'Mobile number',
-      phoneNumberErrorRequired: 'You must enter a mobile number',
+      phoneNumberErrorRequired: 'You must enter a valid number',
       postalCodeLabel: 'Postalc.',
       postalCodeErrorRequired: 'You must enter a postal code',
       postalCodeErrorPattern: 'This is not a valid postal code',

diff --git a/packages/dnb-eufemia/src/shared/locales/nb-NO.js b/packages/dnb-eufemia/src/shared/locales/nb-NO.js
@@ -202,7 +202,7 @@ export default {
       bankAccountNumberErrorPattern:
         'Dette er ikke et gyldig bankkontonummer',
       phoneNumberLabel: 'Mobilnummer',
-      phoneNumberErrorRequired: 'Du må fylle inn mobilnummer',
+      phoneNumberErrorRequired: 'Du må fylle inn et gyldig nummer',
       postalCodeLabel: 'Postnr.',
       postalCodeErrorRequired: 'Du må fylle inn et postnummer',
       postalCodeErrorPattern: 'Dette er ikke et gyldig postnummer',