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} + + + ) +}