Update validation icon placement and placeholders

This commit is contained in:
luis cielak
2018-08-14 15:03:59 -04:00
committed by luisgov
parent 483d606cf0
commit cda585c3a3
5 changed files with 70 additions and 18 deletions

View File

@@ -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>

View File

@@ -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.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_gb, tooltip="GB uploaded is the gigabyte amount of data traffic that is being transferred to your systems",validation="gigabytes", placeholder="42GB") }}
{{ 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="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="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>