Allow data attributes to be applied to big numbers when no link is pr…

…esent

CHANGELOG.md

@@ -10,6 +10,7 @@
 ## Unreleased
 
 * Allow custom logo link in navigation header ([PR #2320](https://github.com/alphagov/govuk_publishing_components/pull/2320)) MINOR
+* Allow data attributes to be applied to big numbers when no link is present ([PR #2321](https://github.com/alphagov/govuk_publishing_components/pull/2321))
 
 ## 27.2.0
 

app/views/govuk_publishing_components/components/_big_number.html.erb

@@ -12,7 +12,7 @@
 %>
 <% if number %>
   <% big_number_value = capture do %>
-    <%= tag.span class: classes do %>
+    <%= tag.span class: classes, data: href ? nil : data_attributes do %>
       <%= number %>
     <% end %>
 

app/views/govuk_publishing_components/components/docs/big_number.yml

@@ -35,7 +35,7 @@ examples:
       href: "/government/organisations#ministerial_departments"
   with_data_attributes:
     description: |
-      These data attributes will only be present if a `href` attribute is present.
+      If a `href` attribute is present, data attributes will apply to the `span` containing the number value (see below).
       
       This will also not automatically apply a `gem-track-click` module attribute if the data attributes pertain to click tracking. Remember to apply this outside the component call in a surrounding element, if using.
     data:
@@ -48,3 +48,9 @@ examples:
         track-label: "/government/organisations#ministerial_departments"
         track-dimension: 23 Ministerial departments
         track-dimension-index: 29
+  with_data_attributes_but_no_link:
+    data:
+      number: 23
+      label: Ministerial departments
+      data_attributes:
+        department-count: true

spec/components/big_number_spec.rb

@@ -44,6 +44,29 @@ def component_name
     assert_select ".gem-c-big-number__value.gem-c-big-number__value--decorated"
   end
 
+  it "adds data attributes to the rendered link if a href attribute is present" do
+    render_component({
+      number: 500,
+      href: "/tests",
+      data_attributes: {
+        my_cool_attribute: "cool",
+      },
+    })
+
+    assert_select ".gem-c-big-number__link[data-my-cool-attribute='cool']"
+  end
+
+  it "adds data attributes to the span containing the number value if a href attribute is not present" do
+    render_component({
+      number: 500,
+      data_attributes: {
+        my_cool_attribute: "cool",
+      },
+    })
+
+    assert_select ".gem-c-big-number__value[data-my-cool-attribute='cool']"
+  end
+
   # The space mentioned in the below test is to handle screen readers printing dictations without a space between the number and the label
   # We don't want this to get removed accidentally, hence the following test
   it "ensures that a visually hidden space is included for screen readers when a label is present" do