Feat: eligibility confirm copy and UX

[angela-tran]

Closes #2011

This PR updates the copy as shown in Figma and updates styles for the Eligibility Confirm form fields.

Followed precedent set by #1610 in using unit-less value for line-height

Reviewing

• Launch the app from this branch
• Check that copy and styles were updated as specified in Eligibility confirm: make copy more specific, and improve field helper text #2011

Screenshots

Desktop

Before (using test-benefits)	After (this branch)	Figma

Mobile

Before (using test-benefits)	After (this branch)	Figma

[github-actions]

Coverage report

Click to see where and how coverage changed

File	Statements	Missing	Coverage	Coverage (new stmts)	Lines missing
benefits/eligibility
forms.py
Project Total

This report was generated by python-coverage-comment-action

[angela-tran]

Hi @indexing and @thekaveman --

I want to confirm that for MST Courtesy Card and SBMTD Reduced Fare Mobility ID, the copy is supposed to be changing from

- This is a 5-digit number on the front and back of your card.
+ This is a 6-digit number on the front of your card.

and

- This is a 4-digit number on the back of your card.
+ This is a 4-digit number on the front of your card.

(also see screenshot on #2011 (comment))

With that confirmed, I can more confidently update our courtesy-card Cypress tests, which are failing because they expect 5 digits, and our sample data in eligibility-server. I hadn't heard of any changes to the format for Courtesy Card or Reduced Fare Mobility ID numbers, so I have uncertainty on where this copy change is coming from.

[angela-tran]

Another question for @indexing (and maybe @srhhnry too):

What should the copy be for the button when it is submitting the form? Currently the CTA goes from "Check eligibility" to "Checking..."

The Figma screen only shows the unsubmitted state with copy "Find my record"

[srhhnry]

Good catch! My inclination is this button becomes "Finding...". However, I'd like to revisit it later. @indexing Thoughts?

[indexing]

Let's leave it as "Checking..." to keep our scope intact. If we change the button label in the processing state, that copy needs to be represented in Figma so it can be captured in Ditto for translation.

We can address processing state as an aspect of the effort to complete the button component in the new Figma library.

[thekaveman]

@angela-tran @indexing @srhhnry -- regarding this:

I want to confirm that for MST Courtesy Card and SBMTD Reduced Fare Mobility ID, the copy is supposed to be changing from

- This is a 5-digit number on the front and back of your card.
+ This is a 6-digit number on the front of your card.

and

- This is a 4-digit number on the back of your card.
+ This is a 4-digit number on the front of your card.

I think this is just a mistake for the Courtesy Cards number of digits change. We haven't heard about any change from MST to the format of their Courtesy Cards. They are still 5-digits as far as we know.

[thekaveman]

@indexing @srhhnry I think we do need an answer on the front and back difference.

Do we know definitively where these numbers are displayed for Courtesy Cards and Reduced Fare Mobility ID cards? (It may be different per agency).

[angela-tran]

Dropped f856862 and 237b571 based on @thekaveman 's comments.

If it turns out we do need to change the helper text copy for the card number field, I can make new commits

[indexing]

@angela-tran I can confirm that the digit count for both agency cards has not changed.

• SBMTD Reduced Fare Mobility ID
• MST Courtesy Card

[angela-tran]

I just noticed in my Before vs. After vs. Figma screenshots that there was a change in Figma for the number of columns that the headline and body text should fit within for Desktop.

This seems like something we didn't notice / forgot about in design-dev handoff. It seems easy enough and self-contained, so I will go ahead and implement the change.

[thekaveman]

This looks great to me!

[angela-tran]

Sorry @thekaveman , I had to rebase and resolve a conflict with the timestamp in our django.po files