Replace straightforward buttons and links styled like buttons

This replaces the buttons that aren't part of a macro and that we don't need to write additional styles for with their govuk-frontend equivalent. There were some links that were styled to look like buttons, so these have also been replaced with the new govuk-frontend macro. There was one button on the `choose-account.html` template that was in a section of code that was never reached - this has been deleted.
2026-08-23 15:57:23 -04:00 · 2020-01-30 14:01:13 +00:00
parent a62658ce8c
commit f3bb93f460
29 changed files with 151 additions and 60 deletions
--- a/app/templates/views/agreement/service-agreement.html
+++ b/app/templates/views/agreement/service-agreement.html
@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/page-header.html" import page_header %}
+{% from "components/button/macro.njk" import govukButton %}

 {% block service_page_title %}
  Accept our data sharing and financial agreement
@@ -30,7 +31,11 @@
    <p>
      The agreement is confidential and should not be shared outside your organisation.
    </p>
-    <a href="{{ url_for('main.service_accept_agreement', service_id=current_service.id) }}" class="button">Continue</a>
+    {{ govukButton({
+      "element": "a",
+      "text": "Continue",
+      "href": url_for('main.service_accept_agreement', service_id=current_service.id),
+    }) }}

  </div>
 </div>
--- a/app/templates/views/api/keys.html
+++ b/app/templates/views/api/keys.html
@@ -1,9 +1,7 @@
 {% extends "withnav_template.html" %}
-{% 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/button/macro.njk" import govukButton %}

 {% block service_page_title %}
  API keys
@@ -55,7 +53,12 @@
  </div>

  <div class="js-stick-at-bottom-when-scrolling">
-    <a href="{{ url_for('.create_api_key', service_id=current_service.id) }}" class="button-secondary">Create an API key</a>
+    {{ govukButton({
+      "element": "a",
+      "text": "Create an API key",
+      "href": url_for('.create_api_key', service_id=current_service.id),
+      "classes": "govuk-button--secondary"
+    }) }}
  </div>

 {% endblock %}
--- a/app/templates/views/check/ok.html
+++ b/app/templates/views/check/ok.html
@@ -2,10 +2,9 @@
 {% from "components/banner.html" import banner_wrapper %}
 {% from "components/radios.html" import radio_select %}
 {% from "components/table.html" import list_table, field, text_field, index_field, hidden_field_heading %}
-{% from "components/file-upload.html" import file_upload %}
 {% from "components/page-header.html" import page_header %}
-{% from "components/page-footer.html" import page_footer %}
 {% from "components/message-count-label.html" import message_count_label %}
+{% from "components/button/macro.njk" import govukButton %}

 {% set file_contents_header_id = 'file-preview' %}
 {% macro skip_to_file_contents() %}
@@ -45,9 +44,16 @@
        ) }}
      {% endif %}
      {% if (template.template_type != 'letter' or not request.args.from_test) and not letter_too_long %}
-      <button type="submit" class="button">Send {{ count_of_recipients|format_thousands }} {{ message_count_label(count_of_recipients, template.template_type, suffix='') }}</button>
+        {% set button_text %}
+          Send {{ count_of_recipients|format_thousands }} {{ message_count_label(count_of_recipients, template.template_type, suffix='') }}
+        {% endset %}
+        {{ govukButton({ "text": button_text }) }}
      {% else %}
-        <a href="{{ url_for('no_cookie.check_messages_preview', service_id=current_service.id, template_id=template.id, upload_id=upload_id, filetype='pdf') }}" download class="button">Download as a PDF</a>
+        {{ govukButton({
+          "element": "a",
+          "text": "Download as a PDF",
+          "href": url_for('no_cookie.check_messages_preview', service_id=current_service.id, template_id=template.id, upload_id=upload_id, filetype='pdf'),
+        }) }}
      {% endif %}
    </form>
  </div>
--- a/app/templates/views/choose-account.html
+++ b/app/templates/views/choose-account.html
@@ -1,4 +1,5 @@
 {% extends "withoutnav_template.html" %}
+{% from "components/button/macro.njk" import govukButton %}

 {% macro service_list(
  heading,
@@ -39,11 +40,6 @@
  {% else %}
    </ul>
  {% endif %}
-  {% if show_add_service_button %}
-    <div class="js-stick-at-bottom-when-scrolling">
-      <a href="{{ url_for('.add_service') }}" class="button-secondary">Add a new service</a>
-    </div>
-  {% endif %}
  <div class="keyline-block"></div>
 {% endmacro %}

@@ -112,7 +108,12 @@
          </div>
          <div class="column-three-quarters">
      {% endif %}
-      <a href="{{ url_for('.add_service') }}" class="button-secondary">Add a new service</a>
+      {{ govukButton({
+        "element": "a",
+        "text": "Add a new service",
+        "href": url_for('.add_service'),
+        "classes": "govuk-button--secondary"
+      }) }}
      {% if current_user.has_access_to_live_and_trial_mode_services %}
          </div>
        </div>
--- a/app/templates/views/email-branding/select-branding.html
+++ b/app/templates/views/email-branding/select-branding.html
@@ -1,6 +1,7 @@
 {% extends "views/platform-admin/_base_template.html" %}
 {% from "components/page-header.html" import page_header %}
 {% from "components/live-search.html" import live_search %}
+{% from "components/button/macro.njk" import govukButton %}

 {% block per_page_title %}
  Email branding
@@ -22,7 +23,12 @@
    {% endfor %}
  </nav>
  <div class="js-stick-at-bottom-when-scrolling">
-    <a href="{{ url_for('.create_email_branding') }}" class="button-secondary">New brand</a>
+    {{ govukButton({
+      "element": "a",
+      "text": "New brand",
+      "href": url_for('.create_email_branding'),
+      "classes": "govuk-button--secondary"
+    }) }}
  </div>

 {% endblock %}
--- a/app/templates/views/email-not-received.html
+++ b/app/templates/views/email-not-received.html
@@ -1,5 +1,5 @@
 {% extends "withoutnav_template.html" %}
-{% from "components/page-footer.html" import page_footer %}
+{% from "components/button/macro.njk" import govukButton %}

 {% block per_page_title %}
  Resend email link
@@ -15,10 +15,14 @@
    <p> If you no longer have access to the email address you registered for this service, speak to your service manager to reset the email.</p>

    <p>
-  		<a class="button" href="{{url_for('main.resend_email_link')}}" role="button">Resend email link</a>
-  	</p>
+      {{ govukButton({
+        "element": "a",
+        "text": "Resend email link",
+        "href": url_for('main.resend_email_link')
+      }) }}
+    </p>

  </div>
 </div>

-{% endblock %}
+{% endblock %}
--- a/app/templates/views/jobs/jobs.html
+++ b/app/templates/views/jobs/jobs.html
@@ -1,5 +1,6 @@
 {% from "components/previous-next-navigation.html" import previous_next_navigation %}
 {% extends "withnav_template.html" %}
+{% from "components/button/macro.njk" import govukButton %}

 {% block service_page_title %}
  Uploads
@@ -13,7 +14,12 @@
      {{ previous_next_navigation(prev_page, next_page) }}
      {% if current_service.can_upload_letters and current_user.has_permissions('send_messages') %}
        <div class="js-stick-at-bottom-when-scrolling">
-          <a href="{{ url_for('.upload_letter', service_id=current_service.id) }}" class="button-secondary" role="button">Upload a letter</a>
+          {{ govukButton({
+            "element": "a",
+            "text": "Upload a letter",
+            "href": url_for('.upload_letter', service_id=current_service.id),
+            "classes": "govuk-button--secondary"
+          }) }}
        </div>
      {% endif %}
    </div>
--- a/app/templates/views/letter-branding/select-letter-branding.html
+++ b/app/templates/views/letter-branding/select-letter-branding.html
@@ -1,6 +1,7 @@
 {% extends "views/platform-admin/_base_template.html" %}
 {% from "components/page-header.html" import page_header %}
 {% from "components/live-search.html" import live_search %}
+{% from "components/button/macro.njk" import govukButton %}

 {% block per_page_title %}
  Letter branding
@@ -22,7 +23,12 @@
    {% endfor %}
  </nav>
  <div class="js-stick-at-bottom-when-scrolling">
-    <a href="{{ url_for('.create_letter_branding') }}" class="button-secondary">New brand</a>
+    {{ govukButton({
+      "element": "a",
+      "text": "New brand",
+      "href": url_for('.create_letter_branding'),
+      "classes": "govuk-button--secondary"
+    }) }}
  </div>

 {% endblock %}
--- a/app/templates/views/manage-users.html
+++ b/app/templates/views/manage-users.html
@@ -1,9 +1,7 @@
 {% extends "withnav_template.html" %}
-{% from "components/table.html" import list_table, row, field, hidden_field_heading %}
-{% from "components/page-footer.html" import page_footer %}
 {% from "components/tick-cross.html" import tick_cross %}
-{% from "components/textbox.html" import textbox %}
 {% from "components/live-search.html" import live_search %}
+{% from "components/button/macro.njk" import govukButton %}

 {% block service_page_title %}
  Team members
@@ -88,7 +86,12 @@

  {% if current_user.has_permissions('manage_service') %}
    <div class="js-stick-at-bottom-when-scrolling">
-      <a href="{{ url_for('.invite_user', service_id=current_service.id) }}" class="button-secondary">Invite a team member</a>
+      {{ govukButton({
+        "element": "a",
+        "text": "Invite a team member",
+        "href": url_for('.invite_user', service_id=current_service.id),
+        "classes": "govuk-button--secondary"
+      }) }}
    </div>
  {% endif %}

--- a/app/templates/views/notifications/check.html
+++ b/app/templates/views/notifications/check.html
@@ -3,6 +3,7 @@
 {% from "components/message-count-label.html" import message_count_label %}
 {% from "components/page-header.html" import page_header %}
 {% from "components/back-link/macro.njk" import govukBackLink %}
+{% from "components/button/macro.njk" import govukButton %}

 {% block service_page_title %}
  {{ "Error" if error else "Preview of ‘{}’".format(template.name) }}
@@ -76,7 +77,8 @@
      )}}" class='page-footer'>
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
      {% if not error %}
-        <button type="submit" class="button">Send 1 {{ message_count_label(1, template.template_type, suffix='') }}</button>
+        {% set button_text %}Send 1 {{ message_count_label(1, template.template_type, suffix='') }}{% endset %}
+        {{ govukButton({ "text": button_text }) }}
      {% endif %}
      {% if template.template_type == 'letter' %}
        <a href="{{ url_for('no_cookie.check_notification_preview', service_id=current_service.id, template_id=template.id, filetype='pdf') }}" download class="page-footer-right-aligned-link{% if error %}-without-button{% endif %}">Download as a PDF</a>
--- a/app/templates/views/organisations/index.html
+++ b/app/templates/views/organisations/index.html
@@ -1,7 +1,6 @@
 {% extends "withoutnav_template.html" %}
 {% from "components/live-search.html" import live_search %}
-{% from "components/page-footer.html" import page_footer %}
-{% from "components/page-header.html" import page_header %}
+{% from "components/button/macro.njk" import govukButton %}

 {% block per_page_title %}
  All organisations
@@ -53,7 +52,12 @@
          &nbsp;
        </div>
        <div class="column-three-quarters">
-          <a href="{{ url_for('main.add_organisation') }}" class="button-secondary">New organisation</a>
+          {{ govukButton({
+            "element": "a",
+            "text": "New organisation",
+            "href": url_for('main.add_organisation'),
+            "classes": "govuk-button--secondary"
+          }) }}
        </div>
      </div>
    </div>
--- a/app/templates/views/organisations/organisation/settings/preview-email-branding.html
+++ b/app/templates/views/organisations/organisation/settings/preview-email-branding.html
@@ -1,5 +1,7 @@
 {% extends "org_template.html" %}
 {% from "components/form.html" import form_wrapper %}
+{% from "components/button/macro.njk" import govukButton %}
+
 {% block org_page_title %}
  Preview email branding
 {% endblock %}
@@ -14,7 +16,7 @@
        <div class="form-group">
          {{ form.hidden_tag() }}
          <div class="page-footer">
-            <button type="submit" class="button">Save</button>
+            {{ govukButton({ "text": "Save" }) }}
          </div>
        </div>
      {% endcall %}
--- a/app/templates/views/organisations/organisation/users/index.html
+++ b/app/templates/views/organisations/organisation/users/index.html
@@ -4,6 +4,7 @@
 {% from "components/tick-cross.html" import tick_cross %}
 {% from "components/textbox.html" import textbox %}
 {% from "components/live-search.html" import live_search %}
+{% from "components/button/macro.njk" import govukButton %}

 {% block org_page_title %}
  Team members
@@ -52,7 +53,12 @@
  </div>

  <div class="js-stick-at-bottom-when-scrolling">
-    <a href="{{ url_for('.invite_org_user', org_id=current_org.id) }}" class="button-secondary">Invite team member</a>
+    {{ govukButton({
+      "element": "a",
+      "text": "Invite team member",
+      "href": url_for('.invite_org_user', org_id=current_org.id),
+      "classes": "govuk-button--secondary"
+    }) }}
  </div>

 {% endblock %}
--- a/app/templates/views/platform-admin/index.html
+++ b/app/templates/views/platform-admin/index.html
@@ -5,6 +5,7 @@
 {% from "components/status-box.html" import status_box %}
 {% from "components/form.html" import form_wrapper %}
 {% from "components/details/macro.njk" import govukDetails %}
+{% from "components/button/macro.njk" import govukButton %}

 {% block per_page_title %}
  Platform admin
@@ -21,7 +22,7 @@
      {{ textbox(form.start_date, hint="Enter start date in format YYYY-MM-DD") }}
      {{ textbox(form.end_date, hint="Enter end date in format YYYY-MM-DD") }}
      </br>
-      <button type="submit" class="button">Filter</button>
+      {{ govukButton({ "text": "Filter" }) }}
    {% endcall %}
  {% endset %}

--- a/app/templates/views/platform-admin/services.html
+++ b/app/templates/views/platform-admin/services.html
@@ -6,6 +6,7 @@
 {% from "components/message-count-label.html" import message_count_label %}
 {% from "components/table.html" import mapping_table, field, stats_fields, row_group, row, right_aligned_field_heading, hidden_field_heading, text_field %}
 {% from "components/form.html" import form_wrapper %}
+{% from "components/button/macro.njk" import govukButton %}
 {% from "components/details/macro.njk" import govukDetails %}

 {% macro stats_fields(channel, data) -%}
@@ -109,7 +110,7 @@
      {{ textbox(form.end_date, hint="Enter end date in format YYYY-MM-DD") }}
      {{ checkbox(form.include_from_test_key) }}
      </br>
-      <button type="submit" class="button">Filter</button>
+      {{ govukButton({ "text": "Filter" }) }}
    {% endcall %}
  {% endset %}

--- a/app/templates/views/service-settings/data-retention.html
+++ b/app/templates/views/service-settings/data-retention.html
@@ -1,7 +1,7 @@
 {% extends "withnav_template.html" %}
 {% from "components/api-key.html" import api_key %}
-{% from "components/page-footer.html" import page_footer %}
 {% from "components/table.html" import mapping_table, row_group, row, text_field, edit_field, field, boolean_field, list_table with context %}
+{% from "components/button/macro.njk" import govukButton %}

 {% block service_page_title %}
  Data retention
@@ -16,7 +16,12 @@
      </h1>
    </div>
   <div class="column-one-third">
-	    <a href="{{ url_for('.add_data_retention', service_id=current_service.id) }}" class="button align-with-heading">Add data retention</a>
+    {{ govukButton({
+      "element": "a",
+      "text": "Add data retention",
+      "href": url_for('.add_data_retention', service_id=current_service.id),
+      "classes": "align-with-heading"
+    }) }}
  </div>
  </div>
  <div class="grid-row bottom-gutter">
--- a/app/templates/views/service-settings/email-reply-to/_verify-updates.html
+++ b/app/templates/views/service-settings/email-reply-to/_verify-updates.html
@@ -1,9 +1,9 @@
 {% from "components/banner.html" import banner, banner_wrapper %}
 {% from "components/textbox.html" import textbox %}
 {% from "components/checkbox.html" import checkbox %}
-{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
+{% from "components/button/macro.njk" import govukButton %}

 <div class="ajax-block-container">
  {% if verification_status == "pending" %}
@@ -20,7 +20,11 @@
  {% elif verification_status == "success" %}
    {{ banner("‘{}’ is ready to use".format(reply_to_email_address), type='default', with_tick=True) }}
    <div class="js-stick-at-bottom-when-scrolling">
-      <a href="{{ url_for('.service_email_reply_to', service_id=service_id) }}" class="button">Continue</a>
+      {{ govukButton({
+        "element": "a",
+        "text": "Continue",
+        "href": url_for('.service_email_reply_to', service_id=service_id)
+      }) }}
    </div>
  {% elif verification_status == "failure" %}
    <div class="bottom-gutter">
--- a/app/templates/views/service-settings/email_reply_to.html
+++ b/app/templates/views/service-settings/email_reply_to.html
@@ -1,8 +1,8 @@
 {% extends "withnav_template.html" %}
 {% 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/table.html" import row_group, row, text_field, edit_field, field, boolean_field, list_table with context %}
+{% from "components/button/macro.njk" import govukButton %}

 {% block service_page_title %}
  Reply-to email addresses
@@ -43,7 +43,11 @@
    <div class="column-whole">
      {% if current_user.has_permissions('manage_service') %}
        <div class="js-stick-at-bottom-when-scrolling">
-          <a href="{{ url_for('.service_add_email_reply_to', service_id=current_service.id) }}" class="button">Add reply-to email address</a>
+          {{ govukButton({
+            "element": "a",
+            "text": "Add reply-to email address",
+            "href": url_for('.service_add_email_reply_to', service_id=current_service.id),
+          }) }}
        </div>
      {% endif %}
    </div>
--- a/app/templates/views/service-settings/letter-contact-details.html
+++ b/app/templates/views/service-settings/letter-contact-details.html
@@ -1,8 +1,8 @@
 {% extends "withnav_template.html" %}
 {% 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/table.html" import row_group, row, text_field, edit_field, field, boolean_field, list_table with context %}
+{% from "components/button/macro.njk" import govukButton %}

 {% block service_page_title %}
  Sender addresses
@@ -52,7 +52,11 @@
    <div class="grid-row">
      <div class="column-whole">
        <div class="js-stick-at-bottom-when-scrolling">
-          <a href="{{ url_for('.service_add_letter_contact', service_id=current_service.id) }}" class="button">Add a new address</a>
+          {{ govukButton({
+            "element": "a",
+            "text": "Add a new address",
+            "href": url_for('.service_add_letter_contact', service_id=current_service.id)
+          }) }}
        </div>
      </div>
    </div>
--- a/app/templates/views/service-settings/preview-email-branding.html
+++ b/app/templates/views/service-settings/preview-email-branding.html
@@ -1,5 +1,7 @@
 {% extends "withnav_template.html" %}
 {% from "components/form.html" import form_wrapper %}
+{% from "components/button/macro.njk" import govukButton %}
+
 {% block service_page_title %}
  Preview email branding
 {% endblock %}
@@ -14,7 +16,7 @@
        <div class="form-group">
          {{ form.hidden_tag() }}
          <div class="page-footer">
-            <button type="submit" class="button">Save</button>
+            {{ govukButton({ "text": "Save" }) }}
          </div>
        </div>
      {% endcall %}
--- a/app/templates/views/service-settings/sms-senders.html
+++ b/app/templates/views/service-settings/sms-senders.html
@@ -1,8 +1,8 @@
 {% extends "withnav_template.html" %}
 {% 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/table.html" import row_group, row, text_field, edit_field, field, boolean_field, list_table with context%}
+{% from "components/button/macro.njk" import govukButton %}

 {% block service_page_title %}
  Text message senders
@@ -45,7 +45,11 @@
  {% if current_user.has_permissions('manage_service') %}
    <div class="grid-row bottom-gutter">
      <div class="column-whole">
-        <a href="{{ url_for('.service_add_sms_sender', service_id=current_service.id) }}" class="button">Add text message sender</a>
+        {{ govukButton({
+          "element": "a",
+          "text": "Add text message sender",
+          "href": url_for('.service_add_sms_sender', service_id=current_service.id)
+        }) }}
      </div>
    </div>
  {% endif %}
--- a/app/templates/views/templates/choose-reply.html
+++ b/app/templates/views/templates/choose-reply.html
@@ -1,8 +1,6 @@
-{% from "components/pill.html" import pill %}
-{% from "components/message-count-label.html" import message_count_label %}
-{% from "components/textbox.html" import textbox %}
 {% from "components/live-search.html" import live_search %}
 {% from "components/folder-path.html" import folder_path %}
+{% from "components/button/macro.njk" import govukButton %}

 {% extends "withnav_template.html" %}

@@ -23,7 +21,11 @@
       <p class="bottom-gutter">
         You need a template before you can send text messages.
       </p>
-      <a href="{{ url_for('.choose_template', service_id=current_service.id, initial_state='add-new-template') }}" class="button">Add a new template</a>
+       {{ govukButton({
+        "element": "a",
+        "text": "Add a new template",
+        "href": url_for('.choose_template', service_id=current_service.id, initial_state='add-new-template')
+      }) }}
    {% else %}
      <p>
        You need to ask your service manager to add templates before you
--- a/app/templates/views/templates/start-tour.html
+++ b/app/templates/views/templates/start-tour.html
@@ -1,7 +1,6 @@
 {% extends "withnav_template.html" %}
-{% from "components/page-footer.html" import page_footer %}
-{% from "components/textbox.html" import textbox %}
 {% from "components/api-key.html" import api_key %}
+{% from "components/button/macro.njk" import govukButton %}

 {% block service_page_title %}
  {{ template.name }}
@@ -15,7 +14,11 @@
  {{ template|string }}

  <div class="page-footer">
-    <a href="{{ url_for('.send_test', service_id=current_service.id, template_id=template.id, help=2) }}" class="button">Continue</a>
+    {{ govukButton({
+      "element": "a",
+      "text": "Continue",
+      "href": url_for('.send_test', service_id=current_service.id, template_id=template.id, help=2),
+    }) }}
  </div>

 {% endblock %}
--- a/app/templates/views/verification-not-received.html
+++ b/app/templates/views/verification-not-received.html
@@ -1,4 +1,5 @@
 {% extends "withoutnav_template.html" %}
+{% from "components/button/macro.njk" import govukButton %}

 {% block per_page_title %}
  Resend verification code
@@ -16,7 +17,11 @@


      <p>
-      <a class="button" href="{{url_for('main.check_and_resend_verification_code')}}" role="button">Resend security code</a>
+        {{ govukButton({
+          "element": "a",
+          "text": "Resend security code",
+          "href": url_for('main.check_and_resend_verification_code')
+        }) }}
      </p>
  </div>
 </div>