From 0c3f18cbfdb97600c011e6e03600a7efb673f5d5 Mon Sep 17 00:00:00 2001 From: Beau Smith Date: Mon, 27 May 2019 14:21:28 -0700 Subject: [PATCH] Interstitials --- cypress/tests/font-settings.js | 1 + cypress/tests/scroll-buttons.js | 2 + cypress/tests/scroll-to-contest.js | 4 +- src/App.test.tsx | 8 +- src/AppActivationCodes.test.tsx | 5 +- src/AppAlternateBallotStyle.test.tsx | 5 +- src/AppContestMultiSeat.test.tsx | 8 +- src/AppContestOvervote.test.tsx | 5 + src/AppContestWriteIn.test.tsx | 8 +- src/AppContestYesNo.test.tsx | 8 +- src/AppEndToEnd.test.tsx | 14 +- .../AppContestOvervote.test.tsx.snap | 62 +- src/__snapshots__/AppEndToEnd.test.tsx.snap | 983 +++++++++++------- .../AppSetElection.test.tsx.snap | 10 +- src/components/Ballot.test.tsx | 27 +- src/components/Ballot.tsx | 2 + src/components/Breadcrumbs.tsx | 101 ++ src/components/Button.test.tsx | 10 + src/components/Button.tsx | 11 +- src/components/ButtonBar.tsx | 2 +- src/components/Main.tsx | 1 + src/components/Prose.tsx | 4 +- src/components/Text.tsx | 4 + .../__snapshots__/Ballot.test.tsx.snap | 5 +- .../__snapshots__/Button.test.tsx.snap | 61 +- .../__snapshots__/ButtonBar.test.tsx.snap | 2 +- .../CandidateContest.test.tsx.snap | 16 +- .../__snapshots__/LinkButton.test.tsx.snap | 21 +- .../__snapshots__/Main.test.tsx.snap | 3 + .../__snapshots__/Prose.test.tsx.snap | 12 +- .../__snapshots__/YesNoContest.test.tsx.snap | 8 +- src/lib/gamepad.test.tsx | 7 +- src/pages/CastBallotPage.tsx | 133 ++- src/pages/InstructionsPage.tsx | 40 + src/pages/PreReviewPage.tsx | 73 +- src/pages/PrintPage.tsx | 148 +-- src/pages/StartPage.tsx | 2 +- .../CastBallotPage.test.tsx.snap | 329 ++++-- .../__snapshots__/ContestPage.test.tsx.snap | 39 +- .../__snapshots__/HelpPage.test.tsx.snap | 5 +- .../__snapshots__/NotFoundPage.test.tsx.snap | 10 +- .../__snapshots__/PreReviewPage.test.tsx.snap | 329 +++++- .../__snapshots__/PrintPage.test.tsx.snap | 967 ++++------------- .../__snapshots__/ReviewPage.test.tsx.snap | 48 +- .../__snapshots__/SettingsPage.test.tsx.snap | 10 +- .../__snapshots__/StartPage.test.tsx.snap | 10 +- 46 files changed, 2036 insertions(+), 1527 deletions(-) create mode 100644 src/components/Breadcrumbs.tsx create mode 100644 src/pages/InstructionsPage.tsx diff --git a/cypress/tests/font-settings.js b/cypress/tests/font-settings.js index 975dab7..aca4f36 100644 --- a/cypress/tests/font-settings.js +++ b/cypress/tests/font-settings.js @@ -18,6 +18,7 @@ describe('Font Settings', () => { }) cy.contains('Submit').click({ force: true }) cy.contains('Get Started').click() + cy.contains('Start Voting').click() cy.contains('Settings').click() cy.contains('Adjust the following settings to meet your needs.') .should('have.css', 'font-size') diff --git a/cypress/tests/scroll-buttons.js b/cypress/tests/scroll-buttons.js index 61389dc..f5bde05 100644 --- a/cypress/tests/scroll-buttons.js +++ b/cypress/tests/scroll-buttons.js @@ -8,6 +8,7 @@ describe('Scroll Buttons', () => { }) cy.contains('Submit').click({ force: true }) cy.contains('Get Started').click() + cy.contains('Start Voting').click() cy.contains('Next').click() cy.queryByText('↓ See More', { timeout: 0 }).should('not.be.visible') cy.contains('Next').click() @@ -46,6 +47,7 @@ describe('Scroll Buttons', () => { }) cy.contains('Submit').click({ force: true }) cy.contains('Get Started').click() + cy.contains('Start Voting').click() cy.contains('Next').click() cy.queryByText('↓ See More', { timeout: 0 }).should('not.be.visible') cy.contains('Next').click() diff --git a/cypress/tests/scroll-to-contest.js b/cypress/tests/scroll-to-contest.js index 83f3ba8..ce64688 100644 --- a/cypress/tests/scroll-to-contest.js +++ b/cypress/tests/scroll-to-contest.js @@ -1,4 +1,4 @@ -const clickThoughPages = new Array(21) // number of contests + pre-review screen for activation code 'VX.23.12' +const clickThoughPages = new Array(20) // number of contests for activation code 'VX.23.12' describe('Review Page', () => { it('When navigating from contest, scroll to contest and place focus on contest.', () => { @@ -8,9 +8,11 @@ describe('Review Page', () => { }) cy.contains('Submit').click({ force: true }) cy.contains('Get Started').click() + cy.contains('Start Voting').click() cy.wrap(clickThoughPages).each(() => { cy.contains('Next').click() }) + cy.contains('Review Selections').click() cy.get('#contest-county-commissioners').click() cy.contains('Review Ballot').click() cy.get('#contest-county-commissioners').should('be.visible') diff --git a/src/App.test.tsx b/src/App.test.tsx index 001b04f..6bb1c7e 100644 --- a/src/App.test.tsx +++ b/src/App.test.tsx @@ -77,9 +77,12 @@ describe('loads election', () => { const { getByText } = render() - // Click Get Started + // Go to Voting Instructions fireEvent.click(getByText('Get Started')) + // Go to First Contest + fireEvent.click(getByText('Start Voting')) + // First contest candidate should be selected const candidate1Input = getByText(presidentFirstCandidate.name) .closest('label')! @@ -98,6 +101,7 @@ describe('can start over', () => { // TODO: replace next line with "Enter" keyDown on activation code input fireEvent.click(getByText('Submit')) fireEvent.click(getByText('Get Started')) + fireEvent.click(getByText('Start Voting')) fireEvent.click(getByText('Settings')) fireEvent.click(getByText('Start Over')) expect(getByText('Scan Your Activation Code')).toBeTruthy() @@ -111,6 +115,7 @@ describe('can start over', () => { // TODO: replace next line with "Enter" keyDown on activation code input fireEvent.click(getByText('Submit')) fireEvent.click(getByText('Get Started')) + fireEvent.click(getByText('Start Voting')) fireEvent.click(getByText(contest0candidate0.name).closest('label')!) fireEvent.click(getByText('Settings')) fireEvent.click(getByText('Start Over')) @@ -131,6 +136,7 @@ describe(`Can update settings`, () => { // TODO: replace next line with "Enter" keyDown on activation code input fireEvent.click(getByText('Submit')) fireEvent.click(getByText('Get Started')) + fireEvent.click(getByText('Start Voting')) fireEvent.click(getByText('Settings')) expect( (getByLabelText('Font Size') as HTMLInputElement).value === '1' diff --git a/src/AppActivationCodes.test.tsx b/src/AppActivationCodes.test.tsx index 9bfc2c9..b2449b6 100644 --- a/src/AppActivationCodes.test.tsx +++ b/src/AppActivationCodes.test.tsx @@ -79,9 +79,12 @@ it(`Displays alternate ballot`, () => { // TODO: replace next line with "Enter" keyDown on activation code input fireEvent.click(getByText('Submit')) - // Get Started Page + // Go to Voting Instructions fireEvent.click(getByText('Get Started')) + // Go to First Contest + fireEvent.click(getByText('Start Voting')) + // Number of questions maps to expected length getByText('1 of 11') }) diff --git a/src/AppAlternateBallotStyle.test.tsx b/src/AppAlternateBallotStyle.test.tsx index ea6ca8b..7a7702f 100644 --- a/src/AppAlternateBallotStyle.test.tsx +++ b/src/AppAlternateBallotStyle.test.tsx @@ -40,9 +40,12 @@ it(`Displays alternate ballot`, async () => { // TODO: replace next line with "Enter" keyDown on activation code input fireEvent.click(getByText('Submit')) - // Get Started Page + // Go to Voting Instructions fireEvent.click(getByText('Get Started')) + // Go to First Contest + fireEvent.click(getByText('Start Voting')) + // Number of questions maps to expected length getByText('1 of 11') }) diff --git a/src/AppContestMultiSeat.test.tsx b/src/AppContestMultiSeat.test.tsx index f9eb46e..bec9db2 100644 --- a/src/AppContestMultiSeat.test.tsx +++ b/src/AppContestMultiSeat.test.tsx @@ -29,8 +29,13 @@ it(`Multi-seat Contest Flow`, () => { // TODO: replace next line with "Enter" keyDown on activation code input fireEvent.click(getByText('Submit')) + + // Go to Voting Instructions fireEvent.click(getByText('Get Started')) + // Go to First Contest + fireEvent.click(getByText('Start Voting')) + // click Next until getting to multi-seat contest while (!queryByText(multiSeatContest.title)) { fireEvent.click(getByText('Next')) @@ -54,9 +59,10 @@ it(`Multi-seat Contest Flow`, () => { }, you must first unselect selected candidates.` ) - while (!queryByText('Review Your Ballot Selections')) { + while (!queryByText('Review Your Selections')) { fireEvent.click(getByText('Next')) } + fireEvent.click(getByText('Review Selections')) expect(getByText(multiSeatCandidate0.name)).toBeTruthy() expect(getByText(multiSeatCandidate1.name)).toBeTruthy() expect(getByText(multiSeatCandidate2.name)).toBeTruthy() diff --git a/src/AppContestOvervote.test.tsx b/src/AppContestOvervote.test.tsx index 68871f9..d46a8ba 100644 --- a/src/AppContestOvervote.test.tsx +++ b/src/AppContestOvervote.test.tsx @@ -28,8 +28,13 @@ it(`Overvote triggers modal`, () => { }) // TODO: replace next line with "Enter" keyDown on activation code input fireEvent.click(getByText('Submit')) + + // Go to Voting Instructions fireEvent.click(getByText('Get Started')) + // Go to First Contest + fireEvent.click(getByText('Start Voting')) + // Confirm Correct Contest getByText(contest0.title) expect(contest0.seats).toEqual(1) diff --git a/src/AppContestWriteIn.test.tsx b/src/AppContestWriteIn.test.tsx index 0186781..fb1fae0 100644 --- a/src/AppContestWriteIn.test.tsx +++ b/src/AppContestWriteIn.test.tsx @@ -31,8 +31,13 @@ it(`Write-In Candidate flow with single seat contest`, () => { // TODO: replace next line with "Enter" keyDown on activation code input fireEvent.click(getByText('Submit')) + + // Go to Voting Instructions fireEvent.click(getByText('Get Started')) + // Go to First Contest + fireEvent.click(getByText('Start Voting')) + // click Next until getting to multi-seat contest while (!queryByText(contestWithWriteIn.title)) { fireEvent.click(getByText('Next')) @@ -80,9 +85,10 @@ it(`Write-In Candidate flow with single seat contest`, () => { fireEvent.click(getByText('Okay')) // Go to review page and confirm write in exists - while (!queryByText('Review Your Ballot Selections')) { + while (!queryByText('Review Your Selections')) { fireEvent.click(getByText('Next')) } + fireEvent.click(getByText('Review Selections')) expect(getByText('SAL')).toBeTruthy() expect(getByText('(write-in)')).toBeTruthy() diff --git a/src/AppContestYesNo.test.tsx b/src/AppContestYesNo.test.tsx index 2ed2295..2b47f24 100644 --- a/src/AppContestYesNo.test.tsx +++ b/src/AppContestYesNo.test.tsx @@ -30,8 +30,13 @@ it(`Yes/No Contest`, () => { // TODO: replace next line with "Enter" keyDown on activation code input fireEvent.click(getByText('Submit')) + + // Go to Voting Instructions fireEvent.click(getByText('Get Started')) + // Go to First Contest + fireEvent.click(getByText('Start Voting')) + // click Next until getting to multi-seat contest while (!queryByText(yesNoContest.title)) { fireEvent.click(getByText('Next')) @@ -59,9 +64,10 @@ it(`Yes/No Contest`, () => { fireEvent.click(getByText('Okay')) // Go to review page and confirm write in exists - while (!queryByText('Review Your Ballot Selections')) { + while (!queryByText('Review Your Selections')) { fireEvent.click(getByText('Next')) } + fireEvent.click(getByText('Review Selections')) const reviewTitle = getByText( `${yesNoContest.section}, ${yesNoContest.title}` ) diff --git a/src/AppEndToEnd.test.tsx b/src/AppEndToEnd.test.tsx index efefebb..697f2bc 100644 --- a/src/AppEndToEnd.test.tsx +++ b/src/AppEndToEnd.test.tsx @@ -131,9 +131,12 @@ it(`basic end-to-end flow`, async () => { currentCardValue = cardValueVoter await sleep(250) - // Go to First Contest + // Go to Voting Instructions fireEvent.click(getByText('Get Started')) + // Go to First Contest + fireEvent.click(getByText('Start Voting')) + // Vote for President contest expect(container.firstChild).toMatchSnapshot() fireEvent.click( @@ -150,14 +153,13 @@ it(`basic end-to-end flow`, async () => { expect(container.firstChild).toMatchSnapshot() // Go to Pre Review Screen - while (!queryByText('Pre Review Screen')) { + while (!queryByText('Review Your Selections')) { fireEvent.click(getByText('Next')) } - getByText('Pre Review Screen') expect(container.firstChild).toMatchSnapshot() // Go to Review Screen - fireEvent.click(getByText('Next')) + fireEvent.click(getByText('Review Selections')) getByText('Review Your Ballot Selections') expect(container.firstChild).toMatchSnapshot() @@ -187,7 +189,7 @@ it(`basic end-to-end flow`, async () => { // Print Screen fireEvent.click(getByText('Next')) - getByText('Print your ballot') + getByText('Print your official ballot') // Test Print Ballot Modal fireEvent.click(getByText('Print Ballot')) @@ -210,7 +212,7 @@ it(`basic end-to-end flow`, async () => { // Review and Cast Instructions // wait a little bit because the page transition is behind a setTimeout await sleep(100) - getByText('Verify and Cast Your Ballot') + getByText('Cast your printed ballot') // =========================================================================== // TODO: determine why test errors occur here when the following click is uncommented. diff --git a/src/__snapshots__/AppContestOvervote.test.tsx.snap b/src/__snapshots__/AppContestOvervote.test.tsx.snap index 7154539..ef235a9 100644 --- a/src/__snapshots__/AppContestOvervote.test.tsx.snap +++ b/src/__snapshots__/AppContestOvervote.test.tsx.snap @@ -15,6 +15,7 @@ exports[`Overvote triggers modal 1`] = ` } .c3 { + width: 100%; max-width: 66ch; line-height: 1.2; } @@ -32,7 +33,8 @@ exports[`Overvote triggers modal 1`] = ` .c3 h3, .c3 p { - margin: 1rem 0; + margin-top: 1rem; + margin-bottom: 1rem; font-size: 1rem; } @@ -57,34 +59,6 @@ exports[`Overvote triggers modal 1`] = ` margin-bottom: 0; } -.c15 { - border: none; - border-radius: 0.25rem; - box-sizing: border-box; - background: rgb(211,211,211); - cursor: pointer; - padding: 0.4rem 0.7rem; - line-height: 1; - white-space: nowrap; - color: black; -} - -.c14 { - border: none; - border-radius: 0.25rem; - box-sizing: border-box; - background: rgb(71,167,75); - cursor: pointer; - padding: 0.4rem 0.7rem; - line-height: 1; - white-space: nowrap; - color: #FFFFFF; -} - -.c11 { - word-break: break-word; -} - .c13 { display: -webkit-box; display: -webkit-flex; @@ -103,7 +77,7 @@ exports[`Overvote triggers modal 1`] = ` justify-content: space-between; border-bottom: 1px solid rgb(169,169,169); background: #455a64; - padding: 0.5rem; + padding: 0.25rem; } .c13 > *:first-child { @@ -140,7 +114,7 @@ exports[`Overvote triggers modal 1`] = ` order: -1; border-bottom: 1px solid rgb(169,169,169); background: #455a64; - padding: 0.5rem; + padding: 0.25rem; } .c17 > *:first-child { @@ -156,6 +130,32 @@ exports[`Overvote triggers modal 1`] = ` margin: 0.25rem; } +.c15 { + border: none; + border-radius: 0.25rem; + box-sizing: border-box; + background: rgb(211,211,211); + cursor: pointer; + padding: 0.75rem 1rem; + line-height: 1.25; + color: black; +} + +.c14 { + border: none; + border-radius: 0.25rem; + box-sizing: border-box; + background: rgb(71,167,75); + cursor: pointer; + padding: 0.75rem 1rem; + line-height: 1.25; + color: #FFFFFF; +} + +.c11 { + word-break: break-word; +} + .c2 { margin: 0 auto; width: 100%; diff --git a/src/__snapshots__/AppEndToEnd.test.tsx.snap b/src/__snapshots__/AppEndToEnd.test.tsx.snap index 390f832..72ad540 100644 --- a/src/__snapshots__/AppEndToEnd.test.tsx.snap +++ b/src/__snapshots__/AppEndToEnd.test.tsx.snap @@ -18,11 +18,13 @@ exports[`basic end-to-end flow 1`] = ` .c2 { margin: auto auto; + width: 100%; max-width: 35rem; } .c4 { margin: auto; + width: 100%; max-width: 66ch; text-align: center; line-height: 1.2; @@ -41,7 +43,8 @@ exports[`basic end-to-end flow 1`] = ` .c4 h3, .c4 p { - margin: 1rem 0; + margin-top: 1rem; + margin-bottom: 1rem; font-size: 1rem; } @@ -72,9 +75,8 @@ exports[`basic end-to-end flow 1`] = ` box-sizing: border-box; background: rgb(71,167,75); cursor: pointer; - padding: 0.4rem 0.7rem; - line-height: 1; - white-space: nowrap; + padding: 0.75rem 1rem; + line-height: 1.25; color: #FFFFFF; } @@ -343,7 +345,7 @@ exports[`basic end-to-end flow 1`] = ` exports[`basic end-to-end flow 2`] = `
.c0 { @@ -360,6 +362,7 @@ exports[`basic end-to-end flow 2`] = ` } .c2 { + width: 100%; max-width: 66ch; line-height: 1.2; } @@ -377,7 +380,8 @@ exports[`basic end-to-end flow 2`] = ` .c2 h3, .c2 p { - margin: 1rem 0; + margin-top: 1rem; + margin-bottom: 1rem; font-size: 1rem; } @@ -778,19 +782,7 @@ button.c8 {
- .c1 { - border: none; - border-radius: 0.25rem; - box-sizing: border-box; - background: rgb(211,211,211); - cursor: pointer; - padding: 0.4rem 0.7rem; - line-height: 1; - white-space: nowrap; - color: black; -} - -.c0 { + .c0 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -808,7 +800,7 @@ button.c8 { justify-content: space-between; border-bottom: 1px solid rgb(169,169,169); background: #455a64; - padding: 0.5rem; + padding: 0.25rem; } .c0 > *:first-child { @@ -824,6 +816,17 @@ button.c8 { margin: 0.25rem; } +.c1 { + border: none; + border-radius: 0.25rem; + box-sizing: border-box; + background: rgb(211,211,211); + cursor: pointer; + padding: 0.75rem 1rem; + line-height: 1.25; + color: black; +} + .c2 { text-align: center; color: #FFFFFF; @@ -879,19 +882,7 @@ button.c8 { 20

- .c1 { - border: none; - border-radius: 0.25rem; - box-sizing: border-box; - background: rgb(211,211,211); - cursor: pointer; - padding: 0.4rem 0.7rem; - line-height: 1; - white-space: nowrap; - color: black; -} - -.c0 { + .c0 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -912,7 +903,7 @@ button.c8 { order: -1; border-bottom: 1px solid rgb(169,169,169); background: #455a64; - padding: 0.5rem; + padding: 0.25rem; } .c0 > *:first-child { @@ -928,6 +919,17 @@ button.c8 { margin: 0.25rem; } +.c1 { + border: none; + border-radius: 0.25rem; + box-sizing: border-box; + background: rgb(211,211,211); + cursor: pointer; + padding: 0.75rem 1rem; + line-height: 1.25; + color: black; +} + @media (min-width:480px) { .c0 > *:first-child { margin-left: auto; @@ -979,24 +981,24 @@ button.c8 { exports[`basic end-to-end flow 3`] = `

United States
@@ -1016,36 +1018,36 @@ exports[`basic end-to-end flow 3`] = `

- .c1 { - border: none; - border-radius: 0.25rem; - box-sizing: border-box; - background: rgb(211,211,211); - cursor: pointer; - padding: 0.4rem 0.7rem; - line-height: 1; - white-space: nowrap; - color: black; -} - -.c0 { + .c0 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1936,7 +2223,7 @@ exports[`basic end-to-end flow 6`] = ` justify-content: space-between; border-bottom: 1px solid rgb(169,169,169); background: #455a64; - padding: 0.5rem; + padding: 0.25rem; } .c0 > *:first-child { @@ -1952,6 +2239,17 @@ exports[`basic end-to-end flow 6`] = ` margin: 0.25rem; } +.c1 { + border: none; + border-radius: 0.25rem; + box-sizing: border-box; + background: rgb(211,211,211); + cursor: pointer; + padding: 0.75rem 1rem; + line-height: 1.25; + color: black; +} + @media (min-width:480px) { .c0 > *:only-child { -webkit-flex: 0; @@ -1971,13 +2269,7 @@ exports[`basic end-to-end flow 6`] = ` - .c1 { - border: none; - border-radius: 0.25rem; - box-sizing: border-box; - background: rgb(211,211,211); - cursor: pointer; - padding: 0.4rem 0.7rem; - line-height: 1; - white-space: nowrap; - color: black; -} - -.c0 { + .c0 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2021,7 +2301,7 @@ exports[`basic end-to-end flow 6`] = ` order: -1; border-bottom: 1px solid rgb(169,169,169); background: #455a64; - padding: 0.5rem; + padding: 0.25rem; } .c0 > *:first-child { @@ -2037,6 +2317,17 @@ exports[`basic end-to-end flow 6`] = ` margin: 0.25rem; } +.c1 { + border: none; + border-radius: 0.25rem; + box-sizing: border-box; + background: rgb(211,211,211); + cursor: pointer; + padding: 0.75rem 1rem; + line-height: 1.25; + color: black; +} + @media (min-width:480px) { .c0 > *:first-child { margin-left: auto; @@ -2089,7 +2380,7 @@ exports[`basic end-to-end flow 6`] = ` exports[`basic end-to-end flow 7`] = `
.c0 { @@ -2106,6 +2397,7 @@ exports[`basic end-to-end flow 7`] = ` } .c2 { + width: 100%; max-width: 66ch; line-height: 1.2; } @@ -2123,7 +2415,8 @@ exports[`basic end-to-end flow 7`] = ` .c2 h3, .c2 p { - margin: 1rem 0; + margin-top: 1rem; + margin-bottom: 1rem; font-size: 1rem; } @@ -2154,9 +2447,8 @@ exports[`basic end-to-end flow 7`] = ` box-sizing: border-box; background: rgb(211,211,211); cursor: pointer; - padding: 0.4rem 0.7rem; - line-height: 1; - white-space: nowrap; + padding: 0.75rem 1rem; + line-height: 1.25; color: black; } @@ -2166,9 +2458,8 @@ exports[`basic end-to-end flow 7`] = ` box-sizing: border-box; background: rgb(211,211,211); cursor: pointer; - padding: 0.4rem 0.7rem; - line-height: 1; - white-space: nowrap; + padding: 0.75rem 1rem; + line-height: 1.25; color: black; } @@ -2177,11 +2468,9 @@ exports[`basic end-to-end flow 7`] = ` border-radius: 0.25rem; box-sizing: border-box; background: rgb(211,211,211); - cursor: pointer; width: 100%; - padding: 0.4rem 0.7rem; - line-height: 1; - white-space: nowrap; + padding: 0.75rem 1rem; + line-height: 1.25; color: rgb(169,169,169); } @@ -2343,6 +2632,7 @@ button.c7 { } .c9 { + width: 100%; max-width: 66ch; line-height: 1.2; -webkit-flex: 1; @@ -2363,7 +2653,8 @@ button.c7 { .c9 h3, .c9 p { - margin: 0; + margin-top: 0; + margin-bottom: 0; font-size: 1rem; } @@ -3150,19 +3441,7 @@ button.c7 {
- .c1 { - border: none; - border-radius: 0.25rem; - box-sizing: border-box; - background: rgb(211,211,211); - cursor: pointer; - padding: 0.4rem 0.7rem; - line-height: 1; - white-space: nowrap; - color: black; -} - -.c0 { + .c0 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -3180,7 +3459,7 @@ button.c7 { justify-content: space-between; border-bottom: 1px solid rgb(169,169,169); background: #455a64; - padding: 0.5rem; + padding: 0.25rem; } .c0 > *:first-child { @@ -3196,6 +3475,17 @@ button.c7 { margin: 0.25rem; } +.c1 { + border: none; + border-radius: 0.25rem; + box-sizing: border-box; + background: rgb(211,211,211); + cursor: pointer; + padding: 0.75rem 1rem; + line-height: 1.25; + color: black; +} + @media (min-width:480px) { .c0 > *:only-child { -webkit-flex: 0; @@ -3226,19 +3516,7 @@ button.c7 {
- .c1 { - border: none; - border-radius: 0.25rem; - box-sizing: border-box; - background: rgb(211,211,211); - cursor: pointer; - padding: 0.4rem 0.7rem; - line-height: 1; - white-space: nowrap; - color: black; -} - -.c0 { + .c0 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -3259,7 +3537,7 @@ button.c7 { order: -1; border-bottom: 1px solid rgb(169,169,169); background: #455a64; - padding: 0.5rem; + padding: 0.25rem; } .c0 > *:first-child { @@ -3275,6 +3553,17 @@ button.c7 { margin: 0.25rem; } +.c1 { + border: none; + border-radius: 0.25rem; + box-sizing: border-box; + background: rgb(211,211,211); + cursor: pointer; + padding: 0.75rem 1rem; + line-height: 1.25; + color: black; +} + @media (min-width:480px) { .c0 > *:first-child { margin-left: auto; @@ -3327,7 +3616,7 @@ button.c7 { exports[`basic end-to-end flow 8`] = `
.c0 { @@ -3344,6 +3633,7 @@ exports[`basic end-to-end flow 8`] = ` } .c2 { + width: 100%; max-width: 66ch; line-height: 1.2; } @@ -3361,7 +3651,8 @@ exports[`basic end-to-end flow 8`] = ` .c2 h3, .c2 p { - margin: 1rem 0; + margin-top: 1rem; + margin-bottom: 1rem; font-size: 1rem; } @@ -4011,19 +4302,7 @@ button.c8 {
- .c1 { - border: none; - border-radius: 0.25rem; - box-sizing: border-box; - background: rgb(211,211,211); - cursor: pointer; - padding: 0.4rem 0.7rem; - line-height: 1; - white-space: nowrap; - color: black; -} - -.c0 { + .c0 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -4041,7 +4320,7 @@ button.c8 { justify-content: space-between; border-bottom: 1px solid rgb(169,169,169); background: #455a64; - padding: 0.5rem; + padding: 0.25rem; } .c0 > *:first-child { @@ -4057,6 +4336,17 @@ button.c8 { margin: 0.25rem; } +.c1 { + border: none; + border-radius: 0.25rem; + box-sizing: border-box; + background: rgb(211,211,211); + cursor: pointer; + padding: 0.75rem 1rem; + line-height: 1.25; + color: black; +} + @media (min-width:480px) { .c0 > *:only-child { -webkit-flex: 0; @@ -4084,19 +4374,7 @@ button.c8 { Review Ballot - .c1 { - border: none; - border-radius: 0.25rem; - box-sizing: border-box; - background: rgb(211,211,211); - cursor: pointer; - padding: 0.4rem 0.7rem; - line-height: 1; - white-space: nowrap; - color: black; -} - -.c0 { + .c0 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -4117,7 +4395,7 @@ button.c8 { order: -1; border-bottom: 1px solid rgb(169,169,169); background: #455a64; - padding: 0.5rem; + padding: 0.25rem; } .c0 > *:first-child { @@ -4133,6 +4411,17 @@ button.c8 { margin: 0.25rem; } +.c1 { + border: none; + border-radius: 0.25rem; + box-sizing: border-box; + background: rgb(211,211,211); + cursor: pointer; + padding: 0.75rem 1rem; + line-height: 1.25; + color: black; +} + @media (min-width:480px) { .c0 > *:first-child { margin-left: auto; @@ -4184,24 +4473,24 @@ button.c8 { exports[`basic end-to-end flow 9`] = `

Franklin County
@@ -4221,36 +4510,36 @@ exports[`basic end-to-end flow 9`] = `

- .c1 { - border: none; - border-radius: 0.25rem; - box-sizing: border-box; - background: rgb(211,211,211); - cursor: pointer; - padding: 0.4rem 0.7rem; - line-height: 1; - white-space: nowrap; - color: black; -} - -.c0 { + .c0 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -5871,7 +6147,7 @@ button.c7 { order: -1; border-bottom: 1px solid rgb(169,169,169); background: #455a64; - padding: 0.5rem; + padding: 0.25rem; } .c0 > *:first-child { @@ -5887,6 +6163,17 @@ button.c7 { margin: 0.25rem; } +.c1 { + border: none; + border-radius: 0.25rem; + box-sizing: border-box; + background: rgb(211,211,211); + cursor: pointer; + padding: 0.75rem 1rem; + line-height: 1.25; + color: black; +} + @media (min-width:480px) { .c0 > *:first-child { margin-left: auto; diff --git a/src/__snapshots__/AppSetElection.test.tsx.snap b/src/__snapshots__/AppSetElection.test.tsx.snap index 8f54ef3..2abfda5 100644 --- a/src/__snapshots__/AppSetElection.test.tsx.snap +++ b/src/__snapshots__/AppSetElection.test.tsx.snap @@ -17,12 +17,14 @@ exports[`Sets election config file 1`] = ` .c3 { margin: auto auto; + width: 100%; max-width: 35rem; padding: 1rem; } .c4 { margin: auto; + width: 100%; max-width: 66ch; text-align: center; line-height: 1.2; @@ -41,7 +43,8 @@ exports[`Sets election config file 1`] = ` .c4 h3, .c4 p { - margin: 1rem 0; + margin-top: 1rem; + margin-bottom: 1rem; font-size: 1rem; } @@ -72,9 +75,8 @@ exports[`Sets election config file 1`] = ` box-sizing: border-box; background: rgb(211,211,211); cursor: pointer; - padding: 0.4rem 0.7rem; - line-height: 1; - white-space: nowrap; + padding: 0.75rem 1rem; + line-height: 1.25; color: black; } diff --git a/src/components/Ballot.test.tsx b/src/components/Ballot.test.tsx index c472126..24365cc 100644 --- a/src/components/Ballot.test.tsx +++ b/src/components/Ballot.test.tsx @@ -12,10 +12,13 @@ import Ballot from './Ballot' it(`can navigate all ballot pages`, () => { window.print = jest.fn() - const { container, getByText, getByTestId, history } = render(, { - ballotStyleId: '', - precinctId: '', - }) + const { container, getByText, getByTestId, queryByText, history } = render( + , + { + ballotStyleId: '', + precinctId: '', + } + ) expect(container.firstChild).toMatchSnapshot() fireEvent.change(getByTestId('activation-code'), { @@ -26,6 +29,7 @@ it(`can navigate all ballot pages`, () => { // TODO: replace next line with "Enter" keyDown on activation code input fireEvent.click(getByText('Submit')) fireEvent.click(getByText('Get Started')) + fireEvent.click(getByText('Start Voting')) fireEvent.click(getByText('Help')) getByText('Help content will be available here.') fireEvent.click(getByText('Back')) @@ -37,24 +41,25 @@ it(`can navigate all ballot pages`, () => { electionSample.contests.forEach(() => { fireEvent.click(getByText('Next')) }) - - // Pre Review Screen - getByText('Pre Review Screen') + // Go to Pre Review Screen, through all contest pages. + while (!queryByText('Review Your Selections')) { + fireEvent.click(getByText('Next')) + } // Review Screen - fireEvent.click(getByText('Next')) + fireEvent.click(getByText('Review Selections')) getByText('Review Your Ballot Selections') // Print Screen fireEvent.click(getByText('Next')) - getByText('Print your ballot') + getByText('Print your official ballot') // Manually load cast page (as full BallotContext not provided to integration test) history.push('/cast') // Verify and Cast Screen - getByText('Verify and Cast Your Ballot') - fireEvent.click(getByText('Start Over')) + getByText('Cast your printed ballot') + fireEvent.click(getByText('Okay, I will review and cast my printed ballot.')) // Back to beginning getByText('Scan Your Activation Code') diff --git a/src/components/Ballot.tsx b/src/components/Ballot.tsx index 92ba741..f016a07 100644 --- a/src/components/Ballot.tsx +++ b/src/components/Ballot.tsx @@ -13,6 +13,7 @@ import PrintPage from '../pages/PrintPage' import ReviewPage from '../pages/ReviewPage' import SettingsPage from '../pages/SettingsPage' import StartPage from '../pages/StartPage' +import InstructionsPage from '../pages/InstructionsPage' const Ballot = () => { const { ballotStyleId, contests, election, precinctId } = useContext( @@ -35,6 +36,7 @@ const Ballot = () => { + ` + position: relative; + border-radius: 50%; + background: ${({ completed, current }) => + completed ? '#ffffff' : current ? '#35809c' : '#c7d7df'}; + width: 100%; + height: 0; + padding-top: 100%; + & > span { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + text-align: center; + color: ${({ completed }) => (completed ? '#35809c' : '#ffffff')}; + font-size: 7vw; + font-weight: 700; + @media (min-width: 686px) { + font-size: 2rem; + } + } +` + +const StepLabel = styled.div` + position: absolute; + margin: 0.25rem -1rem 0; + width: calc(100% + 2rem); + text-align: center; + color: ${({ current }) => (current ? undefined : '#c7d7df')}; + font-weight: ${({ current }) => (current ? '600' : undefined)}; +` + +const Breadcrumbs = ({ step }: { step: number }) => ( + + + {['Mark', 'Review', 'Print', 'Cast'].map((label, i) => { + const stepNumber = i + 1 + const completed = stepNumber < step + return ( + + + {completed ? '✓' : stepNumber} + + {label} + + + + ) + })} + + +) + +export default Breadcrumbs diff --git a/src/components/Button.test.tsx b/src/components/Button.test.tsx index d57608e..9701bd7 100644 --- a/src/components/Button.test.tsx +++ b/src/components/Button.test.tsx @@ -18,6 +18,16 @@ it(`renders danger Button`, () => { expect(container.firstChild).toMatchSnapshot() }) +it(`renders big Button`, () => { + const { container } = render() + expect(container.firstChild).toMatchSnapshot() +}) + +it(`renders small Button`, () => { + const { container } = render() + expect(container.firstChild).toMatchSnapshot() +}) + it(`renders DecoyButton`, () => { const { container } = render(DecoyButton) expect(container.firstChild).toMatchSnapshot() diff --git a/src/components/Button.tsx b/src/components/Button.tsx index e5b086d..5771c1e 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -8,6 +8,8 @@ export interface ButtonInterface { readonly danger?: boolean readonly primary?: boolean readonly fullWidth?: boolean + readonly small?: boolean + readonly big?: boolean } interface Props @@ -22,16 +24,17 @@ const buttonStyles = css` (danger && 'red') || (primary && 'rgb(71, 167, 75)') || 'rgb(211, 211, 211)'}; - cursor: pointer; + cursor: ${({ disabled = false }) => (disabled ? undefined : 'pointer')}; width: ${({ fullWidth = false }) => (fullWidth ? '100%' : undefined)}; - padding: 0.4rem 0.7rem; - line-height: 1; - white-space: nowrap; + padding: ${({ big = false, small = false }) => + small ? '0.35rem 0.5rem' : big ? '1rem 1.75rem' : '0.75rem 1rem'}; + line-height: 1.25; color: ${({ disabled = false, danger = false, primary = false }) => (disabled && 'rgb(169, 169, 169)') || (danger && '#FFFFFF') || (primary && '#FFFFFF') || 'black'}; + font-size: ${({ big = false }) => (big ? '1.25rem' : undefined)}; ` export const DecoyButton = styled.div` diff --git a/src/components/ButtonBar.tsx b/src/components/ButtonBar.tsx index fe0a67c..b2df5fa 100644 --- a/src/components/ButtonBar.tsx +++ b/src/components/ButtonBar.tsx @@ -16,7 +16,7 @@ const ButtonBar = styled('nav')` border-bottom: 1px solid rgb(169, 169, 169); background: ${({ dark = true }) => dark ? '#455a64' : 'rgba(0, 0, 0, 0.05)'}; - padding: 0.5rem; + padding: 0.25rem; & > *:first-child { order: 2; diff --git a/src/components/Main.tsx b/src/components/Main.tsx index 51212ac..471055d 100644 --- a/src/components/Main.tsx +++ b/src/components/Main.tsx @@ -35,6 +35,7 @@ export const MainChild = styled('div')` centerVertical = center, centerHorizontal = center, }) => `${centerVertical ? 'auto' : '0'} ${centerHorizontal ? 'auto' : '0'}`}; + width: 100%; max-width: 35rem; padding: ${({ padded = false }) => (padded ? '1rem' : undefined)}; @media print { diff --git a/src/components/Prose.tsx b/src/components/Prose.tsx index aee1302..4fe7ff5 100644 --- a/src/components/Prose.tsx +++ b/src/components/Prose.tsx @@ -7,6 +7,7 @@ interface Props { const Prose = styled('div')` margin: ${({ textCenter }) => (textCenter ? 'auto' : undefined)}; + width: 100%; max-width: 66ch; text-align: ${({ textCenter }) => (textCenter ? 'center' : undefined)}; line-height: 1.2; @@ -24,7 +25,8 @@ const Prose = styled('div')` } & h3, & p { - margin: ${({ compact }) => (compact ? 0 : '1rem 0')}; + margin-top: ${({ compact }) => (compact ? '0' : '1rem')}; + margin-bottom: ${({ compact }) => (compact ? '0' : '1rem')}; font-size: 1rem; } & h1 + h2 { diff --git a/src/components/Text.tsx b/src/components/Text.tsx index 8542649..a434d83 100644 --- a/src/components/Text.tsx +++ b/src/components/Text.tsx @@ -9,6 +9,7 @@ interface Props { error?: boolean italic?: boolean muted?: boolean + narrow?: boolean small?: boolean warning?: boolean warningIcon?: boolean @@ -39,6 +40,9 @@ const iconStyles = css` ` const Text = styled('p')` + margin-right: ${({ narrow }) => (narrow ? 'auto' : undefined)}; + margin-left: ${({ narrow }) => (narrow ? 'auto' : undefined)}; + max-width: ${({ narrow }) => (narrow ? '33ch' : undefined)}; text-align: ${({ center }) => (center ? 'center' : undefined)}; color: ${({ error, muted, warning, white }) => (error && 'red') || diff --git a/src/components/__snapshots__/Ballot.test.tsx.snap b/src/components/__snapshots__/Ballot.test.tsx.snap index 56fa852..d6285e7 100644 --- a/src/components/__snapshots__/Ballot.test.tsx.snap +++ b/src/components/__snapshots__/Ballot.test.tsx.snap @@ -18,11 +18,13 @@ exports[`can navigate all ballot pages 1`] = ` .c1 { margin: auto auto; + width: 100%; max-width: 35rem; } .c3 { margin: auto; + width: 100%; max-width: 66ch; text-align: center; line-height: 1.2; @@ -41,7 +43,8 @@ exports[`can navigate all ballot pages 1`] = ` .c3 h3, .c3 p { - margin: 1rem 0; + margin-top: 1rem; + margin-bottom: 1rem; font-size: 1rem; } diff --git a/src/components/__snapshots__/Button.test.tsx.snap b/src/components/__snapshots__/Button.test.tsx.snap index 871d679..8f32dde 100644 --- a/src/components/__snapshots__/Button.test.tsx.snap +++ b/src/components/__snapshots__/Button.test.tsx.snap @@ -7,9 +7,8 @@ exports[`renders Button 1`] = ` box-sizing: border-box; background: rgb(211,211,211); cursor: pointer; - padding: 0.4rem 0.7rem; - line-height: 1; - white-space: nowrap; + padding: 0.75rem 1rem; + line-height: 1.25; color: black; } @@ -28,9 +27,8 @@ exports[`renders DecoyButton 1`] = ` box-sizing: border-box; background: rgb(211,211,211); cursor: pointer; - padding: 0.4rem 0.7rem; - line-height: 1; - white-space: nowrap; + padding: 0.75rem 1rem; + line-height: 1.25; color: black; } @@ -41,6 +39,27 @@ exports[`renders DecoyButton 1`] = `
`; +exports[`renders big Button 1`] = ` +.c0 { + border: none; + border-radius: 0.25rem; + box-sizing: border-box; + background: rgb(211,211,211); + cursor: pointer; + padding: 1rem 1.75rem; + line-height: 1.25; + color: black; + font-size: 1.25rem; +} + + +`; + exports[`renders danger Button 1`] = ` .c0 { border: none; @@ -48,9 +67,8 @@ exports[`renders danger Button 1`] = ` box-sizing: border-box; background: red; cursor: pointer; - padding: 0.4rem 0.7rem; - line-height: 1; - white-space: nowrap; + padding: 0.75rem 1rem; + line-height: 1.25; color: #FFFFFF; } @@ -69,9 +87,8 @@ exports[`renders primary Button 1`] = ` box-sizing: border-box; background: rgb(71,167,75); cursor: pointer; - padding: 0.4rem 0.7rem; - line-height: 1; - white-space: nowrap; + padding: 0.75rem 1rem; + line-height: 1.25; color: #FFFFFF; } @@ -82,3 +99,23 @@ exports[`renders primary Button 1`] = ` Primary `; + +exports[`renders small Button 1`] = ` +.c0 { + border: none; + border-radius: 0.25rem; + box-sizing: border-box; + background: rgb(211,211,211); + cursor: pointer; + padding: 0.35rem 0.5rem; + line-height: 1.25; + color: black; +} + + +`; diff --git a/src/components/__snapshots__/ButtonBar.test.tsx.snap b/src/components/__snapshots__/ButtonBar.test.tsx.snap index 561ef83..2495d68 100644 --- a/src/components/__snapshots__/ButtonBar.test.tsx.snap +++ b/src/components/__snapshots__/ButtonBar.test.tsx.snap @@ -19,7 +19,7 @@ exports[`renders ButtonBar 1`] = ` justify-content: space-between; border-bottom: 1px solid rgb(169,169,169); background: #455a64; - padding: 0.5rem; + padding: 0.25rem; } .c0 > *:first-child { diff --git a/src/components/__snapshots__/CandidateContest.test.tsx.snap b/src/components/__snapshots__/CandidateContest.test.tsx.snap index bd59219..bef9f89 100644 --- a/src/components/__snapshots__/CandidateContest.test.tsx.snap +++ b/src/components/__snapshots__/CandidateContest.test.tsx.snap @@ -15,6 +15,7 @@ exports[`supports multi-seat contests allows a second candidate to be selected w } .c2 { + width: 100%; max-width: 66ch; line-height: 1.2; } @@ -32,7 +33,8 @@ exports[`supports multi-seat contests allows a second candidate to be selected w .c2 h3, .c2 p { - margin: 1rem 0; + margin-top: 1rem; + margin-bottom: 1rem; font-size: 1rem; } @@ -438,6 +440,7 @@ exports[`supports single-seat contest allows any candidate to be selected when n } .c2 { + width: 100%; max-width: 66ch; line-height: 1.2; } @@ -455,7 +458,8 @@ exports[`supports single-seat contest allows any candidate to be selected when n .c2 h3, .c2 p { - margin: 1rem 0; + margin-top: 1rem; + margin-bottom: 1rem; font-size: 1rem; } @@ -797,6 +801,7 @@ exports[`supports single-seat contest doesn't allow other candidates to be selec } .c2 { + width: 100%; max-width: 66ch; line-height: 1.2; } @@ -814,7 +819,8 @@ exports[`supports single-seat contest doesn't allow other candidates to be selec .c2 h3, .c2 p { - margin: 1rem 0; + margin-top: 1rem; + margin-bottom: 1rem; font-size: 1rem; } @@ -1220,6 +1226,7 @@ exports[`supports write-in candidates displays warning if write-in candidate nam } .c2 { + width: 100%; max-width: 66ch; line-height: 1.2; } @@ -1237,7 +1244,8 @@ exports[`supports write-in candidates displays warning if write-in candidate nam .c2 h3, .c2 p { - margin: 1rem 0; + margin-top: 1rem; + margin-bottom: 1rem; font-size: 1rem; } diff --git a/src/components/__snapshots__/LinkButton.test.tsx.snap b/src/components/__snapshots__/LinkButton.test.tsx.snap index 1dae80d..7491def 100644 --- a/src/components/__snapshots__/LinkButton.test.tsx.snap +++ b/src/components/__snapshots__/LinkButton.test.tsx.snap @@ -7,9 +7,8 @@ exports[`navigates back 1`] = ` box-sizing: border-box; background: rgb(211,211,211); cursor: pointer; - padding: 0.4rem 0.7rem; - line-height: 1; - white-space: nowrap; + padding: 0.75rem 1rem; + line-height: 1.25; color: black; } @@ -28,9 +27,8 @@ exports[`navigates to page 1`] = ` box-sizing: border-box; background: rgb(211,211,211); cursor: pointer; - padding: 0.4rem 0.7rem; - line-height: 1; - white-space: nowrap; + padding: 0.75rem 1rem; + line-height: 1.25; color: black; } @@ -48,10 +46,8 @@ exports[`renders LinkButton with onClick and disabled props 1`] = ` border-radius: 0.25rem; box-sizing: border-box; background: rgb(211,211,211); - cursor: pointer; - padding: 0.4rem 0.7rem; - line-height: 1; - white-space: nowrap; + padding: 0.75rem 1rem; + line-height: 1.25; color: rgb(169,169,169); } @@ -71,9 +67,8 @@ exports[`renders LinkButton with onClick prop 1`] = ` box-sizing: border-box; background: rgb(211,211,211); cursor: pointer; - padding: 0.4rem 0.7rem; - line-height: 1; - white-space: nowrap; + padding: 0.75rem 1rem; + line-height: 1.25; color: black; } diff --git a/src/components/__snapshots__/Main.test.tsx.snap b/src/components/__snapshots__/Main.test.tsx.snap index 956a49c..f43126e 100644 --- a/src/components/__snapshots__/Main.test.tsx.snap +++ b/src/components/__snapshots__/Main.test.tsx.snap @@ -18,6 +18,7 @@ exports[`renders Main with child 1`] = ` .c1 { margin: 0 0; + width: 100%; max-width: 35rem; } @@ -73,6 +74,7 @@ exports[`renders centered content 1`] = ` .c1 { margin: auto auto; + width: 100%; max-width: 35rem; } @@ -128,6 +130,7 @@ exports[`renders not centered content 1`] = ` .c1 { margin: 0 0; + width: 100%; max-width: 35rem; } diff --git a/src/components/__snapshots__/Prose.test.tsx.snap b/src/components/__snapshots__/Prose.test.tsx.snap index 666cc07..d9306d3 100644 --- a/src/components/__snapshots__/Prose.test.tsx.snap +++ b/src/components/__snapshots__/Prose.test.tsx.snap @@ -2,6 +2,7 @@ exports[`renders Prose defaults 1`] = ` .c0 { + width: 100%; max-width: 66ch; line-height: 1.2; } @@ -19,7 +20,8 @@ exports[`renders Prose defaults 1`] = ` .c0 h3, .c0 p { - margin: 1rem 0; + margin-top: 1rem; + margin-bottom: 1rem; font-size: 1rem; } @@ -88,6 +90,7 @@ exports[`renders Prose defaults 1`] = ` exports[`renders Prose with compact spacing 1`] = ` .c0 { + width: 100%; max-width: 66ch; line-height: 1.2; } @@ -105,7 +108,8 @@ exports[`renders Prose with compact spacing 1`] = ` .c0 h3, .c0 p { - margin: 0; + margin-top: 0; + margin-bottom: 0; font-size: 1rem; } @@ -176,6 +180,7 @@ exports[`renders Prose with compact spacing 1`] = ` exports[`renders Prose with compact spacing 2`] = ` .c0 { margin: auto; + width: 100%; max-width: 66ch; text-align: center; line-height: 1.2; @@ -194,7 +199,8 @@ exports[`renders Prose with compact spacing 2`] = ` .c0 h3, .c0 p { - margin: 1rem 0; + margin-top: 1rem; + margin-bottom: 1rem; font-size: 1rem; } diff --git a/src/components/__snapshots__/YesNoContest.test.tsx.snap b/src/components/__snapshots__/YesNoContest.test.tsx.snap index 245ee02..bef94ca 100644 --- a/src/components/__snapshots__/YesNoContest.test.tsx.snap +++ b/src/components/__snapshots__/YesNoContest.test.tsx.snap @@ -15,6 +15,7 @@ exports[`supports yes/no contest allows voting for both yes and no 1`] = ` } .c2 { + width: 100%; max-width: 66ch; line-height: 1.2; } @@ -32,7 +33,8 @@ exports[`supports yes/no contest allows voting for both yes and no 1`] = ` .c2 h3, .c2 p { - margin: 1rem 0; + margin-top: 1rem; + margin-bottom: 1rem; font-size: 1rem; } @@ -371,6 +373,7 @@ exports[`supports yes/no contest displays warning when attempting to change vote } .c2 { + width: 100%; max-width: 66ch; line-height: 1.2; } @@ -388,7 +391,8 @@ exports[`supports yes/no contest displays warning when attempting to change vote .c2 h3, .c2 p { - margin: 1rem 0; + margin-top: 1rem; + margin-bottom: 1rem; font-size: 1rem; } diff --git a/src/lib/gamepad.test.tsx b/src/lib/gamepad.test.tsx index 41695fd..cfd544a 100644 --- a/src/lib/gamepad.test.tsx +++ b/src/lib/gamepad.test.tsx @@ -44,8 +44,13 @@ it(`gamepad controls work`, () => { }) // TODO: replace next line with "Enter" keyDown on activation code input fireEvent.click(getByText('Submit')) - // Get Started Page + + // Go to Voting Instructions fireEvent.click(getByText('Get Started')) + + // Go to First Contest + fireEvent.click(getByText('Start Voting')) + // First Contest Page getByText(contest0.title) diff --git a/src/pages/CastBallotPage.tsx b/src/pages/CastBallotPage.tsx index 0ba4069..e6c04f7 100644 --- a/src/pages/CastBallotPage.tsx +++ b/src/pages/CastBallotPage.tsx @@ -1,84 +1,75 @@ -import React from 'react' -import styled from 'styled-components' +// +//

+// Verify and Cast Your Ballot +//

+// Retrieve your printed ballot from the printer. +// +// {/*
  • +//

    Collect Printed Ballot.

    +//

    The printer has printed your ballot.

    +//
    • */} +//
  • +//

    Verify Ballot Selections.

    +//

    Review and confirm all selections on your printed ballot.

    +//
    • +//
  • +//

    Cast in Ballot Box.

    +//

    Deposit your ballot into the secured ballot box.

    +//
    • +//     +// +// I have verified my selections and will cast my ballot. +// +// +// +// Start Over +// +// +//     +import React, { useContext } from 'react' + +import Breadcrumbs from '../components/Breadcrumbs' +import ButtonBar from '../components/ButtonBar' import LinkButton from '../components/LinkButton' import Main, { MainChild } from '../components/Main' import Prose from '../components/Prose' import Text from '../components/Text' +import BallotContext from '../contexts/ballotContext' -const Directions = styled.div` - margin: auto; - & h1 { - text-align: center; - } -` - -const Instructions = styled.ol` - margin: 0 auto; - border-radius: 0.25rem; - background: #ffffff; - max-width: 24rem; - padding: 1.5rem 1rem; - list-style: none; - @media (min-width: 480px) { - padding: 2.5rem; - } - & > li { - position: relative; - margin-bottom: 1.75rem; - padding-left: 1.75rem; - counter-increment: asdf; - } - & > li:last-child { - margin-bottom: 0; - } - & > li::before { - position: absolute; - top: 0; - left: 0; - font-size: 1.25rem; - font-weight: 700; - content: counter(asdf) '.'; - } -` - -const StartPage = () => { +const VoteInstructionsPage = () => { + const { election } = useContext(BallotContext) + const { bmdConfig } = election! + const { showHelpPage, showSettingsPage } = bmdConfig! return ( -
    - - - -

    - Verify and Cast Your Ballot -

    - Retrieve your printed ballot from the printer. - - {/*
  • -

    Collect Printed Ballot.

    -

    The printer has printed your ballot.

    -
    • */} -
  • -

    Verify Ballot Selections.

    -

    Review and confirm all selections on your printed ballot.

    -
    • -
  • -

    Cast in Ballot Box.

    -

    Deposit your ballot into the secured ballot box.

    -
    • -     - - I have verified my selections and will cast my ballot. + +
    + + + +

    Cast your printed ballot

    + + Before you cast your official printed ballot in the ballot box, + double-check your printed ballot to confirm your selections. - - - Start Over - + + If you find a mistake, ask a poll worker for help. +

    + + Okay, I will review and cast my printed ballot. + +

    - -     -
    +     +
    + +
    + {showHelpPage && Help} + {showSettingsPage && Settings} + + ) } -export default StartPage +export default VoteInstructionsPage diff --git a/src/pages/InstructionsPage.tsx b/src/pages/InstructionsPage.tsx new file mode 100644 index 0000000..dbf125a --- /dev/null +++ b/src/pages/InstructionsPage.tsx @@ -0,0 +1,40 @@ +import React, { useContext } from 'react' + +import Breadcrumbs from '../components/Breadcrumbs' +import ButtonBar from '../components/ButtonBar' +import LinkButton from '../components/LinkButton' +import Main, { MainChild } from '../components/Main' +import Prose from '../components/Prose' +import Text from '../components/Text' +import BallotContext from '../contexts/ballotContext' + +const InstructionsPage = () => { + const { contests, election } = useContext(BallotContext) + const { bmdConfig } = election! + const { showHelpPage, showSettingsPage } = bmdConfig! + return ( + +
    + + + +

    Mark your ballot

    + {`This ballot has ${contests.length} contests.`} +

    + + Start Voting + +

    +     +     +
    + +
    + {showHelpPage && Help} + {showSettingsPage && Settings} + + + ) +} + +export default InstructionsPage diff --git a/src/pages/PreReviewPage.tsx b/src/pages/PreReviewPage.tsx index 7612ea3..3691cfd 100644 --- a/src/pages/PreReviewPage.tsx +++ b/src/pages/PreReviewPage.tsx @@ -1,45 +1,48 @@ -import React from 'react' -import { RouteComponentProps } from 'react-router-dom' +import React, { useContext } from 'react' +import Breadcrumbs from '../components/Breadcrumbs' import ButtonBar from '../components/ButtonBar' import LinkButton from '../components/LinkButton' import Main, { MainChild } from '../components/Main' import Prose from '../components/Prose' +import Text from '../components/Text' import BallotContext from '../contexts/ballotContext' -class SummaryPage extends React.Component { - public static contextType = BallotContext - public render() { - const { bmdConfig } = this.context.election - const { showHelpPage, showSettingsPage } = bmdConfig - return ( - -
    - - -

    Pre Review Screen

    -

    Time to go into review mode.

    -     -     -
    - - - Next - - - Back - -
    -
    - - -
    - {showHelpPage && Help} - {showSettingsPage && Settings} - - - ) - } +const SummaryPage = () => { + const { election } = useContext(BallotContext) + const { bmdConfig } = election! + const { showHelpPage, showSettingsPage } = bmdConfig! + return ( + +
    + + + +

    Review Your Selections

    + Confirm and change any votes as necessary. +

    + + Review Selections + +

    +     +     +
    + +
    + + Back + +
    +
    + + +
    + {showHelpPage && Help} + {showSettingsPage && Settings} + + + ) } export default SummaryPage diff --git a/src/pages/PrintPage.tsx b/src/pages/PrintPage.tsx index 7bc5021..693fb32 100644 --- a/src/pages/PrintPage.tsx +++ b/src/pages/PrintPage.tsx @@ -17,6 +17,7 @@ import { YesNoVote, } from '../config/types' +import Breadcrumbs from '../components/Breadcrumbs' import Button from '../components/Button' import ButtonBar from '../components/ButtonBar' import LinkButton from '../components/LinkButton' @@ -200,80 +201,24 @@ class SummaryPage extends React.Component { return (
    - - -

    Print your ballot

    -

    Ready to print ballot.

    + + + +

    + Print your official ballot +

    + + If you have reviewed your selections and you are done voting, + you are ready to print your official ballot. + +     -
    - +
    Back @@ -310,6 +255,69 @@ class SummaryPage extends React.Component { } /> + ) } diff --git a/src/pages/StartPage.tsx b/src/pages/StartPage.tsx index a521953..761e024 100644 --- a/src/pages/StartPage.tsx +++ b/src/pages/StartPage.tsx @@ -32,7 +32,7 @@ const StartPage = () => { Precinct {precinctId}

    - + Get Started

    diff --git a/src/pages/__snapshots__/CastBallotPage.test.tsx.snap b/src/pages/__snapshots__/CastBallotPage.test.tsx.snap index 29b5418..e2ea97b 100644 --- a/src/pages/__snapshots__/CastBallotPage.test.tsx.snap +++ b/src/pages/__snapshots__/CastBallotPage.test.tsx.snap @@ -18,103 +18,206 @@ exports[`renders CastBallotPage 1`] = ` .c1 { margin: auto auto; + width: 100%; max-width: 35rem; } -.c3 { +.c9 { + margin: auto; + width: 100%; max-width: 66ch; + text-align: center; line-height: 1.2; } -.c3 h1 { +.c9 h1 { margin: 2rem 0 1rem; line-height: 1.1; font-size: 1.5rem; } -.c3 h2 { +.c9 h2 { margin: 1.5rem 0 0.75rem; font-size: 1.25rem; } -.c3 h3, -.c3 p { - margin: 1rem 0; +.c9 h3, +.c9 p { + margin-top: 1rem; + margin-bottom: 1rem; font-size: 1rem; } -.c3 h1 + h2 { +.c9 h1 + h2 { margin-top: -0.75rem; } -.c3 h1 + p, -.c3 h2 + p { +.c9 h1 + p, +.c9 h2 + p { margin-top: -0.75rem; } -.c3 h3 + p { +.c9 h3 + p { margin-top: -1rem; } -.c3 :first-child { +.c9 :first-child { margin-top: 0; } -.c3 :last-child { +.c9 :last-child { margin-bottom: 0; } -.c6 { - border: none; - border-radius: 0.25rem; - box-sizing: border-box; - background: rgb(71,167,75); - cursor: pointer; - padding: 0.4rem 0.7rem; - line-height: 1; - white-space: nowrap; - color: #FFFFFF; +.c2 { + margin: 0 auto 2rem; + max-width: 600px; + padding-bottom: 2rem; } -.c4 { - text-align: center; +.c3 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + position: relative; } -.c2 { - margin: auto; +.c3::before { + position: absolute; + top: 45%; + right: 12%; + left: 12%; + z-index: -1; + background-color: #c7d7df; + height: 10%; + content: ''; } -.c2 h1 { - text-align: center; +.c4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + position: relative; + padding: 0 4%; } .c5 { - margin: 0 auto; - border-radius: 0.25rem; + position: relative; + border-radius: 50%; background: #ffffff; - max-width: 24rem; - padding: 1.5rem 1rem; - list-style: none; + width: 100%; + height: 0; + padding-top: 100%; } -.c5 > li { - position: relative; - margin-bottom: 1.75rem; - padding-left: 1.75rem; - counter-increment: asdf; +.c5 > span { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + text-align: center; + color: #35809c; + font-size: 7vw; + font-weight: 700; } -.c5 > li:last-child { - margin-bottom: 0; +.c7 { + position: relative; + border-radius: 50%; + background: #35809c; + width: 100%; + height: 0; + padding-top: 100%; } -.c5 > li::before { +.c7 > span { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; position: absolute; top: 0; left: 0; - font-size: 1.25rem; + width: 100%; + height: 100%; + text-align: center; + color: #ffffff; + font-size: 7vw; font-weight: 700; - content: counter(asdf) '.'; +} + +.c6 { + position: absolute; + margin: 0.25rem -1rem 0; + width: calc(100% + 2rem); + text-align: center; + color: #c7d7df; +} + +.c8 { + position: absolute; + margin: 0.25rem -1rem 0; + width: calc(100% + 2rem); + text-align: center; + font-weight: 600; +} + +.c11 { + border: none; + border-radius: 0.25rem; + box-sizing: border-box; + background: rgb(71,167,75); + cursor: pointer; + padding: 1rem 1.75rem; + line-height: 1.25; + color: #FFFFFF; + font-size: 1.25rem; +} + +.c10 { + margin-right: auto; + margin-left: auto; + max-width: 33ch; } @media (min-width:480px) { @@ -141,14 +244,26 @@ exports[`renders CastBallotPage 1`] = ` } @media (min-width:480px) { - .c3 { + .c9 { line-height: 1.3; } } -@media (min-width:480px) { - .c5 { - padding: 2.5rem; +@media print { + .c2 { + display: none; + } +} + +@media (min-width:686px) { + .c5 > span { + font-size: 2rem; + } +} + +@media (min-width:686px) { + .c7 > span { + font-size: 2rem; } } @@ -164,53 +279,99 @@ exports[`renders CastBallotPage 1`] = `
    -

    - Verify and Cast Your Ballot -

    -

    - Retrieve your printed ballot from the printer. -

    -
      + + ✓ + +
      + Mark +
      +
    +
    +
    -
  • -

    - Verify Ballot Selections. -

    -

    - Review and confirm all selections on your printed ballot. -

    -
    • -
  • -

    - Cast in Ballot Box. -

    -

    - Deposit your ballot into the secured ballot box. -

    -
    • - -

    + + ✓ + +

    + Review +
    +
    +
    +
    - I have verified my selections and will cast my ballot. -

    -

    + + ✓ + +

    + Print +
    +
    +
    +
    - -

    + + 4 + +
    + Cast +
    +
    +
    +
    +

    + Cast your printed ballot +

    +

    + Before you cast your official printed ballot in the ballot box, double-check your printed ballot to confirm your selections. +

    +

    + If you find a mistake, ask a poll worker for help. +

    +

    + +

    +
    `; diff --git a/src/pages/__snapshots__/ContestPage.test.tsx.snap b/src/pages/__snapshots__/ContestPage.test.tsx.snap index 56e6d2a..35b27f7 100644 --- a/src/pages/__snapshots__/ContestPage.test.tsx.snap +++ b/src/pages/__snapshots__/ContestPage.test.tsx.snap @@ -15,6 +15,7 @@ exports[`renders ContestPage 1`] = ` } .c2 { + width: 100%; max-width: 66ch; line-height: 1.2; } @@ -32,7 +33,8 @@ exports[`renders ContestPage 1`] = ` .c2 h3, .c2 p { - margin: 1rem 0; + margin-top: 1rem; + margin-bottom: 1rem; font-size: 1rem; } @@ -57,22 +59,6 @@ exports[`renders ContestPage 1`] = ` margin-bottom: 0; } -.c12 { - border: none; - border-radius: 0.25rem; - box-sizing: border-box; - background: rgb(211,211,211); - cursor: pointer; - padding: 0.4rem 0.7rem; - line-height: 1; - white-space: nowrap; - color: black; -} - -.c10 { - word-break: break-word; -} - .c11 { display: -webkit-box; display: -webkit-flex; @@ -91,7 +77,7 @@ exports[`renders ContestPage 1`] = ` justify-content: space-between; border-bottom: 1px solid rgb(169,169,169); background: #455a64; - padding: 0.5rem; + padding: 0.25rem; } .c11 > *:first-child { @@ -128,7 +114,7 @@ exports[`renders ContestPage 1`] = ` order: -1; border-bottom: 1px solid rgb(169,169,169); background: #455a64; - padding: 0.5rem; + padding: 0.25rem; } .c14 > *:first-child { @@ -144,6 +130,21 @@ exports[`renders ContestPage 1`] = ` margin: 0.25rem; } +.c12 { + border: none; + border-radius: 0.25rem; + box-sizing: border-box; + background: rgb(211,211,211); + cursor: pointer; + padding: 0.75rem 1rem; + line-height: 1.25; + color: black; +} + +.c10 { + word-break: break-word; +} + .c1 { margin: 0 auto; width: 100%; diff --git a/src/pages/__snapshots__/HelpPage.test.tsx.snap b/src/pages/__snapshots__/HelpPage.test.tsx.snap index 3e9ecc7..ed14fc6 100644 --- a/src/pages/__snapshots__/HelpPage.test.tsx.snap +++ b/src/pages/__snapshots__/HelpPage.test.tsx.snap @@ -18,10 +18,12 @@ exports[`renders HelpPage 1`] = ` .c1 { margin: 0 0; + width: 100%; max-width: 35rem; } .c2 { + width: 100%; max-width: 66ch; line-height: 1.2; } @@ -39,7 +41,8 @@ exports[`renders HelpPage 1`] = ` .c2 h3, .c2 p { - margin: 1rem 0; + margin-top: 1rem; + margin-bottom: 1rem; font-size: 1rem; } diff --git a/src/pages/__snapshots__/NotFoundPage.test.tsx.snap b/src/pages/__snapshots__/NotFoundPage.test.tsx.snap index dcb5e9e..47b33e5 100644 --- a/src/pages/__snapshots__/NotFoundPage.test.tsx.snap +++ b/src/pages/__snapshots__/NotFoundPage.test.tsx.snap @@ -18,11 +18,13 @@ exports[`renders NotFoundPage 1`] = ` .c1 { margin: auto auto; + width: 100%; max-width: 35rem; } .c2 { margin: auto; + width: 100%; max-width: 66ch; text-align: center; line-height: 1.2; @@ -41,7 +43,8 @@ exports[`renders NotFoundPage 1`] = ` .c2 h3, .c2 p { - margin: 1rem 0; + margin-top: 1rem; + margin-bottom: 1rem; font-size: 1rem; } @@ -72,9 +75,8 @@ exports[`renders NotFoundPage 1`] = ` box-sizing: border-box; background: rgb(211,211,211); cursor: pointer; - padding: 0.4rem 0.7rem; - line-height: 1; - white-space: nowrap; + padding: 0.75rem 1rem; + line-height: 1.25; color: black; } diff --git a/src/pages/__snapshots__/PreReviewPage.test.tsx.snap b/src/pages/__snapshots__/PreReviewPage.test.tsx.snap index a26c4d3..931fc18 100644 --- a/src/pages/__snapshots__/PreReviewPage.test.tsx.snap +++ b/src/pages/__snapshots__/PreReviewPage.test.tsx.snap @@ -17,53 +17,242 @@ exports[`renders PreReviewPage 1`] = ` } .c1 { - margin: 0 0; + margin: auto auto; + width: 100%; max-width: 35rem; } -.c2 { +.c10 { + margin: auto; + width: 100%; max-width: 66ch; + text-align: center; line-height: 1.2; } -.c2 h1 { +.c10 h1 { margin: 2rem 0 1rem; line-height: 1.1; font-size: 1.5rem; } -.c2 h2 { +.c10 h2 { margin: 1.5rem 0 0.75rem; font-size: 1.25rem; } -.c2 h3, -.c2 p { - margin: 1rem 0; +.c10 h3, +.c10 p { + margin-top: 1rem; + margin-bottom: 1rem; font-size: 1rem; } -.c2 h1 + h2 { +.c10 h1 + h2 { margin-top: -0.75rem; } -.c2 h1 + p, -.c2 h2 + p { +.c10 h1 + p, +.c10 h2 + p { margin-top: -0.75rem; } -.c2 h3 + p { +.c10 h3 + p { margin-top: -1rem; } -.c2 :first-child { +.c10 :first-child { margin-top: 0; } -.c2 :last-child { +.c10 :last-child { margin-bottom: 0; } +.c2 { + margin: 0 auto 2rem; + max-width: 600px; + padding-bottom: 2rem; +} + +.c3 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + position: relative; +} + +.c3::before { + position: absolute; + top: 45%; + right: 12%; + left: 12%; + z-index: -1; + background-color: #c7d7df; + height: 10%; + content: ''; +} + +.c4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + position: relative; + padding: 0 4%; +} + +.c5 { + position: relative; + border-radius: 50%; + background: #ffffff; + width: 100%; + height: 0; + padding-top: 100%; +} + +.c5 > span { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + text-align: center; + color: #35809c; + font-size: 7vw; + font-weight: 700; +} + +.c7 { + position: relative; + border-radius: 50%; + background: #35809c; + width: 100%; + height: 0; + padding-top: 100%; +} + +.c7 > span { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + text-align: center; + color: #ffffff; + font-size: 7vw; + font-weight: 700; +} + +.c9 { + position: relative; + border-radius: 50%; + background: #c7d7df; + width: 100%; + height: 0; + padding-top: 100%; +} + +.c9 > span { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + text-align: center; + color: #ffffff; + font-size: 7vw; + font-weight: 700; +} + +.c6 { + position: absolute; + margin: 0.25rem -1rem 0; + width: calc(100% + 2rem); + text-align: center; + color: #c7d7df; +} + +.c8 { + position: absolute; + margin: 0.25rem -1rem 0; + width: calc(100% + 2rem); + text-align: center; + font-weight: 600; +} + +.c12 { + border: none; + border-radius: 0.25rem; + box-sizing: border-box; + background: rgb(71,167,75); + cursor: pointer; + padding: 1rem 1.75rem; + line-height: 1.25; + color: #FFFFFF; + font-size: 1.25rem; +} + +.c11 { + margin-right: auto; + margin-left: auto; + max-width: 33ch; +} + @media (min-width:480px) { .c0 { padding: 2rem 1rem; @@ -88,11 +277,35 @@ exports[`renders PreReviewPage 1`] = ` } @media (min-width:480px) { - .c2 { + .c10 { line-height: 1.3; } } +@media print { + .c2 { + display: none; + } +} + +@media (min-width:686px) { + .c5 > span { + font-size: 2rem; + } +} + +@media (min-width:686px) { + .c7 > span { + font-size: 2rem; + } +} + +@media (min-width:686px) { + .c9 > span { + font-size: 2rem; + } +} +
    @@ -101,14 +314,96 @@ exports[`renders PreReviewPage 1`] = ` >
    +
    +
    +
    + + ✓ + +
    + Mark +
    +
    +
    +
    +
    + + 2 + +
    + Review +
    +
    +
    +
    +
    + + 3 + +
    + Print +
    +
    +
    +
    +
    + + 4 + +
    + Cast +
    +
    +
    +
    +
    +

    - Pre Review Screen + Review Your Selections

    +

    + Confirm and change any votes as necessary. +

    - Time to go into review mode. +

    diff --git a/src/pages/__snapshots__/PrintPage.test.tsx.snap b/src/pages/__snapshots__/PrintPage.test.tsx.snap index dd89ae3..fcc5ad6 100644 --- a/src/pages/__snapshots__/PrintPage.test.tsx.snap +++ b/src/pages/__snapshots__/PrintPage.test.tsx.snap @@ -17,67 +17,62 @@ exports[`renders PrintPage with votes 1`] = ` } .c1 { - margin: 0 0; + margin: auto auto; + width: 100%; max-width: 35rem; } -.c2 { +.c10 { + margin: auto; + width: 100%; max-width: 66ch; + text-align: center; line-height: 1.2; } -.c2 h1 { +.c10 h1 { margin: 2rem 0 1rem; line-height: 1.1; font-size: 1.5rem; } -.c2 h2 { +.c10 h2 { margin: 1.5rem 0 0.75rem; font-size: 1.25rem; } -.c2 h3, -.c2 p { - margin: 1rem 0; +.c10 h3, +.c10 p { + margin-top: 1rem; + margin-bottom: 1rem; font-size: 1rem; } -.c2 h1 + h2 { +.c10 h1 + h2 { margin-top: -0.75rem; } -.c2 h1 + p, -.c2 h2 + p { +.c10 h1 + p, +.c10 h2 + p { margin-top: -0.75rem; } -.c2 h3 + p { +.c10 h3 + p { margin-top: -1rem; } -.c2 :first-child { +.c10 :first-child { margin-top: 0; } -.c2 :last-child { +.c10 :last-child { margin-bottom: 0; } -.c5 > svg { - display: block; - width: 100%; - height: auto; -} - -.c10 { - font-weight: 600; - word-break: break-word; -} - -.c11 { - color: gray; - font-style: italic; +.c2 { + margin: 0 auto 2rem; + max-width: 600px; + padding-bottom: 2rem; } .c3 { @@ -88,160 +83,174 @@ exports[`renders PrintPage with votes 1`] = ` -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-bottom: 0.2rem solid #000000; - height: 1.15in; -} - -.c3 > .seal { - margin: 0.25rem 0; - width: 1in; -} - -.c3 h2 { - margin-bottom: 0; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + position: relative; } -.c3 h3 { - margin-top: 0; +.c3::before { + position: absolute; + top: 45%; + right: 12%; + left: 12%; + z-index: -1; + background-color: #c7d7df; + height: 10%; + content: ''; } -.c3 > .ballot-header-content { +.c4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; -webkit-flex: 1; -ms-flex: 1; flex: 1; - margin: 0 1rem; - max-width: 100%; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + position: relative; + padding: 0 4%; } -.c4 { +.c5 { + position: relative; + border-radius: 50%; + background: #ffffff; + width: 100%; + height: 0; + padding-top: 100%; +} + +.c5 > span { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-self: flex-end; - -ms-flex-item-align: end; - align-self: flex-end; - border: 0.2rem solid #000000; - border-bottom: 0; - max-width: 50%; - padding: 0.25rem; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + text-align: center; + color: #35809c; + font-size: 7vw; + font-weight: 700; } -.c4 > div:first-child { - margin-right: 0.25rem; - width: 1in; +.c7 { + position: relative; + border-radius: 50%; + background: #35809c; + width: 100%; + height: 0; + padding-top: 100%; } -.c4 > div:last-child { +.c7 > span { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + text-align: center; + color: #ffffff; + font-size: 7vw; + font-weight: 700; +} + +.c9 { + position: relative; + border-radius: 50%; + background: #c7d7df; + width: 100%; + height: 0; + padding-top: 100%; } -.c4 > div:last-child > div { +.c9 > span { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-align-self: stretch; - -ms-flex-item-align: stretch; - align-self: stretch; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - font-size: 0.8rem; -} - -.c4 > div:last-child > div strong { - font-size: 1rem; - word-break: break-word; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + text-align: center; + color: #ffffff; + font-size: 7vw; + font-weight: 700; } .c6 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; -} - -.c7 { - -webkit-columns: 2; - columns: 2; - -webkit-column-gap: 2rem; - column-gap: 2rem; + position: absolute; + margin: 0.25rem -1rem 0; + width: calc(100% + 2rem); + text-align: center; + color: #c7d7df; } .c8 { - border-bottom: 0.01rem solid #000000; - padding: 0.5rem 0; - -webkit-break-inside: avoid; - break-inside: avoid; - page-break-inside: avoid; -} - -.c9 { - max-width: 66ch; - line-height: 1.2; -} - -.c9 h1 { - margin: 2rem 0 1rem; - line-height: 1.1; - font-size: 1.5rem; + position: absolute; + margin: 0.25rem -1rem 0; + width: calc(100% + 2rem); + text-align: center; + font-weight: 600; } -.c9 h2 { - margin: 1.5rem 0 0.75rem; +.c12 { + border: none; + border-radius: 0.25rem; + box-sizing: border-box; + background: rgb(71,167,75); + cursor: pointer; + padding: 1rem 1.75rem; + line-height: 1.25; + color: #FFFFFF; font-size: 1.25rem; } -.c9 h3, -.c9 p { - margin: 0; - font-size: 1rem; -} - -.c9 h1 + h2 { - margin-top: -0.75rem; -} - -.c9 h1 + p, -.c9 h2 + p { - margin-top: -0.75rem; -} - -.c9 h3 + p { - margin-top: 0; -} - -.c9 :first-child { - margin-top: 0; -} - -.c9 :last-child { - margin-bottom: 0; -} - -.c9 > h3 { - font-size: 0.875em; - font-weight: 400; +.c11 { + margin-right: auto; + margin-left: auto; + max-width: 33ch; } @media (min-width:480px) { @@ -268,20 +277,32 @@ exports[`renders PrintPage with votes 1`] = ` } @media (min-width:480px) { - .c2 { + .c10 { line-height: 1.3; } } @media print { - .c11 { - color: black; + .c2 { + display: none; } } -@media (min-width:480px) { - .c9 { - line-height: 1.3; +@media (min-width:686px) { + .c5 > span { + font-size: 2rem; + } +} + +@media (min-width:686px) { + .c7 > span { + font-size: 2rem; + } +} + +@media (min-width:686px) { + .c9 > span { + font-size: 2rem; } } @@ -292,637 +313,97 @@ exports[`renders PrintPage with votes 1`] = ` class="c1" >
    -

    - Print your ballot -

    -

    - Ready to print ballot. -

    -
    - `; diff --git a/src/pages/__snapshots__/ReviewPage.test.tsx.snap b/src/pages/__snapshots__/ReviewPage.test.tsx.snap index 6fb3e6f..7210daa 100644 --- a/src/pages/__snapshots__/ReviewPage.test.tsx.snap +++ b/src/pages/__snapshots__/ReviewPage.test.tsx.snap @@ -15,6 +15,7 @@ exports[`renders ReviewPage with votes 1`] = ` } .c2 { + width: 100%; max-width: 66ch; line-height: 1.2; } @@ -32,7 +33,8 @@ exports[`renders ReviewPage with votes 1`] = ` .c2 h3, .c2 p { - margin: 1rem 0; + margin-top: 1rem; + margin-bottom: 1rem; font-size: 1rem; } @@ -63,9 +65,8 @@ exports[`renders ReviewPage with votes 1`] = ` box-sizing: border-box; background: rgb(211,211,211); cursor: pointer; - padding: 0.4rem 0.7rem; - line-height: 1; - white-space: nowrap; + padding: 0.75rem 1rem; + line-height: 1.25; color: black; } @@ -74,11 +75,9 @@ exports[`renders ReviewPage with votes 1`] = ` border-radius: 0.25rem; box-sizing: border-box; background: rgb(211,211,211); - cursor: pointer; width: 100%; - padding: 0.4rem 0.7rem; - line-height: 1; - white-space: nowrap; + padding: 0.75rem 1rem; + line-height: 1.25; color: rgb(169,169,169); } @@ -88,9 +87,8 @@ exports[`renders ReviewPage with votes 1`] = ` box-sizing: border-box; background: rgb(211,211,211); cursor: pointer; - padding: 0.4rem 0.7rem; - line-height: 1; - white-space: nowrap; + padding: 0.75rem 1rem; + line-height: 1.25; color: black; } @@ -231,6 +229,7 @@ button.c7 { } .c9 { + width: 100%; max-width: 66ch; line-height: 1.2; -webkit-flex: 1; @@ -251,7 +250,8 @@ button.c7 { .c9 h3, .c9 p { - margin: 0; + margin-top: 0; + margin-bottom: 0; font-size: 1rem; } @@ -1122,6 +1122,7 @@ exports[`renders ReviewPage without votes 1`] = ` } .c2 { + width: 100%; max-width: 66ch; line-height: 1.2; } @@ -1139,7 +1140,8 @@ exports[`renders ReviewPage without votes 1`] = ` .c2 h3, .c2 p { - margin: 1rem 0; + margin-top: 1rem; + margin-bottom: 1rem; font-size: 1rem; } @@ -1170,9 +1172,8 @@ exports[`renders ReviewPage without votes 1`] = ` box-sizing: border-box; background: rgb(211,211,211); cursor: pointer; - padding: 0.4rem 0.7rem; - line-height: 1; - white-space: nowrap; + padding: 0.75rem 1rem; + line-height: 1.25; color: black; } @@ -1181,11 +1182,9 @@ exports[`renders ReviewPage without votes 1`] = ` border-radius: 0.25rem; box-sizing: border-box; background: rgb(211,211,211); - cursor: pointer; width: 100%; - padding: 0.4rem 0.7rem; - line-height: 1; - white-space: nowrap; + padding: 0.75rem 1rem; + line-height: 1.25; color: rgb(169,169,169); } @@ -1195,9 +1194,8 @@ exports[`renders ReviewPage without votes 1`] = ` box-sizing: border-box; background: rgb(211,211,211); cursor: pointer; - padding: 0.4rem 0.7rem; - line-height: 1; - white-space: nowrap; + padding: 0.75rem 1rem; + line-height: 1.25; color: black; } @@ -1318,6 +1316,7 @@ button.c7 { } .c9 { + width: 100%; max-width: 66ch; line-height: 1.2; -webkit-flex: 1; @@ -1338,7 +1337,8 @@ button.c7 { .c9 h3, .c9 p { - margin: 0; + margin-top: 0; + margin-bottom: 0; font-size: 1rem; } diff --git a/src/pages/__snapshots__/SettingsPage.test.tsx.snap b/src/pages/__snapshots__/SettingsPage.test.tsx.snap index f2f5de8..9148bdc 100644 --- a/src/pages/__snapshots__/SettingsPage.test.tsx.snap +++ b/src/pages/__snapshots__/SettingsPage.test.tsx.snap @@ -18,10 +18,12 @@ exports[`renders SettingsPage 1`] = ` .c1 { margin: 0 0; + width: 100%; max-width: 35rem; } .c2 { + width: 100%; max-width: 66ch; line-height: 1.2; } @@ -39,7 +41,8 @@ exports[`renders SettingsPage 1`] = ` .c2 h3, .c2 p { - margin: 1rem 0; + margin-top: 1rem; + margin-bottom: 1rem; font-size: 1rem; } @@ -70,9 +73,8 @@ exports[`renders SettingsPage 1`] = ` box-sizing: border-box; background: rgb(211,211,211); cursor: pointer; - padding: 0.4rem 0.7rem; - line-height: 1; - white-space: nowrap; + padding: 0.75rem 1rem; + line-height: 1.25; color: black; } diff --git a/src/pages/__snapshots__/StartPage.test.tsx.snap b/src/pages/__snapshots__/StartPage.test.tsx.snap index 06e3a1c..1dbe60f 100644 --- a/src/pages/__snapshots__/StartPage.test.tsx.snap +++ b/src/pages/__snapshots__/StartPage.test.tsx.snap @@ -18,11 +18,13 @@ exports[`renders StartPage 1`] = ` .c1 { margin: auto auto; + width: 100%; max-width: 35rem; } .c3 { margin: auto; + width: 100%; max-width: 66ch; text-align: center; line-height: 1.2; @@ -41,7 +43,8 @@ exports[`renders StartPage 1`] = ` .c3 h3, .c3 p { - margin: 1rem 0; + margin-top: 1rem; + margin-bottom: 1rem; font-size: 1rem; } @@ -72,9 +75,8 @@ exports[`renders StartPage 1`] = ` box-sizing: border-box; background: rgb(71,167,75); cursor: pointer; - padding: 0.4rem 0.7rem; - line-height: 1; - white-space: nowrap; + padding: 0.75rem 1rem; + line-height: 1.25; color: #FFFFFF; }