From 3e8a9a7cb97cafc9f46762ee697672cd0e3ef4c3 Mon Sep 17 00:00:00 2001 From: Martin Jones Date: Tue, 12 Nov 2024 15:00:22 +0000 Subject: [PATCH 1/5] Remove taxon-list component Remove all files relating to the taxon-list component the taxon-list component as it is no longer required. The component was originally created for an AB Test on https://www.gov.uk/education/funding-and-finance-for-students#/education/student-grants-bursaries-scholarships This page is now using the document-list component from the govuk_publishing_components gem --- .../stylesheets/components/_taxon-list.scss | 15 ---- app/views/components/_taxon_list.html.erb | 41 --------- app/views/components/docs/taxon_list.yml | 80 ----------------- config/initializers/dartsass.rb | 1 - spec/components/taxon_list_spec.rb | 86 ------------------- 5 files changed, 223 deletions(-) delete mode 100644 app/assets/stylesheets/components/_taxon-list.scss delete mode 100644 app/views/components/_taxon_list.html.erb delete mode 100644 app/views/components/docs/taxon_list.yml delete mode 100644 spec/components/taxon_list_spec.rb diff --git a/app/assets/stylesheets/components/_taxon-list.scss b/app/assets/stylesheets/components/_taxon-list.scss deleted file mode 100644 index 289dea01c..000000000 --- a/app/assets/stylesheets/components/_taxon-list.scss +++ /dev/null @@ -1,15 +0,0 @@ -@import "govuk_publishing_components/individual_component_support"; - -.app-c-taxon-list__item { - @include govuk-font(19); - list-style: none; - margin-bottom: govuk-spacing(4); -} - -.app-c-taxon-list__heading { - margin-bottom: govuk-spacing(1); -} - -.app-c-taxon-list__link { - font-weight: bold; -} diff --git a/app/views/components/_taxon_list.html.erb b/app/views/components/_taxon_list.html.erb deleted file mode 100644 index 6dfbad08c..000000000 --- a/app/views/components/_taxon_list.html.erb +++ /dev/null @@ -1,41 +0,0 @@ -<% add_app_component_stylesheet("taxon-list") %> -<% - if !local_assigns[:heading_level] - heading_level = :h2 - elsif local_assigns[:heading_level].zero? - heading_level = false - else - heading_level = ([*1..6].include?(local_assigns[:heading_level]) ? "h#{local_assigns[:heading_level]}" : "h2").to_sym - end - - items ||= [] -%> -<% if items.any? %> -
    - <% items.each do |item| %> -
  1. - <% if item[:description] && heading_level %> - <%= content_tag(heading_level, { - class: "govuk-heading-s app-c-taxon-list__heading", - }) do %> - <%= link_to(item[:text], item[:path], { - data: item[:data_attributes], - class: "app-c-taxon-list__link govuk-link" - }) %> - <% end %> - <% else %> - <%= link_to(item[:text], item[:path], { - data: item[:data_attributes], - class: "app-c-taxon-list__link govuk-link", - }) %> - <% end %> - - <% if item[:description] %> -

    - <%= item[:description] %> -

    - <% end %> -
    2. - <% end %> -
-<% end %> diff --git a/app/views/components/docs/taxon_list.yml b/app/views/components/docs/taxon_list.yml deleted file mode 100644 index 6f0602141..000000000 --- a/app/views/components/docs/taxon_list.yml +++ /dev/null @@ -1,80 +0,0 @@ -name: Taxon list -description: A list of taxons -body: | - A taxon is defined as a single node in the new taxonomy structure or, more simply, a topic or category that content can be tagged to. - - This component can be used to surface a list of links to related content within the taxonomy. - - This component is used as part of the Education AB test. An example is [Funding and Finances for Students](/education/funding-and-finance-for-students#/education/student-grants-bursaries-scholarships) -accessibility_criteria: | - Taxon list items must: - - - not use headings when there is no description - - use the correct heading level for the page when a description is provided -shared_accessibility_criteria: - - link -examples: - default: - data: - items: - - text: Adult Dependants' Grant - path: /adult-dependants-grant - description: Adult Dependants' Grant for full-time students who financially support an adult - funding, how to apply, eligibility - - text: Care to Learn - path: /care-to-learn - description: Care to Learn helps pay for childcare while you're studying - how to apply, money you get, courses that qualify, eligibility - - text: Childcare Grant - path: /childcare-grant - description: Childcare Grants for full-time students in higher education - grants, CCG1, CCG2 forms, how to apply, eligibility - with_custom_heading_level: - description: | - Sometimes the component will be included beneath an h1, at other times beneath an h2. Allow the heading level to be customised. - data: - heading_level: 3 - items: - - text: Adult Dependants' Grant - path: /adult-dependants-grant - description: Adult Dependants' Grant for full-time students who financially support an adult - funding, how to apply, eligibility - - text: Care to Learn - path: /care-to-learn - description: Care to Learn helps pay for childcare while you're studying - how to apply, money you get, courses that qualify, eligibility - - text: Childcare Grant - path: /childcare-grant - description: Childcare Grants for full-time students in higher education - grants, CCG1, CCG2 forms, how to apply, eligibility - with_no_headings: - description: Sometimes it may not be appropriate to render the link titles as headings, as these will clutter up the page. - data: - heading_level: 0 - items: - - text: Adult Dependants' Grant - path: /adult-dependants-grant - description: Adult Dependants' Grant for full-time students who financially support an adult - funding, how to apply, eligibility - - text: Care to Learn - path: /care-to-learn - description: Care to Learn helps pay for childcare while you're studying - how to apply, money you get, courses that qualify, eligibility - without_descriptions: - description: | - Descriptions can be omitted although this isn’t currently used. When omitted the link is not wrapped in a heading. - data: - items: - - text: Adult Dependants' Grant - path: /adult-dependants-grant - - text: Care to Learn - path: /care-to-learn - - text: Childcare Grant - path: /childcare-grant - with_data_attributes: - description: | - Arbitrary data attributes can be included with each link. - data: - items: - - text: Adult Dependants' Grant - path: /adult-dependants-grant - description: Adult Dependants' Grant for full-time students who financially support an adult - funding, how to apply, eligibility - data_attributes: - example: 'your data here' - - text: Care to Learn - path: /care-to-learn - description: Care to Learn helps pay for childcare while you're studying - how to apply, money you get, courses that qualify, eligibility - data_attributes: - hello_world: 'some more data here' diff --git a/config/initializers/dartsass.rb b/config/initializers/dartsass.rb index 6aaa33d04..2da97d5aa 100644 --- a/config/initializers/dartsass.rb +++ b/config/initializers/dartsass.rb @@ -1,5 +1,4 @@ APP_STYLESHEETS = { - "components/_taxon-list.scss" => "components/_taxon-list.css", "components/_document-navigation-list.scss" => "components/_document-navigation-list.css", "views/_browse.scss" => "views/_browse.css", "views/_bunting.scss" => "views/_bunting.css", diff --git a/spec/components/taxon_list_spec.rb b/spec/components/taxon_list_spec.rb deleted file mode 100644 index e773f86de..000000000 --- a/spec/components/taxon_list_spec.rb +++ /dev/null @@ -1,86 +0,0 @@ -RSpec.describe "taxon_list component", type: :view do - include ComponentTestHelper - - def component_name - "taxon_list" - end - - let(:item1) do - { - text: "Care to Learn", - path: "/care-to-learn", - description: "Care to Learn helps pay for childcare while you're studying", - } - end - - let(:item2) do - { - text: "Childcare Grant", - path: "/childcare-grant", - description: "Childcare Grants for full-time students in higher education", - } - end - - it "renders nothing without a list of items" do - render_component({}) - expect(rendered).to be_empty - end - - it "renders a list item with text, path and description" do - render_component(items: [item1]) - - expect(rendered).to have_link item1[:text], href: item1[:path], class: "app-c-taxon-list__link" - expect(rendered).to have_selector(".app-c-taxon-list__description", text: item1[:description]) - end - - it "renders multiple list items" do - render_component(items: [item1, item2]) - - expect(rendered).to have_link item1[:text], href: item1[:path], class: "app-c-taxon-list__link" - expect(rendered).to have_selector(".app-c-taxon-list__description", text: item1[:description]) - - expect(rendered).to have_link item2[:text], href: item2[:path], class: "app-c-taxon-list__link" - expect(rendered).to have_selector(".app-c-taxon-list__description", text: item2[:description]) - end - - it "renders a list item with no description" do - render_component(items: [item2.without(:description)]) - - # List item with no description should not be rendered inside a heading element - expect(rendered).not_to have_link item2[:text], href: item2[:path], class: "app-c-taxon-list__heading app-c-taxon-list__link" - expect(rendered).to have_link item2[:text], href: item2[:path], class: "app-c-taxon-list__link" - end - - it "renders a list item with custom heading level" do - render_component(items: [item2], heading_level: 3) - - selector = "h3.app-c-taxon-list__heading .app-c-taxon-list__link[href='#{item2[:path]}']" - expect(rendered).to have_selector(selector, text: item2[:text]) - end - - it "renders a list item without a heading if heading_level is 0" do - render_component(items: [item2], heading_level: 0) - - expect(rendered).not_to have_selector("h3.app-c-taxon-list__heading") - - expect(rendered).to have_link item2[:text], href: item2[:path], class: "app-c-taxon-list__link" - expect(rendered).to have_selector(".app-c-taxon-list__item > .app-c-taxon-list__description", text: item2[:description]) - end - - it "defaults heading to h2 if heading level is out of range" do - render_component(items: [item2], heading_level: 9) - - expect(rendered).to have_selector("h2.app-c-taxon-list__heading", text: item2[:text]) - end - - it "renders a list item with data attribute" do - data_attributes = { - test_attribute: "hello", - } - - item2[:data_attributes] = data_attributes - render_component(items: [item2], heading_level: 3) - - expect(rendered).to have_selector(".app-c-taxon-list__link[data-test-attribute=hello]") - end -end From 70ac0c850fc212b761e2a3b693953d0cd6c87cd4 Mon Sep 17 00:00:00 2001 From: Martin Jones Date: Wed, 13 Nov 2024 16:57:28 +0000 Subject: [PATCH 2/5] Update taxon_list_helper to work for document-list Update data structure returned from `taxon_list_params` method Updated the structure to work with the document-list gem component, setting `full_size_description: true` ensures the font-size is set to 19px for the description when present - https://components.publishing.service.gov.uk/component-guide/document_list/with_full_size_description_text --- app/helpers/taxon_list_helper.rb | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/app/helpers/taxon_list_helper.rb b/app/helpers/taxon_list_helper.rb index 4e44cc139..48128446d 100644 --- a/app/helpers/taxon_list_helper.rb +++ b/app/helpers/taxon_list_helper.rb @@ -2,9 +2,12 @@ module TaxonListHelper def taxon_list_params(presented_taxon) presented_taxon.tagged_content.each.map do |content_item| { - path: content_item.base_path, - text: content_item.title, - description: content_item.description, + link: { + path: content_item.base_path, + text: content_item.title, + description: content_item.description, + full_size_description: true, + }, } end end From a7ba00d49b019fd1c89536c2e920f9d8d8f611ea Mon Sep 17 00:00:00 2001 From: Martin Jones Date: Wed, 27 Nov 2024 10:29:43 +0000 Subject: [PATCH 3/5] Replace taxon-list with document-list gem component - Use the `document-list` component from the gem instead of the `taxon-list` app component in the `tagged_content_list.html.erb` and `accordion.html.erb` view templates - By using the document-list component, the list will change from an ordered list to an unordered list, this feels like a slight improvement as the content presented does not appear to be in order of sequence/importance - `heading_level` variable removed from the `tagged_content_list.html.erb` template, the document-list component does not support headings and is not required here This approach is also consistent with other places the document-list component is used, for example: - [Education, training and skills - GOV.UK](https://www.gov.uk/education) (collections) - [Find contact details for services - GOV.UK](https://www.gov.uk/contact) (feedback) - [Travel or do business in Europe: Brexit guidance](https://www.gov.uk/government/collections/brexit-guidance) (government-frontend) - set `disable_ga4: true` to disable GA4 tracking - in the accordion.html.erb this prevents duplicate events from firing as this is already built into the accordion component - GA4 was not enabled previously in the tagged_content_list.html.erb --- .../world_wide_taxons/_tagged_content_list.html.erb | 8 ++++---- app/views/world_wide_taxons/accordion.html.erb | 9 +++++---- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/app/views/world_wide_taxons/_tagged_content_list.html.erb b/app/views/world_wide_taxons/_tagged_content_list.html.erb index 63858a72e..0e6baacdd 100644 --- a/app/views/world_wide_taxons/_tagged_content_list.html.erb +++ b/app/views/world_wide_taxons/_tagged_content_list.html.erb @@ -1,10 +1,10 @@ <% if presented_taxon.tagged_content.any? %>
- <% heading_level = heading_level ? heading_level : false %> - <%= render 'components/taxon_list', { - heading_level: heading_level, - items: taxon_list_params(presented_taxon) + <%= render "govuk_publishing_components/components/document_list", { + remove_top_border: true, + disable_ga4: true, + items: taxon_list_params(presented_taxon) } %>
diff --git a/app/views/world_wide_taxons/accordion.html.erb b/app/views/world_wide_taxons/accordion.html.erb index b4785c88b..14ed42f59 100644 --- a/app/views/world_wide_taxons/accordion.html.erb +++ b/app/views/world_wide_taxons/accordion.html.erb @@ -17,10 +17,11 @@ %> <% presented_taxon.accordion_content.each_with_index do |taxon, index| %> <% contents = capture do %> - <%= render 'components/taxon_list', { - heading_level: 3, - items: taxon_list_params(taxon) - } %> + <%= render "govuk_publishing_components/components/document_list", { + remove_top_border: true, + disable_ga4: true, + items: taxon_list_params(taxon) + } %> <% end %> <% id = taxon.base_path || taxon.title.downcase.tr(" ","-") From 90f3c4cd333d01696aece0d628cfea734cb68317 Mon Sep 17 00:00:00 2001 From: Martin Jones Date: Wed, 27 Nov 2024 10:07:04 +0000 Subject: [PATCH 4/5] Use list gem component for past role holders Replace the `taxon-list` component with the `list` component from the govuk_publishing_components gem. `list_type: "number"` has been used to ensure an ordered list is used to match the current HTML structure --- app/views/roles/_past_role_holders.html.erb | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/app/views/roles/_past_role_holders.html.erb b/app/views/roles/_past_role_holders.html.erb index e3736230f..1576e3e59 100644 --- a/app/views/roles/_past_role_holders.html.erb +++ b/app/views/roles/_past_role_holders.html.erb @@ -14,14 +14,15 @@ text: t("roles.previous_holders"), margin_bottom: 2, } %> - <%= render "components/taxon_list", { - heading_level: 3, + <%= render "govuk_publishing_components/components/list", { + list_type: "number", items: role.past_holders.map do |rh| - { - text: rh['title'], - path: rh['base_path'], - description: "#{rh['details']['start_year']} to #{rh['details']['end_year']}", - } + sanitize( + "

+ #{rh['title']} +

+

#{rh['details']['start_year']} to #{rh['details']['end_year']}

" + ) end } %> From da64b05c940b6d82a13c63fc00968da12e320e95 Mon Sep 17 00:00:00 2001 From: Martin Jones Date: Wed, 4 Dec 2024 15:46:16 +0000 Subject: [PATCH 5/5] Update tests for world location and world wide taxons Updated the tests to check that the "title", "link" and "description" for each search result/tagged content is included on the page --- spec/features/world_location_taxon_spec.rb | 18 ++++++++++++++++++ .../features/world_wide_taxon_browsing_spec.rb | 15 ++++++++++++--- 2 files changed, 30 insertions(+), 3 deletions(-) diff --git a/spec/features/world_location_taxon_spec.rb b/spec/features/world_location_taxon_spec.rb index d55ce1628..882018f1d 100644 --- a/spec/features/world_location_taxon_spec.rb +++ b/spec/features/world_location_taxon_spec.rb @@ -25,6 +25,24 @@ expect(page).to have_selector("a[href='#{email_url}']", text: "Get emails for this topic") end + scenario "contains a link and description for each search result" do + world_usa = world_usa_taxon(base_path:, phase: "live") + world_usa_news_events = world_usa_news_events_taxon(base_path: child_taxon_base_path) + + stub_content_store_has_item(base_path, world_usa) + stub_content_store_has_item(child_taxon_base_path, world_usa_news_events) + stub_content_for_taxon(taxon.content_id, search_results) # For the "general information" taxon + stub_most_popular_content_for_taxon(taxon.content_id, search_results, filter_content_store_document_type: nil) + stub_content_for_taxon(child_taxon.content_id, search_results) + + visit base_path + + search_results.each do |content| + expect(page).to have_link(content["title"], href: content["link"], class: "govuk-link") + expect(page.has_css?(".gem-c-document-list__item-description", text: content["description"])).to be(true) + end + end + private def search_results diff --git a/spec/features/world_wide_taxon_browsing_spec.rb b/spec/features/world_wide_taxon_browsing_spec.rb index 560fe4718..017898401 100644 --- a/spec/features/world_wide_taxon_browsing_spec.rb +++ b/spec/features/world_wide_taxon_browsing_spec.rb @@ -68,7 +68,8 @@ def then_i_see_the_taxon_page def and_i_can_see_the_content_tagged_to_the_taxon tagged_content.each do |content| - expect(page).to have_link(content["title"]) + expect(page).to have_link(content["title"], href: content["link"], class: "govuk-link") + expect(page.has_css?(".gem-c-document-list__item-description", text: content["description"])).to be(true) end end @@ -116,8 +117,16 @@ def content_id def tagged_content [ - { title: "Hey hello" }, - { title: "How are you" }, + { + "title" => "Hey hello", + "link" => "hey-hello", + "description" => "Description for hey hello", + }, + { + "title" => "How are you", + "link" => "how-are-you", + "description" => "Description for how are you", + }, ] end end