From 341f18c020a3be41e3c1b41a527fc6cc2159335f Mon Sep 17 00:00:00 2001 From: Vanita Barrett Date: Tue, 7 Aug 2018 10:03:36 +0000 Subject: [PATCH] Add taxonomy list component Wraps the highlight box and document list component in one list. This is commonly used on topic pages for taxonomy-related navigation. --- CHANGELOG.md | 4 + Gemfile.lock | 2 +- .../_all_components.scss | 1 + .../components/_document-list.scss | 4 + .../components/_taxonomy-list.scss | 20 +++ .../components/_document_list.html.erb | 12 +- .../components/_highlight_boxes.html.erb | 9 +- .../components/_taxonomy_list.html.erb | 35 +++++ .../components/docs/taxonomy_list.yml | 93 +++++++++++++ spec/components/taxonomy_list_spec.rb | 123 ++++++++++++++++++ 10 files changed, 297 insertions(+), 6 deletions(-) create mode 100644 app/assets/stylesheets/govuk_publishing_components/components/_taxonomy-list.scss create mode 100644 app/views/govuk_publishing_components/components/_taxonomy_list.html.erb create mode 100644 app/views/govuk_publishing_components/components/docs/taxonomy_list.yml create mode 100644 spec/components/taxonomy_list_spec.rb diff --git a/CHANGELOG.md b/CHANGELOG.md index b8baa2739c..8b38757926 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ useful summary for people upgrading their application, not a replication of the commit log. +## Unreleased + +* Adds taxonomy list component (PR #476) + ## 9.12.1 * Renames the publishing-app metatag to publishing-application, to be consistent with rendering-application (PR #475) diff --git a/Gemfile.lock b/Gemfile.lock index 05649165a4..044cec3658 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,7 +1,7 @@ PATH remote: . specs: - govuk_publishing_components (9.12.0) + govuk_publishing_components (9.12.1) govspeak (>= 5.0.3) govuk_app_config govuk_frontend_toolkit diff --git a/app/assets/stylesheets/govuk_publishing_components/_all_components.scss b/app/assets/stylesheets/govuk_publishing_components/_all_components.scss index 77c777ad74..cd6c1c5dcc 100644 --- a/app/assets/stylesheets/govuk_publishing_components/_all_components.scss +++ b/app/assets/stylesheets/govuk_publishing_components/_all_components.scss @@ -40,5 +40,6 @@ @import "components/subscription-links"; @import "components/success-alert"; @import "components/taxonomy-navigation"; +@import "components/taxonomy-list"; @import "components/title"; @import "components/translation-nav"; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss b/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss index aef7ecf892..709cc7602e 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss @@ -64,3 +64,7 @@ .gem-c-document-list--top-margin { margin-top: $gutter-two-thirds; } + +.gem-c-document-list__multi-list { + width: 100%; +} diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_taxonomy-list.scss b/app/assets/stylesheets/govuk_publishing_components/components/_taxonomy-list.scss new file mode 100644 index 0000000000..630b76af52 --- /dev/null +++ b/app/assets/stylesheets/govuk_publishing_components/components/_taxonomy-list.scss @@ -0,0 +1,20 @@ +.gem-c-taxonomy-list { + display: flex; + flex-wrap: wrap; + margin-top: $gutter-half; + + @include media(tablet) { + margin-right: -25px; + } +} + +.gem-c-taxonomy-list__item { + list-style: none; + + @include media(tablet) { + @include box-sizing(border-box); + width: 33%; + padding-right: $gutter-one-third; + vertical-align: top; + } +} diff --git a/app/views/govuk_publishing_components/components/_document_list.html.erb b/app/views/govuk_publishing_components/components/_document_list.html.erb index c877f890b0..3d3703153f 100644 --- a/app/views/govuk_publishing_components/components/_document_list.html.erb +++ b/app/views/govuk_publishing_components/components/_document_list.html.erb @@ -1,5 +1,7 @@ <% items ||= [] + within_multitype_list ||= false + within_multitype_list_class = " gem-c-document-list__multi-list" if within_multitype_list margin_top_class = " gem-c-document-list--top-margin" if local_assigns[:margin_top] margin_bottom_class = " gem-c-document-list--bottom-margin" if local_assigns[:margin_bottom] title_with_context_class = " gem-c-document-list__item-title--context" @@ -8,9 +10,11 @@ brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand) %> <% if items.any? %> -
    + <% unless within_multitype_list %> +
      + <% end %> <% items.each do |item| %> -
    1. +
    2. <%= link_to( item[:link][:text], @@ -45,5 +49,7 @@ <% end %>
      3. <% end %> -
    + <% unless within_multitype_list %> +
+ <% end %> <% end %> diff --git a/app/views/govuk_publishing_components/components/_highlight_boxes.html.erb b/app/views/govuk_publishing_components/components/_highlight_boxes.html.erb index 7643f9512b..8cce503ee7 100644 --- a/app/views/govuk_publishing_components/components/_highlight_boxes.html.erb +++ b/app/views/govuk_publishing_components/components/_highlight_boxes.html.erb @@ -1,11 +1,14 @@ <% items ||= [] inverse ||= false + within_multitype_list ||= false inverse_class = "gem-c-highlight-boxes--inverse" if inverse highlight_boxes_helper = GovukPublishingComponents::Presenters::HighlightBoxesHelper.new(local_assigns) %> <% if items.any? %> -
    > + <% unless within_multitype_list %> +
      > + <% end %> <% items.each do |content_item| %>
    1. @@ -35,5 +38,7 @@
      2. <% end %> -
    + <% unless within_multitype_list %> +
+ <% end %> <% end %> diff --git a/app/views/govuk_publishing_components/components/_taxonomy_list.html.erb b/app/views/govuk_publishing_components/components/_taxonomy_list.html.erb new file mode 100644 index 0000000000..4cbf63ebd8 --- /dev/null +++ b/app/views/govuk_publishing_components/components/_taxonomy_list.html.erb @@ -0,0 +1,35 @@ +<% + highlight_box ||= false + document_list ||= false + image_cards ||= false + + highlight_box.merge!({within_multitype_list: true}) if highlight_box + document_list.merge!({within_multitype_list: true}) if document_list +%> +<% if highlight_box || document_list || image_cards %> + +<% end %> diff --git a/app/views/govuk_publishing_components/components/docs/taxonomy_list.yml b/app/views/govuk_publishing_components/components/docs/taxonomy_list.yml new file mode 100644 index 0000000000..3f988a6b04 --- /dev/null +++ b/app/views/govuk_publishing_components/components/docs/taxonomy_list.yml @@ -0,0 +1,93 @@ +name: Taxonomy List +description: Wraps the highlight box, document list and image card components in one list. This is commonly used on topic pages for links to tagged content. +body: | + The [highlight box](/component-guide/highlight_boxes), [document list](/component-guide/document_list) and [image card](/component-guide/image_card) components are standalone components. + + However, there are some use cases where we want to use both components to render one list of links. This is not possible when using the two components separately. + This component wraps these two components in one list, and applies relevant styling to get them to display appropriately together. +accessibility_criteria: | + The taxonomy list should: + + - Wrap all links in one list + - Should not be used to display links that don't belong together in one list +shared_accessibility_criteria: + - link +examples: + default: + data: + highlight_box: + inverse: true + items: + - link: + text: If your child is taken into care + path: /child-into-care + description: Information on what to do if your child is taken into care + metadata: + document_type: Detailed guide + - link: + text: High needs funding + path: /high-needs-funding + metadata: + document_type: Guide + public_updated_at: 2016-06-27 10:29:44 + document_list: + items: + - link: + text: If your child is taken into care + path: /child-into-care + metadata: + document_type: Detailed guide + - link: + text: High needs funding + path: /high-needs-funding + metadata: + document_type: Guide + with_image_cards: + data: + image_cards: + items: + - link: + path: /not-a-page + text: News headline + heading_level: 0 + image: + url: https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG + alt: some meaningful alt text please + context: The Rt Hon + - link: + path: /not-a-page + text: News headline + heading_level: 0 + image: + url: https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG + alt: some meaningful alt text please + context: The Rt Hon + - link: + path: /not-a-page + text: News headline + heading_level: 0 + image: + url: https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG + alt: some meaningful alt text please + context: The Rt Hon + - link: + path: /not-a-page + text: News headline + heading_level: 0 + image: + url: https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG + alt: some meaningful alt text please + context: The Rt Hon + document_list: + items: + - link: + text: If your child is taken into care + path: /child-into-care + description: What happens if your child is taken into care + metadata: + document_type: Detailed guide + - link: + text: High needs funding + path: /high-needs-funding + metadata: + document_type: Guide diff --git a/spec/components/taxonomy_list_spec.rb b/spec/components/taxonomy_list_spec.rb new file mode 100644 index 0000000000..ab728d1e7a --- /dev/null +++ b/spec/components/taxonomy_list_spec.rb @@ -0,0 +1,123 @@ +require "rails_helper" + +describe "TaxonomyList", type: :view do + def component_name + "taxonomy_list" + end + + it "renders nothing if no parameters are passed in" do + assert_empty render_component({}) + end + + it "renders highlight box links" do + render_component( + highlight_box: { + items: [ + link: { + text: "Education, Skills and Training", + path: "/education", + description: "Everything about Education" + }, + metadata: { + document_type: "Taxon" + } + ] + } + ) + + assert_select ".gem-c-taxonomy-list .gem-c-highlight-boxes__title[href='/education']", text: "Education, Skills and Training" + assert_select ".gem-c-taxonomy-list .gem-c-highlight-boxes__description", text: "Everything about Education" + assert_select ".gem-c-taxonomy-list .gem-c-highlight-boxes__metadata", text: "Taxon" + end + + it "renders document list links" do + render_component( + document_list: { + items: [ + link: { + text: "Student Finance", + path: "/student-finance", + description: "How to apply for student finance" + }, + metadata: { + document_type: "Guide" + } + ] + } + ) + + assert_select ".gem-c-taxonomy-list .gem-c-document-list__item-title[href='/student-finance']", text: "Student Finance" + assert_select ".gem-c-taxonomy-list .gem-c-document-list__item-description", text: "How to apply for student finance" + assert_select ".gem-c-taxonomy-list .gem-c-document-list__attribute", text: "Guide" + end + + it "renders image card links" do + render_component( + image_cards: { + items: [ + { + link: { + path: "/apprenticeships", + text: "Apprenticeships", + heading_level: 0 + }, + image: { + url: "/path/to/image", + alt: "Apprentices working", + } + } + ] + } + ) + + assert_select ".gem-c-taxonomy-list .gem-c-image-card__title-link[href='/apprenticeships']", text: "Apprenticeships" + assert_select ".gem-c-taxonomy-list .gem-c-image-card__image[alt='Apprentices working']" + assert_select ".gem-c-taxonomy-list .gem-c-image-card__image[src='/path/to/image']" + end + + it "renders all links within one list only" do + render_component( + document_list: { + items: [ + link: { + text: "Student Finance", + path: "/student-finance", + description: "How to apply for student finance" + }, + metadata: { + document_type: "Guide" + } + ] + }, + highlight_box: { + items: [ + link: { + text: "Education, Skills and Training", + path: "/education", + description: "Everything about Education" + }, + metadata: { + document_type: "Taxon" + } + ] + }, + image_cards: { + items: [ + { + link: { + path: "/apprenticeships", + text: "Apprenticeships", + heading_level: 0 + }, + image: { + url: "/path/to/image", + alt: "Apprentices working", + } + } + ] + } + ) + + assert_select "ul.gem-c-taxonomy-list", count: 1 + end +end