88 error pages (#238)

* allow numbers in sub nav links
* remove bottom margin from subnav list
* error and status pages documentation and examples
* added 404 error with call reference code
* updated content design

lib/helpers/sub-navigation-helper.js

@@ -17,8 +17,15 @@ export function subNavigationHelper({ pageInfo, anchorLinks }) {
       const raw = fs.readFileSync(path, 'utf8');
 
       const matches = raw
-        .match(/(?<=\n## )[A-Za-z ]*/g)
-        .filter(match => !match.toLowerCase().includes('research on this') && !match.toLowerCase().includes('design system forum'));
+        .match(/(?<=\n## )[A-Za-z0-9 ]*/g)
+        .filter(
+          match =>
+            !match.toLowerCase().includes('research on this') &&
+            !match.toLowerCase().includes('design system forum') &&
+            !match.toLowerCase().includes('when to use this') &&
+            !match.toLowerCase().includes('how to use this') &&
+            !match.toLowerCase().includes('variants')
+        );
 
       const anchors = matches.map(match => ({
         title: match,

src/patterns/error-status-pages/examples/404-error-with-code/index.njk

@@ -0,0 +1,70 @@
+---
+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'
+        }
+    }
+} %}
+{% from "components/panel/_macro.njk" import onsPanel %}
+{% from "components/lists/_macro.njk" import onsList %}
+{% block content %}
+    <h1 class="u-fs-l">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>
+
+    {% 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',
+            "items": [
+                {
+                    "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',
+            "items": [
+                {
+                    "text": 'Chrome (72.0.3626)'
+                },
+                {
+                    "text": 'Mac OS X (10.14.3)'
+                }
+            ]
+        })
+    }}
+    {% endcall %}
+{% endblock %}

src/patterns/error-status-pages/examples/404-error/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 %}
+    <h1 class="u-fs-l">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>
+{% endblock %}

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 %}
+    <h1 class="u-fs-l">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>
+{% endblock %}

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 %}
+    <h1 class="u-fs-l">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>
+{% endblock %}

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 the <code>h1</code> 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 <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.
+{{
+    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 <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
+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 <code>title</code>"
+            },
+            {
+                "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 <a href="https://github.com/ONSdigital/design-system/issues/237" target="_blank">Design System forum</a>.
+{% endcall %}
+
+## Design System forum
+
+[Discuss 'Error and status pages' on Github](https://github.com/ONSdigital/design-system/issues/237)

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;