From d13db305c145e13df24407d51fecd3b9bfeaeec4 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Tue, 3 Dec 2019 09:47:48 +0000
Subject: [PATCH]   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 | 73 ++++++++++++++++++---------
 app/templates/views/api/index.html    | 46 +++++++++--------
 2 files changed, 72 insertions(+), 47 deletions(-)

diff --git a/app/assets/stylesheets/views/api.scss b/app/assets/stylesheets/views/api.scss
index 98e21685e..4049c43c5 100644
--- a/app/assets/stylesheets/views/api.scss
+++ b/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 {
-      color: $link-colour;
+    &__heading,
+    &__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 {
-      display: inline;
-    }
+    &__data {
 
-    &-meta {
-      display: block;
-      color: $secondary-text-colour;
-    }
+      border-left: none;
+      padding-left: 25px;
 
-    &-time {
-      text-align: right;
-    }
+      &-name {
+        color: $secondary-text-colour;
+      }
 
-    &-key {
-      display: inline-block;
-      padding-left: 46px;
-    }
-
-    &-data {
-
-      padding-left: 31px;
-      color: $secondary-text-colour;
-
-      &-item {
-        padding-bottom: 15px;
+      &-value {
         color: $text-colour;
+        padding-bottom: 15px;
       }
 
     }
diff --git a/app/templates/views/api/index.html b/app/templates/views/api/index.html
index 9397a97b5..cebb5442d 100644
--- a/app/templates/views/api/index.html
+++ b/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>