Proposal
Extend the summary list component to support call, letting users provide html for individual rows, possibly including a new summaryListRow macro for making individual rows.
Syntax example:
{% call summaryList() %}
{{ fullNameRow }}
{{ dateOfBirthRow }}
{% endcall %}This would then allow each row to be defined (and possibly stored) separately:
{% set fullNameRow %}
{{ summaryListRow({
key: {
text: "Full name"
},
value: {
text: data.participant.fullName
}
}) }}
{% endset %}
{% set dateOfBirthRow %}
{% set dob %}
{{ data.participant.dateOfBirth | formatDate }}<br>
<span class="nhsuk-hint">({{ data.participant.dateOfBirth | formatRelativeDate(true) }} old)</span>
{% endset %}
{{ summaryListRow({
key: {
text: "Date of birth"
},
value: {
html: dob
},
actions: {
items: [{
text: "Change",
href: "#",
visuallyHiddenText: "date of birth"
}]
}
}) }}
{% endset %}What is the issue?
In my service, we've got multiple summary lists that share individual rows. Several summary lists include someone's date of birth or name, whilst other rows are unique. Ideally you would use a common include for shared bits, but with the current summary list you can't do this. There's no easy way to abstract each row so that it can be shared. They could be one large summary list with dynamic logic, but this then means distinct summary lists are forced to be in one template.
Rows may often be quite simple - just a key and a value. But if they have more complex logic for display (such as my date of birth example), there can be quite a bit of template code / Nunjucks alongside used to produce the value.
One option would be for this data to be provided by routes - but you can't provide all the data for the row, you have to provide the key, value, and actions separately. It's also often not ideal for routes to be generating html - this is something Nunjucks is good at.
Example implementation
I made a patched summary list component - that supports call, and a separate component for producing rows.
One catch is that the current css/markup and how it deals with actions. The current component iterates through the rows array to work out if any row has actions, and if not, applies nhsuk-summary-list__row--no-actions to each row. This isn't compatible with being provided the entire html for the row, and it's not ideal for the markup of each row to depend on the markup of other rows.
In my prototype, I worked around this by just assuming other rows have actions unless told otherwise - but ideally we might refactor the css to not need this class at this level.
One solution might to move this class to the parent wrapper and not the individual rows - and then have the summaryList component inspect the the html of the provided rows. Or perhaps just make it a param you need to set if using call.
Proposal
Extend the summary list component to support
call, letting users provide html for individual rows, possibly including a new summaryListRow macro for making individual rows.Syntax example:
This would then allow each row to be defined (and possibly stored) separately:
What is the issue?
In my service, we've got multiple summary lists that share individual rows. Several summary lists include someone's date of birth or name, whilst other rows are unique. Ideally you would use a common include for shared bits, but with the current summary list you can't do this. There's no easy way to abstract each row so that it can be shared. They could be one large summary list with dynamic logic, but this then means distinct summary lists are forced to be in one template.
Rows may often be quite simple - just a key and a value. But if they have more complex logic for display (such as my date of birth example), there can be quite a bit of template code / Nunjucks alongside used to produce the value.
One option would be for this data to be provided by routes - but you can't provide all the data for the row, you have to provide the key, value, and actions separately. It's also often not ideal for routes to be generating html - this is something Nunjucks is good at.
Example implementation
I made a patched summary list component - that supports call, and a separate component for producing rows.
One catch is that the current css/markup and how it deals with actions. The current component iterates through the rows array to work out if any row has actions, and if not, applies
nhsuk-summary-list__row--no-actionsto each row. This isn't compatible with being provided the entire html for the row, and it's not ideal for the markup of each row to depend on the markup of other rows.In my prototype, I worked around this by just assuming other rows have actions unless told otherwise - but ideally we might refactor the css to not need this class at this level.
One solution might to move this class to the parent wrapper and not the individual rows - and then have the summaryList component inspect the the html of the provided rows. Or perhaps just make it a param you need to set if using call.