From 27ace2284afcad0850d6a29aa7d5b22df1c41888 Mon Sep 17 00:00:00 2001
From: Aaron Collier <aaron.collier@stanford.edu>
Date: Mon, 27 Nov 2023 14:20:57 -0800
Subject: [PATCH 1/2] Use basic javascript to copy content to clipboard

---
 app/assets/stylesheets/media.scss                          | 1 +
 .../embed/media/embed_this_form_component.html.erb         | 7 +++++++
 2 files changed, 8 insertions(+)

diff --git a/app/assets/stylesheets/media.scss b/app/assets/stylesheets/media.scss
index b27201d77..5cf8afd4d 100644
--- a/app/assets/stylesheets/media.scss
+++ b/app/assets/stylesheets/media.scss
@@ -154,6 +154,7 @@
         text-decoration: underline;
         cursor: pointer;
       }
+
     }
   }
 
diff --git a/app/components/embed/media/embed_this_form_component.html.erb b/app/components/embed/media/embed_this_form_component.html.erb
index 74d308024..7f189ae29 100644
--- a/app/components/embed/media/embed_this_form_component.html.erb
+++ b/app/components/embed/media/embed_this_form_component.html.erb
@@ -28,3 +28,10 @@
     </div>
   </fieldset>
 </div>
+
+<script>
+function copyToClipboard(component) {
+  const element = document.getElementById(component)
+  navigator.clipboard.writeText(element.value)
+}
+</script>
\ No newline at end of file

From aaeb4635503b520b71b3bd4377acb9596222dd11 Mon Sep 17 00:00:00 2001
From: Aaron Collier <aaron.collier@stanford.edu>
Date: Mon, 27 Nov 2023 16:51:09 -0800
Subject: [PATCH 2/2] Use stimulus to handle data action for copy to clipboard

Add aria-labels to buttons

Update tests to include button verification
---
 app/assets/stylesheets/media.scss             |  2 +-
 .../media/embed_this_form_component.html.erb  | 29 ++++++++++++-------
 .../src/controllers/clipboard_controller.js   |  9 ++++++
 .../media/embed_this_form_component_spec.rb   |  1 +
 4 files changed, 29 insertions(+), 12 deletions(-)
 create mode 100644 app/javascript/src/controllers/clipboard_controller.js

diff --git a/app/assets/stylesheets/media.scss b/app/assets/stylesheets/media.scss
index 5cf8afd4d..044e8accc 100644
--- a/app/assets/stylesheets/media.scss
+++ b/app/assets/stylesheets/media.scss
@@ -118,7 +118,7 @@
       input[type="text"], textarea {
         margin-bottom: 1rem;
         padding: .375rem .75rem;
-        width: 100%;
+        width: calc(100% - 2rem);
       }
 
       fieldset {
diff --git a/app/components/embed/media/embed_this_form_component.html.erb b/app/components/embed/media/embed_this_form_component.html.erb
index 7f189ae29..dbc344a80 100644
--- 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>
+  <div 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>
+  </div>
 
-  <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>
+  <div 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>
+  </div>
 
   <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>
\ No newline at end of file
diff --git a/app/javascript/src/controllers/clipboard_controller.js b/app/javascript/src/controllers/clipboard_controller.js
new file mode 100644
index 000000000..bf5381c1d
--- /dev/null
+++ 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
index dfb5fc21f..62617e87b 100644
--- 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