Update validation icon placement and placeholders

js/components/text_input.js

@@ -18,7 +18,8 @@ export default {
       type: String,
       default: () => ''
     },
-    initialErrors: Array
+    initialErrors: Array,
+    paragraph: String
   },
 
   data: function () {

js/lib/input_validations.js

@@ -7,31 +7,31 @@ export default {
     mask: false,
     match: /^(?!\s*$).+/,
     unmask: [],
-    validationError: 'Please enter a response.'
+    validationError: 'Please enter a response'
   },
   integer: {
     mask: createNumberMask({ prefix: '', allowDecimal: false }),
     match: /^[1-9]\d*$/,
     unmask: [','],
-    validationError: 'Please enter a number.'
+    validationError: 'Please enter a number'
   },
   dollars: {
     mask: createNumberMask({ prefix: '$', allowDecimal: true }),
     match: /^-?\d+\.?\d*$/,
     unmask: ['$',','],
-    validationError: 'Please enter a dollar amount.'
+    validationError: 'Please enter a dollar amount'
   },
   gigabytes: {
     mask: createNumberMask({ prefix: '', suffix:' GB', allowDecimal: false }),
     match: /^[1-9]\d*$/,
     unmask: [',',' GB'],
-    validationError: 'Please enter an amount of data in gigabytes.'
+    validationError: 'Please enter an amount of data in gigabytes'
   },
   email: {
     mask: emailMask,
     match: /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/,
     unmask: [],
-    validationError: 'Please enter a valid e-mail address.'
+    validationError: 'Please enter a valid e-mail address'
   },
   date: {
     mask: [/\d/,/\d/,'/',/\d/,/\d/,'/',/\d/,/\d/,/\d/,/\d/],
@@ -39,18 +39,18 @@ export default {
     unmask: [],
     pipe: createAutoCorrectedDatePipe('mm/dd/yyyy HH:MM'),
     keepCharPositions: true,
-    validationError: 'Please enter a valid date in the form MM/DD/YYYY.'
+    validationError: 'Please enter a valid date in the form MM/DD/YYYY'
   },
   usPhone: {
     mask: ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
     match: /^\d{10}$/,
     unmask: ['(',')','-',' '],
-    validationError: 'Please enter a 10-digit phone number.'
+    validationError: 'Please enter a 10-digit phone number'
   },
   dodId: {
     mask: createNumberMask({ prefix: '', allowDecimal: false, includeThousandsSeparator: false }),
     match: /^\d{10}$/,
     unmask: [],
-    validationError: 'Please enter a 10-digit D.O.D. ID number.'
+    validationError: 'Please enter a 10-digit DoD ID number'
   }
 }

styles/elements/_inputs.scss

@@ -74,11 +74,12 @@
 
     .icon-validation {
       position: absolute;
-      left: 100%;
+      // left: 0%;
       top: 100%;
       margin-top: 1.4rem;
       margin-left: $gap;
     }
+
   }
 
   .usa-input__title {
@@ -109,6 +110,7 @@
     @include line-max;
     margin: 0;
     box-sizing: border-box;
+    max-width: 32em;
 
     &:hover,
     &:focus {
@@ -173,7 +175,55 @@
   .usa-input__message {
     @include h5;
     display: inline-block;
-    padding-top: $gap;
+  }
+
+  &--validation {
+
+    &--anything,
+    &--email {
+      input {
+        max-width: 26em;
+      }
+      .icon-validation {
+        left: 26em;
+      }
+    }
+
+    &--paragraph {
+      .icon-validation {
+        left: 32em;
+      }
+    }
+
+    &--integer,
+    &--dollars,
+    &--gigabytes, {
+      input {
+        max-width: 16em;
+      }
+      .icon-validation {
+        left: 16em;
+      }
+    }
+
+    &--date,
+    &--usPhone {
+      input {
+        max-width: 10em;
+      }
+      .icon-validation {
+        left: 10em;
+      }
+    }
+
+    &--dodId {
+      input {
+        max-width: 18em;
+      }
+      .icon-validation {
+        left: 18em;
+      }
+    }
   }
 
   &.usa-input--error {

templates/components/text_input.html

@@ -5,13 +5,14 @@
   <textinput
     name='{{ field.name }}'
     validation='{{ validation }}'
+    {% if paragraph %}paragraph='true'{% endif %}
     {% if field.data %}initial-value='{{ field.data }}'{% endif %}
     {% if field.errors %}v-bind:initial-errors='{{ field.errors }}'{% endif %}
     key='{{ field.name }}'
     inline-template>
 
     <div
-      v-bind:class="['usa-input usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid }]">
+      v-bind:class="['usa-input usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid, 'usa-input--validation--paragraph': paragraph }]">
 
       <label for={{field.name}}>
         <div class="usa-input__title">{{ field.label | striptags }} {% if tooltip %}{{ Tooltip(tooltip) }}{% endif %}</div>

templates/requests/screen-1.html

@@ -28,7 +28,7 @@
     {{ TextInput(f.jedi_usage, paragraph=True, placeholder="Briefly describe how you are expecting to use the JEDI Cloud. \n e.g. We are migrating XYZ application to the cloud so that...") }}
 
     <h2>Cloud Readiness</h2>
-    {{ TextInput(f.num_software_systems,validation="integer",tooltip="A software system can be any code that you plan to host on cloud infrastructure. For example, it could be a custom-developed web application, or a large ERP system.",placeholder="42") }}
+    {{ TextInput(f.num_software_systems,validation="integer",tooltip="A software system can be any code that you plan to host on cloud infrastructure. For example, it could be a custom-developed web application, or a large ERP system.",placeholder="0") }}
     {{ OptionsInput(f.jedi_migration, tooltip="Cloud migration is the process of moving data, applications or other business elements from an organization\\'s onsite computers/data centers to the cloud, or moving them from one cloud environment to another.") }}
 
     <transition name='slide'>
@@ -54,7 +54,7 @@
     </transition>
 
     <h2>Financial Usage</h2>
-    {{ TextInput(f.estimated_monthly_spend, tooltip="Refer to financial verification step help docs", validation="dollars", placeholder="$42,000") }}
+    {{ TextInput(f.estimated_monthly_spend, tooltip="Refer to financial verification step help docs", validation="dollars", placeholder="$0") }}
 
     <div class='alert alert-info'>
       <div class='alert__content'>
@@ -68,14 +68,14 @@
       <template v-if="annualSpend > 1000000">
         <fieldset class='form__sub-fields'>
           <h3>Because the approximate annual spend is over $1,000,000, please answer a few additional questions.</h3>
-          {{ TextInput(f.number_user_sessions, validation='integer', placeholder="42") }}
+          {{ TextInput(f.number_user_sessions, validation='integer', placeholder="0") }}
-          {{ TextInput(f.average_daily_traffic, tooltip="Requests are the client-to-server network traffic that is being transferred to your systems",validation="integer", placeholder="42") }}
+          {{ TextInput(f.average_daily_traffic, tooltip="Requests are the client-to-server network traffic that is being transferred to your systems",validation="integer", placeholder="0") }}
-          {{ TextInput(f.average_daily_traffic_gb, tooltip="GB uploaded is the gigabyte amount of data traffic that is being transferred to your systems",validation="gigabytes", placeholder="42GB") }}
+          {{ TextInput(f.average_daily_traffic_gb, tooltip="GB uploaded is the gigabyte amount of data traffic that is being transferred to your systems",validation="gigabytes", placeholder="0GB") }}
         </fieldset>
       </template>
     </transition>
 
-    {{ TextInput(f.dollar_value, validation='dollars', placeholder="$42,000") }}
+    {{ TextInput(f.dollar_value, validation='dollars', placeholder="$0") }}
     {{ TextInput(f.start_date, validation='date', placeholder='MM / DD / YYYY') }}
 
   </div>