cleanup

src/registrar/assets/js/get-gov-admin.js

@@ -212,11 +212,6 @@ function addOrRemoveSessionBoolean(name, add){
 */
 (function (){
 
-    function copyInnerTextToClipboard(elem) {
-        let text = elem.innerText
-        navigator.clipboard.writeText(text)
-    }
-
     function copyToClipboardAndChangeIcon(button) {
         // Assuming the input is the previous sibling of the button
         let input = button.previousElementSibling;
@@ -225,7 +220,7 @@ function addOrRemoveSessionBoolean(name, add){
         if (input) {
             navigator.clipboard.writeText(input.value).then(function() {
                 // Change the icon to a checkmark on successful copy
-                let buttonIcon = button.querySelector('.usa-button__clipboard use');
+                let buttonIcon = button.querySelector('.copy-to-clipboard use');
                 if (buttonIcon) {
                     let currentHref = buttonIcon.getAttribute('xlink:href');
                     let baseHref = currentHref.split('#')[0];
@@ -252,7 +247,7 @@ function addOrRemoveSessionBoolean(name, add){
     }
     
     function handleClipboardButtons() {
-        clipboardButtons = document.querySelectorAll(".usa-button__clipboard")
+        clipboardButtons = document.querySelectorAll(".copy-to-clipboard")
         clipboardButtons.forEach((button) => {
 
             // Handle copying the text to your clipboard,
@@ -275,20 +270,7 @@ function addOrRemoveSessionBoolean(name, add){
         });
     }
 
-    function handleClipboardLinks() {
-        let emailButtons = document.querySelectorAll(".usa-button__clipboard-link");
-        if (emailButtons){
-            emailButtons.forEach((button) => {
-                button.addEventListener("click", ()=>{
-                    copyInnerTextToClipboard(button);
-                })
-            });
-        }
-    }
-
     handleClipboardButtons();
-    handleClipboardLinks();
-
 })();
 
 
@@ -607,7 +589,7 @@ function initializeWidgetOnList(list, parentId) {
 /** An IIFE for copy summary button (appears in DomainRegistry models)
 */
 (function (){
-    const copyButton = document.getElementById('copy-summary-btn');
+    const copyButton = document.getElementById('id-copy-to-clipboard-summary');
 
     if (copyButton) {
         copyButton.addEventListener('click', function() {
@@ -743,11 +725,11 @@ function initializeWidgetOnList(list, parentId) {
             // Use the Clipboard API to write the selected HTML content to the clipboard
             navigator.clipboard.write([
                 new ClipboardItem({
-                    'text/html': new Blob([tempElement.innerHTML], { type: 'text/html' })
+                    'text/plain': new Blob([tempElement.innerHTML], { type: 'text/plain' })
                 })
             ]).then(() => {
                 // Change the icon to a checkmark on successful copy
-                let buttonIcon = copyButton.querySelector('.usa-button__clipboard use');
+                let buttonIcon = copyButton.querySelector('use');
                 if (buttonIcon) {
                     let currentHref = buttonIcon.getAttribute('xlink:href');
                     let baseHref = currentHref.split('#')[0];
@@ -768,6 +750,7 @@ function initializeWidgetOnList(list, parentId) {
 
                 }
                 console.log('Summary copied to clipboard successfully!');
+                console.log(tempElement.innerHTML);
             }).catch(err => {
                 console.error('Failed to copy text: ', err);
             });

src/registrar/assets/sass/_theme/_admin.scss

@@ -369,19 +369,11 @@ input.admin-confirm-button {
         padding: 10px 8px;
         line-height: normal;
     }
-    .usa-icon {
-        top: 2px;
-    }
     a.button:active, a.button:focus {
         text-decoration: none;
     }
 }
 
-.usa-icon {
-    // align icon with x height
-    vertical-align: middle;      
-}
-
 .module--custom {
     a {
         font-size: 13px;
@@ -452,15 +444,12 @@ address.margin-top-neg-1__detail-list {
     }
 }
 
-td button.usa-button__clipboard-link, address.dja-address-contact-list {
+address.dja-address-contact-list {
     font-size: unset;
 }
 
 address.dja-address-contact-list {
     color: var(--body-quiet-color);
-    button.usa-button__clipboard-link {
-        font-size: unset;
-    }
 }
 
 // Mimic the normal label size
@@ -469,11 +458,18 @@ address.dja-address-contact-list {
         font-size: 0.875rem;
         color: var(--body-quiet-color);
     }
+}
 
-    address button.usa-button__clipboard-link, td button.usa-button__clipboard-link {
+// Targets the unstyled buttons in the form
-        font-size: 0.875rem !important;
+.button--clipboard {
-    }
+    color: var(--link-fg);
+}
 
+// Targets the DJA buttom with a nested icon
+button .usa-icon,
+.button .usa-icon,
+.button--clipboard .usa-icon {
+    vertical-align: middle;      
 }
 
 .errors span.select2-selection {
@@ -668,7 +664,7 @@ address.dja-address-contact-list {
     align-items: center;
     
 
-    .usa-button__icon {
+    .usa-button--icon {
         position: absolute;
         right: auto;
         left: 4px;
@@ -686,10 +682,6 @@ address.dja-address-contact-list {
     }
 }
 
-button.usa-button__clipboard {
-    color: var(--link-fg);
-}
-
 .no-outline-on-click:focus {
     outline: none !important;
 }

src/registrar/templates/admin/change_form_object_tools.html

@@ -20,7 +20,7 @@
             </li>
             {% if opts.model_name == 'domainrequest' %}
             <li>
-                <a id="copy-summary-btn" class="usa-button__clipboard" type="button" href="#">
+                <a id="id-copy-to-clipboard-summary" class="button--clipboard" type="button" href="#">
                     <svg class="usa-icon" >
                         <use xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
                     </svg>

src/registrar/templates/admin/input_with_clipboard.html

@@ -8,7 +8,7 @@ Template for an input field with a clipboard
 <div class="admin-icon-group">
     {{ field }}
     <button 
-    class="usa-button usa-button--unstyled padding-left-1 usa-button__icon usa-button__clipboard" 
+    class="usa-button usa-button--unstyled padding-left-1 usa-button--icon button--clipboard copy-to-clipboard" 
     type="button"
     >
         <div class="no-outline-on-click">
@@ -25,7 +25,7 @@ Template for an input field with a clipboard
 <div class="admin-icon-group admin-icon-group__clipboard-link">
     <input aria-hidden="true" class="display-none" value="{{ field.email }}" />
     <button 
-    class="usa-button usa-button--unstyled padding-right-1 usa-button__icon usa-button__clipboard text-no-underline" 
+    class="usa-button usa-button--unstyled padding-right-1 usa-button--icon button--clipboard copy-to-clipboard text-no-underline" 
     type="button"
     >
         <svg 

src/registrar/templates/django/admin/includes/detail_table_fieldset.html

@@ -219,7 +219,7 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
                                 <td class="padding-left-1 text-size-small">
                                     <input aria-hidden="true" class="display-none" value="{{ contact.email }}" />
                                     <button 
-                                    class="usa-button usa-button--unstyled padding-right-1 usa-button__icon usa-button__clipboard usa-button__small-text text-no-underline" 
+                                    class="usa-button usa-button--unstyled padding-right-1 usa-button--icon button--clipboard copy-to-clipboard usa-button__small-text text-no-underline" 
                                     type="button"
                                     >
                                         <svg 

src/registrar/tests/test_admin.py

@@ -584,7 +584,7 @@ class TestDomainInformationAdmin(TestCase):
         self.test_helper.assert_response_contains_distinct_values(response, expected_other_employees_fields)
 
         # Test for the copy link
-        self.assertContains(response, "usa-button__clipboard", count=4)
+        self.assertContains(response, "button--clipboard", count=4)
 
         # cleanup this test
         domain_info.delete()

src/registrar/tests/test_admin_domain.py

@@ -444,7 +444,7 @@ class TestDomainAdminWithClient(TestCase):
         self.assertContains(response, "(555) 555 5557")
 
         # Test for the copy link
-        self.assertContains(response, "usa-button__clipboard")
+        self.assertContains(response, "button--clipboard")
 
         # cleanup from this test
         domain.delete()

src/registrar/tests/test_admin_request.py

@@ -1411,7 +1411,7 @@ class TestDomainRequestAdmin(MockEppLib):
         self.test_helper.assert_response_contains_distinct_values(response, expected_other_employees_fields)
 
         # Test for the copy link
-        self.assertContains(response, "usa-button__clipboard", count=5)
+        self.assertContains(response, "button--clipboard", count=5)
 
         # Test that Creator counts display properly
         self.assertNotContains(response, "Approved domains")