Merge pull request #156 from NHSDigital/PPHA-263-add-input-suffixes-to-weight-page

PPHA-263: add input suffixes to weight page

Author: miriam-z

…ning/nhsuk_forms/imperial_weight_form.py …ing/nhsuk_forms/imperial_weight_field.pylung_cancer_screening/nhsuk_forms/imperial_weight_form.py renamed to lung_cancer_screening/nhsuk_forms/imperial_weight_field.py lung_cancer_screening/nhsuk_forms/imperial_weight_form.py renamed to lung_cancer_screening/nhsuk_forms/imperial_weight_field.py

@@ -31,7 +31,8 @@
       "name": field.html_name + "_0",
       "value": field.subwidgets.0.data.value,
       "classes": "nhsuk-input--width-2" + field_error_classes,
-      "type": "number"
+      "type": "number",
+      "suffix": "st"
     }) }}
   </div>
 
@@ -46,7 +47,8 @@
       "name": field.html_name + "_1",
       "value": field.subwidgets.1.data.value,
       "classes": "nhsuk-input--width-2" + field_error_classes,
-      "type": "number"
+      "type": "number",
+      "suffix": "lb"
     }) }}
   </div>
 </div>

lung_cancer_screening/nhsuk_forms/jinja2/imperial-weight-input.jinja

@@ -0,0 +1,40 @@
+from django.test import TestCase
+from django.forms import Form
+from ...imperial_height_field import ImperialHeightField
+
+
+class TestImperialHeightField(TestCase):
+    def test_renders_nhs_input(self):
+        class TestForm(Form):
+            field = ImperialHeightField(label="Abc")
+
+        self.assertHTMLEqual(
+            TestForm()["field"].as_field_group(),
+            """
+            <div id="field" class="multi-field-input nhsuk-form-group">
+                <div class="multi-field-input__item">
+                    <div class="nhsuk-form-group">
+                        <label class="nhsuk-label" for="id_field_0">
+                            Feet
+                        </label>
+                        <div class="nhsuk-input__wrapper">
+                            <input class="nhsuk-input nhsuk-input--width-4" id="id_field_0" name="field_0" type="number">
+                            <div class="nhsuk-input__suffix" aria-hidden="true">ft</div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="multi-field-input__item">
+                    <div class="nhsuk-form-group">
+                        <label class="nhsuk-label" for="id_field_1">
+                            Inches
+                        </label>
+                        <div class="nhsuk-input__wrapper">
+                            <input class="nhsuk-input nhsuk-input--width-4" id="id_field_1" name="field_1" type="number">
+                            <div class="nhsuk-input__suffix" aria-hidden="true">in</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            """,
+        )

lung_cancer_screening/nhsuk_forms/tests/unit/test_imperial_height_field.py

@@ -0,0 +1,40 @@
+from django.test import TestCase
+from django.forms import Form
+from ...imperial_weight_field import ImperialWeightField
+
+
+class TestImperialWeightField(TestCase):
+    def test_renders_nhs_input(self):
+        class TestForm(Form):
+            field = ImperialWeightField(label="Abc")
+
+        self.assertHTMLEqual(
+            TestForm()["field"].as_field_group(),
+            """
+            <div id="field" class="multi-field-input nhsuk-form-group">
+                <div class="multi-field-input__item">
+                    <div class="nhsuk-form-group">
+                        <label class="nhsuk-label nhsuk-fieldset__legend--m" for="id_field_0">
+                            Stone
+                        </label>
+                        <div class="nhsuk-input__wrapper">
+                            <input class="nhsuk-input nhsuk-input--width-2" id="id_field_0" name="field_0" type="number">
+                            <div class="nhsuk-input__suffix" aria-hidden="true">st</div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="multi-field-input__item">
+                    <div class="nhsuk-form-group">
+                        <label class="nhsuk-label nhsuk-fieldset__legend--m" for="id_field_1">
+                            Pounds
+                        </label>
+                        <div class="nhsuk-input__wrapper">
+                            <input class="nhsuk-input nhsuk-input--width-2" id="id_field_1" name="field_1" type="number">
+                            <div class="nhsuk-input__suffix" aria-hidden="true">lb</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            """,
+        )

lung_cancer_screening/nhsuk_forms/tests/unit/test_imperial_weight_field.py

@@ -1,6 +1,6 @@
 from django import forms
 
-from ...nhsuk_forms.imperial_weight_form import ImperialWeightField
+from ...nhsuk_forms.imperial_weight_field import ImperialWeightField
 from ..models.response_set import ResponseSet
 
 class ImperialWeightForm(forms.ModelForm):

lung_cancer_screening/questions/forms/imperial_weight_form.py

@@ -16,7 +16,8 @@ def __init__(self, *args, **kwargs):
             required=True,
             error_messages={
                 'required': 'Enter your weight',
-            }
+            },
+            suffix="kg"
         )
     def clean_weight_metric(self):
         return self.cleaned_data['weight_metric'] * 10