feat(i18n): add en-sg locale for AddRowFooter (#7867)

Extract text from AddRowFooter into a locale, rewording as needed
to suit. Ensure that we honour the use of ICU conventions for plurals

frontend/src/i18n/locales/features/public-form/en-sg.ts

@@ -1,3 +1,4 @@
+import { enSG as table } from './table'
 import { PublicForm } from '.'
 
 export const enSG: PublicForm = {
@@ -30,5 +31,6 @@ export const enSG: PublicForm = {
       proceedToPay: 'Proceed to pay',
       submitNow: 'Submit now',
     },
+    table,
   },
 }

frontend/src/i18n/locales/features/public-form/index.ts

@@ -1,3 +1,5 @@
+import { Table } from './table'
+
 export * from './en-sg'
 
 export interface PublicForm {
@@ -24,5 +26,6 @@ export interface PublicForm {
       proceedToPay: string
       submitNow: string
     }
+    table: Table
   }
 }

frontend/src/i18n/locales/features/public-form/table/en-sg.ts

@@ -0,0 +1,9 @@
+import { Table } from '.'
+
+export const enSG: Table = {
+  addAnotherRow: 'Add another row',
+  addAnotherRowAria: 'to the table.',
+  rowAria: 'The table currently has ',
+  row: '{count, plural, =1 {# row} other {# rows}}',
+  rowMax: '{currentRows} out of max {count, plural, =1 {# row} other {# rows}}',
+}

frontend/src/i18n/locales/features/public-form/table/index.ts

@@ -0,0 +1,9 @@
+export * from './en-sg'
+
+export interface Table {
+  addAnotherRow: string
+  addAnotherRowAria: string
+  rowAria: string
+  row: string
+  rowMax: string
+}

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

@@ -1,7 +1,7 @@
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { BiPlus } from 'react-icons/bi'
 import { Box, Stack, Text, VisuallyHidden } from '@chakra-ui/react'
-import simplur from 'simplur'
 
 import Button from '~components/Button'
 
@@ -18,19 +18,18 @@ export const AddRowFooter = ({
   maxRows,
   handleAddRow: handleAddRowProp,
 }: AddRowFooterProps): JSX.Element => {
+  const { t } = useTranslation()
+
   // 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])
-
-  const maxRowAriaDescription = useMemo(() => {
-    return maxRows
-      ? simplur`There [is|are] currently ${currentRows} out of max ${maxRows} row[|s].`
-      : simplur`There [is|are] currently ${currentRows} row[|s].`
-  }, [currentRows, maxRows])
+  const maxRowDescription = Number.isInteger(maxRows)
+    ? t('features.publicForm.components.table.rowMax', {
+        currentRows,
+        count: Number(maxRows),
+      })
+    : t('features.publicForm.components.table.row', {
+        count: currentRows,
+      })
 
   const handleAddRow = useCallback(() => {
     handleAddRowProp()
@@ -51,15 +50,16 @@ export const AddRowFooter = ({
         type="button"
         onClick={handleAddRow}
       >
-        Add another row
+        {t('features.publicForm.components.table.addAnotherRow')}
         <VisuallyHidden>
-          to the table field. {maxRowAriaDescription}
+          {t('features.publicForm.components.table.addAnotherRowAria')}
         </VisuallyHidden>
       </Button>
 
       <Box>
         <VisuallyHidden aria-live={hasAddedRows ? 'polite' : 'off'} aria-atomic>
-          The table field currently has {maxRowDescription}
+          {t('features.publicForm.components.table.rowAria')}{' '}
+          {maxRowDescription}
         </VisuallyHidden>
 
         <Text aria-hidden textStyle="body-2" color="secondary.400">