Merge pull request #26 from x-govuk/add-task-list-pattern

Add task list page template

Author: romaricpascal

CHANGELOG.md

@@ -1,6 +1,8 @@
 # Changelog
 
-## Unreleased
+## 2.0.0
+
+- [#26 - Add task list page template](https://github.com/alphagov/govuk-prototype-kit-common-templates/pull/26)
 
 ## 1.2.2
 

govuk-prototype-kit.config.json

@@ -7,7 +7,7 @@
   },
   "pluginDependencies": [{
     "packageName": "govuk-frontend",
-    "minVersion": "4.4.0"
+    "minVersion": "5.0.0"
   }],
   "sass": [
     "/sass/_contents-list.scss",
@@ -54,5 +54,10 @@
       "name": "Mainstream guide page",
       "path": "/templates/mainstream-guide.html",
       "type":  "nunjucks"
+    },
+    {
+      "name": "Task list page (for GOV.UK Frontend >=5.0.0)",
+      "path": "/templates/task-list.html",
+      "type":  "nunjucks"
     }]
 }

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@govuk-prototype-kit/common-templates",
-  "version": "1.2.2",
+  "version": "2.0.0",
   "description": "Common service page templates for the GOV.UK Prototype Kit",
   "author": "GOV.UK Prototype team, UK Government Digital Service",
   "license": "MIT",

package.json

@@ -0,0 +1,98 @@
+{% extends "layouts/main.html" %}
+
+{% block pageTitle %}
+  Task list template – {{ serviceName }} – GOV.UK Prototype Kit
+{% endblock %}
+
+{% block beforeContent %}
+{% endblock %}
+
+{% block content %}
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+
+      <h1 class="govuk-heading-l">{{ serviceName }}</h1>
+
+      <h2 class="govuk-heading-m">[ Heading for first set of tasks ]</h2>
+
+      {% set completedStatus = {
+        text: "Completed"
+      } %}
+
+      {% set incompleteStatus = {
+        text: "Incomplete",
+        classes: "govuk-tag--blue"
+      } %}
+
+      {# To switch between the completed and incomplete statues, use some inline logic within the component below, like this: "status: (completedStatus if ... else incompleteStatus)" #}
+
+      {{ govukTaskList({
+        idPrefix: "first-section",
+        items: [
+          {
+            title: {
+              text: "Name of first task"
+            },
+            href: "#",
+            status: completedStatus
+          },
+          {
+            title: {
+              text: "Name of second task"
+            },
+            href: "#",
+            status: incompleteStatus
+          }
+        ]
+      }) }}
+
+      <h2 class="govuk-heading-m govuk-!-margin-top-5">[ Heading for second set of tasks ]</h2>
+
+      {{ govukTaskList({
+        idPrefix: "second-section",
+        items: [
+          {
+            title: {
+              text: "Name of third task"
+            },
+            href: "#",
+            status: completedStatus
+          },
+          {
+            title: {
+              text: "Name of fifth task"
+            },
+            href: "#",
+            status: incompleteStatus
+          },
+          {
+            title: {
+              text: "Name of sixth task"
+            },
+            href: "#",
+            status: completedStatus
+          },
+          {
+            title: {
+              text: "Name of seventh task"
+            },
+            href: "#",
+            status: incompleteStatus
+          },
+          {
+            title: {
+              text: "Name of eighth task"
+            },
+            href: "#",
+            status: incompleteStatus
+          }
+        ]
+      }) }}
+
+      <div class="govuk-!-margin-top-5">
+        {{ govukButton({ text: "Apply", href: "#" }) }}
+      </div>
+
+    </div>
+  </div>
+{% endblock %}