Merge pull request #4331 from alphagov/add-data-attributes-to-summary…

…-cards-and-lists Add data attributes to summary cards and lists
alphagov · Oct 29, 2024 · ea97b38 · ea97b38
2 parents fdf2a14 + 5e3c2e4
commit ea97b38
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 2 deletions.
diff --git 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
 

diff --git 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/_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_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/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_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
diff --git 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