From 97c577d09174d22434682740c5d2f45245d18c82 Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Thu, 24 Oct 2024 09:40:41 +0100 Subject: [PATCH] Add shared helper for margin bottom --- .../components/_contents-list.scss | 1 - .../components/_contents_list.html.erb | 3 +++ .../components/docs/contents_list.yml | 11 +++++++++++ spec/components/contents_list_spec.rb | 13 +++++++++++++ 4 files changed, 27 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss b/app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss index 93beff35e9..315be438e6 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss @@ -5,7 +5,6 @@ // Always render the contents list above a // back to contents link position: relative; - margin: 0 0 govuk-spacing(4) 0; z-index: 1; background: govuk-colour("white"); box-shadow: 0 20px 15px -10px govuk-colour("white"); diff --git a/app/views/govuk_publishing_components/components/_contents_list.html.erb b/app/views/govuk_publishing_components/components/_contents_list.html.erb index 2bb56de704..5438634d46 100644 --- a/app/views/govuk_publishing_components/components/_contents_list.html.erb +++ b/app/views/govuk_publishing_components/components/_contents_list.html.erb @@ -7,7 +7,9 @@ title ||= nil brand ||= false local_assigns[:aria] ||= {} + local_assigns[:margin_bottom] ||= 4 + shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns) cl_helper = GovukPublishingComponents::Presenters::ContentsListHelper.new(local_assigns) brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand) @@ -27,6 +29,7 @@ component_helper.add_class("gem-c-contents-list #{brand_helper.brand_class}") component_helper.add_class("gem-c-contents-list--alternative-line-style") if alternative_line_style component_helper.add_class("gem-c-contents-list--custom-title") if title + component_helper.add_class(shared_helper.get_margin_bottom) component_helper.add_data_attribute({ module: "ga4-link-tracker" }) unless disable_ga4 component_helper.add_aria_attribute({ label: t("components.contents_list.contents") }) unless local_assigns[:aria][:label] component_helper.add_role("navigation") diff --git a/app/views/govuk_publishing_components/components/docs/contents_list.yml b/app/views/govuk_publishing_components/components/docs/contents_list.yml index 7ffa6aedcb..5dcf41043c 100644 --- a/app/views/govuk_publishing_components/components/docs/contents_list.yml +++ b/app/views/govuk_publishing_components/components/docs/contents_list.yml @@ -35,6 +35,17 @@ examples: text: Second thing - href: "#third-thing" text: Third thing + 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 margin bottom is `20px` (`govuk-spacing(4)`). + data: + margin_bottom: 9 + contents: + - href: "#first-thing" + text: First thing + - href: "#second-thing" + text: Second thing + - href: "#third-thing" + text: Third thing underline_links: description: By default we do not underline links in this component even though this is the general approach on GOV.UK. This is because some of the examples below (particularly those with numbers) do not work well with underlined links. Instead, this option allows the links to be underlined where appropriate. data: diff --git a/spec/components/contents_list_spec.rb b/spec/components/contents_list_spec.rb index 04ed45a7c5..94875ce5d5 100644 --- a/spec/components/contents_list_spec.rb +++ b/spec/components/contents_list_spec.rb @@ -77,6 +77,19 @@ def contents_list_with_markup assert_select ".gem-c-contents-list__link.govuk-link--no-underline[href='#two']", text: "2. Two" end + it "applies default margin to the component" do + render_component(contents: contents_list) + assert_select '.gem-c-contents-list.govuk-\!-margin-bottom-4' + end + + it "applies requested margin to the component" do + render_component( + contents: contents_list, + margin_bottom: 0, + ) + assert_select '.gem-c-contents-list.govuk-\!-margin-bottom-0' + end + it "renders a list of contents links containing special characters" do render_component(contents: contents_list_with_special_chars)