feat: 🎸 enhance copyable with mark element and background color

ui/core/app/components/copyable/index.hbs

@@ -5,18 +5,24 @@
     {{did-insert this.register}}
     {{will-destroy this.destroy}}
   >
-    <span class="copyable-content">
-      {{yield}}
-    </span>
+    {{#if this.copied}}
+      <mark class="copyable-content">
+        {{yield}}
+      </mark>
+    {{else}}
+      <span class="copyable-content">
+        {{yield}}
+      </span>
+    {{/if}}
 
     <Rose::Button
       id={{this.copyableButtonId}}
       aria-describedby={{this.id}}
       class="copyable-button"
       @style="ghost"
-      @iconOnly={{this.icon}}
-      title={{this.copyableButtonText}}
-    >{{this.copyableButtonText}}</Rose::Button>
+      @iconOnly={{if this.copied this.successIcon this.actionIcon}}
+      title={{if this.copied this.successText this.actionText}}
+    >{{this.actionText}}</Rose::Button>
   </span>
 {{else}}
   {{yield}}

ui/core/app/components/copyable/index.js

@@ -3,17 +3,22 @@ import ClipboardJS from 'clipboard';
 import { action } from '@ember/object';
 import { generateComponentID } from 'rose/utilities/component-auto-id';
 import { task, timeout } from 'ember-concurrency';
-import { set } from '@ember/object';
 import { bind } from '@ember/runloop';
+import { tracked } from '@glimmer/tracking';
 
 export default class CopyableComponent extends Component {
 
   // =attributes
 
   id = generateComponentID();
-  icon = 'copy-action';
   copyableButtonId = `copyable-button-${this.id}`;
-  copyableButtonText = this.args.buttonText;
+
+  actionIcon = 'copy-action';
+  successIcon = 'copy-success';
+  actionText = this.args.buttonText;
+  successText = this.args.acknowledgeText;
+
+  @tracked copied = false;
 
   /**
    * A Ember Concurrency-based task that updates copy icon to a success state
@@ -26,11 +31,9 @@ export default class CopyableComponent extends Component {
    * @type {Task}
    */
   @task(function * () {
-    set(this, 'icon', 'copy-success');
-    set(this, 'copyableButtonText', this.args.acknowledgeText);
+    this.copied = true;
     yield timeout(1000);
-    set(this, 'icon', 'copy-action');
-    set(this, 'copyableButtonText', this.args.buttonText);
+    this.copied = false;
   }).drop() successIconTimer;
 
   // =methods
@@ -58,7 +61,7 @@ export default class CopyableComponent extends Component {
    */
   @action
   register() {
-    if(!this.clipboard) {
+    if (!this.clipboard) {
       this.clipboard = new ClipboardJS(`#${this.copyableButtonId}`, {
         text: () => this.args.text,
       });

ui/core/app/styles/app.scss

@@ -100,4 +100,13 @@
     position: relative;
     top: -2px;
   }
+
+  mark {
+    background-color: transparent;
+    animation: fadeBackground 0.75s linear;
+    @keyframes fadeBackground {
+      0%   { background-color: var(--action-subtler-1); }
+      100% { background-color: transparent; }
+    }
+  }
 }