Update template statistics "dashboard" tables to summary lists

app/assets/stylesheets/_app.scss

@@ -208,3 +208,15 @@ details .arrow {
 .form--inline {
   display: inline-flex;
 }
+
+// paragraph style for no data text
+// used on template statistics
+.no-data {
+  @include govuk-font(16);
+  color: govuk-functional-colour(secondary-text);
+  margin-top: 10px;
+  margin-bottom: govuk-spacing(7);
+  border-top: 1px solid govuk-functional-colour(border);
+  border-bottom: 1px solid govuk-functional-colour(border);
+  padding: 0.75em 0 0.5625em 0;
+}

app/assets/stylesheets/components/spark-bar.scss

@@ -0,0 +1,26 @@
+@use 'govuk/helpers' as *;
+@use 'govuk/settings' as *;
+
+.spark-bar {
+  @include govuk-font(16);
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  margin-bottom: govuk-spacing(3);
+  color: govuk-functional-colour(text);
+  text-align: left;
+}
+
+.spark-bar__bar {
+  @include govuk-font(27, $weight: bold, $tabular: true);
+  box-sizing: border-box;
+  display: inline-block;
+  overflow: visible;
+  background: mix(black, govuk-colour('black', $variant: "tint-95"), 7%);
+  color: govuk-functional-colour(text);
+  padding: 10px 6px 8px 0;
+  text-indent: 12px;
+  text-align: right;
+  margin: 2px 0 1px 0;
+  transition: width 0.6s ease-in-out;
+}

app/assets/stylesheets/components/table.scss

@@ -425,16 +425,6 @@ a.table-show-more-link {
   color: govuk-functional-colour(link);
 }
 
-.table-no-data {
-  @include govuk-font(16);
-  color: govuk-functional-colour(secondary-text);
-  margin-top: 10px;
-  margin-bottom: govuk-spacing(7);
-  border-top: 1px solid govuk-functional-colour(border);
-  border-bottom: 1px solid govuk-functional-colour(border);
-  padding: 0.75em 0 0.5625em 0;
-}
-
 .wide-left-hand-column {
   display: block;
   max-width: 560px;

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

@@ -110,6 +110,25 @@ $govuk-grid-widths: map.merge($govuk-grid-widths, $notify-grid-widths);
 
 }
 
+// summary list with file name and metadata
+// there will be 2 variants
+// 24px filename and 19px metadata - template stats
+// 19px filename and 16px metadata - other lists
+
+.notify-summary-list__filename {
+  @include govuk-typography-weight-bold;
+}
+
+.notify-summary-list__filename--large {
+  @include govuk-font-size(24);
+}
+
+.notify-summary-list__metadata {
+  @include govuk-media-query($from: tablet) {
+    margin-bottom: 0;
+  }
+}
+
 .notify-summary-list__key {
 
   @include govuk-media-query($from: tablet) {
@@ -129,6 +148,14 @@ $govuk-grid-widths: map.merge($govuk-grid-widths, $notify-grid-widths);
 
 }
 
+.notify-summary-list__key--50-100 {
+
+  @include govuk-media-query($from: tablet) {
+    width: 50%;
+  }
+
+}
+
 .govuk-summary-list__value--default {
   color: govuk-functional-colour(secondary-text);
 }

app/assets/stylesheets/main.scss

@@ -49,6 +49,7 @@
 @use 'components/simple-search-form';
 @use 'components/formatting-example';
 @use 'components/sender-email-preview';
+@use 'components/spark-bar';
 @use 'views/branding';
 @use 'views/dashboard';
 @use 'views/users';

app/assets/stylesheets/views/dashboard.scss

@@ -18,33 +18,6 @@
   padding-top: govuk-spacing(3);
 }
 
-.spark-bar {
-
-  @include govuk-font(16);
-  box-sizing: border-box;
-  display: block;
-  width: 100%;
-  margin-bottom: govuk-spacing(3);
-  height: govuk-spacing(3);
-  color: govuk-functional-colour(text);
-  text-align: left;
-
-  &-bar {
-    @include govuk-font(27, $weight: bold, $tabular: true);
-    box-sizing: border-box;
-    display: inline-block;
-    overflow: visible;
-    background: mix(black, govuk-colour('black', $variant: "tint-95"), 7%);
-    color: govuk-functional-colour(text);
-    padding: 10px 6px 8px 0;
-    text-indent: 12px;
-    text-align: right;
-    margin: 2px 0 1px 0;
-    transition: width 0.6s ease-in-out;
-  }
-
-}
-
 .file-list {
 
   // for file-lists with section-like content and a single item

app/templates/components/spark-bar.html

@@ -0,0 +1,11 @@
+{% macro spark_bar(
+  count,
+  max_count,
+  id=None
+) %}
+<span {% if id %}id="{{ id }}"{% endif %} class="spark-bar">
+    <span class="spark-bar__bar" style="width: {{ count / max_count * 100 }}%">
+    {{ '{:,.0f}'.format(count) }}
+    </span>
+</span>
+{% endmacro %}

app/templates/components/table.html

@@ -194,18 +194,3 @@
     {% endcall %}
   {% endif %}
 {% endmacro %}
-
-
-{% macro spark_bar_field(
-  count,
-  max_count,
-  id=None
-) %}
-  {% call field(align='right') %}
-    <span {% if id %}id="{{ id }}"{% endif %} class="spark-bar">
-      <span class="spark-bar-bar" style="width: {{ count / max_count * 100 }}%">
-        {{ '{:,.0f}'.format(count) }}
-      </span>
-    </span>
-  {% endcall %}
-{% endmacro %}

app/templates/views/dashboard/all-template-statistics.html

@@ -1,6 +1,7 @@
 {% from "components/page-header.html" import page_header %}
 {% from "components/pill.html" import pill %}
-{% from "components/table.html" import list_table, row_heading, spark_bar_field %}
+{% from "components/spark-bar.html" import spark_bar %}
+{% from "govuk_frontend_jinja/components/summary-list/macro.html" import govukSummaryList %}
 
 {% extends "withnav_template.html" %}
 
@@ -24,31 +25,36 @@
     {% for month in months %}
       <h2>{{ month.name }}</h2>
       {% if not month.templates_used %}
-        <p class="table-no-data">
+        <p class="govuk-body no-data">
           No messages sent
         </p>
       {% else %}
-        <div class='template-statistics-table'>
-          {% call(item, row_number) list_table(
-            month.templates_used,
-            caption=month.name,
-            caption_visible=False,
-            empty_message='',
-            field_headings=[
-              'Template',
-              'Messages sent'
-            ],
-            field_headings_visible=False
-          ) %}
-            {% call row_heading() %}
-              <a class="govuk-link govuk-link--no-visited-state template-statistics-table-template-name" href="{{ url_for('main.view_template', service_id=current_service.id, template_id=item.id) }}">{{ item.name }}</a>
-              <span class="template-statistics-table-hint">
-                {{ 1|message_count_label(item.type, suffix='template')|capitalize }}
-              </span>
-            {% endcall %}
-            {{ spark_bar_field(item.requested_count, most_used_template_count) }}
-          {% endcall %}
-        </div>
+        {% set templates_used_month_data = [] %}
+        {% for item in month.templates_used %}
+            {% set summary_key_html %}
+              <a class="govuk-link govuk-link--no-visited-state notify-summary-list__filename notify-summary-list__filename--large"
+                href="{{ url_for('main.view_template', service_id=current_service.id, template_id=item.id) }}">
+                {{ item.name }}
+              </a>
+            <p class="govuk-body notify-summary-list__metadata">
+              {{ 1|message_count_label(item.type, suffix='template')|capitalize }}
+            </p>
+            {% endset %}
+            {% do templates_used_month_data.append({
+              "key": {
+                "classes": "notify-summary-list__key notify-summary-list__key--50-100",
+                "html": summary_key_html,
+              },
+              "value": {
+                "html": spark_bar(item.requested_count, most_used_template_count),
+              }
+            }) %}
+        {% endfor %}
+
+        {{ govukSummaryList({
+          "classes": "notify-summary-list",
+          "rows": templates_used_month_data
+        }) }}
       {% endif %}
     {% endfor %}
   </div>

app/templates/views/dashboard/template-statistics-lazy.html

@@ -1,46 +1,39 @@
-{% from "components/table.html" import list_table, row_heading, field %}
 {% from "components/show-more.html" import show_more %}
+{% from "govuk_frontend_jinja/components/summary-list/macro.html" import govukSummaryList %}
 
 <div class="ajax-block-container">
-    <div class='template-statistics-table'>
-      {% call(item, row_number) list_table(
-        [1],
-        caption="By template",
-        caption_visible=True,
-        empty_message='',
-        field_headings=[
-          'Template',
-          'Messages sent'
-        ],
-        field_headings_visible=False
-      ) %}
-
-        {% call row_heading() %}
-          <span class="template-statistics-table-template-name" aria-label="Loading data for templates">
-            <span class="spark-bar">
-              <span class="spark-bar-bar" style="width: 100%">
-                &nbsp;
-              </span>
-            </span>
-          </span>
-          <span class="template-statistics-table-hint">
-            &nbsp;
-          </span>
-        {% endcall %}
-
-        {% call field() %}
-          <span class="spark-bar" aria-label="Loading data for messages sent">
-            <span class="spark-bar-bar" style="width: 100%">
-              &nbsp;
-            </span>
-          </span>
-        {% endcall %}
-
-      {% endcall %}
-      {{ show_more(
-        url_for('main.template_usage', service_id=current_service.id),
-        'See templates used by month',
-        with_border=False
-      ) }}
-    </div>
+    <h3>By template</h3>
+    {% set summary_key_html %}
+      <span class="spark-bar" aria-label="Loading data for templates">
+        <span class="spark-bar__bar" style="width: 100%">
+          &nbsp;
+        </span>
+      </span>
+    {% endset %}
+    {% set summary_value_html %}
+      <span class="spark-bar" aria-label="Loading data for messages sent">
+        <span class="spark-bar__bar" style="width: 100%">
+          &nbsp;
+        </span>
+      </span>
+    {% endset %}
+    {{ govukSummaryList({
+      "classes": "notify-summary-list",
+      "rows": [
+        {
+          "key": {
+            "classes": "notify-summary-list__key notify-summary-list__key--50-100",
+            "html": summary_key_html,
+          },
+          "value": {
+            "html": summary_value_html,
+          }
+        }
+      ]
+    }) }}
+    {{ show_more(
+      url_for('main.template_usage', service_id=current_service.id),
+      'See templates used by month',
+      with_border=False
+    ) }}
 </div>