Merge pull request #4305 from alphagov/contents-list-landing-page-var…

…iant

New options for contents-list component

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
 

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;
@@ -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;
@@ -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,

app/views/govuk_publishing_components/components/_contents_list.html.erb

@@ -4,6 +4,8 @@
   cl_helper = GovukPublishingComponents::Presenters::ContentsListHelper.new(local_assigns)
   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")
@@ -22,6 +24,8 @@
   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_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")
@@ -33,14 +37,14 @@
         title_fallback == "en" ? {:lang => "en",} : {}
       )
     ) do %>
-      <%= t("components.contents_list.contents") %>
+      <%= title || t("components.contents_list.contents") %>
     <% end %>
 
     <ol class="gem-c-contents-list__list">
       <% index_link = 1 unless disable_ga4 %>
       <% contents.each do |contents_item| %>
         <li class="<%= cl_helper.list_item_classes(contents_item, false) %>" <%= "aria-current=true" if contents_item[:active] %>>
-          <span aria-hidden="true"></span>
+          <span class="gem-c-contents-list__list-item-dash" aria-hidden="true"></span>
           <% 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 +62,7 @@
             <ol class="gem-c-contents-list__nested-list">
               <% contents_item[:items].each do |nested_contents_item| %>
                 <li class="<%= cl_helper.list_item_classes(nested_contents_item, true) %>" <%= "aria-current=true" if nested_contents_item[:active] %>>
-                  <span aria-hidden="true"></span>
+                  <span class="gem-c-contents-list__list-item-dash" aria-hidden="true"></span>
                   <%
                     unless disable_ga4
                       ga4_data[:event_name] = cl_helper.get_ga4_event_name(nested_contents_item[:href]) if nested_contents_item[:href]

app/views/govuk_publishing_components/components/docs/contents_list.yml

@@ -193,6 +193,38 @@ 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
+  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:

spec/components/contents_list_spec.rb

@@ -243,4 +243,15 @@ 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
+
+  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