From 4d24f97ed76e72b8207e20fdcca002203da307d2 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Thu, 29 Aug 2019 13:33:17 -0400
Subject: [PATCH] Add optional label to text, options, phone, and
 multi-checkbox inputs Use new optional attribute on fields that are optional
 Update styling to fit optional label and update translations

---
 styles/elements/_inputs.scss                    | 3 +--
 templates/components/multi_checkbox_input.html  | 6 +++++-
 templates/components/options_input.html         | 4 ++++
 templates/components/text_input.html            | 4 ++++
 templates/fragments/edit_user_form.html         | 6 +++---
 templates/portfolios/admin.html                 | 2 +-
 templates/portfolios/applications/settings.html | 4 ++--
 templates/portfolios/new.html                   | 2 +-
 translations.yaml                               | 2 +-
 9 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/styles/elements/_inputs.scss b/styles/elements/_inputs.scss
index 2845fe43..4ae5e2d3 100644
--- a/styles/elements/_inputs.scss
+++ b/styles/elements/_inputs.scss
@@ -378,8 +378,7 @@ select {
     margin-left: $gap * 4;
 
     .usa-input {
-      input,
-      label {
+      input {
         max-width: 12rem;
       }
 
diff --git a/templates/components/multi_checkbox_input.html b/templates/components/multi_checkbox_input.html
index 41fb23c3..fecfd5b8 100644
--- a/templates/components/multi_checkbox_input.html
+++ b/templates/components/multi_checkbox_input.html
@@ -1,7 +1,7 @@
 {% from "components/icon.html" import Icon %}
 {% from "components/tooltip.html" import Tooltip %}
 
-{% macro MultiCheckboxInput(field, other_input_field=None, tooltip=None, inline=False) -%}
+{% macro MultiCheckboxInput(field, other_input_field=None, tooltip=None, inline=False, optional=True) -%}
   <multicheckboxinput
     v-cloak
     name='{{ field.name }}'
@@ -24,6 +24,10 @@
         <legend>
           <div class="usa-input__title">
             {{ field.label | striptags}}
+            {% if optional %}
+              &nbsp;
+              <span class="usa-input-label-helper">(optional)</span>
+            {% endif %}
             {% if tooltip %}{{ Tooltip(tooltip) }}{% endif %}
             {% if not field.description %}
               {{ validation_icons }}
diff --git a/templates/components/options_input.html b/templates/components/options_input.html
index f5b98697..ca6a2610 100644
--- a/templates/components/options_input.html
+++ b/templates/components/options_input.html
@@ -28,6 +28,10 @@
           <legend>
             <div class="usa-input__title{% if not field.description %}-inline{% endif %}">
               {{ field.label | striptags}}
+              {% if optional %}
+                &nbsp;
+                <span class="usa-input-label-helper">(optional)</span>
+              {% endif %}
               {% if tooltip %}{{ Tooltip(tooltip) }}{% endif %}
             </div>
 
diff --git a/templates/components/text_input.html b/templates/components/text_input.html
index 9487abc2..042ba508 100644
--- a/templates/components/text_input.html
+++ b/templates/components/text_input.html
@@ -40,6 +40,10 @@
         <label for={{field.name}}>
           <div class="usa-input__title">
             {{ label }}
+            {% if optional %}
+              &nbsp;
+              <span class="usa-input-label-helper">(optional)</span>
+            {% endif %}
             {% if tooltip and not disabled %}
               {{ Tooltip(tooltip, tooltip_title) }}
             {% endif %}
diff --git a/templates/fragments/edit_user_form.html b/templates/fragments/edit_user_form.html
index 473b8d3f..26d024f6 100644
--- a/templates/fragments/edit_user_form.html
+++ b/templates/fragments/edit_user_form.html
@@ -22,9 +22,9 @@
         {{ TextInput(form.email, validation='email', optional=False) }}
         {{ PhoneInput(form.phone_number, form.phone_ext, phone_optional=False) }}
 
-        {{ OptionsInput(form.service_branch) }}
-        {{ OptionsInput(form.citizenship) }}
-        {{ OptionsInput(form.designation) }}
+        {{ OptionsInput(form.service_branch, optional=False) }}
+        {{ OptionsInput(form.citizenship, optional=False) }}
+        {{ OptionsInput(form.designation, optional=False) }}
 
 
         <div class="usa-input">
diff --git a/templates/portfolios/admin.html b/templates/portfolios/admin.html
index a4268f44..fe2727af 100644
--- a/templates/portfolios/admin.html
+++ b/templates/portfolios/admin.html
@@ -17,7 +17,7 @@
               {{ portfolio_form.csrf_token }}
               <div class='form-row'>
                 <div class='form-col form-col--half'>
-                  {{ TextInput(portfolio_form.name, validation="portfolioName") }}
+                  {{ TextInput(portfolio_form.name, validation="portfolioName", optional=False) }}
                 </div>
                 <div class='edit-portfolio-name action-group'>
                   {{ SaveButton(text='Save', additional_classes='usa-button-big') }}
diff --git a/templates/portfolios/applications/settings.html b/templates/portfolios/applications/settings.html
index 0296ce65..f715ea8e 100644
--- a/templates/portfolios/applications/settings.html
+++ b/templates/portfolios/applications/settings.html
@@ -25,8 +25,8 @@
             </p>
             <div class="form-row">
               <div class="form-col form-col--two-thirds">
-                {{ TextInput(application_form.name) }}
-                {{ TextInput(application_form.description, paragraph=True) }}
+                {{ TextInput(application_form.name, optional=False) }}
+                {{ TextInput(application_form.description, paragraph=True, optional=False) }}
               </div>
               <div class="form-col form-col--third">
                 {% if user_can(permissions.DELETE_APPLICATION) %}
diff --git a/templates/portfolios/new.html b/templates/portfolios/new.html
index 1469e999..946eb755 100644
--- a/templates/portfolios/new.html
+++ b/templates/portfolios/new.html
@@ -14,7 +14,7 @@
     <form id="portfolio-create" action="{{ url_for('portfolios.create_portfolio') }}" method="POST">
       {{ form.csrf_token }}
 
-      {{ TextInput(form.name) }}
+      {{ TextInput(form.name, optional=False) }}
       {{ OptionsInput(form.defense_component, optional=False) }}
       {{ TextInput(form.description, paragraph=True) }}
 
diff --git a/translations.yaml b/translations.yaml
index a6b8debe..d1e85413 100644
--- a/translations.yaml
+++ b/translations.yaml
@@ -143,7 +143,7 @@ forms:
     first_name_label: First name
     funding: Funding
     last_name_label: Last name
-    phone_number_label: Phone number (optional)
+    phone_number_label: Phone number
     portfolio_mgmt: Portfolio management
     reporting: Reporting
   portfolio: