govuk_publishing_components 24.5.0 → 24.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d3b0fa1ddc43a2e926edce2c1f0417db5cbb0b1924caa41f91b817f3fc0d5647
-  data.tar.gz: 9e165fe5648aa0d6be420b8a00517c5295b58d5c6050b4b55646c8924272338f
+  metadata.gz: b6831e98d8b1db5f3d0cef2f7a7e7cc5439f4bfed8e1c929aedcf9fc98774a7c
+  data.tar.gz: 85579af6ac2c4ab5970ef2c55d64e1ef8bbbd8978635a00186514e86a53340aa
 SHA512:
-  metadata.gz: 75bb0f5311883c23c5b83cfb18cf619acc923fed727d174f4d72ea8cae9aacd99e1a701889b72779cc76d72b2596a2e0d4765fa8c11a150c01c7554f95e76719
-  data.tar.gz: 51c83f3aadc86d2ed048e34c739c4d2a976524855152890a392c1f633e8e371914bdf64525c6297c310b2855bd6062dddb80930923f994c61ca469dbbba88953
+  metadata.gz: 92158ef074a519f279584aadd38bab2d44fac46b04ee7fffe62bfb8d1d3a15f41825e12d666a692c200dee5baf827bc82190642b48443918f90cd6a62e57c277
+  data.tar.gz: 4937053696a56e4b30b89b9190a3ab99f6c5b080774acc89395eecf6549c233a219ac857fef5d6aa0e8e93671097178f66cec5091660a13e29677ee1d030e13a

data/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%;
+    }
+  }
+}

data/app/views/govuk_publishing_components/components/_summary_list.html.erb

@@ -10,32 +10,35 @@
   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") %>
 
       <% 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")
+          %>
           <%= link_to edit.fetch(:href),
                     class: "govuk-link",
-                    title: "#{edit_section_link_text} #{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 %>
 
       <% 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")
+          %>
           <%= link_to delete.fetch(:href),
                     class: "govuk-link gem-link--destructive",
-                    title: "#{delete_section_link_text} #{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 %>
@@ -72,24 +75,26 @@
 
             <% 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")
+                %>
                 <%= link_to item[:edit].fetch(:href),
                             class: "govuk-link",
-                            title: "#{edit_link_text} #{item[:field]}",
                             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 %>
 
             <% 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")
+                %>
                 <%= link_to item[:delete].fetch(:href),
                             class: "govuk-link gem-link--destructive",
-                            title: "#{delete_link_text} #{item[:field]}",
                             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 %>

data/app/views/govuk_publishing_components/components/docs/summary_list.yml

@@ -35,6 +35,7 @@ examples:
       borderless: true
 
   with_edit_on_section:
+    description: For all links shown in the component, see the <a href="/component-guide/summary_list/with_customised_links">with customised links example</a> for guidance.
     data:
       <<: *default-example-data
       edit:
@@ -43,6 +44,7 @@ examples:
           gtm: "edit-title-summary-body"
 
   with_delete_on_section:
+    description: For all links shown in the component, see the <a href="/component-guide/summary_list/with_customised_links">with customised links example</a> for guidance.
     data:
       <<: *default-example-data
       delete:
@@ -51,6 +53,7 @@ examples:
           gtm: "delete-title-summary-body"
 
   with_edit_and_delete_on_section:
+    description: For all links shown in the component, see the <a href="/component-guide/summary_list/with_customised_links">with customised links example</a> for guidance.
     data:
       <<: *default-example-data
       edit:
@@ -62,32 +65,28 @@ 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 with a class of `govuk-visually-hidden` included in a passed [capture block](https://apidock.com/rails/ActionView/Helpers/CaptureHelper/capture) as the `link_text` parameter.
+    data:
+      <<: *default-example-data
+      edit:
+        href: "edit-title-summary-body"
+        link_text: Edit this document <span class="govuk-visually-hidden">my hidden text for screenreaders</span>
+        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.
-    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.
+    description: For all links shown in the component, see the <a href="/component-guide/summary_list/with_customised_links">with customised links example</a> for guidance.
     data:
       title: "Title, summary and body"
       items:
@@ -113,6 +112,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:

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "24.5.0".freeze
+  VERSION = "24.6.0".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 24.5.0
+  version: 24.6.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-03-10 00:00:00.000000000 Z
+date: 2021-03-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config