From 11ae879a759a430caca86a018bdeafe5f92e7da1 Mon Sep 17 00:00:00 2001
From: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>
Date: Mon, 10 Jul 2023 16:50:32 +0100
Subject: [PATCH 01/11] Remove unused tag
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

There is no `govuk-tag--black` modifier class, and the status for this task doesn’t use the tag component, so it shouldn’t be using tag modifiers anyway.
---
 .../govuk-frontend/src/govuk/components/task-list/task-list.yaml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/govuk-frontend/src/govuk/components/task-list/task-list.yaml b/packages/govuk-frontend/src/govuk/components/task-list/task-list.yaml
index e33be87bd4..4d5f027640 100644
--- a/packages/govuk-frontend/src/govuk/components/task-list/task-list.yaml
+++ b/packages/govuk-frontend/src/govuk/components/task-list/task-list.yaml
@@ -99,7 +99,6 @@ examples:
           href: '#'
           status:
             text: Completed
-            classes: govuk-tag--black
 
         - title:
             text: Registered company details

From aa885b5d85fb36f097cfaba059d9df72a8b02d77 Mon Sep 17 00:00:00 2001
From: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>
Date: Mon, 10 Jul 2023 17:27:32 +0100
Subject: [PATCH 02/11] Style tweaks to template

---
 .../src/govuk/components/task-list/template.njk        | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/govuk-frontend/src/govuk/components/task-list/template.njk b/packages/govuk-frontend/src/govuk/components/task-list/template.njk
index db1a2ebc91..0e6ef856aa 100644
--- a/packages/govuk-frontend/src/govuk/components/task-list/template.njk
+++ b/packages/govuk-frontend/src/govuk/components/task-list/template.njk
@@ -1,18 +1,16 @@
 {% from "../tag/macro.njk" import govukTag -%}
 
 {% set idPrefix = params.idPrefix if params.idPrefix else "task-list" %}
-<ul class="govuk-task-list {%- if params.classes %} {{ params.classes }}{% endif %}"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+<ul class="govuk-task-list {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {% for item in params.items %}
-    {% if item.hint %}
-      {%- set hintId = idPrefix + "-" + loop.index + "-hint" -%}
-    {% endif %}
+    {%- set hintId = idPrefix + "-" + loop.index + "-hint" -%}
     {%- set statusId = idPrefix + "-" + loop.index + "-status" -%}
     <li class="govuk-task-list__item {%- if item.href %} govuk-task-list__item--with-link{% endif %}{%- if item.classes %} {{ item.classes }}{% endif %}">
       <div class="govuk-task-list__task-name-and-hint">
         {% if item.href %}
           <a class="govuk-link govuk-task-list__link {%- if item.title.classes %} {{ item.title.classes }}{% endif %}" href="{{ item.href }}" aria-describedby="{{ hintId + " " if item.hint }}{{ statusId }}">{{ item.title.html | safe if item.title.html else item.title.text }}</a>
         {% else %}
-          <div{% if item.title.classes %} class="{{ item.title.classes }}" {%- endif %}>{{ item.title.html | safe if item.title.html else item.title.text }}</div>
+          <div {%- if item.title.classes %} class="{{ item.title.classes }}"{% endif %}>{{ item.title.html | safe if item.title.html else item.title.text }}</div>
         {% endif %}
         {% if item.hint %}
           <div id="{{ hintId }}" class="govuk-task-list__task_hint">
@@ -20,7 +18,7 @@
           </div>
         {% endif %}
       </div>
-      <div class="govuk-task-list__status {{ item.status.classes }}" id="{{ statusId }}">
+      <div class="govuk-task-list__status {%- if item.status.classes %} {{ item.status.classes }}{% endif %}" id="{{ statusId }}">
         {% if item.status.tag %}
           {{ govukTag({
             text: item.status.tag.text,

From ffcd1443f05375a3c16521ac605da4b9f4447909 Mon Sep 17 00:00:00 2001
From: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>
Date: Mon, 10 Jul 2023 17:28:16 +0100
Subject: [PATCH 03/11] Refactor tests to make one assertion per test

---
 .../govuk/components/task-list/task-list.yaml |  3 +-
 .../components/task-list/template.test.js     | 70 +++++++++----------
 2 files changed, 36 insertions(+), 37 deletions(-)

diff --git a/packages/govuk-frontend/src/govuk/components/task-list/task-list.yaml b/packages/govuk-frontend/src/govuk/components/task-list/task-list.yaml
index 4d5f027640..93fc09d47b 100644
--- a/packages/govuk-frontend/src/govuk/components/task-list/task-list.yaml
+++ b/packages/govuk-frontend/src/govuk/components/task-list/task-list.yaml
@@ -186,8 +186,7 @@ examples:
             tag:
               text: Error
               classes: govuk-tag--red
-        - classes: app-task-list__item--no-link
-          title:
+        - title:
             text: Payment
           hint:
             text: It will cost between £15 and £75
diff --git a/packages/govuk-frontend/src/govuk/components/task-list/template.test.js b/packages/govuk-frontend/src/govuk/components/task-list/template.test.js
index 9b19183d20..9d69df7e91 100644
--- a/packages/govuk-frontend/src/govuk/components/task-list/template.test.js
+++ b/packages/govuk-frontend/src/govuk/components/task-list/template.test.js
@@ -8,66 +8,66 @@ describe('Task List', () => {
     examples = await getExamples('task-list')
   })
 
-  describe('default example', () => {
-    it('renders the default example', () => {
-      const $ = render('task-list', examples.default)
+  it('renders the default example', () => {
+    const $ = render('task-list', examples.default)
 
-      const $component = $('.govuk-task-list')
-      expect($component.get(0).tagName).toEqual('ul')
+    const $component = $('.govuk-task-list')
+    expect($component.get(0).tagName).toEqual('ul')
+  })
 
-      const $items = $component.find('.govuk-task-list__item')
-      expect($items.length).toEqual(3)
+  describe('when a task has an href set', () => {
+    let $component
 
-      expect($items.get(0).tagName).toEqual('li')
-      expect($items.hasClass('govuk-task-list__item--with-link')).toBeTruthy()
-    })
-
-    it('associates the task name link with the status using aria', async () => {
+    beforeAll(function () {
       const $ = render('task-list', examples.default)
+      $component = $('.govuk-task-list')
+    })
 
-      const $component = $('.govuk-task-list')
-
-      const $itemLink = $component.find('.govuk-task-list__link')
-      expect($itemLink.get(0).tagName).toEqual('a')
+    it('wraps the task title in a link', async () => {
+      const $itemLink = $component.find('a.govuk-task-list__link')
       expect($itemLink.attr('href')).toEqual('#')
+    })
 
-      const statusId = 'task-list-example-1-status'
-      expect($itemLink.attr('aria-describedby')).toEqual(statusId)
-
-      const $statusWithId = $component.find(`#${statusId}`)
-      expect($statusWithId.get(0).tagName).toEqual('div')
+    it('associates the task name link with the status using aria', async () => {
+      const $itemLink = $component.find('.govuk-task-list__link')
+      const $statusWithId = $component.find(`#${$itemLink.attr('aria-describedby')}`)
 
       expect($statusWithId.text()).toContain('Completed')
-      expect($statusWithId.hasClass('govuk-task-list__status')).toBeTruthy()
     })
   })
 
-  describe('example with no link, hint text and additional states', () => {
-    it('doesn’t include a link in the item with no href', () => {
+  describe('when a task does not have an href set', () => {
+    it('does not link the task title', () => {
       const $ = render('task-list', examples['example with hint text and additional states'])
 
-      const $itemWithNoLink = $('.app-task-list__item--no-link')
-      expect($itemWithNoLink.get(0).tagName).toEqual('li')
-
+      const $itemWithNoLink = $('.govuk-task-list__item:last-child')
       const $itemWithNoLinkTitle = $itemWithNoLink.find('div')
       expect($itemWithNoLinkTitle.text()).toContain('Payment')
     })
+  })
 
-    it('renders hint text', () => {
+  describe('when a task has a hint', () => {
+    let $component
+
+    beforeAll(function () {
       const $ = render('task-list', examples['example with hint text and additional states'])
+      $component = $('.govuk-task-list')
+    })
 
-      const $hintText = $('.govuk-task-list__task_hint')
-      expect($hintText.get(0).tagName).toEqual('div')
-      expect($hintText.text()).toContain('Ensure the plan covers objectives, strategies, sales, marketing and financial forecasts.')
+    it('renders the hint', () => {
+      const $hintText = $component.find('.govuk-task-list__task_hint')
+      expect($hintText.text()).toContain(
+        'Ensure the plan covers objectives, strategies, sales, marketing and financial forecasts.'
+      )
     })
 
     it('associates the hint text with the task link using aria', () => {
-      const $ = render('task-list', examples['example with hint text and additional states'])
-
-      const $hintText = $('.govuk-task-list__task_hint')
+      const $hintText = $component.find('.govuk-task-list__task_hint')
       expect($hintText.attr('id')).toEqual('task-list-example-3-hint')
 
-      const $itemAssociatedWithHint = $(`.govuk-task-list__link[aria-describedby~="${$hintText.attr('id')}"]`)
+      const $itemAssociatedWithHint = $component.find(
+        `.govuk-task-list__link[aria-describedby~="${$hintText.attr('id')}"]`
+      )
       expect($itemAssociatedWithHint.text()).toContain('Business plan')
     })
   })

From 5d5ddb0f69898e05ba961222892c692171553aab Mon Sep 17 00:00:00 2001
From: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>
Date: Mon, 10 Jul 2023 17:41:25 +0100
Subject: [PATCH 04/11] Add tests for custom classes

---
 .../govuk/components/task-list/task-list.yaml | 24 ++++++++++
 .../components/task-list/template.test.js     | 44 +++++++++++++++++++
 2 files changed, 68 insertions(+)

diff --git a/packages/govuk-frontend/src/govuk/components/task-list/task-list.yaml b/packages/govuk-frontend/src/govuk/components/task-list/task-list.yaml
index 93fc09d47b..5618f2ff37 100644
--- a/packages/govuk-frontend/src/govuk/components/task-list/task-list.yaml
+++ b/packages/govuk-frontend/src/govuk/components/task-list/task-list.yaml
@@ -279,3 +279,27 @@ examples:
             tag:
               text: Yellow
               classes: govuk-tag--yellow
+
+  # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
+  - name: custom classes
+    hidden: true
+    data:
+      classes: custom-class-on-component
+      items:
+        - title:
+            text: A Link
+            classes: custom-class-on-linked-title
+          href: '#'
+          classes: custom-class-on-task
+          status:
+            classes: custom-class-on-status
+            tag:
+              text: Status
+              classes: custom-class-on-tag
+
+        - title:
+            text: Not a link
+            classes: custom-class-on-unlinked-title
+          status:
+            tag:
+              text: Status
diff --git a/packages/govuk-frontend/src/govuk/components/task-list/template.test.js b/packages/govuk-frontend/src/govuk/components/task-list/template.test.js
index 9d69df7e91..ce70259cc7 100644
--- a/packages/govuk-frontend/src/govuk/components/task-list/template.test.js
+++ b/packages/govuk-frontend/src/govuk/components/task-list/template.test.js
@@ -15,6 +15,34 @@ describe('Task List', () => {
     expect($component.get(0).tagName).toEqual('ul')
   })
 
+  it('allows for custom classes on the root of the component', () => {
+    const $ = render('task-list', examples['custom classes'])
+
+    const $component = $('.govuk-task-list')
+    expect($component.hasClass('custom-class-on-component')).toBeTruthy()
+  })
+
+  it('allows for custom classes on each task', () => {
+    const $ = render('task-list', examples['custom classes'])
+
+    const $listItem = $('.govuk-task-list__item')
+    expect($listItem.hasClass('custom-class-on-task')).toBeTruthy()
+  })
+
+  it('allows for custom classes on each status', () => {
+    const $ = render('task-list', examples['custom classes'])
+
+    const $status = $('.govuk-task-list__status')
+    expect($status.hasClass('custom-class-on-status')).toBeTruthy()
+  })
+
+  it('allows for custom classes on tags', () => {
+    const $ = render('task-list', examples['custom classes'])
+
+    const $tag = $('.govuk-task-list__status .govuk-tag')
+    expect($tag.hasClass('custom-class-on-tag')).toBeTruthy()
+  })
+
   describe('when a task has an href set', () => {
     let $component
 
@@ -34,6 +62,14 @@ describe('Task List', () => {
 
       expect($statusWithId.text()).toContain('Completed')
     })
+
+    it('applies title classes to the link', () => {
+      const $ = render('task-list', examples['custom classes'])
+
+      const $itemWithLink = $('.govuk-task-list__item:first-child')
+      const $itemWithLinkTitle = $itemWithLink.find('.govuk-task-list__link')
+      expect($itemWithLinkTitle.hasClass('custom-class-on-linked-title')).toBeTruthy()
+    })
   })
 
   describe('when a task does not have an href set', () => {
@@ -44,6 +80,14 @@ describe('Task List', () => {
       const $itemWithNoLinkTitle = $itemWithNoLink.find('div')
       expect($itemWithNoLinkTitle.text()).toContain('Payment')
     })
+
+    it('applies title classes to the title wrapper div', () => {
+      const $ = render('task-list', examples['custom classes'])
+
+      const $itemWithNoLink = $('.govuk-task-list__item:last-child')
+      const $itemWithNoLinkTitle = $itemWithNoLink.find('.govuk-task-list__task-name-and-hint div')
+      expect($itemWithNoLinkTitle.hasClass('custom-class-on-unlinked-title')).toBeTruthy()
+    })
   })
 
   describe('when a task has a hint', () => {

From e9d621897d4040b16ed9e052666daa7035bbe0ba Mon Sep 17 00:00:00 2001
From: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>
Date: Mon, 10 Jul 2023 17:43:26 +0100
Subject: [PATCH 05/11] Add tests for custom attributes

---
 .../src/govuk/components/task-list/task-list.yaml   | 13 +++++++++++++
 .../src/govuk/components/task-list/template.test.js |  7 +++++++
 2 files changed, 20 insertions(+)

diff --git a/packages/govuk-frontend/src/govuk/components/task-list/task-list.yaml b/packages/govuk-frontend/src/govuk/components/task-list/task-list.yaml
index 5618f2ff37..316fbf53f6 100644
--- a/packages/govuk-frontend/src/govuk/components/task-list/task-list.yaml
+++ b/packages/govuk-frontend/src/govuk/components/task-list/task-list.yaml
@@ -303,3 +303,16 @@ examples:
           status:
             tag:
               text: Status
+
+  - name: custom attributes
+    hidden: true
+    data:
+      attributes:
+        data-custom-attribute: custom-value
+      items:
+        - title:
+            text: A Link
+          href: '#'
+          status:
+            tag:
+              text: Status
diff --git a/packages/govuk-frontend/src/govuk/components/task-list/template.test.js b/packages/govuk-frontend/src/govuk/components/task-list/template.test.js
index ce70259cc7..205bd16bb1 100644
--- a/packages/govuk-frontend/src/govuk/components/task-list/template.test.js
+++ b/packages/govuk-frontend/src/govuk/components/task-list/template.test.js
@@ -43,6 +43,13 @@ describe('Task List', () => {
     expect($tag.hasClass('custom-class-on-tag')).toBeTruthy()
   })
 
+  it('allows for custom attributes', () => {
+    const $ = render('task-list', examples['custom attributes'])
+
+    const $component = $('.govuk-task-list')
+    expect($component.attr('data-custom-attribute')).toEqual('custom-value')
+  })
+
   describe('when a task has an href set', () => {
     let $component
 

From 06eba5c72d1f6965ec3290847344e7b66fee55bc Mon Sep 17 00:00:00 2001
From: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>
Date: Mon, 10 Jul 2023 17:49:38 +0100
Subject: [PATCH 06/11] Add tests for customising the idPrefix

---
 .../govuk/components/task-list/task-list.yaml | 18 +++++++++---
 .../components/task-list/template.test.js     | 28 ++++++++++++++++++-
 2 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/packages/govuk-frontend/src/govuk/components/task-list/task-list.yaml b/packages/govuk-frontend/src/govuk/components/task-list/task-list.yaml
index 316fbf53f6..0c582ba3af 100644
--- a/packages/govuk-frontend/src/govuk/components/task-list/task-list.yaml
+++ b/packages/govuk-frontend/src/govuk/components/task-list/task-list.yaml
@@ -92,7 +92,6 @@ params:
 examples:
   - name: default
     data:
-      idPrefix: 'task-list-example'
       items:
         - title:
             text: Company Directors
@@ -118,7 +117,6 @@ examples:
 
   - name: example with 3 states
     data:
-      idPrefix: 'task-list-example'
       items:
         - title:
             text: Company Directors
@@ -149,7 +147,6 @@ examples:
 
   - name: example with hint text and additional states
     data:
-      idPrefix: 'task-list-example'
       items:
         - title:
             text: Company Directors
@@ -196,7 +193,6 @@ examples:
 
   - name: example with all possible colours
     data:
-      idPrefix: 'task-list-example'
       items:
         - title:
             text: Task A
@@ -316,3 +312,17 @@ examples:
           status:
             tag:
               text: Status
+
+  - name: custom id prefix
+    hidden: true
+    data:
+      idPrefix: my-custom-id
+      items:
+        - title:
+            text: A Link
+          hint:
+            text: Hint text
+          href: '#'
+          status:
+            tag:
+              text: Status
diff --git a/packages/govuk-frontend/src/govuk/components/task-list/template.test.js b/packages/govuk-frontend/src/govuk/components/task-list/template.test.js
index 205bd16bb1..608d12ab01 100644
--- a/packages/govuk-frontend/src/govuk/components/task-list/template.test.js
+++ b/packages/govuk-frontend/src/govuk/components/task-list/template.test.js
@@ -114,7 +114,7 @@ describe('Task List', () => {
 
     it('associates the hint text with the task link using aria', () => {
       const $hintText = $component.find('.govuk-task-list__task_hint')
-      expect($hintText.attr('id')).toEqual('task-list-example-3-hint')
+      expect($hintText.attr('id')).toEqual('task-list-3-hint')
 
       const $itemAssociatedWithHint = $component.find(
         `.govuk-task-list__link[aria-describedby~="${$hintText.attr('id')}"]`
@@ -122,4 +122,30 @@ describe('Task List', () => {
       expect($itemAssociatedWithHint.text()).toContain('Business plan')
     })
   })
+
+  describe('when a custom idPrefix is used', () => {
+    let $component
+
+    beforeAll(function () {
+      const $ = render('task-list', examples['custom id prefix'])
+      $component = $('.govuk-task-list')
+    })
+
+    it('uses the id prefix for the hint id', () => {
+      const $hint = $component.find('.govuk-task-list__task_hint')
+      expect($hint.attr('id')).toEqual('my-custom-id-1-hint')
+    })
+
+    it('uses the id prefix for the status', () => {
+      const $hint = $component.find('.govuk-task-list__status')
+      expect($hint.attr('id')).toEqual('my-custom-id-1-status')
+    })
+
+    it('uses the id prefix for the aria-describedby association', () => {
+      const $hint = $component.find('.govuk-task-list__link')
+      expect($hint.attr('aria-describedby')).toEqual(
+        'my-custom-id-1-hint my-custom-id-1-status'
+      )
+    })
+  })
 })

From 381e2f55d6c796772f4b7d2285123065113c3f68 Mon Sep 17 00:00:00 2001
From: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>
Date: Mon, 10 Jul 2023 17:51:30 +0100
Subject: [PATCH 07/11] Add test for the with-link modifier

---
 .../src/govuk/components/task-list/template.test.js          | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/govuk-frontend/src/govuk/components/task-list/template.test.js b/packages/govuk-frontend/src/govuk/components/task-list/template.test.js
index 608d12ab01..810b5a4fb1 100644
--- a/packages/govuk-frontend/src/govuk/components/task-list/template.test.js
+++ b/packages/govuk-frontend/src/govuk/components/task-list/template.test.js
@@ -63,6 +63,11 @@ describe('Task List', () => {
       expect($itemLink.attr('href')).toEqual('#')
     })
 
+    it('adds a with-link modifier class to the task', async () => {
+      const $itemLink = $component.find('.govuk-task-list__item')
+      expect($itemLink.hasClass('govuk-task-list__item--with-link')).toBeTruthy()
+    })
+
     it('associates the task name link with the status using aria', async () => {
       const $itemLink = $component.find('.govuk-task-list__link')
       const $statusWithId = $component.find(`#${$itemLink.attr('aria-describedby')}`)

From c48f9e18a824ed3db2f9c8fd09a3bbfdb89723e0 Mon Sep 17 00:00:00 2001
From: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>
Date: Tue, 11 Jul 2023 17:56:52 +0100
Subject: [PATCH 08/11] Add tests for html vs text

---
 .../govuk/components/task-list/task-list.yaml | 36 ++++++++
 .../components/task-list/template.test.js     | 92 +++++++++++++++++--
 2 files changed, 121 insertions(+), 7 deletions(-)

diff --git a/packages/govuk-frontend/src/govuk/components/task-list/task-list.yaml b/packages/govuk-frontend/src/govuk/components/task-list/task-list.yaml
index 0c582ba3af..c19996a5d7 100644
--- a/packages/govuk-frontend/src/govuk/components/task-list/task-list.yaml
+++ b/packages/govuk-frontend/src/govuk/components/task-list/task-list.yaml
@@ -326,3 +326,39 @@ examples:
           status:
             tag:
               text: Status
+
+  - name: html passed as text
+    hidden: true
+    data:
+      idPrefix: my-custom-id
+      items:
+        - title:
+            text: <strong>Linked Title</strong>
+          hint:
+            text: <strong>Hint</strong>
+          href: '#'
+          status:
+            text: <strong>Status</strong>
+        - title:
+            text: <strong>Unlinked Title</strong>
+          status:
+            tag:
+              text: <strong>Tag</strong>
+
+  - name: html
+    hidden: true
+    data:
+      idPrefix: my-custom-id
+      items:
+        - title:
+            html: <strong>Linked Title</strong>
+          hint:
+            html: <strong>Hint</strong>
+          href: '#'
+          status:
+            html: <strong>Status</strong>
+        - title:
+            html: <strong>Unlinked Title</strong>
+          status:
+            tag:
+              html: <strong>Tag</strong>
diff --git a/packages/govuk-frontend/src/govuk/components/task-list/template.test.js b/packages/govuk-frontend/src/govuk/components/task-list/template.test.js
index 810b5a4fb1..9da6372f25 100644
--- a/packages/govuk-frontend/src/govuk/components/task-list/template.test.js
+++ b/packages/govuk-frontend/src/govuk/components/task-list/template.test.js
@@ -36,13 +36,6 @@ describe('Task List', () => {
     expect($status.hasClass('custom-class-on-status')).toBeTruthy()
   })
 
-  it('allows for custom classes on tags', () => {
-    const $ = render('task-list', examples['custom classes'])
-
-    const $tag = $('.govuk-task-list__status .govuk-tag')
-    expect($tag.hasClass('custom-class-on-tag')).toBeTruthy()
-  })
-
   it('allows for custom attributes', () => {
     const $ = render('task-list', examples['custom attributes'])
 
@@ -82,6 +75,22 @@ describe('Task List', () => {
       const $itemWithLinkTitle = $itemWithLink.find('.govuk-task-list__link')
       expect($itemWithLinkTitle.hasClass('custom-class-on-linked-title')).toBeTruthy()
     })
+
+    it('escapes the title when passed as text', () => {
+      const $ = render('task-list', examples['html passed as text'])
+
+      const $itemWithLink = $('.govuk-task-list__item:first-child')
+      const $itemWithLinkTitle = $itemWithLink.find('.govuk-task-list__link')
+      expect($itemWithLinkTitle.text()).toEqual('<strong>Linked Title</strong>')
+    })
+
+    it('allows HTML in the title when passed as html', () => {
+      const $ = render('task-list', examples.html)
+
+      const $itemWithLink = $('.govuk-task-list__item:first-child')
+      const $itemWithLinkTitle = $itemWithLink.find('.govuk-task-list__link')
+      expect($itemWithLinkTitle.html()).toEqual('<strong>Linked Title</strong>')
+    })
   })
 
   describe('when a task does not have an href set', () => {
@@ -100,6 +109,61 @@ describe('Task List', () => {
       const $itemWithNoLinkTitle = $itemWithNoLink.find('.govuk-task-list__task-name-and-hint div')
       expect($itemWithNoLinkTitle.hasClass('custom-class-on-unlinked-title')).toBeTruthy()
     })
+
+    it('escapes the title when passed as text', () => {
+      const $ = render('task-list', examples['html passed as text'])
+
+      const $itemWithoutLink = $('.govuk-task-list__item:last-child')
+      const $itemWithoutLinkTitle = $itemWithoutLink.find('.govuk-task-list__task-name-and-hint')
+      expect($itemWithoutLinkTitle.text()).toContain('<strong>Unlinked Title</strong>')
+    })
+
+    it('allows HTML in the title when passed as html', () => {
+      const $ = render('task-list', examples.html)
+
+      const $itemWithoutLink = $('.govuk-task-list__item:last-child')
+      const $itemWithoutLinkTitle = $itemWithoutLink.find('.govuk-task-list__task-name-and-hint')
+      expect($itemWithoutLinkTitle.html()).toContain('<strong>Unlinked Title</strong>')
+    })
+  })
+
+  describe('when a task has a tag status', () => {
+    it('escapes the tag when passed as text', () => {
+      const $ = render('task-list', examples['html passed as text'])
+
+      const $tag = $('.govuk-tag')
+      expect($tag.text()).toContain('<strong>Tag</strong>')
+    })
+
+    it('allows HTML in the tag when passed as html', () => {
+      const $ = render('task-list', examples.html)
+
+      const $tag = $('.govuk-tag')
+      expect($tag.html()).toContain('<strong>Tag</strong>')
+    })
+
+    it('allows for custom classes on tags', () => {
+      const $ = render('task-list', examples['custom classes'])
+
+      const $tag = $('.govuk-task-list__status .govuk-tag')
+      expect($tag.hasClass('custom-class-on-tag')).toBeTruthy()
+    })
+  })
+
+  describe('when a task has a non-tag status', () => {
+    it('escapes the status when passed as text', () => {
+      const $ = render('task-list', examples['html passed as text'])
+
+      const $status = $('.govuk-task-list__status')
+      expect($status.text()).toContain('<strong>Status</strong>')
+    })
+
+    it('allows HTML in the tag when passed as html', () => {
+      const $ = render('task-list', examples.html)
+
+      const $status = $('.govuk-task-list__status')
+      expect($status.html()).toContain('<strong>Status</strong>')
+    })
   })
 
   describe('when a task has a hint', () => {
@@ -126,6 +190,20 @@ describe('Task List', () => {
       )
       expect($itemAssociatedWithHint.text()).toContain('Business plan')
     })
+
+    it('escapes the hint when passed as text', () => {
+      const $ = render('task-list', examples['html passed as text'])
+
+      const $hint = $('.govuk-task-list__task_hint')
+      expect($hint.text()).toContain('<strong>Hint</strong>')
+    })
+
+    it('allows HTML in the hint when passed as html', () => {
+      const $ = render('task-list', examples.html)
+
+      const $hint = $('.govuk-task-list__task_hint')
+      expect($hint.html()).toContain('<strong>Hint</strong>')
+    })
   })
 
   describe('when a custom idPrefix is used', () => {

From 3811af2ce91b06ab061133eeab937f4b26db773d Mon Sep 17 00:00:00 2001
From: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>
Date: Tue, 11 Jul 2023 18:03:25 +0100
Subject: [PATCH 09/11] Define tag as a nested component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This means that we’ll link to the guidance in the Design System for the tag component, rather than defining everything the tag component accepts in multiple places.
---
 .../govuk/components/task-list/task-list.yaml    | 16 ++--------------
 1 file changed, 2 insertions(+), 14 deletions(-)

diff --git a/packages/govuk-frontend/src/govuk/components/task-list/task-list.yaml b/packages/govuk-frontend/src/govuk/components/task-list/task-list.yaml
index c19996a5d7..3f8da4f687 100644
--- a/packages/govuk-frontend/src/govuk/components/task-list/task-list.yaml
+++ b/packages/govuk-frontend/src/govuk/components/task-list/task-list.yaml
@@ -41,21 +41,9 @@ params:
         params:
           - name: tag
             type: object
+            isComponent: true
             required: false
-            description: Object containing the options for a tag that acts as the status for the task.
-            params:
-              - name: text
-                type: string
-                required: true
-                description: Text to use within the tag. If `html` is provided, the `text` argument will be ignored.
-              - name: html
-                type: string
-                required: true
-                description: HTML to use within the tag. If `html` is provided, the `text` argument will be ignored.
-              - name: classes
-                type: string
-                required: false
-                description: Classes to add to the tag.
+            description: Options for the tag component.
           - name: text
             required: false
             type: string

From 14a9198d61d156b053aa13adb5aaacc6f9ef5bcb Mon Sep 17 00:00:00 2001
From: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>
Date: Tue, 11 Jul 2023 18:04:22 +0100
Subject: [PATCH 10/11] Import the tag component as a dependency
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This matches what we do in other components that call each other – it means that importing task list brings in everything you need for the component, rather than having to remember to import tag separately.
---
 .../govuk-frontend/src/govuk/components/task-list/_index.scss   | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/govuk-frontend/src/govuk/components/task-list/_index.scss b/packages/govuk-frontend/src/govuk/components/task-list/_index.scss
index 94c20ef621..ed8fbe7640 100644
--- a/packages/govuk-frontend/src/govuk/components/task-list/_index.scss
+++ b/packages/govuk-frontend/src/govuk/components/task-list/_index.scss
@@ -1,3 +1,5 @@
+@import "../tag/index";
+
 @include govuk-exports("govuk/component/task-list") {
   $govuk-task-list-hover-colour: govuk-colour("light-grey");
 

From f92aa5b8d698f7639177356bd6764f4bc5d2b91f Mon Sep 17 00:00:00 2001
From: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>
Date: Tue, 11 Jul 2023 18:05:58 +0100
Subject: [PATCH 11/11] Allow passing attributes for tags
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Because we’re just passing the options defined by the user straight through to the tag component we can simplify the code and just pass the entire `item.status.tag` object rather than each option individually.

Co-authored-by: Colin Rotherham <work@colinr.com>
---
 .../src/govuk/components/task-list/task-list.yaml          | 2 ++
 .../src/govuk/components/task-list/template.njk            | 6 +-----
 .../src/govuk/components/task-list/template.test.js        | 7 +++++++
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/govuk-frontend/src/govuk/components/task-list/task-list.yaml b/packages/govuk-frontend/src/govuk/components/task-list/task-list.yaml
index 3f8da4f687..0ee59c3437 100644
--- a/packages/govuk-frontend/src/govuk/components/task-list/task-list.yaml
+++ b/packages/govuk-frontend/src/govuk/components/task-list/task-list.yaml
@@ -300,6 +300,8 @@ examples:
           status:
             tag:
               text: Status
+              attributes:
+                data-tag-attribute: tag-value
 
   - name: custom id prefix
     hidden: true
diff --git a/packages/govuk-frontend/src/govuk/components/task-list/template.njk b/packages/govuk-frontend/src/govuk/components/task-list/template.njk
index 0e6ef856aa..cd3988253c 100644
--- a/packages/govuk-frontend/src/govuk/components/task-list/template.njk
+++ b/packages/govuk-frontend/src/govuk/components/task-list/template.njk
@@ -20,11 +20,7 @@
       </div>
       <div class="govuk-task-list__status {%- if item.status.classes %} {{ item.status.classes }}{% endif %}" id="{{ statusId }}">
         {% if item.status.tag %}
-          {{ govukTag({
-            text: item.status.tag.text,
-            html: item.status.tag.html,
-            classes: item.status.tag.classes
-          }) | indent(4) | trim }}
+          {{ govukTag(item.status.tag) | indent(4) | trim }}
         {% else %}
           {{ item.status.html | safe if item.status.html else item.status.text }}
         {% endif %}
diff --git a/packages/govuk-frontend/src/govuk/components/task-list/template.test.js b/packages/govuk-frontend/src/govuk/components/task-list/template.test.js
index 9da6372f25..80bb79c13d 100644
--- a/packages/govuk-frontend/src/govuk/components/task-list/template.test.js
+++ b/packages/govuk-frontend/src/govuk/components/task-list/template.test.js
@@ -148,6 +148,13 @@ describe('Task List', () => {
       const $tag = $('.govuk-task-list__status .govuk-tag')
       expect($tag.hasClass('custom-class-on-tag')).toBeTruthy()
     })
+
+    it('allows for custom attributes on tags', () => {
+      const $ = render('task-list', examples['custom attributes'])
+
+      const $component = $('.govuk-tag')
+      expect($component.attr('data-tag-attribute')).toEqual('tag-value')
+    })
   })
 
   describe('when a task has a non-tag status', () => {