diff --git a/app/assets/javascripts/modules/list-filter.js b/app/assets/javascripts/modules/list-filter.js index 449496e38..9eebf6bf3 100644 --- a/app/assets/javascripts/modules/list-filter.js +++ b/app/assets/javascripts/modules/list-filter.js @@ -77,9 +77,16 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}; var matchingItems = block.querySelectorAll('[data-filter="item"]') var matchingItemCount = 0 + var innerBlocks = block.querySelectorAll('[data-filter="inner-block"]') + for (var r = 0; r < innerBlocks.length; r++) { + innerBlocks[r].classList.add('js-hidden') + } + for (var j = 0; j < matchingItems.length; j++) { if (!matchingItems[j].classList.contains('js-hidden')) { matchingItemCount++ + + if (matchingItems[j].closest('[data-filter="inner-block"]') !== null) { matchingItems[j].closest('[data-filter="inner-block"]').classList.remove('js-hidden') } } } diff --git a/app/assets/stylesheets/views/_world_index.scss b/app/assets/stylesheets/views/_world_index.scss index 942df6778..b00c30369 100644 --- a/app/assets/stylesheets/views/_world_index.scss +++ b/app/assets/stylesheets/views/_world_index.scss @@ -30,4 +30,20 @@ padding: govuk-spacing(1) 0; @include govuk-font(19); } + + .filter-list__form { + display: none; + } + + .filter-list__form--active { + display: block; + } + + .js-hidden { + display: none; + } + + .filter-list__results { + padding-left: $govuk-gutter-half; + } } diff --git a/app/presenters/world_index_presenter.rb b/app/presenters/world_index_presenter.rb index f2577226f..f4cecc910 100644 --- a/app/presenters/world_index_presenter.rb +++ b/app/presenters/world_index_presenter.rb @@ -29,6 +29,13 @@ def world_location_link(world_location) link_to world_location["name"], path, class: "govuk-link" end + def filter_terms(world_location) + slug = world_location["slug"] + name = world_location["name"] + + [slug, name].compact.join(" ") + end + private def location_group(location) diff --git a/app/views/world/index.html.erb b/app/views/world/index.html.erb index f4759562a..0647c7bc7 100644 --- a/app/views/world/index.html.erb +++ b/app/views/world/index.html.erb @@ -2,81 +2,100 @@ <% page_class "world-locations" %> <% add_view_stylesheet("world_index") %> -
-
- <%= render "govuk_publishing_components/components/title", { - title: @presented_index.title - } %> +
+
+
+ <%= render "govuk_publishing_components/components/title", { + title: @presented_index.title + } %> -

<%= t('world_locations.content.find_out') %>

-
-
+

<%= t('world_locations.content.find_out') %>

-
-
"> -
-
-

<%= I18n.t("world_locations.type.world_location", count: 2) %>

-

<%= t('world_locations.count_prefix') %> - <%= @presented_index.world_locations_count %> <%= I18n.t("world_locations.type.world_location", count: 2) %> -

- <%= render "govuk_publishing_components/components/big_number", { - number: @presented_index.world_locations_count, - aria: { - hidden: true, - } +
+ <%= render "govuk_publishing_components/components/input", { + label: { + text: t("world_locations.headings.search"), + }, + name: "search-box", + id: "filter-list", + controls: "search_results" } %> -
+
+
-
-
    - <% @presented_index.grouped_world_locations.each do |letter, locations| %> +
    +
    " data-filter="block"> +
    +
    +

    <%= I18n.t("world_locations.type.world_location", count: 2) %>

    +

    <%= t('world_locations.count_prefix') %> + <%= @presented_index.world_locations_count %> <%= I18n.t("world_locations.type.world_location", count: 2) %> +

    + <%= render "govuk_publishing_components/components/big_number", { + number: @presented_index.world_locations_count, + aria: { + hidden: true, + }, + data_attributes: { + item_count: "true", + }, + } %> +
    +
    + +
    +
      + <% @presented_index.grouped_world_locations.each do |letter, locations| %> +
      +

      <%= letter %>

      +
        + <% locations.each do |location| %> +
      1. + <%= @presented_index.world_location_link(location) %> +
        2. + <% end %> +
      +
      + <% end %> +
    +
    +
    + +
    " data-filter="block"> +
    +
    +

    <%= I18n.t("world_locations.type.international_delegation", count: 2) %>

    +

    <%= t('world_locations.count_prefix') %> + <%= @presented_index.international_delegations_count %> <%= I18n.t("world_locations.type.international_delegation", count: 2) %> +

    + <%= render "govuk_publishing_components/components/big_number", { + number: @presented_index.international_delegations_count, + aria: { + hidden: true, + }, + data_attributes: { + item_count: "true", + }, + } %> +
    +
    + +
    +
      -

      <%= letter %>

        - <% locations.each do |location| %> -
      1. - <%= @presented_index.world_location_link(location) %> + <% @presented_index.international_delegations.each do |delegation| %> +
      2. + <%= @presented_index.world_location_link(delegation) %>
        3. <% end %>
      - <% end %> -
    -
    -
    - -
    "> -
    -
    -

    <%= I18n.t("world_locations.type.international_delegation", count: 2) %>

    -

    <%= t('world_locations.count_prefix') %> - <%= @presented_index.international_delegations_count %> <%= I18n.t("world_locations.type.international_delegation", count: 2) %> -

    - <%= render "govuk_publishing_components/components/big_number", { - number: @presented_index.international_delegations_count, - aria: { - hidden: true, - }, - } %> -
    -
    +
+
+ +
-
-
    -
    -
      - <% @presented_index.international_delegations.each do |delegation| %> -
    1. - <%= @presented_index.world_location_link(delegation) %> -
      2. - <% end %> -
    -
    -
-
- +

<%= t('world_locations.content.complete_list', href: link_to(t('world_locations.content.list_link'), "/government/publications/list-of-foreign-office-posts", class: "govuk-link")).html_safe %>

- -

<%= t('world_locations.content.complete_list', href: link_to(t('world_locations.content.list_link'), "/government/publications/list-of-foreign-office-posts", class: "govuk-link")).html_safe %>

diff --git a/spec/javascripts/modules/list-filter_spec.js b/spec/javascripts/modules/list-filter_spec.js index 045e5bc5d..670bd40f9 100644 --- a/spec/javascripts/modules/list-filter_spec.js +++ b/spec/javascripts/modules/list-filter_spec.js @@ -41,6 +41,13 @@ describe('list-filter.js', function () { // Double space and line break added on purpose: '
Ministry of Funny\nWalks
' + '' + + '
' + + '
    ' + + '
  1. ' + + '
    Ministry of Inner Blocks
    ' + + '
    2. ' + + '
' + + '
' + '' + '
' + '
' + @@ -187,4 +194,26 @@ describe('list-filter.js', function () { done() }, timeout) }) + + it('hide inner blocks if they have no matching items', function (done) { + $('[data-filter="form"] input').val('Advisory cou') + window.GOVUK.triggerEvent($('[data-filter="form"] input')[0], 'keyup') + + setTimeout(function () { + expect($('[data-filter="inner-block"]').first()).toHaveClass('js-hidden') + expect($('.js-search-results')).toHaveText('1 result found') + done() + }, timeout) + }) + + it('reveals inner blocks if they have matching items', function (done) { + $('[data-filter="form"] input').val('Ministry of Inner Blocks') + window.GOVUK.triggerEvent($('[data-filter="form"] input')[0], 'keyup') + + setTimeout(function () { + expect($('[data-filter="inner-block"]').first()).not.toHaveClass('js-hidden') + expect($('.js-search-results')).toHaveText('1 result found') + done() + }, timeout) + }) }) diff --git a/spec/presenters/world_index_presenter_spec.rb b/spec/presenters/world_index_presenter_spec.rb index f617d41ec..78d7da491 100644 --- a/spec/presenters/world_index_presenter_spec.rb +++ b/spec/presenters/world_index_presenter_spec.rb @@ -69,6 +69,21 @@ end end + describe "#filter_terms" do + let(:location) do + { + "name": "United Kingdom", + "slug": "united-kingdom", + }.with_indifferent_access + end + + subject { world_index_presenter.filter_terms(location) } + + it "returns the joined name and slug" do + expect(subject).to eq "united-kingdom United Kingdom" + end + end + describe "#international_delegations_count" do subject { world_index_presenter.international_delegations_count }