Adjust code to start to use required fields logic that ffb added. (#235)

Co-authored-by: Bethany Seeger <bseeger@codeforamerica.org>

src/main/resources/messages.properties

@@ -196,7 +196,7 @@ continue-with-site.header=Based on your answers, you can apply for benefits on t
 
 help-needed.title=Select help
 help-needed.header=What kind of help would you like?
-help-needed.subheader=This helps us show you which benefits programs exist for your needs.
+help-needed.subheader=This helps us show you which benefits programs exist for your needs.<br><br>Check all that apply.
 help-needed.food=Help with food
 help-needed.children=Help with money for children
 help-needed.utilities=Help with utilities
@@ -642,8 +642,8 @@ household-income-total.add-by-job=Do you want to add your monthly household inco
 household-income-total.no=No, continue
 household-income-total.yes=Yes, add income by job
 additional-income.title=Additional income
-additional-income.header=Does anyone in the household get money from any of these sources?<p>Check all that apply.</p>
-additional-income.subtext=We use this to check if you can get benefits in 7 days or less. Your benefit amount doesn't change by adding this field.<p>Check all that apply.</p>
+additional-income.header=Does anyone in the household get money from any of these sources?
+additional-income.subtext=We use this to check if you can get benefits in 7 days or less. Your benefit amount doesn't change by adding this field.<br /><br />Check all that apply.
 additional-income.choice.alimony=Alimony
 additional-income.choice.child-support=Child Support
 additional-income.choice.friends-and-family=Contributions from friends and family

src/main/resources/static/assets/css/custom.css

@@ -514,4 +514,12 @@ li li {
 .email-confirmation-text {
   color: #00891B;
   font-weight: bold;
+}
+
+.form-group .text--help+.text--error {
+  margin-top: 0;
+}
+
+.form-group--error fieldset .text--error {
+  margin-top: 0;
 }

src/main/resources/templates/fragments/cardHeader.html

@@ -1,9 +1,14 @@
 <header
     th:fragment="cardHeader"
-    th:with="hasSubtext=${!#strings.isEmpty(subtext)}"
+    th:with="hasSubtext=${!#strings.isEmpty(subtext)},
+             requiredField=${required ?: false}"
     th:assert="${!#strings.isEmpty(header)}"
     class="form-card__header">
-  <h1 id="header" class="h2" th:utext="${header}"></h1>
+  <h1 id="header" class="h2">
+    <span th:utext="${header}"></span>
+    <span th:if="${requiredField}" class="required-input"
+          th:text="#{general.required-field}"></span>
+  </h1>
   <p id="header-help-message"
      th:if="${hasSubtext}"
      th:utext="${subtext}"></p>