Merge pull request #3225 from alphagov/fix-details

Add GOV.UK Frontend details component - second attempt

app/templates/admin_template.html

@@ -18,6 +18,9 @@
       .govuk-header__container { border-color: {{header_colour}} }
   </style>
   <meta name="google-site-verification" content="niWnSqImOWz6mVQTYqNb5tFK8HaKSB4b3ED4Z9gtUQ0" />
+  {% block meta_format_detection %}
+    <meta name="format-detection" content="telephone=no">
+  {% endblock %}
   {% block meta %}
   {% endblock %}
 {% endblock %}

app/templates/views/api/index.html

@@ -39,43 +39,45 @@
   <div class="api-notifications">
     {% if not api_notifications.notifications %}
       <div class="api-notifications-item">
-        <p class="api-notifications-item-meta">
+        <p class="api-notifications-item__meta">
           When you send messages via the API they’ll appear here.
         </p>
-        <p class="api-notifications-item-meta">
+        <p class="api-notifications-item__meta">
           Notify deletes messages after 7 days.
         </p>
       </div>
     {% endif %}
     {% for notification in api_notifications.notifications %}
-      <details class="api-notifications-item">
-        <summary class="api-notifications-item-title">
-          <h3 class="api-notifications-item-recipient">
+      <details class="api-notifications-item govuk-details govuk-!-margin-bottom-0" data-module="govuk-details">
+        <summary class="govuk-details__summary govuk-clearfix api-notifications-item__heading">
+          <h3>
+            <span class="govuk-details__summary-text">
             {{ notification.to }}
+            </span>
+            <span class="govuk-grid-row api-notifications-item__meta">
+              <span class="govuk-grid-column-one-half api-notifications-item__meta-key">
+                {{notification.key_name}}
+              </span>
+              <span class="govuk-grid-column-one-half api-notifications-item__meta-time">
+                <time class="timeago" datetime="{{ notification.created_at }}">
+                  {{ notification.created_at|format_delta }}
+                </time>
+              </span>
+            </span>
           </h3>
-          <span class="grid-row api-notifications-item-meta">
-            <span class="column-half api-notifications-item-key">
-              {{notification.key_name}}
-            </span>
-            <span class="column-half api-notifications-item-time">
-              <time class="timeago" datetime="{{ notification.created_at }}">
-                {{ notification.created_at|format_delta }}
-              </time>
-            </span>
-          </span>
         </summary>
-        <div>
-          <dl id="notification-{{ notification.id }}" class="api-notifications-item-data bottom-gutter-1-2">
+        <div class="govuk-details__text api-notifications-item__data govuk-!-padding-top-0">
+          <dl id="notification-{{ notification.id }}">
             {% for key in [
               'id', 'client_reference', 'notification_type', 'created_at', 'updated_at', 'sent_at', 'status'
             ] %}
               {% if notification[key] %}
-                <dt>{{ key }}:</dt>
-                <dd class="api-notifications-item-data-item">{{ notification[key] }}</dd>
+                <dt class="api-notifications-item__data-name">{{ key }}:</dt>
+                <dd class="api-notifications-item__data-value">{{ notification[key] }}</dd>
               {% endif %}
             {% endfor %}
             {% if notification.status not in ('pending-virus-check', 'virus-scan-failed') %}
-              <a href="{{ url_for('.view_notification', service_id=current_service.id, notification_id=notification.id) }}">View {{ message_count_label(1, notification.template.template_type, suffix='') }}</a>
+              <a class="api-notifications-item__view" href="{{ url_for('.view_notification', service_id=current_service.id, notification_id=notification.id) }}">View {{ message_count_label(1, notification.template.template_type, suffix='') }}</a>
             {% endif %}
           </dl>
         </div>
@@ -84,11 +86,11 @@
     {% if api_notifications.notifications %}
       <div class="api-notifications-item">
         {% if api_notifications.notifications|length == 50 %}
-          <p class="api-notifications-item-meta">
+          <p class="api-notifications-item__meta">
             Only showing the first 50 messages.
           </p>
         {% endif %}
-        <p class="api-notifications-item-meta">
+        <p class="api-notifications-item__meta">
           Notify deletes messages after 7 days.
         </p>
       </div>

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>
-      <summary>Organisations that can use Notify</summary>
-      <div id="eligible-organisations">
-        <p>Notify is available to:</p>
-        <ul class="list list-bullet">
-          <li>central government departments</li>
-          <li>local authorities</li>
-          <li>state-funded schools</li>
-          <li>housing associations</li>
-          <li>the NHS</li>
-          <li>companies owned by local or central government that deliver services on their behalf</li>
-        </ul>
-        <p>Notify is not currently available to charities.</p>
-      </div>
-    </details>
+    {{ govukDetails({
+      "summaryText": "Organisations that can use Notify",
+      "html": '''
+        <div id="eligible-organisations">
+          <p>Notify is available to:</p>
+          <ul class="list list-bullet">
+            <li>central government departments</li>
+            <li>local authorities</li>
+            <li>state-funded schools</li>
+            <li>housing associations</li>
+            <li>the NHS</li>
+            <li>companies owned by local or central government that deliver services on their behalf</li>
+          </ul>
+          <p>Notify is not currently available to charities.</p>
+        </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": "Apply filters",
+    "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>
-      {% 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") }}
-        {{ checkbox(form.include_from_test_key) }}
-        </br>
-        <button type="submit" class="button">Filter</button>
-      {% endcall %}
-    </details>
+
+  {% 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") }}
+      {{ checkbox(form.include_from_test_key) }}
+      </br>
+      <button type="submit" class="button">Filter</button>
+    {% endcall %}
+  {% endset %}
+
+  {{ govukDetails({
+    "summaryText": "Apply filters",
+    "html": details_content
+  }) }}
 
   {% include "views/platform-admin/_global_stats.html" %}