From f7afa82b2166bacd532a1eb836333028e812eeeb Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Fri, 10 Mar 2017 16:42:37 +0000
Subject: [PATCH 1/5] Add an example of the task list pattern

Add an example of the task list pattern to the docs. Link to it from
the tutorials and examples page.
---
 app/assets/sass/application.scss         |  1 +
 app/assets/sass/patterns/_task-list.scss | 71 +++++++++++++++++++
 docs/views/examples/task-list.html       | 90 ++++++++++++++++++++++++
 docs/views/tutorials-and-examples.html   |  8 ++-
 4 files changed, 168 insertions(+), 2 deletions(-)
 create mode 100644 app/assets/sass/patterns/_task-list.scss
 create mode 100644 docs/views/examples/task-list.html

diff --git a/app/assets/sass/application.scss b/app/assets/sass/application.scss
index ed8f66ed8d..30e024e79e 100644
--- a/app/assets/sass/application.scss
+++ b/app/assets/sass/application.scss
@@ -8,6 +8,7 @@ $path: "/public/images/";
 
 // Take a look at in app/assets/sass/patterns/ to see which files are imported.
 @import 'patterns/check-your-answers';
+@import 'patterns/task-list';
 
 // Related items
 // (These styles will be moved to GOV.UK elements, duplicating here for now.)
diff --git a/app/assets/sass/patterns/_task-list.scss b/app/assets/sass/patterns/_task-list.scss
new file mode 100644
index 0000000000..0aa182cc21
--- /dev/null
+++ b/app/assets/sass/patterns/_task-list.scss
@@ -0,0 +1,71 @@
+// Task list pattern
+
+// Override column width for tablet and up
+.column-minimum {
+  @include media(tablet) {
+    min-width: 600px;
+  }
+}
+
+
+.task-list {
+  margin-top: 3em;
+}
+
+
+.task-list-section {
+  display: table;
+  @include bold-24;
+  padding-bottom: 0.25em;
+}
+
+.task-list-section-number {
+  display: table-cell;
+  padding-right: 0.25em;
+  @include media(tablet) {
+    width: 1.5em;
+    padding-right: 0;
+  }
+}
+
+
+.task-list-items {
+  margin-bottom: 3em;
+  @include media(tablet) {
+    padding-left: 2em;
+  }
+}
+
+.task-list-item {
+  border-bottom: 1px solid $border-colour;
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  @extend %contain-floats;
+}
+
+.task-list-item:first-child {
+  border-top: 1px solid $border-colour;
+}
+
+
+.task-name {
+  width: 60%;
+  float: left;
+}
+
+.task-completed {
+  float: right;
+  @include inline-block;
+  margin-left: 8px;
+
+  padding-top: 3px;
+  padding-left: 5px;
+  padding-right: 5px;
+
+  @include bold-16($line-height: 20 / 16);
+  letter-spacing: 1px;
+  text-decoration: none;
+
+  color: $white;
+  background-color: $govuk-blue;
+}
diff --git a/docs/views/examples/task-list.html b/docs/views/examples/task-list.html
new file mode 100644
index 0000000000..f4c418ce01
--- /dev/null
+++ b/docs/views/examples/task-list.html
@@ -0,0 +1,90 @@
+{% extends "layout.html" %}
+
+{% block page_title %}
+  Task list
+{% endblock %}
+
+{% block content %}
+
+<main id="content" role="main">
+  <div class="grid-row">
+    <div class="column-two-thirds column-minimum">
+
+      <h1 class="heading-large">
+        Service name goes here
+      </h1>
+
+      <ol class="task-list">
+        <li>
+          <h2 class="task-list-section">
+            <span class="task-list-section-number">1. </span> Check before you start
+          </h2>
+          <ul class="task-list-items">
+            <li class="task-list-item">
+              <a class="task-name" href="#" aria-describedby="eligibility-completed">
+                Check eligibility
+              </a>
+              <strong class="task-completed" id="eligibility-completed">Completed</strong>
+            </li>
+            <li class="task-list-item">
+              <a class="task-name" href="#" aria-describedby="read-declaration-completed">
+                Read declaration
+              </a>
+              <strong class="task-completed" id="read-declaration-completed">Completed</strong>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <h2 class="task-list-section">
+            <span class="task-list-section-number">2. </span> Prepare application
+          </h2>
+          <ul class="task-list-items">
+            <li class="task-list-item">
+              <a class="task-name" href="#" aria-describedby="company-information-completed">
+                Company information
+              </a>
+              <strong class="task-completed" id="company-information-completed">Completed</strong>
+            </li>
+            <li class="task-list-item">
+              <a class="task-name" href="#" aria-describedby="contact-details-completed">
+                Your contact details
+              </a>
+              <strong class="task-completed" id="contact-details-completed">Completed</strong>
+            </li>
+            <li class="task-list-item">
+              <a class="task-name" href="#">
+                List convictions
+              </a>
+            </li>
+            <li class="task-list-item">
+              <a class="task-name" href="#">
+                Provide financial evidence
+              </a>
+            </li>
+            <li class="task-list-item">
+              <a class="task-name" href="#" aria-describedby="medical-information-completed">
+                Give medical information
+              </a>
+              <strong class="task-completed" id="medical-information-completed">Completed</strong>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <h2 class="task-list-section">
+            <span class="task-list-section-number">3. </span> Apply
+          </h2>
+          <ul class="task-list-items">
+            <li class="task-list-item">
+              <a class="task-name" href="#">
+                Submit and pay
+              </a>
+            </li>
+          </ul>
+        </li>
+      </ol>
+
+    </div>
+  </div>
+</main>
+
+{% endblock %}
diff --git a/docs/views/tutorials-and-examples.html b/docs/views/tutorials-and-examples.html
index 295abeba9f..7a0c78d168 100644
--- a/docs/views/tutorials-and-examples.html
+++ b/docs/views/tutorials-and-examples.html
@@ -125,8 +125,7 @@ <h3 class="heading-small">Entire pages</h3>
           <a href="/docs/examples/blank-govuk">
             Blank
           </a>
-        </li>
-        <li>
+          /
           <a href="/docs/examples/blank-unbranded">
             Blank (non-GOV.UK)
           </a>
@@ -136,6 +135,11 @@ <h3 class="heading-small">Entire pages</h3>
             Start
           </a>
         </li>
+        <li>
+          <a href="/docs/examples/task-list">
+            Task list
+          </a>
+        </li>
         <li>
           <a href="/docs/examples/question-page">
             Question

From 6eeda02b64752aa5abdb36eb7b67e08a800364c6 Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Tue, 14 Mar 2017 17:10:34 +0000
Subject: [PATCH 2/5] Replace em values with gutter variables
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Use variables from the govuk_frontend_toolkit’s _measurements.scss file.

Also add a new variable for the spacing to the left of the task list.
---
 app/assets/sass/patterns/_task-list.scss | 29 ++++++++++++++++--------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/app/assets/sass/patterns/_task-list.scss b/app/assets/sass/patterns/_task-list.scss
index 0aa182cc21..99940c28fb 100644
--- a/app/assets/sass/patterns/_task-list.scss
+++ b/app/assets/sass/patterns/_task-list.scss
@@ -7,39 +7,50 @@
   }
 }
 
+// Spacing to the left of the task list
+$task-list-indent: 35px;
 
 .task-list {
-  margin-top: 3em;
+  margin-top: $gutter;
+  @include media(tablet) {
+    margin-top: ($gutter * 2);
+  }
 }
 
 
 .task-list-section {
   display: table;
+
   @include bold-24;
-  padding-bottom: 0.25em;
+  padding-bottom: ($gutter / 6);
 }
 
 .task-list-section-number {
   display: table-cell;
-  padding-right: 0.25em;
+  padding-right: ($gutter / 6);
+
   @include media(tablet) {
-    width: 1.5em;
+    min-width: $task-list-indent;
     padding-right: 0;
   }
 }
 
 
 .task-list-items {
-  margin-bottom: 3em;
+  margin-bottom: $gutter;
+  @include media(tablet) {
+    margin-bottom: ($gutter * 2);
+  }
+
   @include media(tablet) {
-    padding-left: 2em;
+    padding-left: $task-list-indent;
   }
 }
 
 .task-list-item {
   border-bottom: 1px solid $border-colour;
-  padding-top: 0.5em;
-  padding-bottom: 0.5em;
+  padding-top: $gutter-one-third;
+  padding-bottom: $gutter-one-third;
   @extend %contain-floats;
 }
 
@@ -49,7 +60,7 @@
 
 
 .task-name {
-  width: 60%;
+  width: $two-thirds;
   float: left;
 }
 

From 312a682f4dd828f26fa67b57fab1ac1ad94e732d Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Tue, 14 Mar 2017 17:39:35 +0000
Subject: [PATCH 3/5] Use the phase tag mixin for the completed status

---
 app/assets/sass/patterns/_task-list.scss | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/app/assets/sass/patterns/_task-list.scss b/app/assets/sass/patterns/_task-list.scss
index 99940c28fb..06ed00d8a7 100644
--- a/app/assets/sass/patterns/_task-list.scss
+++ b/app/assets/sass/patterns/_task-list.scss
@@ -65,18 +65,10 @@ $task-list-indent: 35px;
 }
 
 .task-completed {
-  float: right;
-  @include inline-block;
-  margin-left: 8px;
+  @include phase-tag;
 
+  float: right;
+  text-transform: none;
+  margin-right: 0;
   padding-top: 3px;
-  padding-left: 5px;
-  padding-right: 5px;
-
-  @include bold-16($line-height: 20 / 16);
-  letter-spacing: 1px;
-  text-decoration: none;
-
-  color: $white;
-  background-color: $govuk-blue;
 }

From 79a588b0b8dfa3be66c276c9f55a9073eb4b0298 Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Wed, 22 Mar 2017 14:41:41 +0000
Subject: [PATCH 4/5] Make the "completed" status uppercase

---
 app/assets/sass/patterns/_task-list.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/assets/sass/patterns/_task-list.scss b/app/assets/sass/patterns/_task-list.scss
index 06ed00d8a7..e99973c814 100644
--- a/app/assets/sass/patterns/_task-list.scss
+++ b/app/assets/sass/patterns/_task-list.scss
@@ -68,7 +68,6 @@ $task-list-indent: 35px;
   @include phase-tag;
 
   float: right;
-  text-transform: none;
   margin-right: 0;
   padding-top: 3px;
 }

From 49b4b145014fabfef38ec50ae65fb1d990e82c6e Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Wed, 22 Mar 2017 15:20:56 +0000
Subject: [PATCH 5/5] Rename the task-list to "task-list-page"

---
 docs/views/examples/{task-list.html => task-list-page.html} | 0
 docs/views/tutorials-and-examples.html                      | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename docs/views/examples/{task-list.html => task-list-page.html} (100%)

diff --git a/docs/views/examples/task-list.html b/docs/views/examples/task-list-page.html
similarity index 100%
rename from docs/views/examples/task-list.html
rename to docs/views/examples/task-list-page.html
diff --git a/docs/views/tutorials-and-examples.html b/docs/views/tutorials-and-examples.html
index 7a0c78d168..f3940bd590 100644
--- a/docs/views/tutorials-and-examples.html
+++ b/docs/views/tutorials-and-examples.html
@@ -136,7 +136,7 @@ <h3 class="heading-small">Entire pages</h3>
           </a>
         </li>
         <li>
-          <a href="/docs/examples/task-list">
+          <a href="/docs/examples/task-list-page">
             Task list
           </a>
         </li>