govuk_publishing_components 42.0.0 → 43.0.0

data/node_modules/govuk-frontend/dist/govuk/components/tabs/template-tabs-with-anchor-in-panel.html

@@ -3,26 +3,24 @@
     Contents
   </h2>
   <ul class="govuk-tabs__list">
-        <li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
-          <a class="govuk-tabs__tab" href="#tab-1">
-            Tab 1
-          </a>
-        </li>
-        <li class="govuk-tabs__list-item">
-          <a class="govuk-tabs__tab" href="#tab-2">
-            Tab 2
-          </a>
-        </li>
+    <li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
+      <a class="govuk-tabs__tab" href="#tab-1">
+        Tab 1
+      </a>
+    </li>
+    <li class="govuk-tabs__list-item">
+      <a class="govuk-tabs__tab" href="#tab-2">
+        Tab 2
+      </a>
+    </li>
   </ul>
-      <div class="govuk-tabs__panel" id="tab-1">
-          <h2 class="govuk-heading-l">Tab 1</h2>
-<p class="govuk-body">Testing that when you click the anchor it moves to the anchor point successfully</p>
-<p class="govuk-body"><a class="govuk-link" href="#anchor">Anchor</a></p>
-<p class="govuk-body"><a id="anchor" tabindex="0">Anchor Point</a></p>
-
-      </div>
-      <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="tab-2">
-          <h2 class="govuk-heading-l">Tab 2</h2>
-
-      </div>
+  <div class="govuk-tabs__panel" id="tab-1">
+    <h2 class="govuk-heading-l">Tab 1</h2>
+    <p class="govuk-body">Testing that when you click the anchor it moves to the anchor point successfully</p>
+    <p class="govuk-body"><a class="govuk-link" href="#anchor">Anchor</a></p>
+    <p class="govuk-body"><a id="anchor" tabindex="0">Anchor Point</a></p>
+  </div>
+  <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="tab-2">
+    <h2 class="govuk-heading-l">Tab 2</h2>
+  </div>
 </div>

data/node_modules/govuk-frontend/dist/govuk/components/tabs/template.njk

@@ -1,36 +1,48 @@
+{% from "../../macros/attributes.njk" import govukAttributes %}
+
+{%- macro _tabListItem(params, item, index) %}
+{% set tabPanelId = item.id if item.id else idPrefix + "-" + index -%}
+<li class="govuk-tabs__list-item {%- if index == 1 %} govuk-tabs__list-item--selected{% endif %}">
+  <a class="govuk-tabs__tab" href="#{{ tabPanelId }}"
+    {{- govukAttributes(item.attributes) }}>
+    {{ item.label }}
+  </a>
+</li>
+{% endmacro -%}
+
+{%- macro _tabPanel(params, item, index) %}
+{% set tabPanelId = item.id if item.id else idPrefix + "-" + index -%}
+<div class="govuk-tabs__panel {%- if index > 1 %} govuk-tabs__panel--hidden{% endif %}" id="{{ tabPanelId }}"
+  {{- govukAttributes(item.panel.attributes) }}>
+{% if item.panel.html %}
+  {{ item.panel.html | safe | trim | indent(2) }}
+{% elif item.panel.text %}
+  <p class="govuk-body">{{ item.panel.text }}</p>
+{% endif %}
+</div>
+{% endmacro -%}
+
 {#- If an id 'prefix' is not passed, fall back to using the name attribute
   instead. We need this for error messages and hints as well -#}
 {% set idPrefix = params.idPrefix if params.idPrefix -%}
 
-<div {%- if params.id %} id="{{ params.id }}"{% endif %} class="govuk-tabs {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} data-module="govuk-tabs">
+<div {%- if params.id %} id="{{ params.id }}"{% endif %} class="govuk-tabs {%- if params.classes %} {{ params.classes }}{% endif %}"
+  {{- govukAttributes(params.attributes) }} data-module="govuk-tabs">
   <h2 class="govuk-tabs__title">
     {{ params.title | default ("Contents") }}
   </h2>
-  {% if(params.items | length) %}
+{% if params.items | length %}
   <ul class="govuk-tabs__list">
     {% for item in params.items %}
       {% if item %}
-        {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
-        <li class="govuk-tabs__list-item {%- if loop.index == 1 %} govuk-tabs__list-item--selected{% endif %}">
-          <a class="govuk-tabs__tab" href="#{{ id }}"
-            {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-            {{ item.label }}
-          </a>
-        </li>
+        {{- _tabListItem(params, item, loop.index) | trim | indent(4, true) }}
       {% endif %}
     {% endfor %}
   </ul>
-  {% endif %}
   {% for item in params.items %}
     {% if item %}
-      {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
-      <div class="govuk-tabs__panel {%- if loop.index > 1 %} govuk-tabs__panel--hidden{% endif %}" id="{{ id }}" {%- for attribute, value in item.panel.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-        {% if item.panel.html %}
-          {{ item.panel.html | safe }}
-        {% elif item.panel.text %}
-          <p class="govuk-body">{{ item.panel.text }}</p>
-        {% endif %}
-      </div>
+      {{- _tabPanel(params, item, loop.index) | trim | indent(2, true) }}
     {% endif %}
   {% endfor %}
+{% endif %}
 </div>

data/node_modules/govuk-frontend/dist/govuk/components/tag/_index.scss

@@ -12,11 +12,12 @@
     // where to break off of.
     max-width: $govuk-tag-max-width;
 
-    // These negative margins make sure that the tag component doesn’t increase the
-    // size of its container. Otherwise, for example, a table row containing a tag
-    // will be taller than one containing plain text.
+    // These negative margins make sure that the tag component doesn’t increase
+    // the size of its container. Otherwise, for example, a table row containing
+    // a tag will be taller than one containing plain text.
     //
-    // The negative margin added to the top and bottom matches the extra padding added.
+    // The negative margin added to the top and bottom matches the extra padding
+    // added.
     margin-top: -2px;
     margin-bottom: -3px;
 
@@ -30,11 +31,13 @@
     overflow-wrap: break-word;
 
     // When forced colour mode is active, for example to provide high contrast,
-    // the background colour of the tag is the same as the rest of the page. To ensure
-    // that the tag is perceived as separate from any surround text, it is made bold.
+    // the background colour of the tag is the same as the rest of the page. To
+    // ensure that the tag is perceived as separate from any surround text, it
+    // is made bold.
     //
-    // Transparent outlines are no longer added, as they make the Tag look indistinguishable
-    // from a button – but the tag is not interactive in the same way.
+    // Transparent outlines are no longer added, as they make the Tag look
+    // indistinguishable from a button – but the tag is not interactive in the
+    // same way.
     @media screen and (forced-colors: active) {
       font-weight: bold;
     }

data/node_modules/govuk-frontend/dist/govuk/components/tag/_index.scss.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/govuk/components/tag/_index.scss"],"names":[],"mappings":"AAAA;EACE,qHAAqH;;EAErH;IACE,8BAA8B;;IAE9B,qBAAqB;;IAErB,0EAA0E;IAC1E,uEAAuE;IACvE,0EAA0E;IAC1E,wBAAwB;IACxB,+BAA+B;;IAE/B,8EAA8E;IAC9E,6EAA6E;IAC7E,gDAAgD;IAChD,CAAC;IACD,kFAAkF;IAClF,gBAAgB;IAChB,mBAAmB;;IAEnB,gBAAgB;IAChB,kBAAkB;IAClB,mBAAmB;IACnB,iBAAiB;IACjB,6CAA6C;IAC7C,uDAAuD;IACvD,qBAAqB;IACrB,yBAAyB;;IAEzB,0EAA0E;IAC1E,iFAAiF;IACjF,gFAAgF;IAChF,CAAC;IACD,uFAAuF;IACvF,iEAAiE;IACjE;MACE,iBAAiB;IACnB;EACF;;EAEA;IACE,kDAAkD;IAClD,4DAA4D;EAC9D;;EAEA;IACE,sDAAsD;IACtD,gEAAgE;EAClE;;EAEA;IACE,kDAAkD;IAClD,4DAA4D;EAC9D;;EAEA;IACE,6CAA6C;IAC7C,uDAAuD;EACzD;;EAEA;IACE,6CAA6C;IAC7C,uDAAuD;EACzD;;EAEA;IACE,+CAA+C;IAC/C,yDAAyD;EAC3D;;EAEA;IACE,+CAA+C;IAC/C,yDAAyD;EAC3D;;EAEA;IACE,4CAA4C;IAC5C,sDAAsD;EACxD;;EAEA;IACE,6CAA6C;IAC7C,uDAAuD;EACzD;;EAEA;IACE,8CAA8C;IAC9C,wDAAwD;EAC1D;AACF","file":"_index.scss","sourcesContent":["@include govuk-exports(\"govuk/component/tag\") {\n  $govuk-tag-max-width: if(map-has-key($govuk-breakpoints, \"mobile\"), map-get($govuk-breakpoints, \"mobile\") / 2, 160px);\n\n  .govuk-tag {\n    @include govuk-font($size: 19);\n\n    display: inline-block;\n\n    // set a max-width along with overflow-wrap: break-word below for instances\n    // where a tag has a single long word and could overflow its boundaries.\n    // The max-width is necessary as break-word requires a bounding box to base\n    // where to break off of.\n    max-width: $govuk-tag-max-width;\n\n    // These negative margins make sure that the tag component doesn’t increase the\n    // size of its container. Otherwise, for example, a table row containing a tag\n    // will be taller than one containing plain text.\n    //\n    // The negative margin added to the top and bottom matches the extra padding added.\n    margin-top: -2px;\n    margin-bottom: -3px;\n\n    padding-top: 2px;\n    padding-right: 8px;\n    padding-bottom: 3px;\n    padding-left: 8px;\n    color: govuk-shade(govuk-colour(\"blue\"), 60%);\n    background-color: govuk-tint(govuk-colour(\"blue\"), 70%);\n    text-decoration: none;\n    overflow-wrap: break-word;\n\n    // When forced colour mode is active, for example to provide high contrast,\n    // the background colour of the tag is the same as the rest of the page. To ensure\n    // that the tag is perceived as separate from any surround text, it is made bold.\n    //\n    // Transparent outlines are no longer added, as they make the Tag look indistinguishable\n    // from a button – but the tag is not interactive in the same way.\n    @media screen and (forced-colors: active) {\n      font-weight: bold;\n    }\n  }\n\n  .govuk-tag--grey {\n    color: govuk-shade(govuk-colour(\"dark-grey\"), 50%);\n    background-color: govuk-tint(govuk-colour(\"dark-grey\"), 85%);\n  }\n\n  .govuk-tag--purple {\n    color: govuk-shade(govuk-colour(\"bright-purple\"), 50%);\n    background-color: govuk-tint(govuk-colour(\"bright-purple\"), 85%);\n  }\n\n  .govuk-tag--turquoise {\n    color: govuk-shade(govuk-colour(\"turquoise\"), 60%);\n    background-color: govuk-tint(govuk-colour(\"turquoise\"), 80%);\n  }\n\n  .govuk-tag--blue {\n    color: govuk-shade(govuk-colour(\"blue\"), 60%);\n    background-color: govuk-tint(govuk-colour(\"blue\"), 70%);\n  }\n\n  .govuk-tag--light-blue {\n    color: govuk-shade(govuk-colour(\"blue\"), 60%);\n    background-color: govuk-tint(govuk-colour(\"blue\"), 90%);\n  }\n\n  .govuk-tag--yellow {\n    color: govuk-shade(govuk-colour(\"yellow\"), 65%);\n    background-color: govuk-tint(govuk-colour(\"yellow\"), 75%);\n  }\n\n  .govuk-tag--orange {\n    color: govuk-shade(govuk-colour(\"orange\"), 55%);\n    background-color: govuk-tint(govuk-colour(\"orange\"), 70%);\n  }\n\n  .govuk-tag--red {\n    color: govuk-shade(govuk-colour(\"red\"), 80%);\n    background-color: govuk-tint(govuk-colour(\"red\"), 75%);\n  }\n\n  .govuk-tag--pink {\n    color: govuk-shade(govuk-colour(\"pink\"), 50%);\n    background-color: govuk-tint(govuk-colour(\"pink\"), 85%);\n  }\n\n  .govuk-tag--green {\n    color: govuk-shade(govuk-colour(\"green\"), 20%);\n    background-color: govuk-tint(govuk-colour(\"green\"), 80%);\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/govuk/components/tag/_index.scss"],"names":[],"mappings":"AAAA;EACE,qHAAqH;;EAErH;IACE,8BAA8B;;IAE9B,qBAAqB;;IAErB,0EAA0E;IAC1E,uEAAuE;IACvE,0EAA0E;IAC1E,wBAAwB;IACxB,+BAA+B;;IAE/B,0EAA0E;IAC1E,2EAA2E;IAC3E,sDAAsD;IACtD,CAAC;IACD,2EAA2E;IAC3E,QAAQ;IACR,gBAAgB;IAChB,mBAAmB;;IAEnB,gBAAgB;IAChB,kBAAkB;IAClB,mBAAmB;IACnB,iBAAiB;IACjB,6CAA6C;IAC7C,uDAAuD;IACvD,qBAAqB;IACrB,yBAAyB;;IAEzB,0EAA0E;IAC1E,0EAA0E;IAC1E,yEAAyE;IACzE,eAAe;IACf,CAAC;IACD,qEAAqE;IACrE,yEAAyE;IACzE,WAAW;IACX;MACE,iBAAiB;IACnB;EACF;;EAEA;IACE,kDAAkD;IAClD,4DAA4D;EAC9D;;EAEA;IACE,sDAAsD;IACtD,gEAAgE;EAClE;;EAEA;IACE,kDAAkD;IAClD,4DAA4D;EAC9D;;EAEA;IACE,6CAA6C;IAC7C,uDAAuD;EACzD;;EAEA;IACE,6CAA6C;IAC7C,uDAAuD;EACzD;;EAEA;IACE,+CAA+C;IAC/C,yDAAyD;EAC3D;;EAEA;IACE,+CAA+C;IAC/C,yDAAyD;EAC3D;;EAEA;IACE,4CAA4C;IAC5C,sDAAsD;EACxD;;EAEA;IACE,6CAA6C;IAC7C,uDAAuD;EACzD;;EAEA;IACE,8CAA8C;IAC9C,wDAAwD;EAC1D;AACF","file":"_index.scss","sourcesContent":["@include govuk-exports(\"govuk/component/tag\") {\n  $govuk-tag-max-width: if(map-has-key($govuk-breakpoints, \"mobile\"), map-get($govuk-breakpoints, \"mobile\") / 2, 160px);\n\n  .govuk-tag {\n    @include govuk-font($size: 19);\n\n    display: inline-block;\n\n    // set a max-width along with overflow-wrap: break-word below for instances\n    // where a tag has a single long word and could overflow its boundaries.\n    // The max-width is necessary as break-word requires a bounding box to base\n    // where to break off of.\n    max-width: $govuk-tag-max-width;\n\n    // These negative margins make sure that the tag component doesn’t increase\n    // the size of its container. Otherwise, for example, a table row containing\n    // a tag will be taller than one containing plain text.\n    //\n    // The negative margin added to the top and bottom matches the extra padding\n    // added.\n    margin-top: -2px;\n    margin-bottom: -3px;\n\n    padding-top: 2px;\n    padding-right: 8px;\n    padding-bottom: 3px;\n    padding-left: 8px;\n    color: govuk-shade(govuk-colour(\"blue\"), 60%);\n    background-color: govuk-tint(govuk-colour(\"blue\"), 70%);\n    text-decoration: none;\n    overflow-wrap: break-word;\n\n    // When forced colour mode is active, for example to provide high contrast,\n    // the background colour of the tag is the same as the rest of the page. To\n    // ensure that the tag is perceived as separate from any surround text, it\n    // is made bold.\n    //\n    // Transparent outlines are no longer added, as they make the Tag look\n    // indistinguishable from a button – but the tag is not interactive in the\n    // same way.\n    @media screen and (forced-colors: active) {\n      font-weight: bold;\n    }\n  }\n\n  .govuk-tag--grey {\n    color: govuk-shade(govuk-colour(\"dark-grey\"), 50%);\n    background-color: govuk-tint(govuk-colour(\"dark-grey\"), 85%);\n  }\n\n  .govuk-tag--purple {\n    color: govuk-shade(govuk-colour(\"bright-purple\"), 50%);\n    background-color: govuk-tint(govuk-colour(\"bright-purple\"), 85%);\n  }\n\n  .govuk-tag--turquoise {\n    color: govuk-shade(govuk-colour(\"turquoise\"), 60%);\n    background-color: govuk-tint(govuk-colour(\"turquoise\"), 80%);\n  }\n\n  .govuk-tag--blue {\n    color: govuk-shade(govuk-colour(\"blue\"), 60%);\n    background-color: govuk-tint(govuk-colour(\"blue\"), 70%);\n  }\n\n  .govuk-tag--light-blue {\n    color: govuk-shade(govuk-colour(\"blue\"), 60%);\n    background-color: govuk-tint(govuk-colour(\"blue\"), 90%);\n  }\n\n  .govuk-tag--yellow {\n    color: govuk-shade(govuk-colour(\"yellow\"), 65%);\n    background-color: govuk-tint(govuk-colour(\"yellow\"), 75%);\n  }\n\n  .govuk-tag--orange {\n    color: govuk-shade(govuk-colour(\"orange\"), 55%);\n    background-color: govuk-tint(govuk-colour(\"orange\"), 70%);\n  }\n\n  .govuk-tag--red {\n    color: govuk-shade(govuk-colour(\"red\"), 80%);\n    background-color: govuk-tint(govuk-colour(\"red\"), 75%);\n  }\n\n  .govuk-tag--pink {\n    color: govuk-shade(govuk-colour(\"pink\"), 50%);\n    background-color: govuk-tint(govuk-colour(\"pink\"), 85%);\n  }\n\n  .govuk-tag--green {\n    color: govuk-shade(govuk-colour(\"green\"), 20%);\n    background-color: govuk-tint(govuk-colour(\"green\"), 80%);\n  }\n}\n"]}

data/node_modules/govuk-frontend/dist/govuk/components/tag/fixtures.json

@@ -9,6 +9,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<strong class=\"govuk-tag\">\n  Alpha\n</strong>"
         },
         {
@@ -20,6 +21,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<strong class=\"govuk-tag govuk-tag--grey\">\n  Grey\n</strong>"
         },
         {
@@ -31,6 +33,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<strong class=\"govuk-tag govuk-tag--blue\">\n  Blue\n</strong>"
         },
         {
@@ -42,6 +45,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<strong class=\"govuk-tag govuk-tag--light-blue\">\n  Light blue\n</strong>"
         },
         {
@@ -53,6 +57,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<strong class=\"govuk-tag govuk-tag--turquoise\">\n  Turquoise\n</strong>"
         },
         {
@@ -64,6 +69,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<strong class=\"govuk-tag govuk-tag--green\">\n  Green\n</strong>"
         },
         {
@@ -75,6 +81,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<strong class=\"govuk-tag govuk-tag--purple\">\n  Purple\n</strong>"
         },
         {
@@ -86,6 +93,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<strong class=\"govuk-tag govuk-tag--pink\">\n  Pink\n</strong>"
         },
         {
@@ -97,6 +105,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<strong class=\"govuk-tag govuk-tag--red\">\n  Red\n</strong>"
         },
         {
@@ -108,6 +117,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<strong class=\"govuk-tag govuk-tag--orange\">\n  Orange\n</strong>"
         },
         {
@@ -119,6 +129,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<strong class=\"govuk-tag govuk-tag--yellow\">\n  Yellow\n</strong>"
         },
         {
@@ -133,6 +144,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<strong class=\"govuk-tag\" data-test=\"attribute\" id=\"my-tag\">\n  Tag with attributes\n</strong>"
         },
         {
@@ -143,6 +155,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<strong class=\"govuk-tag\">\n  &lt;span&gt;Alpha&lt;/span&gt;\n</strong>"
         },
         {
@@ -153,6 +166,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
+            "screenshot": false,
             "html": "<strong class=\"govuk-tag\">\n  <span>Alpha</span>\n</strong>"
         }
     ]

data/node_modules/govuk-frontend/dist/govuk/components/tag/template.njk

@@ -1,3 +1,6 @@
-<strong class="govuk-tag {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-  {{ params.html | safe if params.html else params.text }}
+{% from "../../macros/attributes.njk" import govukAttributes -%}
+
+<strong class="govuk-tag {%- if params.classes %} {{ params.classes }}{% endif %}"
+  {{- govukAttributes(params.attributes) }}>
+  {{ params.html | safe | trim | indent(2) if params.html else params.text }}
 </strong>

data/node_modules/govuk-frontend/dist/govuk/components/task-list/_index.scss

@@ -11,11 +11,13 @@
     list-style-type: none;
   }
 
-  // This uses table layout so that the task name and status always appear side-by-side, with the width of
-  // each 'column' being flexible depending upon the length of the task names and statuses.
+  // This uses table layout so that the task name and status always appear
+  // side-by-side, with the width of each 'column' being flexible depending upon
+  // the length of the task names and statuses.
   //
-  // The position is set to 'relative' so than an absolutely-positioned transparent element box
-  // can be added within the link so that the whole row can be clickable.
+  // The position is set to 'relative' so than an absolutely-positioned
+  // transparent element box can be added within the link so that the whole row
+  // can be clickable.
   .govuk-task-list__item {
     display: table;
     position: relative;
@@ -30,9 +32,9 @@
     border-top: 1px solid $govuk-border-colour;
   }
 
-  // This class is added to the <li> elements where the task name is a link.
-  // The background hover colour is added to help indicate that the whole row is clickable, rather
-  // than just the visible link text.
+  // This class is added to the <li> elements where the task name is a link. The
+  // background hover colour is added to help indicate that the whole row is
+  // clickable, rather than just the visible link text.
   .govuk-task-list__item--with-link:hover {
     background: $govuk-task-list-hover-colour;
   }
@@ -55,9 +57,9 @@
     color: $govuk-secondary-text-colour;
   }
 
-  // This adds an empty transparent box covering the whole row, including the task status and
-  // any hint text. Because this is generated within the link element, this allows the whole area
-  // to be clickable.
+  // This adds an empty transparent box covering the whole row, including the
+  // task status and any hint text. Because this is generated within the link
+  // element, this allows the whole area to be clickable.
   .govuk-task-list__link::after {
     content: "";
     display: block;

data/node_modules/govuk-frontend/dist/govuk/components/task-list/_index.scss.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/govuk/components/task-list/_index.scss"],"names":[],"mappings":"AAAA,sBAAsB;;AAEtB;EACE,yDAAyD;;EAEzD;IACE,8BAA8B;IAC9B,aAAa;IACb,6CAA6C;IAC7C,UAAU;IACV,qBAAqB;EACvB;;EAEA,uGAAuG;EACvG,wFAAwF;EACxF,CAAC;EACD,4FAA4F;EAC5F,sEAAsE;EACtE;IACE,cAAc;IACd,kBAAkB;IAClB,WAAW;IACX,gBAAgB;IAChB,6BAA6B;IAC7B,gCAAgC;IAChC,6CAA6C;EAC/C;;EAEA;IACE,0CAA0C;EAC5C;;EAEA,yEAAyE;EACzE,+FAA+F;EAC/F,kCAAkC;EAClC;IACE,yCAAyC;EAC3C;;EAEA;IACE,mBAAmB;IACnB,mBAAmB;IACnB,0BAA0B;EAC5B;;EAEA;IACE,mBAAmB;IACnB,8BAA8B;IAC9B,iBAAiB;IACjB,mBAAmB;IACnB,0BAA0B;EAC5B;;EAEA;IACE,mCAAmC;EACrC;;EAEA,0FAA0F;EAC1F,8FAA8F;EAC9F,kBAAkB;EAClB;IACE,WAAW;IACX,cAAc;IACd,kBAAkB;IAClB,MAAM;IACN,QAAQ;IACR,SAAS;IACT,OAAO;EACT;;EAEA;IACE,4BAA4B;IAC5B,mCAAmC;EACrC;AACF","file":"_index.scss","sourcesContent":["@import \"../tag/index\";\n\n@include govuk-exports(\"govuk/component/task-list\") {\n  $govuk-task-list-hover-colour: govuk-colour(\"light-grey\");\n\n  .govuk-task-list {\n    @include govuk-font($size: 19);\n    margin-top: 0;\n    @include govuk-responsive-margin(6, \"bottom\");\n    padding: 0;\n    list-style-type: none;\n  }\n\n  // This uses table layout so that the task name and status always appear side-by-side, with the width of\n  // each 'column' being flexible depending upon the length of the task names and statuses.\n  //\n  // The position is set to 'relative' so than an absolutely-positioned transparent element box\n  // can be added within the link so that the whole row can be clickable.\n  .govuk-task-list__item {\n    display: table;\n    position: relative;\n    width: 100%;\n    margin-bottom: 0;\n    padding-top: govuk-spacing(2);\n    padding-bottom: govuk-spacing(2);\n    border-bottom: 1px solid $govuk-border-colour;\n  }\n\n  .govuk-task-list__item:first-child {\n    border-top: 1px solid $govuk-border-colour;\n  }\n\n  // This class is added to the <li> elements where the task name is a link.\n  // The background hover colour is added to help indicate that the whole row is clickable, rather\n  // than just the visible link text.\n  .govuk-task-list__item--with-link:hover {\n    background: $govuk-task-list-hover-colour;\n  }\n\n  .govuk-task-list__name-and-hint {\n    display: table-cell;\n    vertical-align: top;\n    @include govuk-text-colour;\n  }\n\n  .govuk-task-list__status {\n    display: table-cell;\n    padding-left: govuk-spacing(2);\n    text-align: right;\n    vertical-align: top;\n    @include govuk-text-colour;\n  }\n\n  .govuk-task-list__status--cannot-start-yet {\n    color: $govuk-secondary-text-colour;\n  }\n\n  // This adds an empty transparent box covering the whole row, including the task status and\n  // any hint text. Because this is generated within the link element, this allows the whole area\n  // to be clickable.\n  .govuk-task-list__link::after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n  }\n\n  .govuk-task-list__hint {\n    margin-top: govuk-spacing(1);\n    color: $govuk-secondary-text-colour;\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/govuk/components/task-list/_index.scss"],"names":[],"mappings":"AAAA,sBAAsB;;AAEtB;EACE,yDAAyD;;EAEzD;IACE,8BAA8B;IAC9B,aAAa;IACb,6CAA6C;IAC7C,UAAU;IACV,qBAAqB;EACvB;;EAEA,uEAAuE;EACvE,6EAA6E;EAC7E,4CAA4C;EAC5C,CAAC;EACD,oEAAoE;EACpE,4EAA4E;EAC5E,mBAAmB;EACnB;IACE,cAAc;IACd,kBAAkB;IAClB,WAAW;IACX,gBAAgB;IAChB,6BAA6B;IAC7B,gCAAgC;IAChC,6CAA6C;EAC/C;;EAEA;IACE,0CAA0C;EAC5C;;EAEA,6EAA6E;EAC7E,yEAAyE;EACzE,oDAAoD;EACpD;IACE,yCAAyC;EAC3C;;EAEA;IACE,mBAAmB;IACnB,mBAAmB;IACnB,0BAA0B;EAC5B;;EAEA;IACE,mBAAmB;IACnB,8BAA8B;IAC9B,iBAAiB;IACjB,mBAAmB;IACnB,0BAA0B;EAC5B;;EAEA;IACE,mCAAmC;EACrC;;EAEA,0EAA0E;EAC1E,0EAA0E;EAC1E,sDAAsD;EACtD;IACE,WAAW;IACX,cAAc;IACd,kBAAkB;IAClB,MAAM;IACN,QAAQ;IACR,SAAS;IACT,OAAO;EACT;;EAEA;IACE,4BAA4B;IAC5B,mCAAmC;EACrC;AACF","file":"_index.scss","sourcesContent":["@import \"../tag/index\";\n\n@include govuk-exports(\"govuk/component/task-list\") {\n  $govuk-task-list-hover-colour: govuk-colour(\"light-grey\");\n\n  .govuk-task-list {\n    @include govuk-font($size: 19);\n    margin-top: 0;\n    @include govuk-responsive-margin(6, \"bottom\");\n    padding: 0;\n    list-style-type: none;\n  }\n\n  // This uses table layout so that the task name and status always appear\n  // side-by-side, with the width of each 'column' being flexible depending upon\n  // the length of the task names and statuses.\n  //\n  // The position is set to 'relative' so than an absolutely-positioned\n  // transparent element box can be added within the link so that the whole row\n  // can be clickable.\n  .govuk-task-list__item {\n    display: table;\n    position: relative;\n    width: 100%;\n    margin-bottom: 0;\n    padding-top: govuk-spacing(2);\n    padding-bottom: govuk-spacing(2);\n    border-bottom: 1px solid $govuk-border-colour;\n  }\n\n  .govuk-task-list__item:first-child {\n    border-top: 1px solid $govuk-border-colour;\n  }\n\n  // This class is added to the <li> elements where the task name is a link. The\n  // background hover colour is added to help indicate that the whole row is\n  // clickable, rather than just the visible link text.\n  .govuk-task-list__item--with-link:hover {\n    background: $govuk-task-list-hover-colour;\n  }\n\n  .govuk-task-list__name-and-hint {\n    display: table-cell;\n    vertical-align: top;\n    @include govuk-text-colour;\n  }\n\n  .govuk-task-list__status {\n    display: table-cell;\n    padding-left: govuk-spacing(2);\n    text-align: right;\n    vertical-align: top;\n    @include govuk-text-colour;\n  }\n\n  .govuk-task-list__status--cannot-start-yet {\n    color: $govuk-secondary-text-colour;\n  }\n\n  // This adds an empty transparent box covering the whole row, including the\n  // task status and any hint text. Because this is generated within the link\n  // element, this allows the whole area to be clickable.\n  .govuk-task-list__link::after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n  }\n\n  .govuk-task-list__hint {\n    margin-top: govuk-spacing(1);\n    color: $govuk-secondary-text-colour;\n  }\n}\n"]}

data/node_modules/govuk-frontend/dist/govuk/components/task-list/fixtures.json

@@ -43,7 +43,8 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<ul class=\"govuk-task-list\">\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-1-status\">Company Directors</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-1-status\">\n          Completed\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-2-status\">Registered company details</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-2-status\">\n          <strong class=\"govuk-tag govuk-tag--blue\">\n      Incomplete\n    </strong>\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-3-status\">Business plan</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-3-status\">\n          <strong class=\"govuk-tag govuk-tag--blue\">\n      Incomplete\n    </strong>\n      </div>\n    </li>\n</ul>"
+            "screenshot": false,
+            "html": "<ul class=\"govuk-task-list\">\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-1-status\">\n        Company Directors\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-1-status\">\n      Completed\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-2-status\">\n        Registered company details\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-2-status\">\n      <strong class=\"govuk-tag govuk-tag--blue\">\n        Incomplete\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-3-status\">\n        Business plan\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-3-status\">\n      <strong class=\"govuk-tag govuk-tag--blue\">\n        Incomplete\n      </strong>\n    </div>\n  </li>\n</ul>"
         },
         {
             "name": "example with 3 states",
@@ -99,7 +100,8 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<ul class=\"govuk-task-list\">\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-1-status\">Company Directors</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-1-status\">\n          Completed\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-2-status\">Registered company details</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-2-status\">\n          <strong class=\"govuk-tag govuk-tag--light-blue\">\n      Not started\n    </strong>\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-3-status\">Business plan</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-3-status\">\n          <strong class=\"govuk-tag govuk-tag--blue\">\n      In progress\n    </strong>\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-4-status\">Documentation</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-4-status\">\n          <strong class=\"govuk-tag govuk-tag--light-blue\">\n      Not started\n    </strong>\n      </div>\n    </li>\n</ul>"
+            "screenshot": false,
+            "html": "<ul class=\"govuk-task-list\">\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-1-status\">\n        Company Directors\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-1-status\">\n      Completed\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-2-status\">\n        Registered company details\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-2-status\">\n      <strong class=\"govuk-tag govuk-tag--light-blue\">\n        Not started\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-3-status\">\n        Business plan\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-3-status\">\n      <strong class=\"govuk-tag govuk-tag--blue\">\n        In progress\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-4-status\">\n        Documentation\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-4-status\">\n      <strong class=\"govuk-tag govuk-tag--light-blue\">\n        Not started\n      </strong>\n    </div>\n  </li>\n</ul>"
         },
         {
             "name": "example with hint text and additional states",
@@ -182,7 +184,8 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<ul class=\"govuk-task-list\">\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-1-status\">Company Directors</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-1-status\">\n          Completed\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-2-status\">Registered company details</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-2-status\">\n          <strong class=\"govuk-tag govuk-tag--light-blue\">\n      Not started\n    </strong>\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-3-hint task-list-3-status\">Business plan</a>\n          <div id=\"task-list-3-hint\" class=\"govuk-task-list__hint\">\n            Ensure the plan covers objectives, strategies, sales, marketing and financial forecasts.\n          </div>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-3-status\">\n          <strong class=\"govuk-tag govuk-tag--pink\">\n      Review\n    </strong>\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-4-status\">Documentation</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-4-status\">\n          <strong class=\"govuk-tag govuk-tag--blue\">\n      In progress\n    </strong>\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-5-status\">Charitable status</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-5-status\">\n          <strong class=\"govuk-tag govuk-tag--red\">\n      Error\n    </strong>\n      </div>\n    </li>\n<li class=\"govuk-task-list__item\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <div>Payment</div>\n          <div id=\"task-list-6-hint\" class=\"govuk-task-list__hint\">\n            It will cost between £15 and £75\n          </div>\n      </div>\n      <div class=\"govuk-task-list__status govuk-task-list__status--cannot-start-yet\" id=\"task-list-6-status\">\n          Cannot start yet\n      </div>\n    </li>\n</ul>"
+            "screenshot": false,
+            "html": "<ul class=\"govuk-task-list\">\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-1-status\">\n        Company Directors\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-1-status\">\n      Completed\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-2-status\">\n        Registered company details\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-2-status\">\n      <strong class=\"govuk-tag govuk-tag--light-blue\">\n        Not started\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-3-hint task-list-3-status\">\n        Business plan\n      </a>\n      <div id=\"task-list-3-hint\" class=\"govuk-task-list__hint\">\n        Ensure the plan covers objectives, strategies, sales, marketing and financial forecasts.\n      </div>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-3-status\">\n      <strong class=\"govuk-tag govuk-tag--pink\">\n        Review\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-4-status\">\n        Documentation\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-4-status\">\n      <strong class=\"govuk-tag govuk-tag--blue\">\n        In progress\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-5-status\">\n        Charitable status\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-5-status\">\n      <strong class=\"govuk-tag govuk-tag--red\">\n        Error\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <div>\n        Payment\n      </div>\n      <div id=\"task-list-6-hint\" class=\"govuk-task-list__hint\">\n        It will cost between £15 and £75\n      </div>\n    </div>\n    <div class=\"govuk-task-list__status govuk-task-list__status--cannot-start-yet\" id=\"task-list-6-status\">\n      Cannot start yet\n    </div>\n  </li>\n</ul>"
         },
         {
             "name": "example with all possible colours",
@@ -332,7 +335,8 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<ul class=\"govuk-task-list\">\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-1-status\">Task A</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-1-status\">\n          Text colour\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-2-status\">Task B</a>\n      </div>\n      <div class=\"govuk-task-list__status govuk-task-list__status--cannot-start-yet\" id=\"task-list-2-status\">\n          Secondary text colour\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-3-status\">Task C</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-3-status\">\n          <strong class=\"govuk-tag govuk-tag--grey\">\n      Grey\n    </strong>\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-4-status\">Task D</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-4-status\">\n          <strong class=\"govuk-tag govuk-tag--blue\">\n      Blue\n    </strong>\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-5-status\">Task E</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-5-status\">\n          <strong class=\"govuk-tag govuk-tag--light-blue\">\n      Light blue\n    </strong>\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-6-status\">Task F</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-6-status\">\n          <strong class=\"govuk-tag govuk-tag--turquoise\">\n      Turquoise\n    </strong>\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-7-status\">Task G</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-7-status\">\n          <strong class=\"govuk-tag govuk-tag--green\">\n      Green\n    </strong>\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-8-status\">Task H</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-8-status\">\n          <strong class=\"govuk-tag govuk-tag--purple\">\n      Purple\n    </strong>\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-9-status\">Task I</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-9-status\">\n          <strong class=\"govuk-tag govuk-tag--pink\">\n      Pink\n    </strong>\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-10-status\">Task J</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-10-status\">\n          <strong class=\"govuk-tag govuk-tag--red\">\n      Red\n    </strong>\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-11-status\">Task K</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-11-status\">\n          <strong class=\"govuk-tag govuk-tag--orange\">\n      Orange\n    </strong>\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-12-status\">Task L</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-12-status\">\n          <strong class=\"govuk-tag govuk-tag--yellow\">\n      Yellow\n    </strong>\n      </div>\n    </li>\n</ul>"
+            "screenshot": false,
+            "html": "<ul class=\"govuk-task-list\">\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-1-status\">\n        Task A\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-1-status\">\n      Text colour\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-2-status\">\n        Task B\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status govuk-task-list__status--cannot-start-yet\" id=\"task-list-2-status\">\n      Secondary text colour\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-3-status\">\n        Task C\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-3-status\">\n      <strong class=\"govuk-tag govuk-tag--grey\">\n        Grey\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-4-status\">\n        Task D\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-4-status\">\n      <strong class=\"govuk-tag govuk-tag--blue\">\n        Blue\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-5-status\">\n        Task E\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-5-status\">\n      <strong class=\"govuk-tag govuk-tag--light-blue\">\n        Light blue\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-6-status\">\n        Task F\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-6-status\">\n      <strong class=\"govuk-tag govuk-tag--turquoise\">\n        Turquoise\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-7-status\">\n        Task G\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-7-status\">\n      <strong class=\"govuk-tag govuk-tag--green\">\n        Green\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-8-status\">\n        Task H\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-8-status\">\n      <strong class=\"govuk-tag govuk-tag--purple\">\n        Purple\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-9-status\">\n        Task I\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-9-status\">\n      <strong class=\"govuk-tag govuk-tag--pink\">\n        Pink\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-10-status\">\n        Task J\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-10-status\">\n      <strong class=\"govuk-tag govuk-tag--red\">\n        Red\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-11-status\">\n        Task K\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-11-status\">\n      <strong class=\"govuk-tag govuk-tag--orange\">\n        Orange\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-12-status\">\n        Task L\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-12-status\">\n      <strong class=\"govuk-tag govuk-tag--yellow\">\n        Yellow\n      </strong>\n    </div>\n  </li>\n</ul>"
         },
         {
             "name": "example with very long single word tags",
@@ -376,7 +380,8 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<ul class=\"govuk-task-list\">\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-1-status\">Company Directors</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-1-status\">\n          Completed\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-2-status\">Registered company details</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-2-status\">\n          <strong class=\"govuk-tag govuk-tag--blue\">\n      Incomplete\n    </strong>\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-3-status\">A very very very long Business plan</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-3-status\">\n          <strong class=\"govuk-tag govuk-tag--blue\">\n      Thisisaverylongwaytosaythatsomethingisincomplete\n    </strong>\n      </div>\n    </li>\n</ul>"
+            "screenshot": false,
+            "html": "<ul class=\"govuk-task-list\">\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-1-status\">\n        Company Directors\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-1-status\">\n      Completed\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-2-status\">\n        Registered company details\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-2-status\">\n      <strong class=\"govuk-tag govuk-tag--blue\">\n        Incomplete\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-3-status\">\n        A very very very long Business plan\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-3-status\">\n      <strong class=\"govuk-tag govuk-tag--blue\">\n        Thisisaverylongwaytosaythatsomethingisincomplete\n      </strong>\n    </div>\n  </li>\n</ul>"
         },
         {
             "name": "custom classes",
@@ -414,7 +419,8 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<ul class=\"govuk-task-list custom-class-on-component\">\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link custom-class-on-task\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link custom-class-on-linked-title\" href=\"#\" aria-describedby=\"task-list-1-status\">A Link</a>\n      </div>\n      <div class=\"govuk-task-list__status custom-class-on-status\" id=\"task-list-1-status\">\n          <strong class=\"govuk-tag custom-class-on-tag\">\n      Status\n    </strong>\n      </div>\n    </li>\n<li class=\"govuk-task-list__item\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <div class=\"custom-class-on-unlinked-title\">Not a link</div>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-2-status\">\n          <strong class=\"govuk-tag\">\n      Status\n    </strong>\n      </div>\n    </li>\n</ul>"
+            "screenshot": false,
+            "html": "<ul class=\"govuk-task-list custom-class-on-component\">\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link custom-class-on-task\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link custom-class-on-linked-title\" href=\"#\" aria-describedby=\"task-list-1-status\">\n        A Link\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status custom-class-on-status\" id=\"task-list-1-status\">\n      <strong class=\"govuk-tag custom-class-on-tag\">\n        Status\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <div class=\"custom-class-on-unlinked-title\">\n        Not a link\n      </div>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-2-status\">\n      <strong class=\"govuk-tag\">\n        Status\n      </strong>\n    </div>\n  </li>\n</ul>"
         },
         {
             "name": "custom attributes",
@@ -442,7 +448,8 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<ul class=\"govuk-task-list\" data-custom-attribute=\"custom-value\">\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-1-status\">A Link</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-1-status\">\n          <strong class=\"govuk-tag\" data-tag-attribute=\"tag-value\">\n      Status\n    </strong>\n      </div>\n    </li>\n</ul>"
+            "screenshot": false,
+            "html": "<ul class=\"govuk-task-list\" data-custom-attribute=\"custom-value\">\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-1-status\">\n        A Link\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-1-status\">\n      <strong class=\"govuk-tag\" data-tag-attribute=\"tag-value\">\n        Status\n      </strong>\n    </div>\n  </li>\n</ul>"
         },
         {
             "name": "custom id prefix",
@@ -468,7 +475,8 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<ul class=\"govuk-task-list\">\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"my-custom-id-1-hint my-custom-id-1-status\">A Link</a>\n          <div id=\"my-custom-id-1-hint\" class=\"govuk-task-list__hint\">\n            Hint text\n          </div>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"my-custom-id-1-status\">\n          <strong class=\"govuk-tag\">\n      Status\n    </strong>\n      </div>\n    </li>\n</ul>"
+            "screenshot": false,
+            "html": "<ul class=\"govuk-task-list\">\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"my-custom-id-1-hint my-custom-id-1-status\">\n        A Link\n      </a>\n      <div id=\"my-custom-id-1-hint\" class=\"govuk-task-list__hint\">\n        Hint text\n      </div>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"my-custom-id-1-status\">\n      <strong class=\"govuk-tag\">\n        Status\n      </strong>\n    </div>\n  </li>\n</ul>"
         },
         {
             "name": "html passed as text",
@@ -502,7 +510,8 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<ul class=\"govuk-task-list\">\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"my-custom-id-1-hint my-custom-id-1-status\">&lt;strong&gt;Linked Title&lt;/strong&gt;</a>\n          <div id=\"my-custom-id-1-hint\" class=\"govuk-task-list__hint\">\n            &lt;strong&gt;Hint&lt;/strong&gt;\n          </div>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"my-custom-id-1-status\">\n          &lt;strong&gt;Status&lt;/strong&gt;\n      </div>\n    </li>\n<li class=\"govuk-task-list__item\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <div>&lt;strong&gt;Unlinked Title&lt;/strong&gt;</div>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"my-custom-id-2-status\">\n          <strong class=\"govuk-tag\">\n      &lt;strong&gt;Tag&lt;/strong&gt;\n    </strong>\n      </div>\n    </li>\n</ul>"
+            "screenshot": false,
+            "html": "<ul class=\"govuk-task-list\">\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"my-custom-id-1-hint my-custom-id-1-status\">\n        &lt;strong&gt;Linked Title&lt;/strong&gt;\n      </a>\n      <div id=\"my-custom-id-1-hint\" class=\"govuk-task-list__hint\">\n        &lt;strong&gt;Hint&lt;/strong&gt;\n      </div>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"my-custom-id-1-status\">\n      &lt;strong&gt;Status&lt;/strong&gt;\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <div>\n        &lt;strong&gt;Unlinked Title&lt;/strong&gt;\n      </div>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"my-custom-id-2-status\">\n      <strong class=\"govuk-tag\">\n        &lt;strong&gt;Tag&lt;/strong&gt;\n      </strong>\n    </div>\n  </li>\n</ul>"
         },
         {
             "name": "html",
@@ -536,7 +545,42 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<ul class=\"govuk-task-list\">\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"my-custom-id-1-hint my-custom-id-1-status\"><strong>Linked Title</strong></a>\n          <div id=\"my-custom-id-1-hint\" class=\"govuk-task-list__hint\">\n            <strong>Hint</strong>\n          </div>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"my-custom-id-1-status\">\n          <strong>Status</strong>\n      </div>\n    </li>\n<li class=\"govuk-task-list__item\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <div><strong>Unlinked Title</strong></div>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"my-custom-id-2-status\">\n          <strong class=\"govuk-tag\">\n      <strong>Tag</strong>\n    </strong>\n      </div>\n    </li>\n</ul>"
+            "screenshot": false,
+            "html": "<ul class=\"govuk-task-list\">\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"my-custom-id-1-hint my-custom-id-1-status\">\n        <strong>Linked Title</strong>\n      </a>\n      <div id=\"my-custom-id-1-hint\" class=\"govuk-task-list__hint\">\n        <strong>Hint</strong>\n      </div>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"my-custom-id-1-status\">\n      <strong>Status</strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <div>\n        <strong>Unlinked Title</strong>\n      </div>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"my-custom-id-2-status\">\n      <strong class=\"govuk-tag\">\n        <strong>Tag</strong>\n      </strong>\n    </div>\n  </li>\n</ul>"
+        },
+        {
+            "name": "with empty values",
+            "options": {
+                "items": [
+                    null,
+                    null,
+                    {
+                        "title": {
+                            "text": "Task A"
+                        },
+                        "href": "#",
+                        "status": {
+                            "text": "Completed"
+                        }
+                    },
+                    false,
+                    "",
+                    {
+                        "title": {
+                            "text": "Task B"
+                        },
+                        "href": "#",
+                        "status": {
+                            "text": "Completed"
+                        }
+                    }
+                ]
+            },
+            "hidden": false,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "screenshot": false,
+            "html": "<ul class=\"govuk-task-list\">\n\n\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-3-status\">\n        Task A\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-3-status\">\n      Completed\n    </div>\n  </li>\n\n\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-6-status\">\n        Task B\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-6-status\">\n      Completed\n    </div>\n  </li>\n</ul>"
         }
     ]
 }