Merge pull request #1044 from alphagov/metadata-toggle

Metadata component expand/collapse for long lists
alphagov · May 22, 2017 · 936a505 · 936a505
2 parents 2f2b4e0 + 7fc1b70
commit 936a505
Show file tree

Hide file tree

Showing 8 changed files with 194 additions and 7 deletions.
diff --git a/app/assets/javascripts/modules/toggle.js b/app/assets/javascripts/modules/toggle.js
@@ -44,6 +44,12 @@
           $targets.removeClass('js-hidden')
         }
 
+        var toggledText = $toggle.data('toggled-text')
+        if (typeof toggledText === 'string') {
+          $toggle.data('toggled-text', $toggle.text())
+          $toggle.text(toggledText)
+        }
+
         event.preventDefault()
       }
 

diff --git a/app/assets/stylesheets/govuk-component/_metadata.scss b/app/assets/stylesheets/govuk-component/_metadata.scss
@@ -36,9 +36,31 @@
     @include media(tablet) {
       width: 70%;
     }
+
+    a {
+      text-decoration: none;
+    }
+
+    a:focus,
+    a:active,
+    a:hover {
+      text-decoration: underline;
+    }
   }
 
   &.direction-rtl dd {
     float: right;
   }
+
+  .toggle-wrap {
+    display: none;
+
+    a {
+      text-decoration: underline;
+    }
+  }
+
+  .js-enabled & .toggle-wrap {
+    display: block;
+  }
 }
diff --git a/app/views/govuk_component/docs/metadata.yml b/app/views/govuk_component/docs/metadata.yml
@@ -17,6 +17,12 @@ fixtures:
     from:
     - <a href='/government/organisations/ministry-of-defence'>Ministry of Defence</a>
     - <a href='/government/organisations/cabinet-office'>Cabinet Office</a>
+    - <a href="/government/organisations/department-for-business-energy-and-industrial-strategy">Department for Business, Energy &amp; Industrial Strategy</a>
+    - <a href="/government/organisations/foreign-commonwealth-office">Foreign &amp; Commonwealth Office</a>
+    - <a href="/government/people/william-hague">The Rt Hon William Hague</a>
+    - <a href="/government/organisations/department-for-environment-food-rural-affairs">Department for Environment, Food &amp; Rural Affairs</a>
+    - <a href="/government/organisations/department-for-work-pensions">Department for work and pensions</a>
+    - <a href="/government/organisations/foreign-commonwealth-office">Foreign and Commonwealth Office</a>
     history: Updated 2 weeks ago
     part_of:
     - <a href='/government/topics/energy'>Energy</a>
@@ -298,7 +304,7 @@ fixtures:
       - <a href="/government/world/st-maarten">St Maarten</a>
       - <a href="/government/world/st-pierre-and-miquelon">St Pierre &amp; Miquelon</a>
       - <a href="/government/world/tonga">Tonga</a>
-      - <a href="/government/world/wallis-and-futuna">Wallis and Futuna</a>"      
+      - <a href="/government/world/wallis-and-futuna">Wallis and Futuna</a>
     first_published: 5 December 2013
   basic_rtl:
     direction: rtl

diff --git a/app/views/govuk_component/metadata.raw.html.erb b/app/views/govuk_component/metadata.raw.html.erb
@@ -10,15 +10,19 @@
   direction_class = ""
   direction_class = " direction-#{direction}" if local_assigns.include?(:direction)
 %>
-<div class="govuk-metadata<%= direction_class %>">
+<div class="govuk-metadata<%= direction_class %>" data-module="toggle">
   <dl>
     <% if from.any? %>
       <dt><%= t("govuk_component.metadata.from", default: "From") %>:</dt>
-      <dd><%= from.to_sentence.html_safe %></dd>
+      <dd>
+        <%= render file: 'govuk_component/metadata_sentence.raw', locals: { items: from, toggle_id: "from" } %>
+      </dd>
     <% end %>
     <% if part_of.any? %>
       <dt><%= t("govuk_component.metadata.part_of", default: "Part of") %>:</dt>
-      <dd><%= part_of.to_sentence.html_safe %></dd>
+      <dd>
+        <%= render file: 'govuk_component/metadata_sentence.raw', locals: { items: part_of, toggle_id: "part-of" } %>
+      </dd>
     <% end %>
     <% if local_assigns.include?(:history) %>
       <dt><%= t("govuk_component.metadata.history", default: "History") %>:</dt>
@@ -42,14 +46,16 @@
       </dd>
     <% end %>
     <% if other.present? %>
-      <% other.each do |title, definition| %>
+      <% other.each_with_index do |(title, definition), index| %>
         <%
           definition ||= []
           definition = Array(definition)
         %>
         <% if definition.any? %>
           <dt><%= title %>:</dt>
-          <dd><%= definition.to_sentence.html_safe %></dd>
+          <dd>
+            <%= render file: 'govuk_component/metadata_sentence.raw', locals: { items: definition, toggle_id: index } %>
+          </dd>
         <% end %>
       <% end %>
     <% end %>

diff --git a/app/views/govuk_component/metadata_sentence.raw.html.erb b/app/views/govuk_component/metadata_sentence.raw.html.erb
@@ -0,0 +1,22 @@
+<%
+  list_limit = 5
+  remaining = []
+  if items.length > (list_limit + 2)
+    remaining = items[list_limit..items.length]
+    items = items[0...list_limit]
+  end
+%>
+<% if remaining.any? %>
+  <%= items.to_sentence(last_word_connector: ', ').html_safe %>
+  <div class="toggle-wrap">
+    <a href="#"
+       data-controls="toggle-<%= toggle_id %>"
+       data-expanded="false"
+       data-toggled-text="<%= t("govuk_component.metadata.toggle_less", default: "Show fewer") %>">
+        <%= t("govuk_component.metadata.toggle_more", number: remaining.length, default: "+ %{remaining.length} more") %>
+    </a>
+  </div>
+  <span id="toggle-<%= toggle_id %>" class="js-hidden"><%= remaining.to_sentence.html_safe %></span>
+<% else %>
+  <%= items.to_sentence.html_safe %>
+<% end %>
diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -25,6 +25,8 @@ en:
       published: "Published"
       last_updated: "Last updated"
       see_all_updates: "see all updates"
+      toggle_less: "Show fewer"
+      toggle_more: "+ %{number} more"
     previous_and_next_navigation:
       pagination: "Pagination"
     related_items:

diff --git a/spec/javascripts/modules/toggle.spec.js b/spec/javascripts/modules/toggle.spec.js
@@ -31,7 +31,7 @@ describe('A toggle module', function () {
     beforeEach(function () {
       element = $('\
         <div>\
-          <a href="#" class="my-toggle" data-expanded="false" data-controls="target">Toggle</a>\
+          <a href="#" class="my-toggle" data-expanded="false" data-controls="target" data-toggled-text="Show fewer">Toggle</a>\
           <div id="target" class="js-hidden">Target</div>\
         </div>')
 
@@ -51,6 +51,14 @@ describe('A toggle module', function () {
       element.find('.my-toggle').trigger('click')
       expect(element.find('.my-toggle').attr('aria-expanded')).toBe('false')
     })
+
+    it('updates the text shown in the toggle link when expanded if such text is supplied', function () {
+      expect(element.find('.my-toggle').data('toggled-text')).toBe('Toggle')
+      expect(element.find('.my-toggle').text()).toBe('Show fewer')
+      element.find('.my-toggle').trigger('click')
+      expect(element.find('.my-toggle').data('toggled-text')).toBe('Show fewer')
+      expect(element.find('.my-toggle').text()).toBe('Toggle')
+    })
   })
 
   describe('when clicking a toggle that controls multiple targets', function () {

diff --git a/test/govuk_component/metadata_test.rb b/test/govuk_component/metadata_test.rb
@@ -59,4 +59,119 @@ def component_name
     assert_definition('Part of:', 'this and that')
     assert_definition('Related topics:', 'a, b, and c')
   end
+
+  test "long lists of metadata are truncated and the remainder hidden behind a toggle for from" do
+    links = [
+      "<a href=\"/government/organisations/ministry-of-defence\">Ministry of Defence</a>",
+      "<a href=\"/government/organisations/cabinet-office\">Cabinet Office</a>",
+      "<a href=\"/government/organisations/department-for-business-energy-and-industrial-strategy\">Department for Business, Energy &amp; Industrial Strategy</a>",
+      "<a href=\"/government/organisations/foreign-commonwealth-office\">Foreign &amp; Commonwealth Office</a>",
+      "<a href=\"/government/people/william-hague\">The Rt Hon William Hague</a>",
+      "<a href=\"/government/organisations/department-for-environment-food-rural-affairs\">Department for Environment, Food &amp; Rural Affairs</a>",
+      "<a href=\"/government/organisations/department-for-work-pensions\">Department for work and pensions</a>",
+      "<a href=\"/government/organisations/foreign-commonwealth-office\">Foreign and Commonwealth Office</a>",
+    ]
+    render_component(from: links)
+
+    assert_truncation(links.length, 5)
+  end
+
+  test "short lists of metadata are not truncated for from" do
+    links = [
+      "<a href=\"/government/organisations/ministry-of-defence\">Ministry of Defence</a>",
+      "<a href=\"/government/organisations/cabinet-office\">Cabinet Office</a>",
+      "<a href=\"/government/organisations/department-for-business-energy-and-industrial-strategy\">Department for Business, Energy &amp; Industrial Strategy</a>",
+      "<a href=\"/government/organisations/foreign-commonwealth-office\">Foreign &amp; Commonwealth Office</a>",
+      "<a href=\"/government/people/william-hague\">The Rt Hon William Hague</a>",
+      "<a href=\"/government/organisations/department-for-environment-food-rural-affairs\">Department for Environment, Food &amp; Rural Affairs</a>",
+      "<a href=\"/government/organisations/department-for-work-pensions\">Department for work and pensions</a>",
+    ]
+    render_component(from: links)
+
+    assert_no_truncation(links.length)
+  end
+
+  test "long lists of metadata are truncated and the remainder hidden behind a toggle for part of" do
+    links = [
+      "<a href=\"/government/topics/energy\">Energy</a>",
+      "<a href=\"/government/topics/environment\">Environment</a>",
+      "<a href=\"/government/topics/arts-and-culture\">Arts and Culture</a>",
+      "<a href=\"/government/topics/borders-and-immigration\">Borders and Immigration</a>",
+      "<a href=\"/government/topics/business-and-enterprise\">Business and Enterprise</a>",
+      "<a href=\"/government/topics/children-and-young-people\">Children and Young People</a>",
+      "<a href=\"/government/topics/climate-change\">Climate Change</a>",
+      "<a href=\"/government/topics/community-and-society\">Community and Society</a>",
+    ]
+    render_component(part_of: links)
+
+    assert_truncation(links.length, 5)
+  end
+
+  test "short lists of metadata are not truncated for part of" do
+    links = [
+      "<a href=\"/government/topics/energy\">Energy</a>",
+      "<a href=\"/government/topics/environment\">Environment</a>",
+      "<a href=\"/government/topics/arts-and-culture\">Arts and Culture</a>",
+      "<a href=\"/government/topics/borders-and-immigration\">Borders and Immigration</a>",
+      "<a href=\"/government/topics/business-and-enterprise\">Business and Enterprise</a>",
+      "<a href=\"/government/topics/children-and-young-people\">Children and Young People</a>",
+      "<a href=\"/government/topics/climate-change\">Climate Change</a>",
+    ]
+    render_component(from: links)
+
+    assert_no_truncation(links.length)
+  end
+
+  test "long lists of metadata are truncated and the remainder hidden behind a toggle for other" do
+    links = [
+      "<a href=\"/business-finance-support?industries%5B%5D=agriculture-and-food\">Agriculture and food</a>",
+      "<a href=\"/business-finance-support?industries%5B%5D=business-and-finance\">Business and finance</a>",
+      "<a href=\"/business-finance-support?industries%5B%5D=construction\">Construction</a>",
+      "<a href=\"/business-finance-support?industries%5B%5D=education\">Education</a>",
+      "<a href=\"/business-finance-support?industries%5B%5D=health\">Health</a>",
+      "<a href=\"/business-finance-support?industries%5B%5D=hospitality-and-catering\">Hospitality and catering</a>",
+      "<a href=\"/business-finance-support?industries%5B%5D=information-technology-digital-and-creative\">IT, digital and creative</a>",
+      "<a href=\"/business-finance-support?industries%5B%5D=manufacturing\">Manufacturing</a>",
+      "<a href=\"/business-finance-support?industries%5B%5D=mining\">Mining</a>",
+      "<a href=\"/business-finance-support?industries%5B%5D=real-estate-and-property\">Real estate and property</a>",
+      "<a href=\"/business-finance-support?industries%5B%5D=science-and-technology\">Science and technology</a>",
+      "<a href=\"/business-finance-support?industries%5B%5D=service-industries\">Service industries</a>",
+      "<a href=\"/business-finance-support?industries%5B%5D=transport-and-distribution\">Transport and distribution</a>",
+      "<a href=\"/business-finance-support?industries%5B%5D=travel-and-leisure\">Travel and leisure</a>",
+      "<a href=\"/business-finance-support?industries%5B%5D=utilities-providers\">Utilities providers</a>",
+      "<a href=\"/business-finance-support?industries%5B%5D=wholesale-and-retail\">Wholesale and retail</a>"
+    ]
+    render_component(other: {
+        "Industry": links
+    })
+
+    assert_truncation(links.length, 5)
+  end
+
+  test "short lists of metadata are not truncated for other" do
+    links = [
+      "<a href=\"/business-finance-support?industries%5B%5D=agriculture-and-food\">Agriculture and food</a>",
+      "<a href=\"/business-finance-support?industries%5B%5D=business-and-finance\">Business and finance</a>",
+      "<a href=\"/business-finance-support?industries%5B%5D=construction\">Construction</a>",
+      "<a href=\"/business-finance-support?industries%5B%5D=education\">Education</a>",
+      "<a href=\"/business-finance-support?industries%5B%5D=health\">Health</a>",
+      "<a href=\"/business-finance-support?industries%5B%5D=hospitality-and-catering\">Hospitality and catering</a>",
+    ]
+    render_component(other: {
+        "Industry": links
+    })
+
+    assert_no_truncation(links.length)
+  end
+
+  def assert_truncation(length, limit)
+    assert_select "span", count: 1
+    assert_select "dd > a", count: limit
+    assert_select "dd span a", count: length - limit
+  end
+
+  def assert_no_truncation(length)
+    assert_select "dd > a", count: length
+    assert_select "span", count: 0
+  end
 end