Styling for CLIN Details section

add in validation styling for inputs
use solid checkmark as ok validation across site

js/components/clin_fields.js

@@ -8,6 +8,7 @@ const OBLIGATED_AMOUNT = 'obligated_amount'
 const START_DATE = 'start_date'
 const END_DATE = 'end_date'
 const POP = 'period_of_performance'
+const NUMBER = 'number'
 
 export default {
   name: 'clin-fields',
@@ -33,6 +34,10 @@ export default {
       type: String,
       default: null,
     },
+    initialClinNumber: {
+      type: String,
+      default: null,
+    },
   },
 
   data: function() {
@@ -44,6 +49,9 @@ export default {
       : undefined
     const popValidation = !this.initialStartDate ? false : start < end
     const showPopValidation = !this.initialStartDate ? false : !popValidation
+    const clinNumber = !!this.initialClinNumber
+      ? this.initialClinNumber
+      : undefined
 
     return {
       clinIndex: this.initialClinIndex,
@@ -53,6 +61,7 @@ export default {
       endDate: end,
       popValid: popValidation,
       showPopError: showPopValidation,
+      clinNumber: clinNumber,
     }
   },
 
@@ -113,8 +122,20 @@ export default {
         } else if (event.name.includes(END_DATE)) {
           if (!!event.value) this.endDate = new Date(event.value)
           this.validatePop()
+        } else if (event.name.includes(NUMBER)) {
+          if (!!event.value) this.clinNumber = event.value
         }
       }
     },
   },
+
+  computed: {
+    clinTitle: function() {
+      if (!!this.clinNumber) {
+        return `CLIN ${this.clinNumber}`
+      } else {
+        return `CLIN`
+      }
+    },
+  },
 }

js/test_templates/upload_input_error_template.html

@@ -11,7 +11,7 @@
   <div>
     <div v-show="hasAttachment" class="uploaded-file">
       
-      <span class="icon icon--check-circle-solid " aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
+      <span class="icon icon--ok " aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
   
       <a class="uploaded-file__name" v-html="baseName" v-bind:href="downloadLink"></a>
       <a href="#" class="uploaded-file__remove" v-on:click="removeAttachment">Remove</a>

js/test_templates/upload_input_template.html

@@ -12,7 +12,7 @@
   <div>
     <div v-show="hasAttachment" class="uploaded-file">
       
-      <span class="icon icon--check-circle-solid " aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
+      <span class="icon icon--ok " aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
   
       <a class="uploaded-file__name" v-html="baseName" v-bind:href="downloadLink"></a>
       <a href="#" class="uploaded-file__remove" v-on:click="removeAttachment">Remove</a>

static/icons/check-circle-solid.svg

@@ -1 +0,0 @@
-<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg>

static/icons/ok.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 12c-.266 0-.522-.106-.71-.296L3.915 8.297c-.389-.392-.386-1.025.006-1.414.392-.387 1.026-.386 1.414.007l2.574 2.597 6.302-8.101c.339-.435.967-.514 1.403-.176.436.339.515.968.175 1.403l-7 9c-.177.227-.442.367-.729.384L8 12zm0 4c-4.411 0-8-3.589-8-8s3.589-8 8-8c.964 0 1.906.17 2.803.505.517.193.779.77.586 1.287s-.765.783-1.287.586C9.431 2.127 8.724 2 8 2 4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6c0-.552.447-1 1-1s1 .448 1 1c0 4.411-3.589 8-8 8z"/></svg>
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg>

styles/sections/_task_order.scss

@@ -84,7 +84,7 @@
   }
 
   .card {
-    padding: ($gap * 5);
+    padding: ($gap * 4) ($gap * 5);
 
     .usa-input {
       margin: 0 $gap 0 0;
@@ -100,7 +100,7 @@
     }
 
     .form-row {
-      margin-top: 0;
+      margin: 0;
     }
 
     select {
@@ -246,4 +246,9 @@
 
 .clin-card {
   width: 65rem;
+
+  &__title.h4 {
+    margin-top: 0;
+    padding-bottom: $gap * 2.5;
+  }
 }

templates/components/upload_input.html

@@ -16,7 +16,7 @@
   >
   <div>
     <div v-show="hasAttachment" class="uploaded-file">
-      {{ Icon("check-circle-solid") }}
+      {{ Icon("ok") }}
       <a class="uploaded-file__name" v-html="baseName" v-bind:href="downloadLink"></a>
       <a href="#" class="uploaded-file__remove" v-on:click="removeAttachment">Remove</a>
     </div>

templates/fragments/task_order_review.html

@@ -14,7 +14,7 @@
         {{ 'task_orders.review.pdf_title' | translate }}
       </div>
       <a class="icon-link icon-link--download" href="{{ pdf_download_url }}">
-        {{ Icon('check-circle-solid') }}
+        {{ Icon('ok') }}
         {{ task_order.pdf.filename }}
       </a>
 

templates/task_orders/step_3.html

@@ -19,30 +19,28 @@
       v-bind:initial-amount='{{ fields.obligated_amount.data or 0 }}'
       v-bind:initial-start-date="'{{ fields.start_date.data | string }}'"
       v-bind:initial-end-date="'{{ fields.end_date.data | string }}'"
+      v-bind:initial-clin-number="'{{ fields.number.data | string }}'"
     {% else %}
       v-bind:initial-clin-index='clinIndex'
       v-bind:initial-clin-type="'JEDI_CLIN_1'"
     {% endif %}
     inline-template>
     <div class="clin-card">
-      <div class="card__title h4">
+      <div class="card__title h4" v-html='clinTitle'></div>
-        {{ 'task_orders.form.base_clin_title' | translate }}
-      </div>
       <div class="card">
         <div class="form-row">
-          <div class="form-col">
+          <div class="h4 clin-card__title">
-            <div class="h4">
             CLIN Details
           </div>
         </div>
-        </div>
         <div class="form-row">
           <div class="form-col">
             {% if fields %}
               {{ TextInput(fields.number, watch=True) }}
             {% else %}
-              <textinput :name="'clins-' + clinIndex + '-number'" :watch='true' inline-template>
+              <textinput :name="'clins-' + clinIndex + '-number'" :watch='true'
-                <div class="usa-input">
+              inline-template>
+                <div 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="name">
                     <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
                     <span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
@@ -82,7 +80,7 @@
               {{ OptionsInput(fields.jedi_clin_type, watch=True, show_validation=False) }}
             {% else %}
               <optionsinput :name="'clins-' + clinIndex + '-jedi_clin_type'" :watch='true' :optional='false' inline-template>
-                <div class="usa-input">
+                <div v-bind:class="['usa-input', { 'usa-input--error': showError, 'usa-input--success': showValid }]">
                   <fieldset data-ally-disabled="true" class="usa-input__choices" v-on:change="onInput">
                       <legend>
                         <div class="usa-input__title">
@@ -103,7 +101,7 @@
         </div>
         <hr>
         <div class="form-row">
-          <div class="h4">
+          <div class="h4 clin-card__title">
               CLIN Funding
           </div>
         </div>
@@ -159,7 +157,7 @@
         {% endif %}
         <hr>
         <div class="form-row">
-          <div class="h4">
+          <div class="h4 clin-card__title">
             Period of Performance
           </div>
         </div>

translations.yaml

@@ -165,10 +165,10 @@ forms:
       none: Not planning to migrate any applications
       not_sure: Not sure
       on_premise: 'Yes, migrating from an on-premise data center'
-    clin_01_label: '0001: Unclassified IaaS and PaaS'
+    clin_01_label: 'IaaS/PaaS (IDIQ CLIN 0001)'
-    clin_02_label: '0002'
+    clin_02_label: 'IDIQ CLIN 0002'
-    clin_03_label: '0003'
+    clin_03_label: 'IDIQ CLIN 0003'
-    clin_04_label: '0004'
+    clin_04_label: 'IDIQ CLIN 0004'
     complexity:
       conus: CONUS access
       data_analytics: Data analytics