From f36b72a5949c9c62cba6931aeccbedac7dc6b34d Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Wed, 17 May 2017 09:19:28 +0000 Subject: [PATCH 01/10] Metadata component expand/collapse for long lists * erb file now splits links into two chunks if longer than 5 (+2) items, including toggle link * New JS for handling interaction, new styles added for show/hide and toggle link * Tests added for long list with truncation required, short list with no truncation required --- .../javascripts/modules/toggle-metadata.js | 28 +++++++++++++ app/assets/javascripts/start-modules.js | 1 + .../govuk-component/_metadata.scss | 18 +++++++++ .../govuk_component/metadata.raw.html.erb | 16 +++++++- test/govuk_component/metadata_test.rb | 40 +++++++++++++++++++ test/govuk_component_test_helper.rb | 8 ++++ 6 files changed, 109 insertions(+), 2 deletions(-) create mode 100644 app/assets/javascripts/modules/toggle-metadata.js diff --git a/app/assets/javascripts/modules/toggle-metadata.js b/app/assets/javascripts/modules/toggle-metadata.js new file mode 100644 index 000000000..1aa90961f --- /dev/null +++ b/app/assets/javascripts/modules/toggle-metadata.js @@ -0,0 +1,28 @@ +/* + Toggle the display of metadata lists where there are lots of items + Assumes items to hide are wrapped in a span of class js-truncatedwrap + Toggles visibility of said +*/ + +;(function (Modules) { + 'use strict' + + Modules.ToggleMetadata = function () { + this.start = function ($el) { + $('.js-truncated').attr('aria-hidden', 'true') + $('.js-truncated-toggle').on('click', function (e) { + e.preventDefault() + var $parentElement = $(this).closest('.js-truncated-wrap') + if ($(this).attr('aria-expanded') == 'true') { + $(this).attr('aria-expanded', 'false') + $(this).html($(this).attr('data-text')) + $parentElement.find('.js-truncated').attr('aria-hidden', 'true') + } else { + $(this).attr('aria-expanded', 'true') + $(this).html('- show less') + $parentElement.find('.js-truncated').attr('aria-hidden', 'false') + } + }) + } + } +})(window.GOVUK.Modules) diff --git a/app/assets/javascripts/start-modules.js b/app/assets/javascripts/start-modules.js index e6cabd3a4..11fd9740d 100644 --- a/app/assets/javascripts/start-modules.js +++ b/app/assets/javascripts/start-modules.js @@ -2,6 +2,7 @@ //= require modules/global-bar //= require modules/sticky-element-container //= require modules/toggle +//= require modules/toggle-metadata //= require modules/track-click $(document).ready(function () { diff --git a/app/assets/stylesheets/govuk-component/_metadata.scss b/app/assets/stylesheets/govuk-component/_metadata.scss index eaa51528b..2f7f92f39 100644 --- a/app/assets/stylesheets/govuk-component/_metadata.scss +++ b/app/assets/stylesheets/govuk-component/_metadata.scss @@ -41,4 +41,22 @@ &.direction-rtl dd { float: right; } + + .truncated-toggle { + display:none; + } + + .truncated { + &[aria-hidden="true"]{ + display:none; + } + } +} + +.js-enabled { + .govuk-metadata { + .truncated-toggle { + display:block; + } + } } diff --git a/app/views/govuk_component/metadata.raw.html.erb b/app/views/govuk_component/metadata.raw.html.erb index cac520125..b5c2456db 100644 --- a/app/views/govuk_component/metadata.raw.html.erb +++ b/app/views/govuk_component/metadata.raw.html.erb @@ -10,7 +10,7 @@ direction_class = "" direction_class = " direction-#{direction}" if local_assigns.include?(:direction) %> -
+
<% if from.any? %>
<%= t("govuk_component.metadata.from", default: "From") %>:
@@ -46,10 +46,22 @@ <% definition ||= [] definition = Array(definition) + listlimit = 5 + remaining = [] + if definition.length > (listlimit + 2) + remaining = definition[listlimit..definition.length] + definition = definition[0...listlimit] + end %> <% if definition.any? %>
<%= title %>:
-
<%= definition.to_sentence.html_safe %>
+ <% if remaining.any? %> +
+ <%= definition.to_sentence(last_word_connector: ', ').html_safe %>, <%= remaining.to_sentence.html_safe %> +
+ <% else %> +
<%= definition.to_sentence.html_safe %>
+ <% end %> <% end %> <% end %> <% end %> diff --git a/test/govuk_component/metadata_test.rb b/test/govuk_component/metadata_test.rb index cef902795..415f3e81b 100644 --- a/test/govuk_component/metadata_test.rb +++ b/test/govuk_component/metadata_test.rb @@ -59,4 +59,44 @@ def component_name assert_definition('Part of:', 'this and that') assert_definition('Related topics:', 'a, b, and c') end + + test "rendering of long metadata into wrapping for Javascript interaction" do + render_component(other:{ + "Industry": [ + "Agriculture and food", + "Business and finance", + "Construction", + "Education", + "Health", + "Hospitality and catering", + "IT, digital and creative", + "Manufacturing", + "Mining", + "Real estate and property", + "Science and technology", + "Service industries", + "Transport and distribution", + "Travel and leisure", + "Utilities providers", + "Wholesale and retail" + ] + }) + result = "Agriculture and food, Business and finance, Construction, Education, Health, Hospitality and catering, IT, digital and creative, Manufacturing, Mining, Real estate and property, Science and technology, Service industries, Transport and distribution, Travel and leisure, Utilities providers, and Wholesale and retail+ 11 more" + assert_long_list_truncation(result) + end + + test "rendering of metadata not too long to trigger wrapping for Javascript interaction" do + render_component(other:{ + "Industry": [ + "Agriculture and food", + "Business and finance", + "Construction", + "Education", + "Health", + "Hospitality and catering", + ] + }) + result = "Agriculture and food, Business and finance, Construction, Education, Health, and Hospitality and catering" + assert_long_list_without_truncation(result) + end end diff --git a/test/govuk_component_test_helper.rb b/test/govuk_component_test_helper.rb index 87a5f696a..475d70080 100644 --- a/test/govuk_component_test_helper.rb +++ b/test/govuk_component_test_helper.rb @@ -39,4 +39,12 @@ def assert_timestamp_in(selector, timestamp, text) def assert_tracking_link(name, value, total = 1) assert_select "a[data-track-#{name}='#{value}']", total end + + def assert_long_list_truncation(links) + assert_select "dd[class=\"js-truncatedwrap\"]", html: links + end + + def assert_long_list_without_truncation(links) + assert_select "dd", html: links + end end From fbda367cea1d1afeb4078fe116458d8413ed0722 Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Wed, 17 May 2017 12:38:58 +0000 Subject: [PATCH 02/10] Updating metadata toggle to use existing toggle JS * Tests now much cleaner and less verbose * CSS reduced * Test code moved out of test helper and into metadata test --- .../javascripts/modules/toggle-metadata.js | 28 -------- app/assets/javascripts/start-modules.js | 15 ++-- .../govuk-component/_metadata.scss | 18 ++--- app/views/govuk_component/docs/metadata.yml | 2 +- .../govuk_component/metadata.raw.html.erb | 29 ++++---- test/govuk_component/metadata_test.rb | 68 ++++++++++--------- test/govuk_component_test_helper.rb | 8 --- 7 files changed, 64 insertions(+), 104 deletions(-) delete mode 100644 app/assets/javascripts/modules/toggle-metadata.js diff --git a/app/assets/javascripts/modules/toggle-metadata.js b/app/assets/javascripts/modules/toggle-metadata.js deleted file mode 100644 index 1aa90961f..000000000 --- a/app/assets/javascripts/modules/toggle-metadata.js +++ /dev/null @@ -1,28 +0,0 @@ -/* - Toggle the display of metadata lists where there are lots of items - Assumes items to hide are wrapped in a span of class js-truncatedwrap - Toggles visibility of said -*/ - -;(function (Modules) { - 'use strict' - - Modules.ToggleMetadata = function () { - this.start = function ($el) { - $('.js-truncated').attr('aria-hidden', 'true') - $('.js-truncated-toggle').on('click', function (e) { - e.preventDefault() - var $parentElement = $(this).closest('.js-truncated-wrap') - if ($(this).attr('aria-expanded') == 'true') { - $(this).attr('aria-expanded', 'false') - $(this).html($(this).attr('data-text')) - $parentElement.find('.js-truncated').attr('aria-hidden', 'true') - } else { - $(this).attr('aria-expanded', 'true') - $(this).html('- show less') - $parentElement.find('.js-truncated').attr('aria-hidden', 'false') - } - }) - } - } -})(window.GOVUK.Modules) diff --git a/app/assets/javascripts/start-modules.js b/app/assets/javascripts/start-modules.js index 11fd9740d..9b2a4c20d 100644 --- a/app/assets/javascripts/start-modules.js +++ b/app/assets/javascripts/start-modules.js @@ -1,10 +1,9 @@ -//= require govuk/modules -//= require modules/global-bar -//= require modules/sticky-element-container -//= require modules/toggle -//= require modules/toggle-metadata -//= require modules/track-click +// = require govuk/modules +// = require modules/global-bar +// = require modules/sticky-element-container +// = require modules/toggle +// = require modules/track-click $(document).ready(function () { - GOVUK.modules.start(); -}); + GOVUK.modules.start() +}) diff --git a/app/assets/stylesheets/govuk-component/_metadata.scss b/app/assets/stylesheets/govuk-component/_metadata.scss index 2f7f92f39..d40737a1f 100644 --- a/app/assets/stylesheets/govuk-component/_metadata.scss +++ b/app/assets/stylesheets/govuk-component/_metadata.scss @@ -42,21 +42,11 @@ float: right; } - .truncated-toggle { - display:none; + .toggle-wrap { + display: none; } - .truncated { - &[aria-hidden="true"]{ - display:none; - } - } -} - -.js-enabled { - .govuk-metadata { - .truncated-toggle { - display:block; - } + .js-enabled & .toggle-wrap { + display: block; } } diff --git a/app/views/govuk_component/docs/metadata.yml b/app/views/govuk_component/docs/metadata.yml index 2b5bab4bc..96c5b5771 100644 --- a/app/views/govuk_component/docs/metadata.yml +++ b/app/views/govuk_component/docs/metadata.yml @@ -298,7 +298,7 @@ fixtures: - St Maarten - St Pierre & Miquelon - Tonga - - Wallis and Futuna" + - Wallis and Futuna 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 index b5c2456db..bd4ff86d8 100644 --- a/app/views/govuk_component/metadata.raw.html.erb +++ b/app/views/govuk_component/metadata.raw.html.erb @@ -10,7 +10,7 @@ direction_class = "" direction_class = " direction-#{direction}" if local_assigns.include?(:direction) %> -
+
<% if from.any? %>
<%= t("govuk_component.metadata.from", default: "From") %>:
@@ -42,26 +42,29 @@ <% end %> <% if other.present? %> - <% other.each do |title, definition| %> + <% other.each_with_index do |(title, definition), i| %> <% definition ||= [] definition = Array(definition) - listlimit = 5 + list_limit = 5 remaining = [] - if definition.length > (listlimit + 2) - remaining = definition[listlimit..definition.length] - definition = definition[0...listlimit] + if definition.length > (list_limit + 2) + remaining = definition[list_limit..definition.length] + definition = definition[0...list_limit] end %> <% if definition.any? %>
<%= title %>:
- <% if remaining.any? %> -
- <%= definition.to_sentence(last_word_connector: ', ').html_safe %>, <%= remaining.to_sentence.html_safe %> -
- <% else %> -
<%= definition.to_sentence.html_safe %>
- <% end %> +
+ <% if remaining.any? %> + <%= definition.to_sentence(last_word_connector: ', ').html_safe %>, <%= remaining.to_sentence.html_safe %> +
+ + <%= remaining.length %> more +
+ <% else %> + <%= definition.to_sentence.html_safe %> + <% end %> +
<% end %> <% end %> <% end %> diff --git a/test/govuk_component/metadata_test.rb b/test/govuk_component/metadata_test.rb index 415f3e81b..a49d6ac0f 100644 --- a/test/govuk_component/metadata_test.rb +++ b/test/govuk_component/metadata_test.rb @@ -61,42 +61,46 @@ def component_name end test "rendering of long metadata into wrapping for Javascript interaction" do - render_component(other:{ - "Industry": [ - "Agriculture and food", - "Business and finance", - "Construction", - "Education", - "Health", - "Hospitality and catering", - "IT, digital and creative", - "Manufacturing", - "Mining", - "Real estate and property", - "Science and technology", - "Service industries", - "Transport and distribution", - "Travel and leisure", - "Utilities providers", - "Wholesale and retail" - ] + limit = 5 + links = [ + "Agriculture and food", + "Business and finance", + "Construction", + "Education", + "Health", + "Hospitality and catering", + "IT, digital and creative", + "Manufacturing", + "Mining", + "Real estate and property", + "Science and technology", + "Service industries", + "Transport and distribution", + "Travel and leisure", + "Utilities providers", + "Wholesale and retail" + ] + render_component(other: { + "Industry": links }) - result = "Agriculture and food, Business and finance, Construction, Education, Health, Hospitality and catering, IT, digital and creative, Manufacturing, Mining, Real estate and property, Science and technology, Service industries, Transport and distribution, Travel and leisure, Utilities providers, and Wholesale and retail+ 11 more" - assert_long_list_truncation(result) + assert_select "span", count: 1 + assert_select "dd > a", count: limit + assert_select "dd span a", count: links.length - limit end test "rendering of metadata not too long to trigger wrapping for Javascript interaction" do - render_component(other:{ - "Industry": [ - "Agriculture and food", - "Business and finance", - "Construction", - "Education", - "Health", - "Hospitality and catering", - ] + links = [ + "Agriculture and food", + "Business and finance", + "Construction", + "Education", + "Health", + "Hospitality and catering", + ] + render_component(other: { + "Industry": links }) - result = "Agriculture and food, Business and finance, Construction, Education, Health, and Hospitality and catering" - assert_long_list_without_truncation(result) + assert_select "dd > a", count: links.length + assert_select "span", count: 0 end end diff --git a/test/govuk_component_test_helper.rb b/test/govuk_component_test_helper.rb index 475d70080..87a5f696a 100644 --- a/test/govuk_component_test_helper.rb +++ b/test/govuk_component_test_helper.rb @@ -39,12 +39,4 @@ def assert_timestamp_in(selector, timestamp, text) def assert_tracking_link(name, value, total = 1) assert_select "a[data-track-#{name}='#{value}']", total end - - def assert_long_list_truncation(links) - assert_select "dd[class=\"js-truncatedwrap\"]", html: links - end - - def assert_long_list_without_truncation(links) - assert_select "dd", html: links - end end From 8ebaefc574fc828f832b00f88c7336ba1c700d89 Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Wed, 17 May 2017 13:08:48 +0000 Subject: [PATCH 03/10] Updating toggle js to allow text changes * Toggle now looks for an optional data attribute of toggled-text, if found, swaps on click with link text * Jasmine test updated to reflect this --- app/assets/javascripts/modules/toggle.js | 69 +++++----- .../govuk_component/metadata.raw.html.erb | 2 +- spec/javascripts/modules/toggle.spec.js | 122 ++++++++++-------- 3 files changed, 103 insertions(+), 90 deletions(-) diff --git a/app/assets/javascripts/modules/toggle.js b/app/assets/javascripts/modules/toggle.js index 208fd0ca0..131a3b6e1 100644 --- a/app/assets/javascripts/modules/toggle.js +++ b/app/assets/javascripts/modules/toggle.js @@ -6,54 +6,59 @@ controls. This is synonymous with ARIA attributes, which get added when starting. */ -(function(Modules) { - "use strict"; +(function (Modules) { + 'use strict' - Modules.Toggle = function() { - this.start = function($el) { - var toggleSelector = '[data-controls][data-expanded]'; + Modules.Toggle = function () { + this.start = function ($el) { + var toggleSelector = '[data-controls][data-expanded]' - $el.on('click', toggleSelector, toggle); - $el.find(toggleSelector).each(addAriaAttrs); + $el.on('click', toggleSelector, toggle) + $el.find(toggleSelector).each(addAriaAttrs) // Add the ARIA attributes with JavaScript // If the JS fails and there's no interactive elements, having // no aria attributes is an accurate representation. - function addAriaAttrs() { - var $toggle = $(this); - $toggle.attr('role', 'button'); - $toggle.attr('aria-controls', $toggle.data('controls')); - $toggle.attr('aria-expanded', $toggle.data('expanded')); - - var $targets = getTargetElements($toggle); - $targets.attr('aria-live', 'polite'); - $targets.attr('role', 'region'); - $toggle.data('$targets', $targets); + function addAriaAttrs () { + var $toggle = $(this) + $toggle.attr('role', 'button') + $toggle.attr('aria-controls', $toggle.data('controls')) + $toggle.attr('aria-expanded', $toggle.data('expanded')) + + var $targets = getTargetElements($toggle) + $targets.attr('aria-live', 'polite') + $targets.attr('role', 'region') + $toggle.data('$targets', $targets) } - function toggle(event) { + function toggle (event) { var $toggle = $(event.target), - expanded = $toggle.attr('aria-expanded') === "true", - $targets = $toggle.data('$targets'); + expanded = $toggle.attr('aria-expanded') === 'true', + $targets = $toggle.data('$targets') if (expanded) { - $toggle.attr('aria-expanded', false); - $targets.addClass('js-hidden'); + $toggle.attr('aria-expanded', false) + $targets.addClass('js-hidden') } else { - $toggle.attr('aria-expanded', true); - $targets.removeClass('js-hidden'); + $toggle.attr('aria-expanded', true) + $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(); + event.preventDefault() } - function getTargetElements($toggle) { + function getTargetElements ($toggle) { var ids = $toggle.attr('aria-controls').split(' '), - selector = '#' + ids.join(', #'); + selector = '#' + ids.join(', #') - return $el.find(selector); + return $el.find(selector) } - }; - }; - -})(window.GOVUK.Modules); + } + } +})(window.GOVUK.Modules) diff --git a/app/views/govuk_component/metadata.raw.html.erb b/app/views/govuk_component/metadata.raw.html.erb index bd4ff86d8..5185531e7 100644 --- a/app/views/govuk_component/metadata.raw.html.erb +++ b/app/views/govuk_component/metadata.raw.html.erb @@ -59,7 +59,7 @@ <% if remaining.any? %> <%= definition.to_sentence(last_word_connector: ', ').html_safe %>, <%= remaining.to_sentence.html_safe %>
- + <%= remaining.length %> more + + <%= remaining.length %> more
<% else %> <%= definition.to_sentence.html_safe %> diff --git a/spec/javascripts/modules/toggle.spec.js b/spec/javascripts/modules/toggle.spec.js index e462ba59f..8d75ed625 100644 --- a/spec/javascripts/modules/toggle.spec.js +++ b/spec/javascripts/modules/toggle.spec.js @@ -1,78 +1,86 @@ -describe('A toggle module', function() { - "use strict"; +describe('A toggle module', function () { + 'use strict' var toggle, - element; + element - beforeEach(function() { - toggle = new GOVUK.Modules.Toggle(); - }); + beforeEach(function () { + toggle = new GOVUK.Modules.Toggle() + }) - describe('when starting', function() { + describe('when starting', function () { var element = $('\
\ Toggle\
Target
\ -
'); - - it('adds aria attributes to toggles', function() { - toggle.start(element); - - var $toggle = element.find('.my-toggle'); - expect($toggle.attr('role')).toBe('button'); - expect($toggle.attr('aria-expanded')).toBe('false'); - expect($toggle.attr('aria-controls')).toBe('target'); - }); - }); - - describe('when clicking a toggle', function() { - var element; - - beforeEach(function() { +
') + + it('adds aria attributes to toggles', function () { + toggle.start(element) + + var $toggle = element.find('.my-toggle') + expect($toggle.attr('role')).toBe('button') + expect($toggle.attr('aria-expanded')).toBe('false') + expect($toggle.attr('aria-controls')).toBe('target') + }) + }) + + describe('when clicking a toggle', function () { + var element + + beforeEach(function () { element = $('\
\ - Toggle\ + Toggle\
Target
\ -
'); +
') - toggle.start(element); - element.find('.my-toggle').trigger('click'); - }); + toggle.start(element) + element.find('.my-toggle').trigger('click') + }) - it('toggles the display of a target', function() { - expect(element.find('#target').is('.js-hidden')).toBe(false); - element.find('.my-toggle').trigger('click'); - expect(element.find('#target').is('.js-hidden')).toBe(true); - }); + it('toggles the display of a target', function () { + expect(element.find('#target').is('.js-hidden')).toBe(false) + element.find('.my-toggle').trigger('click') + expect(element.find('#target').is('.js-hidden')).toBe(true) + }) - it('updates the aria-expanded attribute on the toggle', function() { - expect(element.find('.my-toggle').attr('aria-expanded')).toBe('true'); + it('updates the aria-expanded attribute on the toggle', function () { + expect(element.find('.my-toggle').attr('aria-expanded')).toBe('true') - element.find('.my-toggle').trigger('click'); - expect(element.find('.my-toggle').attr('aria-expanded')).toBe('false'); - }); - }); + element.find('.my-toggle').trigger('click') + expect(element.find('.my-toggle').attr('aria-expanded')).toBe('false') + }) - describe('when clicking a toggle that controls multiple targets', function() { - it('toggles the display of each target', function() { + 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 () { + it('toggles the display of each target', function () { var element = $('\
\ Toggle\
Target
\
Another target
\ -
'); - - toggle.start(element); - expect(element.find('#target').is('.js-hidden')).toBe(true); - expect(element.find('#another-target').is('.js-hidden')).toBe(true); - - element.find('.my-toggle').trigger('click'); - expect(element.find('#target').is('.js-hidden')).toBe(false); - expect(element.find('#another-target').is('.js-hidden')).toBe(false); - - element.find('.my-toggle').trigger('click'); - expect(element.find('#target').is('.js-hidden')).toBe(true); - expect(element.find('#another-target').is('.js-hidden')).toBe(true); - }); - }); -}); +
') + + toggle.start(element) + expect(element.find('#target').is('.js-hidden')).toBe(true) + expect(element.find('#another-target').is('.js-hidden')).toBe(true) + + element.find('.my-toggle').trigger('click') + expect(element.find('#target').is('.js-hidden')).toBe(false) + expect(element.find('#another-target').is('.js-hidden')).toBe(false) + + element.find('.my-toggle').trigger('click') + expect(element.find('#target').is('.js-hidden')).toBe(true) + expect(element.find('#another-target').is('.js-hidden')).toBe(true) + }) + }) +}) From 73d3b52c2703c8eb71602847de750ffe7f6acc71 Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Wed, 17 May 2017 14:18:13 +0000 Subject: [PATCH 04/10] Partial added for metadata list expansion * JS expand collapse on from, part of, and other * Component guide examples updated to reflect changes --- app/views/govuk_component/docs/metadata.yml | 9 +++++++ .../govuk_component/metadata.raw.html.erb | 25 ++++++------------- .../metadata_sentence.raw.html.erb | 16 ++++++++++++ 3 files changed, 33 insertions(+), 17 deletions(-) create mode 100644 app/views/govuk_component/metadata_sentence.raw.html.erb diff --git a/app/views/govuk_component/docs/metadata.yml b/app/views/govuk_component/docs/metadata.yml index 96c5b5771..5342e689b 100644 --- a/app/views/govuk_component/docs/metadata.yml +++ b/app/views/govuk_component/docs/metadata.yml @@ -17,6 +17,15 @@ fixtures: from: - Ministry of Defence - Cabinet Office + from: + - Ministry of Defence + - Cabinet Office + - Department for Business, Energy & Industrial Strategy + - Foreign & Commonwealth Office + - The Rt Hon William Hague + - Department for Environment, Food & Rural Affairs + - Department for work and pensions + - Foreign and Commonwealth Office history: Updated 2 weeks ago part_of: - Energy diff --git a/app/views/govuk_component/metadata.raw.html.erb b/app/views/govuk_component/metadata.raw.html.erb index 5185531e7..aa6f19d92 100644 --- a/app/views/govuk_component/metadata.raw.html.erb +++ b/app/views/govuk_component/metadata.raw.html.erb @@ -14,11 +14,15 @@
<% if from.any? %>
<%= t("govuk_component.metadata.from", default: "From") %>:
-
<%= from.to_sentence.html_safe %>
+
+ <%= render file: 'govuk_component/metadata_sentence.raw', locals: { items: from, toggle_id: "from" } %> +
<% end %> <% if part_of.any? %>
<%= t("govuk_component.metadata.part_of", default: "Part of") %>:
-
<%= part_of.to_sentence.html_safe %>
+
+ <%= render file: 'govuk_component/metadata_sentence.raw', locals: { items: part_of, toggle_id: "part-of" } %> +
<% end %> <% if local_assigns.include?(:history) %>
<%= t("govuk_component.metadata.history", default: "History") %>:
@@ -42,28 +46,15 @@ <% end %> <% if other.present? %> - <% other.each_with_index do |(title, definition), i| %> + <% other.each_with_index do |(title, definition), index| %> <% definition ||= [] definition = Array(definition) - list_limit = 5 - remaining = [] - if definition.length > (list_limit + 2) - remaining = definition[list_limit..definition.length] - definition = definition[0...list_limit] - end %> <% if definition.any? %>
<%= title %>:
- <% if remaining.any? %> - <%= definition.to_sentence(last_word_connector: ', ').html_safe %>, <%= remaining.to_sentence.html_safe %> -
- + <%= remaining.length %> more -
- <% else %> - <%= definition.to_sentence.html_safe %> - <% end %> + <%= render file: 'govuk_component/metadata_sentence.raw', locals: { items: definition, toggle_id: index } %>
<% end %> <% end %> diff --git a/app/views/govuk_component/metadata_sentence.raw.html.erb b/app/views/govuk_component/metadata_sentence.raw.html.erb new file mode 100644 index 000000000..a3b57b535 --- /dev/null +++ b/app/views/govuk_component/metadata_sentence.raw.html.erb @@ -0,0 +1,16 @@ +<% + 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 %>, <%= remaining.to_sentence.html_safe %> +
+ + <%= remaining.length %> more +
+<% else %> + <%= items.to_sentence.html_safe %> +<% end %> From 8492953c9546fe6e461962a3ddd72136cc8d2d2e Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Wed, 17 May 2017 14:49:23 +0000 Subject: [PATCH 05/10] Changing link style in metadata block * Links are not underlined by default, apart from the show more toggle link --- .../stylesheets/govuk-component/_metadata.scss | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/app/assets/stylesheets/govuk-component/_metadata.scss b/app/assets/stylesheets/govuk-component/_metadata.scss index d40737a1f..866ca22f8 100644 --- a/app/assets/stylesheets/govuk-component/_metadata.scss +++ b/app/assets/stylesheets/govuk-component/_metadata.scss @@ -36,6 +36,16 @@ @include media(tablet) { width: 70%; } + + a { + text-decoration: none; + } + + a:focus, + a:active, + a:hover { + text-decoration: underline; + } } &.direction-rtl dd { @@ -44,6 +54,10 @@ .toggle-wrap { display: none; + + a { + text-decoration: underline; + } } .js-enabled & .toggle-wrap { From b57d0841ead611ec90bb5f86398f0c82a22d662b Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Fri, 19 May 2017 08:30:58 +0000 Subject: [PATCH 06/10] Improving test coverage for metadata toggle * Tests from and part of for both toggle presence and absence * Truncation assert moved to separate method for cleanness --- test/govuk_component/metadata_test.rb | 85 ++++++++++++++++++++++++--- 1 file changed, 78 insertions(+), 7 deletions(-) diff --git a/test/govuk_component/metadata_test.rb b/test/govuk_component/metadata_test.rb index a49d6ac0f..68ee22e33 100644 --- a/test/govuk_component/metadata_test.rb +++ b/test/govuk_component/metadata_test.rb @@ -60,8 +60,69 @@ def component_name assert_definition('Related topics:', 'a, b, and c') end - test "rendering of long metadata into wrapping for Javascript interaction" do - limit = 5 + test "long lists of metadata are truncated and the remainder hidden behind a toggle for from" do + links = [ + "Ministry of Defence", + "Cabinet Office", + "Department for Business, Energy & Industrial Strategy", + "Foreign & Commonwealth Office", + "The Rt Hon William Hague", + "Department for Environment, Food & Rural Affairs", + "Department for work and pensions", + "Foreign and Commonwealth Office", + ] + render_component(from: links) + + assert_truncation(links.length, 5) + end + + test "short lists of metadata are not truncated for from" do + links = [ + "Ministry of Defence", + "Cabinet Office", + "Department for Business, Energy & Industrial Strategy", + "Foreign & Commonwealth Office", + "The Rt Hon William Hague", + "Department for Environment, Food & Rural Affairs", + "Department for work and pensions", + ] + 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 = [ + "Energy", + "Environment", + "Arts and Culture", + "Borders and Immigration", + "Business and Enterprise", + "Children and Young People", + "Climate Change", + "Community and Society", + ] + render_component(part_of: links) + + assert_truncation(links.length, 5) + end + + test "short lists of metadata are not truncated for part of" do + links = [ + "Energy", + "Environment", + "Arts and Culture", + "Borders and Immigration", + "Business and Enterprise", + "Children and Young People", + "Climate Change", + ] + 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 = [ "Agriculture and food", "Business and finance", @@ -83,12 +144,11 @@ def component_name render_component(other: { "Industry": links }) - assert_select "span", count: 1 - assert_select "dd > a", count: limit - assert_select "dd span a", count: links.length - limit + + assert_truncation(links.length, 5) end - test "rendering of metadata not too long to trigger wrapping for Javascript interaction" do + test "short lists of metadata are not truncated for other" do links = [ "Agriculture and food", "Business and finance", @@ -100,7 +160,18 @@ def component_name render_component(other: { "Industry": links }) - assert_select "dd > a", count: links.length + + 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 From cca7e1f1ad7d31810152093bc6bf9b5e66a462d1 Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Fri, 19 May 2017 08:48:25 +0000 Subject: [PATCH 07/10] Remove duplicate From example from component guide --- app/views/govuk_component/docs/metadata.yml | 3 --- 1 file changed, 3 deletions(-) diff --git a/app/views/govuk_component/docs/metadata.yml b/app/views/govuk_component/docs/metadata.yml index 5342e689b..335d839e3 100644 --- a/app/views/govuk_component/docs/metadata.yml +++ b/app/views/govuk_component/docs/metadata.yml @@ -14,9 +14,6 @@ fixtures: last_updated: 10 September 2015 see_updates_link: true extensive: - from: - - Ministry of Defence - - Cabinet Office from: - Ministry of Defence - Cabinet Office From 21e23def17e896c1d917aa4dce52428befe09bab Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Fri, 19 May 2017 09:11:08 +0000 Subject: [PATCH 08/10] Metadata toggle control text added to locale --- app/views/govuk_component/metadata_sentence.raw.html.erb | 2 +- config/locales/en.yml | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/app/views/govuk_component/metadata_sentence.raw.html.erb b/app/views/govuk_component/metadata_sentence.raw.html.erb index a3b57b535..52f07cc30 100644 --- a/app/views/govuk_component/metadata_sentence.raw.html.erb +++ b/app/views/govuk_component/metadata_sentence.raw.html.erb @@ -9,7 +9,7 @@ <% if remaining.any? %> <%= items.to_sentence(last_word_connector: ', ').html_safe %>, <%= remaining.to_sentence.html_safe %>
- + <%= remaining.length %> more + ">+ <%= remaining.length %> <%= t("govuk_component.metadata.toggle_more", default: "more") %>
<% else %> <%= items.to_sentence.html_safe %> diff --git a/config/locales/en.yml b/config/locales/en.yml index f080e6c7a..975c4bc1e 100644 --- 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: "more" previous_and_next_navigation: pagination: "Pagination" related_items: From b21e4a27816bf9586d3f9c56f29779dd2b5c4394 Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Fri, 19 May 2017 09:39:28 +0000 Subject: [PATCH 09/10] Improving accessibility of metadata toggle * Extra items moved to follow the toggle link, not before * Taborder is now first items, toggle control, collapsed items * Show fewer text amended from '- show fewer' to 'Show fewer' --- .../govuk_component/metadata_sentence.raw.html.erb | 10 ++++++++-- config/locales/en.yml | 2 +- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/app/views/govuk_component/metadata_sentence.raw.html.erb b/app/views/govuk_component/metadata_sentence.raw.html.erb index 52f07cc30..4b79f0e18 100644 --- a/app/views/govuk_component/metadata_sentence.raw.html.erb +++ b/app/views/govuk_component/metadata_sentence.raw.html.erb @@ -7,10 +7,16 @@ end %> <% if remaining.any? %> - <%= items.to_sentence(last_word_connector: ', ').html_safe %>, <%= remaining.to_sentence.html_safe %> + <%= items.to_sentence(last_word_connector: ', ').html_safe %>
- ">+ <%= remaining.length %> <%= t("govuk_component.metadata.toggle_more", default: "more") %> + "> + + <%= remaining.length %> <%= t("govuk_component.metadata.toggle_more", default: "more") %> +
+ <%= remaining.to_sentence.html_safe %> <% else %> <%= items.to_sentence.html_safe %> <% end %> diff --git a/config/locales/en.yml b/config/locales/en.yml index 975c4bc1e..cde010daf 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -25,7 +25,7 @@ en: published: "Published" last_updated: "Last updated" see_all_updates: "see all updates" - toggle_less: "show fewer" + toggle_less: "Show fewer" toggle_more: "more" previous_and_next_navigation: pagination: "Pagination" From 7fc1b70067aaf22eed094eb934004b414443391b Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Fri, 19 May 2017 10:40:16 +0000 Subject: [PATCH 10/10] Improved translation handling for metadata toggle --- app/views/govuk_component/metadata_sentence.raw.html.erb | 2 +- config/locales/en.yml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/views/govuk_component/metadata_sentence.raw.html.erb b/app/views/govuk_component/metadata_sentence.raw.html.erb index 4b79f0e18..6d5ce79a0 100644 --- a/app/views/govuk_component/metadata_sentence.raw.html.erb +++ b/app/views/govuk_component/metadata_sentence.raw.html.erb @@ -13,7 +13,7 @@ data-controls="toggle-<%= toggle_id %>" data-expanded="false" data-toggled-text="<%= t("govuk_component.metadata.toggle_less", default: "Show fewer") %>"> - + <%= remaining.length %> <%= t("govuk_component.metadata.toggle_more", default: "more") %> + <%= t("govuk_component.metadata.toggle_more", number: remaining.length, default: "+ %{remaining.length} more") %>
<%= remaining.to_sentence.html_safe %> diff --git a/config/locales/en.yml b/config/locales/en.yml index cde010daf..43f7456bc 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -26,7 +26,7 @@ en: last_updated: "Last updated" see_all_updates: "see all updates" toggle_less: "Show fewer" - toggle_more: "more" + toggle_more: "+ %{number} more" previous_and_next_navigation: pagination: "Pagination" related_items: