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

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

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>
 

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 %}