Merge pull request #547 from alphagov/update-examples

Update examples

app/assets/sass/patterns/_check-your-answers.scss

@@ -1,8 +1,8 @@
 // Recommended - Use these styles for the check your answers pattern
 .app-check-your-answers {
-
   @include govuk-font(19);
-
+  margin-top: 0;
+  @include govuk-responsive-margin(9, "bottom");
   @include govuk-media-query($from: desktop) {
     display: table;
   }

app/assets/sass/patterns/_task-list.scss

@@ -1,72 +1,66 @@
 // Task list pattern
 
-// Override column width for tablet and up
-.app-column-minimum {
-  @include govuk-media-query($from: tablet) {
-    min-width: 600px;
-  }
-}
-
-// Spacing to the left of the task list
-$task-list-indent: 35px;
-
 .app-task-list {
-  list-style: none;
-  padding: 0;
-  margin-top: $govuk-gutter;
+  list-style-type: none;
+  padding-left: 0;
+  margin-top: 0;
+  margin-bottom: 0;
   @include govuk-media-query($from: tablet) {
-    margin-top: ($govuk-gutter * 2);
+    min-width: 550px;
   }
 }
 
 .app-task-list__section {
   display: table;
-
-  @include govuk-font(24, $weight: bold);
-  margin: 0;
-  padding-bottom: ($govuk-gutter / 6);
+  @include govuk-font($size:24, $weight: bold);
 }
 
 .app-task-list__section-number {
   display: table-cell;
-  padding-right: ($govuk-gutter / 6);
 
   @include govuk-media-query($from: tablet) {
-    min-width: $task-list-indent;
+    min-width: govuk-spacing(6);
     padding-right: 0;
   }
 }
 
-
 .app-task-list__items {
+  @include govuk-font($size: 19);
+  @include govuk-responsive-margin(9, "bottom");
   list-style: none;
-  padding: 0;
-  margin-bottom: $govuk-gutter;
-  @include govuk-media-query($from: tablet) {
-    margin-bottom: ($govuk-gutter * 2);
-  }
-
+  padding-left: 0;
   @include govuk-media-query($from: tablet) {
-    padding-left: $task-list-indent;
+    padding-left: govuk-spacing(6);
   }
 }
 
 .app-task-list__item {
   border-bottom: 1px solid $govuk-border-colour;
+  margin-bottom: 0 !important;
   padding-top: govuk-spacing(2);
   padding-bottom: govuk-spacing(2);
-  @include govuk-clearfix
+  @include govuk-clearfix;
 }
 
 .app-task-list__item:first-child {
   border-top: 1px solid $govuk-border-colour;
 }
 
 .app-task-list__task-name {
-  width: 33.3%;
-  float: left;
+  display: block;
+  @include govuk-media-query($from: 450px) {
+    float: left;
+    width: 75%;
+  }
 }
 
 .app-task-list__task-completed {
-  float: right;
+  margin-top: govuk-spacing(2);
+  margin-bottom: govuk-spacing(1);
+
+  @include govuk-media-query($from: 450px) {
+    float: right;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
 }

docs/views/examples/check-your-answers-page.html

@@ -12,7 +12,7 @@
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
 
-      <h1 class="govuk-heading-l">
+      <h1 class="govuk-heading-xl">
         Check your answers before sending your application
       </h1>
 

docs/views/examples/confirmation-page.html

@@ -1,5 +1,8 @@
 {% extends "layout.html" %}
 
+<!-- Adds a class to increase vertical spacing for pages without a back button -->
+{% set mainClasses = "govuk-main-wrapper--l" %}
+
 {% block pageTitle %}
   Confirmation page example
 {% endblock %}
@@ -10,7 +13,7 @@
     <div class="govuk-grid-column-two-thirds">
 
       <div class="govuk-panel govuk-panel--confirmation">
-        <h2 class="govuk-panel__title">Application complete</h2>
+        <h1 class="govuk-panel__title">Application complete</h1>
         <div class="govuk-panel__body">
           Your reference number<br><strong>HDJ2123F</strong>
         </div>

docs/views/examples/start-page.html

@@ -28,7 +28,6 @@
 {% endblock %}
 
 {% block content %}
-
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
 
@@ -41,32 +40,41 @@ <h1 class="govuk-heading-xl">
       <ul class="govuk-list govuk-list--bullet">
         <li>do something</li>
         <li>update your name, address or other details</li>
-        <li>you need to do this in order to do something else</li>
+        <li>do something else</li>
       </ul>
 
       <p>Registering takes around 5 minutes.</p>
 
-      <p>
-        <a href="#" class="govuk-button govuk-button--start" role="button">Start now</a>
-      </p>
+      <a href="#" role="button" class="govuk-button govuk-button--start govuk-!-margin-top-2 govuk-!-margin-bottom-8">Start now</a>
 
       <h2 class="govuk-heading-m">Before you start</h2>
 
-      <p>You can also <a href="#">register by post.</a></p>
+      <p>You can also <a href="#">register by post</a>.</p>
 
-      <p>The online service is also available in <a href="#">Welsh (Cymraeg).</a></p>
+      <p>The online service is also available in <a href="#">Welsh (Cymraeg)</a>.</p>
 
       <p>You can’t register for this service if you’re in the UK illegally.</p>
 
     </div>
+
     <div class="govuk-grid-column-one-third">
 
       <aside class="app-related-items" role="complementary">
-        <h2 class="govuk-heading-m" id="subsection-title">Subsection</h2>
+        <h2 class="govuk-heading-m" id="subsection-title">
+          Subsection
+        </h2>
         <nav role="navigation" aria-labelledby="subsection-title">
-          <ul class="govuk-list govuk-body-s">
-            <li><a href="#">Related link</a></li>
-            <li><a href="#">Related link</a></li>
+          <ul class="govuk-list govuk-!-font-size-16">
+            <li>
+              <a href="#">
+                Related link
+              </a>
+            </li>
+            <li>
+              <a href="#">
+                Related link
+              </a>
+            </li>
             <li>
               <a href="#" class="govuk-!-font-weight-bold">
                 More <span class="govuk-visually-hidden">in Subsection</span>
@@ -78,5 +86,4 @@ <h2 class="govuk-heading-m" id="subsection-title">Subsection</h2>
 
     </div>
   </div>
-
 {% endblock %}

docs/views/examples/task-list-page.html

@@ -1,15 +1,17 @@
 {% extends "layout.html" %}
 
+<!-- Adds a class to increase vertical spacing for pages without a back button -->
+{% set mainClasses = "govuk-main-wrapper--l" %}
+
 {% block pageTitle %}
   Task list
 {% endblock %}
 
 {% block content %}
 
   <div class="govuk-grid-row">
-    <div class="govuk-grid-column-two-thirds app-column-minimum">
-
-      <h1 class="govuk-heading-l">
+    <div class="govuk-grid-column-two-thirds">
+      <h1 class="govuk-heading-xl">
         Service name goes here
       </h1>
 
@@ -23,17 +25,13 @@ <h2 class="app-task-list__section">
               <a class="app-task-list__task-name" href="#" aria-describedby="eligibility-completed">
                 Check eligibility
               </a>
-              <strong class="govuk-tag app-task-list__task-completed" id="eligibility-completed">
-                Completed
-              </strong>
+              <strong class="govuk-tag app-task-list__task-completed" id="eligibility-completed">Completed</strong>
             </li>
             <li class="app-task-list__item">
               <a class="app-task-list__task-name" href="#" aria-describedby="read-declaration-completed">
                 Read declaration
               </a>
-              <strong class="govuk-tag app-task-list__task-completed" id="read-declaration-completed">
-                Completed
-              </strong>
+              <strong class="govuk-tag app-task-list__task-completed" id="read-declaration-completed">Completed</strong>
             </li>
           </ul>
         </li>
@@ -46,17 +44,13 @@ <h2 class="app-task-list__section">
               <a class="app-task-list__task-name" href="#" aria-describedby="company-information-completed">
                 Company information
               </a>
-              <strong class="govuk-tag app-task-list__task-completed" id="company-information-completed">
-                Completed
-              </strong>
+              <strong class="govuk-tag app-task-list__task-completed" id="company-information-completed">Completed</strong>
             </li>
             <li class="app-task-list__item">
               <a class="app-task-list__task-name" href="#" aria-describedby="contact-details-completed">
                 Your contact details
               </a>
-              <strong class="govuk-tag app-task-list__task-completed" id="contact-details-completed">
-                Completed
-              </strong>
+              <strong class="govuk-tag app-task-list__task-completed" id="contact-details-completed">Completed</strong>
             </li>
             <li class="app-task-list__item">
               <a class="app-task-list__task-name" href="#">
@@ -72,9 +66,7 @@ <h2 class="app-task-list__section">
               <a class="app-task-list__task-name" href="#" aria-describedby="medical-information-completed">
                 Give medical information
               </a>
-              <strong class="govuk-tag app-task-list__task-completed" id="medical-information-completed">
-                Completed
-              </strong>
+              <strong class="govuk-tag app-task-list__task-completed" id="medical-information-completed">Completed</strong>
             </li>
           </ul>
         </li>

docs/views/examples/template-content-page.html

@@ -13,7 +13,7 @@
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
 
-      <h1 class="govuk-heading-l">
+      <h1 class="govuk-heading-xl">
         Heading goes here
       </h1>
 

docs/views/examples/template-question-page-blank.html

@@ -13,7 +13,7 @@
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
 
-      <h1 class="govuk-heading-l">Heading or question goes here
+      <h1 class="govuk-heading-xl">Heading or question goes here
       </h1>
 
       <form class="form" action="/url/of/next/page" method="post">