docs(Forms): improves docs for Value.Number & Value.Currency (#4008)

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Currency/Examples.tsx

@@ -21,7 +21,15 @@ export const Placeholder = () => {
 export const WithValue = () => {
   return (
     <ComponentBox>
-      <Value.Currency value={150} suffix=" kr" />
+      <Value.Currency value={150} />
+    </ComponentBox>
+  )
+}
+
+export const WithSuffix = () => {
+  return (
+    <ComponentBox>
+      <Value.Currency value={150} suffix=" - my suffix" />
     </ComponentBox>
   )
 }

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Currency/demos.mdx

@@ -18,6 +18,10 @@ import * as Examples from './Examples'
 
 <Examples.WithValue />
 
+### Suffix
+
+<Examples.WithSuffix />
+
 ### Label
 
 <Examples.Label />

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Currency/properties.mdx

@@ -3,8 +3,19 @@ showTabs: true
 ---
 
 import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
+import { CurrencyValueProperties } from '@dnb/eufemia/src/extensions/forms/Value/Currency/CurrencyDocs'
 import { ValueProperties } from '@dnb/eufemia/src/extensions/forms/Value/ValueDocs'
 
 ## Properties
 
-<PropertiesTable props={ValueProperties} valueType="number" />
+### Value-specific properties
+
+<PropertiesTable props={CurrencyValueProperties} />
+
+### General properties
+
+<PropertiesTable
+  props={ValueProperties}
+  valueType="number"
+  omit={['value', '[Space](/uilib/layout/space/properties)']}
+/>

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Number/properties.mdx

@@ -10,10 +10,12 @@ import { ValueProperties } from '@dnb/eufemia/src/extensions/forms/Value/ValueDo
 
 ### Value-specific properties
 
-It inherits all the [properties](/uilib/components/number-format/properties/) from the `NumberFormat` component. All snake_case properties are converted to camelCase.
-
 <PropertiesTable props={NumberProperties} />
 
 ### General properties
 
-<PropertiesTable props={ValueProperties} valueType="number" />
+<PropertiesTable
+  props={ValueProperties}
+  valueType="number"
+  omit={['value', '[Space](/uilib/layout/space/properties)']}
+/>

packages/dnb-eufemia/src/components/number-format/NumberFormatDocs.ts

@@ -1,4 +1,5 @@
 import { PropertiesTableProps } from '../../shared/types'
+import { toCamelCase } from '../../shared/component-helper'
 
 export const NumberFormatProperties: PropertiesTableProps = {
   value: {
@@ -147,3 +148,11 @@ export const NumberFormatProperties: PropertiesTableProps = {
     status: 'optional',
   },
 }
+
+export const NumberFormatPropertiesCamelCase: PropertiesTableProps =
+  Object.fromEntries(
+    Object.entries(NumberFormatProperties).map(([k, v]) => [
+      toCamelCase(k),
+      v,
+    ])
+  )

packages/dnb-eufemia/src/extensions/forms/Value/Currency/CurrencyDocs.tsx

@@ -0,0 +1,11 @@
+import { PropertiesTableProps } from '../../../../shared/types'
+import { NumberProperties } from '../Number/NumberDocs'
+
+export const CurrencyValueProperties: PropertiesTableProps = {
+  ...NumberProperties,
+  currency: {
+    doc: 'Currency code (ISO 4217) or `true` to use the default `NOK`, which use two decimals by default. Defaults to value `NOK`.',
+    type: ['string', 'boolean'],
+    status: 'optional',
+  },
+}

packages/dnb-eufemia/src/extensions/forms/Value/Number/NumberDocs.tsx

@@ -1,6 +1,8 @@
 import { PropertiesTableProps } from '../../../../shared/types'
+import { NumberFormatPropertiesCamelCase } from '../../../../components/number-format/NumberFormatDocs'
 
 export const NumberProperties: PropertiesTableProps = {
+  ...NumberFormatPropertiesCamelCase,
   minimum: {
     doc: 'Defines the minimum value of the rendered number. Defaults to `Number.MIN_SAFE_INTEGER`.',
     type: 'number',