diff --git a/atst/forms/org.py b/atst/forms/org.py index 9ec4036c..f45c8a15 100644 --- a/atst/forms/org.py +++ b/atst/forms/org.py @@ -18,9 +18,14 @@ class OrgForm(ValidatedForm): description='Enter a 10-digit phone number', validators=[Required(), PhoneNumber()]) - service_branch = StringField("Service Branch or Agency", validators=[Required()]) + service_branch = StringField( + "Service Branch or Agency", + description="Which services and organizations do you belong to within the DoD?", + validators=[Required()] + ) citizenship = RadioField( + description="What is your citizenship status?", choices=[ ("United States", "United States"), ("Foreign National", "Foreign National"), @@ -31,6 +36,7 @@ class OrgForm(ValidatedForm): designation = RadioField( "Designation of Person", + description="What is your designation within the DoD?", choices=[ ("military", "Military"), ("civilian", "Civilian"), @@ -41,6 +47,7 @@ class OrgForm(ValidatedForm): date_latest_training = DateField( "Latest Information Assurance (IA) Training completion date", + description="To complete the training, you can find it in Information Assurance Cyber Awareness Challange website.", validators=[ Required(), DateRange( diff --git a/atst/forms/request.py b/atst/forms/request.py index e46aa38b..ce48a161 100644 --- a/atst/forms/request.py +++ b/atst/forms/request.py @@ -49,12 +49,10 @@ class RequestForm(ValidatedForm): jedi_usage = TextAreaField( "JEDI Usage", - description="Briefly describe how you are expecting to use the JEDI Cloud", - render_kw={ - "placeholder": "e.g. We are migrating XYZ application to the cloud so that..." - }, + description="Please tell us more about what the systems/applications you are working with and why the cloud is a good place to host these applications", ) + # Details of Use: Cloud Readiness num_software_systems = IntegerField( "Number of Software System", @@ -62,35 +60,37 @@ class RequestForm(ValidatedForm): ) jedi_migration = RadioField( - "Are you using the JEDI Cloud to migrate existing systems?", + "JEDI Migration", + description="Are you using the JEDI Cloud to migrate existing systems?", choices=[("yes", "Yes"), ("no", "No")], default="", ) rationalization_software_systems = RadioField( - "Have you completed a “rationalization” of your software systems to move to the cloud?", + description="Have you completed a “rationalization” of your software systems to move to the cloud?", choices=[("yes", "Yes"), ("no", "No"), ("in_progress", "In Progress")], default="", ) technical_support_team = RadioField( - "Are you working with a technical support team experienced in cloud migrations?", + description="Are you working with a technical support team experienced in cloud migrations?", choices=[("yes", "Yes"), ("no", "No")], default="", ) organization_providing_assistance = RadioField( # this needs to be updated to use checkboxes instead of radio - "If you are receiving migration assistance, indicate the type of organization providing assistance below:", + description="If you are receiving migration assistance, what is the type of organization providing assistance?", choices=[ ("in_house_staff", "In-house staff"), ("contractor", "Contractor"), ("other_dod_organization", "Other DoD organization"), + ("none", "None"), ], default="", ) engineering_assessment = RadioField( - "Have you completed an engineering assessment of your software systems for cloud readiness?", + description="Have you completed an engineering assessment of your systems for cloud readiness?", choices=[("yes", "Yes"), ("no", "No"), ("in_progress", "In Progress")], default="", ) @@ -124,7 +124,7 @@ class RequestForm(ValidatedForm): ) cloud_native = RadioField( - "Are your software systems being developed cloud native?", + description="Are your software systems being developed cloud native?", choices=[("yes", "Yes"), ("no", "No")], default="", ) @@ -132,7 +132,7 @@ class RequestForm(ValidatedForm): # Details of Use: Financial Usage estimated_monthly_spend = IntegerField( "Estimated monthly spend", - description='Use the JEDI CSP Calculator to estimate your monthly cloud resource usage and enter the dollar amount below. Note these estimates are for initial approval only. After the request is approved, you will be asked to provide a valid Task Order number with specific CLIN amounts for cloud services.', + description='Use the JEDI CSP Calculator to estimate your monthly cloud resource usage and enter the dollar amount below. Note these estimates are for initial approval only. After the request is approved, you will be asked to provide a valid Task Order number with specific CLIN amounts for cloud services.', ) dollar_value = IntegerField( @@ -145,6 +145,12 @@ class RequestForm(ValidatedForm): ) average_daily_traffic = IntegerField( + "Average Daily Traffic (Number of Requests)", + description="What is the average daily traffic you expect the systems under this cloud contract to use?" + ) + + average_daily_traffic_gb = IntegerField( + "Average Daily Traffic (GB)", description="What is the average daily traffic you expect the systems under this cloud contract to use?" ) diff --git a/js/index.js b/js/index.js index 02d24503..5cf47a60 100644 --- a/js/index.js +++ b/js/index.js @@ -1,10 +1,14 @@ import classes from '../styles/atat.scss' import Vue from 'vue/dist/vue' +import VTooltip from 'v-tooltip' import optionsinput from './components/options_input' import textinput from './components/text_input' import DetailsOfUse from './components/forms/details_of_use' +Vue.use(VTooltip) + + const app = new Vue({ el: '#app-root', components: { diff --git a/package.json b/package.json index b52327bf..5918bf60 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "parcel": "^1.9.7", "text-mask-addons": "^3.8.0", "uswds": "^1.6.3", + "v-tooltip": "^2.0.0-rc.33", "vue": "^2.5.17", "vue-text-mask": "^6.1.2" }, diff --git a/styles/atat.scss b/styles/atat.scss index e752ca8d..2a65b8d9 100644 --- a/styles/atat.scss +++ b/styles/atat.scss @@ -16,6 +16,7 @@ @import 'elements/action_group'; @import 'elements/labels'; @import 'elements/diff'; +@import 'elements/tooltip'; @import 'elements/kpi'; @import 'components/topbar'; diff --git a/styles/elements/_inputs.scss b/styles/elements/_inputs.scss index eff35e34..97a6642f 100644 --- a/styles/elements/_inputs.scss +++ b/styles/elements/_inputs.scss @@ -27,7 +27,7 @@ $state-color: $color-green; } - .icon { + .icon-validation { @include icon-color($state-color); } @@ -71,7 +71,7 @@ @include line-max; position: relative; - .icon { + .icon-validation { position: absolute; left: 100%; top: 100%; @@ -79,13 +79,27 @@ margin-left: $gap; } } + + .usa-input__title { + display: flex; + align-items: center; + .icon-tooltip { + padding: 0 $gap/2; + cursor: default; + margin-left: $gap/2; + } + } + .usa-input__help { - display: block; @include h4; font-weight: normal; padding: $gap/2 0; @include line-max; + + .icon-link { + padding: 0 $gap/2; + } } input, @@ -93,6 +107,17 @@ select { @include line-max; margin: 0; + box-sizing: border-box; + + &:hover, + &:focus { + border-color: $color-blue; + color: $color-blue; + box-shadow: inset 0 0 0 1px $color-blue; + &::placeholder { + color: $color-blue; + } + } } .usa-input__choices { // checkbox & radio sets @@ -104,10 +129,6 @@ font-weight: $font-bold; } - .icon { - vertical-align: middle; - } - } ul { @@ -121,6 +142,12 @@ [type='radio'] + label, [type='checkbox'] + label { margin: 0; + &:hover { + color: $color-blue; + &:before { + box-shadow: 0 0 0 1px $color-white, 0 0 0 3px $color-blue; + } + } } } } diff --git a/styles/elements/_tooltip.scss b/styles/elements/_tooltip.scss new file mode 100644 index 00000000..57995336 --- /dev/null +++ b/styles/elements/_tooltip.scss @@ -0,0 +1,119 @@ +.tooltip { + display: block; + z-index: 10000; + max-width: $text-max-width; + + .tooltip-inner { + background: $color-black; + color: $color-white; + border-radius: $border-radius; + padding: $gap*2; + } + + .tooltip-arrow { + width: 0; + height: 0; + border-style: solid; + position: absolute; + margin: 5px; + border-color: black; + z-index: 1; + } + + &[x-placement^="top"] { + margin-bottom: 5px; + + .tooltip-arrow { + border-width: 5px 5px 0 5px; + border-left-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + bottom: -5px; + left: calc(50% - 5px); + margin-top: 0; + margin-bottom: 0; + } + } + + &[x-placement^="bottom"] { + margin-top: 5px; + + .tooltip-arrow { + border-width: 0 5px 5px 5px; + border-left-color: transparent; + border-right-color: transparent; + border-top-color: transparent; + top: -5px; + left: calc(50% - 5px); + margin-top: 0; + margin-bottom: 0; + } + } + + &[x-placement^="right"] { + margin-left: 5px; + + .tooltip-arrow { + border-width: 5px 5px 5px 0; + border-left-color: transparent; + border-top-color: transparent; + border-bottom-color: transparent; + left: -5px; + top: calc(50% - 5px); + margin-left: 0; + margin-right: 0; + } + } + + &[x-placement^="left"] { + margin-right: 5px; + + .tooltip-arrow { + border-width: 5px 0 5px 5px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + right: -5px; + top: calc(50% - 5px); + margin-left: 0; + margin-right: 0; + } + } + + &.popover { + $color: #f9f9f9; + + .popover-inner { + background: $color; + color: black; + padding: 24px; + border-radius: 5px; + box-shadow: 0 5px 30px rgba(black, .1); + } + + .popover-arrow { + border-color: $color; + } + } + + &[aria-hidden='true'] { + visibility: hidden; + opacity: 0; + transition: opacity .15s, visibility .15s; + } + + &[aria-hidden='false'] { + visibility: visible; + opacity: 1; + transition: opacity .15s; + } +} + + +.icon-tooltip { + @include icon-link; + + .icon { + @include icon-size(16); + } +} \ No newline at end of file diff --git a/templates/base.html b/templates/base.html index a29a6c04..3f5125ce 100644 --- a/templates/base.html +++ b/templates/base.html @@ -3,11 +3,12 @@ {% set context=g.navigationContext %} - +
-So this means you are spending approximately !{ annualSpendStr } annually
+ {{ TextInput(f.estimated_monthly_spend, tooltip="Refer to financial verification step help docs", validation="dollars") }} +So this means you are spending approximately !{ annualSpendStr } annually
+ {{ TextInput(f.dollar_value, validation='dollars') }} - {{ TextInput(f.number_user_sessions, validation='integer') }} - {{ TextInput(f.average_daily_traffic, placeholder='Gigabytes per day', validation='gigabytes') }} + {{ TextInput(f.number_user_sessions, validation='integer') }} + {{ TextInput(f.average_daily_traffic, tooltip="Requests are the client-to-server network traffic that is being transferred to your systems",validation="integer") }} + {{ 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") }} {{ TextInput(f.start_date, validation='date', placeholder='MM / DD / YYYY') }} diff --git a/templates/requests/screen-2.html b/templates/requests/screen-2.html index 50dc9007..6d911d32 100644 --- a/templates/requests/screen-2.html +++ b/templates/requests/screen-2.html @@ -24,11 +24,10 @@ {{ TextInput(f.email_request, placeholder='jane@mail.mil', validation='email') }} {{ TextInput(f.phone_number, placeholder='e.g. (123) 456-7890', validation='usPhone') }} -We want to collect the following information from you for security auditing and determining priviledged user access
+We want to collect the following information from you for security auditing and determining priviledged user access.
{{ TextInput(f.service_branch,placeholder='e.g. US Air Force, US Army, US Navy, Marine Corps, Defense Media Agency') }} {{ OptionsInput(f.citizenship) }} {{ OptionsInput(f.designation) }} -{{ TextInput(f.date_latest_training, placeholder='MM / DD / YYYY', validation='date') }} - +{{ TextInput(f.date_latest_training,tooltip="When was the last time you completed the IA training?