Create macro for form step headings

templates/task_orders/form_header.html

@@ -0,0 +1,21 @@
+{% macro TOFormStepHeader(title, description, to_number=None) %}
+  <div class="column">
+    <div class="form-row">
+      <div class="form-col form-col--two-thirds">
+        <div class="h2">
+          {{ title }}
+        </div>
+      </div>
+      <div class="form-col form-col--third">
+        {% if to_number %}
+          <strong>Task Order Number:</strong> {{ to_number }}
+        {% endif %}
+      </div>
+    </div>
+    <div class="form-row">
+      <div>
+        {{ description }}
+      </div>
+    </div>
+  </div>
+{% endmacro %}

templates/task_orders/step_1.html

@@ -2,6 +2,7 @@
 
 {% from 'components/icon.html' import Icon %}
 {% from "components/sticky_cta.html" import StickyCTA %}
+{% from "task_orders/form_header.html" import TOFormStepHeader %}
 {% from 'components/upload_input.html' import UploadInput %}
 
 {% if task_order_id %}
@@ -16,13 +17,6 @@
 
 
 {% block to_builder_form_field %}
-  <div class="h3">
-    {{ 'task_orders.form.supporting_docs_header' | translate }}
-  </div>
-
-  <div class="task-order__pdf-help-text">
-    {{ 'task_orders.form.supporting_docs_text' | translate }} {{ Icon('question')}}
-  </div>
-
+  {{ TOFormStepHeader('task_orders.form.supporting_docs_header' | translate, 'task_orders.form.supporting_docs_text' | translate) }}
   {{ UploadInput(form.pdf, watch=True) }}
 {% endblock %}

templates/task_orders/step_2.html

@@ -1,6 +1,7 @@
 {% extends "task_orders/builder_base.html" %}
 
 {% from 'components/text_input.html' import TextInput %}
+{% from "task_orders/form_header.html" import TOFormStepHeader %}
 
 {% set action = url_for("task_orders.submit_form_step_two_add_number", task_order_id=task_order_id) %}
 {% set next_button_text = "Next: Add Base CLIN" %}
@@ -8,9 +9,6 @@
 {% set step = "2" %}
 
 {% block to_builder_form_field %}
-  <div class="h1">
-    {{ 'task_orders.form.add_to_header' | translate }}
-  </div>
-
+  {{ TOFormStepHeader('task_orders.form.add_to_header' | translate, "Lorem ipsem")}}
   {{ TextInput(form.number, validation='taskOrderNumber', optional=False) }}
 {% endblock %}

templates/task_orders/step_3.html

@@ -4,6 +4,7 @@
 {% from 'components/icon.html' import Icon %}
 {% from 'components/options_input.html' import OptionsInput %}
 {% from 'components/text_input.html' import TextInput %}
+{% from 'task_orders/form_header.html' import TOFormStepHeader %}
 
 {% set action = url_for("task_orders.submit_form_step_three_add_clins", task_order_id=task_order_id) %}
 {% set next_button_text = "Next: Review Funding" %}
@@ -99,16 +100,11 @@
     inline-template
     v-bind:initial-clin-count="{{ form.clins.data | length }}">
       <div>
-      <div class="h3">
-        {{ 'task_orders.form.cloud_funding_header' | translate }}
-      </div>
-      <div>
-        {{ 'task_orders.form.cloud_funding_text' | translate }}
-      </div>
+        {{ TOFormStepHeader('task_orders.form.base_clin_title' | translate, 'task_orders.form.base_clin_description' | translate, task_order.number) }}
 
-      {% for clin in form.clins %}
-        {{ CLINFields(clin, index=loop.index - 1) }}
-      {% endfor %}
+        {% for clin in form.clins %}
+          {{ CLINFields(clin, index=loop.index - 1) }}
+        {% endfor %}
 
       <div v-for="clin in clins">
         <hr v-if="clinIndex !== 0">

templates/task_orders/step_5.html

@@ -2,6 +2,7 @@
 
 {% from "components/alert.html" import Alert %}
 {% from "components/checkbox_input.html" import CheckboxInput %}
+{% from 'task_orders/form_header.html' import TOFormStepHeader %}
 
 {% set action = url_for("task_orders.submit_task_order", task_order_id=task_order_id) %}
 {% set next_button_text = "Next: Confirm & Submit" %}
@@ -9,14 +10,11 @@
 {% set step = "5" %}
 
 {% block to_builder_form_field %}
-  <div>
-    <h1>Signature confirmation: <em>Task Order #{{task_order.number}}</em></h1>
-  </div>
+  {{ TOFormStepHeader("Signature confirmation", "Lorem ipsem", task_order_number) }}
 
   {% call Alert('',
     message="All task orders require a Contracting Officer signature."
   ) %}
-
     {{ CheckboxInput(form.signature) }}
   {% endcall %}
 {% endblock %}