From cb89fa406b837b972677d6764c9ac36dbf7d8a0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20H=C3=B8egh?= <tobias@tujo.no>
Date: Fri, 15 Dec 2023 08:12:53 +0100
Subject: [PATCH] chore(Number): document percentage and add test (#3085)

---
 .../forms/base-fields/Number/Examples.tsx           | 13 +++++++++++++
 .../extensions/forms/base-fields/Number/demos.mdx   |  4 ++++
 .../forms/base-fields/Number/properties.mdx         |  1 +
 .../forms/Field/Number/__tests__/Number.test.tsx    |  5 +++++
 4 files changed, 23 insertions(+)

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/Examples.tsx
index 4431cbb5767..fab8ab9eee6 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/Examples.tsx
@@ -204,6 +204,19 @@ export const ValidateMinimum = () => {
   )
 }
 
+export const Percentage = () => {
+  return (
+    <ComponentBox>
+      <Field.Number
+        value={80}
+        label="Percentage"
+        onChange={(value) => console.log('onChange', value)}
+        minimum={90}
+      />
+    </ComponentBox>
+  )
+}
+
 export const ValidateMaximumCustomError = () => {
   return (
     <ComponentBox>
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/demos.mdx
index 7990df637f7..c241dc6b083 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/demos.mdx
@@ -65,3 +65,7 @@ import * as Examples from './Examples'
 ### Validation - Maximum and custom error message
 
 <Examples.ValidateMaximumCustomError />
+
+### Percentage
+
+<Examples.Percentage />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/properties.mdx
index 8a377515505..a85b302a2a5 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/properties.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/properties.mdx
@@ -14,6 +14,7 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties.
 | `decimalSymbol`                         | `string`            | _(optional)_ What character to use for separating digits and decimals. Defaults to ','.                                                                   |
 | `decimals`                              | `number`            | _(optional)_ Max number of decimals. Values with more decimals will be rounded.                                                                           |
 | `fixedDecimals`                         | `number`            | _(optional)_ Fixed number of decimals. Will round numbers with more decimals, and add trailing zeros when less.                                           |
+| `percent`                               | `boolean`           | _(optional)_ Format a number as percentage.                                                                                                               |
 | `prefix`                                | `string`            | _(optional)_ Text added before the value input.                                                                                                           |
 | `suffix`                                | `string`            | _(optional)_ Text added after the value input.                                                                                                            |
 | `minimum`                               | `number`            | _(optional)_ Validation for inclusive minimum number value (greater than or equal).                                                                       |
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/Number.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/Number.test.tsx
index 1eda5fc1050..a20a4efb4df 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/Number.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/Number.test.tsx
@@ -89,6 +89,11 @@ describe('Field.Number', () => {
       expect(screen.getByDisplayValue('97531:2468')).toBeInTheDocument()
     })
 
+    it('formats with percent', () => {
+      render(<Field.Number value={12345} percent />)
+      expect(document.querySelector('input').value).toBe('12 345 %')
+    })
+
     it('formats with same decimal limit', () => {
       render(<Field.Number value={42.51} decimalLimit={2} />)
       expect(screen.getByDisplayValue('42,51')).toBeInTheDocument()