adding copy button click event (github#26074)

Author: gracepark

components/lib/events.ts

@@ -245,6 +245,15 @@ function initClipboardEvent() {
   })
 }
 
+function initCopyButtonEvent() {
+  document.documentElement.addEventListener('click', (evt) => {
+    const target = evt.target as HTMLElement
+    const button = target.closest('.js-btn-copy') as HTMLButtonElement
+    if (!button) return
+    sendEvent({ type: EventType.navigate, navigate_label: 'copy icon button' })
+  })
+}
+
 function initLinkEvent() {
   document.documentElement.addEventListener('click', (evt) => {
     const target = evt.target as HTMLElement
@@ -267,6 +276,7 @@ export default function initializeEvents() {
   initPageAndExitEvent() // must come first
   initLinkEvent()
   initClipboardEvent()
+  initCopyButtonEvent()
   initPrintEvent()
   // survey event in ./survey.js
   // experiment event in ./experiment.js

components/rest/CodeBlock.tsx

@@ -34,7 +34,7 @@ export function CodeBlock({ verb, headingLang, codeBlock, highlight }: Props) {
             `${headingLang}`
           )}
           <Tooltip direction="w" aria-label={isCopied ? 'Copied!' : 'Copy to clipboard'}>
-            <button className="btn-octicon" onClick={() => setCopied()}>
+            <button className="js-btn-copy btn-octicon" onClick={() => setCopied()}>
               {isCopied ? <CheckIcon /> : <CopyIcon />}
             </button>
           </Tooltip>
@@ -57,7 +57,7 @@ export function CodeBlock({ verb, headingLang, codeBlock, highlight }: Props) {
         </code>
         {!headingLang && (
           <Tooltip direction="w" aria-label={isCopied ? 'Copied!' : 'Copy to clipboard'}>
-            <button className="btn-octicon" onClick={() => setCopied()}>
+            <button className="js-btn-copy btn-octicon" onClick={() => setCopied()}>
               {isCopied ? <CheckIcon /> : <CopyIcon />}
             </button>
           </Tooltip>