From 502b297ae8e6327bb1d56b0f460254fb6059eb24 Mon Sep 17 00:00:00 2001 From: Angela Tran Date: Mon, 15 Apr 2024 20:40:58 +0000 Subject: [PATCH 1/9] chore: update copy for MST and SBMTD forms leave name_helper_text for separate commit --- benefits/eligibility/forms.py | 29 +++++++++++++++++++---------- 1 file changed, 19 insertions(+), 10 deletions(-) diff --git a/benefits/eligibility/forms.py b/benefits/eligibility/forms.py index fca3403aa..1adbc2a66 100644 --- a/benefits/eligibility/forms.py +++ b/benefits/eligibility/forms.py @@ -141,12 +141,16 @@ class MSTCourtesyCard(EligibilityVerificationForm): def __init__(self, *args, **kwargs): super().__init__( title=_("Agency card information"), - headline=_("Let’s see if we can confirm your eligibility."), - blurb=_("Please input your Courtesy Card number and last name below to confirm your eligibility."), - name_label=_("Last name (as it appears on Courtesy Card)"), + headline=_("Let’s find the record of your transit benefit."), + blurb=_( + "We use the information on your MST Courtesy Card to find the record of your transit benefit in our system." + ), + name_label=_("Last Name"), name_placeholder="Garcia", - name_help_text=_("We use this to help confirm your Courtesy Card."), - sub_label=_("MST Courtesy Card number"), + name_help_text=_( + "Please enter your last name the same way it is printed on your card, including capital letters and hyphens." + ), + sub_label=_("Courtesy Card number"), sub_help_text=_("This is a 5-digit number on the front and back of your card."), sub_placeholder="12345", name_max_length=255, @@ -164,12 +168,17 @@ class SBMTDMobilityPass(EligibilityVerificationForm): def __init__(self, *args, **kwargs): super().__init__( title=_("Agency card information"), - headline=_("Let’s see if we can confirm your eligibility."), - blurb=_("Please input your Reduced Fare Mobility ID number and last name below to confirm your eligibility."), - name_label=_("Last name (as it appears on Reduced Fare Mobility ID card)"), + headline=_("Let’s find the record of your transit benefit."), + blurb=_( + "We use the information on your SBMTD Reduced Fare Mobility ID card to find the record of your transit " + + "benefit in our system." + ), + name_label=_("Last Name"), name_placeholder="Garcia", - name_help_text=_("We use this to help confirm your Reduced Fare Mobility ID."), - sub_label=_("SBMTD Reduced Fare Mobility ID number"), + name_help_text=_( + "Please enter your last name the same way it is printed on your card, including capital letters and hyphens." + ), + sub_label=_("Reduced Fare Mobility ID card number"), sub_help_text=_("This is a 4-digit number on the back of your card."), sub_placeholder="1234", name_max_length=255, From 5af44044a6e5eabbeef7912f0c8dc165e4d13115 Mon Sep 17 00:00:00 2001 From: Angela Tran Date: Tue, 16 Apr 2024 19:47:40 +0000 Subject: [PATCH 2/9] refactor: update CTA copy for Eligibility Confirm --- benefits/eligibility/forms.py | 2 +- benefits/locale/en/LC_MESSAGES/django.po | 30 ++++++++----------- benefits/locale/es/LC_MESSAGES/django.po | 38 ++++++++++-------------- 3 files changed, 29 insertions(+), 41 deletions(-) diff --git a/benefits/eligibility/forms.py b/benefits/eligibility/forms.py index 1adbc2a66..a7ff58dbe 100644 --- a/benefits/eligibility/forms.py +++ b/benefits/eligibility/forms.py @@ -45,7 +45,7 @@ class EligibilityVerificationForm(forms.Form): id = "form-eligibility-verification" method = "POST" - submit_value = _("Check eligibility") + submit_value = _("Find my record") submitting_value = _("Checking") _error_messages = { diff --git a/benefits/locale/en/LC_MESSAGES/django.po b/benefits/locale/en/LC_MESSAGES/django.po index adc82fd81..8217e2c74 100644 --- a/benefits/locale/en/LC_MESSAGES/django.po +++ b/benefits/locale/en/LC_MESSAGES/django.po @@ -6,7 +6,7 @@ msgid "" msgstr "" "Report-Msgid-Bugs-To: https://github.com/cal-itp/benefits/issues \n" -"POT-Creation-Date: 2024-04-18 14:27-0700\n" +"POT-Creation-Date: 2024-04-19 13:13-0700\n" "Language: English\n" "MIME-Version: 1.0\n" "Content-Type: text/plain; charset=UTF-8\n" @@ -303,7 +303,7 @@ msgstr "" msgid "Choose this benefit" msgstr "" -msgid "Check eligibility" +msgid "Find my record" msgstr "" msgid "Checking" @@ -318,38 +318,34 @@ msgstr "" msgid "Agency card information" msgstr "" -msgid "Let’s see if we can confirm your eligibility." +msgid "Let’s find the record of your transit benefit." msgstr "" msgid "" -"Please input your Courtesy Card number and last name below to confirm your " -"eligibility." +"We use the information on your MST Courtesy Card to find the record of your " +"transit benefit in our system." msgstr "" -msgid "Last name (as it appears on Courtesy Card)" +msgid "Last Name" msgstr "" -msgid "We use this to help confirm your Courtesy Card." +msgid "" +"Please enter your last name the same way it is printed on your card, " +"including capital letters and hyphens." msgstr "" -msgid "MST Courtesy Card number" +msgid "Courtesy Card number" msgstr "" msgid "This is a 5-digit number on the front and back of your card." msgstr "" msgid "" -"Please input your Reduced Fare Mobility ID number and last name below to " -"confirm your eligibility." -msgstr "" - -msgid "Last name (as it appears on Reduced Fare Mobility ID card)" -msgstr "" - -msgid "We use this to help confirm your Reduced Fare Mobility ID." +"We use the information on your SBMTD Reduced Fare Mobility ID card to find " +"the record of your transit benefit in our system." msgstr "" -msgid "SBMTD Reduced Fare Mobility ID number" +msgid "Reduced Fare Mobility ID card number" msgstr "" msgid "This is a 4-digit number on the back of your card." diff --git a/benefits/locale/es/LC_MESSAGES/django.po b/benefits/locale/es/LC_MESSAGES/django.po index b4e9985ca..376f7c20e 100644 --- a/benefits/locale/es/LC_MESSAGES/django.po +++ b/benefits/locale/es/LC_MESSAGES/django.po @@ -6,7 +6,7 @@ msgid "" msgstr "" "Report-Msgid-Bugs-To: https://github.com/cal-itp/benefits/issues \n" -"POT-Creation-Date: 2024-04-18 14:27-0700\n" +"POT-Creation-Date: 2024-04-19 13:13-0700\n" "Language: Español\n" "MIME-Version: 1.0\n" "Content-Type: text/plain; charset=UTF-8\n" @@ -390,7 +390,7 @@ msgstr "¿A qué beneficio de tránsito le gustaría inscribirse?" msgid "Choose this benefit" msgstr "Elegir este beneficio" -msgid "Check eligibility" +msgid "Find my record" msgstr "Comprobar elegibilidad" msgid "Checking" @@ -405,42 +405,34 @@ msgstr "Este campo es requerido." msgid "Agency card information" msgstr "Información de la tarjeta de agencia" -msgid "Let’s see if we can confirm your eligibility." +msgid "Let’s find the record of your transit benefit." msgstr "Veamos si podemos confirmar su elegibilidad." msgid "" -"Please input your Courtesy Card number and last name below to confirm your " -"eligibility." +"We use the information on your MST Courtesy Card to find the record of your " +"transit benefit in our system." msgstr "" -"Ingrese el número de su tarjeta de cortesía y apellido a continuación para " -"confirmar su elegibilidad." -msgid "Last name (as it appears on Courtesy Card)" -msgstr "Apellido (tal como aparece en la tarjeta de cortesía)" +msgid "Last Name" +msgstr "Apellido" -msgid "We use this to help confirm your Courtesy Card." -msgstr "Usamos esto para ayudar a confirmar su tarjeta de cortesía." +msgid "" +"Please enter your last name the same way it is printed on your card, " +"including capital letters and hyphens." +msgstr "" -msgid "MST Courtesy Card number" +msgid "Courtesy Card number" msgstr "Número de tarjeta de cortesía de MST" msgid "This is a 5-digit number on the front and back of your card." msgstr "Este es un número de 5 dígitos en el anverso y reverso de su tarjeta." msgid "" -"Please input your Reduced Fare Mobility ID number and last name below to " -"confirm your eligibility." +"We use the information on your SBMTD Reduced Fare Mobility ID card to find " +"the record of your transit benefit in our system." msgstr "" -"Ingrese el número de cuatro dígitos de su Reduced Fare Mobility ID y su " -"apellido a continuación para confirmar su elegibilidad." - -msgid "Last name (as it appears on Reduced Fare Mobility ID card)" -msgstr "Apellido (tal como aparece en la tarjeta de Reduced Fare Mobility ID)" - -msgid "We use this to help confirm your Reduced Fare Mobility ID." -msgstr "Usamos esto para ayudar a confirmar su Reduced Fare Mobility ID." -msgid "SBMTD Reduced Fare Mobility ID number" +msgid "Reduced Fare Mobility ID card number" msgstr "Número de SBMTD Reduced Fare Mobility ID" msgid "This is a 4-digit number on the back of your card." From b5fcac108e1f4abb9aa8c5db4c6d66ee1e3e628d Mon Sep 17 00:00:00 2001 From: Angela Tran Date: Tue, 16 Apr 2024 19:51:33 +0000 Subject: [PATCH 3/9] style: make field helper text 12px away from field --- benefits/core/templates/core/includes/form.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/benefits/core/templates/core/includes/form.html b/benefits/core/templates/core/includes/form.html index 56a40ebce..ed4ec3b08 100644 --- a/benefits/core/templates/core/includes/form.html +++ b/benefits/core/templates/core/includes/form.html @@ -20,7 +20,7 @@ {{ field }} - {% if field.help_text %}{{ field.help_text }}{% endif %} + {% if field.help_text %}{{ field.help_text }}{% endif %} {% endfor %} From acfd860418d1814defad78dd06ae082e0c1d9d72 Mon Sep 17 00:00:00 2001 From: Angela Tran Date: Tue, 16 Apr 2024 21:37:06 +0000 Subject: [PATCH 4/9] style: update form field header styles letter-spacing was already correct --- benefits/static/css/styles.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css index aefc64478..d77f5751b 100644 --- a/benefits/static/css/styles.css +++ b/benefits/static/css/styles.css @@ -16,6 +16,7 @@ --bs-body-font-family: var(--bs-font-sans-serif); --bs-body-line-height: 1.5; /* Displayed as 150% on Figma */ --heading-line-height: 1.3; /* Displayed as 130% on Figma */ + --form-field-header-line-height: 1.25; /*Displayed as 125% on Figma */ --h4-line-height: 1.2; /* Displayed as 120% on Figma */ --letter-spacing-2: 0.02; /* Displayed as 2% on Figma */ --letter-spacing-3: 0.03; /* Displayed as 3% on Figma */ @@ -566,8 +567,9 @@ footer .footer-links li a.footer-link:visited { } .form-container .form-control-label { - font-size: var(--bs-body-font-size); + font-size: var(--font-size-16px); font-weight: var(--medium-font-weight); + line-height: var(--form-field-header-line-height); letter-spacing: calc(var(--bs-body-font-size) * var(--letter-spacing-5)); padding-bottom: calc(12rem / 16); } From 88a7624e721b1471566c64f98f13c8839ed98b05 Mon Sep 17 00:00:00 2001 From: Angela Tran Date: Tue, 16 Apr 2024 21:50:07 +0000 Subject: [PATCH 5/9] style: required-label styles should match form field header styles --- benefits/static/css/styles.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css index d77f5751b..2ab1ee711 100644 --- a/benefits/static/css/styles.css +++ b/benefits/static/css/styles.css @@ -566,7 +566,8 @@ footer .footer-links li a.footer-link:visited { padding-top: var(--form-input-gap); } -.form-container .form-control-label { +.form-container .form-control-label, +.form-container .required-label { font-size: var(--font-size-16px); font-weight: var(--medium-font-weight); line-height: var(--form-field-header-line-height); From fc2669681f05c1730f344fe3a9cee566137ab398 Mon Sep 17 00:00:00 2001 From: Angela Tran Date: Tue, 16 Apr 2024 22:03:08 +0000 Subject: [PATCH 6/9] style: update form field helper text styles --- benefits/static/css/styles.css | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css index 2ab1ee711..88c31225f 100644 --- a/benefits/static/css/styles.css +++ b/benefits/static/css/styles.css @@ -16,7 +16,7 @@ --bs-body-font-family: var(--bs-font-sans-serif); --bs-body-line-height: 1.5; /* Displayed as 150% on Figma */ --heading-line-height: 1.3; /* Displayed as 130% on Figma */ - --form-field-header-line-height: 1.25; /*Displayed as 125% on Figma */ + --form-field-text-line-height: 1.25; /*Displayed as 125% on Figma */ --h4-line-height: 1.2; /* Displayed as 120% on Figma */ --letter-spacing-2: 0.02; /* Displayed as 2% on Figma */ --letter-spacing-3: 0.03; /* Displayed as 3% on Figma */ @@ -570,8 +570,8 @@ footer .footer-links li a.footer-link:visited { .form-container .required-label { font-size: var(--font-size-16px); font-weight: var(--medium-font-weight); - line-height: var(--form-field-header-line-height); - letter-spacing: calc(var(--bs-body-font-size) * var(--letter-spacing-5)); + line-height: var(--form-field-text-line-height); + letter-spacing: calc(var(--font-size-16px) * var(--letter-spacing-5)); padding-bottom: calc(12rem / 16); } @@ -594,6 +594,8 @@ footer .footer-links li a.footer-link:visited { .form-text { font-size: var(--font-size-14px); + line-height: var(--form-field-text-line-height); + letter-spacing: var(--letter-spacing-5); } /* Forms: Radio Buttons */ From 61990458925717be9d5c2a8ccb3bca67653bde70 Mon Sep 17 00:00:00 2001 From: Angela Tran Date: Tue, 16 Apr 2024 22:04:52 +0000 Subject: [PATCH 7/9] style: update spacing between fields to be 24px --- benefits/static/css/styles.css | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css index 88c31225f..6927754d9 100644 --- a/benefits/static/css/styles.css +++ b/benefits/static/css/styles.css @@ -553,13 +553,7 @@ footer .footer-links li a.footer-link:visited { /* Form Container: Must use .form-container parent to use these styles */ :root { - --form-input-gap: calc(22rem / 16); -} - -@media (min-width: 992px) { - :root { - --form-input-gap: calc(42rem / 16); - } + --form-input-gap: calc(24rem / 16); } .form-container .form-group:not(:first-child) { From 433e119f163a97a30333861bae2fad21dd23e927 Mon Sep 17 00:00:00 2001 From: Angela Tran Date: Wed, 17 Apr 2024 20:27:27 +0000 Subject: [PATCH 8/9] style: update spacing between body text and form to be 24px --- benefits/eligibility/templates/eligibility/confirm.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/benefits/eligibility/templates/eligibility/confirm.html b/benefits/eligibility/templates/eligibility/confirm.html index a36db3113..7ce2599e6 100644 --- a/benefits/eligibility/templates/eligibility/confirm.html +++ b/benefits/eligibility/templates/eligibility/confirm.html @@ -16,7 +16,7 @@

{{ form.headline }}

{% endblock headline %} {% block explanatory-text %} -

{{ form.blurb }}

+

{{ form.blurb }}

{% endblock explanatory-text %} {% block inner-content %} From ffc2f6024ee4ef8c40656aaceea9bc30cae4beb6 Mon Sep 17 00:00:00 2001 From: Angela Tran Date: Fri, 19 Apr 2024 20:03:38 +0000 Subject: [PATCH 9/9] style: align headline and body with form fields as shown in Figma --- benefits/core/templates/core/base.html | 2 ++ .../eligibility/templates/eligibility/confirm.html | 14 ++++++++++---- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/benefits/core/templates/core/base.html b/benefits/core/templates/core/base.html index 7003fec5a..282014196 100644 --- a/benefits/core/templates/core/base.html +++ b/benefits/core/templates/core/base.html @@ -79,10 +79,12 @@
{% block headline %} {% endblock headline %} + {% block explanatory-text-wrapper %}
{% block explanatory-text %} {% endblock explanatory-text %}
+ {% endblock explanatory-text-wrapper %}
{% block inner-content %} diff --git a/benefits/eligibility/templates/eligibility/confirm.html b/benefits/eligibility/templates/eligibility/confirm.html index 7ce2599e6..31f617422 100644 --- a/benefits/eligibility/templates/eligibility/confirm.html +++ b/benefits/eligibility/templates/eligibility/confirm.html @@ -10,14 +10,20 @@ {% endblock nav-buttons %} {% block headline %} -
+

{{ form.headline }}

{% endblock headline %} -{% block explanatory-text %} -

{{ form.blurb }}

-{% endblock explanatory-text %} +{% block explanatory-text-wrapper %} +
+
+ {% block explanatory-text %} +

{{ form.blurb }}

+ {% endblock explanatory-text %} +
+
+{% endblock explanatory-text-wrapper %} {% block inner-content %}