rename api key component to copy_to_clipboard

does what it says on the tin, and is also consistent with prior art:
https://components.publishing.service.gov.uk/component-guide/copy_to_clipboard

app/assets/javascripts/copyToClipboard.js

@@ -3,33 +3,33 @@
 
   if (!document.queryCommandSupported('copy')) return;
 
-  Modules.ApiKey = function() {
+  Modules.CopyToClipboard = function() {
 
     const states = {
-      'keyVisible': (options) => `
-        <span class="api-key__key">
-          ${options.keyLabel ? '<span class="govuk-visually-hidden">' + options.thing + ': </span>' : ''}${options.key}
+      'valueVisible': (options) => `
+        <span class="copy-to-clipboard__value">
+          ${options.valueLabel ? '<span class="govuk-visually-hidden">' + options.thing + ': </span>' : ''}${options.value}
         </span>
-        <span class="api-key__notice govuk-visually-hidden" aria-live="assertive">
+        <span class="copy-to-clipboard__notice govuk-visually-hidden" aria-live="assertive">
           ${options.onload ? '' : options.thing + ' returned to page, press button to copy to clipboard'}
         </span>
-        <button class="govuk-button govuk-button--secondary api-key__button--copy">
+        <button class="govuk-button govuk-button--secondary copy-to-clipboard__button--copy">
           Copy ${options.thing} to clipboard${options.name ? '<span class="govuk-visually-hidden"> for ' + options.name + '</span>' : ''}
         </button>
       `,
-      'keyCopied': (options) => `
-        <span class="api-key__notice" aria-live="assertive">
+      'valueCopied': (options) => `
+        <span class="copy-to-clipboard__notice" aria-live="assertive">
           <span class="govuk-visually-hidden">${options.thing} </span>Copied to clipboard<span class="govuk-visually-hidden">, press button to show in page</span>
         </span>
-        <button class="govuk-button govuk-button--secondary api-key__button--show">
+        <button class="govuk-button govuk-button--secondary copy-to-clipboard__button--show">
           Show ${options.thing}${options.name ? '<span class="govuk-visually-hidden"> for ' + options.name + '</span>' : ''}
         </button>
       `
     };
 
-    this.getRangeFromElement = function (keyElement) {
+    this.getRangeFromElement = function (copyableElement) {
       const range = document.createRange();
-      const childNodes = Array.prototype.slice.call(keyElement.childNodes);
+      const childNodes = Array.prototype.slice.call(copyableElement.childNodes);
       let prefixIndex = -1;
 
       childNodes.forEach((el, idx) => {
@@ -38,15 +38,15 @@
         }
       });
 
-      range.selectNodeContents(keyElement);
-      if (prefixIndex !== -1) { range.setStart(keyElement, prefixIndex + 1); }
+      range.selectNodeContents(copyableElement);
+      if (prefixIndex !== -1) { range.setStart(copyableElement, prefixIndex + 1); }
 
       return range;
     };
 
-    this.copyKey = function(keyElement, callback) {
+    this.copyValueToClipboard = function(copyableElement, callback) {
       var selection = window.getSelection ? window.getSelection() : document.selection,
-          range = this.getRangeFromElement(keyElement);
+          range = this.getRangeFromElement(copyableElement);
 
       selection.removeAllRanges();
       selection.addRange(range);
@@ -59,36 +59,36 @@
 
       const $component = $(component),
             stateOptions = {
-              key: $component.data('key'),
+              value: $component.data('value'),
               thing: $component.data('thing')
             },
             name = $component.data('name');
 
       // if the name is distinct from the thing:
       // - it will be used in the rendering
-      // - the key won't be identified by a heading so needs its own label
+      // - the value won't be identified by a heading so needs its own label
       if (name !== stateOptions.thing) {
         stateOptions.name = name;
-        stateOptions.keyLabel = true;
+        stateOptions.valueLabel = true;
       }
 
       $component
-        .addClass('api-key')
+        .addClass('copy-to-clipboard')
         .css('min-height', $component.height())
-        .html(states.keyVisible($.extend({ 'onload': true }, stateOptions)))
+        .html(states.valueVisible($.extend({ 'onload': true }, stateOptions)))
         .on(
-          'click', '.api-key__button--copy', () =>
-            this.copyKey(
-              $('.api-key__key', component)[0], () =>
+          'click', '.copy-to-clipboard__button--copy', () =>
+            this.copyValueToClipboard(
+              $('.copy-to-clipboard__value', component)[0], () =>
                 $component
-                  .html(states.keyCopied(stateOptions))
+                  .html(states.valueCopied(stateOptions))
                   .find('.govuk-button').focus()
             )
         )
         .on(
-          'click', '.api-key__button--show', () =>
+          'click', '.copy-to-clipboard__button--show', () =>
             $component
-              .html(states.keyVisible(stateOptions))
+              .html(states.valueVisible(stateOptions))
               .find('.govuk-button').focus()
         );
 

app/assets/stylesheets/components/copy-to-clipboard.scss

@@ -1,4 +1,4 @@
-.api-key {
+.copy-to-clipboard {
 
   position: relative;
   padding-bottom: 38px;  // height of button

app/assets/stylesheets/main.scss

@@ -50,7 +50,7 @@ $path: '/static/images/';
 @import 'components/file-upload';
 @import 'components/browse-list';
 @import 'components/email-message';
-@import 'components/api-key';
+@import 'components/copy-to-clipboard';
 @import 'components/vendor/previous-next-navigation';
 @import 'components/radios';
 @import 'components/checkboxes';

app/templates/components/api-key.html

@@ -1,13 +0,0 @@
-{% macro api_key(key, name, thing="API key") %}
-  {% if name|lower == thing|lower %}
-    <h2 class="api-key__name">
-      {{ name }}
-    </h2>
-  {% endif %}
-  <div data-module="api-key" data-key="{{ key }}" data-thing="{{ thing }}" data-name="{{ name }}">
-    <span class="api-key__key">
-      {% if name|lower != thing|lower %}<span class="govuk-visually-hidden">{{ thing }}: </span>{% endif %}{{ key }}
-    </span>
-    <span class="api-key__notice" aria-live="assertive"></span>
-  </div>
-{% endmacro %}

app/templates/components/copy-to-clipboard.html

@@ -0,0 +1,13 @@
+{% macro copy_to_clipboard(value, name, thing) %}
+  {% if name|lower == thing|lower %}
+    <h2 class="copy-to-clipboard__name">
+      {{ name }}
+    </h2>
+  {% endif %}
+  <div data-module="copy-to-clipboard" data-value="{{ value }}" data-thing="{{ thing }}" data-name="{{ name }}">
+    <span class="copy-to-clipboard__value">
+      {% if name|lower != thing|lower %}<span class="govuk-visually-hidden">{{ thing }}: </span>{% endif %}{{ value }}
+    </span>
+    <span class="copy-to-clipboard__notice" aria-live="assertive"></span>
+  </div>
+{% endmacro %}

app/templates/views/api/keys/show.html

@@ -1,6 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/page-footer.html" import page_footer %}
-{% from "components/api-key.html" import api_key %}
+{% from "components/copy-to-clipboard.html" import copy_to_clipboard %}
 
 {% block service_page_title %}
   New API key
@@ -22,7 +22,7 @@
 
     <div class="bottom-gutter-2">
 
-      {{ api_key(
+      {{ copy_to_clipboard(
         '{}-{}-{}'.format(key_name, service_id, secret),
         name='API key',
         thing='API key'

app/templates/views/service-settings/email_reply_to.html

@@ -1,5 +1,5 @@
 {% extends "withnav_template.html" %}
-{% from "components/api-key.html" import api_key %}
+{% from "components/copy-to-clipboard.html" import copy_to_clipboard %}
 {% from "components/page-header.html" import page_header %}
 {% from "components/table.html" import row_group, row, text_field, edit_field, field, boolean_field, list_table with context %}
 {% from "components/button/macro.njk" import govukButton %}
@@ -46,7 +46,7 @@
         <div class="govuk-grid-row">
           <div class="govuk-grid-column-full">
             {% if current_service.count_email_reply_to_addresses > 1 %}
-              {{ api_key(item.id, name=item.email_address, thing="ID") }}
+              {{ copy_to_clipboard(item.id, name=item.email_address, thing="ID") }}
             {% endif %}
           </div>
         </div>

app/templates/views/service-settings/letter-contact-details.html

@@ -1,5 +1,5 @@
 {% extends "withnav_template.html" %}
-{% from "components/api-key.html" import api_key %}
+{% from "components/copy-to-clipboard.html" import copy_to_clipboard %}
 {% from "components/page-header.html" import page_header %}
 {% from "components/table.html" import row_group, row, text_field, edit_field, field, boolean_field, list_table with context %}
 {% from "components/button/macro.njk" import govukButton %}
@@ -59,7 +59,7 @@
         </div>
         {% if letter_contact_details|length  > 1 %}
           {% set first_line_of_contact_block = item.contact_block|normalise_lines|first %}
-          {{ api_key(item.id, name=first_line_of_contact_block, thing="ID") }}
+          {{ copy_to_clipboard(item.id, name=first_line_of_contact_block, thing="ID") }}
         {% endif %}
       </div>
     {% endfor %}

app/templates/views/service-settings/sms-senders.html

@@ -1,5 +1,5 @@
 {% extends "withnav_template.html" %}
-{% from "components/api-key.html" import api_key %}
+{% from "components/copy-to-clipboard.html" import copy_to_clipboard %}
 {% from "components/page-header.html" import page_header %}
 {% from "components/table.html" import row_group, row, text_field, edit_field, field, boolean_field, list_table with context%}
 {% from "components/button/macro.njk" import govukButton %}
@@ -46,7 +46,7 @@
           </div>
         </div>
         {% if current_service.count_sms_senders > 1 %}
-          {{ api_key(item.id, name=item.sms_sender, thing="ID") }}
+          {{ copy_to_clipboard(item.id, name=item.sms_sender, thing="ID") }}
         {% endif %}
       </div>
     {% endfor %}

app/templates/views/templates/template.html

@@ -2,7 +2,7 @@
 {% from "components/banner.html" import banner_wrapper %}
 {% from "components/folder-path.html" import folder_path, page_title_folder_path %}
 {% from "components/page-footer.html" import page_footer %}
-{% from "components/api-key.html" import api_key %}
+{% from "components/copy-to-clipboard.html" import copy_to_clipboard %}
 {% from "components/button/macro.njk" import govukButton %}
 
 {% block service_page_title %}
@@ -47,7 +47,7 @@
 
   {% if template.template_type != 'broadcast' %}
     <div class="bottom-gutter-1-2">
-      {{ api_key(template.id, name="Template ID", thing='template ID') }}
+      {{ copy_to_clipboard(template.id, name="Template ID", thing='template ID') }}
     </div>
   {% endif %}