From 8acd7ef4580f852ab110e21af6285df4f34b2ba3 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..c2a57934c3 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 big number 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..5d211d4708 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 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)