feat: add fixed translations for add row label

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
 }

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,

frontend/src/constants/fixedTranslations.ts

@@ -1,3 +1,5 @@
+import simplur from 'simplur'
+
 import { Language } from '~shared/types'
 
 export const OTHERS_TRANSLATED_LABEL: Record<Language, string> = {
@@ -20,3 +22,46 @@ export const NOTHING_FOUND_LABEL_TRANSLATIONS: Record<Language, string> = {
   [Language.MALAY]: 'Tiada hasil yang sepadan',
   [Language.TAMIL]: 'முடிவுகள் எதுவும் பொருந்தவில்லை',
 }
+
+export const MAXIMUM_FILE_LABEL_TRANSLATIONS: Record<Language, string> = {
+  [Language.ENGLISH]: 'Maximum file size:',
+  [Language.CHINESE]: '文件限制：不超过',
+  [Language.MALAY]: 'Saiz fail maksimum:',
+  [Language.TAMIL]: 'கோப்பின் அதிகபட்ச அளவு:',
+}
+
+export const ADD_ANOTHER_ROW_LABEL_TRANSLATIONS: Record<Language, string> = {
+  [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]`
+  }
+}

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, VerifyTranslations> = {
-  [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<FormFieldWithId<VerifiableFieldBase>>

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, VerifyTranslations> = {
+  [Language.ENGLISH]: { Verify: 'Verify', Verified: 'Verified' },
+  [Language.CHINESE]: { Verify: '验证', Verified: '已验证' },
+  [Language.MALAY]: { Verify: 'Sahkan', Verified: 'Disahkan' },
+  [Language.TAMIL]: {
+    Verify: 'சரிபார்க்கவும்',
+    Verified: 'சரிபார்க்கப்பட்டது',
+  },
+}

frontend/src/templates/Field/Table/AddRowFooter.tsx

@@ -3,28 +3,38 @@ 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 {
   isDisabled?: boolean
   handleAddRow: () => void
   currentRows: number
   maxRows: number | ''
+  selectedLanguage?: Language
 }
 
 export const AddRowFooter = ({
   isDisabled,
   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 (
     <Stack
       mt="0.75rem"
@@ -51,7 +65,7 @@ export const AddRowFooter = ({
         type="button"
         onClick={handleAddRow}
       >
-        Add another row
+        {addRowLabel}
         <VisuallyHidden>
           to the table field. {maxRowAriaDescription}
         </VisuallyHidden>

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}
     </TableFieldContainer>