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..6579bd5371 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_attributes] 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..5fe5998e4a 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_attributes: + 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..d495e594a4 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_attributes: { module: "something" }, + }, + ], + ) + + assert_select ".govuk-summary-list__row[data-module='something']", text: /One/ + end end