From 44492abef79256042b9ef904aa6e8d5aec1c9fbd Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Thu, 28 Nov 2019 13:49:25 +0000 Subject: [PATCH 1/4] Add Sass for GOVUK Frontend backlink --- app/assets/stylesheets/govuk-frontend/_all.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/app/assets/stylesheets/govuk-frontend/_all.scss b/app/assets/stylesheets/govuk-frontend/_all.scss index 56cc5fa0f..760d837cc 100644 --- a/app/assets/stylesheets/govuk-frontend/_all.scss +++ b/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"; From ff53b9f34f9f648111660c97a0da8b1bd097f51b Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Fri, 29 Nov 2019 08:58:14 +0000 Subject: [PATCH 2/4] Move back-link component from GOVUK Frontend `node_modules` isn't included on live so all macros need copying across into the repo' code. This adds the back-link component to the list of macros to be copied across in `gulpfile.js`. It also adds the files copied across as a result of running the frontend build into the repo'. --- gulpfile.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/gulpfile.js b/gulpfile.js index 700d297cb..bd9f27a5d 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -62,7 +62,8 @@ const copy = { 'template', 'skip-link', 'header', - 'footer' + 'footer', + 'back-link' ]; let done = 0; From e5bc33be8495147e9c4cdb89e6f08047ed0d7602 Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Fri, 29 Nov 2019 09:02:16 +0000 Subject: [PATCH 3/4] Replace all existing back-links with component Includes: - all existing macros - all imports for the existing macros --- app/templates/components/page-header.html | 11 +++-------- app/templates/views/check/column-errors.html | 4 ++-- app/templates/views/check/row-errors.html | 4 ++-- app/templates/views/notifications/check.html | 13 +++++++------ app/templates/views/uploads/preview.html | 4 ++-- 5 files changed, 16 insertions(+), 20 deletions(-) diff --git a/app/templates/components/page-header.html b/app/templates/components/page-header.html index bdf2f4c4f..e47c43afe 100644 --- a/app/templates/components/page-header.html +++ b/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 }}

{% endmacro %} - - -{% macro govuk_back_link(back_link) %} - - Back - -{% endmacro %} diff --git a/app/templates/views/check/column-errors.html b/app/templates/views/check/column-errors.html index c193cfa28..976c7a17d 100644 --- a/app/templates/views/check/column-errors.html +++ b/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 }) }}
{% call banner_wrapper(type='dangerous') %} diff --git a/app/templates/views/check/row-errors.html b/app/templates/views/check/row-errors.html index 4a2f5bf1d..c047d0ead 100644 --- a/app/templates/views/check/row-errors.html +++ b/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 }) }}
{% call banner_wrapper(type='dangerous') %} diff --git a/app/templates/views/notifications/check.html b/app/templates/views/notifications/check.html index 27ff1d929..259063021 100644 --- a/app/templates/views/notifications/check.html +++ b/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' %}
{% call banner_wrapper(type='dangerous') %} @@ -21,7 +22,7 @@ {% endcall %}
{% elif error == 'not-allowed-to-send-to' %} - {{ govuk_back_link(back_link) }} + {{ govukBackLink({ "href": back_link }) }}
{% call banner_wrapper(type='dangerous') %} {% with @@ -35,7 +36,7 @@ {% endcall %}
{% elif error == 'too-many-messages' %} - {{ govuk_back_link(back_link) }} + {{ govukBackLink({ "href": back_link }) }}
{% call banner_wrapper(type='dangerous') %} {% include "partials/check/too-many-messages.html" %} @@ -43,7 +44,7 @@
{% 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 }) }}
{% call banner_wrapper(type='dangerous') %} {% include "partials/check/message-too-long.html" %} @@ -51,7 +52,7 @@
{% elif letter_too_long %} {% set error = 'letter-too-long' %} - {{ govuk_back_link(back_link) }} + {{ govukBackLink({ "href": back_link }) }}
{% call banner_wrapper(type='dangerous') %} {% include "partials/check/letter-too-long.html" %} diff --git a/app/templates/views/uploads/preview.html b/app/templates/views/uploads/preview.html index e19ab1800..718cf8c6d 100644 --- a/app/templates/views/uploads/preview.html +++ b/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" %} From 6b7e45ca1b0b6a4442271f52365c32aca4019af5 Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Thu, 28 Nov 2019 13:47:39 +0000 Subject: [PATCH 4/4] Remove existing Sass for backlink --- .../components/vendor/govuk-back-link.scss | 53 ------------------- app/assets/stylesheets/main.scss | 1 - 2 files changed, 54 deletions(-) delete mode 100644 app/assets/stylesheets/components/vendor/govuk-back-link.scss diff --git a/app/assets/stylesheets/components/vendor/govuk-back-link.scss b/app/assets/stylesheets/components/vendor/govuk-back-link.scss deleted file mode 100644 index f76ebdc63..000000000 --- a/app/assets/stylesheets/components/vendor/govuk-back-link.scss +++ /dev/null @@ -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 - } - } -} diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss index d6b72051b..b1cb870aa 100644 --- a/app/assets/stylesheets/main.scss +++ b/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';