From 2b5a9ec6d664065d7fa4f4feb1fbbf86a7ee48fd Mon Sep 17 00:00:00 2001 From: Siddarth Date: Tue, 10 Dec 2024 15:30:47 +0800 Subject: [PATCH] feat: add fixed translations for add row label --- frontend/src/components/Checkbox/Checkbox.tsx | 2 +- .../Field/Attachment/Attachment.tsx | 2 +- .../components/Field/Attachment/constants.ts | 8 ---- frontend/src/constants/fixedTranslations.ts | 45 +++++++++++++++++++ .../VerifiableFieldContainer.tsx | 15 +------ .../VerifiableFieldContainer/constants.ts | 16 +++++++ .../templates/Field/Table/AddRowFooter.tsx | 24 +++++++--- .../src/templates/Field/Table/TableField.tsx | 1 + 8 files changed, 84 insertions(+), 29 deletions(-) delete mode 100644 frontend/src/components/Field/Attachment/constants.ts create mode 100644 frontend/src/features/verifiable-fields/components/VerifiableFieldContainer/constants.ts diff --git a/frontend/src/components/Checkbox/Checkbox.tsx b/frontend/src/components/Checkbox/Checkbox.tsx index 376c5ed5fc..38a4e0243d 100644 --- a/frontend/src/components/Checkbox/Checkbox.tsx +++ b/frontend/src/components/Checkbox/Checkbox.tsx @@ -29,7 +29,7 @@ export interface CheckboxProps extends ChakraCheckboxProps { colorScheme?: FieldColorScheme /** - * Selected language to display label. + * Selected language to get translated label. */ selectedLanguage?: Language } diff --git a/frontend/src/components/Field/Attachment/Attachment.tsx b/frontend/src/components/Field/Attachment/Attachment.tsx index 62db491870..7d1377c051 100644 --- a/frontend/src/components/Field/Attachment/Attachment.tsx +++ b/frontend/src/components/Field/Attachment/Attachment.tsx @@ -18,12 +18,12 @@ import { Language } from '~shared/types' import { ATTACHMENT_THEME_KEY } from '~theme/components/Field/Attachment' import { ThemeColorScheme } from '~theme/foundations/colours' +import { MAXIMUM_FILE_LABEL_TRANSLATIONS } from '~constants/fixedTranslations' import { downloadFile } from './utils/downloadFile' import { AttachmentStylesProvider } from './AttachmentContext' import { AttachmentDropzone } from './AttachmentDropzone' import { AttachmentFileInfo } from './AttachmentFileInfo' -import { MAXIMUM_FILE_LABEL_TRANSLATIONS } from './constants' import { getFileExtension, getInvalidFileExtensionsInZip, diff --git a/frontend/src/components/Field/Attachment/constants.ts b/frontend/src/components/Field/Attachment/constants.ts deleted file mode 100644 index fe959ce623..0000000000 --- a/frontend/src/components/Field/Attachment/constants.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { Language } from '~shared/types' - -export const MAXIMUM_FILE_LABEL_TRANSLATIONS: Record = { - [Language.ENGLISH]: 'Maximum file size:', - [Language.CHINESE]: '文件限制：不超过', - [Language.MALAY]: 'Saiz fail maksimum:', - [Language.TAMIL]: 'கோப்பின் அதிகபட்ச அளவு:', -} diff --git a/frontend/src/constants/fixedTranslations.ts b/frontend/src/constants/fixedTranslations.ts index a99da12823..822674bf3d 100644 --- a/frontend/src/constants/fixedTranslations.ts +++ b/frontend/src/constants/fixedTranslations.ts @@ -1,3 +1,5 @@ +import simplur from 'simplur' + import { Language } from '~shared/types' export const OTHERS_TRANSLATED_LABEL: Record = { @@ -20,3 +22,46 @@ export const NOTHING_FOUND_LABEL_TRANSLATIONS: Record = { [Language.MALAY]: 'Tiada hasil yang sepadan', [Language.TAMIL]: 'முடிவுகள் எதுவும் பொருந்தவில்லை', } + +export const MAXIMUM_FILE_LABEL_TRANSLATIONS: Record = { + [Language.ENGLISH]: 'Maximum file size:', + [Language.CHINESE]: '文件限制：不超过', + [Language.MALAY]: 'Saiz fail maksimum:', + [Language.TAMIL]: 'கோப்பின் அதிகபட்ச அளவு:', +} + +export const ADD_ANOTHER_ROW_LABEL_TRANSLATIONS: Record = { + [Language.ENGLISH]: 'Add another row', + [Language.CHINESE]: '添加另一行', + [Language.MALAY]: 'Tambah satu lagi baris', + [Language.TAMIL]: 'மற்றொரு வரிசையைச் சேர்க்கவும்', +} + +export function getTranslationsForTableFieldRows({ + maxRows, + currentRows, + selectedLanguage, +}: { + maxRows: number | '' + currentRows: number + selectedLanguage: Language +}) { + switch (selectedLanguage) { + case Language.CHINESE: + return maxRows + ? `${currentRows} 行，最多 ${maxRows} 行` + : `${currentRows} 行` + case Language.MALAY: + return maxRows + ? `${currentRows} daripada maksimum ${maxRows} baris` + : `${currentRows} baris` + case Language.TAMIL: + return maxRows + ? `அதிகபட்சம் ${currentRows} வரிசைகளுக்கு ${maxRows}` + : `வரிசைகளுக்கு ${currentRows}` + default: + return maxRows + ? simplur`${currentRows} out of max ${maxRows} row[|s]` + : simplur`${currentRows} row[|s]` + } +} diff --git a/frontend/src/features/verifiable-fields/components/VerifiableFieldContainer/VerifiableFieldContainer.tsx b/frontend/src/features/verifiable-fields/components/VerifiableFieldContainer/VerifiableFieldContainer.tsx index 0514e42d0f..5bd1b91bbf 100644 --- a/frontend/src/features/verifiable-fields/components/VerifiableFieldContainer/VerifiableFieldContainer.tsx +++ b/frontend/src/features/verifiable-fields/components/VerifiableFieldContainer/VerifiableFieldContainer.tsx @@ -12,20 +12,7 @@ import { VerifiableFieldBase, VerifiableFieldSchema } from '../../types' import { useVerifiableField } from '../../VerifiableFieldContext' import { VerificationBox } from '../VerificationBox' -type VerifyTranslations = { - Verify: string - Verified: string -} - -const VERIFY_LABEL_TRANSLATIONS: Record = { - [Language.ENGLISH]: { Verify: 'Verify', Verified: 'Verified' }, - [Language.CHINESE]: { Verify: '验证', Verified: '已验证' }, - [Language.MALAY]: { Verify: 'Sahkan', Verified: 'Disahkan' }, - [Language.TAMIL]: { - Verify: 'சரிபார்க்கவும்', - Verified: 'சரிபார்க்கப்பட்டது', - }, -} +import { VERIFY_LABEL_TRANSLATIONS } from './constants' export interface BaseVerifiableFieldProps extends BaseFieldProps { schema: VerifiableFieldSchema> diff --git a/frontend/src/features/verifiable-fields/components/VerifiableFieldContainer/constants.ts b/frontend/src/features/verifiable-fields/components/VerifiableFieldContainer/constants.ts new file mode 100644 index 0000000000..06f559549f --- /dev/null +++ b/frontend/src/features/verifiable-fields/components/VerifiableFieldContainer/constants.ts @@ -0,0 +1,16 @@ +import { Language } from '~shared/types' + +type VerifyTranslations = { + Verify: string + Verified: string +} + +export const VERIFY_LABEL_TRANSLATIONS: Record = { + [Language.ENGLISH]: { Verify: 'Verify', Verified: 'Verified' }, + [Language.CHINESE]: { Verify: '验证', Verified: '已验证' }, + [Language.MALAY]: { Verify: 'Sahkan', Verified: 'Disahkan' }, + [Language.TAMIL]: { + Verify: 'சரிபார்க்கவும்', + Verified: 'சரிபார்க்கப்பட்டது', + }, +} diff --git a/frontend/src/templates/Field/Table/AddRowFooter.tsx b/frontend/src/templates/Field/Table/AddRowFooter.tsx index a5e44af282..36c61c15a3 100644 --- a/frontend/src/templates/Field/Table/AddRowFooter.tsx +++ b/frontend/src/templates/Field/Table/AddRowFooter.tsx @@ -3,6 +3,12 @@ import { BiPlus } from 'react-icons/bi' import { Box, Stack, Text, VisuallyHidden } from '@chakra-ui/react' import simplur from 'simplur' +import { Language } from '~shared/types' + +import { + ADD_ANOTHER_ROW_LABEL_TRANSLATIONS, + getTranslationsForTableFieldRows, +} from '~constants/fixedTranslations' import Button from '~components/Button' interface AddRowFooterProps { @@ -10,6 +16,7 @@ interface AddRowFooterProps { handleAddRow: () => void currentRows: number maxRows: number | '' + selectedLanguage?: Language } export const AddRowFooter = ({ @@ -17,14 +24,17 @@ export const AddRowFooter = ({ currentRows, maxRows, handleAddRow: handleAddRowProp, + selectedLanguage = Language.ENGLISH, }: AddRowFooterProps): JSX.Element => { // State to decide whether to announce row changes to screen readers const [hasAddedRows, setHasAddedRows] = useState(false) const maxRowDescription = useMemo(() => { - return maxRows - ? simplur`${currentRows} out of max ${maxRows} row[|s]` - : simplur`${currentRows} row[|s]` - }, [currentRows, maxRows]) + return getTranslationsForTableFieldRows({ + maxRows, + currentRows, + selectedLanguage, + }) + }, [currentRows, maxRows, selectedLanguage]) const maxRowAriaDescription = useMemo(() => { return maxRows @@ -37,6 +47,10 @@ export const AddRowFooter = ({ setHasAddedRows(true) }, [handleAddRowProp]) + const addRowLabel = useMemo(() => { + return ADD_ANOTHER_ROW_LABEL_TRANSLATIONS[selectedLanguage] + }, [selectedLanguage]) + return ( - Add another row + {addRowLabel} to the table field. {maxRowAriaDescription} diff --git a/frontend/src/templates/Field/Table/TableField.tsx b/frontend/src/templates/Field/Table/TableField.tsx index 549f4464e7..11853f306f 100644 --- a/frontend/src/templates/Field/Table/TableField.tsx +++ b/frontend/src/templates/Field/Table/TableField.tsx @@ -273,6 +273,7 @@ export const TableField = ({ currentRows={fields.length} maxRows={schema.maximumRows} handleAddRow={handleAddRow} + selectedLanguage={selectedLanguage} /> ) : null}