Convert <details> on API page to macro HTML

The GOV.UK Frontend details component macro
  wraps its `<summary>` text in a `<span>`.

  We put a `<h3>` in the `<summary>` (actually valid
  use, based on the spec) so this breaks when the
  `<span>` wraps it.

  This converts the existing `<details>` tag to use
  all the class names the macro creates, but with
  all the `<summary>` contents in the `<h3>`.

  Also adds font-smoothing to the messages on the
  API page. This was previously set globally for
  all fonts in the GOV.UK Template CSS but is now
  just set for the New Transport 'nta' font.
  Included because the messages use the monospace
  font so don't have it by default.

app/assets/stylesheets/views/api.scss

@@ -1,6 +1,8 @@
 .api-notifications {
 
   font-family: monospace;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   border-bottom: 1px solid $border-colour;
 
   &-item {
@@ -8,38 +10,59 @@
     border-top: 1px solid $border-colour;
     padding: 10px 0 0 0;
 
-    &-title {
+    &__heading,
-      color: $link-colour;
+    &__data,
+    &__view {
+      font-family: monospace;
+    }
+
+    &__heading {
+      display: block;
+      margin-bottom: $gutter-half;
+
+      &::before {
+        top: -1.3em;
+      }
+    }
+
+    &__meta {
+
+      display: block;
+      color: $secondary-text-colour;
       text-decoration: none;
-      display: block;
+
+      &-key,
+      &-time {
+        color: $secondary-text-colour;
+        display: inline-block;
+        width: auto;
+      }
+
+      @include govuk-media-query($from: tablet) {
+        &-key,
+        &-time {
+          width: 50%;
+        }
+
+        &-time {
+          text-align: right;
+        }
+      }
+
     }
 
-    &-recipient {
+    &__data {
-      display: inline;
-    }
 
-    &-meta {
+      border-left: none;
-      display: block;
+      padding-left: 25px;
-      color: $secondary-text-colour;
-    }
 
-    &-time {
+      &-name {
-      text-align: right;
+        color: $secondary-text-colour;
-    }
+      }
 
-    &-key {
+      &-value {
-      display: inline-block;
-      padding-left: 46px;
-    }
-
-    &-data {
-
-      padding-left: 31px;
-      color: $secondary-text-colour;
-
-      &-item {
-        padding-bottom: 15px;
         color: $text-colour;
+        padding-bottom: 15px;
       }
 
     }

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">
+      <details class="api-notifications-item govuk-details govuk-!-margin-bottom-0" data-module="govuk-details">
-        <summary class="api-notifications-item-title">
+        <summary class="govuk-details__summary govuk-clearfix api-notifications-item__heading">
-          <h3 class="api-notifications-item-recipient">
+          <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>
+        <div class="govuk-details__text api-notifications-item__data govuk-!-padding-top-0">
-          <dl id="notification-{{ notification.id }}" class="api-notifications-item-data bottom-gutter-1-2">
+          <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>
+                <dt class="api-notifications-item__data-name">{{ key }}:</dt>
-                <dd class="api-notifications-item-data-item">{{ notification[key] }}</dd>
+                <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>