Merge pull request #856 from alphagov/contents-list-underline-option

Contents list add underline option
alphagov · Mar 29, 2018 · cd90d91 · cd90d91
2 parents 0831526 + 4c5e115
commit cd90d91
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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/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>

diff --git 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"