Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Wraps the highlight box and document list component in one list. This is commonly used on topic pages for taxonomy-related navigation.
- Loading branch information
Vanita Barrett
committed
Aug 9, 2018
1 parent
564c04f
commit 82cceac
Showing
9 changed files
with
288 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
21 changes: 21 additions & 0 deletions
21
app/assets/stylesheets/govuk_publishing_components/components/_taxonomy-list.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| .gem-c-taxonomy-list { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| margin-top: 15px; | ||
|
|
||
| @include media(tablet) { | ||
| margin-right: -25px; | ||
| } | ||
| } | ||
|
|
||
| .gem-c-taxonomy-list__item { | ||
| list-style: none; | ||
|
|
||
| @include media(tablet) { | ||
| width: 33%; | ||
| display: inline-block; | ||
| padding-right: $gutter-one-third; | ||
| vertical-align: top; | ||
| box-sizing: border-box; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
37 changes: 37 additions & 0 deletions
37
app/views/govuk_publishing_components/components/_taxonomy_list.html.erb
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| <% | ||
| 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 %> | ||
| <ul class="gem-c-taxonomy-list" data-module="track-click"> | ||
| <% if image_cards %> | ||
| <% image_cards[:items].in_groups_of(3, false) do |image_group| %> | ||
| <% image_group.each do |image_card| %> | ||
| <li class="gem-c-taxonomy-list__item"> | ||
| <%= render "govuk_publishing_components/components/image_card", { | ||
| context: image_card[:image][:context], | ||
| href: image_card[:link][:path], | ||
| heading_text: image_card[:link][:text], | ||
| image_src: image_card[:image][:url], | ||
| image_alt: image_card[:image][:alt], | ||
| heading_level: image_card[:link][:heading_level], | ||
| href_data_attributes: (image_card[:link][:data_attributes] if image_card[:link][:data_attributes]) | ||
| } %> | ||
| </li> | ||
| <% end %> | ||
| <% end %> | ||
| <% end %> | ||
| <% if highlight_box %> | ||
| <%= render "govuk_publishing_components/components/highlight_boxes", highlight_box %> | ||
| <% end %> | ||
| <% if document_list %> | ||
| <%= render "govuk_publishing_components/components/document_list", document_list %> | ||
| <% end %> | ||
| </ul> | ||
| <% end %> |
85 changes: 85 additions & 0 deletions
85
app/views/govuk_publishing_components/components/docs/taxonomy_list.yml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| name: Taxonomy List | ||
| description: Wraps the highlight box and document list component in one list. This is commonly used on topic pages for links to tagged content. | ||
| body: | | ||
| The highlight box and document list 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 | ||
| 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |