Append card title to summary list actions

[peteryates]

This change appends the card title to action links when rendered within a summary card. It follows the upstream change introduced in govuk-frontend version 5.

In the simplest case it works like the reference implementation:

<%= govuk_summary_list(card: { title: "Shiny new widget" }) do |sl| %>
  <%= sl.with_row do |r| %>
    <%= r.with_key(text: "Price") %>
    <%= r.with_value(text: "£19.99") %>
    <%= r.with_action(href: "/widgets/1/edit", text: "Modify", visually_hidden_text: "this widget's price") %>
  <% end %>
<% end %>

Here, the rendered HTML will now include the card title in the visually hidden text on the action:

<dl class="govuk-summary-list">
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">Price</dt>
    <dd class="govuk-summary-list__value">£19.99</dd>
    <dd class="govuk-summary-list__actions">
      <a class="govuk-link" href="/a">Modify<span class="govuk-visually-hidden"> this widget's price (Shiny new widget)</span></a>
    </dd>
  </div>
</dl>

Additionally the suffix text can be set manually. This allows it to be set without passing in card: { ... } when initialising the summary list. It might be useful when rendering the summary list within an outer card. It is set using the action_suffix keyword.

<%= govuk_summary_card(title: "Shiny new widget") do %>
  <%= govuk_summary_list(action_suffix: "Shiny new widget") do |sl| %>
    <%= sl.with_row do |r| %>
      <%= r.with_key(text: "Price") %>
      <%= r.with_value(text: "£19.99") %>
      <%= r.with_action(href: "/widgets/1/edit", text: "Modify", visually_hidden_text: "this widget's price") %>
    <% end %>
  <% end %>
<% end %>

This will output the same HTML as the above example.

When both the card and action_suffix arguments are provided the action_suffix takes precedence, which offers a little more flexibility as there might be some cases other text would make more sense than the card's title.

Fixes #479, #480

[netlify]

✅ Deploy Preview for govuk-components ready!

Name	Link
🔨 Latest commit	20f7d7f
🔍 Latest deploy log	https://app.netlify.com/sites/govuk-components/deploys/658450aaba4cb80008286475
😎 Deploy Preview	https://deploy-preview-481--govuk-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[frankieroberto]

Looks good - thanks for getting this working, I tried but couldn't easily figure out how to pass the card reference from the summary card to the summary list component.

I’m not sure about action_suffix as a term, but if you can convince me there’s other use-cases for this other than card titled, then it's probably fine.

The way that the card title is hardcoded to appear within () parentheses make it hard to predict what else you might use it for, especially as you can already add visually-hidden text?

The one other thing I don't think this PR does yet is to also add the card title as visually-hidden text to any actions within the header of the card?

I think this is tricker though as currently those actions are just slots that you render a govuk_link_to in, rather than being built from parameters?

[peteryates]

Merging this. Went with visually_hidden_action_suffix for now, but it's undocumented and only intended for internal use, so we can change if needed.