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 730d492
Showing
10 changed files
with
297 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
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
20 changes: 20 additions & 0 deletions
20
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,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; | ||
| } | ||
| } |
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
35 changes: 35 additions & 0 deletions
35
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,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 %> | ||
| <ul class="gem-c-taxonomy-list" data-module="track-click"> | ||
| <% if image_cards %> | ||
| <% image_cards[:items].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 %> | ||
| <% 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 %> |
93 changes: 93 additions & 0 deletions
93
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,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, document list and 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 |
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 |