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/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 %}
-
-{% 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 %}
+{% from "components/list.html" import formatted_list %}
 
 {% 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
-          {% if recipients.missing_column_headers|length == 1 %}
-            a column
-          {% else %}
-            columns
-          {% endif %}
-          called {{ list_of_columns(recipients.missing_column_headers, 'or') }}.
+          It doesn’t have {{ formatted_list(
+            recipients.missing_column_headers,
+            conjunction='or',
+            prefix='a column called',
+            prefix_plural='columns called'
+          ) }}.
         </p>
       {% endcall %}
     </div>