From 95d134b2791b0787ea0fa7474a1897784db5ae35 Mon Sep 17 00:00:00 2001 From: pezholio Date: Wed, 23 Oct 2024 13:46:35 +0100 Subject: [PATCH 1/3] Add data attributes to Summary Card rows This allows users to add data attributes (for example, when initialising Javascript modules) to individual rows --- .../components/_summary_card.html.erb | 2 +- .../components/docs/summary_card.yml | 10 ++++++++++ spec/components/summary_card_spec.rb | 15 +++++++++++++++ 3 files changed, 26 insertions(+), 1 deletion(-) diff --git a/app/views/govuk_publishing_components/components/_summary_card.html.erb b/app/views/govuk_publishing_components/components/_summary_card.html.erb index eb137bcc98..e16a2c4e35 100644 --- a/app/views/govuk_publishing_components/components/_summary_card.html.erb +++ b/app/views/govuk_publishing_components/components/_summary_card.html.erb @@ -28,7 +28,7 @@ <%= tag.div class: "govuk-summary-card__content" do %> <%= tag.dl class: "govuk-summary-list" do %> <% rows.each do |row| %> - <%= tag.div class: "govuk-summary-list__row" do %> + <%= tag.div class: "govuk-summary-list__row", data: row[:data] do %> <%= tag.dt class: "govuk-summary-list__key" do %> <%= row[:key] %> <% end %> diff --git a/app/views/govuk_publishing_components/components/docs/summary_card.yml b/app/views/govuk_publishing_components/components/docs/summary_card.yml index 71553d93eb..ea59711c8d 100644 --- a/app/views/govuk_publishing_components/components/docs/summary_card.yml +++ b/app/views/govuk_publishing_components/components/docs/summary_card.yml @@ -91,3 +91,13 @@ examples: - label: View href: "#1" opens_in_new_tab: true + with_row_data_attributes: + description: | + Data attributes can be passed to individual rows within the component as shown. + data: + title: Title + rows: + - key: key one + value: value1 + data: + module: "something" diff --git a/spec/components/summary_card_spec.rb b/spec/components/summary_card_spec.rb index 7d2c562fe3..8d8ff48153 100644 --- a/spec/components/summary_card_spec.rb +++ b/spec/components/summary_card_spec.rb @@ -154,4 +154,19 @@ def component_name assert_select '.govuk-summary-list__row .govuk-link[href="#1"]', text: "View One (opens in new tab)" assert_select '.govuk-summary-list__row .govuk-link[target="_blank"]', text: "View One (opens in new tab)" end + + it "renders component with row data attributes" do + render_component( + title: "Title", + rows: [ + { + key: "One", + value: "Value 1", + data: { module: "something" }, + }, + ], + ) + + assert_select ".govuk-summary-list__row[data-module='something']", text: /One/ + end end From ad1cd21308f66fa1e3ff5b52adb5bfcaedb7e35a Mon Sep 17 00:00:00 2001 From: pezholio Date: Tue, 29 Oct 2024 09:14:43 +0000 Subject: [PATCH 2/3] Add data attributes to summary list rows This allows users to add data attributes (for example, when initialising Javascript modules) to individual rows --- .../components/_summary_list.html.erb | 2 +- .../components/docs/summary_list.yml | 11 +++++++++++ spec/components/summary_list_spec.rb | 15 +++++++++++++++ 3 files changed, 27 insertions(+), 1 deletion(-) diff --git a/app/views/govuk_publishing_components/components/_summary_list.html.erb b/app/views/govuk_publishing_components/components/_summary_list.html.erb index cd06519fd3..203e0cb406 100644 --- a/app/views/govuk_publishing_components/components/_summary_list.html.erb +++ b/app/views/govuk_publishing_components/components/_summary_list.html.erb @@ -77,7 +77,7 @@ classes = "govuk-summary-list__row" end %> - <%= tag.div class: classes do %> + <%= tag.div class: classes, data: item[:data] do %> <%= tag.dt item[:field], class: "govuk-summary-list__key" %> <%= tag.dd item[:value], class: "govuk-summary-list__value" %> diff --git a/app/views/govuk_publishing_components/components/docs/summary_list.yml b/app/views/govuk_publishing_components/components/docs/summary_list.yml index 2e29a2067a..3209725190 100644 --- a/app/views/govuk_publishing_components/components/docs/summary_list.yml +++ b/app/views/govuk_publishing_components/components/docs/summary_list.yml @@ -139,6 +139,17 @@ examples: edit: href: "edit-feedback" + with_data_attributes: + description: | + Data attributes can be passed to individual items within the component as shown. + data: + title: "Title, summary and body" + items: + - field: "Title" + value: "Ethical standards for public service providers" + data: + module: "something" + with_block: description: Use the summary list with a block when you need to show an empty state message or load another component. data: diff --git a/spec/components/summary_list_spec.rb b/spec/components/summary_list_spec.rb index be8299f0b3..c2d0fc5d77 100644 --- a/spec/components/summary_list_spec.rb +++ b/spec/components/summary_list_spec.rb @@ -306,4 +306,19 @@ def component_name ) assert_select(".gem-c-summary-list.gem-c-summary-list--wide-title") end + + it "renders component with row data attributes" do + render_component( + title: "Title", + items: [ + { + field: "One", + value: "Value 1", + data: { module: "something" }, + }, + ], + ) + + assert_select ".govuk-summary-list__row[data-module='something']", text: /One/ + end end From 5e3c2e4edc7a58be26af3d19d35a40381b704995 Mon Sep 17 00:00:00 2001 From: pezholio Date: Tue, 29 Oct 2024 09:14:56 +0000 Subject: [PATCH 3/3] Update Changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 77cdc3a79c..6f139ee492 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ ## Unreleased * Layout super nav header: Correct URL for search form ([PR #4341](https://github.com/alphagov/govuk_publishing_components/pull/4341)) +* Add support for data attributes in Summary List and Summary Card rows ([PR #4331](https://github.com/alphagov/govuk_publishing_components/pull/4331)) ## 44.8.0