Merge pull request #3208 from alphagov/add-govuk-frontend-backlink

Use GOVUK Frontend component for all back-links

app/assets/stylesheets/components/vendor/govuk-back-link.scss

@@ -1,53 +0,0 @@
-.govuk-back-link {
-
-  @include core-16;
-  color: $text-colour;
-  display: inline-block;
-  position: relative;
-  margin-top: $gutter-half;
-  margin-bottom: $gutter / 3;
-  padding-left: $gutter-half - 1px;
-  border-bottom: 1px solid $text-colour;
-  text-decoration: none;
-
-  &:link,
-  &:visited {
-    color: $text-colour;
-  }
-
-  &:before {
-    display: block;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-color: transparent;
-    -webkit-clip-path: polygon(0% 50%, 100% 100%, 100% 0%);
-    clip-path: polygon(0% 50%, 100% 100%, 100% 0%);
-    border-width: 5px 6px 5px 0;
-    border-right-color: inherit;
-    content: "";
-    position: absolute;
-    top: -1px;
-    bottom: 1px;
-    left: 0;
-    margin: auto;
-  }
-
-  &:after {
-    content: "";
-    position: absolute;
-    top: -$gutter-half;
-    left: -3px;
-    width: 100%;
-    height: 100%;
-    border-style: solid;
-    border-width: $gutter-half $gutter $gutter-half 3px;
-    border-color: transparent;
-  }
-
-  &:focus {
-    &:after {
-      border-color: $yellow
-    }
-  }
-}

app/assets/stylesheets/govuk-frontend/_all.scss

@@ -16,6 +16,7 @@ $govuk-assets-path: "/static/";
 @import 'components/skip-link/_skip-link';
 @import 'components/header/_header';
 @import 'components/footer/_footer';
+@import 'components/back-link/_back-link';
 
 @import "utilities/all";
 @import "overrides/all";

app/assets/stylesheets/main.scss

@@ -71,7 +71,6 @@ $path: '/static/images/';
 @import 'components/vendor/responsive-embed';
 @import 'components/preview-pane';
 @import 'components/task-list';
-@import 'components/vendor/govuk-back-link';
 @import 'components/loading-indicator';
 
 @import 'views/dashboard';

app/templates/components/page-header.html

@@ -1,19 +1,14 @@
+{% from "components/back-link/macro.njk" import govukBackLink %}
+
 {% macro page_header(
   h1,
   back_link=None
 ) %}
 
   {% if back_link %}
-    {{ govuk_back_link(back_link) }}
+    {{ govukBackLink({ "href": back_link }) }}
   {% endif %}
 
   <h1 class="heading-large">{{ h1 }}</h1>
 
 {% endmacro %}
-
-
-{% macro govuk_back_link(back_link) %}
-
-  <a class="govuk-back-link" href="{{ back_link }}">Back</a>
-
-{% endmacro %}

app/templates/views/check/column-errors.html

@@ -3,7 +3,7 @@
 {% 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 govuk_back_link %}
+{% from "components/back-link/macro.njk" import govukBackLink %}
 {% from "components/message-count-label.html" import message_count_label %}
 
 {% set file_contents_header_id = 'file-preview' %}
@@ -19,7 +19,7 @@
 
 {% block maincolumn_content %}
 
-  {{ govuk_back_link(back_link) }}
+  {{ govukBackLink({ "href": back_link }) }}
 
   <div class="bottom-gutter-1-2">
     {% call banner_wrapper(type='dangerous') %}

app/templates/views/check/row-errors.html

@@ -3,7 +3,7 @@
 {% 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 govuk_back_link %}
+{% from "components/back-link/macro.njk" import govukBackLink %}
 {% from "components/message-count-label.html" import message_count_label %}
 
 {% set file_contents_header_id = 'file-preview' %}
@@ -19,7 +19,7 @@
 
 {% block maincolumn_content %}
 
-  {{ govuk_back_link(back_link) }}
+  {{ govukBackLink({ "href": back_link }) }}
 
   <div class="bottom-gutter-1-2">
     {% call banner_wrapper(type='dangerous') %}

app/templates/views/notifications/check.html

@@ -1,7 +1,8 @@
 {% extends "withnav_template.html" %}
 {% from "components/banner.html" import banner_wrapper %}
 {% from "components/message-count-label.html" import message_count_label %}
-{% from "components/page-header.html" import govuk_back_link, page_header %}
+{% from "components/page-header.html" import page_header %}
+{% from "components/back-link/macro.njk" import govukBackLink %}
 
 {% block service_page_title %}
   {{ "Error" if error else "Preview of ‘{}’".format(template.name) }}
@@ -9,7 +10,7 @@
 
 {% block maincolumn_content %}
   {% if template.template_type == 'letter' and current_service.trial_mode %}
-    {{ govuk_back_link(back_link) }}
+    {{ govukBackLink({ "href": back_link }) }}
     {% set error = 'trial-mode-letters' %}
     <div class="bottom-gutter">
       {% call banner_wrapper(type='dangerous') %}
@@ -21,7 +22,7 @@
       {% endcall %}
     </div>
   {% elif error == 'not-allowed-to-send-to' %}
-    {{ govuk_back_link(back_link) }}
+    {{ govukBackLink({ "href": back_link }) }}
     <div class="bottom-gutter">
       {% call banner_wrapper(type='dangerous') %}
         {% with
@@ -35,7 +36,7 @@
       {% endcall %}
     </div>
   {% elif error == 'too-many-messages' %}
-    {{ govuk_back_link(back_link) }}
+    {{ govukBackLink({ "href": back_link }) }}
     <div class="bottom-gutter">
       {% call banner_wrapper(type='dangerous') %}
         {% include "partials/check/too-many-messages.html" %}
@@ -43,7 +44,7 @@
     </div>
   {% elif error == 'message-too-long' %}
     {# the only row_errors we can get when sending one off messages is that the message is too long #}
-    {{ govuk_back_link(back_link) }}
+    {{ govukBackLink({ "href": back_link }) }}
     <div class="bottom-gutter">
       {% call banner_wrapper(type='dangerous') %}
         {% include "partials/check/message-too-long.html" %}
@@ -51,7 +52,7 @@
     </div>
   {% elif letter_too_long %}
     {% set error = 'letter-too-long' %}
-    {{ govuk_back_link(back_link) }}
+    {{ govukBackLink({ "href": back_link }) }}
     <div class="bottom-gutter">
       {% call banner_wrapper(type='dangerous') %}
           {% include "partials/check/letter-too-long.html" %}

app/templates/views/uploads/preview.html

@@ -3,7 +3,7 @@
 {% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/radios.html" import radios %}
-{% from "components/page-header.html" import govuk_back_link %}
+{% from "components/back-link/macro.njk" import govukBackLink %}
 {% from "components/file-upload.html" import file_upload %}
 
 {% block service_page_title %}
@@ -11,7 +11,7 @@
 {% endblock %}
 
 {% block maincolumn_content %}
-  {{ govuk_back_link(url_for('main.upload_letter', service_id=current_service.id)) }}
+  {{ govukBackLink({ "href": url_for('main.upload_letter', service_id=current_service.id) }) }}
 
   {% if status == 'invalid' and message %}
     {% include "partials/check/letter-validation-failed-banner.html" %}

gulpfile.js

@@ -62,7 +62,8 @@ const copy = {
         'template',
         'skip-link',
         'header',
-        'footer'
+        'footer',
+        'back-link'
       ];
       let done = 0;