Skip to content

Commit

Permalink
Add title option to summary list links
Browse files Browse the repository at this point in the history 
- link titles for 'change' and 'delete' links by default are automatically generated based on the text 'Change/Delete [thing]' but this causes problems when the thing and the link text don't naturally follow
- adding in the option to pass explicit title attributes for the links
  • Loading branch information
@andysellick
andysellick committed Mar 10, 2021
1 parent 4200c9d commit 047e77a
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 9 deletions.
28 changes: 20 additions & 8 deletions app/views/govuk_publishing_components/components/_summary_list.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,13 @@

<% if edit.any? %>
<% edit_main_link = capture do %>
<% edit_section_link_text = edit[:link_text] || t("components.summary_list.edit") %>
<%
edit_section_link_text = edit[:link_text] || t("components.summary_list.edit")
edit_link_title = edit[:title] || "#{edit_section_link_text} #{title}"
%>
<%= link_to edit.fetch(:href),
class: "govuk-link",
title: "#{edit_section_link_text} #{title}",
title: edit_link_title,
data: edit.fetch(:data_attributes, {}) do %>
<%= edit_section_link_text %><%= tag.span " #{title}", class: "govuk-visually-hidden" -%>
<% end %>
Expand All @@ -30,10 +33,13 @@

<% if delete.any? %>
<% delete_main_link = capture do %>
<% delete_section_link_text = delete[:link_text] || t("components.summary_list.delete") %>
<%
delete_section_link_text = delete[:link_text] || t("components.summary_list.delete")
delete_link_title = delete[:title] || "#{delete_section_link_text} #{title}"
%>
<%= link_to delete.fetch(:href),
class: "govuk-link gem-link--destructive",
title: "#{delete_section_link_text} #{title}",
title: delete_link_title,
data: delete.fetch(:data_attributes, {}) do %>
<%= delete_section_link_text %><%= tag.span " #{title}", class: "govuk-visually-hidden" -%>
<% end %>
Expand Down Expand Up @@ -72,10 +78,13 @@

<% if item.fetch(:edit, {}).any? %>
<% edit_link = capture do %>
<% edit_link_text = item[:edit][:link_text] || t("components.summary_list.edit") %>
<%
edit_link_text = item[:edit][:link_text] || t("components.summary_list.edit")
edit_link_title = item[:edit][:title] || "#{edit_link_text} #{item[:field]}"
%>
<%= link_to item[:edit].fetch(:href),
class: "govuk-link",
title: "#{edit_link_text} #{item[:field]}",
title: edit_link_title,
data: item[:edit].fetch(:data_attributes, {}) do %>
<%= edit_link_text %><%= tag.span " #{item[:field]}", class: "govuk-visually-hidden" -%>
<% end %>
Expand All @@ -84,10 +93,13 @@

<% if item.fetch(:delete, {}).any? %>
<% delete_link = capture do %>
<% delete_link_text = item[:delete][:link_text] || t("components.summary_list.delete") %>
<%
delete_link_text = item[:delete][:link_text] || t("components.summary_list.delete")
delete_link_title = item[:delete][:title] || "#{delete_link_text} #{item[:field]}"
%>
<%= link_to item[:delete].fetch(:href),
class: "govuk-link gem-link--destructive",
title: "#{delete_link_text} #{item[:field]}",
title: delete_link_title,
data: item[:delete].fetch(:data_attributes, {}) do %>
<%= delete_link_text %><%= tag.span " #{item[:field]}", class: "govuk-visually-hidden" -%>
<% end %>
Expand Down
13 changes: 12 additions & 1 deletion app/views/govuk_publishing_components/components/docs/summary_list.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,18 +35,22 @@ examples:
borderless: true

with_edit_on_section:
description: The edit link can be given an explicit title attribute as shown, or it will generate one of the form `Change [title]``.
data:
<<: *default-example-data
edit:
href: "edit-title-summary-body"
title: "Change this thing"
data_attributes:
gtm: "edit-title-summary-body"

with_delete_on_section:
description: The delete link can be given an explicit title attribute as shown, or it will generate one of the form `Delete [title]`.
data:
<<: *default-example-data
delete:
href: "delete-title-summary-body"
title: "Delete this thing"
data_attributes:
gtm: "delete-title-summary-body"

Expand All @@ -73,6 +77,8 @@ examples:
Take care that the provided `link_text` still makes sense to screen readers when combined with the title.
For instance, `Reorder` link text and `Items` title becomes `Reorder Items`, which reads fine, but link text
of `Summary` would read as `Summary Items`, which does not make sense.
Otherwise, pass an explicit title attribute for the link, as shown in previous examples.
data:
edit:
href: "custom-link"
Expand All @@ -87,7 +93,10 @@ examples:
value: "Value 3"

with_edit_on_individual_items:
description: The link text can be optionally modified using the 'link_text' parameter, as for the edit link in previous examples.
description: |
The link text can be optionally modified using the 'link_text' parameter, as for the edit link in previous examples.
Explicit title attributes can also be passed for the links, to replace the automatically generated ones detailed in previous examples.
data:
title: "Title, summary and body"
items:
Expand All @@ -102,8 +111,10 @@ examples:
value: "Find out more about our reviews on the subject of ethical standards for public service providers, including our 2014 report, 2015 guidance and 2018 follow-up publication."
edit:
href: "edit-summary"
title: "Edit this thing"
delete:
href: "delete-summary"
title: "Delete this thing"
- field: "Body"
value: "After the government decided in 2013 to expand the remit of the Committee to include public service providers, the Committee on Standards in Public Life produced our first report on the issue: Ethical Standards for Providers of Public Services in 2014."
edit:
Expand Down
33 changes: 33 additions & 0 deletions spec/components/summary_list_spec.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -246,4 +246,37 @@ def component_name
assert_select 'ul.govuk-summary-list__actions-list .govuk-summary-list__actions-list-item .govuk-link[title="Edit Title"][href="edit-title"]', text: "Edit Title"
assert_select 'ul.govuk-summary-list__actions-list .govuk-summary-list__actions-list-item .govuk-link[title="Destroy Title"][href="delete-title"]', text: "Destroy Title"
end

it "renders all edit and delete actions with custom title attributes" do
render_component(
title: "Title",
edit: {
href: "edit-title",
title: "Edit the thing",
},
delete: {
href: "delete-title",
title: "Delete the thing",
},
items: [
{
field: "Title",
value: "Ethical standards for public service providers",
edit: {
href: "#edit-title",
title: "Edit this thing",
},
delete: {
href: "#delete-title",
title: "Delete this thing",
},
},
],
)
assert_select 'ul.govuk-summary-list__actions-list .govuk-summary-list__actions-list-item .govuk-link[title="Edit the thing"][href="edit-title"]', text: "Change Title"
assert_select 'ul.govuk-summary-list__actions-list .govuk-summary-list__actions-list-item .govuk-link[title="Delete the thing"][href="delete-title"]', text: "Delete Title"

assert_select '.govuk-summary-list__actions-list-item .govuk-link[title="Edit this thing"][href="#edit-title"]', text: "Change Title"
assert_select '.govuk-summary-list__actions-list-item .govuk-link.gem-link--destructive[title="Delete this thing"][href="#delete-title"]', text: "Delete Title"
end
end

0 comments on commit 047e77a

Please sign in to comment.