chore(Number): document percentage and add test (#3085)

dnbexperience · Dec 15, 2023 · cb89fa4 · cb89fa4
1 parent 7b83a7a
commit cb89fa4
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 0 deletions.
diff --git a/.../dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/Examples.tsx b/.../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/...sign-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/demos.mdx b/...sign-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/...system-portal/src/docs/uilib/extensions/forms/base-fields/Number/properties.mdx b/...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
@@ -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()