Merge pull request #361 from alphagov/add-task-list-page

Add an example of the task list pattern
alphagov · Mar 24, 2017 · 9f458ac · 9f458ac
2 parents a21f35a + 49b4b14
commit 9f458ac
Show file tree

Hide file tree

Showing 4 changed files with 170 additions and 2 deletions.
diff --git 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
@@ -0,0 +1,73 @@
+// Task list pattern
+
+// Override column width for tablet and up
+.column-minimum {
+  @include media(tablet) {
+    min-width: 600px;
+  }
+}
+
+// Spacing to the left of the task list
+$task-list-indent: 35px;
+
+.task-list {
+  margin-top: $gutter;
+  @include media(tablet) {
+    margin-top: ($gutter * 2);
+  }
+}
+
+
+.task-list-section {
+  display: table;
+
+  @include bold-24;
+  padding-bottom: ($gutter / 6);
+}
+
+.task-list-section-number {
+  display: table-cell;
+  padding-right: ($gutter / 6);
+
+  @include media(tablet) {
+    min-width: $task-list-indent;
+    padding-right: 0;
+  }
+}
+
+
+.task-list-items {
+  margin-bottom: $gutter;
+  @include media(tablet) {
+    margin-bottom: ($gutter * 2);
+  }
+
+  @include media(tablet) {
+    padding-left: $task-list-indent;
+  }
+}
+
+.task-list-item {
+  border-bottom: 1px solid $border-colour;
+  padding-top: $gutter-one-third;
+  padding-bottom: $gutter-one-third;
+  @extend %contain-floats;
+}
+
+.task-list-item:first-child {
+  border-top: 1px solid $border-colour;
+}
+
+
+.task-name {
+  width: $two-thirds;
+  float: left;
+}
+
+.task-completed {
+  @include phase-tag;
+
+  float: right;
+  margin-right: 0;
+  padding-top: 3px;
+}
diff --git a/docs/views/examples/task-list-page.html b/docs/views/examples/task-list-page.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
@@ -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-page">
+            Task list
+          </a>
+        </li>
         <li>
           <a href="/docs/examples/question-page">
             Question