Merge pull request #936 from hmrc/Error-pages

Updated documentation and examples

CHANGELOG.md

@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
 ### Updated
+- Documentation and examples for page not found, service unavailable and there is a problem with the service [#936](https://github.com/hmrc/assets-frontend/pull/936)
 - Updated notification badge CSS, code and examples [#934](https://github.com/hmrc/assets-frontend/pull/934)
 - Fixed a typo in open links in a new window or tab page [#935](https://github.com/hmrc/assets-frontend/pull/935)
 - Fixed a typo in technical problem page [#933](https://github.com/hmrc/assets-frontend/pull/933)

assets/components/notification-badge/README.md

@@ -1,7 +1,5 @@
 # Notification badge
 
-{{ wip(142) }}
-
 A notification badge shows a number.
 
 {{ example("notification-badge.html") }}

assets/patterns/page-not-found/README.md

@@ -1,10 +1,8 @@
 # Page not found
 
-{{ wip(104) }}
-
 A page not found tells someone the page they were trying to view cannot be found. They are also known as 404 pages.
 
-{{ example("page-not-found.html", scaled=true) }}
+{{ example("page-not-found.html", false) }}
 
 ## When to use this pattern
 
@@ -14,9 +12,14 @@ Use a page not found if someone is trying to view a page that does not exist. Th
 - types or copies a web address for a page that does not exist
 - types or copies a web address incorrectly
 
-Test all links and buttons to make sure they go where they are supposed to.
+Test all links and buttons to make sure work. Remember to [do the hard work to make it simple](https://www.gov.uk/guidance/government-design-principles#do-the-hard-work-to-make-it-simple).
+
+Make sure any web addresses in your service, letters, forms and on GOV.UK are for pages that exist or redirect to pages that exist.
+
+For example, if someone has bookmarked a confirmation or a page in the middle of a journey:
 
-Make sure any web addresses in your service, letters, forms and on GOV.UK are for or redirect to pages that exist.
+- explain that the information or page is no longer available
+- give them a link or button to get to a sensible place in the service
 
 ## How it works
 
@@ -32,32 +35,29 @@ The page should have:
 - “Page not found” as the H1
 - contact information, if it exists and helps meet a user need
 
-Contact information should be either:
+Contact information should either:
 
-- a link to a specific GOV.UK contact page not a general contact page
-- formatted like a GOV.UK contact page when there is no GOV.UK page
+- be a link to a specific page that includes numbers and opening times
+- include all numbers and opening times
 
-The content should be clear and concise, not blame the user, and not use:
+The content should be clear and concise and not blame the user.
+
+Do not use:
 
 - breadcrumbs
-- words like oops, 404, bad request, please and sorry
+- technical jargon like 404 or bad request
+- informal or humorous words like oops
 - red text to warn people
 
-### If you do not know why the page is not found
-
-{{ example("page-not-found-unknown.html", scaled=true) }}
-
-Page after they send the form.
-
-{{ example("page-not-found-sent.html", scaled=true) }}
-
 ### Service mistake
 
-{{ example("page-not-found.html", scaled=true) }}
+{{ example("page-not-found.html", false) }}
+
+As mentioned, test all links and buttons to make sure they work or are sensibly redirected.
 
-### User mistake
+### User mistake or you do not know why the page is not found
 
-{{ example("page-not-found-user.html", scaled=true) }}
+{{ example("page-not-found-user.html", false) }}
 
 ## Research on this pattern
 
@@ -68,4 +68,4 @@ We want to know if people:
 - can fix the problem on their own
 - understand what has happened
 - understand the content and if there is anything missing
-- would use a form to tell us about the problem and if that helps them
+- would use report a page not found if they could

assets/patterns/page-not-found/page-not-found-user.html

@@ -1,69 +1,8 @@
-<!-- COOKIE MESSAGE -->
-<!--<div id="global-cookie-message">
-  <p>GOV.UK uses cookies to make the site simpler. <a href="https://www.gov.uk/help/cookies">Find out more about
-  cookies</a></p>
-</div>-->
-<!-- END COOKIE MESSAGE -->
-<!-- GOV.UK HEADER -->
-<header role="banner" id="global-header" class="with-proposition">
-  <div class="header-wrapper">
-    <div class="header-global">
-      <div class="header-logo">
-        <a href="https://www.gov.uk" title="Go to the GOV.UK homepage" id="logo" class="content">
-        <img src="images/gov.uk_logotype_crown_invert_trans.png?0.19.2" width="36" height="32" alt="">GOV.UK</a>
-      </div>
-    </div>
-    <div class="header-proposition">
-      <div class="content">
-        <nav id="proposition-menu">
-          <a href="#" id="proposition-name">Service name</a>
-        </nav>
-      </div>
-    </div>
-  </div>
-</header>
-<div id="global-header-bar"></div>
-<!-- END GOV.UK HEADER -->
-<main id="content" role="main">
-  <!-- PHASE BANNER -->
-  <div class="phase-banner">
-    <p>
-      <strong class="phase-tag">BETA</strong>
-      <span>This is a new service – your <a href="#">feedback</a> will help us to improve it.</span>
-    </p>
-  </div>
-  <!-- END PHASE BANNER -->
-  <!-- PAGE CONTENT -->
-  <div class="grid-row">
+<div class="grid-row">
     <div class="column-two-thirds">
       <h1 class="heading-large">Page not found</h1>
       <p>If you typed the web address, check it is correct.</p>
       <p>If you pasted the web address, check you copied the entire address.</p>
       <p><a href="https://www.gov.uk/contact-the-tax-credit-office">Contact the Tax Credit Helpline</a> if you need to speak to someone about your tax credits.</p>
     </div>
-  </div>
-  <!-- END PAGE CONTENT -->
-</main>
-<!-- FOOTER   -->
-<footer class="group js-footer" id="footer" role="contentinfo">
-  <div class="footer-wrapper">
-    <div class="footer-meta">
-      <div class="footer-meta-inner">
-        <ul class="platform-help-links">
-          <li><a href="/help/cookies" target="_blank" data-sso="false" data-journey-click="footer:Click:Cookies">Cookies</a></li>
-          <li><a href="/help/privacy" target="_blank" data-sso="false" data-journey-click="footer:Click:Privacy policy">Privacy policy</a></li>
-          <li><a href="/help/terms-and-conditions" target="_blank" data-sso="false" data-journey-click="footer:Click:Terms and conditions">Terms and conditions</a></li>
-          <li><a href="https://www.gov.uk/help" target="_blank" data-sso="false" data-journey-click="footer:Click:Help">Help using GOV.UK</a></li>
-        </ul>
-        <div class="open-government-licence">
-          <p class="logo"><a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence</a></p>
-          <p>All content is available under the <a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence v3.0</a>, except where otherwise stated</p>
-        </div>
-      </div>
-      <div class="copyright">
-        <a href="http://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/copyright-and-re-use/crown-copyright/">© Crown copyright</a>
-      </div>
-    </div>
-  </div>
-</footer>
-<!-- END FOOTER -->
+  </div>