diff --git a/CHANGELOG.md b/CHANGELOG.md index f63c7af..941fc27 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/govuk-prototype-kit.config.json b/govuk-prototype-kit.config.json index 5fd77d4..c47b9c2 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 (for GOV.UK Frontend >=5.0.0)", + "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..234105c --- /dev/null +++ b/templates/task-list.html @@ -0,0 +1,98 @@ +{% extends "layouts/main.html" %} + +{% block pageTitle %} + Task list template – {{ serviceName }} – GOV.UK Prototype Kit +{% endblock %} + +{% block beforeContent %} +{% endblock %} + +{% block content %} +
+
+ +

{{ serviceName }}

+ +

[ Heading for first set of tasks ]

+ + {% 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 + } + ] + }) }} + +

[ Heading for second set of tasks ]

+ + {{ 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 + } + ] + }) }} + +
+ {{ govukButton({ text: "Apply", href: "#" }) }} +
+ +
+
+{% endblock %}