From a0e78e6102f777a8f462fe20476de8be71053243 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Tue, 25 Aug 2020 10:13:56 +0100
Subject: [PATCH] Changes to API key component

Changes the interface so:
- `name` is a required argument
- the heading is only shown if `name` and `thing`
  match

These changes reflect a pattern observed in how
the component is used in pages.

It's first worth stating what the `thing` and
`name` arguments are.

`thing` is the type of thing the id is, for
example an reply-to email address.
`name` is which one of that type in the page, for
example the reply-to email address for user 1.

In pages where the id is the only one of its type,
these will have the same value.

When it is the only one of its type in a page, it
always has a heading so this makes the heading
appear based on `name` matching `thing`.
---
 app/templates/components/api-key.html | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/app/templates/components/api-key.html b/app/templates/components/api-key.html
index adb3ece3e..57df093a9 100644
--- a/app/templates/components/api-key.html
+++ b/app/templates/components/api-key.html
@@ -1,11 +1,13 @@
-{% macro api_key(key, name, thing="API key", heading=True) %}
-  {% if heading %}
+{% macro api_key(key, name, thing="API key") %}
+  {% if name == thing %}
     <h2 class="api-key__name">
       {{ name }}
     </h2>
   {% endif %}
-  <div data-module="api-key" data-key="{{ key }}" data-thing="{{ thing }}"{% if not heading %}data-name="{{ name }}"{% endif %}>
-    <span class="api-key__key"><span class="govuk-visually-hidden">{{ thing }}: </span>{{ key }}</span>
+  <div data-module="api-key" data-key="{{ key }}" data-thing="{{ thing }}" data-name="{{ name }}">
+    <span class="api-key__key">
+      {% if name != thing %}<span class="govuk-visually-hidden">{{ thing }}: </span>{% endif %}{{ key }}
+    </span>
     <span class="api-key__notice" aria-live="assertive"></span>
   </div>
 {% endmacro %}