diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Section/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Section/properties.mdx
index 13ffe9097d2..99d16eeb58d 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Section/properties.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Section/properties.mdx
@@ -5,7 +5,12 @@ hideInMenu: true
import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
import { SectionProperties } from '@dnb/eufemia/src/extensions/forms/Form/Section/SectionDocs'
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
## Properties
+
+## Translations
+
+
diff --git a/packages/dnb-design-system-portal/src/shared/parts/PropertiesTable.tsx b/packages/dnb-design-system-portal/src/shared/parts/PropertiesTable.tsx
index a59eb0d91ae..14d81e7e591 100644
--- a/packages/dnb-design-system-portal/src/shared/parts/PropertiesTable.tsx
+++ b/packages/dnb-design-system-portal/src/shared/parts/PropertiesTable.tsx
@@ -21,7 +21,7 @@ const colorString = 'var(--color-fire-red)'
const colorType = 'var(--color-violet)'
const colorUndefined = 'var(--color-black-55)'
-const FormattedCode = ({
+export const FormattedCode = ({
variant,
strikethrough,
children,
@@ -178,7 +178,7 @@ function convertToCamelCase(doc: string, keys: string[]) {
return doc
}
-function formatName(name: string): React.ReactNode | string {
+export function formatName(name: string): React.ReactNode | string {
if (name.includes('/')) {
return {name}
}
diff --git a/packages/dnb-design-system-portal/src/shared/parts/TranslationsTable.tsx b/packages/dnb-design-system-portal/src/shared/parts/TranslationsTable.tsx
new file mode 100644
index 00000000000..7dfcadefca7
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/shared/parts/TranslationsTable.tsx
@@ -0,0 +1,60 @@
+import styled from '@emotion/styled'
+import { Table, Td, Th, Tr } from '@dnb/eufemia/src'
+import { extendDeep } from '@dnb/eufemia/src/shared/component-helper'
+import globalTranslations from '@dnb/eufemia/src/shared/locales'
+import formsTranslations from '@dnb/eufemia/src/extensions/forms/constants/locales'
+import { FormattedCode, formatName } from './PropertiesTable'
+
+const StyledTable = styled(Table)`
+ td {
+ white-space: nowrap;
+ }
+`
+
+const allTranslations = extendDeep(
+ {},
+ globalTranslations,
+ formsTranslations,
+)
+
+export default function TranslationsTable({ name }: { name?: string }) {
+ const entries = {}
+
+ Object.entries(allTranslations).forEach(([locale, translations]) => {
+ Object.entries(translations[name]).forEach(([key, translation]) => {
+ entries[key] = Object.assign(entries[key] || {}, {
+ [locale]: translation,
+ })
+ })
+ })
+
+ const locales = Object.keys(allTranslations)
+ const tableRows = Object.entries(entries).map(([key, values]) => {
+ return (
+
+
+ {formatName(key)}
+ |
+ {Object.entries(values).map(([locale, value], i) => {
+ return {formatName(value)} |
+ })}
+
+ )
+ })
+
+ return (
+
+
+
+
+ Key |
+ {locales.map((locale) => (
+ {locale} |
+ ))}
+
+
+ {tableRows}
+
+
+ )
+}