If you entered a web address, check it is correct.
+If you pasted the web address, check you copied the entire address.
+If the web address is correct or you selected a link or button, contact the survey enquiries helpline for further support.
+Telephone:
+ 0300 1234 931
Opening times:
+ Monday to Friday: 9:00am to 5:00pm
To help us resolve the issue, please quote the following reference:
+ {{ + onsList({ + "classes": 'list--boxes', + "items": [ + { + "text": 'FEF8' + }, + { + "text": 'A838' + }, + { + "text": 'B831' + }, + { + "text": '4E26' + } + ] + }) + }} +If you entered a web address, check it is correct.
+If you pasted the web address, check you copied the entire address.
+If the web address is correct or you selected a link or button, contact the survey enquiries helpline for further support.
+{% 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 new file mode 100644 index 0000000000..ecc159e4ab --- /dev/null +++ b/src/patterns/error-status-pages/examples/500-error/index.njk @@ -0,0 +1,21 @@ +--- +layout: none +--- +{% extends "styles/page-template/_template.njk" %} +{% set page = { + "cdn": "v2.0.0", + "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 content %} +Sorry, something has gone wrong. +
If the problem continues, contact the survey enquiries helpline.
+{% endblock %} diff --git a/src/patterns/error-status-pages/examples/maintenance-notice/index.njk b/src/patterns/error-status-pages/examples/maintenance-notice/index.njk new file mode 100644 index 0000000000..de0445d807 --- /dev/null +++ b/src/patterns/error-status-pages/examples/maintenance-notice/index.njk @@ -0,0 +1,22 @@ +--- +layout: none +--- +{% extends "styles/page-template/_template.njk" %} +{% set page = { + "cdn": "v2.0.0", + "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 content %} +We're undergoing planned maintenance.
+You will be able to use the service from 8am on Monday 4 March 2019.
+You can contact the ONS business surveys helpline if you need a new enrollment code or to speak to someone about your account.
+{% endblock %} diff --git a/src/patterns/error-status-pages/index.njk b/src/patterns/error-status-pages/index.njk new file mode 100644 index 0000000000..94dcf16bb6 --- /dev/null +++ b/src/patterns/error-status-pages/index.njk @@ -0,0 +1,150 @@ +--- +title: Error and status pages +group: Pages +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. + + +## How to use this pattern +All error and status pages should: +{{ + onsList({ + "items": [ + { + "text": "summarise the problem in theh1 heading"
+ },
+ {
+ "text": "be clear and concise, and not blame the user"
+ }
+ ]
+ })
+}}
+All error pages should not:
+{{
+ onsList({
+ "items": [
+ {
+ "text": "have breadcrumbs"
+ },
+ {
+ "text": "display vague terms or jargon like '500', '404', 'bad request' or ‘we are experiencing technical difficulties’"
+ },
+ {
+ "text": "use red text to warn people"
+ }
+ ]
+ })
+}}
+
+Contact information should either:
+{{
+ onsList({
+ "items": [
+ {
+ "text": "be a link to a specific page that includes numbers and opening times, or"
+ },
+ {
+ "text": "include all numbers and opening times"
+ }
+ ]
+ })
+}}
+
+## 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({
+ "items": [
+ {
+ "text": "enters a URL incorrectly"
+ },
+ {
+ "text": "enters a URL for a page that does not exist"
+ },
+ {
+ "text": "selects a link or button that takes them to a page that does not exist"
+ }
+ ]
+ })
+}}
+The page should have:
+{{
+ onsList({
+ "items": [
+ {
+ "text": "‘Page not found – [service name] – ONS’ as the page title"
+ }
+ ]
+ })
+}}
+{{
+ 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.
+{{
+ 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.
+
+The page should have:
+{{
+ onsList({
+ "items": [
+ {
+ "text": "‘An error has occurred – [service name] – ONS’ as the page title"
+ },
+ {
+ "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
+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({
+ "items": [
+ {
+ "text": "‘This service is temporarily unavailable – [service name] – ONS’ as the page title"
+ },
+ {
+ "text": "the date and time the service will be available (if known)"
+ },
+ {
+ "text": "contact information (if it exists) that will help meet a user need"
+ },
+ {
+ "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" })
+}}
+
+
+
+## Research on this pattern
+{% from "components/panel/_macro.njk" import onsPanel %}
+{% call onsPanel() %}
+ If you have conducted any user research using this pattern, please feed back your findings via the Design System forum.
+{% endcall %}
+
+## Design System forum
+
+[Discuss 'Error and status pages' on Github](https://github.com/ONSdigital/design-system/issues/237)
diff --git a/src/views/partials/sub-navigation/_sub-navigation.scss b/src/views/partials/sub-navigation/_sub-navigation.scss
index b62db6da95..cdfbd991cd 100644
--- a/src/views/partials/sub-navigation/_sub-navigation.scss
+++ b/src/views/partials/sub-navigation/_sub-navigation.scss
@@ -22,6 +22,7 @@
}
&__sub-items {
+ margin: 0;
padding: 0 0 0 1rem;
list-style: none;
font-weight: normal;