Merge pull request #2440 from alphagov/update-error-page-layout

Update error pages to use public layout template

README.md

@@ -63,4 +63,4 @@ development VM it's possible to increase the `proxy_read_timeout` value in
 
 Tests can run in browser at `/specs`
 
-Or in terminal to run only the jasmine tests you can use `RAILS_ENV=test bundle exec rake jasmine:ci`
+Or in terminal to run only the jasmine tests you can use `RAILS_ENV=test bundle exec rake jasmine:ci` or in Docker `govuk-docker run -e RAILS_ENV=test static-lite bundle exec rake jasmine:ci`

app/assets/javascripts/application.js

@@ -1 +1,17 @@
-//= require header-footer-only
+//= require govuk_publishing_components/dependencies
+
+//= require govuk_publishing_components/lib/cookie-functions
+//= require govuk_publishing_components/lib/header-navigation
+//= require govuk_publishing_components/lib/track-click
+
+//= require analytics
+
+//= require govuk_publishing_components/components/cookie-banner
+//= require govuk_publishing_components/components/layout-header
+//= require govuk_publishing_components/components/feedback
+
+//= require modules/global-bar
+//= require modules/cross-domain-tracking
+
+//= require global-bar-init
+//= require surveys

app/assets/stylesheets/application-print.scss

@@ -1,5 +1,14 @@
-// PRINT STYLESHEET COMPILER
-// OUTPUT
-// The following files and inline CSS will form the output of print.css
-@import "header-footer-only-print";
-@import "helpers/core-print";
+// is-print is used by govuk_frontend_toolkit to alter the printed font-stack
+$is-print: true;
+
+@import "govuk_publishing_components/govuk_frontend_support";
+@import "govuk_publishing_components/component_support";
+
+@import "govuk_publishing_components/components/print/button";
+@import "govuk_publishing_components/components/print/feedback";
+@import "govuk_publishing_components/components/print/layout-footer";
+@import "govuk_publishing_components/components/print/layout-header";
+@import "govuk_publishing_components/components/print/search";
+@import "govuk_publishing_components/components/print/skip-link";
+
+@import "helpers/print-base";

app/assets/stylesheets/application.scss

@@ -1,9 +1,16 @@
-$govuk-compatibility-govuktemplate: true;
-$govuk-use-legacy-palette: false;
-
+@import "govuk_publishing_components/govuk_frontend_support";
 @import "govuk_publishing_components/component_support";
-@import "header-footer-only";
 
-// styles
-@import "helpers/organisations";
-@import "helpers/wrapper";
+@import "govuk_publishing_components/components/action-link";
+@import "govuk_publishing_components/components/button";
+@import "govuk_publishing_components/components/cookie-banner";
+@import "govuk_publishing_components/components/feedback";
+@import "govuk_publishing_components/components/input";
+@import "govuk_publishing_components/components/layout-footer";
+@import "govuk_publishing_components/components/layout-for-public";
+@import "govuk_publishing_components/components/layout-header";
+@import "govuk_publishing_components/components/search";
+@import "govuk_publishing_components/components/skip-link";
+
+@import "components/emergency-banner";
+@import "components/global-bar";

app/assets/stylesheets/error-page-print.scss

@@ -1,10 +1,6 @@
-$govuk-compatibility-govuktemplate: true;
-$govuk-use-legacy-palette: false;
-
 // is-print is used by govuk_frontend_toolkit to alter the printed font-stack
 $is-print: true;
 
 @import "govuk_publishing_components/govuk_frontend_support";
-@import "govuk_publishing_components/component_support";
-@import "govuk_publishing_components/components/print/button";
-@import "govuk_publishing_components/components/print/feedback";
+
+@import "govuk_publishing_components/components/print/title";

app/assets/stylesheets/error-page.scss

@@ -1,9 +1,2 @@
-$govuk-compatibility-govuktemplate: true;
-$govuk-use-legacy-palette: false;
-
 @import "govuk_publishing_components/govuk_frontend_support";
-@import "govuk_publishing_components/component_support";
-@import "govuk_publishing_components/components/cookie-banner";
-@import "govuk_publishing_components/components/button";
-@import "govuk_publishing_components/components/feedback";
-@import "govuk_publishing_components/components/action-link";
+@import "govuk_publishing_components/components/title";

app/controllers/root_controller.rb

@@ -8,10 +8,26 @@ class RootController < ApplicationController
   caches_page :template
 
   NON_LAYOUT_TEMPLATES = %w[
+    400
+    401
+    403
+    404
+    405
+    406
+    410
+    422
+    429
+    500
+    501
+    502
+    503
+    504
     campaign
+    scheduled_maintenance
     print
     proposition_menu
   ].freeze
+
   def template
     if NON_LAYOUT_TEMPLATES.include?(params[:template])
       render action: params[:template]

app/views/root/400.html.erb

@@ -1,5 +1,5 @@
 <%= render partial: "error_page", locals: {
     heading: "Sorry, there is a problem",
     intro: '<p class="govuk-body">Go back and change the information you entered.</p>',
-    status_code: 400
+    status_code: 400,
 } %>

app/views/root/401.html.erb

@@ -1,5 +1,5 @@
 <%= render partial: "error_page", locals: {
     heading: "You are not permitted to see this page",
     intro: '<p class="govuk-body">This page is restricted to certain users only.</p>',
-    status_code: 401
+    status_code: 401,
 } %>

app/views/root/403.html.erb

@@ -1,5 +1,5 @@
 <%= render partial: "error_page", locals: {
     heading: "You are not permitted to see this page",
     intro: '<p class="govuk-body">This page is restricted to certain users only.</p>',
-    status_code: 403
+    status_code: 403,
 } %>

app/views/root/404.html.erb

@@ -2,5 +2,5 @@
     heading: "Page not found",
     intro: '<p class="govuk-body">If you entered a web address, check it is correct.</p>
       <p class="govuk-body">You can <a class="govuk-link" href="/">browse from the homepage</a> or use the search box above to find the information you need.</p>',
-    status_code: 404
+    status_code: 404,
 } %>

app/views/root/405.html.erb

@@ -1,5 +1,5 @@
 <%= render partial: "error_page", locals: {
     heading: "You are not allowed to do this action",
     intro: '<p class="govuk-body">This page does not support the action you requested.</p>',
-    status_code: 405
+    status_code: 405,
 } %>

app/views/root/406.html.erb

@@ -2,5 +2,5 @@
     heading: "The page you’re looking for cannot be found",
     intro: '<p class="govuk-body">If you entered a web address, check it is correct.</p>
       <p class="govuk-body">You can <a class="govuk-link" href="/">browse from the homepage</a> or use the search box above to find the information you need.</p>',
-    status_code: 406
+    status_code: 406,
 } %>

app/views/root/410.html.erb

@@ -3,5 +3,5 @@
     intro: '<p class="govuk-body">It may have been moved or replaced.</p>
       <p class="govuk-body">If you entered a web address, check it is correct.</p>
       <p class="govuk-body">You can <a class="govuk-link" href="/">browse from the homepage</a> or use the search box above to find the information you need.</p>',
-    status_code: 410
+    status_code: 410,
 } %>

app/views/root/422.html.erb

@@ -1,5 +1,5 @@
 <%= render partial: "error_page", locals: {
     heading: "Sorry, there is a problem",
     intro: '<p class="govuk-body">Go back and change the information you entered.</p>',
-    status_code: 422
+    status_code: 422,
 } %>

app/views/root/429.html.erb

@@ -2,5 +2,5 @@
     heading: "Sorry, there is a problem",
     intro: '<p class="govuk-body">There have been too many attempts to access this page.</p>
       <p class="govuk-body">Try again later.</p>',
-    status_code: 429
+    status_code: 429,
 } %>

app/views/root/500.html.erb

@@ -1,5 +1,5 @@
 <%= render partial: "error_page", locals: {
-  heading: "Sorry, we're experiencing technical difficulties",
+  heading: "Sorry, we’re experiencing technical difficulties",
   intro: '<p class="govuk-body">Please try again in a few moments.</p>',
-  status_code: 500
+  status_code: 500,
 } %>

app/views/root/501.html.erb

@@ -1,5 +1,5 @@
 <%= render partial: "error_page", locals: {
-  heading: "Sorry, we're experiencing technical difficulties",
+  heading: "Sorry, we’re experiencing technical difficulties",
   intro: '<p class="govuk-body">Please try again in a few moments.</p>',
-  status_code: 501
+  status_code: 501,
 } %>

app/views/root/502.html.erb

@@ -1,5 +1,5 @@
 <%= render partial: "error_page", locals: {
-  heading: "Sorry, we're experiencing technical difficulties",
+  heading: "Sorry, we’re experiencing technical difficulties",
   intro: '<p class="govuk-body">Please try again in a few moments.</p>',
-  status_code: 502
+  status_code: 502,
 } %>

app/views/root/503.html.erb

@@ -1,5 +1,5 @@
 <%= render partial: "error_page", locals: {
-  heading: "Sorry, we're experiencing technical difficulties",
+  heading: "Sorry, we’re experiencing technical difficulties",
   intro: '<p class="govuk-body">Please try again in a few moments.</p>',
-  status_code: 503
+  status_code: 503,
 } %>

app/views/root/504.html.erb

@@ -1,5 +1,5 @@
 <%= render partial: "error_page", locals: {
-  heading: "Sorry, we're experiencing technical difficulties",
+  heading: "Sorry, we’re experiencing technical difficulties",
   intro: '<p class="govuk-body">Please try again in a few moments.</p>',
-  status_code: 504
+  status_code: 504,
 } %>

app/views/root/_error_page.html.erb

@@ -1,37 +1,40 @@
-<% content_for :title, "#{heading} - GOV.UK" %>
-
 <% content_for :head do %>
   <%= stylesheet_link_tag "error-page", media: "screen" %>
   <%= stylesheet_link_tag "error-page-print", media: "print" %>
 <% end %>
 
-<% content_for :body_end do %>
-  <%= javascript_include_tag "error-page" %>
-<% end %>
-
-<% content_for :body_classes, "mainstream error" %>
+<% if @emergency_banner then
+    emergency_banner = render "components/emergency_banner", {
+      campaign_class: @emergency_banner.campaign_class,
+      heading: @emergency_banner.heading,
+      link: @emergency_banner.link,
+      link_text: @emergency_banner.link_text,
+      short_description: @emergency_banner.short_description,
+    }
+  end
+  user_satisfaction_survey = '<div id="user-satisfaction-survey-container"></div>'
+  global_bar = render "components/global_bar"
+%>
 
-<% content_for :wrapper_content do %>
-  <main id="content" role="main" class="govuk-main-wrapper govuk-main-wrapper--l">
-    <div class="govuk-grid-row">
-      <div class="govuk-grid-column-two-thirds">
-        <%= render "govuk_publishing_components/components/title", {
-          title: heading,
-          margin_top: 0,
-        } %>
-        <%= raw intro %>
-        <p class="govuk-body">You can <a class="govuk-link" href="/coronavirus">find coronavirus information</a> on GOV.UK.</p>
-        <br/>
-        <pre>Status code: <%= status_code %></pre>
-      </div>
+<%= render "govuk_publishing_components/components/layout_for_public", {
+  emergency_banner: emergency_banner,
+  full_width: false,
+  global_bar: user_satisfaction_survey + global_bar,
+  title: "#{heading} - GOV.UK",
+} do %>
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+      <%= render "govuk_publishing_components/components/title", {
+        title: heading,
+        margin_top: 0,
+      } %>
+      <%= raw intro %>
+      <p class="govuk-body">You can <a class="govuk-link" href="/coronavirus">find coronavirus information</a> on GOV.UK.</p>
+      <pre class="govuk-!-margin-top-8">Status code: <%= status_code %></pre>
     </div>
-  </main>
-
-  <%= render "govuk_publishing_components/components/feedback" %>
-
-  <script type="text/javascript">
-    window.httpStatusCode = '<%= status_code %>';
+  </div>
+  <script>
+    window.httpStatusCode = '<%= status_code %>'
   </script>
 <% end %>
 
-<%= render partial: 'base', locals: { hide_account_navigation: true } %>

app/views/root/scheduled_maintenance.html.erb

@@ -2,12 +2,12 @@
 # This view is fetched by Puppet so that the loadbalancer can serve a nice
 # error when it's put into maintenance mode (to switch off the backend).
 %>
-<%= render partial: 'error_page', locals: {
+<%= render partial: "error_page", locals: {
   status_code: 503,
-  title: 'Scheduled maintenance',
-  heading: 'GOV.UK publishing tools are currently unavailable due to scheduled maintenance',
-  intro: '<p>Contact the GOV.UK lead (Single Point Of Contact) for your department or agency if you need to publish something in an <a href="https://www.gov.uk/guidance/contact-the-government-digital-service/how-to-contact-gds#emergency-support-requests">emergency</a>.</p>
+  title: "Scheduled maintenance",
+  heading: "GOV.UK publishing tools are currently unavailable due to scheduled maintenance",
+  intro: "<p class='govuk-body'>Contact the GOV.UK lead (Single Point Of Contact) for your department or agency if you need to publish something in an <a href='https://www.gov.uk/guidance/contact-the-government-digital-service/how-to-contact-gds#emergency-support-requests' class='govuk-link'>emergency</a>.</p>
 
-    <p><a href="https://status.publishing.service.gov.uk/">The GOV.UK status page</a> has more information about the scheduled maintenance.</p>',
+    <p class='govuk-body'><a class='govuk-link' href='https://status.publishing.service.gov.uk/'>The GOV.UK status page</a> has more information about the scheduled maintenance.</p>",
 }
 %>

test/integration/templates/error_4xx_test.rb

@@ -4,28 +4,27 @@ class Error4XXTest < ActionDispatch::IntegrationTest
   should "render the 404 template" do
     visit "/templates/404.html.erb"
 
-    assert page.has_selector?("body.mainstream.error")
     within "head", visible: :all do
       assert page.has_selector?("title", text: "Page not found - GOV.UK", visible: :all)
       assert page.has_selector?("link[href$='application.css']", visible: :all)
     end
 
-    within "body.mainstream.error" do
-      within "header#global-header" do
+    within "body" do
+      within "header.gem-c-layout-header.govuk-header" do
         assert page.has_selector?("form#search")
       end
 
       assert page.has_selector?("#global-cookie-message")
       assert page.has_selector?("#user-satisfaction-survey-container")
 
-      within "#wrapper" do
+      within "#content" do
         assert page.has_selector?("h1", text: "Page not found")
         assert page.has_selector?("pre", text: "Status code: 404", visible: :all)
       end
 
       within "footer" do
-        assert page.has_selector?(".footer-categories")
-        assert page.has_selector?(".footer-meta")
+        assert page.has_selector?(".govuk-footer__navigation")
+        assert page.has_selector?(".govuk-footer__meta")
       end
     end
 

test/integration/templates/error_5xx_test.rb

@@ -4,28 +4,27 @@ class Error5XXTest < ActionDispatch::IntegrationTest
   should "render the 500 template" do
     visit "/templates/500.html.erb"
 
-    assert page.has_selector?("body.mainstream.error")
     within "head", visible: :all do
-      assert page.has_selector?("title", text: "Sorry, we're experiencing technical difficulties - GOV.UK", visible: :all)
+      assert page.has_selector?("title", text: "Sorry, we’re experiencing technical difficulties - GOV.UK", visible: :all)
       assert page.has_selector?("link[href$='application.css']", visible: :all)
     end
 
-    within "body.mainstream.error" do
-      within "header#global-header" do
+    within "body" do
+      within "header.gem-c-layout-header.govuk-header" do
         assert page.has_selector?("form#search")
       end
 
       assert page.has_selector?("#global-cookie-message")
       assert page.has_selector?("#user-satisfaction-survey-container")
 
-      within "#wrapper" do
-        assert page.has_selector?("h1", text: "Sorry, we're experiencing technical difficulties")
+      within "#content" do
+        assert page.has_selector?("h1", text: "Sorry, we’re experiencing technical difficulties")
         assert page.has_selector?("pre", text: "Status code: 500", visible: :all)
       end
 
       within "footer" do
-        assert page.has_selector?(".footer-categories")
-        assert page.has_selector?(".footer-meta")
+        assert page.has_selector?(".govuk-footer__navigation")
+        assert page.has_selector?(".govuk-footer__meta")
       end
     end