Update UKMobileNumber & InternationalPhoneNumber

Changes those classes so they have the same
interface as a GOVUK field when instantiated and
render GovukTextInputField HTML.

Includes changes to templates that use this form
and associated tests.

app/main/forms.py

@@ -151,6 +151,17 @@ def email_address(label='Email address', gov_user=True, required=True):
 
 
 class UKMobileNumber(TelField):
+    def __init__(self, label='', validators=None, param_extensions=None, **kwargs):
+        super(UKMobileNumber, self).__init__(label, validators, **kwargs)
+        self.param_extensions = param_extensions
+
+    # self.__call__ renders the HTML for the field by:
+    # 1. delegating to self.meta.render_field which
+    # 2. calls field.widget
+    # this bypasses that by making self.widget a method with the same interface as widget.__call__
+    def widget(self, field, param_extensions=None, **kwargs):
+        return govuk_field_widget(self, field, type="tel", param_extensions=param_extensions, **kwargs)
+
     def pre_validate(self, form):
         try:
             validate_phone_number(self.data)
@@ -159,6 +170,17 @@ class UKMobileNumber(TelField):
 
 
 class InternationalPhoneNumber(TelField):
+    def __init__(self, label='', validators=None, param_extensions=None, **kwargs):
+        super(InternationalPhoneNumber, self).__init__(label, validators=validators, **kwargs)
+        self.param_extensions = param_extensions
+
+    # self.__call__ renders the HTML for the field by:
+    # 1. delegating to self.meta.render_field which
+    # 2. calls field.widget
+    # this bypasses that by making self.widget a method with the same interface as widget.__call__
+    def widget(self, field, param_extensions=None, **kwargs):
+        return govuk_field_widget(self, field, type="tel", param_extensions=param_extensions, **kwargs)
+
     def pre_validate(self, form):
         try:
             if self.data:

app/templates/views/manage-users/edit-user-mobile.html

@@ -19,7 +19,7 @@
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-three-quarters">
       {% call form_wrapper(class="extra-tracking") %}
-        {{ textbox(form.mobile_number) }}
+        {{ form.mobile_number }}
         {{ page_footer('Save') }}
       {% endcall %}
     </div>

app/templates/views/register-from-invite.html

@@ -28,7 +28,10 @@ Create an account
       {{ form.name(param_extensions={"classes": "govuk-!-width-three-quarters"}) }}
       {% if invited_user.auth_type == 'sms_auth' %}
         <div class="extra-tracking">
-          {{ textbox(form.mobile_number, width='3-4', hint='We’ll send you a security code by text message') }}
+          {{ form.mobile_number(param_extensions={
+              "classes": "govuk-!-width-three-quarters",
+              "hint": {"text": "We’ll send you a security code by text message"}
+          }) }}
         </div>
       {% endif %}
       {{ form.password(param_extensions={

app/templates/views/register-from-org-invite.html

@@ -16,7 +16,10 @@ Create an account
     {% call form_wrapper() %}
       {{ form.name(param_extensions={"classes": "govuk-!-width-three-quarters"}) }}
       <div class="extra-tracking">
-        {{ textbox(form.mobile_number, width='3-4', hint='We’ll send you a security code by text message') }}
+        {{ form.mobile_number(param_extensions={
+            "classes": "govuk-!-width-three-quarters",
+            "hint": {"text": "We’ll send you a security code by text message"}
+        }) }}
       </div>
       {{ form.password(param_extensions={
           "classes": "govuk-!-width-three-quarters",

app/templates/views/register.html

@@ -23,7 +23,10 @@ Create an account
         error_message_with_html=True
       ) }}
       <div class="extra-tracking">
-        {{ textbox(form.mobile_number, width='3-4', hint='We’ll send you a security code by text message') }}
+        {{ form.mobile_number(param_extensions={
+          "hint": {"text": "We’ll send you a security code by text message"},
+          "classes": "govuk-!-width-three-quarters"
+        }) }}
       </div>
       <input class="govuk-visually-hidden" aria-hidden="true" tabindex="-1" id="defeat-chrome-autocomplete">
       {{ form.password(param_extensions={"hint": {"text": "At least 8 characters"}, "classes": "govuk-!-width-three-quarters", "autocomplete": "new-password"}) }}

app/templates/views/send-test.html

@@ -2,7 +2,6 @@
 {% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/message-count-label.html" import recipient_count_label %}
-{% from "components/textbox.html" import textbox %}
 {% from "components/form.html" import form_wrapper %}
 
 {% block service_page_title %}
@@ -23,10 +22,7 @@
   ) %}
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-full {% if form.placeholder_value.label.text == 'phone number' %}extra-tracking{% endif %}">
-        {{ textbox(
-          form.placeholder_value,
-          width='1-1',
-        ) }}
+        {{ form.placeholder_value(param_extensions={"classes": "govuk-!-width-full"}) }}
       </div>
       {% if skip_link or link_to_upload %}
         <div class="govuk-grid-column-full">

app/templates/views/text-not-received.html

@@ -16,7 +16,7 @@ Check your mobile number
     <p class="govuk-body">Check your mobile phone number is correct and then resend the security code.</p>
 
       {% call form_wrapper() %}
-        {{ textbox(form.mobile_number) }}
+        {{ form.mobile_number }}
         {{ page_footer("Resend security code") }}
       {% endcall %}
   </div>