Added the 404 page pattern

CHANGELOG.md

@@ -7,7 +7,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
 
-### Added 
+### Added
+- 404 page pattern [#835](https://github.com/hmrc/assets-frontend/pull/835)
 - Shutter Page pattern [#838](https://github.com/hmrc/assets-frontend/pull/838)
 
 ### Changed
@@ -16,6 +17,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 * Use macros for example and markup rendering in README.md
 * Modify CHANGELOG.md change verification to stabilise Travis CI [#833](https://github.com/hmrc/assets-frontend/pull/833)
 * Allow README.md only changes to be merged without forcing CHANGELOG.md to be changed [#836](https://github.com/hmrc/assets-frontend/pull/836)
+* Replaced [_panels.scss](https://github.com/hmrc/assets-frontend/pull/835/commits/31e4c36c1a94e151448b23b34670fff7232d7823) with content from GOV.UK
 
 ## [2.252.0] - 2017-10-16
 

assets/govuk_elements/public/sass/elements/_panels.scss

@@ -1,26 +1,61 @@
 // Panels
 // ==========================================================================
 
-// Indented panels with a grey left hand border
-.panel-indent {
-  @include contain-floats;
+.panel {
+  @include box-sizing(border-box);
+  @extend %contain-floats;
   clear: both;
-  border-left: 4px solid $border-colour;
+  border-left-style: solid;
+  border-color: $border-colour;
 
-  padding: 10px 0 10px $gutter-half;
-  margin: ($gutter $gutter-half $gutter*1.5 0);
+  padding: em(15, 19);
+  margin-bottom: em(15, 19);
+
+  :first-child {
+    margin-top: 0;
+  }
+
+  :only-child,
+  :last-child {
+    margin-bottom: 0;
+  }
 }
 
-.panel-indent legend {
-  margin-top: 0;
+.panel-border-wide {
+  border-left-width: 10px;
 }
 
-// Remove bottom margin on last paragraph
-.panel-indent p:only-child,
-.panel-indent p:last-child {
+// Used to show the left edge of "toggled" content
+.panel-border-narrow {
+  border-left-width: 5px;
+}
+
+// Panels within form groups
+// By default, panels have 15px bottom margin
+.form-group .panel-border-narrow {
+  float: left;
+  width: 100%;
+  // Remove the bottom padding as .form-group sets a bottom margin
+  padding-bottom: 0;
+  // Don't remove the bottom margin for all panels, assume they are often within stacked groups
+}
+
+// Note: This is incredibly fragile, and needs rebuilding.
+
+// The first panel in a group
+.form-group .panel-border-narrow:first-child {
+  margin-top: 10px;
+}
+
+// The last panel in a group
+.form-group .panel-border-narrow:last-child {
+  margin-top: 0;
   margin-bottom: 0;
 }
 
-.panel-indent .form-group:last-child {
+// For inline panels
+.inline .panel-border-narrow,
+.inline .panel-border-narrow:last-child {
+  margin-top: 10px;
   margin-bottom: 0;
 }

assets/patterns/404-page/404-page.html

@@ -0,0 +1,101 @@
+<!-- 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="column-two-thirds">
+      <h1 class="heading-large">Page not found</h1>
+      <h2 class="heading-small">If you typed in the web address</h2>
+      <p>Check the address and make sure you typed it in correctly.</p>
+      <h2 class="heading-small">If you selected a link or button or typed in the web address correctly</h2>
+        <!-- FORM FOR USERS TO TELL US THEY GOT A 404 -->
+      <div class="form-group">
+        <details>
+        <summary><span class="summary">Let us know the page was not found.</span></summary>
+        <div class="panel panel-border-narrow">
+          <div class="form-group">
+            <label class="form-label" for="full-name">
+              Full name
+            </label>
+            <input type="text" class="form-control" id="full-name">
+          </div>
+          <div class="form-group">
+            <label class="form-label" for="full-name">
+              Email address (optional)
+              <span class="form-hint">We will let you know when the problem is fixed.</span>
+            </label>
+            <input type="text" class="form-control" id="full-name">
+          </div>
+          <div class="form-group">
+            <label class="form-label" for="full-name">
+              What were you doing?
+            </label>
+            <input type="text" class="form-control" id="full-name">
+          </div>
+          <div class="form-group">
+            <input type="submit" class="button" value="Send">
+          </div>
+        </div>
+        </details>
+      </div>
+      <!-- END FORM FOR USERS TO TELL US THEY GOT A 404 -->
+      <p><a class="button" href="#">Go back to the previous page</a></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 -->

assets/patterns/404-page/README.md

@@ -0,0 +1,61 @@
+# 404 page
+
+<div class="alert alert--info">
+
+<p class="alert__message">This pattern is work in progress.</p>
+<p class="alert__message">View the todo list for this pattern on [GitHub](https://github.com/hmrc/design-patterns/issues/104).</p>
+
+</div>
+
+404 pages (usually described as a 'page not found') tell users that the page they were trying to access is not there.
+
+{{ example("404-page.html", scaled=true) }}
+
+## When to use a 404 page
+
+There is a chance in all services that people will encounter a 404 page. 
+Processes and systems should be put in place to prevent users encountering 404 pages in the first place.
+
+The main reasons you would need to show users a 404 page:
+
+1. if they followed a link (URL) that is broken or pointing to the wrong location
+3. if they typed or copied a link incorrectly
+
+When you design the 404 page for your service you need to consider:
+
+- the best way for people to solve the problem
+- if there is anything spesific your service can do to help users
+
+## How 404 pages work
+
+When you design the 404 page for your service you need to consider:
+
+- the best way for people to solve the problem
+- if there is anything spesific your service can do to help users
+
+The page should:
+<!-- @todo add link to the page template -->
+- use the standard page template
+- include the phase banner relevent to the service
+- have "Page not found" as the page title and H1
+- be clear and concise
+- an explination of the problem if possible
+- not have breadcrumbs
+- not use vague terms
+- not use red text to warn people
+- optionally display a form for users to tell us about the problem
+
+## Research on 404 pages
+
+We need more user research on 404 pages. 
+
+We want to know:
+
+- if people are able to resolve the problem on their own
+- if people understand what caused the page
+- if people understand the content 
+- if anything is missing from the content
+- if giving users a form to report the problem helps 
+
+Contribute your research via this [GitHub issue](https://github.com/hmrc/design-patterns/issues/104).
+

assets/patterns/README.md

@@ -1,5 +1,7 @@
 # Patterns
+=======
 
 Here you will find best practice guidance and design solutions for specific user tasks and scenarios.
 
-Some of the patterns in this section contain coded examples, others are written guidance. Patterns often use single or combinations of [components](components) and describe their use in context of their relationship to the user.
+Some of the patterns in this section contain coded examples, others are written guidance. Patterns often use single or combinations of [components](components) and describe their use in context of their relationship to the 
+user.