Use stimulus to handle data action for copy to clipboard

Add aria-labels to buttons Update tests to include button verification
sul-dlss · Nov 28, 2023 · f2e2d8f · f2e2d8f
1 parent 27ace22
commit f2e2d8f
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 11 deletions.
diff --git a/app/assets/stylesheets/media.scss b/app/assets/stylesheets/media.scss
@@ -125,7 +125,12 @@
         border: none;
       }
 
+      #sul-embed-purl-link {
+        width: calc(100% - 2rem);
+      }
+
       #sul-embed-iframe-code {
+        width: calc(100% - 2rem);
         height: 7rem;
       }
     }

diff --git a/app/components/embed/media/embed_this_form_component.html.erb b/app/components/embed/media/embed_this_form_component.html.erb
@@ -1,9 +1,23 @@
 <div class='sul-embed-embed-this-form'>
-  <label for="sul-embed-purl-link" class="form-label" readonly>Share link</label>
-  <input type="text" name="sul-embed-purl-link" id='sul-embed-purl-link' value="<%= purl_url %>" readonly>
+  <section data-controller="clipboard">
+    <label for="sul-embed-purl-link" class="form-label" readonly>Share link</label>
+    <input type="text" name="sul-embed-purl-link" id='sul-embed-purl-link' data-clipboard-target="value" value="<%= purl_url %>" readonly>
+    <button class="button copy-to-clipboard" data-action="clipboard#copy" aria-label="Copy purl link to clipboard">
+      <svg class="MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="0 0 24 24">
+        <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path>
+      </svg>
+    </button>
+  </section>
 
-  <label for='sul-embed-iframe-code' class="form-label">Embed</label>
-  <textarea id='sul-embed-iframe-code' data-behavior='iframe-code' readonly><%= render IframeComponent.new(viewer:) %></textarea>
+  <section data-controller="clipboard">
+    <label for='sul-embed-iframe-code' class="form-label">Embed</label>
+    <textarea id='sul-embed-iframe-code' data-behavior='iframe-code' data-clipboard-target="value" readonly><%= render IframeComponent.new(viewer:) %></textarea>
+    <button class="button copy-to-clipboard" data-action="clipboard#copy" aria-label="Copy iframe code to clipboard">
+      <svg class="MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="0 0 24 24">
+        <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path>
+      </svg>
+    </button>
+  </section>
 
   <fieldset>
     <legend>Select options:</legend>
@@ -28,10 +42,3 @@
     </div>
   </fieldset>
 </div>
-
-<script>
-function copyToClipboard(component) {
-  const element = document.getElementById(component)
-  navigator.clipboard.writeText(element.value)
-}
-</script>
diff --git a/app/javascript/src/controllers/clipboard_controller.js b/app/javascript/src/controllers/clipboard_controller.js
@@ -0,0 +1,9 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['value']
+
+  copy () {
+    navigator.clipboard.writeText(this.valueTarget.value)
+  }
+}
diff --git a/spec/components/embed/media/embed_this_form_component_spec.rb b/spec/components/embed/media/embed_this_form_component_spec.rb
@@ -21,5 +21,6 @@
     expect(page).to have_css('input#sul-embed-embed-title[type="checkbox"]')
     expect(page).to have_css('input#sul-embed-embed[type="checkbox"]')
     expect(page).to have_css('textarea#sul-embed-iframe-code')
+    expect(page).to have_css('button.copy-to-clipboard')
   end
 end