diff --git a/app/views/govuk_publishing_components/components/_big_number.html.erb b/app/views/govuk_publishing_components/components/_big_number.html.erb index 547e26a021..154c00bef9 100644 --- a/app/views/govuk_publishing_components/components/_big_number.html.erb +++ b/app/views/govuk_publishing_components/components/_big_number.html.erb @@ -1,22 +1,22 @@ <% add_gem_component_stylesheet("big-number") - shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns) big_number_helper = GovukPublishingComponents::Presenters::BigNumberHelper.new(local_assigns) number ||= false label ||= nil href ||= nil - data_attributes ||= nil - aria ||= nil + nested_data_attributes ||= nil classes = ["gem-c-big-number"] - classes << shared_helper.get_margin_bottom value_classes = big_number_helper.value_classes + + component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns) + component_helper.add_class("gem-c-big-number") %> <% if number %> <% big_number_value = capture do %> - <%= tag.span class: value_classes, data: href ? nil : data_attributes do %> + <%= tag.span class: value_classes, data: href ? nil : nested_data_attributes do %> <% # The below check is to account for small symbols awkwardly sitting above the baseline in our typeface and adjust them to sit at the baseline for the purpose of visual harmony # Currently the only small symbol used with big numbers are pluses so they are specifically applied in the below code @@ -37,9 +37,9 @@ <% end %> <% end %> - <%= tag.div class: classes, aria: aria do %> + <%= tag.div(**component_helper.all_attributes) do %> <% unless href.nil? %> - <%= link_to big_number_value, href, class: "govuk-link gem-c-big-number__link", data: data_attributes %> + <%= link_to big_number_value, href, class: "govuk-link gem-c-big-number__link", data: nested_data_attributes %> <% else %> <%= big_number_value %> <% end %> diff --git a/app/views/govuk_publishing_components/components/docs/big_number.yml b/app/views/govuk_publishing_components/components/docs/big_number.yml index c877844bd6..f904853bef 100644 --- a/app/views/govuk_publishing_components/components/docs/big_number.yml +++ b/app/views/govuk_publishing_components/components/docs/big_number.yml @@ -48,22 +48,26 @@ examples: data: number: 23 href: "/government/organisations#ministerial_departments" - with_data_attributes: + with_nested_data_attributes: description: | - If a `href` attribute is present, `data_attributes` will apply to the `span` containing the number value (see below). + If a `href` attribute is present, `nested_data_attributes` will apply to the `a` containing the number value (see below). If a `href` is not present, it will apply to the `span` containing the number value. + + For parent level data attributes, use `data_attributes` which comes from this component having the component wrapper. Note that the component does not include built in tracking. If this is required consider using the [GA4 link tracker](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/trackers/ga4-link-tracker.md). data: number: 23 label: Ministerial departments href: "/government/organisations#ministerial_departments" - data_attributes: + nested_data_attributes: department-count: true - with_data_attributes_but_no_link: + with_nested_data_attributes_but_no_link: + description: | + If a `href` is not present, the data attributes will be applied to the `span` containing the big number. For parent level data attributes, use `data_attributes` which comes from this component having the component wrapper. data: number: 23 label: Ministerial departments - data_attributes: + nested_data_attributes: department-count: true with_aria_attributes: description: Aria attributes are applied to the whole component instance diff --git a/spec/components/big_number_spec.rb b/spec/components/big_number_spec.rb index ccf29da100..32baf6f766 100644 --- a/spec/components/big_number_spec.rb +++ b/spec/components/big_number_spec.rb @@ -48,7 +48,7 @@ def component_name render_component({ number: 500, href: "/tests", - data_attributes: { + nested_data_attributes: { my_cool_attribute: "cool", }, }) @@ -73,7 +73,7 @@ def component_name 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: { + nested_data_attributes: { my_cool_attribute: "cool", }, })