diff --git a/.design-system-version b/.design-system-version
index 3b74fa7060..10f98a1349 100644
--- a/.design-system-version
+++ b/.design-system-version
@@ -1 +1 @@
-70.0.15
+70.0.16
diff --git a/app/jinja_filters.py b/app/jinja_filters.py
index 29d8af10df..c3dfd776e3 100644
--- a/app/jinja_filters.py
+++ b/app/jinja_filters.py
@@ -648,6 +648,30 @@ 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",
+ }
+
+ items_list.append(item)
+
+ return items_list
+
+
# pylint: disable=too-many-locals
@blueprint.app_template_filter()
def map_list_collector_config(
@@ -665,7 +689,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 = []
diff --git a/templates/listcollectorcontent.html b/templates/listcollectorcontent.html
index e98068d486..e7a23f646e 100644
--- a/templates/listcollectorcontent.html
+++ b/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 %}
{{ title }}
{%- if content.list and content.list.list_items -%}
- {% set list = content.list %}
- {% include "partials/summary/list-summary.html" %}
+ {% set list = content.list.list_items %}
+
+ {# djlint:off #}
+ {% set itemsList = map_list_config(list) %}
+ {{
+ onsList({
+ "variants": "summary",
+ "iconPosition": "before",
+ "itemsList": itemsList,
+ })
+ }}
+ {# djlint:on #}
+
{%- endif -%}
{% include "partials/contents.html" %}
{% endblock form_content %}
diff --git a/tests/app/test_jinja_filters.py b/tests/app/test_jinja_filters.py
index d8d45a160f..c2c2b86d29 100644
--- a/tests/app/test_jinja_filters.py
+++ b/tests/app/test_jinja_filters.py
@@ -22,6 +22,7 @@
get_formatted_address,
get_width_for_number,
map_list_collector_config,
+ map_list_config,
map_summary_item_config,
should_wrap_with_fieldset,
strip_tags,
@@ -1339,5 +1340,44 @@ def test_map_list_collector_config_render_icon_set():
assert output == expected
+def test_map_list_config():
+ list_values = [
+ {
+ "item_title": "Harry Potter",
+ "primary_person": False,
+ "list_item_id": "1",
+ "is_complete": True,
+ "repeating_blocks": False,
+ },
+ {
+ "item_title": "Clark Kent",
+ "primary_person": False,
+ "list_item_id": "2",
+ "is_complete": False,
+ "repeating_blocks": False,
+ },
+ ]
+
+ output = map_list_config(list_values)
+
+ expected = [
+ {
+ "text": "Harry Potter",
+ "iconType": "check",
+ "attributes": {
+ "data-qa": "list-item-1-label",
+ },
+ },
+ {
+ "text": "Clark Kent",
+ "attributes": {
+ "data-qa": "list-item-2-label",
+ },
+ },
+ ]
+
+ assert output == expected
+
+
def to_dict(obj):
return json.loads(json.dumps(obj, default=lambda o: o.__dict__))
diff --git a/tests/functional/helpers.js b/tests/functional/helpers.js
index c0fa90daae..895b1c6feb 100644
--- a/tests/functional/helpers.js
+++ b/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) => {
diff --git a/tests/functional/spec/features/repeating_blocks/list_collector_repeating_blocks.spec.js b/tests/functional/spec/features/repeating_blocks/list_collector_repeating_blocks.spec.js
index 4e2fcd403c..b2578e6111 100644
--- a/tests/functional/spec/features/repeating_blocks/list_collector_repeating_blocks.spec.js
+++ b/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 () => {
diff --git a/tests/functional/spec/features/supplementary_data/supplementary_data.spec.js b/tests/functional/spec/features/supplementary_data/supplementary_data.spec.js
index dbb1344588..996b5f8227 100644
--- a/tests/functional/spec/features/supplementary_data/supplementary_data.spec.js
+++ b/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,9 +370,9 @@ 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"]`, false);
await click(ListCollectorProductsPage.submit());
await expect(browser).toHaveUrlContaining(ProductRepeatingBlock1Page.pageName);
});
diff --git a/tests/functional/spec/list_collector_content.spec.js b/tests/functional/spec/list_collector_content.spec.js
index 5c211c89fb..b4a6977c1a 100644
--- a/tests/functional/spec/list_collector_content.spec.js
+++ b/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());