Lists

[frankieroberto]

The GOV.UK Design System has styles for lists, but no Nunjucks macros for them.

However we could follow the convention we’ve established with links and add a helper for them anyway?

Possible syntax:

Bullets

<%= govuk_list(type: "bullet") do |list| %>
  <%= list.with_item(text: "apples") %>
  <%= list.with_item(text: "oranges") %>
  <%= list.with_item(text: "pears") %>
<% end %>

Numbered

<%= govuk_list(type: "number") do |list| %>
  <%= list.with_item(text: "Delivery address.") %>
  <%= list.with_item(text: "Payment.") %>
  <%= list.with_item(text: "Confirmation.") %>
<% end %>

Bullets, spaced-out

<%= govuk_list(type: "bullets", spaced: true) do |list| %>
  <%= list.with_item do %>
    constructing, altering, repairing, extending, demolishing or dismantling buildings or structures (whether permanent or not), including offshore installation services
  <% end %>
  <%= list.with_item do %>
    constructing, altering, repairing, extending, demolishing of any works forming, or planned to form, part of the land, including (in particular) walls, roadworks, power lines, electronic communications equipment, aircraft runways, railways, inland waterways, docks and harbours
  <% end %>
<% end %>

You could also choose to use it like this:

<%= govuk_list(type: "bullet") do %>
  <li>apples</li>
  <li>oranges</li>
  <li>pears</li>
<% end %>

Is this helpful? Or overkill, for something you can do with plain HTML easily enough?

[peteryates]

I like the idea of this. I implemented something similar but can't remember where. Would be nice for it to take an array too.

Edit: found it.

[frankieroberto]

Accepting an array as an option is a good idea, I didn't think of that.

Would it be better as a (first) positional argument, like this:

<%= govuk_list(["apples", "oranges", "pears], type: "bullet") do %>

Or a keyword argument:

<%= govuk_list(items: ["apples", "oranges", "pears], type: "bullet") do %>

🤔

[peteryates]

I think it's better with a positional argument. I also think this might be better suited to a helper than a component.

Perhaps it could be worth combining several of our smaller helper files (exit this page, back to top link, skip link, visually hidden) into one GovukUtilityHelper and adding a few extra things people might find handy:

• govuk_list
• govuk_section_break
• govuk_heading_m / govuk_heading_l / govuk_heading_xl
• govuk_main_wrapper / govuk_grid_row / govuk_column("two-thirds") (and friends)
• govuk_p (with arguments for text_align: 'right'/'left'/centre', lead: true/false, small: true/false)

[paulrobertlloyd]

How about govuk_heading(size: 'l') (and similarly govuk_section_break(size: 'l'))?

[frankieroberto]

Ok I'm going to make a start on lists.

Headings and section breaks could follow, if the idea has legs.

[frankieroberto]

Ok, initial implementation in #520.

Given this is a pure helper as opposed to a component, the list.with_item(text: "Blah") doesn’t really make sense, or offer any extra convenience over tag.li "Blah", so I've dropped that.

I ummed and arred over what the values for type should be. :bullets and :numbered are probably more readable, but :bullet and :number are more consistent with the CSS modifier names, if people know those. Could accept both perhaps? The code also already accepts both a symbol or a string.