Make components for nicely formatted lists

We have a couple of places now where we want nice lists made from `list`s, eg

- ‘name’, ‘date’ and ‘phone number’
- ((firstname)) ((lastname)) or ((date))

This commit adds a more generic component for doing this, which can handle:

- 1, 2, and n items
- comma (or other character) separated lists
- a conjunction between the last and one-before-last item
- characters to be inserted before and after each item, eg an opening and
  closing HTML tag

It also pulls the `list_of_placeholders` component from the breaking change
page, and makes it use the `formatted_list` component under the hood.

app/templates/components/list.html

@@ -0,0 +1,37 @@
+{% macro formatted_list(
+  items,
+  conjunction='and',
+  before_each='‘',
+  after_each='’',
+  separator=', ',
+  prefix='',
+  prefix_plural=''
+) %}
+  {% if items|length == 1 %}
+    {{ prefix }} {{ before_each|safe }}{{ (items|list)[0] }}{{ after_each|safe }}
+  {% elif items %}
+    {{ prefix_plural }}
+    {% for item in (items|list)[0:-1] -%}
+      {{ before_each|safe -}}
+      {{ item -}}
+      {{ after_each|safe -}}
+      {% if not loop.last -%}
+        {{ separator -}}
+      {% endif -%}
+    {% endfor %}
+    {{ conjunction }}
+    {{ before_each|safe -}}
+    {{ (items|list)[-1] -}}
+    {{ after_each|safe }}
+  {%- endif %}
+{%- endmacro %}
+
+
+{% macro list_of_placeholders(placeholders) %}
+  {{ formatted_list(
+    placeholders,
+    before_each="<span class='placeholder'>((",
+    after_each='))</span>',
+    separator=' '
+  ) }}
+{%- endmacro %}

app/templates/views/check.html

@@ -6,20 +6,7 @@
 {% from "components/placeholder.html" import placeholder %}
 {% from "components/file-upload.html" import file_upload %}
 {% from "components/page-footer.html" import page_footer %}
-
+{% from "components/list.html" import formatted_list %}
-{% macro list_of_columns(columns, conjunction='and') %}
-  {% if columns|length == 1 %}
-    ‘{{ (columns|list)[0] }}’
-  {% else %}
-    {{
-      "‘{}’ {} ‘{}’".format(
-        "’, ‘".join((columns|list)[0:-1]),
-        conjunction,
-        (columns|list)[-1]
-      )
-    }}
-  {%- endif %}
-{%- endmacro %}
 
 {% block page_title %}
   {{ page_heading if errors else "Check and confirm" }} – GOV.UK Notify
@@ -53,16 +40,19 @@
           your template
         </h1>
         <p>
-          Your file has columns called {{ list_of_columns(recipients.column_headers) }}.
+          Your file has {{ formatted_list(
+            recipients.column_headers,
+            prefix='one column, called',
+            prefix_plural='columns called'
+          ) }}.
         </p>
         <p>
-          It doesn’t have
+          It doesn’t have {{ formatted_list(
-          {% if recipients.missing_column_headers|length == 1 %}
+            recipients.missing_column_headers,
-            a column
+            conjunction='or',
-          {% else %}
+            prefix='a column called',
-            columns
+            prefix_plural='columns called'
-          {% endif %}
+          ) }}.
-          called {{ list_of_columns(recipients.missing_column_headers, 'or') }}.
         </p>
       {% endcall %}
     </div>

app/templates/views/styleguide.html

@@ -10,6 +10,7 @@
 {% from "components/textbox.html" import textbox %}
 {% from "components/file-upload.html" import file_upload %}
 {% from "components/api-key.html" import api_key %}
+{% from "components/list.html" import formatted_list %}
 
 {% block page_title %}
   Styleguide – GOV.UK Notify
@@ -230,4 +231,23 @@
 
   {{ api_key('d30512af92e1386d63b90e5973b49a10') }}
 
+
+  <h2 class="heading-large">Formatted list</h2>
+
+  <p>
+    {{ formatted_list('A', prefix="one item called") }}
+  </p>
+
+  <p>
+    {{ formatted_list('AB', prefix_plural="two items called") }}
+  </p>
+
+  <p>
+    {{ formatted_list('ABC') }}
+  </p>
+
+  <p>
+    {{ formatted_list('ABCD', before_each='<strike>', after_each='</strike>', conjunction='or') }}
+  </p>
+
 {% endblock %}

app/templates/views/templates/breaking-change.html

@@ -2,13 +2,7 @@
 {% from "components/banner.html" import banner_wrapper %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/table.html" import list_table, text_field, index_field, index_field_heading %}
-
+{% from "components/list.html" import list_of_placeholders %}
-{% macro list_of_placeholders(placeholders) %}
-  {% for placeholder in placeholders %}
-    {% if loop.last and loop.length > 1 %} and {% endif %}
-    <span class="placeholder">(({{ placeholder }}))</span>
-  {% endfor %}
-{% endmacro %}
 
 {% block page_title %}
   GOV.UK Notify
@@ -21,8 +15,7 @@
   <div class="bottom-gutter">
     {% if template_change.placeholders_removed %}
       <p>
-        You removed
+        You removed {{ list_of_placeholders(template_change.placeholders_removed) }}
-        {{ list_of_placeholders(template_change.placeholders_removed) }}
       </p>
     {% endif %}
     {% if template_change.placeholders_added %}