From f33cae9a934fbe339a5db03bed319a0f95fb008b Mon Sep 17 00:00:00 2001 From: Richard McCarthy Date: Mon, 10 Mar 2025 09:43:32 +0000 Subject: [PATCH 1/6] add id to summary action links --- src/components/summary/_macro-options.md | 1 + src/components/summary/_macro.njk | 1 + src/components/summary/example-summary.njk | 8 ++++---- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/summary/_macro-options.md b/src/components/summary/_macro-options.md index 5b468576bb..69dd2b4a7e 100644 --- a/src/components/summary/_macro-options.md +++ b/src/components/summary/_macro-options.md @@ -55,6 +55,7 @@ | Name | Type | Required | Description | | ------------------ | ------ | -------- | -------------------------------------------------------------------------------------------------------------------------------- | +| id | string | false | `id` of the action link | | text | string | true | Text for the action link | | url | string | true | The URL for the HTML `href` attribute of the link used to change the value of the row item | | attributes | object | false | HTML attributes (for example, data attributes) to add to the action link | diff --git a/src/components/summary/_macro.njk b/src/components/summary/_macro.njk index 8d3708d08d..f951abbe3f 100644 --- a/src/components/summary/_macro.njk +++ b/src/components/summary/_macro.njk @@ -108,6 +108,7 @@ {% for action in item.actions %} {% if loop.index > 1 %}{% endif %} Date: Mon, 10 Mar 2025 09:51:25 +0000 Subject: [PATCH 2/6] add tests --- src/components/summary/_macro.spec.js | 21 +++++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/src/components/summary/_macro.spec.js b/src/components/summary/_macro.spec.js index 80843f6579..9fcca82978 100644 --- a/src/components/summary/_macro.spec.js +++ b/src/components/summary/_macro.spec.js @@ -23,7 +23,6 @@ const EXAMPLE_SUMMARY_ROWS = { }, iconType: 'check', iconVisuallyHiddenText: 'Section completed', - id: 'item-id-1', valueList: [ { text: 'row value 1', @@ -41,7 +40,6 @@ const EXAMPLE_SUMMARY_ROWS = { errorMessage: 'there are errors', itemsList: [ { - id: 'item-id-2', valueList: [ { text: 'row value 2', @@ -49,6 +47,7 @@ const EXAMPLE_SUMMARY_ROWS = { ], actions: [ { + id: 'Action 1', text: 'Action 1', visuallyHiddenText: 'action 1 for row title 2', attributes: { @@ -58,6 +57,7 @@ const EXAMPLE_SUMMARY_ROWS = { url: '#1', }, { + id: 'Action 2', text: 'Action 2', visuallyHiddenText: 'action 2 for row title 2', url: '#2', @@ -72,7 +72,6 @@ const EXAMPLE_SUMMARY_ROWS = { title: 'row title 3', itemsList: [ { - id: 'item-id-3', valueList: [ { text: 'row value 3', @@ -99,7 +98,6 @@ const EXAMPLE_SUMMARY_ROWS = { total: true, itemsList: [ { - id: 'item-id-5', valueList: [ { text: '£234,000.00', @@ -514,6 +512,21 @@ describe('macro: summary', () => { ).toBe('Action 2'); }); + it('has the correct action `id` for each action provided', () => { + const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC)); + + expect( + $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:first-child').attr( + 'id', + ), + ).toBe('Action 1'); + expect( + $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:last-child').attr( + 'id', + ), + ).toBe('Action 2'); + }); + it('has the correct visually hidden text', () => { const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC)); From cf8d0f6f68c6be7b273fa2b0d9f6395cdef89672 Mon Sep 17 00:00:00 2001 From: Richard McCarthy Date: Tue, 11 Mar 2025 11:05:07 +0000 Subject: [PATCH 3/6] move id to dd --- src/components/summary/_macro.njk | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/summary/_macro.njk b/src/components/summary/_macro.njk index f951abbe3f..e9d8db8369 100644 --- a/src/components/summary/_macro.njk +++ b/src/components/summary/_macro.njk @@ -104,11 +104,10 @@ {% endif %} {% if item.actions %} -
+
{% for action in item.actions %} {% if loop.index > 1 %}{% endif %} Date: Tue, 11 Mar 2025 11:41:33 +0000 Subject: [PATCH 4/6] update solution --- src/components/summary/_macro-options.md | 2 +- src/components/summary/_macro.spec.js | 20 +++++++------------- 2 files changed, 8 insertions(+), 14 deletions(-) diff --git a/src/components/summary/_macro-options.md b/src/components/summary/_macro-options.md index 69dd2b4a7e..06f0cc030f 100644 --- a/src/components/summary/_macro-options.md +++ b/src/components/summary/_macro-options.md @@ -36,6 +36,7 @@ | Name | Type | Required | Description | | ---------------------- | ---------------------- | -------- | ------------------------------------------------------------------------------------------- | +| id | string | false | `id` of the action links | | iconType | string | false | Adds an icon before the row title, by setting the [icon type](/foundations/icons#icon-type) | | iconVisuallyHiddenText | string | false | Visually hidden text in a span under the icon to add more context for screen readers | | title | string | false | The title for the row item | @@ -55,7 +56,6 @@ | Name | Type | Required | Description | | ------------------ | ------ | -------- | -------------------------------------------------------------------------------------------------------------------------------- | -| id | string | false | `id` of the action link | | text | string | true | Text for the action link | | url | string | true | The URL for the HTML `href` attribute of the link used to change the value of the row item | | attributes | object | false | HTML attributes (for example, data attributes) to add to the action link | diff --git a/src/components/summary/_macro.spec.js b/src/components/summary/_macro.spec.js index 9fcca82978..b34754e8cf 100644 --- a/src/components/summary/_macro.spec.js +++ b/src/components/summary/_macro.spec.js @@ -23,6 +23,7 @@ const EXAMPLE_SUMMARY_ROWS = { }, iconType: 'check', iconVisuallyHiddenText: 'Section completed', + id: 'item-id-1', valueList: [ { text: 'row value 1', @@ -40,6 +41,7 @@ const EXAMPLE_SUMMARY_ROWS = { errorMessage: 'there are errors', itemsList: [ { + id: 'item-id-2', valueList: [ { text: 'row value 2', @@ -47,7 +49,6 @@ const EXAMPLE_SUMMARY_ROWS = { ], actions: [ { - id: 'Action 1', text: 'Action 1', visuallyHiddenText: 'action 1 for row title 2', attributes: { @@ -57,7 +58,6 @@ const EXAMPLE_SUMMARY_ROWS = { url: '#1', }, { - id: 'Action 2', text: 'Action 2', visuallyHiddenText: 'action 2 for row title 2', url: '#2', @@ -72,6 +72,7 @@ const EXAMPLE_SUMMARY_ROWS = { title: 'row title 3', itemsList: [ { + id: 'item-id-3', valueList: [ { text: 'row value 3', @@ -98,6 +99,7 @@ const EXAMPLE_SUMMARY_ROWS = { total: true, itemsList: [ { + id: 'item-id-5', valueList: [ { text: '£234,000.00', @@ -512,19 +514,11 @@ describe('macro: summary', () => { ).toBe('Action 2'); }); - it('has the correct action `id` for each action provided', () => { + it('has the correct `id` added to the actions', () => { const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC)); - expect( - $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:first-child').attr( - 'id', - ), - ).toBe('Action 1'); - expect( - $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:last-child').attr( - 'id', - ), - ).toBe('Action 2'); + expect($('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions').attr('id')).toBe('item-id-1'); + expect($('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions').attr('id')).toBe('item-id-2'); }); it('has the correct visually hidden text', () => { From 141a436b852cbac2f716c0bf94db7cc095c79be0 Mon Sep 17 00:00:00 2001 From: Richard McCarthy Date: Tue, 11 Mar 2025 11:49:14 +0000 Subject: [PATCH 5/6] update solution --- src/components/summary/_macro.spec.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/summary/_macro.spec.js b/src/components/summary/_macro.spec.js index b34754e8cf..2fc0dd6624 100644 --- a/src/components/summary/_macro.spec.js +++ b/src/components/summary/_macro.spec.js @@ -517,7 +517,6 @@ describe('macro: summary', () => { it('has the correct `id` added to the actions', () => { const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC)); - expect($('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions').attr('id')).toBe('item-id-1'); expect($('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions').attr('id')).toBe('item-id-2'); }); From 129791dcb4576a1c5430cfb174198ff46ba0833a Mon Sep 17 00:00:00 2001 From: Richard McCarthy Date: Tue, 11 Mar 2025 11:53:05 +0000 Subject: [PATCH 6/6] update solution --- src/components/summary/example-summary.njk | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/summary/example-summary.njk b/src/components/summary/example-summary.njk index b23e952e91..ef0360ea27 100644 --- a/src/components/summary/example-summary.njk +++ b/src/components/summary/example-summary.njk @@ -15,6 +15,7 @@ "title": "What are the dates of the sales period you are reporting for?", "itemsList": [ { + "id": "sales-dates", "valueList": [ { "text": "1 January 2015 to 2 February 2017" @@ -22,7 +23,6 @@ ], "actions": [ { - "id": "change-sales-dates", "text": "Change", "visuallyHiddenText": "Change answer", "url": "#0" @@ -36,6 +36,7 @@ "id": "sales-value-row", "itemsList": [ { + "id": "sales-value", "valueList": [ { "text": "£180,440" @@ -43,7 +44,6 @@ ], "actions": [ { - "id": "change-sales-value", "text": "Change", "visuallyHiddenText": "Change answer", "url": "#0" @@ -57,6 +57,7 @@ "title": "Please indicate the reasons for any changes in the total turnover", "itemsList": [ { + "id": "sales-reasons", "valueList": [ { "text": "Change in level of business activity" @@ -68,7 +69,6 @@ ], "actions": [ { - "id": "change-sales-reasons", "text": "Change", "visuallyHiddenText": "Change answer", "url": "#0" @@ -82,6 +82,7 @@ "title": "Please describe the changes in total turnover in more detail", "itemsList": [ { + "id": "sales-detail", "valueList": [ { "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." @@ -89,7 +90,6 @@ ], "actions": [ { - "id": "change-sales-detail", "text": "Change", "visuallyHiddenText": "Change answer", "url": "#0"