Add a template

Author: frankieroberto

govuk-prototype-kit.config.json

@@ -4,5 +4,12 @@
   ],
   "sass": [
     "/style/task-list-compoent.scss"
+  ],
+  "templates": [
+    {
+      "name": "Task list page",
+      "path": "/templates/task-list.html",
+      "type": "nunjucks"
+    }
   ]
 }

templates/task-list.html

@@ -0,0 +1,80 @@
+{% extends "govuk-prototype-kit/layouts/govuk-branded.html" %}
+
+{% block pageTitle %}
+  Task list template – {{ serviceName }} – GOV.UK Prototype Kit
+{% endblock %}
+
+{% block content %}
+
+{% from "task-list-component/macro.njk" import govukTaskList %}
+
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+      <h1 class="govuk-heading-l">Apply for a juggling licence</h1>
+
+      <section class="govuk-!-margin-bottom-8">
+        <h2 class="govuk-heading-m">About you</h2>
+
+        {{govukTaskList({
+          items: [
+            {
+              href: "/name",
+              title: {
+                text: "Name and date of birth"
+              },
+              status: {
+                classes: "govuk-task-list__status--blue",
+                text: "Incomplete"
+              }
+            },
+            {
+              href: "/contact details",
+              title: {
+                text: "Contact details"
+              },
+              status: {
+                classes: "govuk-task-list__status--blue",
+                text: "Incomplete"
+              }
+            }
+          ]
+        })}}
+      </section>
+
+      <section class="govuk-!-margin-bottom-8">
+        <h2 class="govuk-heading-m">Your juggling</h2>
+
+        {{govukTaskList({
+          items: [
+            {
+              href: "/skills",
+              title: {
+                text: "Skills and abilities"
+              },
+              status: {
+                classes: "govuk-task-list__status--blue",
+                text: "Incomplete"
+              }
+            },
+            {
+              href: "/tricks",
+              title: {
+                text: "Tricks and routines"
+              },
+              status: {
+                classes: "govuk-task-list__status--blue",
+                text: "Incomplete"
+              }
+            }
+          ]
+        })}}
+      </section>
+
+      {{ govukButton({
+        text: "Review your application",
+        href: "/review"
+      }) }}
+    </div>
+  </div>
+
+{% endblock %}