feat(forms): add Norwegian translation to country list

packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx

@@ -68,14 +68,17 @@ function PhoneNumber(props: Props) {
       ? value.match(/^(\+[^ ]+)? ?(.*)$/)
       : [undefined, '', '']
 
+  const lang = sharedContext.locale?.split('-')[0]
   const countryCodeData = useMemo(
     () =>
       countries.map((country) => ({
-        selectedKey: `+${country.code}`,
-        selected_value: `${country.iso} (+${country.code})`,
-        content: `+${country.code} ${country.name}`,
+        selectedKey: `+${country.cdc}`,
+        selected_value: `${country.iso} (+${country.cdc})`,
+        content: `+${country.cdc} ${
+          country.i18n[lang] ?? country.i18n.en
+        }`,
       })),
-    []
+    [sharedContext.locale]
   )
 
   const handleCountryCodeChange = useCallback(

packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/__tests__/PhoneNumber.test.tsx

@@ -3,8 +3,62 @@ import { wait } from '../../../../../core/jest/jestSetup'
 import { fireEvent, render } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import PhoneNumber from '..'
+import { Provider } from '../../../../../shared'
 
 describe('Field.PhoneNumber', () => {
+  it('should default to 47', () => {
+    render(<PhoneNumber />)
+
+    const codeElement = document.querySelector(
+      '.dnb-forms-field-phone-number__country-code input'
+    )
+
+    fireEvent.mouseDown(codeElement)
+
+    const selectedItemElement = document.querySelector(
+      '.dnb-drawer-list__option.dnb-drawer-list__option--selected'
+    )
+
+    expect(selectedItemElement).toBeInTheDocument()
+    expect(selectedItemElement.textContent).toContain('+47 Norge')
+  })
+
+  it('should use nb-NO by defualt', () => {
+    render(<PhoneNumber />)
+
+    const codeElement = document.querySelector(
+      '.dnb-forms-field-phone-number__country-code input'
+    )
+
+    fireEvent.mouseDown(codeElement)
+
+    const selectedItemElement = document.querySelector(
+      '.dnb-drawer-list__option.dnb-drawer-list__option--selected'
+    )
+
+    expect(selectedItemElement.textContent).toBe('+47 Norge')
+  })
+
+  it('should change locale', () => {
+    render(
+      <Provider locale="en-GB">
+        <PhoneNumber />
+      </Provider>
+    )
+
+    const codeElement = document.querySelector(
+      '.dnb-forms-field-phone-number__country-code input'
+    )
+
+    fireEvent.mouseDown(codeElement)
+
+    const selectedItemElement = document.querySelector(
+      '.dnb-drawer-list__option.dnb-drawer-list__option--selected'
+    )
+
+    expect(selectedItemElement.textContent).toBe('+47 Norway')
+  })
+
   it('should return correct value onFocus and onBlur event', async () => {
     const onFocus = jest.fn()
     const onBlur = jest.fn()

packages/dnb-eufemia/src/extensions/forms/Field/SelectCountry/SelectCountry.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import React, { useContext, useMemo } from 'react'
 import Selection, { Props as SelectionProps } from '../Selection'
 import Option from '../Option'
 import countries from '../../constants/countries'
@@ -23,17 +23,20 @@ function SelectCountry(props: Props) {
     },
   }
 
-  return (
-    <Selection {...selectComponentProps}>
-      {countries.map((country) => (
+  const lang = sharedContext.locale?.split('-')[0]
+  const countryOptions = useMemo(
+    () =>
+      countries.map((country) => (
         <Option
           key={country.iso}
           value={country.iso}
-          title={country.name}
+          title={country.i18n[lang] ?? country.i18n.en}
         />
-      ))}
-    </Selection>
+      )),
+    [sharedContext.locale]
   )
+
+  return <Selection {...selectComponentProps}>{countryOptions}</Selection>
 }
 
 SelectCountry._supportsSpacingProps = true