Merge pull request #2197 from alphagov/iterate-error-pages

Iterate design and copy for error pages

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

@@ -8,4 +8,3 @@ $is-print: true;
 @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/_warning-text";

app/assets/stylesheets/error-page.scss

@@ -6,5 +6,4 @@ $govuk-use-legacy-palette: false;
 @import "govuk_publishing_components/components/_cookie-banner";
 @import "govuk_publishing_components/components/_button";
 @import "govuk_publishing_components/components/_feedback";
-@import "govuk_publishing_components/components/_warning-text";
 @import "govuk_publishing_components/components/_action-link";

app/views/root/400.html.erb

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

app/views/root/401.html.erb

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

app/views/root/403.html.erb

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

app/views/root/404.html.erb

@@ -1,8 +1,6 @@
 <%= render partial: "error_page", locals: {
-    title: "Page not found",
     heading: "Page not found",
-    intro: '<p>If you entered a web address please check it was correct.</p>
-
-            <p>You can <a class="govuk-link" href="/">browse from the homepage</a> to find the information you need.</p>',
+    intro: '<p>If you entered a web address, check it is correct.</p>
+      <p>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
 } %>

app/views/root/405.html.erb

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

app/views/root/406.html.erb

@@ -1,6 +1,6 @@
 <%= render partial: "error_page", locals: {
-    title: "Page not found",
-    heading: "The page you are looking for can't be found",
-    intro: '<p>Please check that you have entered the correct web address, or try using the search box above or explore <a class="govuk-link" href="/">GOV.UK</a> to find the information you need.</p>',
+    heading: "The page you’re looking for cannot be found",
+    intro: '<p>If you entered a web address, check it is correct.</p>
+      <p>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
 } %>

app/views/root/410.html.erb

@@ -1,7 +1,7 @@
 <%= render partial: "error_page", locals: {
-    title: "Page no longer here",
-    heading: "The page you are looking for is no longer here",
+    heading: "The page you’re looking for is no longer here",
     intro: '<p>It may have been moved or replaced.</p>
-      <p>Please check that you have entered the correct web address, or try using the search box above or explore <a class="govuk-link" href="/">GOV.UK</a> to find the information you need.</p>',
+      <p>If you entered a web address, check it is correct.</p>
+      <p>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
 } %>

app/views/root/422.html.erb

@@ -1,7 +1,5 @@
 <%= render partial: "error_page", locals: {
-    title: "Sorry, there was a problem",
-    heading: "Sorry, there was a problem",
-    intro: '<p>We cannot show you the page you were expecting.</p>
-      <p>Go back and try again.</p>',
+    heading: "Sorry, there is a problem",
+    intro: '<p>Go back and change the information you entered.</p>',
     status_code: 422
 } %>

app/views/root/429.html.erb

@@ -1,7 +1,6 @@
 <%= render partial: "error_page", locals: {
-    title: "Sorry, there was a problem",
-    heading: "Sorry, there was a problem",
-    intro: '<p>You have made too many requests to this page.</p>
+    heading: "Sorry, there is a problem",
+    intro: '<p>There have been too many attempts to access this page.</p>
       <p>Try again later.</p>',
     status_code: 429
 } %>

app/views/root/500.html.erb

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

app/views/root/501.html.erb

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

app/views/root/503.html.erb

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

app/views/root/504.html.erb

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

app/views/root/_error_page.html.erb

@@ -1,5 +1,4 @@
-<% title = "Sorry, we're experiencing technical difficulties (#{status_code} error)" unless local_assigns.include?(:title) %>
-<% content_for :title, "#{title} - GOV.UK" %>
+<% content_for :title, "#{heading} - GOV.UK" %>
 
 <% content_for :head do %>
   <%= stylesheet_link_tag "error-page", media: "screen" %>
@@ -22,12 +21,10 @@
   <div class="article-container">
     <article role="article" class="group">
       <div class="inner">
-        <%= render "govuk_publishing_components/components/warning_text", {
-          text: "Status code: #{status_code}"
-        } %>
-
         <%= raw intro %>
         <p>You can <a class="govuk-link" href="/coronavirus">find coronavirus information</a> on GOV.UK.</p>
+        <br/>
+        <pre>Status code: <%= status_code %></pre>
       </div>
     </article>
   </div>

test/integration/templates/error_4xx_test.rb

@@ -20,7 +20,7 @@ class Error4XXTest < ActionDispatch::IntegrationTest
 
       within "#wrapper" do
         assert page.has_selector?("h1", text: "Page not found")
-        assert page.has_selector?(".govuk-warning-text__text", text: "Status code: 404", visible: :all)
+        assert page.has_selector?("pre", text: "Status code: 404", visible: :all)
       end
 
       within "footer" do

test/integration/templates/error_5xx_test.rb

@@ -20,7 +20,7 @@ class Error5XXTest < ActionDispatch::IntegrationTest
 
       within "#wrapper" do
         assert page.has_selector?("h1", text: "Sorry, we're experiencing technical difficulties")
-        assert page.has_selector?(".govuk-warning-text__text", text: "Status code: 500", visible: :all)
+        assert page.has_selector?("pre", text: "Status code: 500", visible: :all)
       end
 
       within "footer" do