docs: add component translations table to properties docs (#3902)

dnbexperience · Sep 6, 2024 · 66dd12e · 66dd12e
1 parent 6b8e6e4
commit 66dd12e
Show file tree

Hide file tree

Showing 24 changed files with 142 additions and 6 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/anchor/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/anchor/properties.mdx
@@ -2,6 +2,7 @@
 showTabs: true
 ---
 
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
 import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
 import { AnchorProperties } from '@dnb/eufemia/src/components/anchor/AnchorDocs'
 
@@ -22,3 +23,7 @@ render(
   </Anchor>,
 )
 ```
+
+## Translations
+
+<TranslationsTable localeKey="Anchor" />
diff --git a/.../dnb-design-system-portal/src/docs/uilib/components/autocomplete/properties.mdx b/.../dnb-design-system-portal/src/docs/uilib/components/autocomplete/properties.mdx
@@ -2,6 +2,7 @@
 showTabs: true
 ---
 
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
 import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
 import { autocompleteProperties } from '@dnb/eufemia/src/components/autocomplete/AutocompleteDocs'
 import { DrawerListProperties } from '@dnb/eufemia/src/fragments/drawer-list/DrawerListDocs'
@@ -69,3 +70,7 @@ const data = {
   b: 'B',
 }
 ```
+
+## Translations
+
+<TranslationsTable localeKey="Autocomplete" />
diff --git a/...es/dnb-design-system-portal/src/docs/uilib/components/breadcrumb/properties.mdx b/...es/dnb-design-system-portal/src/docs/uilib/components/breadcrumb/properties.mdx
@@ -2,6 +2,8 @@
 showTabs: true
 ---
 
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
+
 ## Properties
 
 ### `Breadcrumb` properties
@@ -36,3 +38,7 @@ showTabs: true
 | `skeleton`          | _(optional)_ Applies loading skeleton.                                                             |
 
 **NB:** When interactive, the item is an inherited [Button](/uilib/components/button/). You can therefore swap out the underlying HTML element, by providing a new `element` or use other Button properties, such as `to` instead of `href`.
+
+## Translations
+
+<TranslationsTable localeKey="Breadcrumb" />
diff --git a/...dnb-design-system-portal/src/docs/uilib/components/copy-on-click/properties.mdx b/...dnb-design-system-portal/src/docs/uilib/components/copy-on-click/properties.mdx
@@ -2,9 +2,14 @@
 showTabs: true
 ---
 
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
 import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
 import { CopyOnClickProperties } from '@dnb/eufemia/src/components/copy-on-click/CopyOnClickDocs'
 
 ## Properties
 
 <PropertiesTable props={CopyOnClickProperties} />
+
+## Translations
+
+<TranslationsTable localeKey="CopyOnClick" />
diff --git a/...s/dnb-design-system-portal/src/docs/uilib/components/date-picker/properties.mdx b/...s/dnb-design-system-portal/src/docs/uilib/components/date-picker/properties.mdx
@@ -2,6 +2,7 @@
 showTabs: true
 ---
 
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
 import {
   DatePickerDateFns,
   DatePickerDateFnsRange,
@@ -57,6 +58,10 @@ import {
 | `size`                                  | _(optional)_ the sizes you can choose is `small` (1.5rem), `default` (2rem), `medium` (2.5rem) and `large` (3rem) are supported component sizes. Defaults to `default` / `null`.                                                                                                                                                                                                     |
 | [Space](/uilib/layout/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                                                                                                                                                                                                                                                                                                |
 
+## Translations
+
+<TranslationsTable localeKey="DatePicker" />
+
 ## Shortcuts
 
 You may use [date-fns](https://date-fns.org) to make date calculations.

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/dialog/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/dialog/properties.mdx
@@ -2,6 +2,7 @@
 showTabs: true
 ---
 
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
 import DialogPropTable from 'Docs/uilib/components/dialog/prop-table'
 import ModalPropTable from 'Docs/uilib/components/modal/prop-table-camel-case'
 
@@ -15,3 +16,7 @@ The properties of [Modal](/uilib/components/modal) formatted as camel case are a
 See the table below:
 
 <ModalPropTable />
+
+## Translations
+
+<TranslationsTable localeKey="Dialog" />
diff --git a/...ages/dnb-design-system-portal/src/docs/uilib/components/dropdown/properties.mdx b/...ages/dnb-design-system-portal/src/docs/uilib/components/dropdown/properties.mdx
@@ -2,6 +2,7 @@
 showTabs: true
 ---
 
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
 import DrawerListProperties from 'Docs/uilib/components/fragments/drawer-list/properties'
 
 ## Properties
@@ -93,3 +94,7 @@ const data = {
   b: 'B',
 }
 ```
+
+## Translations
+
+<TranslationsTable localeKey="Dropdown" />
diff --git a/...n-system-portal/src/docs/uilib/components/fragments/text-counter/properties.mdx b/...n-system-portal/src/docs/uilib/components/fragments/text-counter/properties.mdx
@@ -2,6 +2,8 @@
 showTabs: true
 ---
 
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
+
 ## Properties
 
 | Properties                              | Description                                                                                                                      |
@@ -10,3 +12,7 @@ showTabs: true
 | `max`                                   | _(required)_ The maximum number of characters allowed.                                                                           |
 | `variant`                               | _(optional)_ The counting variant. Can be either `up` (counts up from zero) or `down` (counts down from max). Default is `down`. |
 | [Space](/uilib/layout/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                                            |
+
+## Translations
+
+<TranslationsTable localeKey="TextCounter" />
diff --git a/.../dnb-design-system-portal/src/docs/uilib/components/global-error/properties.mdx b/.../dnb-design-system-portal/src/docs/uilib/components/global-error/properties.mdx
@@ -2,6 +2,8 @@
 showTabs: true
 ---
 
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
+
 ## Properties
 
 | Properties | Description                                                                                                                      |
@@ -16,3 +18,7 @@ showTabs: true
 | `skeleton` | _(optional)_ applies a loading skeleton to all included elements.                                                                |
 | `locale`   | _(optional)_ set a [supported locale](/uilib/usage/customisation/localization/) if needed.                                       |
 | `children` | _(optional)_ to display additional related content, like useful links etc.                                                       |
+
+## Translations
+
+<TranslationsTable localeKey="GlobalError" />
diff --git a/...dnb-design-system-portal/src/docs/uilib/components/global-status/properties.mdx b/...dnb-design-system-portal/src/docs/uilib/components/global-status/properties.mdx
@@ -2,6 +2,7 @@
 showTabs: true
 ---
 
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
 import { GlobalStatusExampleControllers } from 'Docs/uilib/components/global-status/Examples'
 
 ## Properties
@@ -26,6 +27,10 @@ import { GlobalStatusExampleControllers } from 'Docs/uilib/components/global-sta
 | `omit_set_focus`                        | _(optional)_ set to `true` to omit setting the focus during visibility. Defaults to `false`. Additionally, there is `omit_set_focus_on_update` which is set to `true` by default.                        |
 | [Space](/uilib/layout/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                                                                                                                    |
 
+## Translations
+
+<TranslationsTable localeKey="GlobalStatus" />
+
 ## Item Object
 
 ```js

diff --git a/...s/dnb-design-system-portal/src/docs/uilib/components/help-button/properties.mdx b/...s/dnb-design-system-portal/src/docs/uilib/components/help-button/properties.mdx
@@ -2,6 +2,7 @@
 showTabs: true
 ---
 
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
 import { HelpButtonRenderExample } from 'Docs/uilib/components/help-button/Examples'
 
 ## Properties
@@ -14,6 +15,10 @@ import { HelpButtonRenderExample } from 'Docs/uilib/components/help-button/Examp
 | `render`                                      | _(optional)_ accepts a function that returns a valid React Element. See example below. |
 | [Button](/uilib/components/button/properties) | _(optional)_ accepts all Button properties, if `children` is not given.                |
 
+## Translations
+
+<TranslationsTable localeKey="HelpButton" />
+
 ## How to use `render`
 
 <HelpButtonRenderExample />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/input/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/input/properties.mdx
@@ -3,8 +3,13 @@ showTabs: true
 ---
 
 import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
 import { inputProperties } from '@dnb/eufemia/src/components/input/InputDocs'
 
 ## Properties
 
 <PropertiesTable props={inputProperties} />
+
+## Translations
+
+<TranslationsTable localeKey="Input" />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/modal/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/modal/properties.mdx
@@ -2,6 +2,7 @@
 showTabs: true
 ---
 
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
 import ModalPropTable from 'Docs/uilib/components/modal/prop-table'
 import { ModalExampleTriggerProps } from 'Docs/uilib/components/modal/Examples'
 
@@ -14,3 +15,7 @@ import { ModalExampleTriggerProps } from 'Docs/uilib/components/modal/Examples'
 Properties targeting the trigger component (Button), but they will be set the same way as all the other properties:
 
 <ModalExampleTriggerProps />
+
+## Modal Translations
+
+<TranslationsTable localeKey="Modal" />
diff --git a/...dnb-design-system-portal/src/docs/uilib/components/number-format/properties.mdx b/...dnb-design-system-portal/src/docs/uilib/components/number-format/properties.mdx
@@ -4,6 +4,8 @@ redirect_from:
   - /uilib/components/number/properties
 ---
 
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
+
 ## Properties
 
 | Properties                              | Description                                                                                                                                                                                                                                                                                                                                                                                           |
@@ -36,3 +38,7 @@ redirect_from:
 | `skeleton`                              | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown.                                                                                                                                                                                                                                                                                                                   |
 | `tooltip`                               | _(optional)_ Provide a string or a React Element to be shown as the tooltip content.                                                                                                                                                                                                                                                                                                                  |
 | [Space](/uilib/layout/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                                                                                                                                                                                                                                                                                                                 |
+
+## Translations
+
+<TranslationsTable localeKey="NumberFormat" />
diff --git a/...es/dnb-design-system-portal/src/docs/uilib/components/pagination/properties.mdx b/...es/dnb-design-system-portal/src/docs/uilib/components/pagination/properties.mdx
@@ -2,6 +2,8 @@
 showTabs: true
 ---
 
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
+
 ## Properties
 
 | Properties                              | Description                                                                                                                                                                                                                                                                                        |
@@ -37,6 +39,10 @@ showTabs: true
 | `skeleton`                              | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown.                                                                                                                                                                                                                |
 | [Space](/uilib/layout/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                                                                                                                                                                                                              |
 
+## Translations
+
+<TranslationsTable localeKey="Pagination" />
+
 ### Content as a render prop
 
 The content can be either a function or a React Node. A function may be more useful if `infinity` mode is used.

diff --git a/...esign-system-portal/src/docs/uilib/components/progress-indicator/properties.mdx b/...esign-system-portal/src/docs/uilib/components/progress-indicator/properties.mdx
@@ -4,6 +4,7 @@ redirect_from:
   - /uilib/components/progress/properties
 ---
 
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
 import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
 import {
   ProgressIndicatorProperties,
@@ -15,6 +16,10 @@ import {
 
 <PropertiesTable props={ProgressIndicatorProperties} showDefaultValue />
 
+## Translations
+
+<TranslationsTable localeKey="ProgressIndicator" />
+
 ### Data object `customColors`
 
 <PropertiesTable props={CustomColorsData} showDefaultValue />

diff --git a/...ages/dnb-design-system-portal/src/docs/uilib/components/skeleton/properties.mdx b/...ages/dnb-design-system-portal/src/docs/uilib/components/skeleton/properties.mdx
@@ -2,6 +2,8 @@
 showTabs: true
 ---
 
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
+
 ## Properties
 
 | Properties                              | Description                                                                                                                                      |
@@ -13,3 +15,7 @@ showTabs: true
 | `aria_ready`                            | _(optional)_ Is used for screen reader text translation, defined in the translation files. You can set a custom text if needed.                  |
 | `element`                               | _(optional)_ Set any HTML element type you have to use. A couple of aria attributes will be set on this element while active. Defaults to `div`. |
 | [Space](/uilib/layout/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                                                            |
+
+## Translations
+
+<TranslationsTable localeKey="Skeleton" />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/slider/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/slider/properties.mdx
@@ -3,12 +3,17 @@ showTabs: true
 ---
 
 import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
 import { SliderProperties } from '@dnb/eufemia/src/components/slider/SliderDocs'
 
 ## Properties
 
 <PropertiesTable props={SliderProperties} />
 
+## Translations
+
+<TranslationsTable localeKey="Slider" />
+
 ## Extensions
 
 A Slider Extension should be an object with the following properties:

diff --git a/...nb-design-system-portal/src/docs/uilib/components/step-indicator/properties.mdx b/...nb-design-system-portal/src/docs/uilib/components/step-indicator/properties.mdx
@@ -2,6 +2,8 @@
 showTabs: true
 ---
 
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
+
 ## Component Properties
 
 | Properties                              | Description                                                                                                                                                                                                                                                |
@@ -48,3 +50,7 @@ const steps = [
   },
 ]
 ```
+
+## Translations
+
+<TranslationsTable localeKey="StepIndicator" />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/table/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/table/properties.mdx
@@ -2,6 +2,7 @@
 showTabs: true
 ---
 
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
 import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
 import {
   TableProperties,
@@ -27,3 +28,7 @@ import {
 ### Table Data `<Td>`
 
 <PropertiesTable props={TdProperties} showDefaultValue />
+
+## Table Translations
+
+<TranslationsTable localeKey="Table" />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/tag/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/tag/properties.mdx
@@ -2,6 +2,8 @@
 showTabs: true
 ---
 
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
+
 ## Properties
 
 ### `Tag` properties
@@ -27,3 +29,7 @@ showTabs: true
 | `className`                             | _(optional)_ Custom className for the component root.                                                                                       |
 | [Space](/uilib/layout/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                                                       |
 | `skeleton`                              | _(optional)_ Applies loading skeleton.                                                                                                      |
+
+### `Tag` translations
+
+<TranslationsTable localeKey="Tag" />
diff --git a/...ages/dnb-design-system-portal/src/docs/uilib/components/timeline/properties.mdx b/...ages/dnb-design-system-portal/src/docs/uilib/components/timeline/properties.mdx
@@ -2,6 +2,8 @@
 showTabs: true
 ---
 
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
+
 ## Properties
 
 ### `Timeline` properties
@@ -25,3 +27,7 @@ showTabs: true
 | `icon`        | _(optional)_ Override icon displaying on the left side (Not recommended). Default: `check` for state `completed`, `pin` for state `current`, and `calendar` for state `upcoming` . |
 | `iconAlt`     | _(optional)_ Alt label describing the icon provided.                                                                                                                               |
 | `skeleton`    | _(optional)_ Applies loading skeleton.                                                                                                                                             |
+
+### `Timeline.Item` translations
+
+<TranslationsTable localeKey="TimelineItem" />
diff --git a/.../dnb-design-system-portal/src/docs/uilib/extensions/payment-card/properties.mdx b/.../dnb-design-system-portal/src/docs/uilib/extensions/payment-card/properties.mdx
@@ -2,6 +2,8 @@
 showTabs: true
 ---
 
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
+
 ## Card Properties
 
 | Properties                              | Description                                                                                                                                              |
@@ -103,3 +105,7 @@ showTabs: true
 | `Expired`        |
 | `Blocked`        |
 | `Active`         |
+
+## Card Translations
+
+<TranslationsTable localeKey="PaymentCard" />