chore: 🤖 replace CopyButton usage with Hds::CopyButton

Author: hashicc

addons/rose/addon/components/rose/code-editor/toolbar/index.hbs

@@ -21,14 +21,11 @@
         data-test-code-editor-toolbar-menu-divider
       ></div>
     {{/if}}
-    <CopyButton
-      @text={{@copyText}}
+    <Hds::Copy::Button
+      @text='Copy code'
+      @textToCopy={{@copyText}}
       @onSuccess={{this.copied}}
-      class='rose-code-editor-toolbar__copy-button'
       data-test-code-editor-toolbar-copy-button
-    >
-      <Hds::Icon @name={{this.copyIconType}} @isInline={{true}} />
-      Copy code
-    </CopyButton>
+    />
   </div>
 </div>

addons/rose/addon/components/rose/code-editor/toolbar/index.js

@@ -4,27 +4,11 @@
  */
 
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { later } from '@ember/runloop';
-
-export const COPY_ICON_TYPE = 'clipboard-copy';
-export const COPIED_ICON_TYPE = 'clipboard-checked';
 
 export default class RoseCodeEditorToolbarComponent extends Component {
-  @tracked copyIconType = COPY_ICON_TYPE;
-
   @action
   copied() {
-    let { onCopy } = this.args;
-    let originalIconType = this.copyIconType;
-
-    this.copyIconType = COPIED_ICON_TYPE;
-
-    if (onCopy) {
-      onCopy();
-    }
-    // eslint-disable-next-line ember/no-runloop
-    later(() => (this.copyIconType = originalIconType), 1000);
+    this.args.onCopy?.();
   }
 }

addons/rose/app/styles/rose/components/code-editor/_index.scss

@@ -67,19 +67,4 @@
       height: sizing.rems(xl);
     }
   }
-
-  &__copy-button {
-    border: none;
-    background-color: inherit;
-    cursor: pointer;
-    color: var(--ui-gray-starker-2);
-    margin-right: sizing.rems(xs);
-    margin-left: sizing.rems(s);
-    height: sizing.rems(xl);
-    white-space: nowrap;
-
-    .hds-icon {
-      vertical-align: top;
-    }
-  }
 }