From bfb0d8ed663b2cb71a94ba7e9c7bf14ed021909b Mon Sep 17 00:00:00 2001 From: AshGDS <8880610+AshGDS@users.noreply.github.com> Date: Tue, 14 Jan 2025 15:45:14 +0000 Subject: [PATCH] BREAKING Use component wrapper on big number component Also fixes some incorrect documentation, and removes the shared helper as the component wrapper now handles margin_bottom values. --- CHANGELOG.md | 1 + .../components/_big_number.html.erb | 15 +++++++-------- .../components/docs/big_number.yml | 14 +++++++++----- spec/components/big_number_spec.rb | 4 ++-- 4 files changed, 19 insertions(+), 15 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6f73083782..1c69757b7a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ ## Unreleased +* **BREAKING** Use component wrapper on big number component ([PR #4550](https://github.com/alphagov/govuk_publishing_components/pull/4550)) * **BREAKING** Use component wrapper on attachment component ([PR #4545](https://github.com/alphagov/govuk_publishing_components/pull/4545)) * Add 'draggable' attribute to component wrapper helper ([PR #4544](https://github.com/alphagov/govuk_publishing_components/pull/4544)) 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..ab0991208f 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,21 @@ <% 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 - classes = ["gem-c-big-number"] - classes << shared_helper.get_margin_bottom + nested_data_attributes ||= nil 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 +36,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", }, })