Skip ‘empty’ tasks in the task list

[36degrees]

Note

This PR is stacked on top of #5045 which must be merged first.

This allows users to e.g. guard individual tasks with an if statement without empty rows displaying.

Closes #4968

[github-actions]

📋 Stats

File sizes

File	Size
dist/govuk-frontend-development.min.css	112.52 KiB
dist/govuk-frontend-development.min.js	41.88 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	87.42 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	82.11 KiB
packages/govuk-frontend/dist/govuk/all.mjs	981 B
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs	359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	112.51 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js	41.87 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.55 KiB
packages/govuk-frontend/dist/govuk/init.mjs	4.86 KiB

Modules

File	Size (bundled)	Size (minified)
all.mjs	79.24 KiB	39.84 KiB
accordion.mjs	23.5 KiB	12.39 KiB
button.mjs	5.98 KiB	2.69 KiB
character-count.mjs	22.4 KiB	9.92 KiB
checkboxes.mjs	5.83 KiB	2.83 KiB
error-summary.mjs	7.89 KiB	3.46 KiB
exit-this-page.mjs	17.1 KiB	9.26 KiB
header.mjs	4.46 KiB	2.6 KiB
notification-banner.mjs	6.26 KiB	2.62 KiB
password-input.mjs	15.15 KiB	7.25 KiB
radios.mjs	4.83 KiB	2.38 KiB
skip-link.mjs	4.39 KiB	2.18 KiB
tabs.mjs	10.13 KiB	6.11 KiB

View stats and visualisations on the review app

---

Action run for f4d86bd

[github-actions]

Rendered HTML changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/task-list/template-with-empty-values.html b/packages/govuk-frontend/dist/govuk/components/task-list/template-with-empty-values.html
new file mode 100644
index 000000000..df3fad6b0
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/task-list/template-with-empty-values.html
@@ -0,0 +1,27 @@
+
+<ul class="govuk-task-list">
+
+
+  <li class="govuk-task-list__item govuk-task-list__item--with-link">
+    <div class="govuk-task-list__name-and-hint">
+      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="task-list-3-status">
+        Task A
+      </a>
+    </div>
+    <div class="govuk-task-list__status" id="task-list-3-status">
+      Completed
+    </div>
+  </li>
+
+
+  <li class="govuk-task-list__item govuk-task-list__item--with-link">
+    <div class="govuk-task-list__name-and-hint">
+      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="task-list-6-status">
+        Task B
+      </a>
+    </div>
+    <div class="govuk-task-list__status" id="task-list-6-status">
+      Completed
+    </div>
+  </li>
+</ul>

---

Action run for f4d86bd

[github-actions]

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/task-list/fixtures.json b/packages/govuk-frontend/dist/govuk/components/task-list/fixtures.json
index bb64665d6..7688bf944 100644
--- a/packages/govuk-frontend/dist/govuk/components/task-list/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/task-list/fixtures.json
@@ -547,6 +547,40 @@
             "previewLayoutModifiers": [],
             "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>"
         }
     ]
 }

---

Action run for f4d86bd

[edwardhorsford]

Looking good! thanks.

[romaricpascal]

⛵