refactor: inline Copy component (#1175)

src/CodeSnippet/CodeSnippet.svelte

@@ -88,15 +88,18 @@
   /** Obtain a reference to the pre HTML element */
   export let ref = null;
 
-  import { createEventDispatcher, tick } from "svelte";
+  import { createEventDispatcher, tick, onMount } from "svelte";
   import ChevronDown16 from "../icons/ChevronDown16.svelte";
   import Button from "../Button/Button.svelte";
-  import Copy from "../Copy/Copy.svelte";
   import CopyButton from "../CopyButton/CopyButton.svelte";
   import CodeSnippetSkeleton from "./CodeSnippetSkeleton.svelte";
 
   const dispatch = createEventDispatcher();
 
+  /** @type {"fade-in" | "fade-out"} */
+  let animation = undefined;
+  let timeout = undefined;
+
   function setShowMoreLess() {
     const { height } = ref.getBoundingClientRect();
     if (height > 0) showMoreLess = ref.getBoundingClientRect().height > 255;
@@ -114,6 +117,10 @@
     if (code === undefined) setShowMoreLess();
     if (code) tick().then(setShowMoreLess);
   }
+
+  onMount(() => {
+    return () => clearTimeout(timeout);
+  });
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
@@ -144,20 +151,35 @@
       </code>
     </span>
   {:else}
-    <Copy
+    <button
+      type="button"
+      aria-live="polite"
+      class:bx--copy="{true}"
+      class:bx--btn--copy="{true}"
+      class:bx--copy-btn--animating="{animation}"
+      class:bx--copy-btn--fade-in="{animation === 'fade-in'}"
+      class:bx--copy-btn--fade-out="{animation === 'fade-out'}"
+      class:bx--snippet="{true}"
+      class:bx--snippet--inline="{type === 'inline'}"
+      class:bx--snippet--expand="{expanded}"
+      class:bx--snippet--light="{light}"
+      class:bx--snippet--wraptext="{wrapText}"
       aria-label="{copyLabel}"
-      aria-describedby="{id}"
-      feedback="{feedback}"
-      feedbackTimeout="{feedbackTimeout}"
-      class="bx--snippet {type && `bx--snippet--${type}`}
-          {type === 'inline' && 'bx--btn--copy'}
-          {expanded && 'bx--snippet--expand'}
-          {light && 'bx--snippet--light'}
-          {hideCopyButton && 'bx--snippet--no-copy'}
-          {wrapText && 'bx--snippet--wraptext'}"
       {...$$restProps}
       on:click
-      on:click="{copyCode}"
+      on:click="{() => {
+        copyCode();
+        if (animation === 'fade-in') return;
+        animation = 'fade-in';
+        timeout = setTimeout(() => {
+          animation = 'fade-out';
+        }, feedbackTimeout);
+      }}"
+      on:animationend="{({ animationName }) => {
+        if (animationName === 'hide-feedback') {
+          animation = undefined;
+        }
+      }}"
       on:mouseover
       on:mouseenter
       on:mouseleave
@@ -165,7 +187,14 @@
       <code id="{id}">
         <slot>{code}</slot>
       </code>
-    </Copy>
+      <span
+        aria-hidden="true"
+        class:bx--assistive-text="{true}"
+        class:bx--copy-btn__feedback="{true}"
+      >
+        {feedback}
+      </span>
+    </button>
   {/if}
 {:else}
   <div

src/CopyButton/CopyButton.svelte

@@ -1,5 +1,9 @@
 <script>
-  /** @extends {"../Copy/Copy.svelte"} CopyProps */
+  /** Set the feedback text shown after clicking the button */
+  export let feedback = "Copied!";
+
+  /** Set the timeout duration (ms) to display feedback text */
+  export let feedbackTimeout = 2000;
 
   /** Set the title and ARIA label for the copy button */
   export let iconDescription = "Copy to clipboard";
@@ -22,15 +26,28 @@
     }
   };
 
-  import Copy from "../Copy/Copy.svelte";
+  import { createEventDispatcher, onMount } from "svelte";
   import Copy16 from "../icons/Copy16.svelte";
-  import { createEventDispatcher } from "svelte";
 
   const dispatch = createEventDispatcher();
+
+  /** @type {"fade-in" | "fade-out"} */
+  let animation = undefined;
+  let timeout = undefined;
+
+  onMount(() => {
+    return () => clearTimeout(timeout);
+  });
 </script>
 
-<Copy
-  class="bx--copy-btn"
+<button
+  type="button"
+  aria-live="polite"
+  class:bx--copy-btn="{true}"
+  class:bx--copy="{true}"
+  class:bx--copy-btn--animating="{animation}"
+  class:bx--copy-btn--fade-in="{animation === 'fade-in'}"
+  class:bx--copy-btn--fade-out="{animation === 'fade-out'}"
   aria-label="{iconDescription}"
   title="{iconDescription}"
   {...$$restProps}
@@ -40,8 +57,26 @@
       copy(text);
       dispatch('copy');
     }
+
+    if (animation === 'fade-in') return;
+    animation = 'fade-in';
+    timeout = setTimeout(() => {
+      animation = 'fade-out';
+    }, feedbackTimeout);
   }}"
   on:animationend
+  on:animationend="{({ animationName }) => {
+    if (animationName === 'hide-feedback') {
+      animation = undefined;
+    }
+  }}"
 >
   <Copy16 class="bx--snippet__icon" />
-</Copy>
+  <span
+    aria-hidden="true"
+    class:bx--assistive-text="{true}"
+    class:bx--copy-btn__feedback="{true}"
+  >
+    {feedback}
+  </span>
+</button>