Review use indent in our templates

[owenatgov]

What

We use indent across our component templates. Do we still need to do this?

Why

The primary intent of using indent in our context is to make it look tidy when a developer is viewing the source for a page with our components on. There's a question now about how valuable this is based on the reckon that most devs will use dev tools over view source and that we pretty print our HTML.

We should investigate if this is still valuable. If so, we should see if there are things we can do to improve and/or document our use of it. If not, we should remove it.

Notes

Places we use indent

In many of the below examples there are more than one use of indent so look at the whole file as well as the referenced line.

• govuk-frontend/src/govuk/components/button/template.njk

  Line 48 in 853403d

  {{- iconHtml | safe | trim | indent(2, true) if iconHtml -}}

• govuk-frontend/src/govuk/components/checkboxes/template.njk

  Line 85 in 853403d

  }) | indent(6) | trim }}

• govuk-frontend/src/govuk/components/cookie-banner/template.njk

  Line 50 in 853403d

  }) | indent(12) | trim }}

• govuk-frontend/src/govuk/components/date-input/template.njk

  Line 40 in 853403d

  }) | indent(2) | trim }}

• govuk-frontend/src/govuk/components/file-upload/template.njk

  Line 16 in 853403d

  }) | indent(2) | trim }}

• govuk-frontend/src/govuk/components/input/template.njk

  Line 16 in 853403d

  }) | indent(2) | trim }}

• govuk-frontend/src/govuk/components/label/template.njk

  Line 11 in 853403d

  <h1 class="govuk-label-wrapper">{{ labelHtml | safe | indent(2) }}</h1>

• govuk-frontend/src/govuk/components/phase-banner/template.njk

  Line 10 in 853403d

  }) | indent(4) | trim }}

• govuk-frontend/src/govuk/components/radios/template.njk

  Line 25 in 853403d

  }) | indent(2) | trim }}

• govuk-frontend/src/govuk/components/select/template.njk

  Line 16 in 853403d

  }) | indent(2) | trim }}

Extra things to think about

• Could we add something to our load process to auto-indent our HTML?
• Are there other benefits of indent other than for view source?

Who needs to work on this

Developers

Done when

• Confirm why we use indent
• Decide if we should continue using indent or not
• Consider alternatives to using indent/more efficient ways to leverage indent

[colinrotherham]

Turns out that indent() etc is vital to indent included HTML other than the first line

I've added indent() where necessary and formatted all our Nunjucks HTML in:

• Review and fix Nunjucks HTML indentation #4448

[owenatgov]

I'm in the process of reviewing that PR but I don't fully grasp how indent() is vital. Could you elaborate please?

[colinrotherham]

Yeah course, I should say it's vital to "carry the indent level" from the one macro to the next for tidiness sake only

I'll add some examples below using this little unindented macro:

{% macro govukExample() %}
<article>
  <h2>Example</h2>
  <p>Hello Owen</p>
</article>
{% endmacro %}

Without indent

See how the macro contents isn't indented at all?

It appears to indent the macro's 1st HTML line, but that's from the 2 spaces before {{ govukExample() }}

Input

<section>
  <h1>Demo</h1>
  {{ govukExample() }}
</section>

Output

<section>
  <h1>Demo</h1>
  <article>
  <h2>Example</h2>
  <p>Hello Owen</p>
</article>

</section>

Without indent, nested

As above, only the macro's 1st HTML line is indented by the spaces before {{ govukExample() }}

But none of the macro's subsequent HTML lines are indented at all

Input

<div class="govuk-grid-row">
  <div class="govuk-grid-column">
    <section>
      <h1>Demo</h1>
      {{ govukExample() }}
    </section>
  </div>
</div>

Output

<div class="govuk-grid-row">
  <div class="govuk-grid-column">
    <section>
      <h1>Demo</h1>
      <article>
  <h2>Example</h2>
  <p>Hello Owen</p>
</article>

    </section>
  </div>
</div>

With indent

Notice now how indent(2) adds 2 spaces to the macro's 2nd, 3rd and 4th HTML lines too?

Input

<section>
  <h1>Demo</h1>
  {{ govukExample() | trim | indent(2) }}
</section>

Output

<section>
  <h1>Demo</h1>
  <article>
    <h2>Example</h2>
    <p>Hello Owen</p>
  </article>
</section>

With indent, nested

With a nested example we now begin at 6 spaces (not 2) so we need indent(2) indent(6)

But notice how indent(6) still adds 6 spaces to each subsequent macro HTML line?

Input

<div class="govuk-grid-row">
  <div class="govuk-grid-column">
    <section>
      <h1>Demo</h1>
      {{ govukExample() | trim | indent(6) }}
    </section>
  </div>
</div>

Output

<div class="govuk-grid-row">
  <div class="govuk-grid-column">
    <section>
      <h1>Demo</h1>
      <article>
        <h2>Example</h2>
        <p>Hello Owen</p>
      </article>
    </section>
  </div>
</div>

[colinrotherham]

Just a quick variation to the above too

Lots of our formatting issues were with params.html which also needs indenting

For example, take this Nunjucks macro instead:

{% macro govukExample(html) %}
<article>
  {{ html | trim | safe | indent(2) }}
</article>
{% endmacro %}

With indent, nested html param

Taking the macro above, notice how we indent both the macro contents and the {% set html %} param?

1. Nunjucks view applies indent(2) to govukExample() affecting <article> contents
2. Nunjucks macro applies indent(2) to the {% set html %} param contents

Input

{% set html %}
<h1>What about me?<h1>
<p>Indents can be cumulative<p>
{% endset -%}

<section>
  <h1>Demo</h1>
  {{ govukExample(html) | trim | indent(2) }}
</section>

Output

<section>
  <h1>Demo</h1>
  <article>
    <h1>What about me?<h1>
    <p>Indents can be cumulative<p>
  </article>
</section>

[owenatgov]

Cheers Colin that makes sense!

[colinrotherham]

I've added some suggestions to Accordion, Breadcrumbs and Button for @owenatgov to review

[colinrotherham]

Thanks for all these reviews @romaricpascal

Thought I'd got them all but I'd not split out Task list or Tabs so will reopen

You'll see some more PRs coming through shortly

• Fix Nunjucks HTML indentation: Tabs #4764
• Fix Nunjucks HTML indentation: Task list, Tag #4767

[colinrotherham]

@owenatgov All done ✅