Skip to content

Commit

Permalink
Merge pull request #4550 from alphagov/big-number-component-wrapper
Browse files Browse the repository at this point in the history
BREAKING Use component wrapper on big number component
  • Loading branch information
AshGDS authored Jan 15, 2025
2 parents 01b2db6 + bfb0d8e commit ed19497
Show file tree
Hide file tree
Showing 4 changed files with 19 additions and 15 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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))

Expand Down
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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 %>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions spec/components/big_number_spec.rb
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ def component_name
render_component({
number: 500,
href: "/tests",
data_attributes: {
nested_data_attributes: {
my_cool_attribute: "cool",
},
})
Expand All @@ -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",
},
})
Expand Down

0 comments on commit ed19497

Please sign in to comment.