Update all, but one, <details> to component

Includes:

- in gulpfile.js:
  - add details macro to list of those copied from GOVUK Frontend
  - remove existing details polyfill
- convert all, but one, <details> tags to use GOVUK Frontend details component
- add jinja boolean filter to help setting 'open' attribute of <details> tags

Notes on the `<details>` not included in this:

The `<details>` used for notifications items on
the API integration page is not possible to
reproduce with the GOV.UK Frontend macro so I'm
splitting the resulting work out into it's own
commit.

app/__init__.py

@@ -743,6 +743,7 @@ def add_template_filters(application):
         format_phone_number_human_readable,
         format_thousands,
         id_safe,
+        convert_to_boolean,
     ]:
         application.add_template_filter(fn)
 

app/assets/stylesheets/govuk-frontend/_all.scss

@@ -17,6 +17,7 @@ $govuk-assets-path: "/static/";
 @import 'components/header/_header';
 @import 'components/footer/_footer';
 @import 'components/back-link/_back-link';
+@import 'components/details/_details';
 
 @import "utilities/all";
 @import "overrides/all";

app/templates/views/get-started.html

@@ -1,6 +1,7 @@
 {% extends "content_template.html" %}
 {% from "components/table.html" import mapping_table, row, text_field, edit_field, field with context %}
 {% from "components/sub-navigation.html" import sub_navigation %}
+{% from "components/details/macro.njk" import govukDetails %}
 
 {% block per_page_title %}
   Get started
@@ -14,21 +15,22 @@
   <li class="get-started-list__item">
     <h2 class="get-started-list__heading">Check if GOV.UK Notify is right for you</h2>
     <p>Read about our <a href="{{ url_for('main.features') }}">features</a>, <a href="{{ url_for('.pricing') }}">pricing</a> and <a href="{{ url_for('main.roadmap') }}">roadmap</a>.</p>
-    <details>
+    {{ govukDetails({
-      <summary>Organisations that can use Notify</summary>
+      "summaryText": "Organisations that can use Notify",
-      <div id="eligible-organisations">
+      "html": '''
-        <p>Notify is available to:</p>
+        <div id="eligible-organisations">
-        <ul class="list list-bullet">
+          <p>Notify is available to:</p>
-          <li>central government departments</li>
+          <ul class="list list-bullet">
-          <li>local authorities</li>
+            <li>central government departments</li>
-          <li>state-funded schools</li>
+            <li>local authorities</li>
-          <li>housing associations</li>
+            <li>state-funded schools</li>
-          <li>the NHS</li>
+            <li>housing associations</li>
-          <li>companies owned by local or central government that deliver services on their behalf</li>
+            <li>the NHS</li>
-        </ul>
+            <li>companies owned by local or central government that deliver services on their behalf</li>
-        <p>Notify is not currently available to charities.</p>
+          </ul>
-      </div>
+          <p>Notify is not currently available to charities.</p>
-    </details>
+        </div>'''
+    }) }}
   </li>
 
   <li class="get-started-list__item">

app/templates/views/platform-admin/index.html

@@ -4,6 +4,7 @@
 {% from "components/message-count-label.html" import message_count_label %}
 {% from "components/status-box.html" import status_box %}
 {% from "components/form.html" import form_wrapper %}
+{% from "components/details/macro.njk" import govukDetails %}
 
 {% block per_page_title %}
   Platform admin
@@ -14,15 +15,21 @@
   <h1 class="heading-large">
     Summary
   </h1>
-  <details {% if form.errors %}open{% endif %}>
+
-    <summary>Apply filters</summary>
+  {% set details_content %}
     {% call form_wrapper(method="get") %}
       {{ textbox(form.start_date, hint="Enter start date in format YYYY-MM-DD") }}
       {{ textbox(form.end_date, hint="Enter end date in format YYYY-MM-DD") }}
       </br>
       <button type="submit" class="button">Filter</button>
     {% endcall %}
-  </details>
+  {% endset %}
+
+  {{ govukDetails({
+    "summaryText": "Help with nationality",
+    "html": details_content,
+    "open": form.errors | convert_to_boolean
+  }) }}
 
   <div class="grid-row bottom-gutter">
     {% for noti_type in global_stats %}

app/templates/views/platform-admin/services.html

@@ -6,6 +6,7 @@
 {% from "components/message-count-label.html" import message_count_label %}
 {% from "components/table.html" import mapping_table, field, stats_fields, row_group, row, right_aligned_field_heading, hidden_field_heading, text_field %}
 {% from "components/form.html" import form_wrapper %}
+{% from "components/details/macro.njk" import govukDetails %}
 
 {% macro stats_fields(channel, data) -%}
 
@@ -101,16 +102,21 @@
     {{ page_title|capitalize }}
   </h1>
 
-    <details>
+
-      <summary>Apply filters</summary>
+  {% set details_content %}
-      {% call form_wrapper(method="get") %}
+    {% call form_wrapper(method="get") %}
-        {{ textbox(form.start_date, hint="Enter start date in format YYYY-MM-DD") }}
+      {{ textbox(form.start_date, hint="Enter start date in format YYYY-MM-DD") }}
-        {{ textbox(form.end_date, hint="Enter end date in format YYYY-MM-DD") }}
+      {{ textbox(form.end_date, hint="Enter end date in format YYYY-MM-DD") }}
-        {{ checkbox(form.include_from_test_key) }}
+      {{ checkbox(form.include_from_test_key) }}
-        </br>
+      </br>
-        <button type="submit" class="button">Filter</button>
+      <button type="submit" class="button">Filter</button>
-      {% endcall %}
+    {% endcall %}
-    </details>
+  {% endset %}
+
+  {{ govukDetails({
+    "summaryText": "Apply filters",
+    "html": details_content
+  }) }}
 
   {% include "views/platform-admin/_global_stats.html" %}
 

gulpfile.js

@@ -63,7 +63,8 @@ const copy = {
         'skip-link',
         'header',
         'footer',
-        'back-link'
+        'back-link',
+        'details'
       ];
       let done = 0;
 
@@ -143,7 +144,6 @@ const javascripts = () => {
     paths.src + 'javascripts/govuk/cookie-functions.js',
     paths.src + 'javascripts/cookieMessage.js',
     paths.src + 'javascripts/stick-to-window-when-scrolling.js',
-    paths.src + 'javascripts/detailsPolyfill.js',
     paths.src + 'javascripts/apiKey.js',
     paths.src + 'javascripts/autofocus.js',
     paths.src + 'javascripts/enhancedTextbox.js',