Document list: parts should respect remove_underline

The links to parts/"subdocuments" on the document list component are currently always rendered without underlines, regardless of whether `remove_underline` is actually set on the component itself. This is probably because it's only used in Finder Frontend's search results page, which always uses `remove_underline`. We are starting to implement a UI overhaul of the search results page which has underlines on all links in the document list component, including those for parts. - Make links to parts render with underlines unless `remove_underline` is set on the component - Remove custom CSS for removing underlines when `remove_underline` is set, and just use `govuk-link--no-underline` instead
alphagov · Sep 10, 2024 · a71677a · a71677a
1 parent c5b94a8
commit a71677a
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 27 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,7 @@
 * Hide printed URLs when printing tables ([PR #4209](https://github.com/alphagov/govuk_publishing_components/pull/4209))
 * Fix action link component print styles ([PR #4213](https://github.com/alphagov/govuk_publishing_components/pull/4213))
 * Improve the password input component custom text feature ([PR #4211](https://github.com/alphagov/govuk_publishing_components/pull/4211))
+* Make links to parts in `document_list` component respect `remove_underline` setting ([PR #4210](https://github.com/alphagov/govuk_publishing_components/pull/4176))
 
 ## 43.1.0
 

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss b/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss
@@ -23,14 +23,6 @@
   @include govuk-font($size: 19, $weight: bold);
 }
 
-.gem-c-document-list--no-underline {
-  .gem-c-document-list__item-title {
-    .govuk-link {
-      text-decoration: none;
-    }
-  }
-}
-
 .gem-c-document-list--no-top-border {
   .gem-c-document-list__item {
     border-top: none;
@@ -160,20 +152,6 @@
   }
 }
 
-.gem-c-document-list-child__link {
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
-    text-underline-offset: .1em;
-    @include govuk-link-hover-decoration;
-  }
-
-  &:focus {
-    text-decoration: none;
-  }
-}
-
 .gem-c-document-list-child__description {
   margin-top: govuk-spacing(1);
   margin-bottom: govuk-spacing(1);

diff --git a/app/views/govuk_publishing_components/components/_document_list.html.erb b/app/views/govuk_publishing_components/components/_document_list.html.erb
@@ -7,12 +7,11 @@
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-document-list")
-  component_helper.add_class("gem-c-document-list--no-underline") if local_assigns[:remove_underline]
   component_helper.add_class("gem-c-document-list--no-top-border") if local_assigns[:remove_top_border]
   component_helper.add_class("gem-c-document-list--no-top-border-first-child") if local_assigns[:remove_top_border_from_first_child]
   component_helper.add_class(shared_helper.get_margin_bottom)
 
-
+  extra_link_classes = "govuk-link--no-underline" if local_assigns[:remove_underline]
   title_with_context_class = " gem-c-document-list__item-title--context"
 
   brand ||= false
@@ -57,7 +56,7 @@
                 item[:link][:text],
                 item[:link][:path],
                 data: item[:link][:data_attributes],
-                class: "#{item_classes} govuk-link",
+                class: "#{item_classes} govuk-link #{extra_link_classes}",
                 lang: item[:link][:locale].presence,
                 rel: rel,
               )
@@ -118,7 +117,7 @@
                       part[:link][:text],
                       part[:link][:path],
                       data: part[:link][:data_attributes],
-                      class: "gem-c-document-list-child__heading #{brand_helper.color_class} govuk-link gem-c-document-list-child__link",
+                      class: "gem-c-document-list-child__heading gem-c-document-list-child__link #{brand_helper.color_class} govuk-link #{extra_link_classes}",
                     )
                   else
                     content_tag(

diff --git a/app/views/govuk_publishing_components/components/docs/document_list.yml b/app/views/govuk_publishing_components/components/docs/document_list.yml
@@ -307,6 +307,29 @@ examples:
         - link:
             text: 'Criteria'
             description: 'no url provided, just text'
+  with_parts_and_no_underline:
+    description: The legacy finders design does not include underlines on links, neither on the main item nor the children.
+    data:
+      remove_underline: true
+      items:
+      - link:
+          text: 'Universal credit'
+          path: '/universal-credit'
+          description: 'Universal Credit is replacing 6 other benefits with a single monthly payment if you are out of work or on a low income - eligibility, how to prepare'
+        parts:
+        - link:
+            text: 'What universal credit is'
+            path: '/universal-credit/what-it-is'
+            description: 'Universal Credit is a payment to help with your living costs. It’s paid monthly - or twice a month for some people in Scotland.'
+        - link:
+            text: 'Elegibility'
+            path: '/universal-credit/eligibility'
+            description: 'You may be able to get Universal Credit if: you’re on a low income or out...'
+            data_attributes:
+              an_attribute: some_value
+        - link:
+            text: 'Criteria'
+            description: 'no url provided, just text'
   with_locale_specified:
     description: |
       The component is used on translated pages that don’t have a translation for the document link text or the metadata. This means that it could display the fallback English string if the translate method can’t find an appropriate translation. This makes sure that the lang can be set to ensure that browsers understand which parts of the page are in each language.

diff --git a/spec/components/document_list_spec.rb b/spec/components/document_list_spec.rb
@@ -257,7 +257,31 @@ def component_name
       ],
     )
 
-    assert_select ".gem-c-document-list.gem-c-document-list--no-underline"
+    assert_select ".gem-c-document-list a.govuk-link--no-underline", text: "Link Title"
+  end
+
+  it "removes underline from links on parts" do
+    render_component(
+      remove_underline: true,
+      items: [
+        {
+          link: {
+            text: "Link Title",
+            path: "/link/path",
+          },
+          parts: [
+            {
+              link: {
+                text: "Part Title",
+                path: "/part/path",
+              },
+            },
+          ],
+        },
+      ],
+    )
+
+    assert_select ".gem-c-document-list a.gem-c-document-list-child__link.govuk-link--no-underline", text: "Part Title"
   end
 
   it "removes the top border from list items" do