QA fixes II

config.js

@@ -397,7 +397,7 @@ const config = {
       fields: {
         componentCodeLanguage: {
           label: 'Select the code language',
-          hint: 'If you have code in 2 or more languages you can add another code example.'
+          hint: 'If you have code in more than one language, add another code block.'
         },
         componentCodeLanguageOther: {
           label: 'Enter the code language'
@@ -472,7 +472,7 @@ const config = {
   ACRONYMS_TO_UPPERCASE: ['url'],
   CHECK_YOUR_ANSWERS_LABEL_OVERRIDES: {
     'component-code-details': {
-      title: 'Code sample',
+      title: 'Code example',
       fields: {
         componentCodeUsage: 'Usage',
         componentCodeLanguage: 'Language',

docs/javascripts/copy.mjs

@@ -9,24 +9,26 @@ export class Copy extends Component {
     super($root)
 
     const $button = document.createElement('button')
+    const id = `copy-button-${Math.random().toString(36).substring(2, 8)}`
     $button.className = 'app-copy-button js-copy-button'
+    $button.setAttribute('id', id)
     $button.setAttribute('aria-live', 'assertive')
     $button.textContent = 'Copy code'
 
     this.$root.insertBefore($button, this.$root.firstChild)
-    this.copyAction()
+    this.copyAction(id)
   }
 
-  copyAction() {
+  copyAction(id) {
     const $pre = this.$root.querySelector('pre')
-
     // Copy to clipboard
     try {
-      new ClipboardJS('.js-copy-button', {
+      new ClipboardJS(`#${id}`, {
         target: function () {
           return $pre
         }
       }).on('success', function (event) {
+        console.log(event)
         event.trigger.textContent = 'Code copied'
         event.clearSelection()
         setTimeout(function () {

docs/stylesheets/components/_example.scss

@@ -22,6 +22,11 @@
 
 .app-example__code {
   position: relative;
+  margin-bottom: govuk-spacing(4);
+
+  pre code {
+    padding-top: govuk-spacing(9);
+  }
 }
 
 .app-example__frame {

docs/stylesheets/components/_tabs.scss

@@ -111,7 +111,6 @@
 
   pre code {
     margin: 0;
-    padding-top: govuk-spacing(9);
     outline: 1px solid transparent;
     background-color: #f7f7f7;
   }

middleware/generate-documentation.js

@@ -161,11 +161,15 @@ ${content}\r\n`
       content += `
 ### Example ${i + 1}: ${language}
 
+<div class="app-example__code" data-module="app-copy">
+
 \`\`\`${hljsLang(language)}
 {% raw %}
 ${code?.componentCode || ''}
 {% endraw %}
 \`\`\`
+
+</div>
 `
       if (code?.componentCodeUsage) {
         content += `

views/community/pages/component-code-details.njk

@@ -10,7 +10,7 @@
     csrfToken: csrfToken
   }) %}
 
-    <p class="govuk-body">You should only send the component code. It should not contain any personally identifiable or sensitive information. You can add more than one code example.</p>
+    <p class="govuk-body">You should only include code for this component. The code block should not contain any personally identifiable or sensitive information. You can add more than one code example.</p>
 
     {% set otherHtml %}
       {{ govukInput({
@@ -104,7 +104,7 @@
       }) }}
       {% if showAddAnother %}
         {{ govukButton({
-          text: "Add another code example",
+          text: "Add another code block",
           classes: "govuk-button--secondary",
           name: "addAnother"
         }) }}