Empty items should not display in macros

[GrilloPress]

If you use logic on an item in a radio macro or a summary list macro to not display, the outer container still prints on the screen. Creating redundant divs, border and spacing.

When you use logic so that an item is not true, nothing should print.

This issue is the same as found in the govuk-frontend #1494

Example code

Truncated example:

{{ summaryList({
        rows: [{
            key: {
              text: "Contract start date"
            },
            value: {
              text: startDate
            },
            actions: {
              items: [
                {
                  href: "/submit-your-edec/sections/practice-details/return-user/contract-start-date",
                  text: "Change",
                  visuallyHiddenText: "contract start date"
                }
              ]
            }
          } if data['contractType'] == 'apms'
      ]
    }) }}

If true this should print, if not then this should not print.

However, when not true, the outer row still gets printed.

HTML that gets printed when false:

<div class="nhsuk-summary-list__row">
      <dt class="nhsuk-summary-list__key">
        
      </dt>
      <dd class="nhsuk-summary-list__value">
        
      </dd>
      
    </div>

Example in full summary list printing out two extra lines and additional padding:

Suggested fix

Like in the govuk-frontend #1494 the fix should be something like:

1. testing if a row or item is empty and not printing anything if empty
2. add a manual flag inside the row or item to toggle display. This would make it easier to prototype and select if a row should output or not #198

[tomdoughty]

I have had a quick look at this... to implement either solution we need to add a filter to the for in loop inside all necessary files. Therefore I think we should use a custom filter which would cover both suggested fixes. Example below shows how you can hide by setting the hideEmpty attribute or by setting the item to falsey.

In nunjucks config:

env.addFilter('hideEmpty', arr => arr.filter((val) => {
  if (val.hideEmpty || !val) return false;
  return true;
}));

In component:

{% for row in params.rows | hideEmpty %}`
...
{% endfor %}

Example useage:

{{ summaryList({
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Sarah Philips"
      },
    } === false,
    {
      key: {
        text: "Date of birth"
      },
      value: {
        text: "5 January 1978"
      },
      hideEmpty: true
    }
  ]
}) }}

[chrimesdev]

Tom is currently working on this in #533

[chrimesdev]

Looking at improving some Nunjucks macros, so will pick this backup.