Add GOV.UK Design System style back links

The Design System has standardised on back links being at the top of the
page, decorated with a small text-coloured arrow.

I think this makes more sense than having them at the bottom, because it
suggests, in some way, being able to go back before commiting to any of
the forms on the page. Whereas the things at the bottom of the page
should be performing actions on what’s in the page.

The reason for making this change now is that it de-clutters the area
around the green buttons. This was presenting a design challenge where
multiple levels of interaction were happening in the same form. Moving
these back links to the top of the page should mean that, in these
complicated forms, there’s one fewer thing to compete for the user’s
attention.

I’ve componentised this into a `page_header` macro so that the change is
easier to roll out and maintain.

app/templates/views/api/callbacks.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/table.html" import mapping_table, row, text_field, edit_field, optional_text_field with context %}
 
@@ -9,7 +10,10 @@
 {% endblock %}
 
 {% block maincolumn_content %}
-  <h1 class="heading-large">Callbacks</h1>
+  {{ page_header(
+    'Callbacks',
+    back_link=url_for('main.api_integration', service_id=current_service.id)
+  ) }}
   <div class="bottom-gutter-3-2 dashboard-table body-copy-table">
 		{% call mapping_table(
 	    caption='General',
@@ -30,8 +34,4 @@
 	    {% endcall %}
 	  {% endcall %}
 	</div>
-  {{ page_footer(
-    secondary_link=url_for('.api_integration', service_id=current_service.id),
-    secondary_link_text='Back to API integration'
-  ) }}
 {% endblock %}

app/templates/views/api/callbacks/delivery-status-callback.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -10,7 +11,12 @@
 {% block maincolumn_content %}
   <div class="grid-row">
     <div class="column-five-sixths">
-      <h1 class="heading-large">Callbacks for delivery receipts</h1>
+
+      {{ page_header(
+        'Callbacks for delivery receipts',
+        back_link=url_for(back_link, service_id=current_service.id)
+      ) }}
+
       <p>
         When you send an email or text message, we can tell you if Notify was able to deliver it.
         Check the <a href="{{ url_for('.callbacks') }}"> callback documentation </a> for more information.
@@ -28,11 +34,6 @@
           hint='At least 10 characters',
           autocomplete='new-password'
         ) }}
-        {{ page_footer(
-          'Save',
-          back_link=url_for(back_link, service_id=current_service.id),
-          back_link_text='Back to settings'
-        ) }}
       {% endcall %}
     </div>
   </div>

app/templates/views/api/callbacks/received-text-messages-callback.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/textbox.html" import textbox %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
 
@@ -8,7 +9,10 @@
 {% endblock %}
 
 {% block maincolumn_content %}
-  <h1 class="heading-large">Callbacks for received text messages</h1>
+  {{ page_header(
+    'Callbacks for received text messages',
+    back_link=url_for('.api_callbacks', service_id=current_service.id)
+  ) }}
   <div class="grid-row">
     <div class="column-five-sixths">
       <p>
@@ -28,11 +32,7 @@
           hint='At least 10 characters',
           autocomplete='new-password'
         ) }}
-        {{ page_footer(
-          'Save',
-          back_link=url_for('.api_callbacks', service_id=current_service.id),
-          back_link_text='Back to settings'
-        ) }}
+        {{ page_footer('Save') }}
       {% endcall %}
     </div>
   </div>

app/templates/views/api/keys.html

@@ -2,6 +2,7 @@
 {% from "components/banner.html" import banner_wrapper %}
 {% from "components/table.html" import list_table, field, hidden_field_heading %}
 {% from "components/api-key.html" import api_key %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 
 {% block service_page_title %}
@@ -10,9 +11,10 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">
-    API keys
-  </h1>
+  {{ page_header(
+    'API keys',
+    back_link=url_for('main.api_integration', service_id=current_service.id)
+  ) }}
 
   <div class="body-copy-table">
     {% call(item, row_number) list_table(

app/templates/views/api/keys/create.html

@@ -1,4 +1,5 @@
 {% extends "withnav_template.html" %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/textbox.html" import textbox %}
 {% from "components/radios.html" import radios %}
@@ -11,9 +12,10 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">
-    Create an API key
-  </h1>
+  {{ page_header(
+    'Create an API key',
+    back_link=url_for('main.api_keys', service_id=current_service.id)
+  ) }}
 
   {% call form_wrapper() %}
     {{ textbox(form.key_name, label='Name for this key') }}

app/templates/views/api/whitelist.html

@@ -2,6 +2,7 @@
 {% from "components/banner.html" import banner_wrapper %}
 {% from "components/table.html" import list_table, field, hidden_field_heading %}
 {% from "components/api-key.html" import api_key %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/list-entry.html" import list_entry %}
 {% from "components/form.html" import form_wrapper %}
@@ -32,9 +33,10 @@
       </ul>
     {% endcall %}
   {% else %}
-    <h1 class="heading-large">
-      Whitelist
-    </h1>
+    {{ page_header(
+      'Whitelist',
+      back_link=url_for('main.api_integration', service_id=current_service.id)
+    ) }}
   {% endif %}
 
   <p>
@@ -63,11 +65,7 @@
       </div>
     </div>
 
-    {{ page_footer(
-      'Save',
-      secondary_link=url_for('.api_integration', service_id=current_service.id),
-      secondary_link_text='Back to API integration'
-    ) }}
+    {{ page_footer('Save') }}
 
   {% endcall %}