From fcb1d0e5fd6b4a16a1affccf7e42b82052aa097d Mon Sep 17 00:00:00 2001 From: owenatgov Date: Mon, 10 Jan 2022 17:31:24 +0000 Subject: [PATCH] Apply margin bottom helper to big number component --- CHANGELOG.md | 1 + .../components/_big_number.html.erb | 14 ++++++++++---- .../components/docs/big_number.yml | 6 ++++++ spec/components/big_number_spec.rb | 9 +++++++++ 4 files changed, 26 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7702ed3926..9325226928 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ * Make metadata component "See all updates" link href less generic ([PR #2562](https://github.com/alphagov/govuk_publishing_components/pull/2562)) * Update feedback component to add "display none" to "maybe" (spam prevention) button ([PR #2568](https://github.com/alphagov/govuk_publishing_components/pull/2568)) +* Apply margin bottom helper to big number component ([PR #2566](https://github.com/alphagov/govuk_publishing_components/pull/2566)) ## 28.1.0 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 b8baf04304..dd8ac687ec 100644 --- a/app/views/govuk_publishing_components/components/_big_number.html.erb +++ b/app/views/govuk_publishing_components/components/_big_number.html.erb @@ -1,18 +1,24 @@ <% + shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns) + number ||= nil label ||= nil href ||= nil data_attributes ||= nil aria ||= nil - classes = ["gem-c-big-number__value"] + classes = ["gem-c-big-number"] + classes << shared_helper.get_margin_bottom + + value_classes = ["gem-c-big-number__value"] if label.nil? && href - classes << "gem-c-big-number__value--decorated" + value_classes << "gem-c-big-number__value--decorated" end + %> <% if number %> <% big_number_value = capture do %> - <%= tag.span class: classes, data: href ? nil : data_attributes do %> + <%= tag.span class: value_classes, data: href ? nil : data_attributes do %> <%= number %> <% end %> @@ -25,7 +31,7 @@ <% end %> <% end %> - <%= tag.div class: "gem-c-big-number", aria: aria do %> + <%= tag.div class: classes, aria: aria do %> <% unless href.nil? %> <%= link_to big_number_value, href, class: "govuk-link gem-c-big-number__link", data: data_attributes %> <% else %> 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 3d0e7e44ba..d3360bf5b6 100644 --- a/app/views/govuk_publishing_components/components/docs/big_number.yml +++ b/app/views/govuk_publishing_components/components/docs/big_number.yml @@ -61,3 +61,9 @@ examples: label: Ministerial departments aria: hidden: true + with_bottom_margin: + description: The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). The default big number margin bottom is 15px (govuk spacing 3). + data: + number: 119 + label: Open consultations + margin_bottom: 9 diff --git a/spec/components/big_number_spec.rb b/spec/components/big_number_spec.rb index 9f8ceb05c1..541a117635 100644 --- a/spec/components/big_number_spec.rb +++ b/spec/components/big_number_spec.rb @@ -81,6 +81,15 @@ def component_name assert_select ".gem-c-big-number__value[data-my-cool-attribute='cool']" end + it "sets a custom margin bottom if the margin_bottom attribute is present" do + render_component({ + number: 500, + margin_bottom: 5, + }) + + assert_select '.gem-c-big-number.govuk-\!-margin-bottom-5' + 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