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

@@ -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 %}