[i18n/Audio] Adding renderers and helpers for remaining election stri…

…ngs (#4086)
votingworks · Oct 12, 2023 · 7022baa · 7022baa
1 parent a6d34fd
commit 7022baa
Show file tree

Hide file tree

Showing 25 changed files with 783 additions and 211 deletions.
diff --git a/apps/mark/frontend/src/app_cardless_voting.test.tsx b/apps/mark/frontend/src/app_cardless_voting.test.tsx
@@ -153,7 +153,7 @@ test('Cardless Voting Flow', async () => {
   });
 
   // Voter Ballot Style is active
-  await findByTextWithMarkup('Your ballot has 20 contests.');
+  await findByTextWithMarkup('Number of contests on your ballot: 20');
   screen.getByText(/(12)/);
   fireEvent.click(screen.getByText('Start Voting'));
 
@@ -198,7 +198,7 @@ test('Cardless Voting Flow', async () => {
   });
 
   // Voter Ballot Style is active
-  await findByTextWithMarkup('Your ballot has 20 contests.');
+  await findByTextWithMarkup('Number of contests on your ballot: 20');
   screen.getByText(/(12)/);
   fireEvent.click(screen.getByText('Start Voting'));
 
@@ -289,7 +289,7 @@ test('Another Voter submits blank ballot and clicks Done', async () => {
   });
 
   // Voter Ballot Style is active
-  await findByTextWithMarkup('Your ballot has 20 contests.');
+  await findByTextWithMarkup('Number of contests on your ballot: 20');
   screen.getByText(/(12)/);
   fireEvent.click(screen.getByText('Start Voting'));
 
@@ -444,7 +444,7 @@ test('poll worker must select a precinct first', async () => {
   });
 
   // Voter Ballot Style is active
-  await findByTextWithMarkup('Your ballot has 20 contests.');
+  await findByTextWithMarkup('Number of contests on your ballot: 20');
   screen.getByText(/(12)/);
   userEvent.click(screen.getByText('Start Voting'));
 
@@ -493,7 +493,7 @@ test('poll worker must select a precinct first', async () => {
   });
 
   // Voter Ballot Style is active
-  await findByTextWithMarkup('Your ballot has 20 contests.');
+  await findByTextWithMarkup('Number of contests on your ballot: 20');
   screen.getByText(/(12)/);
   fireEvent.click(screen.getByText('Start Voting'));
 

diff --git a/apps/mark/frontend/src/app_end_to_end.test.tsx b/apps/mark/frontend/src/app_end_to_end.test.tsx
@@ -192,7 +192,7 @@ test('MarkAndPrint end-to-end flow', async () => {
     precinctId: '23',
   });
 
-  await findByTextWithMarkup('Your ballot has 20 contests.');
+  await findByTextWithMarkup('Number of contests on your ballot: 20');
   screen.getByText(/Center Springfield/);
   screen.getByText(/(12)/);
 

diff --git a/apps/mark/frontend/src/components/__snapshots__/election_info.test.tsx.snap b/apps/mark/frontend/src/components/__snapshots__/election_info.test.tsx.snap
@@ -268,7 +268,12 @@ exports[`renders ElectionInfo with hash when specified 1`] = `
       <h1
         class="c2"
       >
-         General Election
+         
+        <span
+          class=""
+        >
+          General Election
+        </span>
       </h1>
       <p
         aria-label="November 3, 2020. Franklin County, State of Hamilton. Center Springfield."
@@ -277,7 +282,9 @@ exports[`renders ElectionInfo with hash when specified 1`] = `
         <span
           class="c4"
         >
-          November 3, 2020
+          <span>
+            November 3, 2020
+          </span>
         </span>
         <br />
         <span
@@ -286,12 +293,26 @@ exports[`renders ElectionInfo with hash when specified 1`] = `
           <span
             class="c6"
           >
-            Center Springfield
-            , 
+            <span
+              class=""
+            >
+              Center Springfield
+            </span>
+            ,
+             
+          </span>
+          <span
+            class=""
+          >
+            Franklin County
+          </span>
+          ,
+           
+          <span
+            class=""
+          >
+            State of Hamilton
           </span>
-          Franklin County
-          , 
-          State of Hamilton
         </span>
       </p>
     </div>
@@ -567,7 +588,12 @@ exports[`renders ElectionInfo without hash by default 1`] = `
       <h1
         class="c2"
       >
-         General Election
+         
+        <span
+          class=""
+        >
+          General Election
+        </span>
       </h1>
       <p
         aria-label="November 3, 2020. Franklin County, State of Hamilton. Center Springfield."
@@ -576,7 +602,9 @@ exports[`renders ElectionInfo without hash by default 1`] = `
         <span
           class="c4"
         >
-          November 3, 2020
+          <span>
+            November 3, 2020
+          </span>
         </span>
         <br />
         <span
@@ -585,12 +613,26 @@ exports[`renders ElectionInfo without hash by default 1`] = `
           <span
             class="c6"
           >
-            Center Springfield
-            , 
+            <span
+              class=""
+            >
+              Center Springfield
+            </span>
+            ,
+             
+          </span>
+          <span
+            class=""
+          >
+            Franklin County
+          </span>
+          ,
+           
+          <span
+            class=""
+          >
+            State of Hamilton
           </span>
-          Franklin County
-          , 
-          State of Hamilton
         </span>
       </p>
     </div>

diff --git a/apps/mark/frontend/src/components/election_info.test.tsx b/apps/mark/frontend/src/components/election_info.test.tsx
@@ -1,6 +1,7 @@
 import { singlePrecinctSelectionFor } from '@votingworks/utils';
 
 import { electionGeneralDefinition as electionDefinition } from '@votingworks/fixtures';
+import { hasTextAcrossElements } from '@votingworks/test-utils';
 import { render, screen } from '../../test/react_testing_library';
 import { ElectionInfo } from './election_info';
 
@@ -33,5 +34,5 @@ test('renders with ballot style id', () => {
     />
   );
   screen.getByText(/Center Springfield/);
-  screen.getByText(/ballot style: 12/i);
+  screen.getByText(hasTextAcrossElements(/ballot style: 12/i));
 });
diff --git a/apps/mark/frontend/src/components/election_info.tsx b/apps/mark/frontend/src/components/election_info.tsx
@@ -4,13 +4,22 @@ import styled from 'styled-components';
 import {
   BallotStyleId,
   ElectionDefinition,
-  getPartyPrimaryAdjectiveFromBallotStyle,
   PrecinctSelection,
 } from '@votingworks/types';
-import { getPrecinctSelectionName, format } from '@votingworks/utils';
+import { format, getPrecinctSelectionName } from '@votingworks/utils';
 
-import { NoWrap, H1, P, Caption, Font, Seal } from '@votingworks/ui';
-import pluralize from 'pluralize';
+import {
+  NoWrap,
+  H1,
+  P,
+  Caption,
+  Font,
+  Seal,
+  electionStrings,
+  appStrings,
+  PrecinctSelectionName,
+  PrimaryElectionTitlePrefix,
+} from '@votingworks/ui';
 
 const Container = styled.div`
   align-items: center;
@@ -36,18 +45,32 @@ export function ElectionInfo({
   contestCount,
 }: Props): JSX.Element {
   const { election } = electionDefinition;
-  const { title: t, state, county, date, seal } = election;
+  const { state, county, date, seal } = election;
+
   const precinctName =
     precinctSelection &&
     getPrecinctSelectionName(election.precincts, precinctSelection);
-  const partyPrimaryAdjective = ballotStyleId
-    ? getPartyPrimaryAdjectiveFromBallotStyle({
-        election,
-        ballotStyleId,
-      })
-    : '';
-  const title = `${partyPrimaryAdjective} ${t}`;
+
+  const partyPrimaryAdjective = (
+    <React.Fragment>
+      {ballotStyleId && (
+        <PrimaryElectionTitlePrefix
+          ballotStyleId={ballotStyleId}
+          election={election}
+        />
+      )}{' '}
+    </React.Fragment>
+  );
+
+  const title = (
+    <React.Fragment>
+      {partyPrimaryAdjective}
+      {electionStrings.electionTitle(election)}
+    </React.Fragment>
+  );
+
   const electionDate = format.localeLongDate(new Date(date));
+
   return (
     <Container>
       <Seal seal={seal} />
@@ -56,27 +79,37 @@ export function ElectionInfo({
         <P
           aria-label={`${electionDate}. ${county.name}, ${state}. ${precinctName}.`}
         >
-          <Font weight="bold">{electionDate}</Font>
+          <Font weight="bold">{appStrings.date(new Date(date))}</Font>
           <br />
           <Caption>
-            {precinctName && <NoWrap>{precinctName}, </NoWrap>}
-            {county.name}, {state}
+            {/* TODO(kofi): Use more language-agnostic delimiter (e.g. '|') or find way to translate commas. */}
+            {precinctSelection && (
+              <NoWrap>
+                <PrecinctSelectionName
+                  electionPrecincts={election.precincts}
+                  precinctSelection={precinctSelection}
+                />
+                ,{' '}
+              </NoWrap>
+            )}
+            {electionStrings.countyName(county)},{' '}
+            {electionStrings.stateName(election)}
           </Caption>
           {ballotStyleId && (
             <React.Fragment>
               <br />
-              <Caption>Ballot style: {ballotStyleId}</Caption>
+              <Caption>
+                {appStrings.labelBallotStyle()}{' '}
+                {electionStrings.ballotStyleId(ballotStyleId)}
+              </Caption>
             </React.Fragment>
           )}
           {contestCount && (
             <React.Fragment>
               <br />
               <Caption>
-                Your ballot has{' '}
-                <Font weight="bold">
-                  {pluralize('contest', contestCount, true)}
-                </Font>
-                .
+                {appStrings.labelNumBallotContests()}{' '}
+                <Font weight="bold">{appStrings.number(contestCount)}</Font>
               </Caption>
             </React.Fragment>
           )}