New option for contents-list component: alternate_title

alphagov · Oct 15, 2024 · 3b38fa3 · 3b38fa3
1 parent 355784d
commit 3b38fa3
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 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
@@ -97,6 +97,12 @@
   }
 }
 
+.gem-c-contents-list--alternate-title {
+  .gem-c-contents-list__title {
+    margin-bottom: govuk-spacing(3);
+  }
+}
+
 @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
@@ -5,6 +5,7 @@
   underline_links ||= false
   format_numbers ||= false
   alternate_active ||= false
+  alternate_title ||= ""
   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--alternate-active") if alternate_active
+  component_helper.add_class("gem-c-contents-list--alternate-title") if alternate_title.present?
   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,11 @@
         title_fallback == "en" ? {:lang => "en",} : {}
       )
     ) do %>
-      <%= t("components.contents_list.contents") %>
+      <% if alternate_title.empty? %>
+        <%= t("components.contents_list.contents") %>
+      <% else %>
+        <%= t(alternate_title) %>
+      <% end %>
     <% end %>
 
     <ol class="gem-c-contents-list__list">

diff --git 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_alternate_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 in conjunction with the `alternate_active` option.
+    data:
+      alternate_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
@@ -248,4 +248,10 @@ def contents_list_with_markup
     render_component(contents: contents_list, alternate_active: true)
     assert_select ".gem-c-contents-list--alternate-active"
   end
+
+  it "renders an alternate title" do
+    render_component(contents: contents_list, alternate_title: "Alternate title")
+    assert_select ".gem-c-contents-list--alternate-title"
+    assert_select ".gem-c-contents-list__title", text: "Alternate title"
+  end
 end