change add links to small buttons

This leaves some empty summary list rows in the medical info summary
list, but this is only a placeholder that we will soon be replacing
with the proper design.

We've added horizontal rules between the summary lists and button groups
because there have been updates to the design system to remove extra
space below summary lists within cards, and these are
conceptually different so need separating a bit.

Author: MatMoore

manage_breast_screening/mammograms/jinja2/mammograms/medical_information/medical_history/forms/mastectomy_or_lumpectomy_history.jinja

@@ -6,7 +6,7 @@
 {% block form %}
   <p>
     This is designed to capture information on prophylactic or elective surgery.
-    <a href="{{ presenter.add_breast_cancer_history_link.href }}" class="nhsuk-link">
+    <a href="{{ presenter.add_breast_cancer_history_button.href }}" class="nhsuk-link">
       Add breast cancer details
     </a>
     if that was the reason for this surgery.

manage_breast_screening/mammograms/jinja2/mammograms/record_medical_information.jinja

@@ -1,4 +1,5 @@
 {% extends "wizard_step.jinja" %}
+{% from "nhsuk/components/button/macro.jinja" import button %}
 {% from "nhsuk/components/card/macro.jinja" import card %}
 {% from "nhsuk/components/inset-text/macro.jinja" import insetText %}
 {% from "nhsuk/components/summary-list/macro.jinja" import summaryList %}
@@ -23,13 +24,18 @@
     }) }}
   {% endif %}
 
-  <p class="nhsuk-u-margin-top-4 nhsuk-u-margin-bottom-0">
-    <a href="{{ presenter.add_lump_link.href }}" class="nhsuk-link nhsuk-link--no-visited-state">{{ presenter.add_lump_link.text }}</a><br>
-    <a href="{{ presenter.add_swelling_or_shape_change_link.href }}" class="nhsuk-link nhsuk-link--no-visited-state">{{ presenter.add_swelling_or_shape_change_link.text }}</a><br>
-    <a href="{{ presenter.add_skin_change_link.href }}" class="nhsuk-link nhsuk-link--no-visited-state">{{ presenter.add_skin_change_link.text }}</a><br>
-    <a href="{{ presenter.add_nipple_change_link.href }}" class="nhsuk-link nhsuk-link--no-visited-state">{{ presenter.add_nipple_change_link.text }}</a><br>
-    <a href="{{ presenter.add_other_symptom_link.href }}" class="nhsuk-link nhsuk-link--no-visited-state">{{ presenter.add_other_symptom_link.text }}</a>
-  </p>
+  <hr>
+  <h3>Add symptoms</h3>
+
+  <div class="nhsuk-button-group app-button-group--small">
+    {% for button_info in presenter.symptom_buttons %}
+      {{ button({
+        "text": button_info.text,
+        "href": button_info.href,
+        "classes": "nhsuk-button--secondary nhsuk-button--small"
+      }) }}
+    {% endfor %}
+  </div>
 {% endcall %}
 
 {% set medical_history_card_html %}
@@ -40,7 +46,6 @@
       </a><br>
       {{ summaryList(presented_item.summary_list_params) }}
     {% endfor %}
-    <a href="{{ presenter.add_breast_cancer_history_link.href }}" class="nhsuk-link nhsuk-link--no-visited-state">{{ presenter.add_breast_cancer_history_link.text }}</a><br>
   {% endset %}
 
   {% set mastectomy_or_lumpectomy_history_html %}
@@ -50,7 +55,6 @@
       </a><br>
       {{ summaryList(presented_item.summary_list_params) }}
     {% endfor %}
-    <a href="{{ presenter.add_mastectomy_or_lumpectomy_history_link.href }}" class="nhsuk-link nhsuk-link--no-visited-state">{{ presenter.add_mastectomy_or_lumpectomy_history_link.text }}</a><br>
   {% endset %}
 
   {% set implanted_medical_device_history_html %}
@@ -60,7 +64,6 @@
       </a><br>
       {{ summaryList(presented_item.summary_list_params) }}
     {% endfor %}
-    <a href="{{ presenter.add_implanted_medical_device_history_link.href }}" class="nhsuk-link nhsuk-link--no-visited-state">{{ presenter.add_implanted_medical_device_history_link.text }}</a><br>
   {% endset %}
 
   {% set breast_augmentation_history_html %}
@@ -70,7 +73,6 @@
       </a><br>
       {{ summaryList(presented_item.summary_list_params) }}
     {% endfor %}
-    <a href="{{ presenter.add_breast_augmentation_history_link.href }}" class="nhsuk-link nhsuk-link--no-visited-state">{{ presenter.add_breast_augmentation_history_link.text }}</a><br>
   {% endset %}
 
   {% set other_procedure_history_html %}
@@ -80,7 +82,6 @@
       </a><br>
       {{ summaryList(presented_item.summary_list_params) }}
     {% endfor %}
-    <a href="{{ presenter.add_other_procedure_history_link.href }}" class="nhsuk-link nhsuk-link--no-visited-state">{{ presenter.add_other_procedure_history_link.text }}</a><br>
   {% endset %}
 
   {% set cyst_history_html %}
@@ -90,22 +91,15 @@
       </a><br>
       {{ summaryList(presented_item.summary_list_params) }}
     {% endfor %}
-    <a href="{{ presenter.add_cyst_history_link.href }}" class="nhsuk-link nhsuk-link--no-visited-state">{{ presenter.add_cyst_history_link.text }}</a><br>
   {% endset %}
 
-  {% set non_cancerous_lump_diagnosis_link %}
-  <a class="nhsuk-link" href="#">Enter non-cancerous lump diagnosis</a>
-  {% endset %}
   {% set benign_lump_history_html %}
     {% for presented_item in presenter.benign_lump_history %}
       {{ summaryList(presented_item.summary_list_params) }}
       <p><a href="{{ presented_item.change_link.href }}" class="nhsuk-link nhsuk-link--no-visited-state">{{ presented_item.change_link.text }}</a></p>
     {% endfor %}
-    <a href="{{ presenter.add_benign_lump_history_link.href }}" class="nhsuk-link nhsuk-link--no-visited-state">{{ presenter.add_benign_lump_history_link.text }}</a><br>
-  {% endset %}
-  {% set chest_procedures_link %}
-  <a class="nhsuk-link" href="#">Enter other breast or chest procedures</a>
   {% endset %}
+
   {{ summaryList({
     "rows": [
      {
@@ -206,6 +200,20 @@
      }
     ]
   }) }}
+
+  <hr>
+  <h3>Add medical history</h3>
+
+  <div class="nhsuk-button-group app-button-group--small">
+    {% for button_info in presenter.medical_history_buttons %}
+      {{ button({
+        "text": button_info.text,
+        "href": button_info.href,
+        "classes": "nhsuk-button--secondary nhsuk-button--small"
+      }) }}
+    {% endfor %}
+  </div>
+
 {% endset %}
 {{ card({
   "heading": "Medical history",

manage_breast_screening/mammograms/presenters/medical_information_presenter.py

@@ -79,7 +79,29 @@ def symptom_rows(self):
         return [symptom.summary_list_row for symptom in self.symptoms]
 
     @property
-    def add_lump_link(self):
+    def symptom_buttons(self):
+        return [
+            self.add_lump_button,
+            self.add_swelling_or_shape_change_button,
+            self.add_skin_change_button,
+            self.add_nipple_change_button,
+            self.add_other_symptom_button,
+        ]
+
+    @property
+    def medical_history_buttons(self):
+        return [
+            self.add_breast_cancer_history_button,
+            self.add_implanted_medical_device_history_button,
+            self.add_breast_augmentation_history_button,
+            self.add_mastectomy_or_lumpectomy_history_button,
+            self.add_cyst_history_button,
+            self.add_benign_lump_history_button,
+            self.add_other_procedure_history_button,
+        ]
+
+    @property
+    def add_lump_button(self):
         url = reverse("mammograms:add_symptom_lump", kwargs={"pk": self.appointment.pk})
 
         return {
@@ -92,7 +114,7 @@ def add_lump_link(self):
         }
 
     @property
-    def add_swelling_or_shape_change_link(self):
+    def add_swelling_or_shape_change_button(self):
         url = reverse(
             "mammograms:add_symptom_swelling_or_shape_change",
             kwargs={"pk": self.appointment.pk},
@@ -109,7 +131,7 @@ def add_swelling_or_shape_change_link(self):
         }
 
     @property
-    def add_skin_change_link(self):
+    def add_skin_change_button(self):
         url = reverse(
             "mammograms:add_symptom_skin_change",
             kwargs={"pk": self.appointment.pk},
@@ -125,7 +147,7 @@ def add_skin_change_link(self):
         }
 
     @property
-    def add_nipple_change_link(self):
+    def add_nipple_change_button(self):
         url = reverse(
             "mammograms:add_symptom_nipple_change",
             kwargs={"pk": self.appointment.pk},
@@ -141,7 +163,7 @@ def add_nipple_change_link(self):
         }
 
     @property
-    def add_other_symptom_link(self):
+    def add_other_symptom_button(self):
         url = reverse(
             "mammograms:add_symptom_other",
             kwargs={"pk": self.appointment.pk},
@@ -157,7 +179,7 @@ def add_other_symptom_link(self):
         }
 
     @property
-    def add_breast_cancer_history_link(self):
+    def add_breast_cancer_history_button(self):
         url = reverse(
             "mammograms:add_breast_cancer_history_item",
             kwargs={"pk": self.appointment.pk},
@@ -169,7 +191,7 @@ def add_breast_cancer_history_link(self):
         }
 
     @property
-    def add_implanted_medical_device_history_link(self):
+    def add_implanted_medical_device_history_button(self):
         url = reverse(
             "mammograms:add_implanted_medical_device_history_item",
             kwargs={"pk": self.appointment.pk},
@@ -181,7 +203,7 @@ def add_implanted_medical_device_history_link(self):
         }
 
     @property
-    def add_cyst_history_link(self):
+    def add_cyst_history_button(self):
         url = reverse(
             "mammograms:add_cyst_history_item",
             kwargs={"pk": self.appointment.pk},
@@ -193,7 +215,7 @@ def add_cyst_history_link(self):
         }
 
     @property
-    def add_breast_augmentation_history_link(self):
+    def add_breast_augmentation_history_button(self):
         url = reverse(
             "mammograms:add_breast_augmentation_history_item",
             kwargs={"pk": self.appointment.pk},
@@ -205,7 +227,7 @@ def add_breast_augmentation_history_link(self):
         }
 
     @property
-    def add_benign_lump_history_link(self):
+    def add_benign_lump_history_button(self):
         url = reverse(
             "mammograms:add_benign_lump_history_item",
             kwargs={"pk": self.appointment.pk},
@@ -217,7 +239,7 @@ def add_benign_lump_history_link(self):
         }
 
     @property
-    def add_mastectomy_or_lumpectomy_history_link(self):
+    def add_mastectomy_or_lumpectomy_history_button(self):
         url = reverse(
             "mammograms:add_mastectomy_or_lumpectomy_history_item",
             kwargs={"pk": self.appointment.pk},
@@ -229,7 +251,7 @@ def add_mastectomy_or_lumpectomy_history_link(self):
         }
 
     @property
-    def add_other_procedure_history_link(self):
+    def add_other_procedure_history_button(self):
         url = reverse(
             "mammograms:add_other_procedure_history_item",
             kwargs={"pk": self.appointment.pk},

manage_breast_screening/mammograms/tests/presenters/test_medical_information_presenter.py

@@ -78,10 +78,10 @@ def test_formats_symptoms_summary_list(self):
             },
         ]
 
-    def test_add_lump_link(self):
+    def test_add_lump_button(self):
         appointment = AppointmentFactory()
 
-        assert MedicalInformationPresenter(appointment).add_lump_link == {
+        assert MedicalInformationPresenter(appointment).add_lump_button == {
             "href": f"/mammograms/{appointment.pk}/record-medical-information/lump/",
             "text": "Add a lump",
         }
@@ -93,15 +93,15 @@ def test_add_lump_link(self):
             area=SymptomAreas.BOTH_BREASTS,
         )
 
-        assert MedicalInformationPresenter(appointment).add_lump_link == {
+        assert MedicalInformationPresenter(appointment).add_lump_button == {
             "href": f"/mammograms/{appointment.pk}/record-medical-information/lump/",
             "text": "Add another lump",
         }
 
-    def test_add_nipple_change_link(self):
+    def test_add_nipple_change_button(self):
         appointment = AppointmentFactory()
 
-        assert MedicalInformationPresenter(appointment).add_nipple_change_link == {
+        assert MedicalInformationPresenter(appointment).add_nipple_change_button == {
             "href": f"/mammograms/{appointment.pk}/record-medical-information/nipple-change/",
             "text": "Add a nipple change",
         }
@@ -113,27 +113,27 @@ def test_add_nipple_change_link(self):
             area=SymptomAreas.BOTH_BREASTS,
         )
 
-        assert MedicalInformationPresenter(appointment).add_nipple_change_link == {
+        assert MedicalInformationPresenter(appointment).add_nipple_change_button == {
             "href": f"/mammograms/{appointment.pk}/record-medical-information/nipple-change/",
             "text": "Add another nipple change",
         }
 
-    def test_add_breast_cancer_history_link(self):
+    def test_add_breast_cancer_history_button(self):
         appointment = AppointmentFactory()
 
         assert MedicalInformationPresenter(
             appointment
-        ).add_breast_cancer_history_link == {
+        ).add_breast_cancer_history_button == {
             "href": f"/mammograms/{appointment.pk}/record-medical-information/breast-cancer-history/",
             "text": "Add breast cancer history",
         }
 
-    def test_implanted_medical_device_history_link(self):
+    def test_implanted_medical_device_history_button(self):
         appointment = AppointmentFactory()
 
         assert MedicalInformationPresenter(
             appointment
-        ).add_implanted_medical_device_history_link == {
+        ).add_implanted_medical_device_history_button == {
             "href": f"/mammograms/{appointment.pk}/record-medical-information/implanted-medical-device-history/",
             "text": "Add implanted medical device history",
         }
@@ -188,40 +188,40 @@ def test_single_cyst_history_item_has_no_counter(self):
 
         assert counters == [None]
 
-    def test_cyst_history_link(self):
+    def test_cyst_history_button(self):
         appointment = AppointmentFactory()
 
-        assert MedicalInformationPresenter(appointment).add_cyst_history_link == {
+        assert MedicalInformationPresenter(appointment).add_cyst_history_button == {
             "href": f"/mammograms/{appointment.pk}/record-medical-information/cyst-history/",
             "text": "Add cyst history",
         }
 
-    def test_breast_augmentation_history_link(self):
+    def test_breast_augmentation_history_button(self):
         appointment = AppointmentFactory()
 
         assert MedicalInformationPresenter(
             appointment
-        ).add_breast_augmentation_history_link == {
+        ).add_breast_augmentation_history_button == {
             "href": f"/mammograms/{appointment.pk}/record-medical-information/breast-augmentation-history/",
             "text": "Add breast augmentation history",
         }
 
-    def test_add_benign_lump_history_link(self):
+    def test_add_benign_lump_history_button(self):
         appointment = AppointmentFactory()
 
         assert MedicalInformationPresenter(
             appointment
-        ).add_benign_lump_history_link == {
+        ).add_benign_lump_history_button == {
             "href": f"/mammograms/{appointment.pk}/record-medical-information/benign-lump-history/",
             "text": "Add benign lump history",
         }
 
-    def test_mastectomy_or_lumpectomy_history_link(self):
+    def test_mastectomy_or_lumpectomy_history_button(self):
         appointment = AppointmentFactory()
 
         assert MedicalInformationPresenter(
             appointment
-        ).add_mastectomy_or_lumpectomy_history_link == {
+        ).add_mastectomy_or_lumpectomy_history_button == {
             "href": f"/mammograms/{appointment.pk}/record-medical-information/mastectomy-or-lumpectomy-history/",
             "text": "Add mastectomy or lumpectomy history",
         }
@@ -254,12 +254,12 @@ def test_single_mastectomy_or_lumpectomy_history_item_has_no_counter(self):
 
         assert counters == [None]
 
-    def test_other_procedure_history_link(self):
+    def test_other_procedure_history_button(self):
         appointment = AppointmentFactory()
 
         assert MedicalInformationPresenter(
             appointment
-        ).add_other_procedure_history_link == {
+        ).add_other_procedure_history_button == {
             "href": f"/mammograms/{appointment.pk}/record-medical-information/other-procedure-history/",
             "text": "Add other procedure history",
         }