From 9c856af7899a6bcb41c86c96360dd439e4c3496f Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Tue, 2 Feb 2016 15:31:11 +0000
Subject: [PATCH] Allow textboxes to have width set, default to 2/3
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

For entering 2 or 3fa codes, we want a textbox that’s just over 6 characters
wide.

To do this, a width can now be passed to the textbox macro. The possible widths
are the same as those provided by GOV.UK Elements, and in the same format (eg
1-4, 1-2, 2-3…)

This commit also adds a new width (5em) which is suitable for 3fa codes, and
adds it to the verify page.
---
 app/assets/stylesheets/app.scss       | 8 ++++++++
 app/templates/components/textbox.html | 4 ++--
 app/templates/views/verify.html       | 2 ++
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/app.scss b/app/assets/stylesheets/app.scss
index 64db8e310..3fba6dad2 100644
--- a/app/assets/stylesheets/app.scss
+++ b/app/assets/stylesheets/app.scss
@@ -30,3 +30,11 @@
 a:visited {
   color: $link-colour;
 }
+
+.form-control-5em {
+  width: 100%;
+
+  @include media(tablet) {
+    width: 5em;
+  }
+}
diff --git a/app/templates/components/textbox.html b/app/templates/components/textbox.html
index 5185f910f..07f422c4a 100644
--- a/app/templates/components/textbox.html
+++ b/app/templates/components/textbox.html
@@ -1,4 +1,4 @@
-{% macro textbox(field, hint=False, highlight_tags=False, help_link=None, help_link_text=None) %}
+{% macro textbox(field, hint=False, highlight_tags=False, help_link=None, help_link_text=None, width='2-3') %}
   <div class="form-group{% if field.errors %} error{% endif %}">
     <label class="form-label" for="{{ field.name }}">
       {{ field.label }}
@@ -14,7 +14,7 @@
       {% endif %}
     </label>
     {{ field(**{
-      'class': 'form-control textbox-highlight-textbox' if highlight_tags else 'form-control',
+      'class': 'form-control form-control-{} textbox-highlight-textbox'.format(width) if highlight_tags else 'form-control form-control-{}'.format(width),
       'data-module': 'highlight-tags' if highlight_tags else ''
     }) }}
     {% if help_link and help_link_text %}
diff --git a/app/templates/views/verify.html b/app/templates/views/verify.html
index 9c01b596f..7d6819779 100644
--- a/app/templates/views/verify.html
+++ b/app/templates/views/verify.html
@@ -17,11 +17,13 @@ GOV.UK Notify | Confirm email address and mobile number
     <form autocomplete="off" method="post">
       {{ textbox(
         form.email_code,
+        width='5em',
         help_link=url_for('.check_and_resend_email_code'),
         help_link_text='I haven’t received an email'
       ) }}
       {{ textbox(
         form.sms_code,
+        width='5em',
         help_link=url_for('.check_and_resend_text_code'),
         help_link_text='I haven’t received a text'
       ) }}