docs: add translations table

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
 
 <PropertiesTable props={SectionProperties} />
+
+## Translations
+
+<TranslationsTable name="Section" />

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 <ReactMarkdown components={components}>{name}</ReactMarkdown>
   }

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 (
+      <Tr key={key}>
+        <Td>
+          <FormattedCode variant="prop">{formatName(key)}</FormattedCode>
+        </Td>
+        {Object.entries(values).map(([locale, value], i) => {
+          return <Td key={i + locale}>{formatName(value)}</Td>
+        })}
+      </Tr>
+    )
+  })
+
+  return (
+    <Table.ScrollView>
+      <StyledTable>
+        <thead>
+          <Tr>
+            <Th>Key</Th>
+            {locales.map((locale) => (
+              <Th key={locale}>{locale}</Th>
+            ))}
+          </Tr>
+        </thead>
+        <tbody>{tableRows}</tbody>
+      </StyledTable>
+    </Table.ScrollView>
+  )
+}