feat(code-snippet): add copy functionality

- docs: add custom feedback copy text example

docs/src/COMPONENT_API.json

@@ -805,7 +805,7 @@
         {
           "name": "code",
           "kind": "let",
-          "description": "Set the code snippet text\nAlternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>)",
+          "description": "Set the code snippet text\nAlternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>)\nYou must use the `code` prop to copy the code",
           "type": "string",
           "isFunction": false,
           "constant": false,
@@ -989,7 +989,12 @@
           "name": "mouseleave",
           "element": "CodeSnippetSkeleton"
         },
-        { "type": "forwarded", "name": "animationend", "element": "CopyButton" }
+        {
+          "type": "forwarded",
+          "name": "animationend",
+          "element": "CopyButton"
+        },
+        { "type": "dispatched", "name": "copy" }
       ],
       "typedefs": [],
       "rest_props": { "type": "InlineComponent", "name": "CodeSnippetSkeleton" }

docs/src/components/InlineSnippet.svelte

@@ -2,17 +2,10 @@
   export let code = "";
 
   import { CodeSnippet } from "carbon-components-svelte";
-  import copy from "clipboard-copy";
 </script>
 
 <div>
-  <CodeSnippet
-    code="{code}"
-    type="inline"
-    on:click="{() => {
-      copy(code);
-    }}"
-  />
+  <CodeSnippet code="{code}" type="inline" />
 </div>
 
 <style>

docs/src/components/Preview.svelte

@@ -6,7 +6,6 @@
 
   import { CodeSnippet, Button } from "carbon-components-svelte";
   import Launch16 from "carbon-icons-svelte/lib/Launch16";
-  import copy from "clipboard-copy";
   import { url } from "@sveltech/routify";
   import { theme } from "../store";
 
@@ -41,7 +40,7 @@
     {/if}
   </div>
   <div class="code-override">
-    <CodeSnippet type="multi" on:click="{() => copy(codeRaw)}">
+    <CodeSnippet type="multi" code="{codeRaw}">
       {@html code}
     </CodeSnippet>
   </div>

docs/src/pages/_layout.svelte

@@ -105,7 +105,11 @@
           >
             {child.title}
             {#if deprecated.includes(child.title)}
-              <Tag size="sm" type="red" style="margin-top: 0; margin-bottom: 0">
+              <Tag
+                size="sm"
+                type="red"
+                style="margin-top: 0; margin-bottom: 0; cursor: inherit"
+              >
                 Deprecated
               </Tag>
             {/if}
@@ -113,7 +117,7 @@
               <Tag
                 size="sm"
                 type="green"
-                style="margin-top: 0; margin-bottom: 0"
+                style="margin-top: 0; margin-bottom: 0; cursor: inherit"
               >
                 New
               </Tag>

docs/src/pages/components/CodeSnippet.svx

@@ -28,21 +28,27 @@ let comment = `
 </script>
 
 <InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
-  <div class="body-short-01">By design, the copy button does not copy text to the clipboard. You will need to write your own logic. Refer to the <Link href="/recipes/CopyableCodeSnippet">CopyableCodeSnippet recipe</Link> for an example.</div>
+  <div class="body-short-01">As of version 0.32, the CodeSnippet will copy the provided `code` text when clicking the copy button.</div>
 </InlineNotification>
 
 ### Default (single-line)
 
-<CodeSnippet>yarn add -D carbon-components-svelte</CodeSnippet>
+<CodeSnippet code="yarn add -D carbon-components-svelte" />
 
 ### Inline
 
-<CodeSnippet type="inline">rm -rf node_modules/</CodeSnippet>
+<CodeSnippet type="inline" code="rm -rf node_modules/" />
 
 ### Multi-line
 
 <CodeSnippet type="multi" {code} />
 
+### Custom copy feedback text
+
+Use the `feedback` prop to override the default copy button feedback text.
+
+<CodeSnippet type="multi" {code} feedback="Copied to clipboard" />
+
 ### Hidden copy button
 
 <CodeSnippet type="multi" {code} hideCopyButton />
@@ -51,7 +57,7 @@ let comment = `
 
 The `disabled` prop applies only to the `"single"` and `"multi"` code snippet types.
 
-<CodeSnippet disabled>yarn add -D carbon-components-svelte</CodeSnippet>
+<CodeSnippet disabled code="yarn add -D carbon-components-svelte" />
 <br />
 <CodeSnippet disabled type="multi" code="{comment}" />
 

docs/src/pages/index.svelte

@@ -9,7 +9,6 @@
   } from "carbon-components-svelte";
   import TileCard from "../components/TileCard.svelte";
   import { metatags } from "@sveltech/routify";
-  import copy from "clipboard-copy";
 
   metatags.title = "Carbon Components Svelte";
   metatags.description =
@@ -53,21 +52,9 @@
       <Column>
         <h3>Install</h3>
         <h4>Installing with yarn:</h4>
-        <CodeSnippet
-          code="{installYarn}"
-          on:click="{() => {
-            copy(installYarn);
-          }}"
-        />
-
+        <CodeSnippet code="{installYarn}" />
         <h4>Using npm:</h4>
-
-        <CodeSnippet
-          code="{installNpm}"
-          on:click="{() => {
-            copy(installNpm);
-          }}"
-        />
+        <CodeSnippet code="{installNpm}" />
       </Column>
     </Row>
     <Row>

docs/src/pages/recipes/CopyableCodeSnippet.svx

@@ -1,17 +0,0 @@
----
-layout: recipe
----
-
-<script>
-  import Preview from "../../components/Preview.svelte";
-</script>
-
-The [CodeSnippet](/components/CodeSnippet) and [CopyButton](/components/CopyButton) components do not include logic to copy the supplied `code` text.
-
-You can use a third party open source module like [clipboard-copy](https://www.npmjs.com/package/clipboard-copy) that is compatible with modern web browsers.
-
-## clipboard-copy
-
-This documentation website uses [clipboard-copy](https://www.npmjs.com/package/clipboard-copy).
-
-<FileSource src="/framed/CopyableCodeSnippet/CopyableCodeSnippet" />