Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Taxonomy List Component #476

Merged
merged 2 commits into from Aug 14, 2018
Merged

Taxonomy List Component #476

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
40e9a9d
Add taxonomy list component
Aug 7, 2018
6644611
Fix branding
Aug 9, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Expand Up @@ -10,6 +10,7 @@
## Unreleased

* Allow custom tags in `<head>` for admin layout (PR #480)
* Adds taxonomy list component (PR #476)

## 9.12.2

Expand Down
1 change: 1 addition & 0 deletions app/assets/stylesheets/govuk_publishing_components/_all_components.scss
View file
Open in desktop
Expand Up @@ -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";
5 changes: 5 additions & 0 deletions app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss
View file
Open in desktop
Expand Up @@ -64,3 +64,8 @@
.gem-c-document-list--top-margin {
margin-top: $gutter-two-thirds;
}

.gem-c-document-list__multi-list {
width: 100%;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've just noticed that the right edge of this (the grey dividing border) seems to overlap the page width (although I'm not sure how this will look in production). See below.

screen shot 2018-08-10 at 16 41 09

Might need to put a margin-right on it of 25px to counter the negative margin on the parent.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good spot, I thought it didn't look quite right! 👍

margin-right: 25px;
}
20 changes: 20 additions & 0 deletions app/assets/stylesheets/govuk_publishing_components/components/_taxonomy-list.scss
View file
Open in desktop
@@ -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;
}
}
12 changes: 9 additions & 3 deletions app/views/govuk_publishing_components/components/_document_list.html.erb
View file
Open in desktop
@@ -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"
Expand All @@ -8,9 +10,11 @@
brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
%>
<% if items.any? %>
<ol class="gem-c-document-list<%= margin_bottom_class %><%= margin_top_class %> <%= brand_helper.brand_class %>">
<% unless within_multitype_list %>
<ol class="gem-c-document-list<%= margin_bottom_class %><%= margin_top_class %>">
<% end %>
<% items.each do |item| %>
<li class="gem-c-document-list__item">
<li class="gem-c-document-list__item<%= within_multitype_list_class %> <%= brand_helper.brand_class %>">
<%=
link_to(
item[:link][:text],
Expand Down Expand Up @@ -45,5 +49,7 @@
<% end %>
</li>
<% end %>
</ol>
<% unless within_multitype_list %>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This isn't hugely untidy, so this suggestion may be overkill, but have you considered passing this chunk into content_tag to output or not output this ol?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure how this would work, can you please give an example? 🙂

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was thinking you'd wrap up the code in a block somehow and then do an if statement of some kind of either just output the block or do content_tag('ol', block). Thinking about this in more detail it's probably not appropriate for this situation, as you either want the wrapping ol or you don't - this would work better where you would want a choice of wrapping elements.

</ol>
<% end %>
<% end %>
9 changes: 7 additions & 2 deletions app/views/govuk_publishing_components/components/_highlight_boxes.html.erb
View file
Open in desktop
@@ -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? %>
<ol class="gem-c-highlight-boxes" <%= "data-module=track-click" if highlight_boxes_helper.data_tracking? %>>
<% unless within_multitype_list %>
<ol class="gem-c-highlight-boxes" <%= "data-module=track-click" if highlight_boxes_helper.data_tracking? %>>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This isn't really part of this PR, but is there a way of writing this line that github will like?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I haven't been able to find much info on this - I tried a few things but nothing seemed to fix it.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fair enough. I'll take a look at the rest shortly.

<% end %>
<% items.each do |content_item| %>
<li class="gem-c-highlight-boxes__item-wrapper">
<div class="gem-c-highlight-boxes__item <%= inverse_class %>">
Expand Down Expand Up @@ -35,5 +38,7 @@
</div>
</li>
<% end %>
</ol>
<% unless within_multitype_list %>
</ol>
<% end %>
<% end %>
29 changes: 29 additions & 0 deletions app/views/govuk_publishing_components/components/_taxonomy_list.html.erb
View file
Open in desktop
@@ -0,0 +1,29 @@
<%
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

taxonomy_list_helper = GovukPublishingComponents::Presenters::TaxonomyListHelper.new(image_cards)
%>
<% if highlight_box || document_list || image_cards %>
<ul class="gem-c-taxonomy-list" data-module="track-click">
<% if image_cards %>
<% taxonomy_list_helper.image_card_data.each do |image_card| %>
<li class="gem-c-taxonomy-list__item">
<%= render "govuk_publishing_components/components/image_card", image_card %>
</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 %>
107 changes: 107 additions & 0 deletions app/views/govuk_publishing_components/components/docs/taxonomy_list.yml
View file
Open in desktop
@@ -0,0 +1,107 @@
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 these components together to render one list of links. This is not possible when using the components separately.
This component wraps these components in one list, and applies relevant styling to get them to display appropriately together.

**Note:** At the moment, this component only works when displaying either highlight box + document list **or** image cards + document list. The layout for combining all three together hasn't been fixed.
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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just for testing the layout I'd suggest adding another two link entries in here - so the displayed example has four highlight boxes.

- link:
text: Student Finance
path: /student-finance
description: Student loan information
metadata:
document_type: Detailed guide
- 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
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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could there be an example of all three together? Also if we wanted to combine one image card, one highlight box, and a document list, what would it look like - would they all stack?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, this doesn't render perfectly at the moment (the highlight boxes end up on the same line as the image cards). I've had a look into this today but it's proving tricky to fix. As we don't need this yet, I'm going to create a separate card so it doesn't block this PR.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Have you tried applying a class to the last element of each component type to provide (whatever is the flex equivalent of) clearing? Although I've had a quick look and can't see what that might be...

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@andysellick Yeah, there doesn't seem to be an easy flex equivalent, annoyingly. I got a partial solution, but it then got confusing with different numbers of image cards and on mobile

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fair enough. Maybe add a note to the documentation body to point this out until we can get a fix.

1 change: 1 addition & 0 deletions lib/govuk_publishing_components.rb
View file
Open in desktop
Expand Up @@ -22,6 +22,7 @@
require "govuk_publishing_components/presenters/image_card_helper"
require "govuk_publishing_components/presenters/organisation_logo_helper"
require "govuk_publishing_components/presenters/highlight_boxes_helper"
require "govuk_publishing_components/presenters/taxonomy_list_helper"

require "govuk_publishing_components/app_helpers/taxon_breadcrumbs"
require "govuk_publishing_components/app_helpers/brand_helper"
Expand Down
23 changes: 23 additions & 0 deletions lib/govuk_publishing_components/presenters/taxonomy_list_helper.rb
View file
Open in desktop
@@ -0,0 +1,23 @@
module GovukPublishingComponents
module Presenters
class TaxonomyListHelper
def initialize(image_cards)
@image_cards = image_cards
end

def image_card_data
@image_cards[:items].map do |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])
}
end
end
end
end
end
2 changes: 1 addition & 1 deletion spec/components/document_list_spec.rb
View file
Open in desktop
Expand Up @@ -149,7 +149,7 @@ def component_name
]
)

assert_select '.gem-c-document-list.brand--attorney-generals-office'
assert_select '.gem-c-document-list__item.brand--attorney-generals-office'
assert_select '.gem-c-document-list .gem-c-document-list__item-title.brand__color'
end

Expand Down