add toggleable icons for the clipboard component

app/javascript/application.js

@@ -47,7 +47,3 @@ window.customElements.define('template-builder', class extends HTMLElement {
     this.appElem?.remove()
   }
 })
-
-document.addEventListener('clipboard-copy', function (event) {
-  console.log('Copied to clipboard') // TODO: Add a toast message
-})

app/javascript/elements/clipboard_copy.js

@@ -99,9 +99,16 @@ async function copy (button) {
     button.dispatchEvent(new CustomEvent('clipboard-copy', { bubbles: true }))
   }
 
+  function toggleActiveIcon () {
+    if (button.classList.contains('swap')) {
+      button.classList.toggle('swap-active')
+    }
+  }
+
   if (text) {
     await copyText(text)
     trigger()
+    toggleActiveIcon()
   } else if (id) {
     const root = 'getRootNode' in Element.prototype ? button.getRootNode() : button.ownerDocument
 
@@ -112,6 +119,7 @@ async function copy (button) {
     if (node) {
       await copyTarget(node)
       trigger()
+      toggleActiveIcon()
     }
   }
 }

app/views/icons/_calendar.html.erb

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
   <path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z" />
   <path d="M16 3v4" />

app/views/icons/_clipboard_copy.html.erb

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" />
+  <path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" />
+  <path d="M9 14l2 2l4 -4" />
+</svg>

app/views/submissions/index.html.erb

@@ -9,8 +9,9 @@
         Share link
       </buttun>
       <input id="share-link-input" autocomplete="off" type="text" class="input input-bordered w-full join-item" value="<%= start_form_url(slug: @template.slug) %>" disabled>
-      <clipboard-copy class="btn btn-neutral btn-square join-item text-white font-bold" for="share-link-input">
+      <clipboard-copy class="btn btn-neutral btn-square join-item text-white font-bold swap swap-active" for="share-link-input">
-        <%= svg_icon('clipboard', class: 'w-6 h-6') %>
+        <%= svg_icon('clipboard', class: 'w-6 h-6 swap-on text-white') %>
+        <%= svg_icon('clipboard_copy', class: 'w-6 h-6 swap-off text-white') %>
       </clipboard-copy>
     </div>
   </div>