feat(copy-button): add copy functionality

docs/src/COMPONENT_API.json

@@ -1862,12 +1862,22 @@
           "isFunction": false,
           "constant": false,
           "reactive": false
+        },
+        {
+          "name": "text",
+          "kind": "let",
+          "description": "Specify the text to copy",
+          "type": "string",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
         }
       ],
       "slots": [],
       "events": [
         { "type": "forwarded", "name": "click", "element": "Copy" },
-        { "type": "forwarded", "name": "animationend", "element": "Copy" }
+        { "type": "forwarded", "name": "animationend", "element": "Copy" },
+        { "type": "dispatched", "name": "copy" }
       ],
       "typedefs": [],
       "rest_props": { "type": "InlineComponent", "name": "Copy" },

docs/src/pages/components/CopyButton.svx

@@ -4,13 +4,13 @@
 </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, this component will copy the provided `code` text when clicking the button.</div>
 </InlineNotification>
 
 ### Default
 
-<CopyButton on:click />
+<CopyButton text="Carbon svelte" />
 
-### Custom feedback
+### Custom feedback text
 
-<CopyButton on:click feedback="Copied to clipboard" />
+<CopyButton text="Carbon svelte" feedback="Copied to clipboard" />

docs/src/pages/framed/CopyableCodeSnippet/CopyableCodeSnippet.svelte

@@ -1,8 +0,0 @@
-<script>
-  export let code = "yarn add -D carbon-component-svelte";
-
-  import { CodeSnippet } from "carbon-components-svelte";
-  import copy from "clipboard-copy";
-</script>
-
-<CodeSnippet on:click="{() => copy(code)}" code="{code}" />