From 9b1c1144d5978d96a813ce22a0d8117ca19de783 Mon Sep 17 00:00:00 2001 From: Matt Hill Date: Wed, 16 Oct 2024 12:07:19 +0100 Subject: [PATCH 1/4] Add an explicit class name to spans used for dashes This was previously missing from this component and is added to meet our coding standards. --- .../components/_contents-list.scss | 2 +- .../components/_contents_list.html.erb | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) 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 dd595dee5a..0d629bb9e3 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss @@ -50,7 +50,7 @@ padding-left: $contents-spacing; padding-right: $contents-spacing; - & span::before { + .gem-c-contents-list__list-item-dash::before { content: "—"; position: absolute; left: 0; 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 afe6c5fb25..619cd16a9a 100644 --- a/app/views/govuk_publishing_components/components/_contents_list.html.erb +++ b/app/views/govuk_publishing_components/components/_contents_list.html.erb @@ -40,7 +40,7 @@ <% index_link = 1 unless disable_ga4 %> <% contents.each do |contents_item| %>
  • > - + <% link_text = format_numbers ? cl_helper.wrap_numbers_with_spans(contents_item[:text]) : cl_helper.clean_string(contents_item[:text]) unless disable_ga4 ga4_data[:event_name] = cl_helper.get_ga4_event_name(contents_item[:href]) if contents_item[:href] @@ -58,7 +58,7 @@
      <% contents_item[:items].each do |nested_contents_item| %>
    1. > - + <% unless disable_ga4 ga4_data[:event_name] = cl_helper.get_ga4_event_name(nested_contents_item[:href]) if nested_contents_item[:href] From b58aa007abe770a85ffce88fe18656657986b325 Mon Sep 17 00:00:00 2001 From: Matt Hill Date: Mon, 14 Oct 2024 15:34:35 +0100 Subject: [PATCH 2/4] New option for contents-list component: alternative_line_style A new option for the contents-list component that can be used to apply a different line style: - No left hand indent - No dashes - Increased vertical space between lines - Different active style: bold blue text & blue vertical left border This option is only effective if the component instance uses active links. --- .../components/_contents-list.scss | 31 ++++++++++++++++--- .../components/_contents_list.html.erb | 2 ++ .../components/docs/contents_list.yml | 16 ++++++++++ spec/components/contents_list_spec.rb | 5 +++ 4 files changed, 50 insertions(+), 4 deletions(-) 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 0d629bb9e3..93beff35e9 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss @@ -27,13 +27,13 @@ } .gem-c-contents-list__link { - .gem-c-contents-list__list-item--parent > & { - font-weight: bold; - } - @include govuk-template-link-focus-override; } +.gem-c-contents-list__list-item--parent > .gem-c-contents-list__link { + font-weight: $govuk-font-weight-bold; +} + .gem-c-contents-list__list-item { padding-top: govuk-spacing(2); line-height: 1.3; @@ -76,6 +76,29 @@ } } +.gem-c-contents-list--alternative-line-style { + .gem-c-contents-list__title { + margin-bottom: govuk-spacing(3); + } + + .gem-c-contents-list__list-item { + padding: govuk-spacing(2) 0; + margin: 0; + } + + .gem-c-contents-list__list-item-dash::before { + display: none; + } + + .gem-c-contents-list__list-item--active { + padding: govuk-spacing(1) govuk-spacing(2); + margin: govuk-spacing(1) 0; + border-left: 4px solid govuk-colour("blue"); + color: govuk-colour("blue"); + font-weight: $govuk-font-weight-bold; + } +} + @include govuk-media-query($media-type: print) { // Override default browser indentation .gem-c-contents-list__list, 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 619cd16a9a..77beb74e00 100644 --- a/app/views/govuk_publishing_components/components/_contents_list.html.erb +++ b/app/views/govuk_publishing_components/components/_contents_list.html.erb @@ -4,6 +4,7 @@ cl_helper = GovukPublishingComponents::Presenters::ContentsListHelper.new(local_assigns) underline_links ||= false format_numbers ||= false + alternative_line_style ||= false brand ||= false brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand) title_fallback = t("components.contents_list.contents", locale: I18n.locale, fallback: false, default: "en") @@ -22,6 +23,7 @@ local_assigns[:aria] ||= {} component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns) 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_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 feda939fda..73e63017aa 100644 --- a/app/views/govuk_publishing_components/components/docs/contents_list.yml +++ b/app/views/govuk_publishing_components/components/docs/contents_list.yml @@ -193,6 +193,22 @@ examples: text: 2. Numbers not parsed - href: "#third-thing" text: 3. Numbers are just text + with_alternative_line_style: + description: With this option, the individual lines get different styling. The left hand indent and dashes are removed, there's more vertical space between each list item and the active links are styled with a vertical left hand border. + data: + alternative_line_style: true + contents: + - href: "#first-thing" + text: First page title link + - href: "#second-thing" + text: Second page title link + - href: "#third-thing" + text: Third page title link + active: true + - href: "#fourth-thing" + text: Fourth page title link + - href: "#fifth-thing" + text: Fifth page title link without_ga4_tracking: description: Disables GA4 link tracking on the list. Tracking is enabled by default. data: diff --git a/spec/components/contents_list_spec.rb b/spec/components/contents_list_spec.rb index 4743d9c263..04d31c5ba5 100644 --- a/spec/components/contents_list_spec.rb +++ b/spec/components/contents_list_spec.rb @@ -243,4 +243,9 @@ def contents_list_with_markup I18n.with_locale(:ru) { render_component(contents: contents_list) } assert_select ".gem-c-contents-list__title[lang=\"en\"]" end + + it "applies alternative line styles correctly" do + render_component(contents: contents_list, alternative_line_style: true) + assert_select ".gem-c-contents-list--alternative-line-style" + end end From 5853f18637088357c582950433161a6f1568d4aa Mon Sep 17 00:00:00 2001 From: Matt Hill Date: Wed, 16 Oct 2024 12:57:52 +0100 Subject: [PATCH 3/4] New option for contents-list component: custom_title --- .../components/_contents_list.html.erb | 4 +++- .../components/docs/contents_list.yml | 16 ++++++++++++++++ spec/components/contents_list_spec.rb | 6 ++++++ 3 files changed, 25 insertions(+), 1 deletion(-) 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 77beb74e00..dbb984da5e 100644 --- a/app/views/govuk_publishing_components/components/_contents_list.html.erb +++ b/app/views/govuk_publishing_components/components/_contents_list.html.erb @@ -5,6 +5,7 @@ underline_links ||= false format_numbers ||= false alternative_line_style ||= false + title ||= nil brand ||= false brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand) title_fallback = t("components.contents_list.contents", locale: I18n.locale, fallback: false, default: "en") @@ -24,6 +25,7 @@ component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns) 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_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") @@ -35,7 +37,7 @@ title_fallback == "en" ? {:lang => "en",} : {} ) ) do %> - <%= t("components.contents_list.contents") %> + <%= title || t("components.contents_list.contents") %> <% end %>
        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 73e63017aa..4930f895de 100644 --- a/app/views/govuk_publishing_components/components/docs/contents_list.yml +++ b/app/views/govuk_publishing_components/components/docs/contents_list.yml @@ -209,6 +209,22 @@ examples: text: Fourth page title link - href: "#fifth-thing" text: Fifth page title link + with_custom_title: + description: With this option, the 'Contents' title is replaced with the supplied alternate title. This should only be used when using this component as a navigation element on landing pages. Typically used with `alternative_line_style`. + data: + title: "An alternate title" + contents: + - href: "#first-thing" + text: First page title link + - href: "#second-thing" + text: Second page title link + - href: "#third-thing" + text: Third page title link + active: true + - href: "#fourth-thing" + text: Fourth page title link + - href: "#fifth-thing" + text: Fifth page title link without_ga4_tracking: description: Disables GA4 link tracking on the list. Tracking is enabled by default. data: diff --git a/spec/components/contents_list_spec.rb b/spec/components/contents_list_spec.rb index 04d31c5ba5..04ed45a7c5 100644 --- a/spec/components/contents_list_spec.rb +++ b/spec/components/contents_list_spec.rb @@ -248,4 +248,10 @@ def contents_list_with_markup render_component(contents: contents_list, alternative_line_style: true) assert_select ".gem-c-contents-list--alternative-line-style" end + + it "renders an alternate title" do + render_component(contents: contents_list, title: "Alternate title") + assert_select ".gem-c-contents-list--custom-title" + assert_select ".gem-c-contents-list__title", text: "Alternate title" + end end From fc03300daa51727fdd046b20181138a49e642383 Mon Sep 17 00:00:00 2001 From: Matt Hill Date: Wed, 16 Oct 2024 14:54:47 +0100 Subject: [PATCH 4/4] Update CHANGELOG.md --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8ceac4e93c..8dd1f8ef28 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ ## Unreleased * Add inverse option for organisation logo ([PR #4284](https://github.com/alphagov/govuk_publishing_components/pull/4284)) +* New options for contents-list component ([PR #4305](https://github.com/alphagov/govuk_publishing_components/pull/4305)) ## 44.3.0