From 65ed903d137c1840dd0ec4cd2cd34a5f5790f256 Mon Sep 17 00:00:00 2001
From: Frankie Roberto <frankie@frankieroberto.com>
Date: Mon, 25 Sep 2023 20:33:11 +0100
Subject: [PATCH] Add task list template

---
 CHANGELOG.md                    |   2 +
 govuk-prototype-kit.config.json |   7 ++-
 package-lock.json               |   4 +-
 package.json                    |   2 +-
 templates/task-list.html        | 107 ++++++++++++++++++++++++++++++++
 5 files changed, 118 insertions(+), 4 deletions(-)
 create mode 100644 templates/task-list.html

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f63c7af..2fb94fd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+- [#26 - Add task list page template](https://github.com/alphagov/govuk-prototype-kit-common-templates/pull/26)
+
 ## 1.2.2
 
 ### Fixes
diff --git a/govuk-prototype-kit.config.json b/govuk-prototype-kit.config.json
index 5fd77d4..0743571 100644
--- a/govuk-prototype-kit.config.json
+++ b/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",
+      "path": "/templates/task-list.html",
+      "type":  "nunjucks"
     }]
 }
diff --git a/package-lock.json b/package-lock.json
index f053419..6231eee 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@govuk-prototype-kit/common-templates",
-  "version": "1.2.2",
+  "version": "2.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@govuk-prototype-kit/common-templates",
-      "version": "1.2.2",
+      "version": "2.0.0",
       "license": "MIT"
     }
   }
diff --git a/package.json b/package.json
index 98289da..4b0f7fe 100644
--- a/package.json
+++ b/package.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",
diff --git a/templates/task-list.html b/templates/task-list.html
new file mode 100644
index 0000000..fa4c040
--- /dev/null
+++ b/templates/task-list.html
@@ -0,0 +1,107 @@
+{% 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 %}