Merge pull request #1258 from dod-ccpo/form-action-bars

Form action bars

styles/components/_forms.scss

@@ -1,7 +1,8 @@
 // Form Grid
 .form-row {
   margin: ($gap * 4) 0;
-  &--separated {
+
+  &--bordered {
     border-bottom: $color-gray-lighter 1px solid;
   }
 

styles/elements/_action_group.scss

@@ -46,7 +46,7 @@
   background: white;
   right: 0;
   padding-right: $gap * 4;
-  border-top: 1px solid $color-gray-light;
+  border-top: 1px solid $color-gray-lighter;
   width: 100%;
   z-index: 1;
 }

templates/home.html

@@ -13,12 +13,6 @@
      {% set sticky_header = "home.get_started" | translate  %}
   {% endif %}
 
-  {% call StickyCTA(sticky_header) %}
-      <a href="{{ url_for("portfolios.new_portfolio_step_1") }}" class="usa-button-primary">
-        {{ "home.add_portfolio_button_text" | translate }}
-      </a>
-  {% endcall %}
-
   <div class="about-cloud">
     {% include "fragments/flash.html" %}
 
@@ -92,9 +86,10 @@
           </div>
         </div>
       </toggler>
-
     </div>
-    <img id='jedi-heirarchy' src="{{ url_for("static", filename="img/JEDIhierarchyDiagram.png")}}" alt="JEDI heirarchy diagram">
+    <a href="{{ url_for("portfolios.new_portfolio_step_1") }}" class="usa-button-primary">
+      {{ "home.add_portfolio_button_text" | translate }}
+    </a>
   </div>
 </main>
 

templates/portfolios/new/step_1.html

@@ -16,15 +16,16 @@
   </div>
   {{ StickyCTA(text="Create New Portfolio") }}
   <base-form inline-template>
-    <form id="portfolio-create" action="{{ url_for('portfolios.create_portfolio') }}" method="POST">
+    <div class="row">
+      <form id="portfolio-create" class="col" action="{{ url_for('portfolios.create_portfolio') }}" method="POST">
         {{ form.csrf_token }}
-      <div class="form-row form-row--separated">
+        <div class="form-row form-row--bordered">
           <div class="form-col">
-        {{ TextInput(form.name, optional=False) }}
+            {{ TextInput(form.name, optional=False, classes="form-col") }}
             {{"forms.portfolio.name.help_text" | translate | safe }}
           </div>
         </div>
-      <div class="form-row form-row--separated">
+        <div class="form-row form-row--bordered">
           <div class="form-col">
             {{ TextInput(form.description, paragraph=True) }}
             {{"forms.portfolio.description.help_text" | translate | safe }}
@@ -36,16 +37,15 @@
             {{ "forms.portfolio.defense_component.help_text" | translate | safe }}
           </div>
         </div>
-      <div class='action-group'>
+        <div class='action-group-footer'>
-        {{
+        {% block next_button %}
-          SaveButton(
+          {{ SaveButton(text=('common.save' | translate), form="portfolio-create", element="input") }}
-            text=('common.save' | translate),
+        {% endblock %}
-            form="portfolio-create",
+        <a href="{{ url_for('applications.portfolio_applications', portfolio_id=portfolio.id) }}">
-            element="input",
+          Cancel
-          )
+        </a>
-        }}
-      </div>
       </form>
+    </div>
   </base-form>
 </main>
 {% endblock %}

templates/task_orders/builder_base.html

@@ -8,8 +8,26 @@
     <form id="to_form" action='{{ action }}' method="POST" autocomplete="off" enctype="multipart/form-data">
       {{ form.csrf_token }}
 
-      {% call StickyCTA(text=('task_orders.form.sticky_header_text' | translate({"step": step}) )) %}
+      {{ StickyCTA(
-        <span class="action-group">
+        text='task_orders.form.sticky_header_text' | translate,
+        context=('task_orders.form.sticky_header_context' | translate({"step": step}) )) }}
+
+      {% call Modal(name='cancel', dismissable=True) %}
+        <div class="task-order__modal-cancel">
+          <h1>Do you want to save this draft?</h1>
+          <div class="action-group">
+            <button formaction="{{ cancel_discard_url }}" class="usa-button usa-button-primary" type="submit">No, delete it</button>
+            <button formaction="{{ cancel_save_url }}" class="usa-button usa-button-primary" type="submit">Yes, save for later</button>
+          </div>
+        </div>
+      {% endcall %}
+
+      {% include "fragments/flash.html" %}
+
+      <div class="task-order">
+        {% block to_builder_form_field %}{% endblock %}
+      </div>
+       <span class="action-group-footer">
           {% block next_button %}
             <input
               type="submit"
@@ -32,23 +50,6 @@
             {{ "common.cancel" | translate }}
           </a>
         </span>
-      {% endcall %}
-
-      {% call Modal(name='cancel', dismissable=True) %}
-        <div class="task-order__modal-cancel">
-          <h1>Do you want to save this draft?</h1>
-          <div class="action-group">
-            <button formaction="{{ cancel_discard_url }}" class="usa-button usa-button-primary" type="submit">No, delete it</button>
-            <button formaction="{{ cancel_save_url }}" class="usa-button usa-button-primary" type="submit">Yes, save for later</button>
-          </div>
-        </div>
-      {% endcall %}
-
-      {% include "fragments/flash.html" %}
-
-      <div class="task-order">
-        {% block to_builder_form_field %}{% endblock %}
-      </div>
 
     </form>
   </to-form>

templates/task_orders/step_1.html

@@ -1,7 +1,6 @@
 {% extends "task_orders/builder_base.html" %}
 
 {% 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 %}
 

translations.yaml

@@ -526,7 +526,8 @@ task_orders:
       description: Finally, plase confirm that your uploaded document representing the information you've entered contains the required signature from your Contracting Officer. You will be informed as soon as CCPO completes their review.
       alert_message: All task orders require a Contracting Officer signature.
       next_button: 'Confirm & Submit'
-    sticky_header_text: 'Add Task Order (step {step} of 5)'
+    sticky_header_text: 'Add Task Order'
+    sticky_header_context: 'Step {step} of 5'
   empty_state:
     header: Add approved task orders
     message: Upload your approved Task Order here. You are required to confirm you have the appropriate signature. You will have the ability to add additional approved Task Orders with more funding to this Portfolio in the future.