Merge pull request #579 from dod-ccpo/to-form-fixes-2

TO Form Fixes

styles/sections/_task_order.scss

@@ -258,8 +258,23 @@
     }
   }
 
-  .alert {
+  .input--disabled {
+    label .usa-input__title {
+      color: $color-gray-light;
+    }
+
+    input[type="text"]:disabled {
+      color: $color-gray-lighter;
+      font-style: italic;
+    }
+  }
+
+  .task-order__invite-officer {
     padding: 1.5rem;
+    background-color: $color-aqua-lightest;
+    border-color: $color-blue;
+    border-left-style: solid;
+    border-left-width: $gap / 2;
 
     .usa-input {
       width: 100%;

templates/components/text_input.html

@@ -12,6 +12,7 @@
   paragraph=False,
   disabled=False,
   initial_value='',
+  classes='',
   noMaxWidth=False) -%}
 
   <textinput
@@ -26,7 +27,7 @@
     inline-template>
 
     <div
-      {% if disabled %}class="input--disabled"{% endif %}
+      class='{% if disabled %}input--disabled{% endif %} {{ classes }}'
       v-bind:class="['usa-input usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid, 'usa-input--validation--paragraph': paragraph, 'no-max-width': noMaxWidth }]">
 
       <label for={{field.name}}>

templates/task_orders/new/funding.html

@@ -29,7 +29,7 @@
     <h3 class="subheading">{{ "task_orders.new.funding.estimate_usage_title" | translate }}</h3>
     <p>{{ "task_orders.new.funding.estimate_usage_description" | translate }}</p>
     <p><a class="icon-link" target="_blank" href="{{ url_for('atst.jedi_csp_calculator') }}">
-      {{ Icon("link")}} Cloud Service Provider's estimate calculator
+      {{ Icon("link")}} Go to Cloud Service Provider’s estimate calculator
     </a></p>
     <p>{{ "task_orders.new.funding.estimate_usage_paragraph" | translate }}</p>
     <template v-if="showUpload">
@@ -57,12 +57,12 @@
     <h4 class="task-order-form__heading subheading">{{ "task_orders.new.funding.cloud_offerings_title" | translate }}</h4>
     <p>{{ "task_orders.new.funding.cloud_offerings_paragraph" | translate }}</p>
     {{ TextInput(form.clin_01, validation='dollars', placeholder="$0.00") }}
-    {{ TextInput(form.clin_02, validation='dollars', disabled=(not config.CLASSIFIED)) }}
+    {{ TextInput(form.clin_02, validation='dollars', placeholder="$0.00", disabled=(not config.CLASSIFIED)) }}
 
     <h4 class="task-order-form__heading subheading">{{ "task_orders.new.funding.support_assistance_title" | translate }}</h4>
     <p>{{ "task_orders.new.funding.support_assistance_paragraph" | translate }}</p>
     {{ TextInput(form.clin_03, validation='dollars', tooltip='The cloud support and assistance packages cannot be used as a primary development resource.', placeholder="$0.00") }}
-    {{ TextInput(form.clin_04, validation='dollars', tooltip='The cloud support and assistance packages cannot be used as a primary development resource.', disabled=(not config.CLASSIFIED)) }}
+    {{ TextInput(form.clin_04, validation='dollars', tooltip='The cloud support and assistance packages cannot be used as a primary development resource.', placeholder="$0.00", disabled=(not config.CLASSIFIED)) }}
   </div>
 </funding>
 

templates/task_orders/new/oversight.html

@@ -18,7 +18,7 @@
         {{ UserInfo(form.ko_first_name, form.ko_last_name, form.ko_email, form.ko_phone_number) }}
         {{ CheckboxInput(form.ko_invite) }}
         <template v-if="ko_invite">
-            {{ TextInput(form.ko_dod_id, placeholder="1234567890", tooltip="Why", tooltip_title='Why', validation='dodId')}}
+            {{ TextInput(form.ko_dod_id, placeholder="1234567890", tooltip="Why", tooltip_title='Why', validation='dodId', classes="task-order__invite-officer")}}
         </template>
 
         <hr />
@@ -30,7 +30,7 @@
             {{ UserInfo(form.cor_first_name, form.cor_last_name, form.cor_email, form.cor_phone_number) }}
             {{ CheckboxInput(form.cor_invite) }}
             <template v-if="cor_invite">
-                {{ TextInput(form.cor_dod_id, placeholder="1234567890", tooltip="Why", tooltip_title='Why', validation='dodId')}}
+                {{ TextInput(form.cor_dod_id, placeholder="1234567890", tooltip="Why", tooltip_title='Why', validation='dodId', classes="task-order__invite-officer")}}
             </template>
         </template>
 
@@ -41,7 +41,7 @@
         {{ UserInfo(form.so_first_name, form.so_last_name, form.so_email, form.so_phone_number) }}
         {{ CheckboxInput(form.so_invite) }}
         <template v-if="so_invite">
-            {{ TextInput(form.so_dod_id, placeholder="1234567890", tooltip="Why", tooltip_title='Why', validation='dodId')}}
+            {{ TextInput(form.so_dod_id, placeholder="1234567890", tooltip="Why", tooltip_title='Why', validation='dodId', classes="task-order__invite-officer")}}
         </template>
     </div>
 </oversight>

templates/task_orders/new/review.html

@@ -118,8 +118,10 @@
         <a href="{{ url_for("task_orders.download_csp_estimate", task_order_id=task_order.id) }}" class='icon-link icon-link--left' download>{{ Icon('download') }} {{ "task_orders.new.review.usage_est_link"| translate }}</a>
       </p>
     {% else %}
-      <a href="{{ url_for("task_orders.download_csp_estimate", task_order_id=task_order.id) }}" class='icon-link icon-link--left icon-link--disabled' aria-disabled="true">{{ Icon('download') }} {{ "task_orders.new.review.usage_est_link"| translate }}</a>
-      {{ Icon('alert', classes='icon--red') }} <span class="task-order-invite-message not-sent">{{ "task_orders.new.review.not_uploaded"| translate }}</span>
+      <p>
+        <a href="{{ url_for("task_orders.download_csp_estimate", task_order_id=task_order.id) }}" class='icon-link icon-link--left icon-link--disabled' aria-disabled="true">{{ Icon('download') }} {{ "task_orders.new.review.usage_est_link"| translate }}</a><br>
+        {{ Icon('alert', classes='icon--red') }} <span class="task-order-invite-message not-sent">{{ "task_orders.new.review.not_uploaded"| translate }}</span>
+      </p>
     {% endif %}
   {% endcall %}
 

translations.yaml

@@ -188,7 +188,7 @@ forms:
       description: Which of these describes how complex your team's use of the cloud will be? Select all that apply.
       storage: Storage
       data_analytics: Data Analytics
-      conus: CONUS Acess
+      conus: CONUS Access
       oconus: OCONUS Access
       tactical_edge: Tactical Edge Access
       not_sure: Not Sure