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',