Merge pull request #2524 from GSA/2510-add-phone-number-instruction

2510 - Adding additional context to phone numbers

app/assets/sass/uswds/_uswds-theme-custom-styles.scss

@@ -289,6 +289,7 @@ td.table-empty-message {
     margin-top: units(1);
     width: 100%;
     border: 1px solid color('gray-60');
+    height: 40px;
   }
 }
 

app/main/views/send.py

@@ -481,6 +481,7 @@ def send_one_off_step(service_id, template_id, step_index):
         ),
         template=template,
         form=form,
+        current_placeholder=current_placeholder,
         skip_link=get_skip_link(step_index, template),
         back_link=back_link,
         link_to_upload=(

app/templates/components/textbox.html

@@ -5,7 +5,6 @@
   highlight_placeholders=False,
   autofocus=False,
   autosize=False,
-  colour_preview=False,
   help_link=None,
   help_link_text=None,
   width='2-3',
@@ -13,58 +12,82 @@
   safe_error_message=False,
   rows=8,
   extra_form_group_classes='',
-  placeholder=''
+  placeholder='',
+  input_id=None
 ) %}
+  {% set field_id = kwargs.id if kwargs.id is defined else field.id %}
+  {% set described_by = '' %}
+  {% if hint %}{% set described_by = described_by + field_id ~ '-hint' %}{% endif %}
+  {% if field.errors %}
+    {% if described_by %}{% set described_by = described_by + ' ' %}{% endif %}
+    {% set described_by = described_by + field_id ~ '-error' %}
+  {% endif %}
+
   <div
     class="usa-form-group{% if field.errors %} usa-form-group--error{% endif %} {{ extra_form_group_classes }}"
     data-module="{% if autofocus %}autofocus{% elif colour_preview %}colour-preview{% endif %}"
   >
-    <label class="usa-label" for="{{ field.name }}">
+    <label class="usa-label" for="{{ field_id }}">
-      {% if label %}
+      {{ label or field.label.text }}
-        {{ label }}
-      {% else %}
-        {{ field.label.text }}
-      {% endif %}
     </label>
+
     {% if hint %}
-      <div class="usa-hint">
+      <div class="usa-hint" id="{{ field_id }}-hint">
         {{ hint }}
       </div>
     {% endif %}
+
     {% if field.errors %}
-      <span id="{{ field.name}}-error" class="error-message usa-error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}" tabindex="-1" aria-live="assertive" role="alert">
+      <span id="{{ field_id }}-error" class="error-message usa-error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}" tabindex="-1" aria-live="assertive" role="alert">
         <span class="usa-sr-only">Error:</span>
-        {% if not safe_error_message %}{{ field.errors[0] }}{% else %}{{ field.errors[0]|safe }}{% endif %}
+        {% if not safe_error_message %}
+          {{ field.errors[0] }}
+        {% else %}
+          {{ field.errors[0] | safe }}
+        {% endif %}
       </span>
     {% endif %}
-    {%
+
-      if highlight_placeholders or autosize
+    {% if highlight_placeholders or autosize %}
-    %}
       {% set field_class = 'usa-textarea form-control-{} textbox-highlight-textbox'.format(width) %}
     {% else %}
-      {% set field_class = 'form-control-{} {}'.format(width, 'textbox-right-aligned' if suffix else '') %}
+      {% set field_class = 'usa-input' %}
     {% endif %}
-    {%
+    {% set field_class = 'form-control ' ~ field_class ~ (' form-control-error' if field.errors else '') %}
-      set field_class = 'form-control ' + field_class + (
+
-        ' form-control-error' if field.errors else ''
+    {% if autosize or highlight_placeholders %}
-      )
+      <textarea
-    %}
+        id="{{ field_id }}"
-    {{ field(
+        name="{{ field.name }}"
-      class=field_class,
+        class="{{ field_class }}"
-      data_module='enhanced-textbox' if highlight_placeholders or autosize else '',
+        rows="{{ rows }}"
-      data_highlight_placeholders='true' if highlight_placeholders else 'false',
+        placeholder="{{ placeholder }}"
-      rows=rows|string,
+        aria-describedby="{{ described_by.strip() }}"
-      placeholder=placeholder,
+        {% if field.flags.required %}required{% endif %}
-      aria_describedby=field.name+"-error",
+        data-module="enhanced-textbox"
-      required='required' if required else None,
+        data-highlight-placeholders="true"
-      **kwargs
+      >{{ field._value() }}</textarea>
-    ) }}
+    {% else %}
+    {% set input_type = 'tel' if 'phone' in field.label.text else 'text' %}
+      <input
+        id="{{ field_id }}"
+        name="{{ field.name }}"
+        type="{{ input_type }}"
+        class="{{ field_class }}"
+        value="{{ field._value() }}"
+        placeholder="{{ placeholder }}"
+        aria-describedby="{{ described_by.strip() }}"
+        {% if field.flags.required %}required{% endif %}
+      />
+    {% endif %}
+
     {% if suffix %}
       <span>{{ suffix }}</span>
     {% endif %}
+
     {% if help_link and help_link_text %}
       <p class="textbox-help-link">
-        <a class="usa-link" href='{{ help_link }}'>{{ help_link_text }}</a>
+        <a class="usa-link" href="{{ help_link }}">{{ help_link_text }}</a>
       </p>
     {% endif %}
   </div>

app/templates/views/send-test.html

@@ -1,6 +1,7 @@
 {% extends "withnav_template.html" %}
 {% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
+{% from "components/textbox.html" import textbox %}
 {% from "components/form.html" import form_wrapper %}
 {% from "components/components/back-link/macro.njk" import usaBackLink %}
 
@@ -38,10 +39,19 @@
     data_force_focus=True
   ) %}
     <div class="grid-row">
-      {% set extra_class = "extra-tracking" if form.placeholder_value.label.text == "phone number" else "" %}
+      {% set is_phone_number = form.placeholder_value.label.text == "phone number" %}
-      {% set placeholder_id = "phone number" if form.placeholder_value.label.text == "phone number" else "" %}
+      {% set label_text = "Country code and phone number" if current_placeholder == "phone number" else current_placeholder %}
-      <div class="grid-col-12 {% if form.placeholder_value.label.text == 'phone number' %}extra-tracking{% endif %}">
+      {% set hint_text = "For example: +18885551234" if is_phone_number else None %}
-        {{ form.placeholder_value(param_extensions={"classes": "", "id": "phone-number"}) }}
+      {% set extra_class = "extra-tracking" if is_phone_number else "" %}
+
+      <div class="grid-col-12 {{ extra_class }}">
+        {{ textbox(
+          form.placeholder_value,
+          label=label_text,
+          hint=hint_text,
+          extra_form_group_classes=extra_class,
+          param_extensions={"id": "phone-number", "classes": ""}
+        ) }}
       </div>
       {% if skip_link or link_to_upload %}
         <div class="grid-col-12 margin-top-1">

tests/app/main/views/test_send.py

@@ -1264,7 +1264,7 @@ def test_send_one_off_has_correct_page_title(
         (
             0,
             {},
-            "phone number",
+            "Country code and phone number",
         ),
         (
             1,

tests/app/main/views/test_templates.py

@@ -945,7 +945,7 @@ def test_load_edit_template_with_copy_of_template(
     assert page.select_one("form")["method"] == "post"
 
     assert page.select_one("input")["value"] == (expected_name)
-    assert page.select_one("textarea").text == ("\r\nYour ((thing)) is due soon")
+    assert page.select_one("textarea").text.strip() == ("Your ((thing)) is due soon")
     mock_get_service_email_template.assert_called_once_with(
         SERVICE_TWO_ID,
         TEMPLATE_ONE_ID,

tests/app/main/views/test_tour.py

@@ -164,12 +164,12 @@ def test_should_show_empty_text_box(
     )
 
     textbox = page.select_one(
-        "[data-module=autofocus][data-force-focus=True] .usa-input"
+        ".usa-input"
     )
     assert "value" not in textbox
     assert textbox["name"] == "placeholder_value"
     assert textbox["class"] == [
-        "usa-input",
+        "form-control", "usa-input",
     ]
     # data-module=autofocus is set on a containing element so it
     # shouldn’t also be set on the textbox itself