Merge pull request #145 from dod-ccpo/ui/request-form

UI/request form labels

atst/forms/request.py

@@ -62,7 +62,7 @@ class RequestForm(ValidatedForm):
     )
 
     engineering_assessment = RadioField(
-        description="Have you completed an engineering assessment of your software systems for cloud readiness?",
+        "Have you completed an engineering assessment of your software systems for cloud readiness?",
         choices=[("yes", "Yes"), ("no", "No"), ("in_progress", "In Progress")],
     )
 

styles/elements/_inputs.scss

@@ -65,20 +65,12 @@
   }
 
   label {
-    padding: 0 0 $gap 0;
+    padding: 0 0 $gap/2 0;
     margin: 0;
     @include h4;
     @include line-max;
     position: relative;
 
-    .usa-input__help {
-      display: block;
-      @include h5;
-      font-weight: normal;
-      padding-top: $gap / 2;
-      @include line-max;
-    }
-
     .icon {
       position: absolute;
       left: 100%;
@@ -88,6 +80,14 @@
     }
   }
 
+  .usa-input__help {
+    display: block;
+    @include h4;
+    font-weight: normal;
+    padding: $gap/2 0;
+    @include line-max;
+  }
+
   input,
   textarea,
   select {
@@ -100,9 +100,14 @@
       padding: 0 0 $gap 0;
       @include h4;
 
+      label {
+        font-weight: $font-bold;
+      }
+
       .icon {
         vertical-align: middle;
       }
+
     }
 
     ul {

styles/elements/_typography.scss

@@ -20,6 +20,7 @@ h1, h2, h3, h4, h5, h6 {
 
   + .subtitle * {
     margin-top: 0;
+    color: $color-gray;
   }
 
 }

templates/components/options_input.html

@@ -1,11 +1,11 @@
 {% from "components/icon.html" import Icon %}
 
 {% macro OptionsInput(field, inline=False) -%}
-  <div class='usa-input {% if errors %}usa-input--error{% endif %}'>
+  <div class='usa-input {% if field.errors %}usa-input--error{% endif %}'>
 
     <fieldset class="usa-input__choices {% if inline %}usa-input__choices--inline{% endif %}">
       <legend>
-        {{ field.label }}
+        {{ field.label | striptags}}
 
         {% if field.description %}
           <span class='usa-input__help'>{{ field.description | safe }}</span>
@@ -26,4 +26,7 @@
 
     </fieldset>
   </div>
+
+
+
 {%- endmacro %}

templates/components/text_input.html

@@ -1,5 +1,7 @@
+{% from "components/icon.html" import Icon %}
+
 {% macro TextInput(field, placeholder='') -%}
-  <div class='usa-input {% if errors %}usa-input--error{% endif %}'>
+  <div class='usa-input {% if field.errors %}usa-input--error{% endif %}'>
     <label for={{field.name}}>
       {{ field.label }}
 
@@ -7,9 +9,7 @@
         <span class='usa-input__help'>{{ field.description | safe }}</span>
       {% endif %}
 
-      {% if errors %}
-        {{ Icon('alert') }}
-      {% endif %}
+      {% if field.errors %}{{ Icon('alert') }}{% endif %}
     </label>
 
     {{ field(placeholder=placeholder) | safe }}
@@ -20,4 +20,4 @@
       {% endfor %}
     {% endif %}
   </div>
-{%- endmacro %}
+{%- endmacro %}