From 70945ec461f2f56442f2fcc8762c87a24a154392 Mon Sep 17 00:00:00 2001
From: Andy Sellick <andy.sellick@digital.cabinet-office.gov.uk>
Date: Thu, 29 Mar 2018 08:14:45 +0000
Subject: [PATCH 1/2] Contents list add underline option

- change back to defaulting to not underlining any links by default
- add option on a per use basis to turn underline on
---
 .../stylesheets/components/_contents-list.scss       | 12 ++++++++++++
 app/views/components/_contents-list.html.erb         |  3 ++-
 app/views/components/docs/contents-list.yml          | 11 +++++++++++
 test/components/contents_list_component_test.rb      |  8 +++++++-
 4 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/components/_contents-list.scss b/app/assets/stylesheets/components/_contents-list.scss
index c9cf0d5a4..5cd94a33f 100644
--- a/app/assets/stylesheets/components/_contents-list.scss
+++ b/app/assets/stylesheets/components/_contents-list.scss
@@ -10,6 +10,18 @@
   box-shadow: 0 20px 15px -10px $white;
 }
 
+.app-c-contents-list--no-underline {
+  .app-c-contents-list__link {
+    text-decoration: none;
+
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: underline;
+    }
+  }
+}
+
 .app-c-contents-list__link {
   .app-c-contents-list__list-item--parent > & {
     font-weight: bold;
diff --git a/app/views/components/_contents-list.html.erb b/app/views/components/_contents-list.html.erb
index 113e06d93..41d8551cf 100644
--- a/app/views/components/_contents-list.html.erb
+++ b/app/views/components/_contents-list.html.erb
@@ -1,5 +1,6 @@
 <%
   format_numbers ||= false
+  underline_links ||= false
   contents ||= []
   aria_label ||= ''
   nested = !!contents.find { |c| c[:items] && c[:items].any? }
@@ -14,7 +15,7 @@
 <% if contents.any? %>
   <nav
     role="navigation"
-    class="app-c-contents-list"
+    class="app-c-contents-list <%= 'app-c-contents-list--no-underline' unless underline_links %>"
     data-module="track-click"
     <% if aria_label.present? %>
       aria-label="<%= aria_label %>"
diff --git a/app/views/components/docs/contents-list.yml b/app/views/components/docs/contents-list.yml
index 78d32bc8b..6f02d488b 100644
--- a/app/views/components/docs/contents-list.yml
+++ b/app/views/components/docs/contents-list.yml
@@ -33,6 +33,17 @@ examples:
           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:
+      underline_links: true
+      contents:
+        - href: "#first-thing"
+          text: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        - href: "#second-thing"
+          text: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        - href: "#third-thing"
+          text: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
   long_text:
     data:
       contents:
diff --git a/test/components/contents_list_component_test.rb b/test/components/contents_list_component_test.rb
index 2b1229f3a..d58be48d5 100644
--- a/test/components/contents_list_component_test.rb
+++ b/test/components/contents_list_component_test.rb
@@ -42,11 +42,17 @@ def assert_tracking_link(name, value, total = 1)
 
   test "renders a list of contents links" do
     render_component(contents: contents_list)
-    assert_select ".app-c-contents-list"
+    assert_select ".app-c-contents-list.app-c-contents-list--no-underline"
     assert_select ".app-c-contents-list__link[href='/one']", text: "1. One"
     assert_select ".app-c-contents-list__link[href='/two']", text: "2. Two"
   end
 
+  test "renders with the underline option" do
+    render_component(contents: contents_list, underline_links: true)
+    assert_select ".app-c-contents-list"
+    assert_select ".app-c-contents-list.app-c-contents-list--no-underline", false
+  end
+
   test "renders text only when link is active" do
     render_component(contents: contents_list_with_active_item)
     assert_select ".app-c-contents-list"

From 4c5e1153632daafe8c86732c4a3ddc62d968aaaf Mon Sep 17 00:00:00 2001
From: Andy Sellick <andy.sellick@digital.cabinet-office.gov.uk>
Date: Thu, 29 Mar 2018 09:33:48 +0000
Subject: [PATCH 2/2] Use contents list underline option on guides

---
 app/views/content_items/guide.html.erb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/content_items/guide.html.erb b/app/views/content_items/guide.html.erb
index 70f6db782..d0c4f5d34 100644
--- a/app/views/content_items/guide.html.erb
+++ b/app/views/content_items/guide.html.erb
@@ -4,7 +4,7 @@
     <%= render 'govuk_component/title', { title: @content_item.title } %>
     <% if @content_item.multi_page_guide? %>
       <aside class="part-navigation-container" role="complementary">
-        <%= render "components/contents-list", aria_label: 'Pages in this guide', contents: @content_item.part_link_elements %>
+        <%= render "components/contents-list", aria_label: 'Pages in this guide', contents: @content_item.part_link_elements, underline_links: true %>
       </aside>
     <% end %>
   </div>