diff --git a/CHANGELOG.md b/CHANGELOG.md index 03bd9f26dd..ac74a39091 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 + +* Summary list changes ([PR #1971](https://github.com/alphagov/govuk_publishing_components/pull/1971)) + ## 24.5.0 * Add title option to summary list links ([PR #1967](https://github.com/alphagov/govuk_publishing_components/pull/1967)) diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_summary-list.scss b/app/assets/stylesheets/govuk_publishing_components/components/_summary-list.scss index 6de471ad29..afec13832d 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_summary-list.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_summary-list.scss @@ -38,3 +38,15 @@ .gem-c-summary__block { @include govuk-responsive-margin(6, "bottom"); } + +.gem-c-summary-list--wide-title { + @include govuk-media-query($from: 'tablet') { + .govuk-summary-list__key { + width: 60%; + } + + .govuk-summary-list__value { + width: 20%; + } + } +} diff --git a/app/views/govuk_publishing_components/components/_summary_list.html.erb b/app/views/govuk_publishing_components/components/_summary_list.html.erb index 5678cbfbe3..9cf570c5f4 100644 --- a/app/views/govuk_publishing_components/components/_summary_list.html.erb +++ b/app/views/govuk_publishing_components/components/_summary_list.html.erb @@ -10,9 +10,10 @@ delete ||= {} items ||= [] block ||= yield + wide_title ||= false %> <% if title || items.any? %> - <%= tag.div class: "gem-c-summary-list #{"govuk-summary-list--no-border" if borderless}", id: id do %> + <%= tag.div class: "gem-c-summary-list #{"govuk-summary-list--no-border" if borderless} #{"gem-c-summary-list--wide-title" if wide_title}", id: id do %> <% if title %> <%= content_tag(shared_helper.get_heading_level, title, class: "govuk-heading-#{heading_size} gem-c-summary-list__group-title") %> @@ -26,7 +27,7 @@ class: "govuk-link", title: edit_link_title, data: edit.fetch(:data_attributes, {}) do %> - <%= edit_section_link_text %><%= tag.span " #{title}", class: "govuk-visually-hidden" -%> + <%= edit_section_link_text %><%= tag.span " #{title}", class: "govuk-visually-hidden" unless edit[:link_text_no_enhance] -%> <% end %> <% end %> <% end %> @@ -41,7 +42,7 @@ class: "govuk-link gem-link--destructive", title: delete_link_title, data: delete.fetch(:data_attributes, {}) do %> - <%= delete_section_link_text %><%= tag.span " #{title}", class: "govuk-visually-hidden" -%> + <%= delete_section_link_text %><%= tag.span " #{title}", class: "govuk-visually-hidden" unless delete[:link_text_no_enhance] -%> <% end %> <% end %> <% end %> @@ -86,7 +87,7 @@ class: "govuk-link", title: edit_link_title, data: item[:edit].fetch(:data_attributes, {}) do %> - <%= edit_link_text %><%= tag.span " #{item[:field]}", class: "govuk-visually-hidden" -%> + <%= edit_link_text %><%= tag.span " #{item[:field]}", class: "govuk-visually-hidden" unless edit[:link_text_no_enhance] -%> <% end %> <% end %> <% end %> @@ -101,7 +102,7 @@ class: "govuk-link gem-link--destructive", title: delete_link_title, data: item[:delete].fetch(:data_attributes, {}) do %> - <%= delete_link_text %><%= tag.span " #{item[:field]}", class: "govuk-visually-hidden" -%> + <%= delete_link_text %><%= tag.span " #{item[:field]}", class: "govuk-visually-hidden" unless delete[:link_text_no_enhance] -%> <% end %> <% end %> <% end %> diff --git a/app/views/govuk_publishing_components/components/docs/summary_list.yml b/app/views/govuk_publishing_components/components/docs/summary_list.yml index 1c2c43d599..4bfe154c71 100644 --- a/app/views/govuk_publishing_components/components/docs/summary_list.yml +++ b/app/views/govuk_publishing_components/components/docs/summary_list.yml @@ -35,17 +35,16 @@ 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]``. + description: For all links shown in the component, see the with customised links example for guidance. 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]`. + description: For all links shown in the component, see the with customised links example for guidance. data: <<: *default-example-data delete: @@ -55,6 +54,7 @@ examples: gtm: "delete-title-summary-body" with_edit_and_delete_on_section: + description: For all links shown in the component, see the with customised links example for guidance. data: <<: *default-example-data edit: @@ -66,37 +66,31 @@ examples: data_attributes: gtm: "delete-title-summary-body" + with_customised_links: + description: | + For all links shown in the component, visually hidden text containing the name of the thing it refers to is automatically appended. This offers a better experience for screen reader users by making the link text unique and more explicit. In the example below, the link text would be `Change Title, summary and body`. + + The text of the link can be customised using the `link_text` option. 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. + + To override this behaviour, use `link_text_no_enhance` on the link in question, as shown. This will remove the visually hidden text, allowing you to add your own. The component will render a `span` element passed in a capture block. + + Similarly, the link title attribute is automatically generated, using the form `Change [title]`. If this is not required it can be given an explicit title attribute as shown. + data: + <<: *default-example-data + edit: + href: "edit-title-summary-body" + title: This is a link for editing this document + link_text: Edit this document + link_text_no_enhance: true + with_custom_section_heading: data: <<: *default-example-data heading_level: 2 heading_size: l - with_custom_link_on_section: - description: | - 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" - link_text: "Reorder" - title: "Items" - items: - - field: "Item 1" - value: "Value 2" - - field: "Item 2" - value: "Value 2" - - field: "Item 3" - 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. - - Explicit title attributes can also be passed for the links, to replace the automatically generated ones detailed in previous examples. + description: For all links shown in the component, see the with customised links example for guidance. data: title: "Title, summary and body" items: @@ -124,6 +118,21 @@ examples: href: "delete-body" link_text: "Remove" + wide_title_layout: + description: Allows a slightly adjusted layout for longer text in the field name. + data: + title: Privacy settings + wide_title: true + items: + - field: "GOV.UK can use cookies while you’re signed in" + value: "No" + edit: + href: "edit-cookies" + - field: "GOV.UK can send you feedback emails" + value: "Yes" + edit: + href: "edit-feedback" + with_block: description: Use the summary list with a block when you need to show an empty state message or load another component. data: diff --git a/spec/components/summary_list_spec.rb b/spec/components/summary_list_spec.rb index b21adf768a..226a2a6e51 100644 --- a/spec/components/summary_list_spec.rb +++ b/spec/components/summary_list_spec.rb @@ -279,4 +279,51 @@ def component_name 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 + + it "renders all links without visually hidden extra text if specified" do + render_component( + title: "Title", + edit: { + href: "edit-title", + link_text_no_enhance: true, + }, + delete: { + href: "delete-title", + link_text_no_enhance: true, + }, + items: [ + { + field: "Title", + value: "Ethical standards for public service providers", + edit: { + href: "#edit-title", + link_text_no_enhance: true, + }, + delete: { + href: "#delete-title", + link_text_no_enhance: true, + }, + }, + ], + ) + assert_select 'ul.govuk-summary-list__actions-list .govuk-summary-list__actions-list-item .govuk-link[href="edit-title"]', text: "Change" + assert_select 'ul.govuk-summary-list__actions-list .govuk-summary-list__actions-list-item .govuk-link[href="delete-title"]', text: "Delete" + + assert_select '.govuk-summary-list__actions-list-item .govuk-link[href="#edit-title"]', text: "Change" + assert_select '.govuk-summary-list__actions-list-item .govuk-link.gem-link--destructive[href="#delete-title"]', text: "Delete" + end + + it "renders the wider dt layout" do + render_component( + title: "Title", + wide_title: true, + items: [ + { + field: "Allow us to contact you regarding your fruit preferences", + value: "No", + }, + ], + ) + assert_select(".gem-c-summary-list.gem-c-summary-list--wide-title") + end end