Merge pull request #8395 from cfpb/feature/clickable-phone

Make Contact phone numbers clickable links
cfpb · May 8, 2024 · 01ae9e4 · 01ae9e4
2 parents fdf5a92 + c9ba2ee
commit 01ae9e4
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/cfgov/v1/jinja2/v1/includes/macros/util/format/contact.html b/cfgov/v1/jinja2/v1/includes/macros/util/format/contact.html
@@ -22,7 +22,7 @@
         {{ char }}
         {{- ') ' if loop.index == 3 else '' -}}
         {{- '-' if loop.index == 6 else '' -}}
-    {%- endfor %}
+    {%- endfor -%}
 {% endmacro %}
 
 

diff --git a/cfgov/v1/jinja2/v1/includes/molecules/contact-phone.html b/cfgov/v1/jinja2/v1/includes/molecules/contact-phone.html
@@ -35,17 +35,23 @@
     <span class="h5">{{ svg_icon(icon) }} {{ label }}</span>
     {% for phone in value.phones %}
     <p>
-        <b>
-            {{ format_phone(phone.number) }}
-            {{ 'Ext. ' ~ phone.extension if phone.extension else '' }}
-        </b>
+        <a href="tel:{{ phone.number }}">
+            {{- format_phone(phone.number) -}}
+        </a>
+        {{ 'Ext. ' ~ phone.extension if phone.extension }}
         {% if phone.vanity %}
         <br>
         <span>{{ phone.vanity }}</span>
         {% endif %}
         {% if phone.tty %}
         <br>
-        <span>TTY/TDD: {{ format_phone(phone.tty) }}{{ ' Ext. ' ~ phone.tty_ext if phone.tty_ext else '' }}</span>
+        <span>
+            TTY/TDD:
+            <a href="tel:{{ phone.tty }}">
+                {{- format_phone(phone.tty) -}}
+            </a>
+            {{ 'Ext. ' ~ phone.tty_ext if phone.tty_ext }}
+        </span>
         {% endif %}
     </p>
     {% endfor %}