Update error pages, create timeout error page, and remove list--boxes…

… as this shouldn't be used anymore (#531) * Update error pages, create timeout error page, and remove list--boxes as this shouldn't be used anymore * Edited Error page content * Remove double hyphen * Correct Will's content for him
ONSdigital · Jul 12, 2019 · f1f9293 · f1f9293
1 parent 18d8162
commit f1f9293
Show file tree

Hide file tree

Showing 10 changed files with 101 additions and 112 deletions.
diff --git a/src/components/lists/_list.scss b/src/components/lists/_list.scss
@@ -48,28 +48,6 @@ $list-inline-spacing: 2rem;
   }
 }
 
-.list--boxes {
-  font-family: monaco, Consolas, 'Lucida Console', monospace;
-  list-style-type: none;
-  padding: 0;
-  margin: 1rem auto;
-  .list__item {
-    border: 1px solid #ccc;
-    display: inline-block;
-    padding: 0.4rem;
-    text-align: center;
-    margin: 0.2rem;
-    background: rgba(255, 255, 255, 0.5);
-    &:first-child {
-      margin-left: 0;
-    }
-    @include mq(m) {
-      padding: 0.5rem 1rem;
-      margin: 0 0.5rem;
-    }
-  }
-}
-
 .list--prefix {
   @extend .list--bare;
   & .list__prefix {

diff --git a/src/patterns/error-status-pages/examples/404-error-with-code/index.njk b/src/patterns/error-status-pages/examples/404-error-with-code/index.njk
@@ -2,6 +2,8 @@
 layout: none
 ---
 {% extends "styles/page-template/_template.njk" %}
+{% from "components/panel/_macro.njk" import onsPanel %}
+
 {% set page = { 
     "title": "Service name",
     "footer": {
@@ -13,57 +15,17 @@ layout: none
         }
     }
 } %}
-{% from "components/panel/_macro.njk" import onsPanel %}
-{% from "components/lists/_macro.njk" import onsList %}
+
 {% block main %}
     <h1>Page not found</h1>
     <p>If you entered a web address, check it is correct.</p>
-    <p>If you pasted the web address, check you copied the entire address.</p>
-    <p>If the web address is correct or you selected a link or button, contact the survey enquiries helpline for further support.</p>
-    <p><strong>Telephone:</strong><br>
-    <a href="tel:0300 1234 931">0300 1234 931</a></p>
-    <p><strong>Opening times:</strong><br>
-    Monday to Friday: 9:00am to 5:00pm</p>
+    <p>If you pasted the web address, check you copied the whole address.</p>
+    <p>If the web address is correct or you selected a link or button, <a href="#">contact us</a> for more help.</p>
 
-    {% call onsPanel({
-            "type": "error",
-            "spacious": "true",
-            "classes": "u-mb-m"
-        })
-    %}
-    <p>To help us resolve the issue, please quote the following reference:</p>
-    {{ 
-        onsList({
-            "classes": 'list--boxes',
-            "itemsList": [
-                {
-                    "text": 'FEF8'
-                },
-                {
-                    "text": 'A838'
-                },
-                {
-                    "text": 'B831'
-                },
-                {
-                    "text": '4E26'
-                }
-            ]
-        })
-    }}
-    <h2 class="u-fs-r--b u-mb-xs u-mt-m">Your system information</h2>
-    {{ 
-        onsList({
-            "classes": 'list--bare',
-            "itemsList": [
-                {
-                    "text": 'Chrome (72.0.3626)'
-                },
-                {
-                    "text": 'Mac OS X (10.14.3)'
-                }
-            ]
-        })
-    }}
+    {% call onsPanel() %}
+        <p>You will need the following reference code when you contact us:
+            <br>
+            <strong class="u-f-mono u-fs-l u-mt-s u-d-b">Q018 45T0 PR09 SOFG</strong>
+        </p>
     {% endcall %}
 {% endblock %}
diff --git a/src/patterns/error-status-pages/examples/404-error/index.njk b/src/patterns/error-status-pages/examples/404-error/index.njk
@@ -16,6 +16,6 @@ layout: none
 {% block main %}
     <h1>Page not found</h1>
     <p>If you entered a web address, check it is correct.</p>
-    <p>If you pasted the web address, check you copied the entire address.</p>
-    <p>If the web address is correct or you selected a link or button, <a href="https://www.ons.gov.uk/aboutus/contactus/surveyenquiries">contact the survey enquiries helpline</a> for further support.</p>
+    <p>If you pasted the web address, check you copied the whole address.</p>
+    <p>If the web address is correct or you selected a link or button, <a href="#">contact us</a> for more help.</p>
 {% endblock %}
diff --git a/src/patterns/error-status-pages/examples/500-error/index.njk b/src/patterns/error-status-pages/examples/500-error/index.njk
@@ -14,7 +14,8 @@ layout: none
     }
 } %}
 {% block main %}
-    <h1>An error has occurred</h1>
-    <p>Sorry, something has gone wrong.</h1>
-    <p>If the problem continues, <a href="https://www.ons.gov.uk/aboutus/contactus/surveyenquiries">contact the survey enquiries helpline</a>.</p>
+    <h1>Sorry, there is a problem with the service</h1>
+    <p>Try again later.</p>
+    <p>If you have started a survey, your answers have been saved.</p>
+    <p><a href="#">Contact us</a> if you need to speak to someone about your survey.</p>
 {% endblock %}
diff --git a/...ges/examples/maintenance-notice/index.njk → ...status-pages/examples/503-error/index.njk b/...ges/examples/maintenance-notice/index.njk → ...status-pages/examples/503-error/index.njk
@@ -15,7 +15,7 @@ layout: none
 } %}
 {% block main %}
     <h1>This service is temporarily unavailable</h1>
-    <p>We're undergoing planned maintenance.</p>
-    <p>You will be able to use the service from 8am on Monday 4 March 2019.</p>
-    <p>You can <a href="#">contact the ONS business surveys helpline</a> if you need a new enrollment code or to speak to someone about your account.</p>
+    <p>We are undergoing planned maintenance.</p>
+    <p>You will be able to use this service again from:<br><strong>9.00am on Monday 19 November 2019</strong></p>
+    <p><a href="#">Contact us</a> if you need to speak to someone about your survey.</p>
 {% endblock %}
diff --git a/src/patterns/error-status-pages/examples/timeout-error/index.njk b/src/patterns/error-status-pages/examples/timeout-error/index.njk
@@ -0,0 +1,29 @@
+---
+layout: none
+---
+{% extends "styles/page-template/_template.njk" %}
+{% from "components/panel/_macro.njk" import onsPanel %}
+
+{% set page = { 
+    "title": "Service name",
+    "footer": {
+        "OGLLink": {
+            "pre": 'All content is available under the',
+            "link": 'Open Government Licence v3.0',
+            "url": 'https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/',
+            "post": ', except where otherwise stated'
+        }
+    }
+} %}
+
+{% block main %}
+    <h1>Your session has timed out due to inactivity</h1>
+
+    {% call onsPanel({
+        "classes": "u-mb-m"
+    }) %}
+        <p>To protect your information we have timed you out.</p>
+    {% endcall %}
+
+    <p>We have saved your progress and you will need to <a href="#">enter your unique code</a> to access the survey again.</p>
+{% endblock %}
diff --git a/src/patterns/error-status-pages/index.njk b/src/patterns/error-status-pages/index.njk
@@ -5,11 +5,13 @@ anchorLinks: true
 ---
 {% from "views/partials/example/_macro.njk" import patternlibExample %}
 {% from "components/lists/_macro.njk" import onsList %}
-Error and status pages tell the user there is a problem with the page they are trying to view.
 
+Error and status pages tell the user there is a problem with the page they are trying to view.
 
 ## How to use this pattern
+
 All error and status pages should:
+
 {{ 
     onsList({
         "itemsList": [
@@ -22,7 +24,9 @@ All error and status pages should:
         ]
     }) 
 }}
+
 All error pages should not:
+
 {{ 
     onsList({
         "itemsList": [
@@ -40,6 +44,7 @@ All error pages should not:
 }}
 
 Contact information should either:
+
 {{ 
     onsList({
         "itemsList": [
@@ -54,7 +59,9 @@ Contact information should either:
 }}
 
 ## 404 error
+
 Use a 404 error page if the user has tried to view a page that does not exist. This could happen if someone:
+
 {{ 
     onsList({
         "itemsList": [
@@ -70,26 +77,33 @@ Use a 404 error page if the user has tried to view a page that does not exist. T
         ]
     }) 
 }}
+
 The page should have:
+
 {{ 
     onsList({
         "itemsList": [
             {
-                "text": "‘Page not found – [service name] – ONS’ as the page <code>title</code>"
+                "text": "‘Page not found – [service name] – Office for National Statistics’ as the page <code>title</code>"
             }
         ]
     }) 
 }}
+
 {{
     patternlibExample({ "path": "patterns/error-status-pages/examples/404-error/index.njk" })
 }}
+
 ### 404 error with reference code
-Use an [error panel](/components/panel#error) to display any reference information your service's customer support staff may require the user to quote during a call.
+
+Use an [error panel](/components/panel#error) to display any reference code your service’s customer support staff may require the user to quote during a call.
+
 {{
     patternlibExample({ "path": "patterns/error-status-pages/examples/404-error-with-code/index.njk" })
 }}
 
 ## 500 Server errors
+
 Use a server error page when there is any kind of unexpected problem with the service.  
 
 All errors should be logged and fixed as soon as possible.  Only display this page for a short period of time.  If the errors cannot be fixed quickly, then disable the service and display a [maintenance notice](#maintenance-notice) page instead.
@@ -99,27 +113,29 @@ The page should have:
     onsList({
         "itemsList": [
             {
-                "text": "‘An error has occurred – [service name] – ONS’ as the page <code>title</code>"
+                "text": "‘An error has occurred – [service name] – Office for National Statistics’ as the page <code>title</code>"
             },
             {
                 "text": "a link to an alternative service that may help the user continue their task (if available)"
             } 
         ]
     }) 
 }}
+
 {{
     patternlibExample({ "path": "patterns/error-status-pages/examples/500-error/index.njk" })
 }}
 
-## Maintenance notice
+### Maintenance notice (503)
+
 Use a maintenance notice page when the service needs to be disabled in order to fix problems or deploy upgrades.  As soon as you know when the service will be available again, update the page to let the user know.
 
 The page should have:
 {{ 
     onsList({
         "itemsList": [
             {
-                "text": "‘This service is temporarily unavailable – [service name] – ONS’ as the page <code>title</code>"
+                "text": "‘This service is temporarily unavailable – [service name] – Office for National Statistics’ as the page <code>title</code>"
             },
             {
                 "text": "the date and time the service will be available (if known)"
@@ -129,15 +145,39 @@ The page should have:
             }, 
             {
                 "text": "a link to an alternative service that may help the user continue their task (if available)"
-            }            
+            }
         ]
     }) 
 }}
+
 {{
-    patternlibExample({ "path": "patterns/error-status-pages/examples/maintenance-notice/index.njk" })
+    patternlibExample({ "path": "patterns/error-status-pages/examples/503-error/index.njk" })
 }}
 
+## Timeout
+
+Use a Timeout page when the user has been timed out of the service due to inactivity.  Explain why the timeout has occured and reassure the user that their progress has been saved. Provide a link to allow them to sign in again.
+
+The page should have:
+{{ 
+    onsList({
+        "itemsList": [
+            {
+                "text": "‘Your session has timed out due to inactivity – [service name] – Office for National Statistics’ as the page <code>title</code>"
+            },
+            {
+                "text": "information why the timeout occured and (if applicable) inform the user their progress has been saved"
+            },
+            {
+                "text": "a link allowing the user to sign in again"
+            }
+        ]
+    }) 
+}}
 
+{{
+    patternlibExample({ "path": "patterns/error-status-pages/examples/timeout-error/index.njk" })
+}}
 
 ## Research on this pattern
 {% from "components/panel/_macro.njk" import onsPanel %}

diff --git a/src/scss/utilities/_typography.scss b/src/scss/utilities/_typography.scss
@@ -69,3 +69,8 @@ h4 {
 .u-lighter {
   color: $color-text-light;
 }
+
+.u-f-mono {
+  font-family: $font-mono;
+  letter-spacing: 0.1em;
+}
diff --git a/src/styles/typography/index.njk b/src/styles/typography/index.njk
@@ -101,12 +101,6 @@ Inline lists should be used to display a horizontal row of links, for example, a
     patternlibExample({"path": "styles/typography/lists/examples/list-inline/index.njk", "componentFolderPath": "components/lists"})
 }}
 
-#### Boxed list
-Used to display a code split into manageable chunks, for example, a reference code to quote during a helpdesk call.
-{{
-    patternlibExample({"path": "styles/typography/lists/examples/list-boxes/index.njk" , "componentFolderPath": "components/lists"})
-}}
-
 ## Icons
 Icons are used to provide affordance to improve user experience. Icons shouldn't be used as decoration and implemented only if there is a user need. We only use icons with text if we have evidence to suggest that it helps the user complete their task.
 

diff --git a/src/styles/typography/lists/examples/list-boxes/index.njk b/src/styles/typography/lists/examples/list-boxes/index.njk