Merge pull request #171 from dod-ccpo/ui/conditional-field-display

Ui/conditional field display

styles/atat.scss

@@ -3,6 +3,7 @@
 
 @import 'core/grid';
 @import 'core/util';
+@import 'core/transitions';
 
 @import 'elements/typography';
 @import 'elements/icons';
@@ -30,6 +31,7 @@
 @import 'components/footer';
 @import 'components/progress_menu.scss';
 @import 'components/search_bar';
+@import 'components/forms';
 
 @import 'sections/login';
 @import 'sections/request_approval';

styles/components/_forms.scss

@@ -0,0 +1,77 @@
+// Form Grid
+.form-row {
+  margin: ($gap * 4) 0;
+
+  .form-col {
+    flex-grow: 1;
+
+    &:first-child .usa-input {
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+
+    &:last-child .usa-input {
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+  }
+
+  @include media($medium-screen) {
+    @include grid-row;
+    align-items: flex-start;
+
+    .form-col {
+      .usa-input {
+        margin-left: ($gap * 4);
+        margin-right: ($gap * 4);
+      }
+
+      &:first-child {
+        .usa-input {
+          margin-left: 0;
+        }
+      }
+
+      &:last-child {
+        .usa-input {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+}
+
+
+.form__sub-fields {
+  @include alert;
+  @include alert-level('default');
+
+  .usa-input {
+    &:first-child {
+      margin-top: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  > h1, > h2, > h3, > h4, > h5, > h6, > legend {
+    @include h3;
+
+    margin: ($gap * 4) 0;
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    &.usa-sr-only {
+      + .usa-input {
+        margin-top: 0;
+      }
+    }
+  }
+}
+

styles/core/_transitions.scss

@@ -0,0 +1,36 @@
+// Slide up/down transition
+.slide-enter-active {
+  transform-origin: 0 0;
+  transition: transform 0.5s ease-out;
+
+  > * {
+    transition: opacity 0.5s ease-in;
+  }
+}
+
+.slide-leave-active {
+  transform-origin: 0 0;
+  transition: transform 0.5s ease-in;
+
+  > * {
+    transition: opacity 0.5s ease-out;
+  }
+}
+
+.slide-enter,
+.slide-leave-to {
+  transform: scaleY(0);
+
+  > * {
+    opacity: 0;
+  }
+}
+
+.slide-enter-to,
+.slide-leave {
+  transform: scaleY(1);
+
+  > * {
+    opacity: 1;
+  }
+}

styles/elements/_inputs.scss

@@ -70,6 +70,7 @@
     @include h4;
     @include line-max;
     position: relative;
+    clear: both;
 
     .icon-validation {
       position: absolute;
@@ -225,49 +226,3 @@ select {
   }
 
 }
-
-
-// Form Grid
-.form-row {
-  margin: ($gap * 4) 0;
-
-  .form-col {
-    flex-grow: 1;
-
-    &:first-child .usa-input {
-      &:first-child {
-        margin-top: 0;
-      }
-    }
-
-    &:last-child .usa-input {
-      &:first-child {
-        margin-top: 0;
-      }
-    }
-  }
-
-  @include media($medium-screen) {
-    @include grid-row;
-    align-items: flex-start;
-
-    .form-col {
-      .usa-input {
-        margin-left: ($gap * 4);
-        margin-right: ($gap * 4);
-      }
-
-      &:first-child {
-        .usa-input {
-          margin-left: 0;
-        }
-      }
-
-      &:last-child {
-        .usa-input {
-          margin-right: 0;
-        }
-      }
-    }
-  }
-}

templates/requests/screen-1.html

@@ -30,32 +30,52 @@
     <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.") }}
     {{ 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'>
       <template v-if="jediMigrationOptionSelected">
-      <template v-if='isJediMigration' v-cloak>
+        <fieldset class='form__sub-fields' v-if='isJediMigration' v-cloak>
+          <legend class='usa-sr-only'>Questions related to JEDI Cloud migration</legend>
           {{ OptionsInput(f.rationalization_software_systems, tooltip="Rationalization is the DoD process to determine whether the application should move to the cloud.") }}
           {{ OptionsInput(f.technical_support_team) }}
+          <transition name='slide'>
             <template v-if="hasTechnicalSupportTeam">
               {{ OptionsInput(f.organization_providing_assistance) }}
             </template>
+          </transition>
           {{ OptionsInput(f.engineering_assessment, tooltip="An engineering assessment is an evaluation to convert your application architecture from on-premises to using the commercial cloud") }}
           {{ OptionsInput(f.data_transfers) }}
           {{ OptionsInput(f.expected_completion_date) }}
-      </template>
+        </fieldset>
-      <template v-else-if='!isJediMigration' v-cloak>
+
+        <template v-if='!isJediMigration' v-cloak>
           {{ OptionsInput(f.cloud_native, tooltip="Cloud native is architecting and designing your application to use all the benefits of the commercial cloud. Specifically, designing applications so that they are decoupled from a physical resource.") }}
         </template>
       </template>
+    </transition>
 
     <h2>Financial Usage</h2>
     {{ TextInput(f.estimated_monthly_spend, tooltip="Refer to financial verification step help docs", validation="dollars") }}
-    <p>So this means you are spending approximately <span class="label">!{ annualSpendStr }</span> annually</p>
 
-    {{ TextInput(f.dollar_value, validation='dollars') }}
+    <div class='alert alert-info'>
+      <div class='alert__content'>
+        <div class='alert__message'>
+          <p>So this means you are spending approximately <span class="label label--info">!{ annualSpendStr }</span> annually</p>
+        </div>
+      </div>
+    </div>
+
+    <transition name='slide'>
       <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') }}
           {{ 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") }}
+        </fieldset>
       </template>
+    </transition>
+
+    {{ TextInput(f.dollar_value, validation='dollars') }}
     {{ TextInput(f.start_date, validation='date', placeholder='MM / DD / YYYY') }}
 
   </div>