feat(CodeSnippet): add copy functionality with external package (#8105)

* feat(CodeSnippet): add copy functionality with external package

* fix(Snippet): propogate onClick after copy

* test(CodeSnippet): add mocked copy-to-clipboard function

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/react/package.json

@@ -48,6 +48,7 @@
     "@carbon/icons-react": "^10.28.0",
     "@carbon/telemetry": "0.0.0-alpha.6",
     "classnames": "2.2.6",
+    "copy-to-clipboard": "^3.3.1",
     "downshift": "5.2.1",
     "flatpickr": "4.6.9",
     "invariant": "^2.2.3",

packages/react/src/components/CodeSnippet/CodeSnippet.js

@@ -16,6 +16,7 @@ import Copy from '../Copy';
 import Button from '../Button';
 import CopyButton from '../CopyButton';
 import getUniqueId from '../../tools/uniqueId';
+import copy from 'copy-to-clipboard';
 
 const { prefix } = settings;
 
@@ -114,6 +115,14 @@ function CodeSnippet({
     handleScroll();
   }, [handleScroll]);
 
+  const handleCopyClick = (evt) => {
+    copy(children);
+
+    if (onClick) {
+      onClick(evt);
+    }
+  };
+
   const codeSnippetClasses = classNames(className, `${prefix}--snippet`, {
     [`${prefix}--snippet--${type}`]: type,
     [`${prefix}--snippet--disabled`]: type !== 'inline' && disabled,
@@ -137,7 +146,7 @@ function CodeSnippet({
     return (
       <Copy
         {...rest}
-        onClick={onClick}
+        onClick={handleCopyClick}
         aria-label={copyLabel || ariaLabel}
         aria-describedby={uid}
         className={codeSnippetClasses}
@@ -177,7 +186,7 @@ function CodeSnippet({
       {!hideCopyButton && (
         <CopyButton
           disabled={disabled}
-          onClick={onClick}
+          onClick={handleCopyClick}
           feedback={feedback}
           iconDescription={copyButtonDescription}
         />

packages/react/src/components/CodeSnippet/__tests__/CodeSnippet-test.js

@@ -15,6 +15,10 @@ import { settings } from 'carbon-components';
 
 const { prefix } = settings;
 
+jest.mock('copy-to-clipboard', () => {
+  return jest.fn();
+});
+
 describe('Code Snippet', () => {
   describe('Renders as expected', () => {
     let snippet;

yarn.lock

@@ -9221,6 +9221,7 @@ __metadata:
     chalk: ^2.3.0
     classnames: 2.2.6
     cli-table: ^0.3.0
+    copy-to-clipboard: ^3.3.1
     core-js: ^3.6.5
     cross-env: ^5.2.0
     css-loader: ^3.4.2
@@ -10871,12 +10872,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"copy-to-clipboard@npm:^3, copy-to-clipboard@npm:^3.0.8":
-  version: 3.2.0
-  resolution: "copy-to-clipboard@npm:3.2.0"
+"copy-to-clipboard@npm:^3, copy-to-clipboard@npm:^3.0.8, copy-to-clipboard@npm:^3.3.1":
+  version: 3.3.1
+  resolution: "copy-to-clipboard@npm:3.3.1"
   dependencies:
     toggle-selection: ^1.0.6
-  checksum: b574ecaed1dcf116fd3578b2a46aad91b7a2891680645322641a8e1b1a07d155355e029c47f21ea1e2ec829c7cccb5e8d441f8b70b8e5507653356b395f0fcb3
+  checksum: 9707f2e405ca4019de1f4194565568acdf3d1dd8a59f7b8f63d0e7257648132b579461e7aeb6140169cb943cf4b6a243b377cf0437d8c10c6f5e5bb3935dea78
   languageName: node
   linkType: hard