Merge pull request #928 from alphagov/mb-sidebar-design-update

Design updates to taxonomy sidebar component
alphagov · Mar 7, 2017 · f18e86e · f18e86e
2 parents e83f14b + 0ab93e6
commit f18e86e
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 90 deletions.
diff --git a/app/assets/stylesheets/govuk-component/_taxonomy-sidebar.scss b/app/assets/stylesheets/govuk-component/_taxonomy-sidebar.scss
@@ -1,46 +1,41 @@
 .govuk-taxonomy-sidebar {
   border-top: 10px solid $mainstream-brand;
-  padding-top: 5px;
-
-  h2 {
-    @include bold-24;
-    margin: 0;
-  }
-
-  p {
-    @include core-19;
-    margin-top: $gutter-one-third / 2;
-    margin-bottom: $gutter-two-thirds;
-  }
-
-  ul {
-    margin: 0;
-    padding: 0;
-  }
+  @include core-16;
 
   .sidebar-taxon {
-    @include core-16;
-    padding-bottom: 1.25em;
+    padding-top: 1.25em;
 
-    .taxon-link {
-      font-size: 19px;
-    }
-  }
+    h2 {
+      @include bold-24;
+      margin: 0 0 5px;
 
-  .related-content {
-    line-height: 1.5;
+      a {
+        text-decoration: none;
 
-    .related-content-item {
-      margin-bottom: 0;
+        &:hover {
+          text-decoration: underline;
+        }
+      }
     }
 
-    .related-link {
-      text-decoration: none;
+    .taxon-description {
+      font-size: 16px;
+      margin: 0;
+    }
 
-      &:hover,
-      &:focus {
-        text-decoration: underline;
+    .related-content {
+      margin: 0 0 0 15px;
+      padding: 0;
+      list-style-type: none;
+      line-height: 1.5;
+
+      a:before {
+        content: "•";
+        display: inline-block;
+        width: 15px;
+        margin-left: -15px;
       }
     }
   }
+
 }
diff --git a/app/views/govuk_component/taxonomy_sidebar.raw.html.erb b/app/views/govuk_component/taxonomy_sidebar.raw.html.erb
@@ -1,20 +1,35 @@
 <% if local_assigns[:items] && !items.blank? %>
+
   <aside class='govuk-taxonomy-sidebar' data-module='track-click' role='complementary'>
     <% items.each_with_index do |item, item_index| %>
+      <div class='sidebar-taxon'>
+        <h2>
+          <%=
+            link_to(
+              item[:title],
+              item[:url],
+              class: 'taxon-link',
+              data: {
+                track_category: 'relatedLinkClicked',
+                track_action: "#{item_index + 1}",
+                track_label: item[:url],
+                track_dimension: item[:title],
+                track_dimension_index: 29,
+              },
+            )
+          %>
+        </h2>
 
-      <div class="sidebar-taxon">
-        <h2>More about <%= item[:title] %></h2>
-
-        <p>
+        <p class='taxon-description'>
           <%= item[:description] %>
         </p>
 
         <% item[:related_content] ||= [] %>
-        <% if item[:related_content].any? %>
+        <% if item[:related_content].any? && item_index < 2 %>
           <nav role='navigation'>
-            <ul class="related-content">
+            <ul class='related-content'>
               <% item[:related_content].each_with_index do |related_item, related_content_index| %>
-                <li class="related-content-item">
+                <li>
                   <%=
                     link_to(
                       related_item[:title],
@@ -34,25 +49,8 @@
             </ul>
           </nav>
         <% end %>
-
-        <p>
-          <%=
-            link_to(
-                "See everything in #{item[:title]}",
-                item[:url],
-                data: {
-                    track_category: 'relatedLinkClicked',
-                    track_action: "#{item_index + 1}.#{item[:related_content].length + 1}",
-                    track_label: item[:url],
-                    track_dimension: item[:title],
-                    track_dimension_index: 29,
-                },
-                class: 'taxon-link',
-            )
-          %>
-        </p>
       </div>
-
     <% end %>
   </aside>
+
 <% end %>
diff --git a/test/govuk_component/taxonomy_sidebar_test.rb b/test/govuk_component/taxonomy_sidebar_test.rb
@@ -15,62 +15,67 @@ def component_name
     render_component(
       items: [
         {
-          title: "Item title",
-          url: "/item",
-          description: "An item",
+          title: "Item 1 title",
+          url: "/item-1",
+          description: "item 1",
         },
         {
-          title: "Other item title",
-          url: "/other-item",
-          description: "Another item",
+          title: "Item 2 title",
+          url: "/item-2",
+          description: "item 2",
         },
       ]
     )
 
-    assert_select ".govuk-taxonomy-sidebar > :nth-of-type(1) h2", text: "More about Item title"
-    assert_link_with_text_in(".govuk-taxonomy-sidebar > :nth-of-type(1)", "/item", "See everything in Item title")
-    assert_select(".govuk-taxonomy-sidebar > :nth-of-type(1) p", "An item")
-
-    assert_select ".govuk-taxonomy-sidebar > :nth-of-type(2) h2", text: "More about Other item title"
-    assert_link_with_text_in(".govuk-taxonomy-sidebar > :nth-of-type(2)", "/other-item", "See everything in Other item title")
-    assert_select(".govuk-taxonomy-sidebar > :nth-of-type(2) p", "Another item")
+    taxon_titles = css_select(".sidebar-taxon h2").map { |taxon_title| taxon_title.text.strip }
+    taxon_titles = ["Item 1 title", "Item 2 title"]
   end
 
-  test "renders related content for taxons" do
+  test "renders related content for the first two taxons" do
     render_component(
       items: [
         {
-          title: "Item title",
-          url: "/item",
-          description: "An item",
+          title: "Item 1 title",
+          url: "/item-1",
+          description: "item 1",
           related_content: [
             {
-              title: "Related link 1",
-              link: "/related-link-1",
+              title: "Related link B",
+              link: "/related-link-b",
             },
             {
-              title: "Related link 2",
-              link: "/related-link-2",
+              title: "Related link A",
+              link: "/related-link-a",
             },
           ],
         },
         {
-          title: "Other item title",
-          url: "/other-item",
-          description: "Another item",
+          title: "Item 2 title",
+          url: "/item-2",
+          description: "item 2",
           related_content: [
             {
-              title: "Related link 3",
-              link: "/related-link-3",
+              title: "Related link C",
+              link: "/related-link-c",
             },
           ],
         },
+        {
+          title: "Item 3 title",
+          url: "/item-3",
+          description: "item 3",
+          related_content: [
+            {
+              title: "Related link D",
+              link: "/related-link-d",
+            },
+          ],
+        }
       ],
     )
 
-    assert_link_with_text_in(".related-content-item", "/related-link-1", "Related link 1")
-    assert_link_with_text_in(".related-content-item", "/related-link-2", "Related link 2")
-    assert_link_with_text_in(".related-content-item", "/related-link-3", "Related link 3")
+    related_links = css_select(".related-content a").map { |link| link.text }
+    assert_equal ["Related link B", "Related link A", "Related link C"], related_links
   end
 
   test "renders all data attributes for tracking" do
@@ -98,16 +103,16 @@ def component_name
     assert_select "a[data-track-category=\"relatedLinkClicked\"]", 3
     assert_select "a[data-track-dimension-index=\"29\"]", 3
 
+    assert_select "a[data-track-dimension=\"Item title\"]", 1
+    assert_select "a[data-track-action=\"1\"]", 1
+    assert_select "a[data-track-label=\"/item\"]", 1
+
     assert_select "a[data-track-dimension=\"Related link 1\"]", 1
     assert_select "a[data-track-action=\"1.1\"]", 1
     assert_select "a[data-track-label=\"/related-link-1\"]", 1
 
     assert_select "a[data-track-dimension=\"Related link 2\"]", 1
     assert_select "a[data-track-action=\"1.2\"]", 1
     assert_select "a[data-track-label=\"/related-link-2\"]", 1
-
-    assert_select "a[data-track-dimension=\"Item title\"]", 1
-    assert_select "a[data-track-action=\"1.3\"]", 1
-    assert_select "a[data-track-label=\"/item\"]", 1
   end
 end