Update list collector content page to use list component

app/jinja_filters.py

@@ -648,6 +648,31 @@ def map_summary_item_config_processor() -> dict[str, Callable]:
     return {"map_summary_item_config": map_summary_item_config}
 
 
+@blueprint.app_context_processor
+def map_list_config_processor() -> dict[str, Callable]:
+    return {"map_list_config": map_list_config}
+
+
+@blueprint.app_template_filter()
+def map_list_config(list_values: list[dict]) -> list[dict]:
+    items_list: list[dict] = []
+
+    for index, value in enumerate(list_values, 1):
+        item: dict = {"text": value["item_title"]}
+
+        if value["is_complete"]:
+            item["iconType"] = "check"
+
+        item["attributes"] = {
+            "data-qa": f"list-item-{index}-label",
+            "data-list-item-id": value["list_item_id"],
+        }
+
+        items_list.append(item)
+
+    return items_list
+
+
 # pylint: disable=too-many-locals
 @blueprint.app_template_filter()
 def map_list_collector_config(
@@ -665,7 +690,7 @@ def map_list_collector_config(
 ) -> list[dict[str, list] | SummaryRow]:
     rows: list[dict[str, list] | SummaryRow] = []
 
-    for index, list_item in enumerate(list_items, start=1):
+    for index, list_item in enumerate(list_items, 1):
         item_name = str(list_item.get("item_title"))
 
         actions = []

templates/listcollectorcontent.html

@@ -2,6 +2,8 @@
 
 {% import "macros/helpers.html" as helpers %}
 
+{% from "components/list/_macro.njk" import onsList %}
+
 {% set save_on_signout = true %}
 {% set continue_button_text = _("Continue") %}
 {% set title = content.title %}
@@ -10,8 +12,19 @@
 {% block form_content %}
     <h1>{{ title }}</h1>
     {%- if content.list and content.list.list_items -%}
-        {% set list = content.list %}
-        <div class="ons-u-mb-m">{% include "partials/summary/list-summary.html" %}</div>
+        {% set list = content.list.list_items %}
+        <div class="ons-u-mb-m">
+            {# djlint:off #}
+            {% set itemsList = map_list_config(list) %}
+            {{
+                onsList({
+                    "variants": "summary",
+                    "iconPosition": "before",
+                    "itemsList": itemsList,
+                })
+            }}
+            {# djlint:on #}
+        </div>
     {%- endif -%}
     {% include "partials/contents.html" %}
 {% endblock form_content %}

tests/functional/helpers.js

@@ -6,11 +6,12 @@ export const checkItemsInList = async (itemsExpected, listLabel) => {
   }
 };
 
-export const checkListItemComplete = async (listItemLabel) => {
-  await expect(await $(listItemLabel).$(`.ons-summary__item-title-icon.ons-summary__item-title-icon--check`).isExisting()).toBe(true);
+export const summaryItemComplete = async (summaryItemLabel, status) => {
+  await expect(await $(summaryItemLabel).$(`.ons-summary__item-title-icon.ons-summary__item-title-icon--check`).isExisting()).toBe(status);
 };
-export const checkListItemIncomplete = async (listItemLabel) => {
-  await expect(await $(listItemLabel).$(`.ons-summary__item-title-icon.ons-summary__item-title-icon--check`).isExisting()).toBe(false);
+
+export const listItemComplete = async (listItemLabel, status) => {
+  await expect(await $(listItemLabel).$(`.ons-list__prefix.ons-list__prefix--icon-check`).isExisting()).toBe(status);
 };
 
 const assertSummaryFunction = (selector) => {

tests/functional/spec/features/repeating_blocks/list_collector_repeating_blocks.spec.js

@@ -9,7 +9,7 @@ import AnyOtherCompaniesOrBranchesPage from "../../../generated_pages/list_colle
 import SectionCompaniesPage from "../../../generated_pages/list_collector_repeating_blocks_section_summary/section-companies-summary.page";
 import AnyOtherTradingDetailsPage from "../../../generated_pages/list_collector_repeating_blocks_section_summary/any-other-trading-details.page";
 import SubmitPage from "../../../generated_pages/list_collector_repeating_blocks_section_summary/submit.page";
-import { repeatingAnswerChangeLink, checkItemsInList, checkListItemComplete, checkListItemIncomplete, click } from "../../../helpers";
+import { repeatingAnswerChangeLink, checkItemsInList, summaryItemComplete, click } from "../../../helpers";
 import HubPage from "../../../base_pages/hub.page";
 import ResponsiblePartyHubPage from "../../../generated_pages/list_collector_repeating_blocks_with_hub/responsible-party-business.page";
 import { expect } from "@wdio/globals";
@@ -159,10 +159,10 @@ describe("List Collector Repeating Blocks", () => {
 
       // Only the ONS and NAV items should be complete
       await checkItemsInList(["ONS", "GOV", "MOD", "NAV"], AnyOtherCompaniesOrBranchesPage.listLabel);
-      await checkListItemComplete(`dt[data-qa="list-item-1-label"]`);
-      await checkListItemIncomplete(`dt[data-qa="list-item-2-label"]`);
-      await checkListItemIncomplete(`dt[data-qa="list-item-3-label"]`);
-      await checkListItemComplete(`dt[data-qa="list-item-1-label"]`);
+      await summaryItemComplete(`dt[data-qa="list-item-1-label"]`, true);
+      await summaryItemComplete(`dt[data-qa="list-item-2-label"]`, false);
+      await summaryItemComplete(`dt[data-qa="list-item-3-label"]`, false);
+      await summaryItemComplete(`dt[data-qa="list-item-1-label"]`, true);
     });
 
     it("When an item has incomplete repeating blocks, Then using submit on the list collector page will navigate the user to the first incomplete repeating block.", async () => {
@@ -192,10 +192,10 @@ describe("List Collector Repeating Blocks", () => {
     it("When the last remaining incomplete repeating block is completed, Then all items are marked as completed with the checkmark icon.", async () => {
       await $(CompaniesRepeatingBlock2Page.authorisedTraderUkRadioNo()).click();
       await click(CompaniesRepeatingBlock2Page.submit());
-      await checkListItemComplete(`dt[data-qa="list-item-1-label"]`);
-      await checkListItemComplete(`dt[data-qa="list-item-2-label"]`);
-      await checkListItemComplete(`dt[data-qa="list-item-3-label"]`);
-      await checkListItemComplete(`dt[data-qa="list-item-4-label"]`);
+      await summaryItemComplete(`dt[data-qa="list-item-1-label"]`, true);
+      await summaryItemComplete(`dt[data-qa="list-item-2-label"]`, true);
+      await summaryItemComplete(`dt[data-qa="list-item-3-label"]`, true);
+      await summaryItemComplete(`dt[data-qa="list-item-4-label"]`, true);
     });
 
     it("When the user clicks a change link from the section summary and submits without changing an answer, Then the user is returned to the section summary anchored to the answer they clicked on", async () => {
@@ -304,8 +304,8 @@ describe("List Collector Repeating Blocks", () => {
       await $(CompaniesRepeatingBlock2Page.authorisedTraderUkRadioNo()).click();
       await click(CompaniesRepeatingBlock2Page.submit());
       await expect(browser).toHaveUrlContaining(AnyOtherCompaniesOrBranchesPage.pageName);
-      await checkListItemComplete(`dt[data-qa="list-item-1-label"]`);
-      await checkListItemComplete(`dt[data-qa="list-item-2-label"]`);
+      await summaryItemComplete(`dt[data-qa="list-item-1-label"]`, true);
+      await summaryItemComplete(`dt[data-qa="list-item-2-label"]`, true);
     });
 
     it("When another incomplete item is added via the section summary, Then navigating to the submit page of the section will redirect to the list collector page.", async () => {

tests/functional/spec/features/supplementary_data/supplementary_data.spec.js

@@ -1,4 +1,4 @@
-import { assertSummaryItems, assertSummaryTitles, assertSummaryValues, checkListItemComplete, checkListItemIncomplete, click } from "../../../helpers";
+import { assertSummaryItems, assertSummaryTitles, assertSummaryValues, listItemComplete, click } from "../../../helpers";
 import { expect } from "@wdio/globals";
 import { getRandomString } from "../../../jwt_helper";
 import AddAdditionalEmployeePage from "../../../generated_pages/supplementary_data/list-collector-additional-add.page.js";
@@ -370,11 +370,11 @@ describe("Using supplementary data", () => {
   it("Given there is now an additional product, When I resume the Product Details Section, Then I start from the list collector content block and see the new product is incomplete", async () => {
     await $(HubPage.summaryRowLink("section-6")).click();
     await expect(browser).toHaveUrlContaining(ListCollectorProductsPage.pageName);
-    await checkListItemComplete(`dt[data-qa="list-item-1-label"]`);
-    await checkListItemComplete(`dt[data-qa="list-item-2-label"]`);
-    await checkListItemIncomplete(`dt[data-qa="list-item-3-label"]`);
+    await listItemComplete(`li[data-qa="list-item-1-label"]`, true);
+    await listItemComplete(`li[data-qa="list-item-2-label"]`, true);
+    await listItemComplete(`li[data-qa="list-item-3-label"]`, true);
     await click(ListCollectorProductsPage.submit());
-    await expect(browser).toHaveUrlContaining(ProductRepeatingBlock1Page.pageName);
+    await expect(await browser.toHaveUrlContaining(ProductRepeatingBlock1Page.pageName));
   });
 
   it("Given I complete the section and relaunch with the old data that has fewer items in the products list, When I am on the Hub, Then I see the products section and sales targets sections are now in progress", async () => {

tests/functional/spec/list_collector_content.spec.js

@@ -11,7 +11,7 @@ import ListCollectorSecondRepeatingBlockPage from "../generated_pages/list_colle
 import ListCollectorContentPage from "../generated_pages/list_collector_content_page/list-collector-content.page";
 import ListCollectorContentSectionSummaryPage from "../generated_pages/list_collector_content_page/section-list-collector-contents-summary.page";
 import ConfirmationCheckboxPage from "../generated_pages/list_collector_content_page/confirmation-checkbox.page";
-import { checkListItemComplete, checkListItemIncomplete, click } from "../helpers";
+import { listItemComplete, click } from "../helpers";
 
 describe("List Collector Section Summary and Summary Items", () => {
   describe("Given I launch the test list collector section summary items survey", () => {
@@ -92,13 +92,13 @@ describe("List Collector Section Summary and Summary Items", () => {
       await expect(await $(HubPage.summaryRowState("section-list-collector-contents")).getText()).toBe("Partially completed");
       await click(HubPage.submit());
       await expect(browser).toHaveUrlContaining(ListCollectorContentPage.pageName);
-      await checkListItemComplete(`dt[data-qa="list-item-1-label"]`);
-      await checkListItemComplete(`dt[data-qa="list-item-2-label"]`);
-      await checkListItemIncomplete(`dt[data-qa="list-item-3-label"]`);
+      await listItemComplete(`li[data-qa="list-item-1-label"]`, true);
+      await listItemComplete(`li[data-qa="list-item-2-label"]`, true);
+      await listItemComplete(`li[data-qa="list-item-3-label"]`, false);
       await click(ListCollectorContentPage.submit());
       await expect(browser).toHaveUrlContaining(ListCollectorFirstRepeatingBlockPage.pageName);
       await completeRepeatingBlocks(666, 2, 5, 1995, true, true);
-      await checkListItemComplete(`dt[data-qa="list-item-3-label"]`);
+      await listItemComplete(`li[data-qa="list-item-3-label"]`, true);
       await click(ListCollectorContentPage.submit());
       await click(ListCollectorContentSectionSummaryPage.submit());
       await expect(await $(HubPage.summaryRowState("section-list-collector-contents")).getText()).toBe("Completed");
@@ -114,7 +114,7 @@ describe("List Collector Section Summary and Summary Items", () => {
       await click(CompaniesSummaryPage.submit());
       await expect(await $(HubPage.summaryRowState("section-list-collector-contents")).getText()).toBe("Partially completed");
       await click(HubPage.submit());
-      await checkListItemComplete(`dt[data-qa="list-item-1-label"]`);
+      await listItemComplete(`li[data-qa="list-item-1-label"]`, true);
       await click(ListCollectorContentPage.submit());
       await expect(browser).toHaveUrlContaining(ListCollectorContentSectionSummaryPage.pageName);
       await click(ListCollectorContentSectionSummaryPage.submit());