diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/number-format/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/number-format/Examples.tsx
index 1f6307aeae9..d83367d91a2 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/number-format/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/number-format/Examples.tsx
@@ -34,6 +34,7 @@ export const NumberDefault = () => (
-1234
+ invalid
@@ -74,6 +75,9 @@ export const NumberCurrency = () => (
value={-12345678.9}
currency_display={false}
/>
+
+ invalid
+
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/number-format/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/number-format/info.mdx
index 797eb04541e..d6be33380cd 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/number-format/info.mdx
+++ b/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:
+
## 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.
diff --git a/packages/dnb-eufemia/src/components/number-format/NumberUtils.js b/packages/dnb-eufemia/src/components/number-format/NumberUtils.js
index 87c182e959e..d206ab06dce 100644
--- a/packages/dnb-eufemia/src/components/number-format/NumberUtils.js
+++ b/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/, '–')
}
/**
diff --git a/packages/dnb-eufemia/src/components/number-format/__tests__/NumberFormat.test.tsx b/packages/dnb-eufemia/src/components/number-format/__tests__/NumberFormat.test.tsx
index 91b1e2e8b77..fa03caaf1e3 100644
--- a/packages/dnb-eufemia/src/components/number-format/__tests__/NumberFormat.test.tsx
+++ b/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(invalid)
+
+ expect(document.querySelector(displaySelector).textContent).toBe(
+ '– kr'
+ )
+ expect(
+ document.querySelector(ariaSelector).getAttribute('data-text')
+ ).toBe('Ikke tilgjengelig')
+
+ rerender(invalid)
+
+ expect(document.querySelector(displaySelector).textContent).toBe('– %')
+ expect(
+ document.querySelector(ariaSelector).getAttribute('data-text')
+ ).toBe('Ikke tilgjengelig')
+
+ rerender(invalid)
+
+ 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(
diff --git a/packages/dnb-eufemia/src/components/number-format/__tests__/__image_snapshots__/numberformat-have-to-match-currency.snap.png b/packages/dnb-eufemia/src/components/number-format/__tests__/__image_snapshots__/numberformat-have-to-match-currency.snap.png
index 43bcc7713a8..c43680d21e5 100644
Binary files a/packages/dnb-eufemia/src/components/number-format/__tests__/__image_snapshots__/numberformat-have-to-match-currency.snap.png and b/packages/dnb-eufemia/src/components/number-format/__tests__/__image_snapshots__/numberformat-have-to-match-currency.snap.png differ
diff --git a/packages/dnb-eufemia/src/components/number-format/__tests__/__image_snapshots__/numberformat-have-to-match-default-numbers.snap.png b/packages/dnb-eufemia/src/components/number-format/__tests__/__image_snapshots__/numberformat-have-to-match-default-numbers.snap.png
index 3092963d7c4..8dd5b30349f 100644
Binary files a/packages/dnb-eufemia/src/components/number-format/__tests__/__image_snapshots__/numberformat-have-to-match-default-numbers.snap.png and b/packages/dnb-eufemia/src/components/number-format/__tests__/__image_snapshots__/numberformat-have-to-match-default-numbers.snap.png differ
diff --git a/packages/dnb-eufemia/src/components/number-format/__tests__/__image_snapshots__/numberformat-with-skeleton-have-to-match-currency.snap.png b/packages/dnb-eufemia/src/components/number-format/__tests__/__image_snapshots__/numberformat-with-skeleton-have-to-match-currency.snap.png
index 2ac2dfe7792..eef8e221379 100644
Binary files a/packages/dnb-eufemia/src/components/number-format/__tests__/__image_snapshots__/numberformat-with-skeleton-have-to-match-currency.snap.png and b/packages/dnb-eufemia/src/components/number-format/__tests__/__image_snapshots__/numberformat-with-skeleton-have-to-match-currency.snap.png differ
diff --git a/packages/dnb-eufemia/src/components/number-format/__tests__/__image_snapshots__/numberformat-with-skeleton-have-to-match-default-numbers.snap.png b/packages/dnb-eufemia/src/components/number-format/__tests__/__image_snapshots__/numberformat-with-skeleton-have-to-match-default-numbers.snap.png
index ab3bfd52f09..7248bf6f405 100644
Binary files a/packages/dnb-eufemia/src/components/number-format/__tests__/__image_snapshots__/numberformat-with-skeleton-have-to-match-default-numbers.snap.png and b/packages/dnb-eufemia/src/components/number-format/__tests__/__image_snapshots__/numberformat-with-skeleton-have-to-match-default-numbers.snap.png differ
diff --git a/packages/dnb-eufemia/src/components/number-format/__tests__/useNumberFormat.test.tsx b/packages/dnb-eufemia/src/components/number-format/__tests__/useNumberFormat.test.tsx
index d82fa4d2f0a..f87522894fa 100644
--- a/packages/dnb-eufemia/src/components/number-format/__tests__/useNumberFormat.test.tsx
+++ b/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 }) => (
+
+ {children}
+
+ )
+ const { result } = renderHook(() => useNumberFormat('invalid'), {
+ wrapper,
+ })
+
+ expect(result.current).toBe('NOK–')
+ })
})
diff --git a/packages/dnb-eufemia/src/shared/locales/en-GB.js b/packages/dnb-eufemia/src/shared/locales/en-GB.js
index 159c258da64..d848aaea325 100644
--- a/packages/dnb-eufemia/src/shared/locales/en-GB.js
+++ b/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',
diff --git a/packages/dnb-eufemia/src/shared/locales/nb-NO.js b/packages/dnb-eufemia/src/shared/locales/nb-NO.js
index 10a20af3555..ecd543a79c7 100644
--- a/packages/dnb-eufemia/src/shared/locales/nb-NO.js
+++ b/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',