Add draft version of summary list card component

[peteryates]

This is a first draft of a card component that wraps the summary list.

[netlify[bot]]

✅ Deploy Preview for govuk-components ready!

Name	Link
🔨 Latest commit	7953c1e7b2484206a1ab38ff4725496c5dfa5f19
🔍 Latest deploy log	https://app.netlify.com/sites/govuk-components/deploys/63d94a17a779d100094b6675
😎 Deploy Preview	https://deploy-preview-351--govuk-components.netlify.app/components/summary-list
📱 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 settings.

[frankieroberto]

@peteryates @paulrobertlloyd should we follow the draft govuk-frontend implementation and have this be an extra feature of the existing summary card component, rather than a standalone component?

That would mean we could do something like this:

<%= govuk_summary_list(
  header: { 
    title: "University of Gloucestershire", 
    actions: [ {href: "#", text: "Delete choice", visually_hidden_text: " of University of Gloucestershire"} ]
  }) do |summary_list|
  summary_list.row do |row|
     [...]
  end
end %>

[peteryates]

@frankieroberto - I've been experimenting with that this evening and have a working version that implements it in the style of the draft component, but there are pros and cons.

The pro is that it matches the Design System exactly.

The con is that there are many levels involved - hashes of hashes and hashes of arrays of hashes. It feels like it works better in Nunjucks than it would in a Rails template:

header: {
    title: {
      text: "University of Bristol"
    },
    actions: {
      items: [
        {
          href: "#",
          text: "Delete choice",
          visuallyHiddenText: "of University of Bristol"
        },
        {
          href: "#",
          text: "Withdraw",
          visuallyHiddenText: "from University of Bristol"
        }
      ]
    }
  },

Also, and this is very subjective, but with cards enabled the summary list markup feels a bit wrong. Every other component has the govuk-pattern-name as the class on the outermost element, but with it as it is there would be .govuk-summary-list__card > .govuk-summary-list, which kind of breaks BEM.

[frankieroberto]

I'd agree that the nested hashes are a bit un-Rails like – and make it harder for code editors to assist with autocompletion, etc.

One option could be to unnest the attributes out from a header attribute, something like this:

<%= govuk_summary_list(
  title: "University of Gloucestershire",
  actions: [ {href: "#", text: "Delete choice", visually_hidden_text: " of University of Gloucestershire"} ]
  ) do |summary_list|
  summary_list.row do |row|
     [...]
  end
end %>

Another option might be to use a slot (is that the right term?) for the actions section, and then use a standard link helper (or any other html) within the block:

<%= govuk_summary_list(title: "University of Gloucestershire") do
  summary_list.actions do
    govuk_link_to("Delete choice, "#", visually_hidden_text: " of University of Gloucestershire")
  end
  summary_list.row do |row|
     [...]
  end
end %>

Tricky! Lots of options and trade-offs as you suggest! 🤔

[peteryates]

Ah - I like the idea of unnesting the header. The way it's structured in this PR means it could easily be added, it could simply be a case of:

  def call
    card ? wrap_in_card(summary_list, header: header) : summary_list
  end

private

  def wrap_in_card(contents, header: nil)
    GovukComponent::SummaryListCardComponent.new(header: header) { contents }
  end

That'd give plenty of flexibility on how it's called while maintaining a strong resemblance to the original.

[paulrobertlloyd]

Just a heads up this component should be coming along to GOV.UK Frontend very shortly (it’s in final review)

[peteryates]

I've refreshed this PR and the card can either be added separately outside the summary list or via the header argument. The only difference in implementations in the header arg is that it accepts an array of links (any HTML will work but in the examples they're using a regular <a>). That allows us to combine with govuk_link_to and not reinvent the wheel. There are examples of both approaches in the review app.

[paulrobertlloyd]

Was going to mention that links in a summary card header should be bold, but looking at the latest PR on the design system, see that this detail has reverted. Checking with the team at GDS as to whether this is intentional (we had a long chat before Christmas about ensuring these links are distinct from action links in each row).

[peteryates]

Well spotted. I currently have some custom CSS that I lifted from the original design system PR. Before this gets merged I'll remove it, upgrade to the latest version of govuk-frontend, rebase and make sure everything looks fine (and give you a chance to double check!)

[peteryates]

I think this is more or less there. Mind giving it a once over @paulrobertlloyd?

[paulrobertlloyd]

Love it, 🚢 it!