fix(NumberFormat): show em dash instead of NaN (#2784)

packages/dnb-design-system-portal/src/docs/uilib/components/number-format/Examples.tsx

@@ -34,6 +34,7 @@ export const NumberDefault = () => (
         <NumberFormat decimals={2} copy_selection={false}>
           -1234
         </NumberFormat>
+        <NumberFormat decimals={2}>invalid</NumberFormat>
       </P>
     </ComponentBox>
   </Style>
@@ -74,6 +75,9 @@ export const NumberCurrency = () => (
           value={-12345678.9}
           currency_display={false}
         />
+        <NumberFormat currency decimals={2}>
+          invalid
+        </NumberFormat>
       </P>
     </ComponentBox>
   </Style>

packages/dnb-design-system-portal/src/docs/uilib/components/number-format/info.mdx

@@ -33,6 +33,12 @@ It uses the browser APIs `number.toLocaleString` or `Intl.NumberFormat.format` u
 - Locale: `nb-NO`
 - Currency: `NOK`
 
+#### Not available
+
+When a number should be displayed, but for some reason is not available to the frontend application, the NumberFormat component will display a single **em dash** (–) and a screen reader will get a text (Ikke tilgjengelig / Not available).
+
+Example: <NumberFormat value="invalid" currency />
+
 ## Decimals
 
 When the amount of wanted `decimals` is set as a property, but the given value contains decimals that exceeds the wanted `decimals`, the output value will get rounded up or down. Use `omit_rounding` if you need to hard-cut decimals from the displayed value.

packages/dnb-eufemia/src/components/number-format/NumberUtils.js

@@ -21,6 +21,7 @@ import {
   IS_MAC,
   IS_WIN,
 } from '../../shared/helpers'
+import locales from '../../shared/locales'
 
 const NUMBER_CHARS = '\\-0-9,.'
 
@@ -290,6 +291,10 @@ export const format = (
       )
     }
 
+    if (value === 'invalid') {
+      aria = locales[locale].NumberFormat.not_available || 'N/A'
+    }
+
     // return "locale" as well value,l, since we have to "auto" option
     return { value, cleanedValue, number: display, aria, locale, type }
   }
@@ -417,17 +422,21 @@ const prepareMinus = (display, locale) => {
     return display
   }
 
+  // check for first and second char
+  const first = display[0]
+  const second = display[1]
+
+  // Seems to be the invalid replacement
+  if (first === '-' && second === '-') {
+    return display
+  }
+
   // change the position of minus if it's first
   // check for two minus - −
   // check also for hyphen ‐
   // check also for dashes ‒  –  —  ―
-
   const reg = '^(-|−|‐|‒|–|—|―)'
 
-  // check for first and second char
-  const first = display[0]
-  const second = display[1]
-
   if (new RegExp(reg).test(first)) {
     // if second is number
     if (parseFloat(second) > 0) {
@@ -495,14 +504,18 @@ export const formatNumber = (
     }
 
     if (formatter) {
-      return formatToParts({ number, locale, options })
-        .map(formatter)
-        .reduce((acc, { value }) => acc + value, '')
+      return replaceNaNWithDash(
+        formatToParts({ number, locale, options })
+          .map(formatter)
+          .reduce((acc, { value }) => acc + value, '')
+      )
     } else if (
       typeof Number !== 'undefined' &&
       typeof Number.toLocaleString === 'function'
     ) {
-      return parseFloat(number).toLocaleString(locale, options)
+      return replaceNaNWithDash(
+        parseFloat(number).toLocaleString(locale, options)
+      )
     }
   } catch (e) {
     warn(
@@ -514,7 +527,11 @@ export const formatNumber = (
       e
     )
   }
-  return number
+  return replaceNaNWithDash(number)
+}
+
+function replaceNaNWithDash(number) {
+  return String(number).replace(/NaN/, '–')
 }
 
 /**

packages/dnb-eufemia/src/components/number-format/__tests__/NumberFormat.test.tsx

@@ -588,6 +588,31 @@ describe('NumberFormat component', () => {
     ).toBe('12,34 kr')
   })
 
+  it('should show dashes when number is invalid', () => {
+    const { rerender } = render(<Component currency>invalid</Component>)
+
+    expect(document.querySelector(displaySelector).textContent).toBe(
+      '– kr'
+    )
+    expect(
+      document.querySelector(ariaSelector).getAttribute('data-text')
+    ).toBe('Ikke tilgjengelig')
+
+    rerender(<Component percent>invalid</Component>)
+
+    expect(document.querySelector(displaySelector).textContent).toBe('– %')
+    expect(
+      document.querySelector(ariaSelector).getAttribute('data-text')
+    ).toBe('Ikke tilgjengelig')
+
+    rerender(<Component locale="en-GB">invalid</Component>)
+
+    expect(document.querySelector(displaySelector).textContent).toBe('–')
+    expect(
+      document.querySelector(ariaSelector).getAttribute('data-text')
+    ).toBe('Not available')
+  })
+
   it('should validate with ARIA rules', async () => {
     const Comp = render(
       <Component value={-value} currency srLabel="Total:" />

packages/dnb-eufemia/src/components/number-format/__tests__/useNumberFormat.test.tsx

@@ -66,4 +66,22 @@ describe('useNumberFormat', () => {
 
     expect(result.current).toBe('NOK 1 234.00')
   })
+
+  it('should show dashes when number is invalid', () => {
+    const wrapper = ({ children }) => (
+      <Provider
+        locale="en-GB"
+        NumberFormat={{
+          currency: true,
+        }}
+      >
+        {children}
+      </Provider>
+    )
+    const { result } = renderHook(() => useNumberFormat('invalid'), {
+      wrapper,
+    })
+
+    expect(result.current).toBe('NOK–')
+  })
 })

packages/dnb-eufemia/src/shared/locales/en-GB.js

@@ -79,6 +79,7 @@ export default {
     },
     NumberFormat: {
       clipboard_copy: 'Copied',
+      not_available: 'Not available',
     },
     HelpButton: {
       title: 'Help text',

packages/dnb-eufemia/src/shared/locales/nb-NO.js

@@ -79,6 +79,7 @@ export default {
     },
     NumberFormat: {
       clipboard_copy: 'Kopiert',
+      not_available: 'Ikke tilgjengelig',
     },
     HelpButton: {
       title: 'Hjelpetekst',